migrate more containers

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   export function wrapHandler(
     handler: (evt: MouseEvent) => void,
     container: HTMLDivElement
@@ -37,7 +37,7 @@
   import type { Node, Edge, InternalNode } from '$lib/types';
   import type { PaneProps } from './types';
   let {
-    panOnDrag,
+    panOnDrag = true,
     selectionOnDrag,
     onpaneclick,
     onpanecontextmenu,
@@ -59,6 +59,7 @@
     unselectNodesAndEdges
   } = useStore();
 
+  // svelte-ignore non_reactive_update
   let container: HTMLDivElement;
   let containerBounds: DOMRect | null = null;
   let selectedNodes: InternalNode[] = [];

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -242,23 +242,16 @@
     {onMoveStart}
     {onMove}
     {onMoveEnd}
-    panOnScrollMode={panOnScrollMode === undefined ? PanOnScrollMode.Free : panOnScrollMode}
+    {panOnScrollMode}
-    preventScrolling={preventScrolling === undefined ? true : preventScrolling}
+    {preventScrolling}
-    zoomOnScroll={zoomOnScroll === undefined ? true : zoomOnScroll}
+    {zoomOnScroll}
-    zoomOnDoubleClick={zoomOnDoubleClick === undefined ? true : zoomOnDoubleClick}
+    {zoomOnDoubleClick}
-    zoomOnPinch={zoomOnPinch === undefined ? true : zoomOnPinch}
+    {zoomOnPinch}
-    panOnScroll={panOnScroll === undefined ? false : panOnScroll}
+    {panOnScroll}
-    panOnDrag={panOnDrag === undefined ? true : panOnDrag}
+    {panOnDrag}
-    paneClickDistance={paneClickDistance === undefined ? 0 : paneClickDistance}
+    {paneClickDistance}
   >
-    <Pane
+    <Pane {nodes} {edges} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
-      {nodes}
-      {edges}
-      {onpaneclick}
-      {onpanecontextmenu}
-      panOnDrag={panOnDrag === undefined ? true : panOnDrag}
-      {selectionOnDrag}
-    >
       <ViewportComponent>
         <EdgeRenderer
           on:edgeclick

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import { useStore } from '$lib/store';
+  import type { Snippet } from 'svelte';
 
   const { viewport } = useStore();
+
+  let { children }: { children: Snippet } = $props();
 </script>
 
 <div
   class="svelte-flow__viewport xyflow__viewport"
   style="transform: translate({$viewport.x}px, {$viewport.y}px) scale({$viewport.zoom})"
 >
-  <slot />
+  {@render children()}
 </div>
 
 <style>

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -6,20 +6,21 @@
   import zoom from '$lib/actions/zoom';
   import type { ZoomProps } from './types';
 
-  type $$Props = ZoomProps;
+  let {
-
+    initialViewport = { x: 0, y: 0, zoom: 1 },
-  export let initialViewport: $$Props['initialViewport'] = undefined;
+    onMoveStart,
-  export let onMoveStart: $$Props['onMoveStart'] = undefined;
+    onMove,
-  export let onMove: $$Props['onMove'] = undefined;
+    onMoveEnd,
-  export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
+    panOnScrollMode = PanOnScrollMode.Free,
-  export let panOnScrollMode: $$Props['panOnScrollMode'];
+    preventScrolling = true,
-  export let preventScrolling: $$Props['preventScrolling'];
+    zoomOnScroll = true,
-  export let zoomOnScroll: $$Props['zoomOnScroll'];
+    zoomOnDoubleClick = true,
-  export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'];
+    zoomOnPinch = true,
-  export let zoomOnPinch: $$Props['zoomOnPinch'];
+    panOnDrag = true,
-  export let panOnDrag: $$Props['panOnDrag'];
+    panOnScroll = false,
-  export let panOnScroll: $$Props['panOnScroll'];
+    paneClickDistance = 1,
-  export let paneClickDistance: $$Props['paneClickDistance'];
+    children
+  }: ZoomProps = $props();
 
   const {
     viewport,
@@ -35,9 +36,8 @@
     viewportInitialized
   } = useStore();
 
-  $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
+  let panOnDragActive = $derived($panActivationKeyPressed || panOnDrag);
-  $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
+  let panOnScrollActive = $derived($panActivationKeyPressed || panOnScroll);
-  $: _panOnScroll = $panActivationKeyPressed || panOnScroll;
 
   const onTransformChange = (transform: Transform) =>
     viewport.set({ x: transform[0], y: transform[1], zoom: transform[2] });
@@ -53,7 +53,7 @@
     viewport,
     minZoom: $minZoom,
     maxZoom: $maxZoom,
-    initialViewport: viewPort,
+    initialViewport,
     dragging,
     panZoom,
     onPanZoomStart: onMoveStart,
@@ -62,8 +62,8 @@
     zoomOnScroll,
     zoomOnDoubleClick,
     zoomOnPinch,
-    panOnScroll: _panOnScroll,
+    panOnScroll: panOnScrollActive,
-    panOnDrag: _panOnDrag,
+    panOnDrag: panOnDragActive,
     panOnScrollSpeed: 0.5,
     panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
     zoomActivationKeyPressed: $zoomActivationKeyPressed,
@@ -77,7 +77,7 @@
     onTransformChange
   }}
 >
-  <slot />
+  {@render children()}
 </div>
 
 <style>

packages/svelte/src/lib/container/Zoom/types.ts

@@ -1,4 +1,5 @@
 import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode, Viewport } from '@xyflow/system';
+import type { Snippet } from 'svelte';
 
 export type ZoomProps = {
   initialViewport?: Viewport;
@@ -13,4 +14,5 @@ export type ZoomProps = {
   panOnScroll: boolean;
   panOnDrag: boolean | number[];
   paneClickDistance: number;
+  children: Snippet;
 };