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

1 files changed, 25 insertions, 15 deletions

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" />