feat: update to svelte 5svelte-5

5 files changed, 86 insertions, 35 deletions

diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte
index fb270dfe..aca94975 100644
--- a/src/lib/Layout/Dropdown.svelte
+++ b/src/lib/Layout/Dropdown.svelte
@@ -6,12 +6,14 @@
     preventDefault?: boolean;
   }
 
-  export let items: Item[] = [];
-  export let title: string | undefined = undefined;
-  export let header = true;
-  export let center = false;
+  let {
+    items = [] as Item[],
+    title = undefined as string | undefined,
+    header = true,
+    center = false
+  } = $props();
 
-  let open = false;
+  let open = $state(false);
 
   const handleClickOutside = (event: any) => {
     if (!event.target.closest('.dropdown')) open = false;
@@ -30,8 +32,8 @@
   <span
     class={`${header ? 'header-item' : ''} dropdown-toggle`}
     id="dropdown-toggle"
-    on:click|preventDefault={() => (open = !open)}
-    on:keydown={() => {}}
+    onclick={() => (open = !open)}
+    onkeydown={() => {}}
     role="button"
     tabindex="0"
   >
@@ -47,7 +49,7 @@
       <a
         href={item.url}
         class="header-item"
-        on:click={(e) => {
+        onclick={(e) => {
           if (item.preventDefault) e.preventDefault();
           if (item.onClick) item.onClick();
         }}
@@ -89,7 +91,10 @@
     transform: translateY(-20px);
     visibility: hidden;
     $delay: 0.25s;
-    transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay;
+    transition:
+      opacity $delay ease,
+      transform $delay ease,
+      visibility 0s linear $delay;
     left: var(--dropdown-left);
     transform: var(--dropdown-transform);
     z-index: 1;
diff --git a/src/lib/Layout/NumberTicker.svelte b/src/lib/Layout/NumberTicker.svelte
index b5e2f49c..3bd7e6c8 100644
--- a/src/lib/Layout/NumberTicker.svelte
+++ b/src/lib/Layout/NumberTicker.svelte
@@ -1,11 +1,24 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { tweened } from 'svelte/motion';
   import { cubicOut } from 'svelte/easing';
 
-  export let start = 0;
-  export let end = 100;
-  export let duration = 2000;
-  export let delay = 0;
+  /**
+   * @typedef {Object} Props
+   * @property {number} [start]
+   * @property {number} [end]
+   * @property {number} [duration]
+   * @property {number} [delay]
+   */
+
+  /** @type {Props} */
+  let {
+    start = 0,
+    end = 100,
+    duration = 2000,
+    delay = 0
+  } = $props();
 
   const count = tweened(start, {
     duration: duration,
@@ -13,9 +26,9 @@
     delay: delay
   });
 
-  $: {
+  run(() => {
     count.set(end);
-  }
+  });
 </script>
 
 <span class="counter" class:visible={$count !== start}>
diff --git a/src/lib/Layout/Popup.svelte b/src/lib/Layout/Popup.svelte
index b82e86c2..45b719f8 100644
--- a/src/lib/Layout/Popup.svelte
+++ b/src/lib/Layout/Popup.svelte
@@ -1,16 +1,32 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { browser } from '$app/environment';
   import { onMount } from 'svelte';
 
-  export let onLeave = () => {
+  interface Props {
+    onLeave?: any;
+    card?: boolean;
+    smallCard?: boolean;
+    fullscreen?: boolean;
+    show?: boolean;
+    locked?: boolean;
+    center?: boolean;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    onLeave = () => {
     return;
-  };
-  export let card = true;
-  export let smallCard = false;
-  export let fullscreen = false;
-  export let show = true;
-  export let locked = false;
-  export let center = false;
+  },
+    card = true,
+    smallCard = false,
+    fullscreen = false,
+    show = $bindable(true),
+    locked = false,
+    center = false,
+    children
+  }: Props = $props();
 
   const handleClickOutside = (event: any) => {
     if (!locked && event.target.classList.contains('popup')) {
@@ -24,24 +40,24 @@
     if (browser) document.body.style.overflow = 'auto';
   });
 
-  $: {
+  run(() => {
     if (browser) {
       document.body.style.overflow = 'auto';
 
       if (show) document.body.style.overflow = 'hidden';
       else document.body.style.overflow = 'auto';
     }
-  }
+  });
 </script>
 
-<svelte:window on:click={handleClickOutside} />
+<svelte:window onclick={handleClickOutside} />
 
 {#if show}
   <div class={`popup ${fullscreen ? 'popup-fullscreen' : ''}`}>
     <span
       class={`${card ? `card ${smallCard ? 'card-small' : ''}` : ''} ${center ? 'centered' : ''}`}
     >
-      <slot />
+      {@render children?.()}
     </span>
   </div>
 {/if}
diff --git a/src/lib/Layout/TextTransition.svelte b/src/lib/Layout/TextTransition.svelte
index 35cfe1ea..5f5bd036 100644
--- a/src/lib/Layout/TextTransition.svelte
+++ b/src/lib/Layout/TextTransition.svelte
@@ -1,24 +1,37 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { tweened } from 'svelte/motion';
   import { cubicOut } from 'svelte/easing';
 
-  export let text = '';
-  export let opacityTransitionDuration = 50;
-  export let blurTransitionDuration = opacityTransitionDuration;
-  export let easing = cubicOut;
+  /**
+   * @typedef {Object} Props
+   * @property {string} [text]
+   * @property {number} [opacityTransitionDuration]
+   * @property {any} [blurTransitionDuration]
+   * @property {any} [easing]
+   */
+
+  /** @type {Props} */
+  let {
+    text = '',
+    opacityTransitionDuration = 50,
+    blurTransitionDuration = opacityTransitionDuration,
+    easing = cubicOut
+  } = $props();
 
-  let previousValue = '';
+  let previousValue = $state('');
   let opacity = tweened(1, { duration: opacityTransitionDuration, easing });
   let blur = tweened(0, { duration: blurTransitionDuration, easing });
 
-  $: {
+  run(() => {
     if (text !== previousValue)
       Promise.all([opacity.set(0), blur.set(10)]).then(() => {
         previousValue = text;
 
         Promise.all([opacity.set(1), blur.set(0)]);
       });
-  }
+  });
 </script>
 
 <span
diff --git a/src/lib/Layout/Username.svelte b/src/lib/Layout/Username.svelte
index 8b89b708..82be59d0 100644
--- a/src/lib/Layout/Username.svelte
+++ b/src/lib/Layout/Username.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let username: string;
+  interface Props {
+    username: string;
+  }
+
+  let { username }: Props = $props();
 </script>
 
 <a href={`https://anilist.co/user/${username}/`}>@{username}</a>