refactor(hooks): rename useUpdateNodeData to useSetNodeData and adjust api

examples/react/src/examples/UseNodesData/TextNode.tsx

@@ -1,10 +1,10 @@
 import { memo, ChangeEventHandler } from 'react';
-import { Position, NodeProps, useUpdateNodeData, Handle } from '@xyflow/react';
+import { Position, NodeProps, useSetNodeData, Handle } from '@xyflow/react';
 
 function TextNode({ id, data }: NodeProps) {
-  const updateNodeData = useUpdateNodeData();
+  const setNodeData = useSetNodeData();
 
-  const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => updateNodeData(id, { text: evt.target.value });
+  const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => setNodeData(id, { text: evt.target.value });
 
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>

examples/react/src/examples/UseNodesData/UppercaseNode.tsx

@@ -1,15 +1,15 @@
 import { memo, useEffect } from 'react';
-import { Position, NodeProps, useUpdateNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
+import { Position, NodeProps, useSetNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
 
 function UppercaseNode({ id }: NodeProps) {
   const connections = useHandleConnections({
     type: 'target',
   });
   const nodeData = useNodesData(connections[0]?.source);
-  const updateNodeData = useUpdateNodeData();
+  const setNodeData = useSetNodeData();
 
   useEffect(() => {
-    updateNodeData(id, { text: nodeData?.text.toUpperCase() });
+    setNodeData(id, { text: nodeData?.text.toUpperCase() });
   }, [nodeData]);
 
   return (

examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte

@@ -4,7 +4,6 @@
 		Position,
 		useHandleConnections,
 		useNodesData,
-		useUpdateNodeData,
 		type NodeProps
 	} from '@xyflow/svelte';
 

examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps, useUpdateNodeData } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, useSetNodeData } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
 	export let data: $$Props['data'];
 
-	const updateNodeData = useUpdateNodeData();
+	const setNodeData = useSetNodeData();
 </script>
 
 <div class="custom">
@@ -14,7 +14,7 @@
 	<div>
 		<input
 			value={data.text}
-			on:input={(evt) => updateNodeData(id, { text: evt.currentTarget.value })}
+			on:input={(evt) => setNodeData(id, { text: evt.currentTarget.value })}
 		/>
 	</div>
 	<Handle type="source" position={Position.Right} />

examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte

@@ -5,14 +5,14 @@
 		type NodeProps,
 		useHandleConnections,
 		useNodesData,
-		useUpdateNodeData
+		useSetNodeData
 	} from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
 
-	const updateNodeData = useUpdateNodeData();
+	const setNodeData = useSetNodeData();
 	const connections = useHandleConnections({
 		nodeId: id,
 		type: 'target'
@@ -21,7 +21,7 @@
 	$: nodeData = useNodesData($connections[0]?.source);
 
 	$: {
-		updateNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
+		setNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
 	}
 </script>
 

packages/react/src/hooks/useSetNodeData.ts

@@ -0,0 +1,30 @@
+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/hooks/useUpdateNodeData.ts

@@ -1,13 +0,0 @@
-import { useCallback } from 'react';
-
-import useReactFlow from './useReactFlow';
-
-export function useUpdateNodeData() {
-  const { setNodes } = useReactFlow();
-
-  const updateNodeData = useCallback((id: string, data: unknown) => {
-    setNodes((prevNodes) => prevNodes.map((node) => (node.id === id ? { ...node, data } : node)));
-  }, []);
-
-  return updateNodeData;
-}

packages/react/src/index.ts

@@ -23,7 +23,7 @@ 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 { useUpdateNodeData } from './hooks/useUpdateNodeData';
+export { useSetNodeData } from './hooks/useSetNodeData';
 export { useNodesData } from './hooks/useNodesData';
 export { useNodeId } from './contexts/NodeIdContext';
 

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

@@ -0,0 +1,28 @@
+import { useStore } from '$lib/store';
+import type { Node } from '$lib/types';
+
+export function useSetNodeData<NodeType extends Node = Node>() {
+  const { nodes } = useStore();
+
+  const setNodeData = (
+    id: string,
+    dataUpdate: object | ((node: NodeType) => object),
+    options: { replace: boolean } = { replace: true }
+  ) => {
+    nodes.update((nds) =>
+      nds.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;
+      })
+    );
+  };
+
+  return setNodeData;
+}

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

@@ -1,22 +0,0 @@
-import { useStore } from '$lib/store';
-
-export function useUpdateNodeData(): (id: string, data: unknown) => void {
-  const { nodes } = useStore();
-
-  const updateNodeData = (id: string, data: unknown) => {
-    nodes.update((nds) =>
-      nds.map((node) => {
-        if (node.id === id) {
-          return {
-            ...node,
-            data
-          };
-        }
-
-        return node;
-      })
-    );
-  };
-
-  return updateNodeData;
-}

packages/svelte/src/lib/index.ts

@@ -29,7 +29,7 @@ export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
 export * from '$lib/hooks/useHandleConnections';
 export * from '$lib/hooks/useNodesData';
-export * from '$lib/hooks/useUpdateNodeData';
+export * from '$lib/hooks/useSetNodeData';
 
 // types
 export type {