port more updates

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { NodeToolbar, useNodes } from '@xyflow/svelte';
 
-	const nodes = useNodes();
+	let nodes = useNodes();
 
 	let selectedNodeIds = $derived(
 		nodes.current.filter((node) => node.selected).map((node) => node.id)

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

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { SvelteFlow, Controls, Background, MiniMap, type Node, type Edge } from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable<Node[]>([]);
-	const edges = writable<Edge[]>([]);
+	let nodes = $state.raw<Node[]>([]);
+	let edges = $state.raw<Edge[]>([]);
 
 	const resetNodesArray = () => {
 		const node1: Node = {
@@ -20,14 +19,14 @@
 			position: { x: 100, y: 0 }
 		};
 
-		$nodes = [node1, node2];
+		nodes = [node1, node2];
 	};
 </script>
 
 <button onclick={resetNodesArray}> Reset </button>
 
 <div style:height="100vh">
-	<SvelteFlow {nodes} {edges} fitView>
+	<SvelteFlow bind:nodes bind:edges fitView>
 		<Controls />
 		<Background />
 		<MiniMap />

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

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

examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from '@xyflow/svelte';
 
 	import Sidebar from './Sidebar.svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable([
+	let nodes = $state.raw([
 		{
 			id: '1',
 			type: 'input',
@@ -27,7 +26,7 @@
 		}
 	]);
 
-	const edges = writable([
+	let edges = $state.raw([
 		{
 			id: '1-2',
 			type: 'default',
@@ -45,7 +44,7 @@
 </script>
 
 <main>
-	<SvelteFlow {nodes} {edges} fitView>
+	<SvelteFlow bind:nodes bind:edges fitView>
 		<Controls />
 		<Background variant={BackgroundVariant.Dots} />
 		<MiniMap />

examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useEdges, useNodes, useSvelteFlow } from '@xyflow/svelte';
+	import { useEdges, useNodes, useSvelteFlow, useViewport } from '@xyflow/svelte';
 
 	const {
 		zoomIn,
@@ -9,17 +9,18 @@
 		setCenter,
 		setViewport,
 		getViewport,
-		viewport,
 		toObject,
 		deleteElements
 	} = useSvelteFlow();
 
-	const nodes = useNodes();
-	const edges = useEdges();
+	let nodes = useNodes();
+	let edges = useEdges();
+	let viewport = useViewport();
 
 	const deleteNode = () => {
-		$nodes.shift();
-		$nodes = $nodes;
+		//TODO: do we really want to allow this?
+		// nodes.shift();
+		// nodes = nodes;
 	};
 </script>
 
@@ -33,11 +34,13 @@
 	<button onclick={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
 	<button onclick={() => console.log(getViewport())}>getViewport</button>
 
-	<button onclick={() => deleteElements({ edges: $edges.map((edge) => ({ id: edge.id })) })}
+	<button onclick={() => deleteElements({ edges: edges.current.map((edge) => ({ id: edge.id })) })}
 		>delete edges</button
 	>
-	<button onclick={() => deleteElements({ nodes: [{ id: $nodes[0].id }] })}>delete node</button>
-	<button onclick={() => deleteElements({ nodes: $nodes.map((node) => ({ id: node.id })) })}
+	<button onclick={() => deleteElements({ nodes: [{ id: nodes.current[0].id }] })}
+		>delete node</button
+	>
+	<button onclick={() => deleteElements({ nodes: nodes.current.map((node) => ({ id: node.id })) })}
 		>deleteElements</button
 	>
 	<button onclick={() => deleteNode()}>delete via store</button>
@@ -49,13 +52,15 @@
 	>
 
 	<div class="label">Nodes:</div>
-	{#each $nodes as node (node.id)}
+	{#each nodes.current as node (node.id)}
 		<div>id: {node.id} | x: {node.position.x.toFixed(1)} y: {node.position.y.toFixed(1)}</div>
 	{/each}
 
 	<div class="label">Viewport:</div>
 	<div>
-		x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}
+		x: {viewport.current.x.toFixed(1)} y: {viewport.current.y.toFixed(1)} zoom: {viewport.current.zoom.toFixed(
+			1
+		)}
 	</div>
 </aside>
 

examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -19,7 +18,7 @@
 		custom: CustomNode
 	};
 
-	const nodes = writable([
+	const nodes = $state.raw([
 		{
 			id: '1',
 			type: 'custom',
@@ -40,7 +39,7 @@
 		}
 	]);
 
-	const edges = writable([
+	const edges = $state.raw([
 		{
 			id: '1-2',
 			source: '1',
@@ -53,7 +52,7 @@
 		}
 	]);
 
-	const { updateNode } = useSvelteFlow();
+	const { updateNode } = $derived(useSvelteFlow());
 
 	const updateNodePosition = () => {
 		updateNode('1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }));