Svelte 5 Migration

package.json

@@ -21,8 +21,8 @@
     "@skeletonlabs/tw-plugin": "0.4.0",
     "@sveltejs/adapter-auto": "^3.2.4",
     "@sveltejs/adapter-node": "^2.1.2",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/typography": "0.5.15",
     "@types/node": "22.9.0",
@@ -34,13 +34,14 @@
     "autoprefixer": "10.4.20",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.30.0",
+    "eslint-plugin-svelte": "^2.45.1",
     "postcss": "8.4.47",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.19",
-    "svelte-check": "^3.8.5",
-    "svelte-eslint-parser": "^0.40.0",
+    "prettier-plugin-svelte": "^3.2.6",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-eslint-parser": "^0.42.0",
+    "svelte-preprocess": "^6.0.3",
     "tailwindcss": "3.3.6",
     "tslib": "^2.6.3",
     "typescript": "^5.6.3",
@@ -57,10 +58,10 @@
     "auth0-js": "^9.24.1",
     "dotenv": "^16.4.5",
     "driver.js": "^1.3.1",
+    "gtagjs": "^0.0.10",
     "highlight.js": "^11.10.0",
     "plotly.js-dist-min": "^2.34.0",
-    "svelte-eslint-parser": "^0.40.0",
-    "uuid": "^10.0.0",
-    "gtagjs": "^0.0.10"
+    "svelte-eslint-parser": "^0.42.0",
+    "uuid": "^10.0.0"
   }
 }

src/lib/components/Content.svelte

@@ -1,16 +1,20 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
   import AngleButton from '$lib/components/buttons/AngleButton.svelte';
 
   import { goto } from '$app/navigation';
   import { fly } from 'svelte/transition';
 
