chore(svelte): cleanup examples

examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte

@@ -1,34 +1,35 @@
 <script lang="ts">
-  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
-  type $$Props = NodeProps;
+	type $$Props = NodeProps;
 
-  export let isConnectable: $$Props['isConnectable'];
+	export let isConnectable: $$Props['isConnectable'];
+	$$restProps;
 
-  const DEFAULT_HANDLE_STYLE = 'width: 10px; height: 10px; bottom: -5px;';
+	const handleStyle = 'width: 10px; height: 10px; bottom: -5px;';
 </script>
 
 <div style="background: #DDD; padding: 25px">
-  <div>Node</div>
+	<div>Node</div>
-  <Handle
+	<Handle
-    type="source"
+		type="source"
-    id="red"
+		id="red"
-    position={Position.Bottom}
+		position={Position.Bottom}
-    style={DEFAULT_HANDLE_STYLE + 'left: 15%; background: red;'}
+		style={handleStyle + 'left: 15%; background: red;'}
-    {isConnectable}
+		{isConnectable}
-  />
+	/>
-  <Handle
+	<Handle
-    type="source"
+		type="source"
-    position={Position.Bottom}
+		position={Position.Bottom}
-    id="blue"
+		id="blue"
-    style={DEFAULT_HANDLE_STYLE + 'left: 50%; background: blue;'}
+		style={handleStyle + 'left: 50%; background: blue;'}
-    {isConnectable}
+		{isConnectable}
-  />
+	/>
-  <Handle
+	<Handle
-    type="source"
+		type="source"
-    position={Position.Bottom}
+		position={Position.Bottom}
-    id="orange"
+		id="orange"
-    style={DEFAULT_HANDLE_STYLE + 'left: 85%; background: orange;'}
+		style={handleStyle + 'left: 85%; background: orange;'}
-    {isConnectable}
+		{isConnectable}
-  />
+	/>
 </div>

examples/svelte/src/routes/examples/customnode/CustomNode.svelte

@@ -6,6 +6,8 @@
 
 	export let data: $$Props['data'];
 
+	$$restProps;
+
 	const { colorStore } = data;
 </script>
 

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

@@ -4,27 +4,18 @@
 	type $$Props = EdgeProps;
 
 	export let id: $$Props['id'] = '';
-	export let source: $$Props['source'] = '';
-	export let target: $$Props['target'] = '';
-	export let animated: $$Props['animated'] = undefined;
-	export let selected: $$Props['selected'] = undefined;
-	export let label: $$Props['label'] = undefined;
-	export let labelStyle: $$Props['labelStyle'] = undefined;
-	export let data: $$Props['data'] = undefined;
 	export let style: $$Props['style'] = undefined;
-	export let markerStart: $$Props['markerStart'] = undefined;
 	export let markerEnd: $$Props['markerEnd'] = undefined;
-	export let interactionWidth: $$Props['interactionWidth'] = undefined;
 
 	export let sourceX: $$Props['sourceX'];
 	export let sourceY: $$Props['sourceY'];
 	export let sourcePosition: $$Props['sourcePosition'];
-	export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
 
 	export let targetX: $$Props['targetX'];
 	export let targetY: $$Props['targetY'];
 	export let targetPosition: $$Props['targetPosition'];
-	export let targetHandleId: $$Props['targetHandleId'] = undefined;
+
+	$$restProps;
 
 	$: [edgePath, labelX, labelY] = getBezierPath({
 		sourceX,
@@ -34,18 +25,6 @@
 		targetY,
 		targetPosition
 	});
-
-	source;
-	target;
-	animated;
-	selected;
-	data;
-	label;
-	labelStyle;
-	markerStart;
-	interactionWidth;
-	sourceHandleId;
-	targetHandleId;
 </script>
 
 <BaseEdge path={edgePath} {markerEnd} {style} />

examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte

@@ -3,14 +3,8 @@
 
 	type $$Props = EdgeProps;
 
-	export let id: $$Props['id'] = '';
-	export let source: $$Props['source'] = '';
-	export let target: $$Props['target'] = '';
-	export let animated: $$Props['animated'] = undefined;
-	export let selected: $$Props['selected'] = undefined;
 	export let label: $$Props['label'] = undefined;
 	export let labelStyle: $$Props['labelStyle'] = undefined;
