Migration to Svelte 5 (using the migration script)

src/routes/+layout.svelte

@@ -1,7 +1,12 @@
-<script>
+<script lang="ts">
     import "../styles/popup.scss";
     import Header from "$components/layout/Header.svelte";
     import Footer from "$components/layout/Footer.svelte";
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();
 
     // Sort of a hack, detect if we rendered in the browser tab or in the popup.
     // Popup will always should have fixed 320px size, otherwise we consider it opened in the tab.
@@ -10,7 +15,7 @@
 
 <Header/>
 <main>
-    <slot/>
+    {@render children?.()}
 </main>
 <Footer/>
 

src/routes/+page.svelte

@@ -5,9 +5,9 @@
     import MenuCheckboxItem from "$components/ui/menu/MenuCheckboxItem.svelte";
 
     /** @type {import('$entities/MaintenanceProfile').default|undefined} */
-    let activeProfile;
+    let activeProfile = $derived($maintenanceProfiles.find(profile => profile.id === $activeProfileStore));
 
-    $: activeProfile = $maintenanceProfiles.find(profile => profile.id === $activeProfileStore);
+    
 
     function turnOffActiveProfile() {
         $activeProfileStore = null;

src/routes/features/groups/+page.svelte

@@ -1,12 +1,16 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import { tagGroups } from "$stores/entities/tag-groups";
 
     /** @type {import('$entities/TagGroup').default[]} */
-    let groups = [];
+    let groups = $state([]);
 
-    $: groups = $tagGroups.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+    run(() => {
+        groups = $tagGroups.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+    });
 </script>
 
 <Menu>

src/routes/features/groups/[id]/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import { goto } from "$app/navigation";
     import { page } from "$app/stores";
     import GroupView from "$components/features/GroupView.svelte";
@@ -8,20 +10,20 @@
 
     const groupId = $page.params.id;
     /** @type {import('$entities/TagGroup').default|null} */
-    let group = null;
+    let group = $state(null);
 
     if (groupId === 'new') {
         goto('/features/groups/new/edit');
     }
 
-    $: {
+    run(() => {
         group = $tagGroups.find(group => group.id === groupId) || null;
 
         if (!group) {
             console.warn(`Group ${groupId} not found.`);
             goto('/features/groups');
         }
-    }
+    });
 </script>
 
 <Menu>

src/routes/features/groups/[id]/edit/+page.svelte

@@ -16,12 +16,12 @@
     /** @type {TagGroup|null} */
     let targetGroup = null;
 
-    let groupName = '';
+    let groupName = $state('');
     /** @type {string[]} */
-    let tagsList = [];
+    let tagsList = $state([]);
     /** @type {string[]} */
-    let prefixesList = [];
-    let tagCategory = '';
+    let prefixesList = $state([]);
+    let tagCategory = $state('');
 
     if (groupId === 'new') {
         targetGroup = new TagGroup(crypto.randomUUID(), {});

src/routes/features/groups/[id]/export/+page.svelte

@@ -14,9 +14,9 @@
     const group = $tagGroups.find(group => group.id === groupId);
 
     /** @type {string} */
-    let rawExportedGroup;
+    let rawExportedGroup = $state();
     /** @type {string} */
-    let encodedExportedGroup;
+    let encodedExportedGroup = $state();
 
     if (!group) {
         goto('/features/groups');
@@ -25,7 +25,7 @@
         encodedExportedGroup = groupTransporter.exportToCompressedJSON(group);
     }
 
-    let isEncodedGroupShown = true;
+    let isEncodedGroupShown = $state(true);
 </script>
 
 <Menu>

src/routes/features/groups/import/+page.svelte

@@ -12,14 +12,14 @@
     const groupTransporter = new EntitiesTransporter(TagGroup);
 
     /** @type {string} */
-    let importedString = '';
+    let importedString = $state('');
     /** @type {string} */
-    let errorMessage = '';
+    let errorMessage = $state('');
 
     /** @type {TagGroup|null} */
-    let candidateGroup = null;
+    let candidateGroup = $state(null);
     /** @type {TagGroup|null} */
-    let existingGroup = null;
+    let existingGroup = $state(null);
 
     function tryImportingGroup() {
         candidateGroup = null;

src/routes/features/maintenance/+page.svelte

@@ -1,13 +1,17 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import MenuRadioItem from "$components/ui/menu/MenuRadioItem.svelte";
     import { activeProfileStore, maintenanceProfiles } from "$stores/entities/maintenance-profiles";
 
     /** @type {import('$entities/MaintenanceProfile').default[]} */
-    let profiles = [];
+    let profiles = $state([]);
 
-    $: profiles = $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+    run(() => {
+        profiles = $maintenanceProfiles.sort((a, b) => a.settings.name.localeCompare(b.settings.name));
+    });
 
     function resetActiveProfile() {
         $activeProfileStore = null;

src/routes/features/maintenance/[id]/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuItem from "$components/ui/menu/MenuItem.svelte";
     import { page } from "$app/stores";
@@ -9,13 +11,13 @@
 
     const profileId = $page.params.id;
     /** @type {import('$entities/MaintenanceProfile').default|null} */
-    let profile = null;
+    let profile = $state(null);
 
     if (profileId === 'new') {
         goto('/features/maintenance/new/edit');
     }
 
-    $: {
+    run(() => {
         const resolvedProfile = $maintenanceProfiles.find(profile => profile.id === profileId);
 
         if (resolvedProfile) {
@@ -24,11 +26,11 @@
             console.warn(`Profile ${profileId} not found.`);
             goto('/features/maintenance');
         }
-    }
+    });
 
-    let isActiveProfile = $activeProfileStore === profileId;
+    let isActiveProfile = $state($activeProfileStore === profileId);
 
-    $: {
+    run(() => {
         if (isActiveProfile && $activeProfileStore !== profileId) {
             $activeProfileStore = profileId;
         }
@@ -36,7 +38,7 @@
         if (!isActiveProfile && $activeProfileStore === profileId) {
             $activeProfileStore = null;
         }
-    }
+    });
 </script>
 
 <Menu>

src/routes/features/maintenance/[id]/edit/+page.svelte

@@ -16,9 +16,9 @@
     let targetProfile = null;
 
     /** @type {string} */
-    let profileName = '';
+    let profileName = $state('');
     /** @type {string[]} */
-    let tagsList = [];
+    let tagsList = $state([]);
 
     if (profileId === 'new') {
         targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});

src/routes/features/maintenance/[id]/export/+page.svelte

@@ -14,9 +14,9 @@
 
     const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
     /** @type {string} */
-    let exportedProfile = '';
+    let exportedProfile = $state('');
     /** @type {string} */
-    let compressedProfile = '';
+    let compressedProfile = $state('');
 
     if (!profile) {
         goto('/features/maintenance/');
@@ -25,7 +25,7 @@
         compressedProfile = profilesTransporter.exportToCompressedJSON(profile);
     }
 
-    let isCompressedProfileShown = true;
+    let isCompressedProfileShown = $state(true);
 </script>
 
 <Menu>

src/routes/features/maintenance/import/+page.svelte

@@ -12,14 +12,14 @@
     const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
 
     /** @type {string} */
-    let importedString = '';
+    let importedString = $state('');
     /** @type {string} */
-    let errorMessage = '';
+    let errorMessage = $state('');
 
     /** @type {MaintenanceProfile|null} */
-    let candidateProfile = null;
+    let candidateProfile = $state(null);
     /** @type {MaintenanceProfile|null} */
-    let existingProfile = null;
+    let existingProfile = $state(null);
 
     function tryImportingProfile() {
         candidateProfile = null;

src/routes/preferences/debug/storage/[...path]/+page.svelte

@@ -1,15 +1,17 @@
 <script>
+    import { run } from 'svelte/legacy';
+
     import StorageViewer from "$components/debugging/StorageViewer.svelte";
     import { page } from "$app/stores";
     import { goto } from "$app/navigation";
 
-    let pathString = '';
+    let pathString = $state('');
     /** @type {string[]} */
-    let pathArray = [];
+    let pathArray = $state([]);
     /** @type {string|undefined} */
-    let storageName = void 0;
+    let storageName = $state(void 0);
 
-    $: {
+    run(() => {
         pathString = $page.params.path;
         pathArray = pathString.length ? pathString.split("/") : [];
         storageName = pathArray.shift()
@@ -21,7 +23,7 @@
         if (!storageName) {
             goto("/preferences/debug/storage");
         }
-    }
+    });
 </script>
 
 {#if storageName}