port more examples

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

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { useSvelteFlow } from '@xyflow/svelte';
-
 	const onDragStart = (event: DragEvent, nodeType: string) => {
 		if (!event.dataTransfer) {
 			return null;
@@ -9,8 +7,6 @@
 		event.dataTransfer.setData('application/svelteflow', nodeType);
 		event.dataTransfer.effectAllowed = 'move';
 	};
-
-	// const { zoomIn, zoomOut, fitView, viewport, nodes } = $derived(useSvelteFlow());
 </script>
 
 <aside>

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -13,7 +12,7 @@
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable([
+	let nodes = $state.raw([
 		{
 			id: '1',
 			type: 'input',
@@ -25,7 +24,7 @@
 		{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }
 	]);
 
-	const edges = writable([
+	let edges = $state.raw([
 		{ id: 'e1-2', source: '1', target: '2', animated: true },
 		{ id: 'e1-3', source: '1', target: '3' }
 	]);
@@ -54,8 +53,8 @@
 </script>
 
 <SvelteFlow
-	{nodes}
+	bind:nodes
-	{edges}
+	bind:edges
 	elementsSelectable={isSelectable}
 	nodesConnectable={isConnectable}
 	nodesDraggable={isDraggable}
@@ -66,6 +65,7 @@
 	{zoomOnDoubleClick}
 	{panOnDrag}
 	{onMoveEnd}
+	fitView
 >
 	<MiniMap />
 	<Controls />

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

@@ -1,31 +1,30 @@
 <script lang="ts">
 	import { SvelteFlow, Background, Controls, useSvelteFlow } from '@xyflow/svelte';
 	import type { Edge, Node } from '@xyflow/svelte';
-	import { writable } from 'svelte/store';
 
 	import '@xyflow/svelte/dist/style.css';
 
 	import { initialNodes, initialEdges } from './nodes-and-edges';
 
-	const nodes = writable<Node[]>(initialNodes);
+	let nodes = $state.raw<Node[]>(initialNodes);
-	const edges = writable<Edge[]>(initialEdges);
+	let edges = $state.raw<Edge[]>(initialEdges);
 
 	const { getIntersectingNodes } = $derived(useSvelteFlow());
 
-	function onNodeDrag({ targetNode }) {
+	const onNodeDrag = ({ targetNode }) => {
 		if (targetNode) {
 			const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
 
-			$nodes.forEach((n) => {
+			nodes = nodes.map((node) => ({
-				n.class = intersections.includes(n.id) ? 'highlight' : '';
+				...node,
-			});
+				class: intersections.includes(node.id) ? 'highlight' : ''
-			$nodes = $nodes;
+			}));
 		}
-	}
+	};
 </script>
 
 <div style="height:100vh;">
-	<SvelteFlow {nodes} {edges} fitView class="intersection-flow" onnodedrag={onNodeDrag}>
+	<SvelteFlow bind:nodes bind:edges fitView class="intersection-flow" onnodedrag={onNodeDrag}>
 		<Background />
 		<Controls />
 	</SvelteFlow>
@@ -48,10 +47,10 @@
 	}
 
 	:global(
-			.intersection-flow .svelte-flow__node.selected,
+		.intersection-flow .svelte-flow__node.selected,
-			.intersection-flow .svelte-flow__node:hover,
+		.intersection-flow .svelte-flow__node:hover,
-			.intersection-flow .svelte-flow__node:focus
+		.intersection-flow .svelte-flow__node:focus
-		) {
+	) {
 		box-shadow: 6px 6px 0 1px rgba(0, 0, 0, 0.7);
 		background-color: #eee;
 	}

examples/svelte/src/routes/examples/node-resizer/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { SvelteFlow, Controls, Panel, type Edge } from '@xyflow/svelte';
 
 	import DefaultResizer from './DefaultResizer.svelte';
@@ -19,9 +18,9 @@
 
 	const nodeStyle = 'border: 1px solid #222; font-size: 10px; background-color: #ddd;';
 
-	const edges = writable<Edge[]>([]);
+	let edges = $state.raw<Edge[]>([]);
 
-	const nodes = writable<ResizeNode[]>([
+	let nodes = $state.raw<ResizeNode[]>([
 		{
 			id: '1',
 			type: 'defaultResizer',
@@ -132,8 +131,8 @@
 </script>
 
 <SvelteFlow
-	{nodes}
+	bind:nodes
-	{edges}
+	bind:edges
 	{nodeTypes}
 	minZoom={0.2}
 	maxZoom={5}

examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte

@@ -1,14 +1,8 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps, NodeResizeControl } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, NodeResizeControl, type Node } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps<ResizeNode>;
+	let { data }: NodeProps<ResizeNode> = $props();
-
-	interface Props {
-		data: $$Props['data'];
-	}
-
-	let { data }: Props = $props();
 </script>
 
 <NodeResizeControl

examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte

@@ -2,14 +2,7 @@
 	import { Handle, NodeResizer, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps<ResizeNode>;
+	let { data, selected = undefined }: NodeProps<ResizeNode> = $props();
-
-	interface Props {
-		data: $$Props['data'];
-		selected?: $$Props['selected'];
-	}
-
-	let { data, selected = undefined }: Props = $props();
 </script>
 
 <NodeResizer

examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte

@@ -2,13 +2,7 @@
 	import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps<ResizeNode>;
+	let { data }: NodeProps<ResizeNode> = $props();
-
-	interface Props {
-		data: $$Props['data'];
-	}
-
-	let { data }: Props = $props();
 </script>
 
 <NodeResizeControl

examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte

@@ -2,13 +2,7 @@
 	import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps<ResizeNode>;
+	let { data }: NodeProps<ResizeNode> = $props();
-
-	interface Props {
-		data: $$Props['data'];
-	}
-
-	let { data }: Props = $props();
 </script>
 
 <NodeResizeControl

examples/svelte/src/routes/examples/node-toolbar/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Background,
@@ -11,7 +10,7 @@
 
 	import '@xyflow/svelte/dist/style.css';
 
-	import CustomNode from './CustomNode.svelte';
+	import CustomNode, { type CustomNodeType } from './CustomNode.svelte';
 	import SelectedNodesToolbar from './SelectedNodesToolbar.svelte';
 
 	const nodeTypes: NodeTypes = {
@@ -19,9 +18,9 @@
 	};
 
 	const positions = ['top', 'right', 'bottom', 'left'];
-	const alignments = ['start', 'center', 'end'];
+	const alignments: ('start' | 'center' | 'end')[] = ['start', 'center', 'end'];
 
-	const initialNodes: Node[] = [
+	const initialNodes: CustomNodeType[] = [
 		{
 			id: 'default-node',
 			type: 'custom',
@@ -51,12 +50,12 @@
 
 	const initialEdges: Edge[] = [];
 
-	const nodes = writable<Node[]>(initialNodes);
+	let nodes = $state.raw<Node[]>(initialNodes);
-	const edges = writable<Edge[]>(initialEdges);
+	let edges = $state.raw<Edge[]>(initialEdges);
 </script>
 
 <div style="height: 100vh;">
-	<SvelteFlow {nodes} {edges} {nodeTypes} fitView>
+	<SvelteFlow bind:nodes bind:edges {nodeTypes} fitView>
 		<Background />
 		<SelectedNodesToolbar />
 	</SvelteFlow>

examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte

@@ -1,7 +1,18 @@
+<script lang="ts" module>
+	import { type Node } from '@xyflow/svelte';
+
+	export type CustomNodeType = Node<{
+		toolbarVisible?: boolean;
+		toolbarPosition: Position;
+		toolbarAlign?: 'start' | 'center' | 'end';
+		label: string;
+	}>;
+</script>
+
 <script lang="ts">
 	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
 
-	let { data }: NodeProps = $props();
+	let { data }: NodeProps<CustomNodeType> = $props();
 </script>
 
 <NodeToolbar

examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte

@@ -3,7 +3,9 @@
 
 	const nodes = useNodes();
 
-	let selectedNodeIds = $derived($nodes.filter((node) => node.selected).map((node) => node.id));
+	let selectedNodeIds = $derived(
+		nodes.current.filter((node) => node.selected).map((node) => node.id)
+	);
 	let isVisible = $derived(selectedNodeIds.length > 1);
 </script>
 

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

@@ -7,8 +7,12 @@ import { useStore } from '$lib/store';
  * @returns store with an array of nodes
  */
 export function useNodes() {
-  const { nodes } = useStore();
+  const { nodes } = $derived(useStore());
-  return nodes;
+  return {
+    get current() {
+      return nodes;
+    }
+  };
 }
 
 /**
@@ -18,6 +22,10 @@ export function useNodes() {
  * @returns store with an array of edges
  */
 export function useEdges() {
-  const { edges } = useStore();
+  const { edges } = $derived(useStore());
-  return edges;
+  return {
+    get current() {
+      return edges;
+    }
+  };
 }

packages/svelte/src/lib/index.ts

@@ -34,7 +34,7 @@ export * from '$lib/utils';
 export * from '$lib/hooks/useSvelteFlow';
 export * from '$lib/hooks/useUpdateNodeInternals';
 export * from '$lib/hooks/useConnection.svelte';
-export * from '$lib/hooks/useNodesEdges';
+export * from '$lib/hooks/useNodesEdges.svelte';
 export * from '$lib/hooks/useHandleConnections.svelte';
 export * from '$lib/hooks/useNodesData';
 export * from '$lib/hooks/useInternalNode';