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

6 files changed, 120 insertions, 101 deletions

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index f822d521..8cef378a 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -3,17 +3,19 @@
   import { closest } from '$lib/Error/path';
   import Popup from '$lib/Layout/Popup.svelte';
 
-  $: suggestion = closest($page.url.pathname.replace('/', ''), [
-    'birthdays',
-    'completed',
-    'schedule',
-    'hololive',
-    'settings',
-    'tools',
-    'updates',
-    'user',
-    'wrapped'
-  ]);
+  let suggestion = $derived(
+    closest($page.url.pathname.replace('/', ''), [
+      'birthdays',
+      'completed',
+      'schedule',
+      'hololive',
+      'settings',
+      'tools',
+      'updates',
+      'user',
+      'wrapped'
+    ])
+  );
 </script>
 
 <Popup>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 08305788..5c08ec50 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -40,17 +40,25 @@
   injectSpeedInsights();
   injectAnalytics({ mode: dev ? 'development' : 'production' });
 
-  export let data;
+  import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
 
-  let isHeaderVisible = true;
-  let previousScrollPosition = 0;
+  interface Props {
+    data: { url: string; commit?: string; user?: AniListAuthorisation };
+    children: import('svelte').Snippet;
+  }
+
+  let { data, children }: Props = $props();
+  let isHeaderVisible = $state(true);
+  let previousScrollPosition = $state(0);
   let notificationInterval: NodeJS.Timeout | undefined = undefined;
 
   addMessages('en', english as unknown as LocaleDictionary);
   addMessages('ja', japanese as unknown as LocaleDictionary);
   init({ fallbackLocale: 'en', initialLocale: $settings.displayLanguage });
 
-  $: i18nLocale.set($settings.displayLanguage);
+  $effect.pre(() => {
+    i18nLocale.set($settings.displayLanguage);
+  });
 
   const navigationOrder = ['/', '/completed', '/schedule', '/updates', '/tools', '/settings'];
   const previousPage: Readable<string | null> = readable(null, (set) => {
@@ -61,13 +69,15 @@
     return () => unsubscribe();
   });
 