-	export let data: $$Props['data'] = undefined;
 	export let style: $$Props['style'] = undefined;
 	export let markerStart: $$Props['markerStart'] = undefined;
 	export let markerEnd: $$Props['markerEnd'] = undefined;
@@ -19,23 +13,12 @@
 	export let sourceX: $$Props['sourceX'];
 	export let sourceY: $$Props['sourceY'];
 	export let sourcePosition: $$Props['sourcePosition'];
-	export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
 
 	export let targetX: $$Props['targetX'];
 	export let targetY: $$Props['targetY'];
 	export let targetPosition: $$Props['targetPosition'];
-	export let targetHandleId: $$Props['targetHandleId'] = undefined;
 
-	id;
+	$$restProps;
-	source;
-	target;
-	animated;
-	selected;
-	data;
-	sourcePosition;
-	targetPosition;
-	sourceHandleId;
-	targetHandleId;
 </script>
 
 <BezierEdge

examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte

@@ -33,33 +33,7 @@
 		console.log('connections', id, $connections);
 	}
 
-	export let data: $$Props['data'];
+	$$restProps;
-	export let targetPosition: $$Props['targetPosition'] = Position.Top;
-	export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
-	export let width: $$Props['width'] = undefined;
-	export let height: $$Props['height'] = undefined;
-	export let selected: $$Props['selected'] = undefined;
-	export let type: $$Props['type'] = undefined;
-	export let zIndex: $$Props['zIndex'] = undefined;
-	export let dragging: $$Props['dragging'] = false;
-	export let dragHandle: $$Props['dragHandle'] = undefined;
-	export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
-	export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
-	export let isConnectable: $$Props['isConnectable'] = undefined;
-
-	data;
-	targetPosition;
-	sourcePosition;
-	width;
-	height;
-	selected;
-	type;
-	zIndex;
-	dragging;
-	dragHandle;
-	positionAbsoluteX;
-	positionAbsoluteY;
-	isConnectable;
 </script>
 
 <div class="custom">

examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte

@@ -21,34 +21,7 @@
 		console.log('disconnect source', connection);
 	}
 
-	export let data: $$Props['data'];
+	$$restProps;
-	export let targetPosition: $$Props['targetPosition'] = Position.Top;
-	export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
-	export let width: $$Props['width'] = undefined;
-	export let height: $$Props['height'] = undefined;
-	export let selected: $$Props['selected'] = undefined;
-	export let type: $$Props['type'] = undefined;
-	export let zIndex: $$Props['zIndex'] = undefined;
-	export let dragging: $$Props['dragging'] = false;
-	export let dragHandle: $$Props['dragHandle'] = undefined;
-	export let positionAbsolute: $$Props['positionAbsolute'] = {
-		x: 0,
-		y: 0
-	};
-	export let isConnectable: $$Props['isConnectable'] = undefined;
-
-	data;
-	targetPosition;
-	sourcePosition;
-	width;
-	height;
-	selected;
-	type;
-	zIndex;
-	dragging;
-	dragHandle;
-	positionAbsolute;
-	isConnectable;
 </script>
 
 <div class="custom">

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

@@ -1,13 +1,14 @@
 <script lang="ts">
-	import { SvelteFlow, Controls, Panel, type Node, type Edge } from '@xyflow/svelte';
+	import { writable } from 'svelte/store';
+	import { SvelteFlow, Controls, Panel, type Edge } from '@xyflow/svelte';
 
 	import DefaultResizer from './DefaultResizer.svelte';
 	import CustomResizer from './CustomResizer.svelte';
 	import VerticalResizer from './VerticalResizer.svelte';
 	import HorizontalResizer from './HorizontalResizer.svelte';
-	import { writable } from 'svelte/store';
 
 	import '@xyflow/svelte/dist/style.css';
