feat: update to svelte 5svelte-5

2 files changed, 24 insertions, 16 deletions

diff --git a/src/lib/Tools/ActivityHistory/Grid.svelte b/src/lib/Tools/ActivityHistory/Grid.svelte
index db9f3839..8789a786 100644
--- a/src/lib/Tools/ActivityHistory/Grid.svelte
+++ b/src/lib/Tools/ActivityHistory/Grid.svelte
@@ -12,12 +12,16 @@
   import tooltip from '$lib/Tooltip/tooltip';
   import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
 
-  export let user: AniListAuthorisation;
-  export let activityData: ActivityHistoryEntry[] | null = null;
-  export let currentYear = new Date().getFullYear();
+  interface Props {
+    user: AniListAuthorisation;
+    activityData?: ActivityHistoryEntry[] | null;
+    currentYear?: any;
+  }
+
+  let { user, activityData = null, currentYear = new Date().getFullYear() }: Props = $props();
 
-  let activityHistoryData: ActivityHistoryEntry[];
-  let baseHue = Math.floor(Math.random() * 360);
+  let activityHistoryData: ActivityHistoryEntry[] = $state();
+  let baseHue = $state(Math.floor(Math.random() * 360));
 
   onMount(async () => {
     clearAllParameters();
@@ -45,8 +49,8 @@
       <div
         class="grid-item"
         style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
-        on:click={() => (baseHue = Math.floor(Math.random() * 360))}
-        on:keydown={() => {
+        onclick={() => (baseHue = Math.floor(Math.random() * 360))}
+        onkeydown={() => {
           return;
         }}
         role="button"
@@ -55,7 +59,7 @@
         title={`Date: ${new Date(activity.date * 1000).toLocaleDateString()}\nAmount: ${
           activity.amount
         }`}
-      />
+></div>
     {/each}
   </div>
 {/if}
diff --git a/src/lib/Tools/ActivityHistory/Tool.svelte b/src/lib/Tools/ActivityHistory/Tool.svelte
index b6e66a5e..07b2096a 100644
--- a/src/lib/Tools/ActivityHistory/Tool.svelte
+++ b/src/lib/Tools/ActivityHistory/Tool.svelte
@@ -14,10 +14,14 @@
   import Skeleton from '$lib/Loading/Skeleton.svelte';
   import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
 
-  export let user: AniListAuthorisation;
+  interface Props {
+    user: AniListAuthorisation;
+  }
 
-  let activityHistoryData: Promise<ActivityHistoryEntry[]>;
-  let generated = false;
+  let { user }: Props = $props();
+
+  let activityHistoryData: Promise<ActivityHistoryEntry[]> = $state();
+  let generated = $state(false);
 
   onMount(async () => {
     clearAllParameters();
@@ -79,18 +83,18 @@
       <div class="card">
         <ActivityHistoryGrid {user} />
 
-        <p />
+        <p></p>
 
-        <div id="grid-final" />
+        <div id="grid-final"></div>
 
         {#if generated}
-          <p />
+          <p></p>
         {/if}
 
-        <button on:click={screenshot}>Generate grid image</button>
+        <button onclick={screenshot}>Generate grid image</button>
       </div>
 
-      <p />
+      <p></p>
 
       <details open>
         <summary>Days in risk of developing an activity history hole</summary>