-  export let title: string = '';
-  export let subtitle: string = '';
-  export let backUrl: string = '';
-  export let backAction: () => void = () => {};
-  export let backTitle: string = 'Back';
-  export let full = false;
-  export let transition = false;
+  const {
+    class: className,
+    title = '',
+    subtitle = '',
+    backUrl = '',
+    backAction = () => {},
+    backTitle = 'Back',
+    full = false,
+    transition = false,
+  } = $props();
 
   function onBack() {
     backAction();
@@ -19,7 +23,7 @@
 </script>
 
 <section
-  class={`main-content ${full ? 'w-full' : ''} ${$$props.class ?? ''}`}
+  class={`main-content ${full ? 'w-full' : ''} ${className ?? ''}`}
   in:fly={{ duration: 300, x: transition ? '100%' : '0' }}
 >
   {#if backUrl}<AngleButton name="back" variant="ghost" on:click={onBack}>{backTitle}</AngleButton

src/lib/components/Dots.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-  let primaryCircle = '--color-primary-500';
-  let secondaryCircle = '--color-secondary-500';
-  let tertiaryCircle = '--color-tertiary-500';
-  let successCircle = '';
-  let errorCircle = '';
-  let useFiveColors = false;
+  interface Props {
+    [key: string]: any;
+  }
+
+  let { ...props }: Props = $props();
+  let primaryCircle = $state('--color-primary-500');
+  let secondaryCircle = $state('--color-secondary-500');
+  let tertiaryCircle = $state('--color-tertiary-500');
+  let successCircle = $state('');
+  let errorCircle = $state('');
+  let useFiveColors = $state(false);
 
   const dotsColorsClass: string[] = (() => {
     try {
@@ -40,7 +45,7 @@
 </script>
 
 <svg
-  class={`${$$props.class ?? ''}`}
+  class={`${props.class ?? ''}`}
   width="402px"
   height="373px"
   viewBox="0 0 402 373"

src/lib/components/ErrorAlert.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
-  export let title: string;
-  export let color: string = 'error';
+  interface Props {
+    title: string;
+    color?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let { title, color = 'error', children }: Props = $props();
 </script>
 
 <aside data-testid="error-alert" class="alert variant-ghost-{color}">
   <i class="fa-solid fa-circle-exclamation text-4xl" aria-hidden="true"></i>
   <div class="alert-message">
     <h3 class="h3 text-left">{title}</h3>
-    <slot />
+    {@render children?.()}
   </div>
 </aside>

src/lib/components/Footer.svelte

@@ -7,16 +7,24 @@
   import { user } from '$lib/stores/User';
 
   import TermsModal from '$lib/components/modals/TermsModal.svelte';
-  export let showSitemap: boolean = branding?.footer?.showSitemap || false;
+  interface Props {
+    showSitemap?: boolean;
+  }
+
+  let { showSitemap = branding?.footer?.showSitemap || false }: Props = $props();
 
-  $: hideSitemap =
+  let hideSitemap = $derived(
     !showSitemap ||
-    branding?.footer?.excludeSitemapOn?.find((hide) => $page.url.pathname.includes(hide));
+      branding?.footer?.excludeSitemapOn?.find((hide) => $page.url.pathname.includes(hide)),
+  );
 
-  $: sitemap = branding?.sitemap?.map((section) => ({
-    ...section,
-    show: !section.privilege || ($user.privileges && $user.privileges.includes(section.privilege)),
-  }));
+  let sitemap = $derived(
+    branding?.sitemap?.map((section) => ({
+      ...section,
+      show:
+        !section.privilege || ($user.privileges && $user.privileges.includes(section.privilege)),
+    })),
+  );
 
   function openTermsModal() {
     modalStore.trigger({
@@ -50,7 +58,7 @@
 <footer id="main-footer" class="flex relative">
   <ul>
     {#if branding?.footer?.showTerms}
-      <li><button class="hover:underline" on:click={openTermsModal}>Terms of Service</button></li>
+      <li><button class="hover:underline" onclick={openTermsModal}>Terms of Service</button></li>
     {/if}
     {#each branding?.footer?.links as link}
       <li>

src/lib/components/HelpInfoPopup.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
   import { popup } from '@skeletonlabs/skeleton';
 
-  export let text: string = '';
-  export let id: string = '';
+  interface Props {
+    text?: string;
+    id?: string;
+  }
+
+  let { text = '', id = '' }: Props = $props();
 </script>
 
 {#if text}
@@ -21,7 +25,7 @@
       data-popup={id}
     >
       {text}
-      <div class="arrow variant-filled-surface" />
+      <div class="arrow variant-filled-surface"></div>
     </div>
   </div>
 {/if}

src/lib/components/LoginButton.svelte

@@ -1,31 +1,27 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
   import { createInstance } from '$lib/AuthProviderRegistry';
   import type { AuthData } from '$lib/models/AuthProvider';
   import { resetSearch } from '$lib/stores/Search';
 
-  export let buttonText = 'Log In';
-  export let redirectTo = '/';
-  export let provider: AuthData;
-  export let helpText: string;
-  $: testId = `login-button-${provider.name?.toLowerCase()}`;
+  let { class: className, buttonText = 'Log In', redirectTo = '/', provider, helpText } = $props();
 
-  let login = async (redirectTo: string, providerType: string) => {
+  const testId = $derived(`login-button-${provider.name?.toLowerCase()}`);
+
+  const login = async (redirectTo: string, providerType: string) => {
     let instance = await createInstance(provider);
     instance.login(redirectTo, providerType).then(() => {
       resetSearch();
     });
   };
 
-  let imageSrc: string | undefined = undefined;
-  if (provider.imagesrc) {
-    imageSrc = './' + provider.imagesrc;
-  }
+  const imageSrc = $derived(provider.imagesrc ? './' + provider.imagesrc : undefined);
 </script>
 
 <button
   type="button"
   data-testid={testId}
-  class={$$props.class ?? 'btn variant-filled-primary m-1'}
+  class={className ?? 'btn variant-filled-primary m-1'}
   on:click={() => login(redirectTo, provider.type)}
 >
   {#if imageSrc}

src/lib/components/Logo.svelte

@@ -1,16 +1,14 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
   import { branding } from '$lib/configuration';
 
-  export let height: number = 0;
-  export let width: number = 0;
-  export let unit: string = 'rem';
+  let { class: className, height = 0, width = 0, unit = 'rem' } = $props();
 
-  const finalClass = `colors ${$$props.class ?? ''}`;
+  const finalClass = `colors ${className ?? ''}`;
   const src = branding.logo.src;
   const alt = branding.logo.alt;
 
-  // If width or height is set, scale the image or svg to the larger size
-  $: imgSize =
+  const imgSize = $derived(
     !width && !height
       ? { width: src ? 'auto' : undefined, height: src ? 'auto' : undefined }
       : (width && !height) || (width && height && width > height)
@@ -21,7 +19,8 @@
         : {
             width: (src ? 'auto' : ((height / 180) * 1010).toFixed(2)) + unit,
             height: height + unit,
-          };
+          },
+  );
 </script>
 
 <!-- TODO: Add real SVG Code here -->

src/lib/components/Navigation.svelte

@@ -11,7 +11,7 @@
   import { createInstance } from '$lib/AuthProviderRegistry.ts';
   import { onMount } from 'svelte';
   let providerData: AuthData;
-  let providerInstance: AuthProvider | undefined = undefined;
+  let providerInstance: AuthProvider | undefined = $state(undefined);
   function setDropdown(path: string) {
     dropdownPath = path;
   }
@@ -30,7 +30,7 @@
     goto(`/login?redirectTo=${$page.url.pathname}`);
   }
 
-  $: currentPage = (route: Route) => {
+  let currentPage = $derived((route: Route) => {
     if (route.children) {
       for (const child of route.children) {
         if ($page.url.pathname.includes(child.path)) {
@@ -40,7 +40,7 @@
       return undefined;
     }
     return $page.url.pathname.includes(route.path) ? 'page' : undefined;
-  };
+  });
 
   onMount(async () => {
     if (browser && $page) {
@@ -52,32 +52,32 @@
     }
   });
 
-  $: dropdownPath = '';
+  let dropdownPath = $state('');
 </script>
 
 <AppBar padding="py-0 pl-2 pr-5" background="bg-surface-50-900-token">
-  <svelte:fragment slot="lead">
+  {#snippet lead()}
     <a href="/" aria-current="page" data-testid="logo-home-link">
       <Logo class="mx-1" />
     </a>
-  </svelte:fragment>
+  {/snippet}
   <nav id="page-navigation">
     <ul>
       {#each $userRoutes as route}
         {#if route.children && route.children.length > 0}
           <li
             class={`has-dropdown ${dropdownPath === route.path ? 'open' : ''}`}
-            on:mouseenter={() => setDropdown(route.path)}
-            on:mouseleave={() => setDropdown('')}
-            on:focus={() => setDropdown(route.path)}
-            on:blur={() => setDropdown('')}
+            onmouseenter={() => setDropdown(route.path)}
+            onmouseleave={() => setDropdown('')}
+            onfocus={() => setDropdown(route.path)}
+            onblur={() => setDropdown('')}
           >
             <a
               class="nav-link"
               id={getId(route)}
               href={route.path}
-              on:click={(e) => e.preventDefault()}
-              on:keydown={(e) => e.key === 'Enter' && setDropdown(dropdownPath ? '' : route.path)}
+              onclick={(e) => e.preventDefault()}
+              onkeydown={(e) => e.key === 'Enter' && setDropdown(dropdownPath ? '' : route.path)}
               aria-expanded={dropdownPath === route.path}
               aria-current={currentPage(route)}>{route.text}</a
             >
@@ -90,7 +90,7 @@
                   <a
                     class="no-underline"
                     href={child.path}
-                    on:keydown={(e) => e.key === 'Enter' && setDropdown('')}>{child.text}</a
+                    onkeydown={(e) => e.key === 'Enter' && setDropdown('')}>{child.text}</a
                   >
                 </li>
               {/each}
@@ -102,7 +102,7 @@
               class="nav-link"
               id={getId(route)}
               href={route.path}
-              on:focus={() => setDropdown('')}
+              onfocus={() => setDropdown('')}
               aria-current={currentPage(route)}
               >{route.text}
             </a>
@@ -111,7 +111,7 @@
       {/each}
     </ul>
   </nav>
-  <svelte:fragment slot="trail">
+  {#snippet trail()}
     <div id="user-session-avatar">
       {#if $user.privileges && $user.email}
         <!-- Logout -->
@@ -132,7 +132,7 @@
             id="user-logout-btn"
             class="btn variant-ringed-primary"
             title="Logout"
-            on:click={() => logout(providerInstance, false)}>Logout</button
+            onclick={() => logout(providerInstance, false)}>Logout</button
           >
         </div>
       {:else}
@@ -141,11 +141,11 @@
           id="user-login-btn"
           title="Login"
           class="btn variant-ghost-primary hover:variant-filled-primary"
-          on:click={handleLogin}
+          onclick={handleLogin}
         >
           Login
         </button>
       {/if}
     </div>
-  </svelte:fragment>
+  {/snippet}
 </AppBar>