first working version with using $state for nodes & edges

examples/svelte/package.json

@@ -21,7 +21,7 @@
 		"eslint-plugin-svelte": "^2.46.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
-		"svelte": "^5.7.1",
+		"svelte": "^5.9.0",
 		"svelte-check": "^4.1.1",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -38,7 +37,7 @@
 		nodes: [{ id: '1' }, { id: '2' }]
 	};
 
-	const nodes = writable<Node[]>([
+	let nodes = $state.raw<Node[]>([
 		{
 			id: '1',
 			type: 'input',
@@ -100,7 +99,7 @@
 		}
 	]);
 
-	const edges = writable<Edge[]>([
+	let edges = $state.raw<Edge[]>([
 		{
 			id: '1-2',
 			type: 'default',
@@ -125,21 +124,21 @@
 	]);
 
 	function updateNode() {
-		$nodes[0].position.x += 20;
-		$nodes = $nodes;
+		nodes[0].position.x += 20;
+		// nodes = $nodes;
 	}
 
 	function updateEdge() {
-		$edges[0].type = $edges[0].type === 'default' ? 'smoothstep' : 'default';
-		$edges = $edges;
+		edges[0].type = edges[0].type === 'default' ? 'smoothstep' : 'default';
+		// edges = $edges;
 	}
 
-	$inspect($nodes);
+	// $inspect(nodes);
 </script>
 
 <SvelteFlow
-	{nodes}
-	{edges}
+	bind:nodes
+	bind:edges
 	{nodeTypes}
 	{edgeTypes}
 	fitView
@@ -211,7 +210,6 @@
 		<button onclick={updateEdge}>update edge type</button>
 		<button
 			onclick={() => {
-				console.log($nodes, $nodes.length);
 				$nodes[$nodes.length - 1].hidden = !$nodes[$nodes.length - 1].hidden;
 				$nodes = $nodes;
 			}}>hide/unhide</button

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

@@ -29,7 +29,8 @@
 				id,
 				data,
 				position,
-				type: 'default'
+				type: 'default',
+				selected: true
 			};
 			nodeItems.push(node);
 
@@ -46,11 +47,11 @@
 		}
 	}
 
-	const nodes = writable(nodeItems);
-	const edges = writable(edgeItems);
+	let nodes = $state.raw(nodeItems);
+	let edges = $state.raw([]);
 </script>
 
-<SvelteFlow {nodes} {edges} fitView minZoom={0.2}>
+<SvelteFlow bind:nodes bind:edges fitView minZoom={0.2}>
 	<Controls />
 	<Background variant={BackgroundVariant.Lines} />
 	<MiniMap />

examples/svelte/vite.config.ts

@@ -3,6 +3,9 @@ import { defineConfig } from 'vite';
 
 export default defineConfig({
 	plugins: [sveltekit()],
+	build: {
+		sourcemap: true
+	},
 	server: {
 		fs: {
 			// Allow serving files from one level up to the project root