start to migrate

examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte

@@ -1,15 +1,7 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	let { isConnectable }: NodeProps = $props();
-
-	interface Props {
-		isConnectable: $$Props['isConnectable'];
-		[key: string]: any
-	}
-
-	let { isConnectable, ...rest }: Props = $props();
-	rest;
 
 	const handleStyle = 'width: 10px; height: 10px; bottom: -5px;';
 </script>

examples/svelte/src/routes/examples/customnode/CustomNode.svelte

@@ -2,16 +2,7 @@
 	import type { Writable } from 'svelte/store';
 	import { Handle, Position, type NodeProps, type Node } from '@xyflow/svelte';
 
-	type $$Props = NodeProps<Node<{ colorStore: Writable<string> }>>;
+	let { data }: NodeProps<Node<{ colorStore: Writable<string> }>> = $props();
-
-	interface Props {
-		data: $$Props['data'];
-		[key: string]: any
-	}
-
-	let { data, ...rest }: Props = $props();
-
-	rest;
 
 	const { colorStore } = data;
 </script>

examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte

@@ -1,14 +1,7 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps, type Connection } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	let { id }: NodeProps = $props();
-
-	interface Props {
-		id: $$Props['id'];
-		[key: string]: any
-	}
-
-	let { id, ...rest }: Props = $props();
 
 	function onConnectTarget(connection: Connection[]) {
 		console.log('connect target', connection);
@@ -25,8 +18,6 @@
 	function onDisconnectSource(connection: Connection[]) {
 		console.log('disconnect source', connection);
 	}
-
-	rest;
 </script>
 
 <div class="custom">

examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte

@@ -1,15 +1,7 @@
 <script lang="ts">
 	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	let { data }: NodeProps = $props();
-	rest;
-
-	interface Props {
-		data: $$Props['data'];
-		[key: string]: any
-	}
-
-	let { data, ...rest }: Props = $props();
 </script>
 
 <NodeToolbar

examples/svelte/src/routes/examples/overview/CustomNode.svelte

@@ -1,17 +1,11 @@
 <script lang="ts">
 	import { Handle, Position, type BuiltInNode, type NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps<BuiltInNode>;
+	let {
-	rest;
+		data = { label: 'Node' },
-
+		positionAbsoluteX = 0,
-	interface Props {
+		positionAbsoluteY = 0
-		data?: { label: string };
+	}: NodeProps = $props();
-		positionAbsoluteX?: number;
-		positionAbsoluteY?: number;
-		[key: string]: any
-	}
-
-	let { data = { label: 'Node' }, positionAbsoluteX = 0, positionAbsoluteY = 0, ...rest }: Props = $props();
 </script>
 
 <div class="custom">

examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte

@@ -1,15 +1,7 @@
 <script lang="ts">
 	import type { BuiltInNode, NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps<BuiltInNode>;
+	let { data = { label: 'Node' } }: NodeProps<BuiltInNode> = $props();
-	rest;
-
-	interface Props {
-		data?: { label: string };
-		[key: string]: any
-	}
-
-	let { data = { label: 'Node' }, ...rest }: Props = $props();
 </script>
 
 <div class="custom">

examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte

@@ -8,22 +8,16 @@
 	} from '@xyflow/svelte';
 	import { isTextNode, type MyNode } from './+page.svelte';
 
-	type $$Props = NodeProps;
+	let { id }: NodeProps = $props();
-
-	interface Props {
-		id: $$Props['id'];
-		[key: string]: any
-	}
-
-	let { id, ...rest }: Props = $props();
-	rest;
 
 	const connections = useHandleConnections({
 		nodeId: id,
 		type: 'target'
 	});
 
-	let nodeData = $derived(useNodesData<MyNode>($connections.map((connection) => connection.source)));
+	let nodeData = $derived(
+		useNodesData<MyNode>($connections.map((connection) => connection.source))
+	);
 	let textNodes = $derived($nodeData.filter(isTextNode));
 </script>
 

examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte

@@ -1,18 +1,9 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps, useSvelteFlow } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	let { id, data }: NodeProps = $props();
-
-	interface Props {
-		id: $$Props['id'];
-		data: $$Props['data'];
-		[key: string]: any
-	}
-
-	let { id, data, ...rest }: Props = $props();
 
 	const { updateNodeData } = useSvelteFlow();
-	rest;
 </script>
 
 <div class="custom">

examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte

@@ -1,21 +1,12 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps, useUpdateNodeInternals } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	let { id }: NodeProps = $props();
-
-	interface Props {
-		id: $$Props['id'];
-		[key: string]: any
-	}
-
-	let { id, ...rest }: Props = $props();
-	rest;
 
 	const updateNodeInternals = useUpdateNodeInternals();
 
 	let handleCount = $state(1);
 
