Make derivedWarning an error and bind store instances

packages/svelte/package.json

@@ -56,16 +56,16 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^6.0.0",
-    "@sveltejs/kit": "^2.20.4",
+    "@sveltejs/kit": "^2.20.5",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
     "autoprefixer": "^10.4.21",
     "cssnano": "^7.0.6",
-    "dotenv": "^16.4.7",
+    "dotenv": "^16.5.0",
     "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-svelte": "^3.5.1",
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
@@ -75,8 +75,8 @@
     "postcss-rename": "^0.6.1",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "svelte": "^5.25.8",
-    "svelte-check": "^4.1.5",
+    "svelte": "^5.26.2",
+    "svelte-check": "^4.1.6",
     "svelte-eslint-parser": "^1.1.2",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -11,7 +11,7 @@
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
-    store,
+    store = $bindable(),
     type,
     containerStyle = '',
     style = '',

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -10,7 +10,7 @@
 
   const {
     edge,
-    store,
+    store = $bindable(),
     onedgeclick,
     onedgecontextmenu,
     onedgepointerenter,

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -11,7 +11,7 @@
   import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
 
   let {
-    store,
+    store = $bindable(),
     selectionKey = 'Shift',
     multiSelectionKey = isMacOs() ? 'Meta' : 'Control',
     deleteKey = 'Backspace',

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -7,7 +7,7 @@
   import type { NodeSelectionProps } from './types';
 
   let {
-    store,
+    store = $bindable(),
     onnodedrag,
     onnodedragstart,
     onnodedragstop,

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -10,7 +10,7 @@
   import type { NodeEvents } from '$lib/types';
 
   let {
-    store,
+    store = $bindable(),
     node,
     resizeObserver,
     nodeClickDistance,

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -5,7 +5,7 @@
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
-    store,
+    store = $bindable(),
     onedgeclick,
     onedgecontextmenu,
     onedgepointerenter,
@@ -20,7 +20,7 @@
 
   {#each store.visible.edges.values() as edge (edge.id)}
     <EdgeWrapper
-      {store}
+      bind:store
       {edge}
       {onedgeclick}
       {onedgecontextmenu}

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -7,7 +7,7 @@
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
-    store,
+    store = $bindable(),
     nodeClickDistance,
     onnodeclick,
     onnodecontextmenu,
@@ -46,7 +46,7 @@
 <div class="svelte-flow__nodes">
   {#each store.visible.nodes.values() as node (node.id)}
     <NodeWrapper
-      {store}
+      bind:store
       {node}
       {resizeObserver}
       {nodeClickDistance}

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -45,7 +45,7 @@
   import type { PaneProps } from './types';
 
   let {
-    store,
+    store = $bindable(),
     panOnDrag = true,
     selectionOnDrag,
     onpaneclick,

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -69,7 +69,8 @@
     ...props
   }: SvelteFlowProps & HTMLAttributes<HTMLDivElement> = $props();
 
-  const store = createStore({
+  // svelte-ignore non_reactive_update
+  let store = createStore({
     props,
     width,
     height,
@@ -122,7 +123,7 @@
   rest={props}
 >
   <KeyHandler
-    {store}
+    bind:store
     {selectionKey}
     {deleteKey}
     {panActivationKey}
@@ -130,7 +131,7 @@
     {zoomActivationKey}
   />
   <Zoom
-    {store}
+    bind:store
     {panOnScrollMode}
     {preventScrolling}
     {zoomOnScroll}
@@ -144,17 +145,17 @@
     {onmoveend}
     {oninit}
   >
-    <Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
-      <ViewportComponent {store}>
+    <Pane bind:store {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
+      <ViewportComponent bind:store>
         <EdgeRenderer
-          {store}
+          bind:store
           {onedgeclick}
           {onedgecontextmenu}
           {onedgepointerenter}
           {onedgepointerleave}
         />
         <ConnectionLine
-          {store}
+          bind:store
           type={connectionLineType}
           LineComponent={connectionLineComponent}
           containerStyle={connectionLineContainerStyle}
@@ -163,7 +164,7 @@
         <div class="svelte-flow__edgelabel-renderer"></div>
         <div class="svelte-flow__viewport-portal"></div>
         <NodeRenderer
-          {store}
+          bind:store
           {nodeClickDistance}
           {onnodeclick}
           {onnodecontextmenu}
@@ -175,7 +176,7 @@
           {onnodedragstop}
         />
         <NodeSelection
-          {store}
+          bind:store
           {onselectionclick}
           {onselectioncontextmenu}
           {onnodedrag}

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -2,7 +2,7 @@
   import type { SvelteFlowStore } from '$lib/store/types';
   import type { Snippet } from 'svelte';
 
-  let { store, children }: { store: SvelteFlowStore; children: Snippet } = $props();
+  let { store = $bindable(), children }: { store: SvelteFlowStore; children: Snippet } = $props();
 </script>
 
 <div

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -5,7 +5,7 @@
   import type { ZoomProps } from './types';
 
   let {
-    store,
+    store = $bindable(),
     panOnScrollMode = PanOnScrollMode.Free,
     preventScrolling = true,
     zoomOnScroll = true,

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

@@ -19,7 +19,6 @@ export function derivedWarning(functionName: string) {
   }
 
   if (storeContext.provider && typeof window === 'object' && !$effect.tracking()) {
-    console.error(`Use $derived(${functionName}()) to receive updates when values change.`);
-    console.trace(functionName);
+    throw new Error(`Use $derived(${functionName}()) to receive updates when values change.`);
   }
 }