Merge pull request #4129 from xyflow/refactor/svelte-internal

Svelte: Refactor internals

examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte

@@ -13,7 +13,7 @@
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable([
+	const nodes = writable<Node[]>([
 		{
 			id: '1',
 			type: 'input',
@@ -55,8 +55,6 @@
 	const onDragOver = (event: DragEvent) => {
 		event.preventDefault();
 
-		console.log(event);
-
 		if (event.dataTransfer) {
 			event.dataTransfer.dropEffect = 'move';
 		}
@@ -81,7 +79,8 @@
 			data: { label: `${type} node` }
 		};
 
-		nodes.update((nds) => nds.concat(newNode));
+		$nodes.push(newNode);
+		$nodes = $nodes;
 	};
 
 	$: {

examples/svelte/src/routes/examples/intersections/Flow.svelte

@@ -12,8 +12,8 @@
 
 	const { getIntersectingNodes } = useSvelteFlow();
 
-	function onNodeDrag({ detail: { node } }) {
-		const intersections = getIntersectingNodes(node).map((n) => n.id);
+	function onNodeDrag({ detail: { targetNode } }) {
+		const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
 
 		$nodes.forEach((n) => {
 			n.class = intersections.includes(n.id) ? 'highlight' : '';

examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts

@@ -1,28 +1,28 @@
 import type { Node, Edge } from '@xyflow/svelte';
 
 export const initialNodes: Node[] = [
-  {
-    id: '1',
-    data: { label: 'Node 1' },
-    position: { x: 0, y: 0 },
-    style: 'width: 200px; height: 100px;'
-  },
-  {
-    id: '2',
-    data: { label: 'Node 2' },
-    position: { x: 0, y: 150 }
-  },
-  {
-    id: '3',
-    data: { label: 'Node 3' },
-    position: { x: 250, y: 0 }
-  },
-  {
-    id: '4',
-    data: { label: 'Node' },
-    position: { x: 350, y: 150 },
-    style: 'width: 50px; height: 50px;'
-  }
+	{
+		id: '1',
+		data: { label: 'Node 1' },
+		position: { x: 0, y: 0 },
+		style: 'width: 200px; height: 100px;'
+	},
+	{
+		id: '2',
+		data: { label: 'Node 2' },
+		position: { x: 0, y: 150 }
+	},
+	{
+		id: '3',
+		data: { label: 'Node 3' },
+		position: { x: 250, y: 0 }
+	},
+	{
+		id: '4',
+		data: { label: 'Node' },
+		position: { x: 350, y: 150 },
+		style: 'width: 50px; height: 50px;'
+	}
 ];
 
 export const initialEdges: Edge[] = [];

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

@@ -11,6 +11,7 @@
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
+	$$restProps;
 
 	const connections = useHandleConnections({
 		nodeId: id,

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

@@ -7,6 +7,7 @@
 	export let data: $$Props['data'];
 
 	const { updateNodeData } = useSvelteFlow();
+	$$restProps;
 </script>
 
 <div class="custom">

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

@@ -12,6 +12,8 @@
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
+	export let data: $$Props['data'];
+	$$restProps;
 
 	const { updateNodeData } = useSvelteFlow();
 	const connections = useHandleConnections({
@@ -22,8 +24,12 @@
 	$: nodeData = useNodesData<MyNode>($connections[0]?.source);
 	$: textNode = isTextNode($nodeData) ? $nodeData : null;
 
+	$: console.log(textNode?.data, data);
+
 	$: {
-		updateNodeData(id, { text: textNode?.data.text.toUpperCase() || '' });
+		const input = textNode?.data.text.toUpperCase() ?? '';
+		updateNodeData(id, { text: input });
+		console.log('updatedNodeData with', input);
 	}
 </script>