cleaning up Svelte 4 leftovers

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

@@ -124,16 +124,22 @@
 	]);
 
 	function updateNode() {
-		nodes[0].position.x += 20;
-		// nodes = $nodes;
+		// We might as well just use updateNode() here
+		// this is just to show what is required to update a node
+		const newNode = { ...nodes[0] };
+		newNode.position.x += 20;
+		nodes[0] = newNode;
+		nodes = [...nodes];
 	}
 
 	function updateEdge() {
-		edges[0].type = edges[0].type === 'default' ? 'smoothstep' : 'default';
-		// edges = $edges;
+		// We might as well just use updateEdge() here
+		// this is just to show what is required to update an edge
+		const newEdge = { ...edges[0] };
+		newEdge.type = newEdge.type === 'default' ? 'smoothstep' : 'default';
+		edges[0] = newEdge;
+		edges = [...edges];
 	}
-
-	// $inspect(nodes);
 </script>
 
 <SvelteFlow
@@ -152,38 +158,38 @@
 	initialViewport={{ x: 100, y: 100, zoom: 2 }}
 	snapGrid={[25, 25]}
 	oninit={() => console.log('on init')}
-	on:nodeclick={(event) => console.log('on node click', event)}
-	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:edgemouseenter={(event) => console.log('edge enter', event)}
-	on:edgemouseleave={(event) => console.log('edge leave', event)}
+	onnodeclick={(event) => console.log('on node click', event)}
+	onnodemouseenter={(event) => console.log('on node enter', event)}
+	onnodemouseleave={(event) => console.log('on node leave', event)}
+	onedgeclick={(event) => console.log('edge click', event)}
+	onedgemouseenter={(event) => console.log('edge enter', event)}
+	onedgemouseleave={(event) => console.log('edge leave', 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) => {
+	onpaneclick={(event) => console.log('on pane click', event)}
+	onpanecontextmenu={(event) => {
 		console.log('on pane contextmenu', event);
 	}}
-	on:nodedrag={(event) => {
+	onnodedrag={(event) => {
 		console.log('on node drag', event);
 	}}
-	on:nodedragstart={(event) => {
+	onnodedragstart={(event) => {
 		console.log('on node drag start', event);
 	}}
-	on:nodedragstop={(event) => {
+	onnodedragstop={({ event }) => {
 		console.log('on node drag stop', event);
 	}}
-	on:nodecontextmenu={(event) => {
-		event.detail.event.preventDefault();
+	onnodecontextmenu={({ event }) => {
+		event.preventDefault();
 		console.log('on node contextmenu', event);
 	}}
-	on:edgecontextmenu={({ detail: { event, edge } }) => {
+	onedgecontextmenu={({ event, edge }) => {
 		event.preventDefault();
 		console.log('on edge contextmenu', edge);
 	}}
-	on:selectionclick={(event) => console.log('on selection click', event)}
-	on:selectioncontextmenu={(event) => console.log('on selection contextmenu', event)}
+	onselectionclick={(event) => console.log('on selection click', event)}
+	onselectioncontextmenu={(event) => console.log('on selection contextmenu', event)}
 	onbeforedelete={async ({ nodes, edges }) => {
 		console.log('on before delete', nodes, edges);
 		const deleteElements = confirm('Are you sure you want to delete the selected elements?');
@@ -199,8 +205,7 @@
 		{#snippet before()}
 			<ControlButton>xy</ControlButton>
 		{/snippet}
-		<ControlButton aria-label="log" on:click={() => console.log('control button')}
-			>log</ControlButton
+		<ControlButton aria-label="log" onclick={() => console.log('control button')}>log</ControlButton
 		>
 	</Controls>
 	<Background variant={BackgroundVariant.Dots} />

examples/svelte/svelte.config.js

@@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: vitePreprocess({ script: true }),
 	compilerOptions: {
 		runes: true
 	},

examples/svelte/tsconfig.json

@@ -8,7 +8,10 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"target": "ES2022",
+		"verbatimModuleSyntax": true,
+		"isolatedModules": true
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//