migrating hooks, fixed colorMode

examples/svelte/package.json

@@ -13,9 +13,9 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.9.0",
-		"@typescript-eslint/eslint-plugin": "^8.17.0",
-		"@typescript-eslint/parser": "^8.17.0",
+		"@sveltejs/kit": "^2.11.1",
+		"@typescript-eslint/eslint-plugin": "^8.18.0",
+		"@typescript-eslint/parser": "^8.18.0",
 		"eslint": "^8.53.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
@@ -30,7 +30,7 @@
 	"type": "module",
 	"dependencies": {
 		"@dagrejs/dagre": "^1.1.4",
-		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.2",
 		"@xyflow/svelte": "workspace:^"
 	}
 }

examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import {
 		SvelteFlow,
+		useConnection,
+		useHandleConnections,
 		useSvelteFlow,
 		type Edge,
 		type Node,
@@ -28,6 +30,10 @@
 
 	const { screenToFlowPosition, flowToScreenPosition } = $derived(useSvelteFlow());
 
+	const connections = useHandleConnections({ nodeId: '0', type: 'source' });
+
+	$inspect(connections.current);
+
 	const handleConnectEnd: OnConnectEnd = (event) => {
 		if (!connectingNodeId) return;
 
@@ -55,12 +61,14 @@
 				origin: [0.5, 0.0]
 			};
 
-			nodes.push(newNode);
-			// edges.push({
-			// 	source: connectingNodeId,
-			// 	target: id,
-			// 	id: `${connectingNodeId}--${id}`
-			// });
+			nodes = [...nodes, newNode];
+
+			const newEdge = {
+				source: connectingNodeId,
+				target: id,
+				id: `${connectingNodeId}--${id}`
+			};
+			edges = [...edges, newEdge];
 		}
 	};
 </script>

examples/svelte/src/routes/examples/color-mode/+page.svelte

@@ -35,18 +35,18 @@
 		{ id: 'A-D', source: 'A', target: 'D' }
 	]);
 
-	let colorMode: ColorMode = $state('dark');
+	let colorMode: ColorMode = $state('system');
 </script>
 
-<SvelteFlow bind:nodes bind:edges {colorMode} fitView>
+<SvelteFlow bind:nodes bind:edges {colorMode} colorModeSSR={'dark'} fitView>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
 
 	<Panel>
 		<select bind:value={colorMode} data-testid="colormode-select">
-			<option value="light">light</option>
 			<option value="dark">dark</option>
+			<option value="light">light</option>
 			<option value="system">system</option>
 		</select>
 	</Panel>

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

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { getBezierPath, useConnection } from '@xyflow/svelte';
 
-	const connection = $derived(useConnection());
+	const connection = useConnection();
 
 	let path: string | null = $derived.by(() => {
-		if (connection.inProgress) {
-			const { from, to, fromPosition, toPosition } = connection;
+		if (connection.current.inProgress) {
+			const { from, to, fromPosition, toPosition } = connection.current;
 			const pathParams = {
 				sourceX: from.x,
 				sourceY: from.y,
@@ -21,6 +21,6 @@
 	});
 </script>
 
-{#if connection.inProgress}
-	<path d={path} fill="none" stroke={connection.fromHandle.id} />
+{#if connection.current.inProgress}
+	<path d={path} fill="none" stroke={connection.current.fromHandle.id} />
 {/if}

examples/svelte/src/routes/examples/dagre/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { SvelteFlow, Background, Position, ConnectionLineType, Panel } from '@xyflow/svelte';
 	import type { Edge, Node } from '@xyflow/svelte';
 	import dagre from '@dagrejs/dagre';

examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,

examples/svelte/src/routes/examples/edges/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -15,7 +14,7 @@
 	import ButtonEdge from './ButtonEdge.svelte';
 	import CustomBezierEdge from './CustomBezierEdge.svelte';
 
-	const nodes = writable([
+	let nodes = $state.raw([
 		{
 			id: '1',
 			type: 'input',
@@ -55,7 +54,7 @@
 		}
 	]);
 
-	const edges = writable([
+	let edges = $state.raw([
 		{
 			id: 'e1-2',
 			source: '1',
@@ -142,12 +141,12 @@
 		return `edge-${connection.source}-${connection.target}}`;
 	}
 
-	$inspect($edges);
+	$inspect(edges);
 </script>
 
 <SvelteFlow
-	{nodes}
-	{edges}
+	bind:nodes
+	bind:edges
 	{edgeTypes}
 	fitView
 	nodeDragThreshold={2}

examples/svelte/src/routes/examples/figma/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -21,7 +20,7 @@
 	const onMove = (e: any) => console.log('move', e);
 	const onMoveEnd = (e: any) => console.log('move end', e);
 
-	const nodes = writable([
+	let nodes = $state.raw([
 		{
 			id: '1',
 			type: 'input',
@@ -34,15 +33,15 @@
 		{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' }
 	]);
 
-	const edges = writable([
+	let edges = $state.raw([
 		{ id: 'e1-2', source: '1', target: '2', animated: true },
 		{ id: 'e1-3', source: '1', target: '3' }
 	]);
 </script>
 
 <SvelteFlow
-	{nodes}
-	{edges}
+	bind:nodes
+	bind:edges
 	fitView
 	selectionMode={SelectionMode.Partial}
 	selectionOnDrag

examples/svelte/src/routes/examples/handle-connect/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -20,7 +19,7 @@
 		multi: MultiHandleNode
 	};
 
-	const nodes = writable<Node[]>([
+	let nodes = $state.raw<Node[]>([
 		{
 			id: '1',
 			type: 'single',
@@ -60,7 +59,7 @@
 		}
 	]);
 
-	const edges = writable<Edge[]>([
+	let edges = $state.raw<Edge[]>([
 		{
 			id: 'e1-2',
 			source: '1',
@@ -87,7 +86,7 @@
 	]);
 </script>
 
-<SvelteFlow {nodes} {edges} {nodeTypes} fitView colorMode="dark">
+<SvelteFlow bind:nodes bind:edges {nodeTypes} fitView colorMode="dark">
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />

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

@@ -27,7 +27,7 @@
 
 	const connections = useHandleConnections({ nodeId: id, type: 'target' });
 
-	$inspect('connections', $connections);
+	$inspect(connections.current);
 </script>
 
 <div class="custom">