-
 	const onClick = () => {
 		handleCount += 1;
 		updateNodeInternals(id);

packages/svelte/package.json

@@ -79,7 +79,7 @@
     "svelte-eslint-parser": "^0.43.0",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "typescript": "5.4.2"
+    "typescript": "^5.5.0"
   },
   "peerDependencies": {
     "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"

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

@@ -19,79 +19,93 @@
   import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
   import { useColorModeClass } from '$lib/hooks/useColorModeClass';
 
-  type $$Props = SvelteFlowProps;
+  let {
+    id = '1',
+    nodes,
+    edges,
+    fitView,
+    fitViewOptions,
+    minZoom,
+    maxZoom,
+    initialViewport,
+    viewport,
+    nodeTypes,
+    edgeTypes,
+    selectionKey,
+    selectionMode,
+    panActivationKey,
+    multiSelectionKey,
+    zoomActivationKey,
+    nodesDraggable,
+    nodesConnectable,
+    nodeDragThreshold,
+    elementsSelectable,
+    snapGrid,
+    deleteKey,
+    connectionRadius,
+    connectionLineType,
+    connectionMode = ConnectionMode.Strict,
+    connectionLineStyle = '',
+    connectionLineContainerStyle = '',
+    onMoveStart,
+    onMove,
+    onMoveEnd,
+    isValidConnection,
+    translateExtent,
+    nodeExtent,
+    onlyRenderVisibleElements,
+    panOnScrollMode = PanOnScrollMode.Free,
+    preventScrolling = true,
+    zoomOnScroll = true,
+    zoomOnDoubleClick = true,
+    zoomOnPinch = true,
+    panOnScroll = false,
+    panOnDrag = true,
+    selectionOnDrag,
+    autoPanOnConnect = true,
+    autoPanOnNodeDrag = true,
+    onerror,
+    ondelete,
+    onedgecreate,
+    attributionPosition,
+    proOptions,
+    defaultEdgeOptions,
+    width,
+    height,
+    colorMode = 'light',
+    onconnect,
+    onconnectstart,
+    onconnectend,
+    onbeforedelete,
+    oninit,
+    nodeOrigin,
+    paneClickDistance = 0,
+    nodeClickDistance = 0,
+    defaultMarkerColor = '#b1b1b7',
+    style,
+    class: className,
+    connectionLine,
+    children,
+    onnodeclick,
+    onnodecontextmenu,
+    onnodedrag,
+    onnodedragstart,
+    onnodedragstop,
+    onnodemouseenter,
+    onnodemousemove,
+    onnodemouseleave,
+    onselectionclick,
+    onselectioncontextmenu,
+    onedgeclick,
+    onedgecontextmenu,
+    onedgemouseenter,
+    onedgemouseleave,
+    ...rest
+  }: SvelteFlowProps = $props();
 
-  export let id: $$Props['id'] = '1';
+  let domNode = $state<HTMLDivElement>();
-  export let nodes: $$Props['nodes'];
+  let clientWidth = $state<number>();
-  export let edges: $$Props['edges'];
+  let clientHeight = $state<number>();
-  export let fitView: $$Props['fitView'] = undefined;
-  export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
-  export let minZoom: $$Props['minZoom'] = undefined;
-  export let maxZoom: $$Props['maxZoom'] = undefined;
-  export let initialViewport: $$Props['initialViewport'] = undefined;
-  export let viewport: $$Props['viewport'] = undefined;
-  export let nodeTypes: $$Props['nodeTypes'] = undefined;
-  export let edgeTypes: $$Props['edgeTypes'] = undefined;
-  export let selectionKey: $$Props['selectionKey'] = undefined;
-  export let selectionMode: $$Props['selectionMode'] = undefined;
-  export let panActivationKey: $$Props['panActivationKey'] = undefined;
-  export let multiSelectionKey: $$Props['multiSelectionKey'] = undefined;
-  export let zoomActivationKey: $$Props['zoomActivationKey'] = undefined;
-  export let nodesDraggable: $$Props['nodesDraggable'] = undefined;
-  export let nodesConnectable: $$Props['nodesConnectable'] = undefined;
-  export let nodeDragThreshold: $$Props['nodeDragThreshold'] = undefined;
-  export let elementsSelectable: $$Props['elementsSelectable'] = undefined;
-  export let snapGrid: $$Props['snapGrid'] = undefined;
-  export let deleteKey: $$Props['deleteKey'] = undefined;
-  export let connectionRadius: $$Props['connectionRadius'] = undefined;
-  export let connectionLineType: $$Props['connectionLineType'] = undefined;
-  export let connectionMode: $$Props['connectionMode'] = ConnectionMode.Strict;
-  export let connectionLineStyle: $$Props['connectionLineStyle'] = '';
-  export let connectionLineContainerStyle: $$Props['connectionLineContainerStyle'] = '';
-  export let onMoveStart: $$Props['onMoveStart'] = undefined;
-  export let onMove: $$Props['onMove'] = undefined;
-  export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
-  export let isValidConnection: $$Props['isValidConnection'] = undefined;
-  export let translateExtent: $$Props['translateExtent'] = undefined;
-  export let nodeExtent: $$Props['nodeExtent'] = undefined;
-  export let onlyRenderVisibleElements: $$Props['onlyRenderVisibleElements'] = undefined;
-  export let panOnScrollMode: $$Props['panOnScrollMode'] = PanOnScrollMode.Free;
-  export let preventScrolling: $$Props['preventScrolling'] = true;
-  export let zoomOnScroll: $$Props['zoomOnScroll'] = true;
-  export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'] = true;
-  export let zoomOnPinch: $$Props['zoomOnPinch'] = true;
-  export let panOnScroll: $$Props['panOnScroll'] = false;
-  export let panOnDrag: $$Props['panOnDrag'] = true;
-  export let selectionOnDrag: $$Props['selectionOnDrag'] = undefined;
-  export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true;
-  export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
-  export let onerror: $$Props['onerror'] = undefined;
-  export let ondelete: $$Props['ondelete'] = undefined;
-  export let onedgecreate: $$Props['onedgecreate'] = undefined;
-  export let attributionPosition: $$Props['attributionPosition'] = undefined;
-  export let proOptions: $$Props['proOptions'] = undefined;
-  export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
-  export let width: $$Props['width'] = undefined;
-  export let height: $$Props['height'] = undefined;
-  export let colorMode: $$Props['colorMode'] = 'light';
-  export let onconnect: $$Props['onconnect'] = undefined;
-  export let onconnectstart: $$Props['onconnectstart'] = undefined;
-  export let onconnectend: $$Props['onconnectend'] = undefined;
-  export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
-  export let oninit: $$Props['oninit'] = undefined;
-  export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
-  export let paneClickDistance: $$Props['paneClickDistance'] = 0;
-  export let nodeClickDistance: $$Props['nodeClickDistance'] = 0;
-
-  export let defaultMarkerColor = '#b1b1b7';
-
-  export let style: $$Props['style'] = undefined;
-  let className: $$Props['class'] = undefined;
-  export { className as class };
-
-  let domNode: HTMLDivElement;
-  let clientWidth: number;
-  let clientHeight: number;
 
   const initViewport = $viewport || initialViewport;
 
@@ -108,9 +122,9 @@
       });
 
   onMount(() => {
-    store.width.set(clientWidth);
+    store.width.set(clientWidth!);
-    store.height.set(clientHeight);
+    store.height.set(clientHeight!);
-    store.domNode.set(domNode);
+    store.domNode.set(domNode!);
 
     store.syncNodeStores(nodes);
     store.syncEdgeStores(edges);
@@ -139,26 +153,26 @@
   });
 
   // Update width & height on resize
