Migrate to Svelte 5: Update runes, state management, and modern syntax

Author: seb-lewis

src/lib/stores/auth.js

@@ -1,6 +1,7 @@
 // src/lib/stores/auth.js
 import { writable } from 'svelte/store';
 
+// Create a reactive state object for authentication
 export const auth = writable({
   isAuthenticated: false,
   user: null,
@@ -14,4 +15,4 @@ export function getSessionUser(event) {
   // If you use event.locals.user for authentication, return it
   // You can adjust this logic if your user is stored differently
   return event.locals?.user || null;
-}
+}

src/routes/(admin)/admin/blogs/[id]/edit/+page.svelte

@@ -1,11 +1,11 @@
 <script>
   import { dndzone } from "svelte-dnd-action";
   /** @type {{ data: import('./$types').PageData }} */
-  export let data;
+  let { data } = $props();
   /** @type {any} */
-  let blog = /** @type {any} */ (data)?.blog || {};
+  let blog = $state(/** @type {any} */ (data)?.blog || {});
   /** @type {any[]} */
-  let contentBlocks = blog?.contentBlocks || []
+  let contentBlocks = $state(blog?.contentBlocks || [])
 
   // Drag and drop handler for reordering content blocks
   async function handleReorder(/** @type {any} */ { detail }) {
@@ -25,17 +25,17 @@
     // location.reload();
   }
 
-  let message = "";
+  let message = $state("");
 
   // For editing/adding content blocks
   /** @type {any} */
-  let editingBlockId = null;
-  let newBlock = {
+  let editingBlockId = $state(null);
+  let newBlock = $state({
     type: "MARKDOWN",
     content: "",
     displayOrder: contentBlocks.length + 1,
     draft: false,
-  };
+  });
 
   function startEditBlock(/** @type {any} */ block) {
     editingBlockId = block.id;
@@ -61,16 +61,16 @@
 			.replace(/\s+/g, '-')
 			.replace(/[^\w-]+/g, '');
 	}
-  let editable_title = blog?.title || '';
-  let slug = blog?.slug || '';
+  let editable_title = $state(blog?.title || '');
+  let slug = $state(blog?.slug || '');
 
 
   // Initialize previous_editable_title_for_slug_generation to undefined
   // so we can detect the first run of the reactive block.
   /** @type {any} */
-  let previous_editable_title_for_slug_generation = undefined;
+  let previous_editable_title_for_slug_generation = $state(undefined);
 
-  $: {
+  $effect(() => {
     // This block runs when editable_title changes (including its initial assignment).
     if (previous_editable_title_for_slug_generation === undefined && editable_title !== undefined) {
       // First run: editable_title has been initialized.
@@ -84,7 +84,7 @@
       slug = make_slug(editable_title);
       previous_editable_title_for_slug_generation = editable_title;
     }
-  }
+  });
 </script>
 
 <div class="max-w-5xl mx-auto mt-10 p-8 bg-white rounded-lg shadow">

src/routes/(admin)/admin/newsletter/+page.svelte

@@ -2,8 +2,8 @@
   import { onMount } from 'svelte';
   import { Mail, Users, TrendingUp, UserCheck, Calendar } from '@lucide/svelte';
   
-  /** @type {import('./$types').PageData} */
-  export let data;
+  /** @type {{ data: import('./$types').PageData }} */
+  let { data } = $props();
   
   // Format date helper
   function formatDate(/** @type {any} */ dateString) {

src/routes/(app)/+layout.svelte

@@ -9,8 +9,7 @@
 <!-- Mobile menu button for when sidebar is hidden -->
 <button
 	onclick={() => (drawerHidden = !drawerHidden)}
-	class="fixed top-4 left-4 z-50 lg:hidden inline-flex items-center p-2 text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-600 transition-colors bg-white dark:bg-gray-900 shadow-md border border-gray-200 dark:border-gray-700"
-	class:hidden={!drawerHidden}
+	class="fixed top-4 left-4 z-50 lg:hidden inline-flex items-center p-2 text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-600 transition-colors bg-white dark:bg-gray-900 shadow-md border border-gray-200 dark:border-gray-700 {!drawerHidden ? '' : 'hidden'}"
 	aria-label="Open sidebar menu"
 >
 	<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">

src/routes/(app)/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { afterNavigate } from '$app/navigation';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import imgLogo from '$lib/assets/images/logo.png';
 	import { 
 		LayoutDashboard, 
@@ -79,7 +79,7 @@
 		}
 	});
 
-	let mainSidebarUrl = $derived($page.url.pathname);
+	let mainSidebarUrl = $derived(page.url.pathname);
 	/** @type {{ [key: string]: boolean }} */
 	let openDropdowns = $state({});
 

src/routes/(app)/app/+page.svelte

@@ -14,10 +14,10 @@
     } from '@lucide/svelte';
     
     /** @type {any} */
-    export let data;
+    let { data } = $props();
     
