chore(svelte): bump

examples/svelte/src/routes/overview/CustomEdge.svelte

@@ -2,7 +2,7 @@
 	import {
 		BaseEdge,
 		EdgeLabelRenderer,
-		useSvelteFlow,
+		useEdges,
 		type EdgeProps,
 		getBezierPath
 	} from '@xyflow/svelte';
@@ -18,10 +18,10 @@
 		targetPosition: $$props.targetPosition
 	});
 
-	const svelteFlow = useSvelteFlow();
+	const edges = useEdges();
 
 	function onClick() {
-		svelteFlow.edges.update((eds) => eds.filter((e) => e.id !== $$props.id));
+		edges.update((eds) => eds.filter((e) => e.id !== $$props.id));
 	}
 </script>
 

packages/svelte/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.0.24
+
+- update node automatically when `type`, `sourcePosition` or `targetPosition` option changes
+- prevent dev tool warnings when using built-in node types
+- updates `useSvelteFlow` hook:
+- add node type "group"
+- add `class` prop for BaseEdge
+- add `id` prop for Background
+- add `selected` prop for MiniMap Node
+- rename Controls prop `showInteractive` to `showLock`
+
 ## 0.0.23
 
 - updates `useSvelteFlow` hook:

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",

packages/svelte/src/lib/components/nodes/DefaultNode.svelte

@@ -19,6 +19,17 @@
   export let xPos: $$Props['xPos'] = 0;
   export let yPos: $$Props['yPos'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
+
+  // @todo: there must be a better way to do this
+  id;
+  selected;
+  type;
+  zIndex;
+  dragging;
+  dragHandle;
+  xPos;
+  yPos;
+  isConnectable;
 </script>
 
 <Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />

packages/svelte/src/lib/components/nodes/GroupNode.svelte

@@ -16,4 +16,18 @@
   export let xPos: $$Props['xPos'] = 0;
   export let yPos: $$Props['yPos'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
+
+  // @todo: there must be a better way to do this
+  id;
+  data;
+  selected;
+  sourcePosition;
+  targetPosition;
+  type;
+  zIndex;
+  dragging;
+  dragHandle;
+  xPos;
+  yPos;
+  isConnectable;
 </script>

packages/svelte/src/lib/components/nodes/InputNode.svelte

@@ -19,6 +19,18 @@
   export let xPos: $$Props['xPos'] = 0;
   export let yPos: $$Props['yPos'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
+
+  // @todo: there must be a better way to do this
+  id;
+  selected;
+  targetPosition;
+  type;
+  zIndex;
+  dragging;
+  dragHandle;
+  xPos;
+  yPos;
+  isConnectable;
 </script>
 
 {data?.label}

packages/svelte/src/lib/components/nodes/OutputNode.svelte

@@ -19,6 +19,18 @@
   export let xPos: $$Props['xPos'] = 0;
   export let yPos: $$Props['yPos'] = 0;
   export let isConnectable: $$Props['isConnectable'] = undefined;
+
+  // @todo: there must be a better way to do this
+  id;
+  selected;
+  sourcePosition;
+  type;
+  zIndex;
+  dragging;
+  dragHandle;
+  xPos;
+  yPos;
+  isConnectable;
 </script>
 
 {data?.label}

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -31,7 +31,34 @@
           ($elementsSelectable && typeof edge.selectable === 'undefined')
         )}
 
-        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick on:edgecontextmenu />
+        <EdgeWrapper
+          id={edge.id}
+          source={edge.source}
+          target={edge.target}
+          data={edge.data}
+          style={edge.style}
+          animated={edge.animated}
+          selected={edge.selected}
+          hidden={edge.hidden}
+          label={edge.label}
+          labelStyle={edge.labelStyle}
+          markerStart={edge.markerStart}
+          markerEnd={edge.markerEnd}
+          sourceHandle={edge.sourceHandle}
+          targetHandle={edge.targetHandle}
+          sourceX={edge.sourceX}
+          sourceY={edge.sourceY}
+          targetX={edge.targetX}
+          targetY={edge.targetY}
+          sourcePosition={edge.sourcePosition}
+          targetPosition={edge.targetPosition}
+          ariaLabel={edge.ariaLabel}
+          class={edge.class}
+          type={edgeType}
+          {selectable}
+          on:edgeclick
+          on:edgecontextmenu
+        />
       {/each}
     </g>
   </svg>