migration to Svelte 5

package.json

@@ -16,8 +16,8 @@
 		"@skeletonlabs/skeleton": "^2.7.0",
 		"@skeletonlabs/tw-plugin": "^0.3.1",
 		"@sveltejs/adapter-node": "^5.2.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.9",
 		"@tsparticles/svelte": "^3.0.0",
@@ -31,15 +31,15 @@
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.24",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.0.0",
-		"svelte-check": "^3.4.3",
-		"svelte-preprocess": "^5.1.3",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.0",
 		"tailwindcss": "^3.4.0",
 		"tslib": "^2.5.2",
 		"tsparticles": "3.1.0",
-		"typescript": "^5.0.4",
-		"vite": "^5.0.0"
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4"
 	},
 	"type": "module",
 	"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

src/lib/AnimatedCounter.svelte

@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { onMount } from 'svelte';
 

src/routes/+layout.svelte

@@ -6,8 +6,13 @@
 
 	import { particlesInit } from '@tsparticles/svelte';
 	import { loadFull } from 'tsparticles';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
 
-	let ParticlesComponent;
+	let { children }: Props = $props();
+
+	let ParticlesComponent = $state();
 
 	onMount(async () => {
 		const module = await import('@tsparticles/svelte');
@@ -43,6 +48,6 @@
 	});
 </script>
 
-<svelte:component this={ParticlesComponent} id="tsparticles" options={particlesConfig} />
+<ParticlesComponent id="tsparticles" options={particlesConfig} />
 <!-- Page Route Content -->
-<slot />
+{@render children?.()}

src/routes/+page.svelte

@@ -42,7 +42,7 @@
 			<p>Hi, I'm Luke</p>
 		</span>
 
-		<div class="flex justify-center space-x-2" />
+		<div class="flex justify-center space-x-2"></div>
 		<div class="space-y-2">
 			<Avatar src="/Luke.png" width="w-48" class="mx-auto" />
 		</div>