-  $: {
+  $effect.pre(() => {
     if (clientWidth !== undefined && clientHeight !== undefined) {
       store.width.set(clientWidth);
       store.height.set(clientHeight);
     }
-  }
+  });
 
   // Call oninit once when flow is intialized
   const { initialized } = store;
-  let onInitCalled = false;
+  let onInitCalled = $state(false);
-  $: {
+  $effect.pre(() => {
     if (!onInitCalled && $initialized) {
       oninit?.();
       onInitCalled = true;
     }
-  }
+  });
 
   // this updates the store for simple changes
   // where the prop names equals the store name
-  $: {
+  $effect(() => {
     const updatableProps: UpdatableStoreProps = {
       flowId: id,
       connectionLineType,
@@ -186,9 +200,10 @@
     };
 
     updateStoreByKeys(store, updatableProps);
-  }
+  });
 
-  $: updateStore(store, {
+  $effect(() => {
+    updateStore(store, {
       nodeTypes,
       edgeTypes,
       minZoom,
@@ -196,8 +211,9 @@
       translateExtent,
       paneClickDistance
     });
+  });
 
-  $: colorModeClass = useColorModeClass(colorMode);
+  let colorModeClass = $derived(useColorModeClass(colorMode));
 </script>
 
 <div
@@ -207,9 +223,7 @@
   {style}
   class={cc(['svelte-flow', className, $colorModeClass])}
   data-testid="svelte-flow__wrapper"
-  on:dragover
+  {...rest}
-  on:drop
-  {...$$restProps}
   role="application"
 >
   <KeyHandler
@@ -242,44 +256,47 @@
       <ViewportComponent>
         <EdgeRenderer
           on:edgeclick
-          on:edgecontextmenu
+          {onedgeclick}
-          on:edgemouseenter
+          {onedgecontextmenu}
-          on:edgemouseleave
+          {onedgemouseenter}
+          {onedgemouseleave}
           {defaultEdgeOptions}
         />
-        <ConnectionLine
+        <!-- <ConnectionLine
           containerStyle={connectionLineContainerStyle}
           style={connectionLineStyle}
-          isCustomComponent={$$slots.connectionLine}
+          isCustomComponent={connectionLine}
         >
-          <slot name="connectionLine" slot="connectionLine" />
+          {#snippet connectionLine()}
-        </ConnectionLine>
+            {@render connectionLine_render?.()}
-        <div class="svelte-flow__edgelabel-renderer" />
+          {/snippet}
-        <div class="svelte-flow__viewport-portal" />
+        </ConnectionLine> -->
+        <div class="svelte-flow__edgelabel-renderer"></div>
+        <div class="svelte-flow__viewport-portal"></div>
         <NodeRenderer
           {nodeClickDistance}
-          on:nodeclick
+          {onnodeclick}
-          on:nodemouseenter
+          {onnodecontextmenu}
-          on:nodemousemove
+          {onnodemouseenter}
-          on:nodemouseleave
+          {onnodemousemove}
-          on:nodedragstart
+          {onnodemouseleave}
-          on:nodedrag
+          {onnodedrag}
-          on:nodedragstop
+          {onnodedragstart}
-          on:nodecontextmenu
+          {onnodedragstop}
         />
         <NodeSelection
-          on:selectionclick
+          {onselectionclick}
-          on:selectioncontextmenu
+          {onselectioncontextmenu}
-          on:nodedragstart
+          {onnodedrag}
-          on:nodedrag
+          {onnodedragstart}
-          on:nodedragstop
+          {onnodedragstop}
         />
       </ViewportComponent>
       <UserSelection />
     </Pane>
   </Zoom>
   <Attribution {proOptions} position={attributionPosition} />
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>

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

@@ -34,8 +34,14 @@ import type {
   IsValidConnection
 } from '$lib/types';
 import type { Writable } from 'svelte/store';
+import type { Snippet } from 'svelte';
+import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '$lib/types/events';
 
-export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
+export type SvelteFlowProps = NodeEvents &
+  NodeSelectionEvents &
+  EdgeEvents &
+  PaneEvents &
+  DOMAttributes<HTMLDivElement> & {
     /** The id of the flow
      *
      * This is necessary if you want to render multiple flows.
@@ -172,6 +178,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
      * @default 'strict'
      */
     connectionMode?: ConnectionMode;
+    /** Provide a custom snippet to be used insted of the default connection line */
+    connectionLine?: Snippet;
     /** Styles to be applied to the connection line */
     connectionLineStyle?: string;
     /** Styles to be applied to the container of the connection line */

packages/svelte/src/lib/types/events.ts

@@ -0,0 +1,56 @@
+import type { Edge } from './edges';
+import type { Node } from './nodes';
+
+export type NodeEventWithPointer = ({
+  node,
+  event
+}: {
+  node: Node;
+  event: MouseEvent | TouchEvent;
+}) => void;
+
+export type NodesEventWithPointer = ({
+  nodes,
+  event
+}: {
+  nodes: Node[];
+  event: MouseEvent | TouchEvent;
+}) => void;
+
+export type NodeTargetEventWithPointer = ({
+  targetNode,
+  nodes,
+  event
+}: {
+  targetNode: Node | null;
+  nodes: Node[];
+  event: MouseEvent | TouchEvent;
+}) => void;
+
+export type NodeEvents = {
+  onnodeclick?: NodeEventWithPointer;
+  onnodecontextmenu?: NodeEventWithPointer;
+  onnodedrag?: NodeTargetEventWithPointer;
+  onnodedragstart?: NodeTargetEventWithPointer;
+  onnodedragstop?: NodeTargetEventWithPointer;
+  onnodemouseenter?: NodeEventWithPointer;
+  onnodemouseleave?: NodeEventWithPointer;
+  onnodemousemove?: NodeEventWithPointer;
+};
+
+export type NodeSelectionEvents = {
+  onselectioncontextmenu?: NodesEventWithPointer;
+  onselectionclick?: NodesEventWithPointer;
+};
+
+export type PaneEvents = {
+  onpaneclick?: ({ event }: { event: MouseEvent | TouchEvent }) => void;
+  onpanecontextmenu?: ({ event }: { event: MouseEvent }) => void;
+};
+
+export type EdgeEvents = {
+  onedgeclick?: ({ edge, event }: { edge: Edge; event: MouseEvent | TouchEvent }) => void;
+  onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
+  onedgemouseenter?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
+  onedgemouseleave?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
+};