add onConnect and onDisconnect to useNodeConnections

examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte

@@ -25,7 +25,16 @@
 		console.log('disconnect source', handleId, connection);
 	}
 
-	const connections = useNodeConnections({ id: id, handleType: 'target' });
+	const connections = useNodeConnections({
+		id: id,
+		handleType: 'target',
+		onConnect: (connections) => {
+			console.log('onConnect', connections);
+		},
+		onDisconnect: (connections) => {
+			console.log('onDisconnect', connections);
+		}
+	});
 
 	$inspect(connections.current);
 </script>

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

@@ -1,4 +1,10 @@
-import { areConnectionMapsEqual, type NodeConnection, type HandleType } from '@xyflow/system';
+import {
+  areConnectionMapsEqual,
+  type NodeConnection,
+  type HandleType,
+  type Connection,
+  handleConnectionChange
+} from '@xyflow/system';
 
 import { useStore } from '$lib/store';
 import { getContext } from 'svelte';
@@ -7,9 +13,8 @@ type UseNodeConnectionsParams = {
   id?: string;
   handleType?: HandleType;
   handleId?: string;
-  // TODO: Svelte 5
-  //   onConnect?: (connections: Connection[]) => void;
-  //   onDisconnect?: (connections: Connection[]) => void;
+  onConnect?: (connections: Connection[]) => void;
+  onDisconnect?: (connections: Connection[]) => void;
 };
 
 const initialConnections: NodeConnection[] = [];
@@ -21,28 +26,38 @@ const initialConnections: NodeConnection[] = [];
  * @param param.id - node id - optional if called inside a custom node
  * @param param.handleType - filter by handle type 'source' or 'target'
  * @param param.handleId - filter by handle id (this is only needed if the node has multiple handles of the same type)
- * @todo @param param.onConnect - gets called when a connection is established
- * @todo @param param.onDisconnect - gets called when a connection is removed
+ * @param param.onConnect - gets called when a connection is established
+ * @param param.onDisconnect - gets called when a connection is removed
  * @returns an array with connections
  */
-export function useNodeConnections({ id, handleType, handleId }: UseNodeConnectionsParams = {}) {
+export function useNodeConnections({
+  id,
+  handleType,
+  handleId,
+  onConnect,
+  onDisconnect
+}: UseNodeConnectionsParams = {}) {
   const { edges, connectionLookup } = $derived(useStore());
 
   const contextNodeId = getContext<string>('svelteflow__node_id');
   const nodeId = id ?? contextNodeId;
 
-  let prevConnections: Map<string, NodeConnection> | undefined = new Map();
+  let prevConnections: Map<string, NodeConnection> = new Map();
   let connectionsArray: NodeConnection[] = initialConnections;
 
   const connections = $derived.by(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     edges;
-    const nextConnections = connectionLookup.get(
-      `${nodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`
-    );
+    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;
-      connectionsArray = Array.from(nextConnections?.values() || initialConnections);
+      connectionsArray = Array.from(nextConnections.values() || initialConnections);
     }
     return connectionsArray;
   });