feat(*): migrate to svelte 5 with bunx sv migrate

package.json

@@ -13,21 +13,21 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.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",
 		"autoprefixer": "^10.4.20",
 		"postcss": "^8.4.47",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.7",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.11",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/enhanced-img": "^0.3.8",
+		"@sveltejs/enhanced-img": "^0.3.9",
 		"svelte-highlight": "^7.7.0"
 	}
 }

src/lib/Highlight.svelte

@@ -1,16 +1,17 @@
-<script>
+<script lang="ts">
 	import Highlight from "svelte-highlight";
 	import "$lib/hljs.css";
 
-	export let language;
-	export let code;
-	export let slice = true;
-	export let alt;
+	let {
+		language,
+		code,
+		slice = $bindable(true),
+		alt
+	} = $props();
+
+	let renderedCode = $derived(slice ? code.replace(/#<hidden>[^]*?#<\/hidden>/, "")
+		: code.replace(/#(<hidden>|<\/hidden>)/g,""));
 	
-	let renderedCode;
-	$: renderedCode =
-		slice ? code.replace(/#<hidden>[^]*?#<\/hidden>/, "")
-		: code.replace(/#(<hidden>|<\/hidden>)/g,"");
 </script>
 
 <p class="sr-only">{alt}</p>
@@ -21,7 +22,7 @@
 	<button
 		class="top-0 right-0 absolute font-sans text-xs font-bold"
 		class:text-blue-500={slice}
-		on:click={() => { slice = !slice }}
+		onclick={() => { slice = !slice }}
 	>
 		({slice ? "show" : "hide"} full)
 	</button>

src/routes/+layout.svelte

@@ -1,7 +1,9 @@
-<script>
+<script lang="ts">
 	import { page } from "$app/stores";
 	import "../main.css";
 	import Footer from "./footer.svelte";
+
+	let { children } = $props();
 	globalThis.PKGS = "petalpkgs";
 	globalThis.DISTRO = "FleurixOS";
 </script>
@@ -10,7 +12,7 @@
     <title>floral.systems</title>
     <meta property="og:title" content="floral.systems" />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content={$page.url} />
+    <meta property="og:url" content={$page.url?.toString()} />
     <meta name="theme-color" content="#136951">
 </svelte:head>
 
@@ -39,7 +41,7 @@
 
 	<section class="Layout-content container w-full mx-auto">
 		<div class="m-1">
-			<slot />
+			{@render children?.()}
 		</div>
 	</section>
 

src/routes/colors/Color.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-  export let colors;
-  export let name;
-  export let path = [];
+  import Color from "./Color.svelte";
+  let { colors, name, path = [] } = $props();
 </script>
 
 {#if typeof colors[name] == "object"}
   <h3 class="mb-0 text-xl text-center">{name}</h3>
   <div class="p-4 grid gap-4 grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 auto-rows-auto">
     {#each Object.keys(colors[name]) as n}
-      <svelte:self name={n} colors={colors[name]} path={[...path, name]} />
+      <Color name={n} colors={colors[name]} path={[...path, name]} />
     {/each}
   </div>
   <hr />

src/routes/docs/+layout.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+	let { children } = $props();
+</script>
+
 <div class="Layout-docs-root flex max-xl:flex-col lg:gap-2 justify-around">
 	<div class="grow xl:relative">
 		<nav class="mt-12 xl:absolute lg:right-0">
@@ -13,7 +17,7 @@
 			</ul>
 		</nav>
 	</div>
-	<div class="Layout-docs-content max-w-[700px]"><slot /></div>
+	<div class="Layout-docs-content max-w-[700px]">{@render children?.()}</div>
 	<div class="grow"></div>
 </div>