-    $: metrics = data.metrics || {};
-    $: recentData = data.recentData || {};
+    let metrics = $derived(data.metrics || {});
+    let recentData = $derived(data.recentData || {});
     
     function formatCurrency(/** @type {any} */ amount) {
         return new Intl.NumberFormat('en-US', {

src/routes/(app)/app/accounts/+page.svelte

@@ -1,16 +1,17 @@
 <script>
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import { goto } from '$app/navigation';
   import { Search, Plus, Eye, Edit, Phone, MapPin, Calendar, Users, TrendingUp, Building2, Globe, DollarSign, ChevronUp, ChevronDown, Filter } from '@lucide/svelte';
   
-  export let data;
+  let { data } = $props();
   
-  let { accounts, pagination } = data;
-  let sortField = $page.url.searchParams.get('sort') || 'name';
-  let sortOrder = $page.url.searchParams.get('order') || 'asc';
-  let isLoading = false;
-  let statusFilter = $page.url.searchParams.get('status') || 'all';
-  let searchQuery = $page.url.searchParams.get('q') || '';
+  let accounts = $state(data.accounts);
+  let pagination = $state(data.pagination);
+  let sortField = $state(page.url.searchParams.get('sort') || 'name');
+  let sortOrder = $state(page.url.searchParams.get('order') || 'asc');
+  let isLoading = $state(false);
+  let statusFilter = $state(page.url.searchParams.get('status') || 'all');
+  let searchQuery = $state(page.url.searchParams.get('q') || '');
   /** @type {NodeJS.Timeout | undefined} */
   let searchTimeout;
   
@@ -21,7 +22,7 @@
     clearTimeout(searchTimeout);
     searchTimeout = setTimeout(() => {
       // eslint-disable-next-line svelte/prefer-svelte-reactivity
-      const params = new URLSearchParams($page.url.searchParams);
+      const params = new URLSearchParams(page.url.searchParams);
       if (value.trim()) {
         params.set('q', value.trim());
       } else {
@@ -35,7 +36,7 @@
   function updateQueryParams() {
     isLoading = true;
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    const params = new URLSearchParams($page.url.searchParams);
+    const params = new URLSearchParams(page.url.searchParams);
     params.set('sort', sortField);
     params.set('order', sortOrder);
     params.set('status', statusFilter);
@@ -51,7 +52,7 @@
     if (newPage < 1 || newPage > pagination.totalPages) return;
     
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    const params = new URLSearchParams($page.url.searchParams);
+    const params = new URLSearchParams(page.url.searchParams);
     params.set('page', newPage.toString());
     goto(`?${params.toString()}`, { keepFocus: true });
   }
@@ -95,11 +96,11 @@
   }
   
   // Update data when it changes from the server
-  $: {
+  $effect(() => {
     accounts = data.accounts;
     pagination = data.pagination;
     isLoading = false;
-  }
+  });
 </script>
 
 <div class="p-6 bg-white dark:bg-gray-900 min-h-screen">

src/routes/(app)/app/accounts/[accountId]/+page.svelte

@@ -20,26 +20,24 @@
     Send
   } from '@lucide/svelte';
 
-  /** @type {any} */
-  export let data;
-  /** @type {any} */
-  export let form;
+  /** @type {{ data: any, form: any }} */
+  let { data, form } = $props();
 
   const { account, contacts, opportunities = [], tasks, cases } = data;
-  let comments = data.comments;
+  let comments = $state(data.comments);
 
   // Form state
-  let showCloseModal = false;
-  let closureReason = '';
-  let closeError = '';
+  let showCloseModal = $state(false);
+  let closureReason = $state('');
+  let closeError = $state('');
 
   // Comment functionality
-  let newComment = '';
-  let isSubmittingComment = false;
-  let commentError = '';
+  let newComment = $state('');
+  let isSubmittingComment = $state(false);
+  let commentError = $state('');
 
   // Active tab state
-  let activeTab = 'contacts';
+  let activeTab = $state('contacts');
 
   async function submitComment() {
     commentError = '';
@@ -127,11 +125,11 @@
   }
 
   // Handle form submission errors
-  $: {
+  $effect(() => {
     if (form?.success === false) {
       closeError = form.message;
     }
-  }
+  });
 </script>
 
 <div class="min-h-screen bg-gray-50 dark:bg-gray-900">

src/routes/(app)/app/accounts/[accountId]/edit/+page.svelte

@@ -1,11 +1,11 @@
 <script>
-  export let data;
+  let { data } = $props();
   let account = data.account;
-  let name = account.name;
-  let industry = account.industry || '';
-  let type = account.type || '';
-  let website = account.website || '';
-  let phone = account.phone || '';
+  let name = $state(account.name);
+  let industry = $state(account.industry || '');
+  let type = $state(account.type || '');
+  let website = $state(account.website || '');
+  let phone = $state(account.phone || '');
 </script>
 
 <div class="max-w-xl mx-auto mt-8 p-6 bg-white dark:bg-gray-800 rounded shadow">

src/routes/(app)/app/accounts/new/+page.svelte

@@ -20,14 +20,13 @@
     Hash
   } from '@lucide/svelte';
 
-  /** @type {import('./$types').ActionData} */
-  export let form;
-  export let data;
+  /** @type {{ form: import('./$types').ActionData, data: any }} */
+  let { form, data } = $props();
   
   // Toast state
-  let showToast = false;
-  let toastMessage = '';
-  let toastType = 'success'; // 'success' | 'error'
+  let showToast = $state(false);
+  let toastMessage = $state('');
+  let toastType = $state('success'); // 'success' | 'error'
   
   /**
    * Object holding the form fields.
@@ -51,7 +50,7 @@
    *   sicCode: string;
    * }}
    */
-  let formData = {
+  let formData = $state({
     name: '',
     type: '',
     industry: '',
@@ -69,13 +68,13 @@
     tickerSymbol: '',
     rating: '',
     sicCode: ''
-  };
+  });
 
   /**
    * Object to store field errors.
    * @type {Record<string, string>}
    */
-  let errors = {};
+  let errors = $state({});
   
   /**
    * Handles changes to form inputs
@@ -132,7 +131,7 @@
   }
 
   // Submitting indicator
-  let isSubmitting = false;
+  let isSubmitting = $state(false);
   
   /**
    * Resets the form to its initial state