feat: Complete Svelte 5 runes syntax migrationpost-svelte-5-migration

5 files changed, 92 insertions, 88 deletions

diff --git a/src/lib/Schedule/Crunchyroll.svelte b/src/lib/Schedule/Crunchyroll.svelte
index 9d7c8e70..9e687768 100644
--- a/src/lib/Schedule/Crunchyroll.svelte
+++ b/src/lib/Schedule/Crunchyroll.svelte
@@ -29,8 +29,7 @@
   const soon: CrunchyrollMedia<number | string>[] = crunchyroll.filter(
     (media) => media.day === 'soon'
   );
-
-  $: columnCount = Math.ceil(Object.keys(days).length / 2);
+  let columnCount = $derived(Math.ceil(Object.keys(days).length / 2));
 
   const ordinalSuffix = (i: number) => {
     const j = i % 10;
diff --git a/src/lib/Tools/Birthdays.svelte b/src/lib/Tools/Birthdays.svelte
index 122662d4..a52887ed 100644
--- a/src/lib/Tools/Birthdays.svelte
+++ b/src/lib/Tools/Birthdays.svelte
@@ -18,28 +18,29 @@
 
   const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
   let date = new Date();
-  let month = parseOrDefault(urlParameters, 'month', date.getMonth() + 1);
-  let day = parseOrDefault(urlParameters, 'day', date.getDate());
-  let anisearchBirthdays: Promise<aniSearchBirthday[]>;
-  let acdbBirthdays: Promise<ACDBBirthday[]>;
+  let month = $state(parseOrDefault(urlParameters, 'month', date.getMonth() + 1));
+  let day = $state(parseOrDefault(urlParameters, 'day', date.getDate()));
+  let anisearchBirthdays: Promise<aniSearchBirthday[]> | undefined = $state(undefined);
+  let acdbBirthdays: Promise<ACDBBirthday[]> | undefined = $state(undefined);
 
-  $: {
-    month = Math.min(month, 12);
-    month = Math.max(month, 1);
-    day = Math.min(day, new Date(2024, month, 0).getDate());
-    day = Math.max(day, 1);
+  $effect(() => {
+    const clampedMonth = Math.max(1, Math.min(month, 12));
+    const maxDay = new Date(2024, clampedMonth, 0).getDate();
+    const clampedDay = Math.max(1, Math.min(day, maxDay));
 
-    if (browser) anisearchBirthdays = aniSearchBirthdays(month, day);
+    if (clampedMonth !== month) month = clampedMonth;
+    if (clampedDay !== day) day = clampedDay;
+    if (browser) anisearchBirthdays = aniSearchBirthdays(clampedMonth, clampedDay);
 
-    acdbBirthdays = ACDBBirthdays(month, day);
+    acdbBirthdays = ACDBBirthdays(clampedMonth, clampedDay);
 
     if (browser) {
-      $page.url.searchParams.set('month', month.toString());
-      $page.url.searchParams.set('day', day.toString());
+      $page.url.searchParams.set('month', clampedMonth.toString());
+      $page.url.searchParams.set('day', clampedDay.toString());
       clearAllParameters(['month', 'day']);
       history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
     }
-  }
+  });
 
   onMount(() => clearAllParameters(['month', 'day']));
 
@@ -94,58 +95,61 @@
   };
 </script>
 
