Update to Svelte 5

package.json

@@ -12,27 +12,27 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.6.0",
-    "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.6.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@fortawesome/fontawesome-free": "^6.7.1",
+    "@sveltejs/adapter-static": "^3.0.6",
+    "@sveltejs/kit": "^2.8.3",
+    "@sveltejs/vite-plugin-svelte": "^4.0.2",
     "@types/eslint": "^9.6.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.12.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.44.1",
-    "globals": "^15.10.0",
+    "eslint-plugin-svelte": "^2.46.0",
+    "globals": "^15.12.0",
     "mdsvex": "^0.12.3",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
+    "prettier-plugin-svelte": "^3.3.2",
     "remark-gfm": "^4.0.0",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.4",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.2",
-    "typescript-eslint": "^8.8.0",
-    "vite": "^5.4.8"
+    "svelte": "^5.2.7",
+    "svelte-check": "^4.1.0",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^5.4.11"
   },
   "type": "module"
 }

src/lib/components/AudioCard.svelte

@@ -9,9 +9,13 @@
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
 
-  export let src: string;
-  export let title: string;
-  export let genre: string | null = null;
+  interface Props {
+    src: string;
+    title: string;
+    genre?: string | null;
+  }
+
+  let { src, title, genre = null }: Props = $props();
 
   // Register our song into our parents list for "play all" tracking
   addSong(getContext<Writable<PlaylistEntry[]>>("songs"), src, title);
@@ -25,7 +29,7 @@
   <button
     type="button"
     class="audio-card {$GlobalAudioCurrentSong === src ? 'current-song' : ''}"
-    on:click={play}
+    onclick={play}
   >
     <i class="fa fa-play text-xl"></i>
     <b>{title}</b>
@@ -36,8 +40,9 @@
   <button
     type="button"
     title="Add to Queue"
+    aria-label="Add to Queue"
     class="absolute -bottom-1 -right-1 size-8 rounded-full bg-sky-900 hover:text-white hover:bg-sky-700"
