refactor(useSetNodeData): put function in useReactFlow/useSvelteFlow

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

@@ -1,10 +1,10 @@
 import { memo, ChangeEventHandler } from 'react';
-import { Position, NodeProps, useSetNodeData, Handle } from '@xyflow/react';
+import { Position, NodeProps, Handle, useReactFlow } from '@xyflow/react';
 
 function TextNode({ id, data }: NodeProps) {
-  const setNodeData = useSetNodeData();
+  const { updateNodeData } = useReactFlow();
 
-  const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => setNodeData(id, { text: evt.target.value });
+  const onChange: ChangeEventHandler<HTMLInputElement> = (evt) => updateNodeData(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, useSetNodeData, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
+import { Position, NodeProps, useReactFlow, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
 
 function UppercaseNode({ id }: NodeProps) {
+  const { updateNodeData } = useReactFlow();
   const connections = useHandleConnections({
     type: 'target',
   });
   const nodeData = useNodesData(connections[0]?.source);
-  const setNodeData = useSetNodeData();
 
   useEffect(() => {
-    setNodeData(id, { text: nodeData?.text.toUpperCase() });
+    updateNodeData(id, { text: nodeData?.text.toUpperCase() });
   }, [nodeData]);
 
   return (

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

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps, useSetNodeData } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, useSvelteFlow } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
 	export let data: $$Props['data'];
 
-	const setNodeData = useSetNodeData();
+	const { updateNodeData } = useSvelteFlow();
 </script>
 
 <div class="custom">
@@ -14,7 +14,7 @@
 	<div>
 		<input
 			value={data.text}
-			on:input={(evt) => setNodeData(id, { text: evt.currentTarget.value })}
+			on:input={(evt) => updateNodeData(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,
-		useSetNodeData
+		useSvelteFlow
 	} from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
 
-	const setNodeData = useSetNodeData();
+	const { updateNodeData } = useSvelteFlow();
 	const connections = useHandleConnections({
 		nodeId: id,
 		type: 'target'
@@ -21,7 +21,7 @@
 	$: nodeData = useNodesData($connections[0]?.source);
 
 	$: {
-		setNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
+		updateNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
 	}
 </script>