-{#await acdbBirthdays}
-  <Message message="Loading birthday set one ..." />
-
-  <Skeleton grid={true} count={100} width="150px" height="170px" />
-{:then acdbBirthdays}
-  {#await anisearchBirthdays}
-    <Message message="Loading birthday set two ..." />
-
+{#if acdbBirthdays && anisearchBirthdays}
+  {#await acdbBirthdays}
+    <Message message="Loading birthday set one ..." />
     <Skeleton grid={true} count={100} width="150px" height="170px" />
-  {:then anisearch}
-    {@const birthdays = combineBirthdaySources(acdbBirthdays, anisearch)}
-
-    <p>
-      <select bind:value={month}>
-        {#each Array.from({ length: 12 }, (_, i) => i + 1) as month}
-          <option value={month}>
-            {new Date(0, month - 1).toLocaleString('default', { month: 'long' })}
-          </option>
+  {:then acdbBirthdays}
+    {#await anisearchBirthdays}
+      <Message message="Loading birthday set two ..." />
+      <Skeleton grid={true} count={100} width="150px" height="170px" />
+    {:then anisearch}
+      {@const birthdays = combineBirthdaySources(acdbBirthdays, anisearch)}
+
+      <p>
+        <select bind:value={month}>
+          {#each Array.from({ length: 12 }, (_, i) => i + 1) as month}
+            <option value={month}>
+              {new Date(0, month - 1).toLocaleString('default', { month: 'long' })}
+            </option>
+          {/each}
+        </select>
+
+        <select bind:value={day}>
+          {#each Array.from({ length: new Date(2024, month, 0).getDate() }, (_, i) => i + 1) as day}
+            <option value={day}>{day}</option>
+          {/each}
+        </select>
+      </p>
+
+      <div class="characters">
+        {#each birthdays as birthday}
+          <div class="card card-small">
+            <a
+              href={`https://anilist.co/search/characters?search=${encodeURIComponent(
+                birthday.name
+              ).replace(/%20/g, '+')}`}
+              target="_blank"
+              title={birthday.origin}
+              use:tooltip
+              data-tooltip-disable={birthday.origin === undefined}
+            >
+              {birthday.name}
+              <img src={birthday.image} alt="Character (Large)" class="character-image" />
+            </a>
+          </div>
         {/each}
-      </select>
-
-      <select bind:value={day}>
-        {#each Array.from({ length: new Date(2024, month, 0).getDate() }, (_, i) => i + 1) as day}
-          <option value={day}>{day}</option>
-        {/each}
-      </select>
-    </p>
-
-    <div class="characters">
-      {#each birthdays as birthday}
-        <div class="card card-small">
-          <a
-            href={`https://anilist.co/search/characters?search=${encodeURIComponent(
-              birthday.name
-            ).replace(/%20/g, '+')}`}
-            target="_blank"
-            title={birthday.origin}
-            use:tooltip
-            data-tooltip-disable={birthday.origin === undefined}
-          >
-            {birthday.name}
-            <img src={birthday.image} alt="Character (Large)" class="character-image" />
-          </a>
-        </div>
-      {/each}
-    </div>
+      </div>
+    {:catch}
+      <Error type="Character" card />
+    {/await}
   {:catch}
     <Error type="Character" card />
   {/await}
-{:catch}
-  <Error type="Character" card />
-{/await}
+{:else}
+  <Message message="Loading ..." />
+  <Skeleton grid={true} count={100} width="150px" height="170px" />
+{/if}
 
 <style lang="scss">
   .characters {
diff --git a/src/lib/Tools/Likes.svelte b/src/lib/Tools/Likes.svelte
index 46d1edaf..56d9f5e2 100644
--- a/src/lib/Tools/Likes.svelte
+++ b/src/lib/Tools/Likes.svelte
@@ -7,16 +7,16 @@
   import settings from '$stores/settings';
   import InputTemplate from './InputTemplate.svelte';
 
-  let submission = '';
-
-  $: normalisedSubmission = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$2');
-  $: submissionType = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$1');
-  $: likesPromise =
+  let submission = $state('');
+  let normalisedSubmission = $derived(submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$2'));
+  let submissionType = $derived(submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$1'));
+  let likesPromise = $derived(
     submissionType === 'activity'
       ? activityLikes(Number(normalisedSubmission))
       : submissionType === 'thread'
         ? threadLikes(Number(normalisedSubmission))
-        : Promise.resolve(null);
+        : Promise.resolve(null)
+  );
 </script>
 
 <InputTemplate
diff --git a/src/lib/Tools/Tracker/Tool.svelte b/src/lib/Tools/Tracker/Tool.svelte
index a3705fbe..116e2918 100644
--- a/src/lib/Tools/Tracker/Tool.svelte
+++ b/src/lib/Tools/Tracker/Tool.svelte
@@ -5,14 +5,13 @@
   import { onMount } from 'svelte';
   import Message from '$lib/Loading/Message.svelte';
 
-  let url = '';
-  let title = '';
-  let progress = 0;
-  let error = '';
-  let masterList: TrackerEntry[] | null = null;
-  let confirmDelete = 0;
-
-  $: listAccess = masterList || [];
+  let url = $state('');
+  let title = $state('');
+  let progress = $state(0);
+  let error = $state('');
+  let masterList: TrackerEntry[] | null = $state(null);
+  let confirmDelete = $state(0);
+  let listAccess = $derived<TrackerEntry[]>(masterList || []);
 
   onMount(async () => {
     masterList = await database.entries.toArray();
diff --git a/src/lib/Tools/UmaMusumeBirthdays.svelte b/src/lib/Tools/UmaMusumeBirthdays.svelte
index 29b1faa6..915777a6 100644
--- a/src/lib/Tools/UmaMusumeBirthdays.svelte
+++ b/src/lib/Tools/UmaMusumeBirthdays.svelte
@@ -23,23 +23,25 @@
 
   const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
   let date = new Date();
-  let month = parseOrDefault(urlParameters, 'month', date.getMonth() + 1);
-  let day = parseOrDefault(urlParameters, 'day', date.getDate());
-  let umapyoi: Promise<Birthday[]>;
+  let month = $state(parseOrDefault(urlParameters, 'month', date.getMonth() + 1));
+  let day = $state(parseOrDefault(urlParameters, 'day', date.getDate()));
+  let umapyoi: Promise<Birthday[]> | undefined = $state(undefined);
 
-  $: {
-    month = Math.min(month, 12);
-    month = Math.max(month, 1);
-    day = Math.min(day, new Date(new Date().getFullYear(), month, 0).getDate());
-    day = Math.max(day, 1);
+  $effect(() => {
+    const clampedMonth = Math.max(1, Math.min(month, 12));
+    const maxDay = new Date(new Date().getFullYear(), clampedMonth, 0).getDate();
+    const clampedDay = Math.max(1, Math.min(day, maxDay));
+
+    if (clampedMonth !== month) month = clampedMonth;
+    if (clampedDay !== day) day = clampedDay;
 
     if (browser) {
-      $page.url.searchParams.set('month', month.toString());
-      $page.url.searchParams.set('day', day.toString());
+      $page.url.searchParams.set('month', clampedMonth.toString());
+      $page.url.searchParams.set('day', clampedDay.toString());
       clearAllParameters(['month', 'day']);
       history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
     }
-  }
+  });
 
   onMount(() => {
     clearAllParameters(['month', 'day']);