Merge pull request #5336 from xyflow/fix/useNodeConnections

Fix useNodeConnections callbacks firing only when returned signal is used

.changeset/plenty-garlics-fail.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Fix `useNodeConnections` callbacks firing only when returned signal is used

examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte

@@ -16,6 +16,15 @@
 		handleType: 'target'
 	});
 
+	useNodeConnections({
+		onConnect: (connection) => {
+			console.log('Connection made:', connection);
+		},
+		onDisconnect: (connection) => {
+			console.log('Connection disconnected:', connection);
+		}
+	});
+
 	let nodeData = $derived(
 		useNodesData<MyNode>(connections.current.map((connection) => connection.source))
 	);

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

@@ -17,6 +17,8 @@ type UseNodeConnectionsParams = {
   onDisconnect?: (connections: Connection[]) => void;
 };
 
+type ConnectionMap = Map<string, NodeConnection>;
+
 const initialConnections: NodeConnection[] = [];
 
 /**
@@ -42,26 +44,46 @@ export function useNodeConnections({
   const contextNodeId = getContext<string>('svelteflow__node_id');
   const nodeId = id ?? contextNodeId;
 
-  let prevConnections: Map<string, NodeConnection> = new Map();
+  let connectionMaps: { previous: ConnectionMap; next: ConnectionMap } = {
+    previous: new Map(),
+    next: new Map()
+  };
   let connectionsArray: NodeConnection[] = initialConnections;
 
   const connections = $derived.by(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     edges;
+
+    const prevConnections = connectionMaps.next;
     const nextConnections =
       connectionLookup.get(
         `${nodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`
       ) ?? new Map();
     if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
-      if (onConnect) handleConnectionChange(nextConnections, prevConnections, onConnect);
-      if (onDisconnect) handleConnectionChange(prevConnections, nextConnections, onDisconnect);
-
-      prevConnections = nextConnections;
+      connectionMaps = {
+        previous: prevConnections,
+        next: nextConnections
+      };
       connectionsArray = Array.from(nextConnections.values() || initialConnections);
     }
     return connectionsArray;
   });
 
+  $effect(() => {
+    // We subscribe to changes to the connections only when onConnect/onDisconnect are provided
+    if (onConnect) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      connections;
+      handleConnectionChange(connectionMaps.next, connectionMaps.previous, onConnect);
+    }
+
+    if (onDisconnect) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      connections;
+      handleConnectionChange(connectionMaps.previous, connectionMaps.next, onDisconnect);
+    }
+  });
+
   return {
     get current() {
       return connections;