+	import type { ResizeNode } from './types';
 
 	const nodeTypes = {
 		defaultResizer: DefaultResizer,
@@ -20,7 +21,7 @@
 
 	const edges = writable<Edge[]>([]);
 
-	const nodes = writable<Node[]>([
+	const nodes = writable<ResizeNode[]>([
 		{
 			id: '1',
 			type: 'defaultResizer',

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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Handle, Position, type NodeProps, NodeResizeControl } from '@xyflow/svelte';
+	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps;
+	type $$Props = NodeProps<ResizeNode>;
 
-	export let data: $$Props['data'] = undefined;
+	export let data: $$Props['data'];
 </script>
 
 <NodeResizeControl

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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Handle, NodeResizer, Position, type NodeProps } from '@xyflow/svelte';
+	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps;
+	type $$Props = NodeProps<ResizeNode>;
 
-	export let data: $$Props['data'] = undefined;
+	export let data: $$Props['data'];
 	export let selected: $$Props['selected'] = undefined;
 </script>
 

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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
+	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps;
+	type $$Props = NodeProps<ResizeNode>;
 
-	export let data: $$Props['data'] = undefined;
+	export let data: $$Props['data'];
 </script>
 
 <NodeResizeControl

examples/svelte/src/routes/examples/node-resizer/ResizeIcon.tsx

@@ -1,24 +0,0 @@
-function ResizeIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="8"
-      height="8"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      style={{ position: 'absolute', right: 2, bottom: 2 }}
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <polyline points="16 20 20 20 20 16" />
-      <line x1="14" y1="14" x2="20" y2="20" />
-      <polyline points="8 4 4 4 4 8" />
-      <line x1="4" y1="4" x2="10" y2="10" />
-    </svg>
-  );
-}
-
-export default ResizeIcon;

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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
+	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps;
+	type $$Props = NodeProps<ResizeNode>;
 
-	export let data: $$Props['data'] = undefined;
+	export let data: $$Props['data'];
 </script>
 
 <NodeResizeControl

examples/svelte/src/routes/examples/node-resizer/types.ts

@@ -0,0 +1,21 @@
+import {
+	type Node,
+	type ShouldResize,
+	type OnResizeStart,
+	type OnResize,
+	type OnResizeEnd
+} from '@xyflow/svelte';
+
+export type ResizeNode = Node<{
+	minWidth?: number;
+	maxWidth?: number;
+	minHeight?: number;
+	maxHeight?: number;
+	shouldResize?: ShouldResize;
+	onResizeStart?: OnResizeStart;
+	onResize?: OnResize;
+	onResizeEnd?: OnResizeEnd;
+	keepAspectRatio?: boolean;
+	label?: string;
+	isVisible?: boolean;
+}>;

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

@@ -2,6 +2,7 @@
 	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
+	$$restProps;
 
 	export let data: $$Props['data'];
 </script>

examples/svelte/src/routes/examples/overview/CustomNode.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+	import { Handle, Position, type BuiltInNode, type NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	type $$Props = NodeProps<BuiltInNode>;
+	$$restProps;
 
 	export let data: { label: string } = { label: 'Node' };
 	export let positionAbsoluteX: number = 0;

examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import type { NodeProps } from '@xyflow/svelte';
+	import type { BuiltInNode, NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	type $$Props = NodeProps<BuiltInNode>;
+	$$restProps;
 
 	export let data: { label: string } = { label: 'Node' };
 </script>

examples/svelte/src/routes/examples/subflows/DebugNode.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps, type XYPosition } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
 	type $$Props = NodeProps;
 
 	export let id: string;
-	export let positionAbsolute: XYPosition = { x: 0, y: 0 };
+	export let positionAbsoluteX: number = 0;
+	export let positionAbsoluteY: number = 0;
 	export let zIndex: number = 0;
+
+	$$restProps;
 </script>
 
 <Handle type="target" position={Position.Top} />
 <div>{id}</div>
 <div>
-	x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
+	x:{Math.round(positionAbsoluteX)} y:{Math.round(positionAbsoluteY)} z:{zIndex}
 </div>
 <Handle type="source" position={Position.Bottom} />

examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte

@@ -4,6 +4,7 @@
 	type $$Props = NodeProps;
 
 	export let id: $$Props['id'];
+	$$restProps;
 
 	const updateNodeInternals = useUpdateNodeInternals();