refactor(svelte): replace on:connect with onconnect

examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { writable } from 'svelte/store';
-	import { SvelteFlow, useSvelteFlow, type Edge, type Node } from '@xyflow/svelte';
+	import {
+		SvelteFlow,
+		useSvelteFlow,
+		type Edge,
+		type Node,
+		type OnConnectEnd
+	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
@@ -16,16 +22,18 @@
 	const nodes = writable<Node[]>(initialNodes);
 	const edges = writable<Edge[]>([]);
 
-	let connectingNodeId: string = '0';
+	let connectingNodeId: string | null = '0';
 	let rect: DOMRectReadOnly;
 	let id = 1;
 	const getId = () => `${id++}`;
 
 	const { screenToFlowPosition, flowToScreenPosition } = useSvelteFlow();
 
-	function handleConnectEnd({ detail: { event } }: { detail: { event: MouseEvent | TouchEvent } }) {
+	const handleConnectEnd: OnConnectEnd = (event) => {
+		if (!connectingNodeId) return;
+
 		// See of connection landed inside the flow pane
-		const targetIsPane = event.target?.classList.contains('svelte-flow__pane');
+		const targetIsPane = (event.target as HTMLDivElement)?.classList.contains('svelte-flow__pane');
 		if (targetIsPane) {
 			const id = getId();
 			const position = {
@@ -58,7 +66,7 @@
 			$nodes = $nodes;
 			$edges = $edges;
 		}
-	}
+	};
 </script>
 
 <svelte:window />
@@ -69,11 +77,11 @@
 		{edges}
 		fitView
 		fitViewOptions={{ padding: 2 }}
-		on:connectstart={({ detail: { nodeId } }) => {
+		onconnectstart={(_, { nodeId }) => {
 			// Memorize the nodeId you start draggin a connection line from a node
 			connectingNodeId = nodeId;
 		}}
-		on:connectend={handleConnectEnd}
+		onconnectend={handleConnectEnd}
 	/>
 </div>
 

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

@@ -87,7 +87,7 @@
 	{nodeTypes}
 	style="--xy-background-color: {$bgColor}"
 	fitView
-	on:connect={onConnect}
+	onconnect={onConnect}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />

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

@@ -10,7 +10,7 @@
 </script>
 
 <div class="custom">
-	<Handle type="target" position={Position.Left} on:connect />
+	<Handle type="target" position={Position.Left} />
 	<div>
 		Custom Color Picker Node: <strong>{$colorStore}</strong>
 	</div>
@@ -20,14 +20,8 @@
 		on:input={(evt) => colorStore.set(evt.currentTarget.value)}
 		value={$colorStore}
 	/>
-	<Handle type="source" position={Position.Right} id="a" style="top: 20px;" on:connect />
-	<Handle
-		type="source"
-		position={Position.Right}
-		id="b"
-		style="top: auto; bottom: 10px;"
-		on:connect
-	/>
+	<Handle type="source" position={Position.Right} id="a" style="top: 20px;" />
+	<Handle type="source" position={Position.Right} id="b" style="top: auto; bottom: 10px;" />
 </div>
 
 <style>

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

@@ -150,9 +150,9 @@
 	on:nodemouseenter={(event) => console.log('on node enter', event)}
 	on:nodemouseleave={(event) => console.log('on node leave', event)}
 	on:edgeclick={(event) => console.log('edge click', event)}
-	on:connectstart={(event) => console.log('on connect start', event)}
-	on:connect={(event) => console.log('on connect', event)}
-	on:connectend={(event) => console.log('on connect end', event)}
+	onconnectstart={(event) => console.log('on connect start', event)}
+	onconnect={(event) => console.log('on connect', event)}
+	onconnectend={(event) => console.log('on connect end', event)}
 	on:paneclick={(event) => console.log('on pane click', event)}
 	on:panecontextmenu={(event) => {
 		console.log('on pane contextmenu', event);

examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte

@@ -2,10 +2,10 @@
 	import {
 		Handle,
 		Position,
-		type NodeProps,
 		useHandleConnections,
 		useNodesData,
-		useSvelteFlow
+		useSvelteFlow,
+		type NodeProps
 	} from '@xyflow/svelte';
 
 	type $$Props = NodeProps;

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

@@ -15,15 +15,9 @@
 	};
 </script>
 
-<Handle type="target" position={Position.Top} on:connect />
+<Handle type="target" position={Position.Top} />
 <button on:click={onClick}>add handle</button>
 
 {#each Array.from({ length: handleCount }) as handle, i}
-	<Handle
-		type="source"
-		position={Position.Bottom}
-		id={`${i}`}
-		style={`left: ${i * 10}px;`}
-		on:connect
-	/>
+	<Handle type="source" position={Position.Bottom} id={`${i}`} style={`left: ${i * 10}px;`} />
 {/each}