refactor(useNodesData): improve selector equality function (#3976)

* improved selector equality function for useNodesData

* fixed selector & useNodesData example

* added shallow-node-data as system function

examples/react/src/examples/UseNodesData/index.tsx

@@ -20,8 +20,8 @@ export type ResultNode = Node<{}, 'result'>;
 export type UppercaseNode = Node<{ text: string }, 'uppercase'>;
 export type MyNode = TextNode | ResultNode | UppercaseNode;
 
-export function isTextNode(node: any): node is TextNode {
-  return node.type === 'text';
+export function isTextNode(node: any): node is TextNode | UppercaseNode {
+  return node.type === 'text' || node.type === 'uppercase';
 }
 
 const nodeTypes = {

examples/svelte/src/routes/examples/usenodesdata/+page.svelte

@@ -5,8 +5,8 @@
 	type UppercaseNodeType = Node<{ text: string }, 'uppercase'>;
 	type ResultNodeType = Node<{}, 'result'>;
 
-	export function isTextNode(node: any): node is TextNodeType {
-		return node.type === 'text';
+	export function isTextNode(node: any): node is TextNodeType | UppercaseNode {
+		return node.type === 'text' || node.type === 'uppercase';
 	}
 
 	export type MyNode = TextNodeType | UppercaseNodeType | ResultNodeType;

packages/react/src/hooks/useNodesData.ts

@@ -1,15 +1,9 @@
 import { useCallback } from 'react';
-import { shallow } from 'zustand/shallow';
+import { shallowNodeData } from '@xyflow/system';
 
 import { useStore } from '../hooks/useStore';
 import type { Node } from '../types';
 
-export interface NodeDataReturn<NodeType extends Node> {
-  id: string;
-  type: NodeType['type'];
-  data: NodeType['data'];
-}
-
 /**
  * Hook for receiving data of one or multiple nodes
  *
@@ -46,7 +40,7 @@ export function useNodesData(nodeIds: any): any {
       },
       [nodeIds]
     ),
-    shallow
+    shallowNodeData
   );
 
   return nodesData;

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

@@ -1,22 +1,9 @@
 import { derived, type Readable } from 'svelte/store';
+import { shallowNodeData } from '@xyflow/system';
 
 import type { Node } from '$lib/types';
 import { useStore } from '$lib/store';
 
-function areNodesDataEqual(a: any[], b: any[]) {
-  if (a.length !== b.length) {
-    return false;
-  }
-
-  for (let i = 0; i < a.length; i++) {
-    if (a[i].data !== b[i].data) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
 /**
  * Hook for receiving data of one or multiple nodes
  *
@@ -51,7 +38,7 @@ export function useNodesData(nodeIds: any): any {
       }
     }
 
-    if (!areNodesDataEqual(nextNodesData, prevNodesData)) {
+    if (!shallowNodeData(nextNodesData, prevNodesData)) {
       prevNodesData = nextNodesData;
       set(isArrayOfIds ? nextNodesData : nextNodesData[0] ?? null);
     }

packages/system/src/utils/index.ts

@@ -7,3 +7,4 @@ export * from './marker';
 export * from './node-toolbar';
 export * from './store';
 export * from './types';
+export * from './shallow-node-data';

packages/system/src/utils/shallow-node-data.ts

@@ -0,0 +1,20 @@
+import { NodeBase } from '../types';
+
+type NodeData = Pick<NodeBase, 'id' | 'type' | 'data'>;
+
+export function shallowNodeData(a: NodeData | NodeData[], b: NodeData | NodeData[]) {
+  const _a = Array.isArray(a) ? a : [a];
+  const _b = Array.isArray(b) ? b : [b];
+
+  if (_a.length !== _b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < _a.length; i++) {
+    if (_a[i].id !== _b[i].id || _a[i].type !== _b[i].type || !Object.is(_a[i].data, _b[i].data)) {
+      return false;
+    }
+  }
+
+  return true;
+}