-    on:click={(e) => {
+    onclick={(e) => {
       addSong(GlobalPlaylist, src, title);
       const button = e.currentTarget;
       button.classList.add("animate-ping");

src/lib/components/AudioCardList.svelte

@@ -2,6 +2,11 @@
   import { addSong, GlobalPlaylist, type PlaylistEntry } from "$lib/audioplayer";
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
+  interface Props {
+    children?: import("svelte").Snippet;
+  }
+
+  let { children }: Props = $props();
 
   // Allow Audio Card elements to register with this context
   const listedSongs = setContext("songs", writable<PlaylistEntry[]>([]));
@@ -10,7 +15,7 @@
 <button
   type="button"
   class="p-4 mb-4 rounded-xl bg-zinc-900 text-sky-400 hover:text-white hover:bg-zinc-700"
-  on:click={(e) => {
+  onclick={(e) => {
     for (const song of $listedSongs) {
       addSong(GlobalPlaylist, song.url, song.title);
     }
@@ -25,7 +30,7 @@
 >
 
 <div class="audio-card-list">
-  <slot />
+  {@render children?.()}
 </div>
 
 <style lang="postcss">

src/lib/components/AudioPlayer.svelte

@@ -3,18 +3,22 @@
   import { writable, type Writable } from "svelte/store";
   import PlaylistViewer from "./PlaylistViewer.svelte";
 
-  export let playlist: Writable<PlaylistEntry[]> = writable([]);
-
-  let url: string | null = null;
-  let name: string;
-  let time: number;
-  let duration: number;
-  let paused: boolean = true;
-  let pendingPlay: boolean = false;
-  let muted: boolean;
-  let readyState: number;
-  let audio: HTMLAudioElement;
-  let playlistViewer: PlaylistViewer;
+  interface Props {
+    playlist?: Writable<PlaylistEntry[]>;
+    onUrlChanged: (url: string | null) => void;
+  }
+  let { playlist = writable([]), onUrlChanged }: Props = $props();
+
+  let url: string | null = $state(null);
+  let name: string | undefined = $state();
+  let time: number = $state(0);
+  let duration: number = $state(0);
+  let paused: boolean = $state(true);
+  let pendingPlay: boolean = $state(false);
+  let muted: boolean = $state(false);
+  let readyState: number = $state(0);
+  let audio: HTMLAudioElement | undefined = $state();
+  let playlistViewer: PlaylistViewer | undefined = $state();
 
   function format(time: number): string {
     if (isNaN(time)) return "...";
@@ -23,13 +27,13 @@
     return `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
   }
 
-  let volumeIcon: string;
-  $: {
+  let volumeIcon: string = $state("");
+  $effect(() => {
     if (muted) volumeIcon = "fa-volume-xmark";
     else if ($GlobalAudioVolume >= 0.5) volumeIcon = "fa-volume-high";
     else if ($GlobalAudioVolume >= 0.2) volumeIcon = "fa-volume-low";
     else volumeIcon = "fa-volume-off";
-  }
+  });
 
   // Public access functions
 
@@ -60,24 +64,25 @@
     }
   }
 
-  $: {
+  $effect(() => {
     // Open player when no song is set but we add to queue.
     if (!url && $playlist.length > 0) {
       playNext(false);
     }
-  }
+  });
 
   // Restart the actual player when variables changed and data is ready
-  $: {
+  $effect(() => {
     if (pendingPlay && url && audio && readyState > audio.HAVE_CURRENT_DATA) {
       paused = false;
       pendingPlay = false;
     }
-  }
+  });
 
-  // Provide hook for base layout
-  export let onUrlChanged: (url: string | null) => void;
-  $: onUrlChanged(url);
+  // Call hook for base layout
+  $effect(() => {
+    onUrlChanged(url);
+  });
 
   function onEnded() {
     time = 0;
@@ -99,7 +104,7 @@
         bind:duration
         bind:paused
         bind:readyState
-        on:ended={onEnded}
+        onended={onEnded}
       >
       </audio>
 
@@ -109,7 +114,7 @@
         title="Play"
         class="btn size-12 shrink-0"
         aria-label={paused ? "play" : "pause"}
-        on:click={togglePlay}
+        onclick={togglePlay}
       >
         <i class="fa {paused ? 'fa-play' : 'fa-pause'} text-2xl"></i>
       </button>
@@ -119,8 +124,9 @@
         <button
           type="button"
           title="Next"
+          aria-label="Next"
           class="btn size-12 shrink-0"
-          on:click={() => playNext(true)}
+          onclick={() => playNext(true)}
         >
           <i class="fa fa-forward-step text-2xl"></i>
         </button>
@@ -148,8 +154,9 @@
       <button
         type="button"
         title="Mute"
+        aria-label="Mute"
         class="icon-button"
-        on:click={() => {
+        onclick={() => {
           muted = !muted;
         }}
       >
@@ -166,24 +173,26 @@
         max="1"
       />
       <!-- Download link -->
-      <button type="button" title="Download" class="icon-button">
-        <a href={url} download><i class="fa fa-download"></i></a>
+      <button type="button" title="Download" aria-label="Download" class="icon-button">
+        <a href={url} aria-label="Download" download><i class="fa fa-download"></i></a>
       </button>
       <!-- Playlist link -->
       <button
         type="button"
         title="Playlist"
+        aria-label="Playlist"
         class="icon-button"
-        on:click={() => playlistViewer.show()}
+        onclick={() => playlistViewer?.show()}
       >
         <i class="fa fa-list"></i>
       </button>
       <!-- Close button -->
       <button
         type="button"
         title="Close"
+        aria-label="Close"
         class="icon-button"
-        on:click={() => {
+        onclick={() => {
           url = null;
           playlist.set([]);
         }}><i class="fa fa-xmark"></i></button

src/lib/components/Header.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-  let menuOpen: boolean = false;
+  let menuOpen: boolean = $state(false);
 
-  function toggleMenu() {
+  function toggleMenu(event: MouseEvent) {
     menuOpen = !menuOpen;
 
     if (menuOpen) {
       document.body.addEventListener("click", toggleMenu);
     } else {
       document.body.removeEventListener("click", toggleMenu);
     }
+
+    event.stopPropagation();
   }
 </script>
 
@@ -17,7 +19,7 @@
     <div class="flex justify-between px-3">
       <a class="text-xl font-semibold content-center py-4" href="/">Mystler.eu</a>
       <div class="sm:hidden py-2 content-center">
-        <button type="button" class="btn w-10" on:click|stopPropagation={toggleMenu}>
+        <button type="button" class="btn w-10" onclick={toggleMenu} aria-label="Toggle Menu">
           <i class="fa {menuOpen ? 'fa-xmark' : 'fa-bars'}"></i>
         </button>
       </div>

src/lib/components/MarkdownContent.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import { PageDescription, PageTitle } from "$lib/page-meta";
-  export let title;
-  export let description;
+
+  interface Props {
+    title: any;
+    description: any;
+    children?: import("svelte").Snippet;
+  }
+  let { title, description, children }: Props = $props();
 
   // Set our metadata if we are rendering inside md-pages.
   if ($page.route.id?.startsWith("/(md-pages)")) {
@@ -11,7 +16,7 @@
   }
 </script>
 
-<div class="md"><slot /></div>
+<div class="md">{@render children?.()}</div>
 
 <style lang="postcss">
   .md :global(ul) {

src/lib/components/PageNavigation.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-  export let currentPage: number;
-  export let hasNextPage: boolean;
-  export let hasPrevPage: boolean;
+  interface Props {
+    currentPage: number;
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
+  }
+
+  let { currentPage, hasNextPage, hasPrevPage }: Props = $props();
 </script>
 
 <div class="flex justify-between">

src/lib/components/Panel.svelte

@@ -1,17 +1,22 @@
+<script>
+  /** @type {{title?: import('svelte').Snippet, date?: import('svelte').Snippet, children?: import('svelte').Snippet}} */
+  let { title, date, children } = $props();
+</script>
+
 <article class="bg-zinc-800 rounded-xl mb-4 last:mb-0">
-  {#if $$slots.title || $$slots.date}
+  {#if title || date}
     <div class="panel-head px-4 py-4 flex justify-between items-center rounded-t-xl bg-zinc-900">
-      {#if $$slots.title}
+      {#if title}
         <h3 class="mb-0 grow">
-          <slot name="title" />
+          {@render title()}
         </h3>
       {/if}
-      {#if $$slots.title}
-        <div class="text-right"><slot name="date" /></div>
+      {#if date}
+        <div class="text-right">{@render date()}</div>
       {/if}
     </div>
   {/if}
   <div class="p-4">
-    <slot />
+    {@render children?.()}
   </div>
 </article>