migrate Controls

packages/svelte/src/lib/plugins/Controls/ControlButton.svelte

@@ -3,28 +3,29 @@
 
   import type { ControlButtonProps } from './types';
 
-  type $$Props = ControlButtonProps;
-
-  let className: $$Props['class'] = undefined;
-  let bgColor: $$Props['bgColor'] = undefined;
-  let bgColorHover: $$Props['bgColorHover'] = undefined;
-  let color: $$Props['color'] = undefined;
-  let colorHover: $$Props['colorHover'] = undefined;
-  let borderColor: $$Props['borderColor'] = undefined;
-
-  export { className as class };
+  let {
+    class: className,
+    bgColor,
+    bgColorHover,
+    color,
+    colorHover,
+    borderColor,
+    onclick,
+    children,
+    ...restProps
+  }: ControlButtonProps = $props();
 </script>
 
 <button
   type="button"
-  on:click
+  {onclick}
   class={cc(['svelte-flow__controls-button', className])}
   style:--xy-controls-button-background-color-props={bgColor}
   style:--xy-controls-button-background-color-hover-props={bgColorHover}
   style:--xy-controls-button-color-props={color}
   style:--xy-controls-button-color-hover-props={colorHover}
   style:--xy-controls-button-border-color-props={borderColor}
-  {...$$restProps}
+  {...restProps}
 >
-  <slot class="button-svg" />
+  {@render children?.()}
 </button>

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -12,35 +12,36 @@
 
   import type { ControlsProps } from './types';
 
-  type $$Props = ControlsProps;
-
-  export let position: $$Props['position'] = 'bottom-left';
-  export let showZoom: $$Props['showZoom'] = true;
-  export let showFitView: $$Props['showFitView'] = true;
-  export let showLock: $$Props['showLock'] = true;
-  export let buttonBgColor: $$Props['buttonBgColor'] = undefined;
-  export let buttonBgColorHover: $$Props['buttonBgColorHover'] = undefined;
-  export let buttonColor: $$Props['buttonColor'] = undefined;
-  export let buttonColorHover: $$Props['buttonColorHover'] = undefined;
-  export let buttonBorderColor: $$Props['buttonColorHover'] = undefined;
-  export let ariaLabel: $$Props['aria-label'] = undefined;
-  export let style: $$Props['style'] = undefined;
-  export let orientation: $$Props['orientation'] = 'vertical';
-  export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
-
-  let className: $$Props['class'] = '';
-  export { className as class };
+  let {
+    position = 'bottom-left',
+    orientation = 'vertical',
+    showZoom = true,
+    showFitView = true,
+    showLock = true,
+    style,
+    class: className,
+    buttonBgColor,
+    buttonBgColorHover,
+    buttonColor,
+    buttonColorHover,
+    buttonBorderColor,
+    'aria-label': ariaLabel,
+    fitViewOptions,
+    children,
+    before,
+    after
+  }: ControlsProps = $props();
 
   const {
-    zoomIn,
-    zoomOut,
-    fitView,
     viewport,
     minZoom,
     maxZoom,
     nodesDraggable,
     nodesConnectable,
-    elementsSelectable
+    elementsSelectable,
+    zoomIn,
+    zoomOut,
+    fitView
   } = useStore();
 
   const buttonProps = {
@@ -51,9 +52,10 @@
     borderColor: buttonBorderColor
   };
 
-  $: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
-  $: minZoomReached = $viewport.zoom <= $minZoom;
-  $: maxZoomReached = $viewport.zoom >= $maxZoom;
+  let isInteractive = $state($nodesDraggable || $nodesConnectable || $elementsSelectable);
+  let minZoomReached = $derived($viewport.zoom <= $minZoom);
+  let maxZoomReached = $derived($viewport.zoom >= $maxZoom);
+  let orientationClass = $derived(orientation === 'horizontal' ? 'horizontal' : 'vertical');
 
   const onZoomInHandler = () => {
     zoomIn();
@@ -74,8 +76,6 @@
     nodesConnectable.set(isInteractive);
     elementsSelectable.set(isInteractive);
   };
-
-  $: orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
 </script>
 
 <Panel
@@ -85,10 +85,12 @@
   aria-label={ariaLabel ?? 'Svelte Flow controls'}
   {style}
 >
-  <slot name="before" />
+  {#if before}
+    {@render before()}
+  {/if}
   {#if showZoom}
     <ControlButton
-      on:click={onZoomInHandler}
+      onclick={onZoomInHandler}
       class="svelte-flow__controls-zoomin"
       title="zoom in"
       aria-label="zoom in"
@@ -98,7 +100,7 @@
       <PlusIcon />
     </ControlButton>
     <ControlButton
-      on:click={onZoomOutHandler}
+      onclick={onZoomOutHandler}
       class="svelte-flow__controls-zoomout"
       title="zoom out"
       aria-label="zoom out"
@@ -111,7 +113,7 @@
   {#if showFitView}
     <ControlButton
       class="svelte-flow__controls-fitview"
-      on:click={onFitViewHandler}
+      onclick={onFitViewHandler}
       title="fit view"
       aria-label="fit view"
       {...buttonProps}
@@ -122,7 +124,7 @@
   {#if showLock}
     <ControlButton
       class="svelte-flow__controls-interactive"
-      on:click={onToggleInteractivity}
+      onclick={onToggleInteractivity}
       title="toggle interactivity"
       aria-label="toggle interactivity"
       {...buttonProps}
@@ -130,6 +132,10 @@
       {#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}
     </ControlButton>
   {/if}
-  <slot />
-  <slot name="after" />
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if after}
+    {@render after()}
+  {/if}
 </Panel>

packages/svelte/src/lib/plugins/Controls/types.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { PanelPosition } from '@xyflow/system';
 
@@ -19,10 +20,14 @@ export type ControlsProps = {
   buttonBgColorHover?: string;
   buttonColor?: string;
   buttonColorHover?: string;
+  buttonBorderColor?: string;
   'aria-label'?: string;
   style?: string;
   class?: string;
   orientation?: 'horizontal' | 'vertical';
+  children?: Snippet;
+  before?: Snippet;
+  after?: Snippet;
   fitViewOptions?: FitViewOptions;
 };
 
@@ -33,4 +38,5 @@ export type ControlButtonProps = HTMLButtonAttributes & {
   color?: string;
   colorHover?: string;
   borderColor?: string;
+  children?: Snippet;
 };