chore: migrate to svelte 5

package.json

@@ -12,15 +12,15 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-static": "^3.0.2",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.5.27",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"autoprefixer": "^10.4.19",
 		"postcss": "^8.4.38",
-		"svelte": "^4.2.7",
+		"svelte": "^5.0.0",
-		"svelte-check": "^3.6.0",
+		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.3",
-		"typescript": "^5.0.0",
+		"typescript": "^5.5.0",
-		"vite": "^5.0.3"
+		"vite": "^5.4.4"
 	},
 	"type": "module",
 	"dependencies": {

src/lib/components/ImageLinkTile.svelte

@@ -1,17 +1,29 @@
 <script>
   import ImageTile from "./ImageTile.svelte";
-  /** @type {string} **/
+  
-  export let src;
+  
-  /** @type {string} **/
+  
-  export let href;
+  /**
-  /** @type {"_self" | "_blank" | "_parent" | "_top" } **/
+   * @typedef {Object} Props
-  export let target = "_self";
+   * @property {string} src
+   * @property {string} href
+   * @property {"_self" | "_blank" | "_parent" | "_top" } [target]
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let {
+    src,
+    href,
+    target = "_self",
+    children
+  } = $props();
 </script>
 
 <div>
   <ImageTile {src}>
     <a {href} {target} class="flex items-center justify-center h-full">
-      <slot />
+      {@render children?.()}
     </a>
   </ImageTile>
 </div>

src/lib/components/ImageTile.svelte

@@ -1,6 +1,13 @@
 <script>
-  /** @string */
+  
-  export let src;
+  /**
+   * @typedef {Object} Props
+   * @property {any} src
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { src, children } = $props();
 </script>
 
 <div class="grid grid-cols-1 grid-rows-1">
@@ -9,6 +16,6 @@
     class="row-start-1 col-start-1 pointer-events-none w-full h-96 object-cover"
   />
   <div class="row-start-1 col-start-1">
-    <slot />
+    {@render children?.()}
   </div>
 </div>

src/lib/components/Markdown.svelte

@@ -12,11 +12,17 @@
     smartLists: true,
     smartypants: false,
   });
-  /* @type {string} */
+  
-  export let src;
+  /**
+   * @typedef {Object} Props
+   * @property {string} src
+   */
+
+  /** @type {Props} */
+  let { src } = $props();
 
   /* @type {Element[]} */
-  let content = [];
+  let content = $state([]);
 
   onMount(async () => {
     const DOM_PARSER = new DOMParser();

src/routes/+layout.svelte

@@ -1,8 +1,15 @@
 <script>
   import "../app.css";
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
 </script>
 
 <header class="fixed z-50 mix-blend-difference p-1">
   <a href="/" class="text-white text-2xl">schreifuchs.ch</a>
 </header>
-<slot />
+{@render children?.()}