fix examples

examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
-	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
+	import {
+		NodeToolbar,
+		type NodeProps,
+		type Node,
+		Handle,
+		Position,
+		type Align
+	} from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	let {
-
+		data
-	interface Props {
+	}: NodeProps<
-		data: $$Props['data'];
+		Node<{ label: string; toolbarPosition: Position; toolbarAlign: Align; toolbarVisible: boolean }>
-	}
+	> = $props();
-
-	let { data }: Props = $props();
 </script>
 
 <NodeToolbar

examples/svelte/src/generic-tests/nodes/components/DragHandleNode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	let {}: NodeProps = $props();
 </script>
 
 <div class="container">

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

@@ -9,6 +9,7 @@
 	};
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <aside>
 	<div class="label">You can drag these nodes to the pane on the left.</div>
 	<div

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

@@ -150,7 +150,7 @@
 	{edgeTypes}
 	fitView
 	nodeDragThreshold={2}
-	onedgecreate={(connection) => {
+	onbeforeconnect={(connection) => {
 		console.log('on edge create', connection);
 
 		return {

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

@@ -16,9 +16,9 @@
 
 	const panOnDrag = [1, 2];
 
-	const onMoveStart = (e: any) => console.log('move start', e);
+	const onmovestart = (e: any) => console.log('move start', e);
-	const onMove = (e: any) => console.log('move', e);
+	const onmove = (e: any) => console.log('move', e);
-	const onMoveEnd = (e: any) => console.log('move end', e);
+	const onmoveend = (e: any) => console.log('move end', e);
 
 	let nodes = $state.raw([
 		{
@@ -47,9 +47,9 @@
 	selectionOnDrag
 	panOnScroll
 	{panOnDrag}
-	{onMoveStart}
+	{onmovestart}
-	{onMove}
+	{onmove}
-	{onMoveEnd}
+	{onmoveend}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />

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

@@ -29,14 +29,14 @@
 		{ id: 'e1-3', source: '1', target: '3' }
 	]);
 
-	const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
+	const onnodedragstart = (_: MouseEvent, node: Node) => console.log('drag start', node);
-	const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+	const onnodedragstop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-	const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+	const onnodeclick = (_: MouseEvent, node: Node) => console.log('click', node);
-	const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+	const onedgeclick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
-	const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event);
+	const onpaneclick = (event: MouseEvent) => console.log('onPaneClick', event);
-	const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
+	const onpanescroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
-	const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
+	const onpanecontextmenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
-	const onMoveEnd: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
+	const onmoveend: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
 
 	let isSelectable = $state(false);
 	let isDraggable = $state(false);
@@ -64,7 +64,7 @@
 	{panOnScrollMode}
 	{zoomOnDoubleClick}
 	{panOnDrag}
-	{onMoveEnd}
+	{onmoveend}
 	fitView
 >
 	<MiniMap />

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

@@ -10,21 +10,25 @@
 	let edges = $state.raw<Edge[]>(initialEdges);
 
 	const { getIntersectingNodes } = $derived(useSvelteFlow());
-
-	const onNodeDrag = ({ targetNode }) => {
-		if (targetNode) {
-			const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
-
-			nodes = nodes.map((node) => ({
-				...node,
-				class: intersections.includes(node.id) ? 'highlight' : ''
-			}));
-		}
-	};
 </script>
 
 <div style="height:100vh;">
-	<SvelteFlow bind:nodes bind:edges fitView class="intersection-flow" onnodedrag={onNodeDrag}>
+	<SvelteFlow
+		bind:nodes
+		bind:edges
+		fitView
+		class="intersection-flow"
+		onnodedrag={({ targetNode }) => {
+			if (targetNode) {
+				const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
+
+				nodes = nodes.map((node) => ({
+					...node,
+					class: intersections.includes(node.id) ? 'highlight' : ''
+				}));
+			}
+		}}
+	>
 		<Background />
 		<Controls />
 	</SvelteFlow>

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

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

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

@@ -5,7 +5,7 @@
 	type UppercaseNodeType = Node<{ text: string }, 'uppercase'>;
 	type ResultNodeType = Node<{}, 'result'>;
 
-	export function isTextNode(node: any): node is TextNodeType | UppercaseNode {
+	export function isTextNode(node: any): node is TextNodeType | UppercaseNodeType {
 		return !node || !node.type ? false : node.type === 'text' || node.type === 'uppercase';
 	}
 

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

@@ -4,7 +4,8 @@
 		Position,
 		useNodeConnections,
 		useNodesData,
-		type NodeProps
+		type NodeProps,
+		type Node
 	} from '@xyflow/svelte';
 	import { isTextNode, type MyNode } from './+page.svelte';
 

examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-	import { Background, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
+	import {
+		Background,
+		Controls,
+		MiniMap,
+		Panel,
+		SvelteFlow,
+		type SvelteFlowProps
+	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
@@ -9,10 +16,10 @@
 	let nodes = $state.raw(flowConfig.flowProps?.nodes ?? []);
 	let edges = $state.raw(flowConfig.flowProps?.edges ?? []);
 
-	const flowProps = { ...flowConfig.flowProps };
+	const flowProps: SvelteFlowProps = { ...flowConfig.flowProps };
 </script>
 
-<SvelteFlow bind:nodes bind:edges {...flowProps}>
+<SvelteFlow {...flowProps} bind:nodes bind:edges>
 	{#if flowConfig.panelProps}
 		<Panel {...flowConfig.panelProps} />
 	{/if}

packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { portal } from '$lib/actions/portal';
-
-  let { children }: { children?: Snippet } = $props();
-</script>
-
-<div use:portal={'edgelabel'}>
-  {@render children?.()}
-</div>

packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts

@@ -1 +0,0 @@
-export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -36,7 +36,7 @@
     onmove,
     onmovestart,
     onmoveend,
-    onerror,
+    onflowerror,
     ondelete,
     onbeforedelete,
     onbeforeconnect,
@@ -49,8 +49,8 @@
     onreconnectend,
     onclickconnectstart,
     onclickconnectend,
-    clickConnect,
     oninit,
+    clickConnect,
     fitView,
     fitViewOptions,
     nodeOrigin,

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -379,7 +379,7 @@ export type SvelteFlowProps = NodeEvents &
      * Instead of exploding your application, we log a message to the console and then call this event handler.
      * You might use it for additional logging or to show a message to the user.
      */
-    onerror?: OnError;
+    onflowerror?: OnError;
     /** This handler gets called when the user deletes nodes or edges.
      * @example
      * onDelete={({nodes, edges}) => {

packages/svelte/src/lib/index.ts

@@ -5,7 +5,6 @@ export * from '$lib/container/SvelteFlow/types';
 // components
 export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
-export * from '$lib/components/EdgeLabelRenderer';
 export * from '$lib/components/ViewportPortal';
 export {
   BezierEdge,

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -285,7 +285,7 @@ export const getInitialStore = (signals: StoreSignals) => {
       });
     });
     onlyRenderVisibleElements: boolean = $derived(signals.props.onlyRenderVisibleElements ?? false);
-    onerror: OnError = $derived(signals.props.onerror ?? devWarn);
+    onerror: OnError = $derived(signals.props.onflowerror ?? devWarn);
 
     ondelete?: OnDelete = $derived(signals.props.ondelete);
     onbeforedelete?: OnBeforeDelete = $derived(signals.props.onbeforedelete);