fixed useConnection hook, made derivedWarnings more specific, fixed updating when internals change

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

@@ -23,8 +23,6 @@
     connectionLine?: Snippet;
   } = $props();
 
-  // $inspect(store.connection);
-
   let path = $derived.by(() => {
     if (!store.connection.inProgress) {
       return '';

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

@@ -99,7 +99,7 @@
 
   // Set store for provider context
   const providerContext = getContext<ProviderContext>(key);
-  if (providerContext) {
+  if (providerContext && providerContext.setStore) {
     providerContext.setStore(store);
   }
 

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

@@ -2,7 +2,14 @@ import { key } from '$lib/store';
 import type { StoreContext } from '$lib/store/types';
 import { getContext } from 'svelte';
 
-export function derivedWarning(functionName: string) {
+/**
+ * Warns the user that they should use $derived() when calling a hook.
+ * This is not neccessarry when the hook is called inside a child of <SvelteFlowFlow />,
+ * however exceptions can be made if you don't want to return a closure.
+ * @param functionName - The name of the function that is being called
+ * @param force - If true, the warning will be shown regardless if child of <SvelteFlowFlow />
+ */
+export function derivedWarning(functionName: string, force?: boolean) {
   const storeContext = getContext<StoreContext>(key);
 
   if (!storeContext) {
@@ -11,9 +18,8 @@ export function derivedWarning(functionName: string) {
     );
   }
 
-  if (storeContext.provider && !$effect.tracking()) {
-    console.warn(
-      `Use $derived(${functionName}()), when not calling inside a child of the <SvelteFlow /> component.`
-    );
+  if ((force || storeContext.provider) && !$effect.tracking()) {
+    console.warn(`Use $derived(${functionName}()) to receive updates when values change.`);
+    console.trace(functionName);
   }
 }

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

@@ -0,0 +1,18 @@
+import { useStore } from '$lib/store';
+
+import type { ConnectionState } from '@xyflow/system';
+import { derivedWarning } from './derivedWarning.svelte';
+
+/**
+ * Hook for receiving the current connection.
+ *
+ * @public
+ * @returns current connection as a readable store
+ */
+export function useConnection(): ConnectionState {
+  if (process.env.NODE_ENV === 'development') {
+    derivedWarning('useConnection', true);
+  }
+
+  return useStore().connection;
+}

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

@@ -1,16 +0,0 @@
-import type { Readable } from 'svelte/store';
-import { useStore } from '$lib/store';
-
-import type { ConnectionState } from '@xyflow/system';
-
-/**
- * Hook for receiving the current connection.
- *
- * @public
- * @returns current connection as a readable store
- */
-export function useConnection(): Readable<ConnectionState> {
-  const { connection } = useStore();
-
-  return connection;
-}

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

@@ -4,18 +4,10 @@ import { errorMessages } from '@xyflow/system';
 import { useStore } from '$lib/store';
 
 export function useHandleEdgeSelect() {
-  const {
-    edgeLookup,
-    selectionRect,
-    selectionRectMode,
-    multiselectionKeyPressed,
-    addSelectedEdges,
-    unselectNodesAndEdges,
-    elementsSelectable
-  } = useStore();
+  const store = useStore();
 
   return (id: string) => {
-    const edge = get(edgeLookup).get(id);
+    const edge = store.edgeLookup.get(id);
 
     if (!edge) {
       console.warn('012', errorMessages['error012'](id));
@@ -23,16 +15,16 @@ export function useHandleEdgeSelect() {
     }
 
     const selectable =
-      edge.selectable || (get(elementsSelectable) && typeof edge.selectable === 'undefined');
+      edge.selectable || (store.elementsSelectable && typeof edge.selectable === 'undefined');
 
     if (selectable) {
-      selectionRect.set(null);
-      selectionRectMode.set(null);
+      store.selectionRect = null;
+      store.selectionRectMode = null;
 
       if (!edge.selected) {
-        addSelectedEdges([id]);
-      } else if (edge.selected && get(multiselectionKeyPressed)) {
-        unselectNodesAndEdges({ nodes: [], edges: [edge] });
+        store.addSelectedEdges([id]);
+      } else if (edge.selected && store.multiselectionKeyPressed) {
+        store.unselectNodesAndEdges({ nodes: [], edges: [edge] });
       }
     }
   };

packages/svelte/src/lib/index.ts

@@ -33,7 +33,7 @@ export * from '$lib/utils';
 //hooks
 export * from '$lib/hooks/useSvelteFlow';
 export * from '$lib/hooks/useUpdateNodeInternals';
-export * from '$lib/hooks/useConnection';
+export * from '$lib/hooks/useConnection.svelte';
 export * from '$lib/hooks/useNodesEdges';
 export * from '$lib/hooks/useHandleConnections';
 export * from '$lib/hooks/useNodesData';

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -72,7 +72,7 @@ export const initialEdgeTypes = {
 
 export const getInitialStore = (signals: StoreSignals) => {
   // We use a class here, because Svelte adds getters & setter for us.
-  // Inline classes have some performance implications but we just call it once.
+  // Inline classes have some performance implications but we just call it once (max twice).
   class SvelteFlowStore {
     get nodes() {
       return signals.nodes;
@@ -223,6 +223,11 @@ export const getInitialStore = (signals: StoreSignals) => {
         });
         this.viewport = getViewportForBounds(bounds, this.width, this.height, 0.5, 2, 0.1);
       }
+
+      if (process.env.NODE_ENV === 'development') {
+        warnIfDeeplyReactive(signals.nodes, 'nodes');
+        warnIfDeeplyReactive(signals.edges, 'edges');
+      }
     }
 
     resetStoreValues() {
@@ -231,3 +236,16 @@ export const getInitialStore = (signals: StoreSignals) => {
   }
   return new SvelteFlowStore();
 };
+
+// Only way to check if an object is a proxy
+// is to see if is failes to perform a structured clone
+// TODO: is $state.raw really nessessary?
+function warnIfDeeplyReactive(array: unknown[] | undefined, name: string) {
+  try {
+    if (array && array.length > 0) {
+      structuredClone(array[0]);
+    }
+  } catch {
+    console.warn(`Use $state.raw for ${name} to prevent performance issues.`);
+  }
+}

packages/system/src/utils/store.ts

@@ -337,10 +337,13 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
     }
 
     if (node.hidden) {
-      node.internals = {
-        ...node.internals,
-        handleBounds: undefined,
-      };
+      nodeLookup.set(node.id, {
+        ...node,
+        internals: {
+          ...node.internals,
+          handleBounds: undefined,
+        },
+      });
       updatedInternals = true;
     } else {
       const dimensions = getDimensions(update.nodeElement);
@@ -362,15 +365,19 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
           positionAbsolute = clampPosition(positionAbsolute, extent, dimensions);
         }
 
-        node.measured = dimensions;
-        node.internals = {
-          ...node.internals,
-          positionAbsolute,
-          handleBounds: {
-            source: getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id),
-            target: getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id),
+        nodeLookup.set(node.id, {
+          ...node,
+          measured: dimensions,
+          internals: {
+            ...node.internals,
+            positionAbsolute,
+            handleBounds: {
+              source: getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id),
+              target: getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id),
+            },
           },
-        };
+        });
+
         if (node.parentId) {
           updateChildNode(node, nodeLookup, parentLookup, { nodeOrigin });
         }