-  $: way = data.url.includes('/user')
-    ? 200
-    : $previousPage && $previousPage.includes('/user')
-      ? -200
-      : navigationOrder.indexOf(data.url) > navigationOrder.indexOf($previousPage ?? '/')
-        ? 200
-        : -200;
+  let way = $derived(
+    data.url.includes('/user')
+      ? 200
+      : $previousPage && $previousPage.includes('/user')
+        ? -200
+        : navigationOrder.indexOf(data.url) > navigationOrder.indexOf($previousPage ?? '/')
+          ? 200
+          : -200
+  );
 
   const handleScroll = () => {
     const currentScrollPosition = window.scrollY;
@@ -121,7 +131,7 @@
 
     await userDatabase.users.where('id').below(0).delete();
 
-    if (!(await userDatabase.users.get($userIdentity.id)) && $userIdentity.id > 0)
+    if (!(await userDatabase.users.get($userIdentity.id)) && $userIdentity.id > 0 && data.user)
       await userDatabase.users.put({
         id: $userIdentity.id,
         user: data.user,
@@ -138,7 +148,7 @@
     if (notificationInterval) clearInterval(notificationInterval);
   });
 
-  $: {
+  $effect(() => {
     if ((data.url === '/' || data.url === '/completed' || data.url === '/schedule') && !$subsPlease)
       fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`))
         .then((r) => r.json())
@@ -158,7 +168,7 @@
 
           subsPlease.set(r);
         });
-  }
+  });
 </script>
 
 <HeadTitle />
@@ -260,7 +270,7 @@
     <NotificationsProvider zIndex={5000}>
       <Root {data} {way}>
         {#if $userIdentity.id !== -1}
-          <slot />
+          {@render children()}
         {:else if data.url === '/settings'}
           <Skeleton grid={true} count={1} height="10vh" />
           <Skeleton grid={true} count={1} height="30vh" />
diff --git a/src/routes/reader/+page.svelte b/src/routes/reader/+page.svelte
index 775d3659..4cbc65aa 100644
--- a/src/routes/reader/+page.svelte
+++ b/src/routes/reader/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Notice from '$lib/Error/Notice.svelte';
   import Message from '$lib/Loading/Message.svelte';
   import MangaDexChapters from '$lib/Reader/Chapters/MangaDex.svelte';
@@ -6,9 +6,8 @@
   import { decodeResource, fetchResource, identify, Resource } from '$lib/Reader/resource';
   import InputTemplate from '$lib/Tools/InputTemplate.svelte';
 
-  let submission = '';
-
-  $: resourceIdentity = identify(submission);
+  let submission = $state('');
+  let resourceIdentity = $derived(identify(submission));
 </script>
 
 <InputTemplate field="Manga URL" bind:submission submitText="Read" preserveCase>
diff --git a/src/routes/tools/[tool]/+page.svelte b/src/routes/tools/[tool]/+page.svelte
index 68eb0c07..a4508ff9 100644
--- a/src/routes/tools/[tool]/+page.svelte
+++ b/src/routes/tools/[tool]/+page.svelte
@@ -21,17 +21,24 @@
   import Tracker from '$lib/Tools/Tracker/Tool.svelte';
   import BirthdaysTemplate from '$lib/Tools/BirthdaysTemplate.svelte';
 
-  export let data;
+  import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
 
-  let tool = data.tool ?? 'default';
+  interface Props {
+    data: { tool?: string; user: AniListAuthorisation };
+  }
+
+  let { data }: Props = $props();
+  let tool = $derived(data.tool ?? 'default');
 
   onMount(() => {
     if (tool === 'default') goto(root('/tools'));
   });
 
-  $: suggestion = closest(tool, Object.keys(tools));
+  let suggestion = $derived(closest(tool, Object.keys(tools)));
 
-  $: if (tool == 'girls') goto(root('/girls'));
+  $effect.pre(() => {
+    if (tool === 'girls') goto(root('/girls'));
+  });
 </script>
 
 <Picker bind:tool />
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index eeeebf91..ff86beae 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -23,12 +23,11 @@
   import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
   import { graphql } from '$houdini';
 
-  export let data;
-
-  $: ({ Profile } = data);
-  $: preferences = $Profile.fetching
-    ? undefined
-    : ($Profile.data?.User?.preferences as Preferences | undefined);
+  let { data } = $props();
+  let Profile = $derived(data.Profile);
+  let preferences = $derived(
+    $Profile.fetching ? undefined : ($Profile.data?.User?.preferences as Preferences | undefined)
+  );
 
   const setCategoriesQuery = graphql(`
     mutation SetCategories($categories: [String!]!) {
@@ -102,20 +101,20 @@
     }
   `);
 
-  $: userData = data.userData;
-
-  let error = false;
-  let schedule: ParseResult | undefined = undefined;
-  let draggedCategory: string | null = null;
-  let draggedOverCategory: string | null = null;
-
-  $: displayBadges = (username: string, badges: number | string) =>
-    $locale({
-      values: {
-        badges: badges,
-        username
-      }
-    }).user.profile.badges;
+  let userData = $derived(data.userData);
+  let error = $state(false);
+  let schedule: ParseResult | undefined = $state(undefined);
+  let draggedCategory: string | null = $state(null);
+  let draggedOverCategory: string | null = $state(null);
+  let displayBadges = $derived(
+    (username: string, badges: number | string) =>
+      $locale({
+        values: {
+          badges: badges,
+          username
+        }
+      }).user.profile.badges
+  );
 
   const handleDragStart = (
     event: DragEvent & { currentTarget: EventTarget & HTMLDivElement },
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 2dc11ca3..ef399628 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -26,32 +26,35 @@
   import type { Preferences } from '../../../../graphql/user/$types';
   import localforage from 'localforage';
 
-  export let data;
-
-  $: ({ BadgeWallUser } = data);
-  $: preferences = $BadgeWallUser.fetching
-    ? undefined
-    : ($BadgeWallUser.data?.User?.preferences as Preferences | undefined);
-
-  $: if (browser && preferences && preferences.badge_wall_css) {
-    const sanitise = (css: string) =>
-      css
-        .replace(/\/\*[\s\S]*?\*\//g, '')
-        .replace(/<\/?[^>]+(>|$)/g, '')
-        .replace(
-          /(expression|javascript|vbscript|onerror|onload|onclick|onmouseover|onmouseout|onmouseup|onmousedown|onkeydown|onkeyup|onkeypress|onblur|onfocus|onsubmit|onreset|onselect|onchange|ondblclick):/gi,
-          ''
-        )
-        .replace(/(behaviour|behavior|moz-binding|content):/gi, '')
-        .replace(/\s+/g, ' ')
-        .trim();
-    const style = document.createElement('style');
-
-    style.dataset.badgeWall = 'true';
-    style.innerHTML = sanitise(preferences.badge_wall_css);
-
-    document.head.appendChild(style);
-  }
+  let { data } = $props();
+  let BadgeWallUser = $derived(data.BadgeWallUser);
+  let preferences = $derived(
+    $BadgeWallUser.fetching
+      ? undefined
+      : ($BadgeWallUser.data?.User?.preferences as Preferences | undefined)
+  );
+
+  $effect.pre(() => {
+    if (browser && preferences && preferences.badge_wall_css) {
+      const sanitise = (css: string) =>
+        css
+          .replace(/\/\*[\s\S]*?\*\//g, '')
+          .replace(/<\/?[^>]+(>|$)/g, '')
+          .replace(
+            /(expression|javascript|vbscript|onerror|onload|onclick|onmouseover|onmouseout|onmouseup|onmousedown|onkeydown|onkeyup|onkeypress|onblur|onfocus|onsubmit|onreset|onselect|onchange|ondblclick):/gi,
+            ''
+          )
+          .replace(/(behaviour|behavior|moz-binding|content):/gi, '')
+          .replace(/\s+/g, ' ')
+          .trim();
+      const style = document.createElement('style');
+
+      style.dataset.badgeWall = 'true';
+      style.innerHTML = sanitise(preferences.badge_wall_css);
+
+      document.head.appendChild(style);
+    }
+  });
 
   const updateBadgeQuery = graphql(`
     mutation UpdateBadge(
@@ -178,27 +181,26 @@
     image: string;
   }
 
-  let editMode = false;
-  let importMode = false;
-  let error: null | string;
-  let awcPromise: Promise<Response>;
-  let confirmDelete = 0;
-  let confirmPrune = 0;
-  let selectedBadge: IndexedBadge | undefined = undefined;
-  let loadError: string | null = null;
-  const isId = /^\d+$/.test(data.username);
-  let importImages: ImportImage[] | undefined = undefined;
-  let importLinks = false;
-  let importCategory = '';
-  let importReplies = false;
-  let badger: Partial<User> | null;
-  let migrateMode = false;
-  let hideMode = false;
+  let editMode = $state(false);
+  let importMode = $state(false);
+  let error: null | string = $state(null);
+  let awcPromise: Promise<Response> | undefined = $state(undefined);
+  let confirmDelete = $state(0);
+  let confirmPrune = $state(0);
+  let selectedBadge: IndexedBadge | undefined = $state(undefined);
+  let loadError: string | null = $state(null);
+  let isId = $derived(/^\d+$/.test(data.username));
+  let importImages: ImportImage[] | undefined = $state(undefined);
+  let importLinks = $state(false);
+  let importCategory = $state('');
+  let importReplies = $state(false);
+  let badger: Partial<User> | null = $state(null);
+  let migrateMode = $state(false);
+  let hideMode = $state(false);
   const authorised = authorisedJson.includes($identity.id);
-  let noticeDismissed = false;
-
-  $: categoryFilter = new URLSearchParams($page.url.searchParams).get('category');
-  $: loadQueryParameter = new URLSearchParams($page.url.searchParams).get('load');
+  let noticeDismissed = $state(false);
+  let categoryFilter = $derived(new URLSearchParams($page.url.searchParams).get('category'));
+  let loadQueryParameter = $derived(new URLSearchParams($page.url.searchParams).get('load'));
 
   type GroupedBadges = { [key: string]: IndexedBadge[] };
 
@@ -553,7 +555,7 @@
       !editMode}
 
     <div id="badges">
-      {#if preferences && !preferences.hide_awc_badges}
+      {#if preferences && !preferences.hide_awc_badges && awcPromise}
         <AWC {awcPromise} {categoryFilter} {isOwner} {preferences} />
       {/if}