make $derived not required when using useSvelteFlow

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

@@ -27,7 +27,7 @@
 	let id = 1;
 	const getId = () => `${id++}`;
 
-	const { screenToFlowPosition, flowToScreenPosition } = $derived(useSvelteFlow());
+	const { screenToFlowPosition, flowToScreenPosition } = useSvelteFlow();
 
 	const connections = useNodeConnections({ id: '0', handleType: 'source' });
 
@@ -37,7 +37,9 @@
 		if (!connectingNodeId) return;
 
 		// See of connection landed inside the flow pane
-		const targetIsPane = (event.target as Partial<Element> | null)?.classList?.contains('svelte-flow__pane');
+		const targetIsPane = (event.target as Partial<Element> | null)?.classList?.contains(
+			'svelte-flow__pane'
+		);
 		if (targetIsPane && 'clientX' in event && 'clientY' in event) {
 			const id = getId();
 			const position = {

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

@@ -51,7 +51,7 @@
 		}
 	]);
 
-	const { screenToFlowPosition } = $derived(useSvelteFlow());
+	const { screenToFlowPosition } = useSvelteFlow();
 
 	const onDragOver = (event: DragEvent) => {
 		event.preventDefault();

examples/svelte/src/routes/examples/intersections/Flow.svelte

@@ -9,7 +9,7 @@
 	let nodes = $state.raw<Node[]>(initialNodes);
 	let edges = $state.raw<Edge[]>(initialEdges);
 
-	const { getIntersectingNodes } = $derived(useSvelteFlow());
+	const { getIntersectingNodes } = useSvelteFlow();
 </script>
 
 <div style="height:100vh;">

examples/svelte/src/routes/examples/overview/Flow.svelte

@@ -144,7 +144,7 @@
 		edges = [...edges];
 	}
 
-	let { updateNode } = $derived(useSvelteFlow());
+	let { updateNode } = useSvelteFlow();
 
 	function hideUnhide() {
 		updateNode('hideunhide', (node) => ({ hidden: !node.hidden }));

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

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

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

@@ -11,7 +11,7 @@
 		getViewport,
 		toObject,
 		deleteElements
-	} = $derived(useSvelteFlow());
+	} = useSvelteFlow();
 
 	let nodes = useNodes();
 	let edges = useEdges();

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

@@ -52,7 +52,7 @@
 		}
 	]);
 
-	const { updateNode } = $derived(useSvelteFlow());
+	const { updateNode } = useSvelteFlow();
 
 	const updateNodePosition = () => {
 		updateNode('1', (node) => ({