chore(web): migration svelte 5 syntax (#13883)

web/src/routes/auth/change-password/+page.svelte

@@ -8,7 +8,11 @@
   import type { PageData } from './$types';
   import { t } from 'svelte-i18n';
 
-  export let data: PageData;
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
 
   const onSuccess = async () => {
     await goto(AppRoute.AUTH_LOGIN);
@@ -18,12 +22,14 @@
 </script>
 
 <FullscreenContainer title={data.meta.title}>
-  <p slot="message">
-    {$t('hi_user', { values: { name: $user.name, email: $user.email } })}
-    <br />
-    <br />
-    {$t('change_password_description')}
-  </p>
+  {#snippet message()}
+    <p>
+      {$t('hi_user', { values: { name: $user.name, email: $user.email } })}
+      <br />
+      <br />
+      {$t('change_password_description')}
+    </p>
+  {/snippet}
 
   <ChangePasswordForm {onSuccess} />
 </FullscreenContainer>

web/src/routes/auth/login/+page.svelte

@@ -6,15 +6,21 @@
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import type { PageData } from './$types';
 
-  export let data: PageData;
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
 </script>
 
 {#if $featureFlags.loaded}
   <FullscreenContainer title={data.meta.title} showMessage={!!$serverConfig.loginPageMessage}>
-    <p slot="message">
-      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-      {@html $serverConfig.loginPageMessage}
-    </p>
+    {#snippet message()}
+      <p>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html $serverConfig.loginPageMessage}
+      </p>
+    {/snippet}
 
     <LoginForm
       onSuccess={async () => await goto(AppRoute.PHOTOS, { invalidateAll: true })}

web/src/routes/auth/onboarding/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
@@ -9,7 +11,7 @@
   import { retrieveServerConfig } from '$lib/stores/server-config.store';
   import { updateAdminOnboarding } from '@immich/sdk';
 
-  let index = 0;
+  let index = $state(0);
 
   interface OnboardingStep {
     name: string;
@@ -27,11 +29,11 @@
     { name: 'storage', component: OnboadingStorageTemplate },
   ];
 
-  $: {
+  run(() => {
     const stepState = $page.url.searchParams.get('step');
     const temporaryIndex = onboardingSteps.findIndex((step) => step.name === stepState);
     index = temporaryIndex >= 0 ? temporaryIndex : 0;
-  }
+  });
 
   const handleDoneClicked = async () => {
     if (index >= onboardingSteps.length - 1) {
@@ -50,6 +52,8 @@
       await goto(`${AppRoute.AUTH_ONBOARDING}?${QueryParameter.ONBOARDING_STEP}=${onboardingSteps[index].name}`);
     }
   };
+
+  const SvelteComponent = $derived(onboardingSteps[index].component);
 </script>
 
 <section id="onboarding-page" class="min-w-screen flex min-h-screen p-4">
@@ -61,11 +65,7 @@
       ></div>
     </div>
     <div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
-      <svelte:component
-        this={onboardingSteps[index].component}
-        onDone={handleDoneClicked}
-        onPrevious={handlePrevious}
-      />
+      <SvelteComponent onDone={handleDoneClicked} onPrevious={handlePrevious} />
     </div>
   </div>
 </section>

web/src/routes/auth/register/+page.svelte

@@ -4,13 +4,19 @@
   import type { PageData } from './$types';
   import { t } from 'svelte-i18n';
 
-  export let data: PageData;
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
 </script>
 
 <FullscreenContainer title={data.meta.title}>
-  <p slot="message">
-    {$t('admin.registration_description')}
-  </p>
+  {#snippet message()}
+    <p>
+      {$t('admin.registration_description')}
+    </p>
+  {/snippet}
 
   <AdminRegistrationForm />
 </FullscreenContainer>