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) => ({

packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts

@@ -22,7 +22,6 @@ import {
 import { useStore } from '$lib/store';
 import type { Edge, FitViewOptions, InternalNode, Node } from '$lib/types';
 import { isEdge, isNode } from '$lib/utils';
-import { derivedWarning } from './derivedWarning.svelte';
 import { untrack } from 'svelte';
 
 /**
@@ -277,11 +276,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
     id?: string | null;
   }) => HandleConnection[];
 } {
-  if (process.env.NODE_ENV === 'development') {
-    derivedWarning('useSvelteFlow');
-  }
-
-  const store = useStore<NodeType, EdgeType>();
+  const store = $derived(useStore<NodeType, EdgeType>());
 
   const getNodeRect = (node: NodeType | { id: NodeType['id'] }): Rect | null => {
     const nodeToUse = isNode(node) ? node : store.nodeLookup.get(node.id)!;