fix usenodedata

examples/svelte/package.json

@@ -13,24 +13,24 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.11.1",
-		"@typescript-eslint/eslint-plugin": "^8.18.0",
-		"@typescript-eslint/parser": "^8.18.0",
+		"@sveltejs/kit": "^2.12.1",
+		"@typescript-eslint/eslint-plugin": "^8.18.1",
+		"@typescript-eslint/parser": "^8.18.1",
 		"eslint": "^8.53.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
-		"svelte": "^5.9.0",
+		"svelte": "^5.14.4",
 		"svelte-check": "^4.1.1",
 		"tslib": "^2.8.1",
-		"typescript": "^5.6.3",
+		"typescript": "^5.7.2",
 		"vite": "^6.0.3"
 	},
 	"type": "module",
 	"dependencies": {
 		"@dagrejs/dagre": "^1.1.4",
-		"@sveltejs/vite-plugin-svelte": "^5.0.2",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@xyflow/svelte": "workspace:^"
 	}
 }

examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte

@@ -21,7 +21,7 @@
 	]);
 
 	let edges = $state.raw([{ id: 'ab', source: 'A', target: 'B' }]);
-	let viewport = $state<Viewport>({ x: 100, y: 100, zoom: 1.25 });
+	let viewport = $state<Viewport>({ x: 100, y: 100, zoom: 5 });
 
 	const { fitView } = $derived(useSvelteFlow());
 

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

@@ -13,7 +13,6 @@
 </script>
 
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -35,7 +34,7 @@
 		result: ResultNode
 	};
 
-	const nodes = writable<MyNode[]>([
+	let nodes = $state.raw<MyNode[]>([
 		{
 			id: '1',
 			type: 'text',
@@ -60,7 +59,6 @@
 			},
 			position: { x: 0, y: 100 }
 		},
-
 		{
 			id: '3',
 			type: 'result',
@@ -69,7 +67,7 @@
 		}
 	]);
 
-	const edges = writable<Edge[]>([
+	let edges = $state.raw<Edge[]>([
 		{
 			id: 'e1-1a',
 			source: '1',
@@ -88,7 +86,7 @@
 	]);
 </script>
 
-<SvelteFlow {nodes} {edges} {nodeTypes} fitView>
+<SvelteFlow bind:nodes bind:edges {nodeTypes} fitView>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />

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

@@ -16,9 +16,9 @@
 	});
 
 	let nodeData = $derived(
-		useNodesData<MyNode>($connections.map((connection) => connection.source))
+		useNodesData<MyNode>(connections.current.map((connection) => connection.source))
 	);
-	let textNodes = $derived($nodeData.filter(isTextNode));
+	let textNodes = $derived(nodeData.current.filter(isTextNode));
 </script>
 
 <div class="custom">

examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte

@@ -9,6 +9,7 @@
 		type NodeProps
 	} from '@xyflow/svelte';
 	import { isTextNode, type MyNode } from './+page.svelte';
+	import { untrack } from 'svelte';
 
 	let { id, data }: NodeProps<Node<{ text: string }>> = $props();
 
@@ -18,20 +19,27 @@
 		type: 'target'
 	});
 
-	let nodeData = $derived(useNodesData<MyNode>($connections[0]?.source));
-	let textNode = $derived(isTextNode($nodeData) ? $nodeData : null);
+	let nodeData = $derived(useNodesData<MyNode>(connections.current[0]?.source));
+	let textNodeData = $derived(isTextNode(nodeData.current) ? nodeData.current.data : null);
 
-	$inspect(textNode?.data, data);
+	// For some reason adding an inspect here also prevents the inifinte loop!?
+	// $inspect(textNodeData);
 
 	$effect.pre(() => {
-		const input = textNode?.data.text.toUpperCase() ?? '';
+		const nodeData = textNodeData;
+		const input = nodeData?.text.toUpperCase() ?? '';
+
+		// TODO: We need to add this check to prevent infinite loop
+		// I don't understand why?
+		if (input === untrack(() => data.text)) return;
+
 		updateNodeData(id, { text: input });
 		console.log('updatedNodeData with', input);
 	});
 </script>
 
 <div class="custom">
-	<Handle type="target" position={Position.Left} isConnectable={$connections.length === 0} />
+	<Handle type="target" position={Position.Left} isConnectable={connections.current.length === 0} />
 	<div>uppercase transform</div>
 	<Handle type="source" position={Position.Right} />
 </div>