feat(svelte): add useHandleConnections, useNodesData and useUpdateNodeData

packages/react/src/hooks/useHandleConnections.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { Connection, HandleType } from '@xyflow/system';
+import { Connection, HandleType, areConnectionMapsEqual, handleConnectionChange } from '@xyflow/system';
 
 import { useStore } from './useStore';
 import { useNodeId } from '../contexts/NodeIdContext';
@@ -52,55 +52,3 @@ export function useHandleConnections({
 
   return useMemo(() => Array.from(connections?.values() ?? []), [connections]);
 }
-
-/**
- * @internal
- */
-function areConnectionMapsEqual(a?: Map<string, Connection>, b?: Map<string, Connection>) {
-  if (!a && !b) {
-    return true;
-  }
-
-  if (!a || !b || a.size !== b.size) {
-    return false;
-  }
-
-  if (!a.size && !b.size) {
-    return true;
-  }
-
-  for (const key of a.keys()) {
-    if (!b.has(key)) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-/**
- * We call the callback for all connections in a that are not in b
- *
- * @internal
- */
-function handleConnectionChange(
-  a: Map<string, Connection>,
-  b: Map<string, Connection>,
-  cb?: (diff: Connection[]) => void
-) {
-  if (!cb) {
-    return;
-  }
-
-  const diff: Connection[] = [];
-
-  a.forEach((connection, key) => {
-    if (!b?.has(key)) {
-      diff.push(connection);
-    }
-  });
-
-  if (diff.length) {
-    cb(diff);
-  }
-}

packages/react/src/hooks/useNodesData.ts

@@ -2,9 +2,14 @@ import { useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../hooks/useStore';
+import type { Node } from '../types';
 
-export function useNodesData<NodeData = unknown>(nodeId: string): NodeData | null;
-export function useNodesData<NodeData = unknown>(nodeIds: string[]): NodeData[];
+export function useNodesData<NodeType extends Node = Node>(nodeId: string): NodeType['data'] | null;
+export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): NodeType['data'][];
+export function useNodesData<NodeType extends Node = Node>(
+  nodeIds: string[],
+  guard: (node: Node) => node is NodeType
+): NodeType['data'][];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodesData(nodeIds: any): any {
   const nodesData = useStore(
@@ -14,15 +19,17 @@ export function useNodesData(nodeIds: any): any {
           return s.nodeLookup.get(nodeIds)?.data || null;
         }
 
-        return nodeIds.reduce((res, id) => {
-          const node = s.nodeLookup.get(id);
+        const data = [];
 
-          if (node) {
-            res.push(node.data);
+        for (const nodeId of nodeIds) {
+          const nodeData = s.nodeLookup.get(nodeId)?.data;
+
+          if (nodeData) {
+            data.push(nodeData);
           }
+        }
 
-          return res;
-        }, []);
+        return data;
       },
       [nodeIds]
     ),