feat: update to svelte 5svelte-5

4 files changed, 103 insertions, 53 deletions

diff --git a/src/lib/User/BadgeWall/AWC.svelte b/src/lib/User/BadgeWall/AWC.svelte
index 1cf82a1b..2bd21001 100644
--- a/src/lib/User/BadgeWall/AWC.svelte
+++ b/src/lib/User/BadgeWall/AWC.svelte
@@ -5,10 +5,19 @@
   import FallbackBadge from './FallbackBadge.svelte';
   import './badges.css';
 
-  export let awcPromise: Promise<Response>;
-  export let categoryFilter: string | null;
-  export let isOwner: boolean;
-  export let preferences: Preferences;
+  interface Props {
+    awcPromise: Promise<Response>;
+    categoryFilter: string | null;
+    isOwner: boolean;
+    preferences: Preferences;
+  }
+
+  let {
+    awcPromise,
+    categoryFilter,
+    isOwner,
+    preferences
+  }: Props = $props();
 
   const awcBadgesGrouped = (awcResponse: string): AWCBadgesGroup[] => {
     return Array.from(
@@ -72,7 +81,7 @@
               {group.group}
             </summary>
 
-            <p />
+            <p></p>
 
             <div class="badges">
               {#each group.badges as badge, index}
@@ -92,7 +101,7 @@
             </div>
           </details>
 
-          <p />
+          <p></p>
         {/each}
       {/if}
     {/await}
diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte
index 7a54cbc4..5daccdd2 100644
--- a/src/lib/User/BadgeWall/BadgePreview.svelte
+++ b/src/lib/User/BadgeWall/BadgePreview.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { thumbnail } from '$lib/Utility/image';
   import type { Badge } from '$lib/Database/SB/User/badges';
   import { cdn } from '$lib/Utility/image';
@@ -8,16 +10,26 @@
   import root from '$lib/Utility/root';
   import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
 
-  export let selectedBadge: Badge | undefined;
-  export let onNext: () => void = () => {};
-  export let onPrevious: () => void = () => {};
-  export let hasNext: boolean;
-  export let hasPrevious: boolean;
+  interface Props {
+    selectedBadge: Badge | undefined;
+    onNext?: () => void;
+    onPrevious?: () => void;
+    hasNext: boolean;
+    hasPrevious: boolean;
+  }
+
+  let {
+    selectedBadge = $bindable(),
+    onNext = () => {},
+    onPrevious = () => {},
+    hasNext,
+    hasPrevious
+  }: Props = $props();
 
-  let source = cdn(thumbnail(selectedBadge?.image || '')) || '';
+  let source = $state(cdn(thumbnail(selectedBadge?.image || '')) || '');
   let badgeReference: HTMLImageElement;
 
-  $: {
+  run(() => {
     if (selectedBadge && selectedBadge.image) {
       const image = new Image();
 
@@ -26,14 +38,14 @@
         source = image.src;
       };
     }
-  }
+  });
 
-  $: {
+  run(() => {
     if (selectedBadge)
       fetch(root(`/api/badges?incrementClickCount=${selectedBadge.id}`), {
         method: 'PUT'
       });
-  }
+  });
 
   onMount(() => {
     badgeReference = document.querySelector('.badge-container-image') as HTMLImageElement;
@@ -105,7 +117,7 @@
     <div class="badge-preview-badge">
       {#if selectedBadge.image}
         <div role="img" class="badge-container">
-          <a href={'#'} on:click={onClick} class="badge-container-image">
+          <a href={'#'} onclick={onClick} class="badge-container-image">
             <ParallaxImage
               {source}
               alternativeText="selectedBadge.description"
@@ -115,7 +127,7 @@
           </a>
         </div>
 
-        <p />
+        <p></p>
       {/if}
     </div>
 
@@ -124,7 +136,7 @@
         {$locale().dateFormatter(databaseTimeToDate(selectedBadge.time))}
 
         {#if (selectedBadge.designer || selectedBadge.source || selectedBadge.post) && !selectedBadge.description}
-          <p />
+          <p></p>
         {:else if selectedBadge.description}
           <br />
         {/if}
@@ -133,7 +145,7 @@
       {#if selectedBadge.description}
         {selectedBadge.description}
 
-        <p />
+        <p></p>
       {/if}
 
       {#if selectedBadge.designer}
@@ -185,7 +197,7 @@
 
         <a
           href={`?category=${selectedBadge.category}`}
-          on:click={() => (selectedBadge = undefined)}
+          onclick={() => (selectedBadge = undefined)}
         >
           {selectedBadge.category}
         </a>
@@ -200,11 +212,11 @@
 
       <div class="badge-preview-seek">
         {#if hasPrevious}
-          <button on:click={onPrevious}>Previous</button>
+          <button onclick={onPrevious}>Previous</button>
         {/if}
 
         {#if hasNext}
-          <button on:click={onNext} style="float: right;">Next</button>
+          <button onclick={onNext} style="float: right;">Next</button>
         {/if}
       </div>
     </div>
diff --git a/src/lib/User/BadgeWall/Badges.svelte b/src/lib/User/BadgeWall/Badges.svelte
index b233d0c3..1acd4cce 100644
--- a/src/lib/User/BadgeWall/Badges.svelte
+++ b/src/lib/User/BadgeWall/Badges.svelte
@@ -9,19 +9,30 @@
   import type { Preferences } from '../../../graphql/$types';
   import type { IndexedBadge } from './badge';
 
-  export let ungroupedBadges: IndexedBadge[];
-  export let groupedBadges: [string, IndexedBadge[]][];
-  export let categoryFilter: string | null;
-  export let editMode: boolean;
-  export let preferences: Preferences | undefined;
-  export let selectedBadge: IndexedBadge | undefined = undefined;
+  interface Props {
+    ungroupedBadges: IndexedBadge[];
+    groupedBadges: [string, IndexedBadge[]][];
+    categoryFilter: string | null;
+    editMode: boolean;
+    preferences: Preferences | undefined;
+    selectedBadge?: IndexedBadge | undefined;
+  }
+
+  let {
+    ungroupedBadges,
+    groupedBadges,
+    categoryFilter,
+    editMode,
+    preferences,
+    selectedBadge = $bindable(undefined)
+  }: Props = $props();
 </script>
 
 {#if ungroupedBadges.length === 0}
   <div class="card">
     No due.moe registered badges found for this user. <a
       href={'#'}
-      on:click={(e) => e.preventDefault()}
+      onclick={(e) => e.preventDefault()}
       title="This alert does not include AWC badges."
       use:tooltip>?</a
     >
@@ -36,7 +47,7 @@
   <details open={categoryFilter ? categoryFilter === category : true}>
     <summary>{category}</summary>
 
-    <p />
+    <p></p>
 
     <div class="badges">
       {#each badges as badge}
@@ -54,7 +65,7 @@
             >
               <a
                 href={`#`}
-                on:click={() => {
+                onclick={() => {
                   selectedBadge = badge;
 
                   const hiddenInput = document.querySelector('input[name="hidden"]');
@@ -93,6 +104,6 @@
   </details>
 
   {#if groupedBadges[groupedBadges.length - 1][0] !== category}
-    <p />
+    <p></p>
   {/if}
 {/each}
diff --git a/src/lib/User/BadgeWall/FallbackBadge.svelte b/src/lib/User/BadgeWall/FallbackBadge.svelte
index 35a50a7d..68667031 100644
--- a/src/lib/User/BadgeWall/FallbackBadge.svelte
+++ b/src/lib/User/BadgeWall/FallbackBadge.svelte
@@ -9,22 +9,40 @@
   import { dev } from '$app/environment';
   import type { Preferences } from '../../../graphql/$types';
 
-  export let source: string | null | undefined;
-  export let alternative: string | null | undefined;
-  export let fallback: string | null | undefined;
-  export let maxReplaceCount = 1;
-  export let replaceDelay = 1000;
-  export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
-  export let hideOnError = false;
-  export let badge: Badge;
-  export let style = '';
-  export let selectedBadge: Badge | null = null;
-  export let awc = false;
-  export let index: number | null = null;
-  export let preferences: Preferences | undefined;
-
-  let replaceCount = 0;
-  let badgeReference: HTMLImageElement;
+  interface Props {
+    source: string | null | undefined;
+    alternative: string | null | undefined;
+    fallback: string | null | undefined;
+    maxReplaceCount?: number;
+    replaceDelay?: number;
+    error?: string;
+    hideOnError?: boolean;
+    badge: Badge;
+    style?: string;
+    selectedBadge?: Badge | null;
+    awc?: boolean;
+    index?: number | null;
+    preferences: Preferences | undefined;
+  }
+
+  let {
+    source,
+    alternative,
+    fallback,
+    maxReplaceCount = 1,
+    replaceDelay = 1000,
+    error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg',
+    hideOnError = false,
+    badge,
+    style = '',
+    selectedBadge = $bindable(null),
+    awc = false,
+    index = null,
+    preferences
+  }: Props = $props();
+
+  let replaceCount = $state(0);
+  let badgeReference: HTMLImageElement = $state();
   const mouse = tweened(
     { x: 0, y: 0 },
     {
@@ -82,9 +100,9 @@
       href={awc ? badgeToAny(badge).link : '#'}
       target="_blank"
       class="badge-container badge"
-      on:mousemove={handleMouseMove}
-      on:mouseleave={handleMouseLeave}
-      on:click={(e) => {
+      onmousemove={handleMouseMove}
+      onmouseleave={handleMouseLeave}
+      onclick={(e) => {
         if (!awc) {
           e.preventDefault();
 
@@ -100,7 +118,7 @@
         bind:this={badgeReference}
         style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
           10}deg); ${style}"
-        on:error={(e) => delayedReplace(e, fallback)}
+        onerror={(e) => delayedReplace(e, fallback)}
       />
     </a>
   </Tooltip>