WIP: migrated store and useSvelteFlow hook to signals & solved state propagation for provider

examples/astro-xyflow/src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

examples/svelte/package.json

@@ -13,24 +13,24 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.8.0",
-		"@typescript-eslint/eslint-plugin": "^8.14.0",
-		"@typescript-eslint/parser": "^8.14.0",
+		"@sveltejs/kit": "^2.9.0",
+		"@typescript-eslint/eslint-plugin": "^8.17.0",
+		"@typescript-eslint/parser": "^8.17.0",
 		"eslint": "^8.53.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.46.0",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.8",
-		"svelte": "^5.1.16",
-		"svelte-check": "^4.0.7",
+		"eslint-plugin-svelte": "^2.46.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.2",
+		"svelte": "^5.7.1",
+		"svelte-check": "^4.1.1",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
-		"vite": "^5.4.11"
+		"vite": "^6.0.3"
 	},
 	"type": "module",
 	"dependencies": {
 		"@dagrejs/dagre": "^1.1.4",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
 		"@xyflow/svelte": "workspace:^"
 	}
 }

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

@@ -129,23 +129,7 @@
 			target: '6',
 			label: 'hi',
 			labelStyle: 'background: red; font-weight: 700; padding: 5px;',
-			style: 'stroke: #ffcc0',
-			markerEnd: {
-				type: MarkerType.Arrow,
-				color: '#FFCC00',
-				markerUnits: 'userSpaceOnUse',
-				width: 20,
-				height: 20,
-				strokeWidth: 2
-			},
-			markerStart: {
-				type: MarkerType.ArrowClosed,
-				color: '#FFCC00',
-				orient: 'auto-start-reverse',
-				markerUnits: 'userSpaceOnUse',
-				width: 20,
-				height: 20
-			}
+			style: 'stroke: #ffcc0'
 		}
 	]);
 

examples/svelte/src/routes/examples/edges/ButtonEdge.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-	import { getBezierPath, BaseEdge, type EdgeProps, EdgeLabelRenderer } from '@xyflow/svelte';
+	import {
+		getBezierPath,
+		BaseEdge,
+		type EdgeProps,
+		EdgeLabelRenderer,
+		useSvelteFlow,
+		MarkerType
+	} from '@xyflow/svelte';
 
 	type $$Props = EdgeProps;
 
-
-
 	interface Props {
 		id?: $$Props['id'];
 		style?: $$Props['style'];
@@ -15,7 +20,7 @@
 		targetX: $$Props['targetX'];
 		targetY: $$Props['targetY'];
 		targetPosition: $$Props['targetPosition'];
-		[key: string]: any
+		[key: string]: any;
 	}
 
 	let {
@@ -33,14 +38,18 @@
 
 	rest;
 
-	let [edgePath, labelX, labelY] = $derived(getBezierPath({
-		sourceX,
-		sourceY,
-		sourcePosition,
-		targetX,
-		targetY,
-		targetPosition
-	}));
+	let [edgePath, labelX, labelY] = $derived(
+		getBezierPath({
+			sourceX,
+			sourceY,
+			sourcePosition,
+			targetX,
+			targetY,
+			targetPosition
+		})
+	);
+
+	const { updateEdge } = useSvelteFlow();
 </script>
 
 <BaseEdge path={edgePath} {markerEnd} {style} />
@@ -53,7 +62,24 @@
 			class="edgeButton"
 			onclick={(event) => {
 				event.stopPropagation();
-				alert(`remove ${id}`);
+				updateEdge('e5-6', {
+					markerEnd: {
+						type: MarkerType.Arrow,
+						color: '#FFCC00',
+						markerUnits: 'userSpaceOnUse',
+						width: 20,
+						height: 20,
+						strokeWidth: 2
+					},
+					markerStart: {
+						type: MarkerType.ArrowClosed,
+						color: '#FFCC00',
+						orient: 'auto-start-reverse',
+						markerUnits: 'userSpaceOnUse',
+						width: 20,
+						height: 20
+					}
+				});
 			}}
 		>
 			×

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

@@ -10,9 +10,9 @@
 	const nodes = writable<Node[]>(initialNodes);
 	const edges = writable<Edge[]>(initialEdges);
 
-	const { getIntersectingNodes } = useSvelteFlow();
+	const { getIntersectingNodes } = $derived(useSvelteFlow());
 
-	function onNodeDrag({ detail: { targetNode } }) {
+	function onNodeDrag({ targetNode }) {
 		if (targetNode) {
 			const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
 
@@ -25,7 +25,7 @@
 </script>
 
 <div style="height:100vh;">
-	<SvelteFlow {nodes} {edges} fitView class="intersection-flow" on:nodedrag={onNodeDrag}>
+	<SvelteFlow {nodes} {edges} fitView class="intersection-flow" onnodedrag={onNodeDrag}>
 		<Background />
 		<Controls />
 	</SvelteFlow>