refactor(useSetNodeData): put function in useReactFlow/useSvelteFlow

packages/react/src/hooks/useReactFlow.ts

@@ -10,7 +10,7 @@ import {
 } from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
-import { useStoreApi } from '../hooks/useStore';
+import { useStoreApi } from './useStore';
 import type {
   ReactFlowInstance,
   Instance,
@@ -24,6 +24,7 @@ import type {
   Node,
   Edge,
 } from '../types';
+import { isNode } from '../utils';
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
@@ -271,6 +272,36 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     return getOutgoersBase(node, nodes, edges);
   }, []);
 
+  const updateNode = useCallback<Instance.UpdateNode>(
+    (id, nodeUpdate, options = { replace: true }) => {
+      setNodes((prevNodes) =>
+        prevNodes.map((node) => {
+          if (node.id === id) {
+            const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
+            return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+          }
+
+          return node;
+        })
+      );
+    },
+    [setNodes]
+  );
+
+  const updateNodeData = useCallback<Instance.UpdateNodeData>(
+    (id, dataUpdate, options = { replace: false }) => {
+      updateNode(
+        id,
+        (node) => {
+          const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
+          return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
+        },
+        options
+      );
+    },
+    [updateNode]
+  );
+
   return useMemo(() => {
     return {
       ...viewportHelper,
@@ -289,6 +320,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       getConnectedEdges,
       getIncomers,
       getOutgoers,
+      updateNode,
+      updateNodeData,
     };
   }, [
     viewportHelper,

packages/react/src/hooks/useSetNodeData.ts

@@ -1,30 +0,0 @@
-import { useCallback } from 'react';
-
-import useReactFlow from './useReactFlow';
-import { Node } from '../types';
-
-export function useSetNodeData<NodeType extends Node = Node>() {
-  const { setNodes } = useReactFlow();
-
-  const setNodeData = useCallback(
-    function setNodesData(
-      id: string,
-      dataUpdate: object | ((node: NodeType) => object),
-      options: { replace: boolean } = { replace: true }
-    ) {
-      setNodes((prevNodes) =>
-        prevNodes.map((node) => {
-          if (node.id === id) {
-            const nextData = typeof dataUpdate === 'function' ? dataUpdate(node as NodeType) : dataUpdate;
-            return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
-          }
-
-          return node;
-        })
-      );
-    },
-    [setNodes]
-  );
-
-  return setNodeData;
-}

packages/react/src/index.ts

@@ -23,7 +23,6 @@ export { default as useOnViewportChange, type UseOnViewportChangeOptions } from
 export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange';
 export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
 export { useHandleConnections } from './hooks/useHandleConnections';
-export { useSetNodeData } from './hooks/useSetNodeData';
 export { useNodesData } from './hooks/useNodesData';
 export { useNodeId } from './contexts/NodeIdContext';
 

packages/react/src/types/instance.ts

@@ -45,6 +45,17 @@ export namespace Instance {
   export type getConnectedEdges = (id: string | (Node | { id: Node['id'] })[]) => Edge[];
   export type getIncomers = (node: string | Node | { id: Node['id'] }) => Node[];
   export type getOutgoers = (node: string | Node | { id: Node['id'] }) => Node[];
+
+  export type UpdateNode = (
+    id: string,
+    dataUpdate: Partial<Node> | ((node: Node) => Partial<Node>),
+    options?: { replace: boolean }
+  ) => void;
+  export type UpdateNodeData = (
+    id: string,
+    dataUpdate: object | ((node: Node) => object),
+    options?: { replace: boolean }
+  ) => void;
 }
 
 export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
@@ -60,5 +71,7 @@ export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
   deleteElements: Instance.DeleteElements;
   getIntersectingNodes: Instance.GetIntersectingNodes<NodeData>;
   isNodeIntersecting: Instance.IsNodeIntersecting<NodeData>;
+  updateNode: Instance.UpdateNode;
+  updateNodeData: Instance.UpdateNodeData;
   viewportInitialized: boolean;
 } & Omit<ViewportHelperFunctions, 'initialized'>;

packages/react/src/utils/general.ts

@@ -10,8 +10,8 @@ import {
 
 import type { Edge, Node } from '../types';
 
-export const isNode = isNodeBase<Node, Edge>;
-export const isEdge = isEdgeBase<Node, Edge>;
+export const isNode = isNodeBase<Node>;
+export const isEdge = isEdgeBase<Edge>;
 export const getOutgoers = getOutgoersBase<Node, Edge>;
 export const getIncomers = getIncomersBase<Node, Edge>;
 export const addEdge = addEdgeBase<Edge>;