refactor(useNodeConnections): change param names

xyflow · Jan 9, 2025 · 78f9d4e · 78f9d4e
1 parent 7dac54f
commit 78f9d4e
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 26 deletions.
diff --git a/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx b/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx
@@ -12,7 +12,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
     [nodeId]
   );
   const connections = useNodeConnections({
-    type: handleProps.type,
+    handleType: handleProps.type,
     handleId: handleProps.id,
     onConnect,
     onDisconnect,

diff --git a/examples/react/src/examples/UseNodeConnections/SingleHandleNode.tsx b/examples/react/src/examples/UseNodeConnections/SingleHandleNode.tsx
@@ -15,7 +15,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
     [nodeId]
   );
   const connections = useNodeConnections({
-    type: handleProps.type,
+    handleType: handleProps.type,
     handleId: handleProps.id,
     onConnect,
     onDisconnect,

diff --git a/examples/react/src/examples/UseNodesData/ResultNode.tsx b/examples/react/src/examples/UseNodesData/ResultNode.tsx
@@ -4,7 +4,7 @@ import { isTextNode, type MyNode } from '.';
 
 function ResultNode() {
   const connections = useNodeConnections({
-    type: 'target',
+    handleType: 'target',
   });
   const nodesData = useNodesData<MyNode>(connections.map((connection) => connection.source));
   const textNodes = nodesData.filter(isTextNode);

diff --git a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx
@@ -5,7 +5,7 @@ import { isTextNode, type TextNode, type MyNode } from '.';
 function UppercaseNode({ id }: NodeProps) {
   const { updateNodeData } = useReactFlow();
   const connections = useNodeConnections({
-    type: 'target',
+    handleType: 'target',
   });
   const nodesData = useNodesData<MyNode>(connections[0]?.source);
   const textNode = isTextNode(nodesData) ? nodesData : null;

diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
@@ -14,8 +14,8 @@
 	$$restProps;
 
 	const connections = useNodeConnections({
-		nodeId: id,
-		type: 'target'
+		id: id,
+		handleType: 'target'
 	});
 
 	$: nodeData = useNodesData<MyNode>($connections.map((connection) => connection.source));

diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte
@@ -17,8 +17,8 @@
 
 	const { updateNodeData } = useSvelteFlow();
 	const connections = useNodeConnections({
-		nodeId: id,
-		type: 'target'
+		id: id,
+		handleType: 'target'
 	});
 
 	$: nodeData = useNodesData<MyNode>($connections[0]?.source);

diff --git a/packages/react/src/hooks/useNodeConnections.ts b/packages/react/src/hooks/useNodeConnections.ts
@@ -14,9 +14,9 @@ import { useNodeId } from '../contexts/NodeIdContext';
 const error014 = errorMessages['error014']();
 
 type UseNodeConnectionsParams = {
-  type?: HandleType;
+  id?: string;
+  handleType?: HandleType;
   handleId?: string;
-  nodeId?: string;
   onConnect?: (connections: Connection[]) => void;
   onDisconnect?: (connections: Connection[]) => void;
 };
@@ -25,22 +25,22 @@ type UseNodeConnectionsParams = {
  * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
  *
  * @public
- * @param param.nodeId - node id - optional if called inside a custom node
- * @param param.type - filter by handle type 'source' or 'target'
+ * @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)
  * @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({
-  type,
+  id,
+  handleType,
   handleId,
-  nodeId,
   onConnect,
   onDisconnect,
 }: UseNodeConnectionsParams = {}): NodeConnection[] {
-  const _nodeId = useNodeId();
-  const currentNodeId = nodeId ?? _nodeId;
+  const nodeId = useNodeId();
+  const currentNodeId = id ?? nodeId;
 
   if (!currentNodeId) {
     throw new Error(error014);
@@ -50,7 +50,9 @@ export function useNodeConnections({
 
   const connections = useStore(
     (state) =>
-      state.connectionLookup.get(`${currentNodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`),
+      state.connectionLookup.get(
+        `${currentNodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`
+      ),
     areConnectionMapsEqual
   );
 

diff --git a/packages/svelte/src/lib/hooks/useNodeConnections.ts b/packages/svelte/src/lib/hooks/useNodeConnections.ts
@@ -1,3 +1,4 @@
+import { getContext } from 'svelte';
 import { derived } from 'svelte/store';
 import {
   areConnectionMapsEqual,
@@ -7,14 +8,13 @@ import {
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
-import { getContext } from 'svelte';
 
 const error014 = errorMessages['error014']();
 
 type UseNodeConnectionsParams = {
-  type?: HandleType;
+  id?: string;
+  handleType?: HandleType;
   handleId?: string;
-  nodeId?: string;
   // TODO: Svelte 5
   //   onConnect?: (connections: Connection[]) => void;
   //   onDisconnect?: (connections: Connection[]) => void;
@@ -26,18 +26,18 @@ const initialConnections: NodeConnection[] = [];
  * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
  *
  * @public
- * @param param.nodeId - node id - optional if called inside a custom node
- * @param param.type - filter by handle type 'source' or 'target'
+ * @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
  * @returns an array with connections
  */
-export function useNodeConnections({ type, nodeId, handleId }: UseNodeConnectionsParams = {}) {
+export function useNodeConnections({ id, handleType, handleId }: UseNodeConnectionsParams = {}) {
   const { edges, connectionLookup } = useStore();
 
-  const _nodeId = getContext<string>('svelteflow__node_id');
-  const currentNodeId = nodeId ?? _nodeId;
+  const nodeId = getContext<string>('svelteflow__node_id');
+  const currentNodeId = id ?? nodeId;
 
   if (!currentNodeId) {
     throw new Error(error014);
@@ -49,7 +49,7 @@ export function useNodeConnections({ type, nodeId, handleId }: UseNodeConnection
     [edges, connectionLookup],
     ([, connectionLookup], set) => {
       const nextConnections = connectionLookup.get(
-        `${currentNodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`
+        `${currentNodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`
       );
 
       if (!areConnectionMapsEqual(nextConnections, prevConnections)) {