feat: update to svelte 5svelte-5

7 files changed, 144 insertions, 86 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index 08583d7c..8b105df5 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -14,26 +14,41 @@
   import subsPlease from '$stores/subsPlease';
   import identity from '$stores/identity';
 
-  export let endTime: number;
-  export let cleanMedia: (
+  interface Props {
+    endTime: number;
+    cleanMedia: (
     media: Media[],
     displayUnresolved: boolean,
     subsPlease: SubsPlease | null,
     plannedOnly?: boolean
   ) => Media[];
-  export let animeLists: Promise<Media[]>;
-  export let user: AniListAuthorisation;
-  export let title: any;
-  export let completed = false;
-  export let plannedOnly = false;
-  export let upcoming = false;
-  export let notYetReleased = false;
-  export let dummy = false;
+    animeLists: Promise<Media[]>;
+    user: AniListAuthorisation;
+    title: any;
+    completed?: boolean;
+    plannedOnly?: boolean;
+    upcoming?: boolean;
+    notYetReleased?: boolean;
+    dummy?: boolean;
+  }
 
-  let lastUpdatedMedia = -1;
-  let previousAnimeList: Media[];
-  let pendingUpdate: number | null = null;
-  let lastListSize = 8;
+  let {
+    endTime,
+    cleanMedia,
+    animeLists = $bindable(),
+    user,
+    title,
+    completed = false,
+    plannedOnly = false,
+    upcoming = false,
+    notYetReleased = false,
+    dummy = false
+  }: Props = $props();
+
+  let lastUpdatedMedia = $state(-1);
+  let previousAnimeList: Media[] = $state();
+  let pendingUpdate: number | null = $state(null);
+  let lastListSize = $state(8);
 
   onMount(() => {
     if (browser) {
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 0220a366..b088964e 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -16,18 +16,35 @@
   import CleanGrid from '$lib/List/CleanGrid.svelte';
   import CleanList from '../CleanList.svelte';
 
-  export let media: Media[];
-  export let title: any;
-  export let animeLists: Promise<Media[]>;
-  export let user: AniListAuthorisation;
-  export let endTime: number;
-  export let lastUpdatedMedia: number;
-  export let completed = false;
-  export let previousAnimeList: Media[];
-  export let pendingUpdate: number | null;
-  export let upcoming = false;
-  export let notYetReleased = false;
-  export let dummy = false;
+  interface Props {
+    media: Media[];
+    title: any;
+    animeLists: Promise<Media[]>;
+    user: AniListAuthorisation;
+    endTime: number;
+    lastUpdatedMedia: number;
+    completed?: boolean;
+    previousAnimeList: Media[];
+    pendingUpdate: number | null;
+    upcoming?: boolean;
+    notYetReleased?: boolean;
+    dummy?: boolean;
+  }
+
+  let {
+    media = $bindable(),
+    title,
+    animeLists = $bindable(),
+    user,
+    endTime,
+    lastUpdatedMedia = $bindable(),
+    completed = false,
+    previousAnimeList = $bindable(),
+    pendingUpdate = $bindable(),
+    upcoming = false,
+    notYetReleased = false,
+    dummy = false
+  }: Props = $props();
 
   let keyCacher: NodeJS.Timeout;
   let totalEpisodeDueCount = media
@@ -109,60 +126,64 @@
 />
 
 {#if media.length === 0}
-  No anime to display. <button on:click={() => (animeLists = cleanCache(user, $identity))}>
+  No anime to display. <button onclick={() => (animeLists = cleanCache(user, $identity))}>
     Force refresh
   </button>
 {/if}
 
 {#if $settings.displayCoverModeAnime}
   <CleanGrid {media} {dummy} type="anime" {upcoming} {notYetReleased}>
-    <div slot="title" let:title={anime} let:progress>
-      {#if !upcoming && !notYetReleased}
-        {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-        <button
-          class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
-          style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
-          on:click={() => increment(anime, progress)}>+</button
-        >
-        {#if !completed || dummy}
-          [{anime.nextAiringEpisode?.episode === -1
-            ? '?'
-            : (anime.nextAiringEpisode?.episode || 1) - 1}]
-          <br />
-          <AiringTime originalAnime={anime} />
+    {#snippet title({ title: anime, progress })}
+        <div   >
+        {#if !upcoming && !notYetReleased}
+          {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+          <button
+            class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+            style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+            onclick={() => increment(anime, progress)}>+</button
+          >
+          {#if !completed || dummy}
+            [{anime.nextAiringEpisode?.episode === -1
+              ? '?'
+              : (anime.nextAiringEpisode?.episode || 1) - 1}]
+            <br />
+            <AiringTime originalAnime={anime} />
+          {/if}
+        {:else}
+          <AiringTime originalAnime={anime} upcoming={true} />
         {/if}
-      {:else}
-        <AiringTime originalAnime={anime} upcoming={true} />
-      {/if}
-    </div>
+      </div>
+      {/snippet}
   </CleanGrid>
 {:else}
   <CleanList {media} type="anime" {upcoming} {notYetReleased} {lastUpdatedMedia}>
-    <span slot="information" let:title={anime} let:progress>
-      {#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
-        <span class="opaque">|</span>
-      {/if}
-      {#if !upcoming || notYetReleased}
-        <!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-        {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-        <button
-          class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
-          style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
-          on:click={() => increment(anime, progress)}>+</button
-        >
-        {#if !completed}
-          [{anime.nextAiringEpisode?.episode === -1
-            ? '?'
-            : (anime.nextAiringEpisode?.episode || 1) - 1}]
+    {#snippet information({ title: anime, progress })}
+        <span   >
+        {#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
+          <span class="opaque">|</span>
+        {/if}
+        {#if !upcoming || notYetReleased}
+          <!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+          {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+          <button
+            class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+            style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+            onclick={() => increment(anime, progress)}>+</button
+          >
+          {#if !completed}
+            [{anime.nextAiringEpisode?.episode === -1
+              ? '?'
+              : (anime.nextAiringEpisode?.episode || 1) - 1}]
+            <span class:countdown={$settings.displayCountdownRightAligned}>
+              <AiringTime originalAnime={anime} />
+            </span>
+          {/if}
+        {:else}
           <span class:countdown={$settings.displayCountdownRightAligned}>
-            <AiringTime originalAnime={anime} />
+            <AiringTime originalAnime={anime} upcoming={true} />
           </span>
         {/if}
-      {:else}
-        <span class:countdown={$settings.displayCountdownRightAligned}>
-          <AiringTime originalAnime={anime} upcoming={true} />
-        </span>
-      {/if}
-    </span>
+      </span>
+      {/snippet}
   </CleanList>
 {/if}
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index 76ec7207..a8cb6fd1 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -11,18 +11,22 @@
   import identity from '$stores/identity';
   import sampleAnime from '$lib/Data/Static/SampleMedia/anime.json';
 
-  export let user: AniListAuthorisation = {
+  interface Props {
+    user?: AniListAuthorisation;
+    dummy?: boolean;
+  }
+
+  let { user = {
     accessToken: '',
     refreshToken: '',
     expiresIn: 0,
     tokenType: ''
-  };
-  export let dummy = false;
+  }, dummy = false }: Props = $props();
 
   const { addNotification } = getNotificationsContext();
-  let animeLists: Promise<Media[]>;
+  let animeLists: Promise<Media[]> = $state();
   let startTime: number;
-  let endTime: number;
+  let endTime: number = $state();
 
   onMount(async () => {
     startTime = performance.now();
diff --git a/src/lib/List/Anime/DueAnimeList.svelte b/src/lib/List/Anime/DueAnimeList.svelte
index 1453baeb..bbae319a 100644
--- a/src/lib/List/Anime/DueAnimeList.svelte
+++ b/src/lib/List/Anime/DueAnimeList.svelte
@@ -12,12 +12,16 @@
   import locale from '$stores/locale';
   import identity from '$stores/identity';
 
-  export let user: AniListAuthorisation;
+  interface Props {
+    user: AniListAuthorisation;
+  }
+
+  let { user }: Props = $props();
 
   const { addNotification } = getNotificationsContext();
-  let animeLists: Promise<Media[]>;
+  let animeLists: Promise<Media[]> = $state();
   let startTime: number;
-  let endTime: number;
+  let endTime: number = $state();
 
   const keyCacher = setInterval(() => {
     startTime = performance.now();
diff --git a/src/lib/List/Anime/DueIndexColumn.svelte b/src/lib/List/Anime/DueIndexColumn.svelte
index 61f2a178..0f20a2a1 100644
--- a/src/lib/List/Anime/DueIndexColumn.svelte
+++ b/src/lib/List/Anime/DueIndexColumn.svelte
@@ -6,8 +6,12 @@
   import ListTitle from '../ListTitle.svelte';
   import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';
 
-  export let userIdentity: { id: number };
-  export let user: AniListAuthorisation;
+  interface Props {
+    userIdentity: { id: number };
+    user: AniListAuthorisation;
+  }
+
+  let { userIdentity, user }: Props = $props();
 </script>
 
 <details open={!$settings.displayAnimeCollapsed} class="list list-due">
diff --git a/src/lib/List/Anime/PlaceholderList.svelte b/src/lib/List/Anime/PlaceholderList.svelte
index 1f701d79..2c9baab5 100644
--- a/src/lib/List/Anime/PlaceholderList.svelte
+++ b/src/lib/List/Anime/PlaceholderList.svelte
@@ -4,8 +4,12 @@
   import ListTitle from '../ListTitle.svelte';
   import type { Title } from '../mediaTitle';
 
-  export let title: Title;
-  export let count = 8;
+  interface Props {
+    title: Title;
+    count?: number;
+  }
+
+  let { title, count = 8 }: Props = $props();
 </script>
 
 <ListTitle {title} />
diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte
index 7b01af86..4957cd45 100644
--- a/src/lib/List/Anime/UpcomingAnimeList.svelte
+++ b/src/lib/List/Anime/UpcomingAnimeList.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { mediaListCollection, Type, type Media } from '$lib/Data/AniList/media';
   import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
   import { onMount } from 'svelte';
@@ -13,12 +15,16 @@
   import { injectAiringTime } from '$lib/Media/Anime/Airing/Subtitled/match';
   import revalidateAnime from '$stores/revalidateAnime';
 
-  export let user: AniListAuthorisation;
+  interface Props {
+    user: AniListAuthorisation;
+  }
+
+  let { user }: Props = $props();
 
   const { addNotification } = getNotificationsContext();
-  let animeLists: Promise<Media[]>;
+  let animeLists: Promise<Media[]> = $state();
   let startTime: number;
-  let endTime: number;
+  let endTime: number = $state();
 
   onMount(async () => {
     startTime = performance.now();
@@ -74,7 +80,7 @@
     return upcomingAnime;
   };
 
-  $: {
+  run(() => {
     if ($revalidateAnime) {
       $revalidateAnime = false;
       $lastPruneTimes.anime = -1;
@@ -83,7 +89,7 @@
         notificationType: 'Upcoming Episodes'
       });
     }
-  }
+  });
 </script>
 
 <AnimeList
@@ -96,7 +102,7 @@
 />
 
 {#if $settings.displayPlannedAnime}
-  <p />
+  <p></p>
 
   <AnimeList
     {endTime}