diff --git a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte index 99e83505..797f9884 100644 --- a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte +++ b/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 | null)?.classList?.contains('svelte-flow__pane'); + const targetIsPane = (event.target as Partial | null)?.classList?.contains( + 'svelte-flow__pane' + ); if (targetIsPane && 'clientX' in event && 'clientY' in event) { const id = getId(); const position = { diff --git a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte index d9555547..9fa0a8de 100644 --- a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte +++ b/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(); diff --git a/examples/svelte/src/routes/examples/intersections/Flow.svelte b/examples/svelte/src/routes/examples/intersections/Flow.svelte index f436b8d7..e363f0c4 100644 --- a/examples/svelte/src/routes/examples/intersections/Flow.svelte +++ b/examples/svelte/src/routes/examples/intersections/Flow.svelte @@ -9,7 +9,7 @@ let nodes = $state.raw(initialNodes); let edges = $state.raw(initialEdges); - const { getIntersectingNodes } = $derived(useSvelteFlow()); + const { getIntersectingNodes } = useSvelteFlow();
diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte index 0b6141fe..3075a0e8 100644 --- a/examples/svelte/src/routes/examples/overview/Flow.svelte +++ b/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 })); diff --git a/examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte b/examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte index e9ba0c87..da369442 100644 --- a/examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte +++ b/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({ x: 100, y: 100, zoom: 5 }); - const { fitView } = $derived(useSvelteFlow()); + const { fitView } = useSvelteFlow(); const updateViewport = () => { viewport.x += 10; diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte index dd291c7e..c64131f0 100644 --- a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte +++ b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte @@ -11,7 +11,7 @@ getViewport, toObject, deleteElements - } = $derived(useSvelteFlow()); + } = useSvelteFlow(); let nodes = useNodes(); let edges = useEdges(); diff --git a/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte b/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte index cc2cd3a7..a24c2467 100644 --- a/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte +++ b/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte @@ -52,7 +52,7 @@ } ]); - const { updateNode } = $derived(useSvelteFlow()); + const { updateNode } = useSvelteFlow(); const updateNodePosition = () => { updateNode('1', (node) => ({ diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts index c8d31f77..42e91e0d 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts +++ b/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 HandleConnection[]; } { - if (process.env.NODE_ENV === 'development') { - derivedWarning('useSvelteFlow'); - } - - const store = useStore(); + const store = $derived(useStore()); const getNodeRect = (node: NodeType | { id: NodeType['id'] }): Rect | null => { const nodeToUse = isNode(node) ? node : store.nodeLookup.get(node.id)!;