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

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] });
       }
     }
   };