Skip to content

Commit d70fc32

Browse files
seb-lewisseb-lewis
committed
Migrate to Svelte 5: Update runes, state management, and modern syntax
1 parent 64c9b8c commit d70fc32

File tree

44 files changed

+1116
-954
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1116
-954
lines changed

‎src/lib/stores/auth.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// src/lib/stores/auth.js
22
import { writable } from 'svelte/store';
33

4+
// Create a reactive state object for authentication
45
export const auth = writable({
56
isAuthenticated: false,
67
user: null,
@@ -14,4 +15,4 @@ export function getSessionUser(event) {
1415
// If you use event.locals.user for authentication, return it
1516
// You can adjust this logic if your user is stored differently
1617
return event.locals?.user || null;
17-
}
18+
}

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script>
22
import { dndzone } from "svelte-dnd-action";
33
/** @type {{ data: import('./$types').PageData }} */
4-
export let data;
4+
let { data } = $props();
55
/** @type {any} */
6-
let blog = /** @type {any} */ (data)?.blog || {};
6+
let blog = $state(/** @type {any} */ (data)?.blog || {});
77
/** @type {any[]} */
8-
let contentBlocks = blog?.contentBlocks || []
8+
let contentBlocks = $state(blog?.contentBlocks || [])
99
1010
// Drag and drop handler for reordering content blocks
1111
async function handleReorder(/** @type {any} */ { detail }) {
@@ -25,17 +25,17 @@
2525
// location.reload();
2626
}
2727
28-
let message = "";
28+
let message = $state("");
2929
3030
// For editing/adding content blocks
3131
/** @type {any} */
32-
let editingBlockId = null;
33-
let newBlock = {
32+
let editingBlockId = $state(null);
33+
let newBlock = $state({
3434
type: "MARKDOWN",
3535
content: "",
3636
displayOrder: contentBlocks.length + 1,
3737
draft: false,
38-
};
38+
});
3939
4040
function startEditBlock(/** @type {any} */ block) {
4141
editingBlockId = block.id;
@@ -61,16 +61,16 @@
6161
.replace(/\s+/g, '-')
6262
.replace(/[^\w-]+/g, '');
6363
}
64-
let editable_title = blog?.title || '';
65-
let slug = blog?.slug || '';
64+
let editable_title = $state(blog?.title || '');
65+
let slug = $state(blog?.slug || '');
6666
6767
6868
// Initialize previous_editable_title_for_slug_generation to undefined
6969
// so we can detect the first run of the reactive block.
7070
/** @type {any} */
71-
let previous_editable_title_for_slug_generation = undefined;
71+
let previous_editable_title_for_slug_generation = $state(undefined);
7272
73-
$: {
73+
$effect(() => {
7474
// This block runs when editable_title changes (including its initial assignment).
7575
if (previous_editable_title_for_slug_generation === undefined && editable_title !== undefined) {
7676
// First run: editable_title has been initialized.
@@ -84,7 +84,7 @@
8484
slug = make_slug(editable_title);
8585
previous_editable_title_for_slug_generation = editable_title;
8686
}
87-
}
87+
});
8888
</script>
8989
9090
<div class="max-w-5xl mx-auto mt-10 p-8 bg-white rounded-lg shadow">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { onMount } from 'svelte';
33
import { Mail, Users, TrendingUp, UserCheck, Calendar } from '@lucide/svelte';
44
5-
/** @type {import('./$types').PageData} */
6-
export let data;
5+
/** @type {{ data: import('./$types').PageData }} */
6+
let { data } = $props();
77
88
// Format date helper
99
function formatDate(/** @type {any} */ dateString) {

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
<!-- Mobile menu button for when sidebar is hidden -->
1010
<button
1111
onclick={() => (drawerHidden = !drawerHidden)}
12-
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"
13-
class:hidden={!drawerHidden}
12+
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'}"
1413
aria-label="Open sidebar menu"
1514
>
1615
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">

‎src/routes/(app)/Sidebar.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { afterNavigate } from '$app/navigation';
3-
import { page } from '$app/stores';
3+
import { page } from '$app/state';
44
import imgLogo from '$lib/assets/images/logo.png';
55
import {
66
LayoutDashboard,
@@ -79,7 +79,7 @@
7979
}
8080
});
8181
82-
let mainSidebarUrl = $derived($page.url.pathname);
82+
let mainSidebarUrl = $derived(page.url.pathname);
8383
/** @type {{ [key: string]: boolean }} */
8484
let openDropdowns = $state({});
8585

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
} from '@lucide/svelte';
1515
1616
/** @type {any} */
17-
export let data;
17+
let { data } = $props();
1818
19-
$: metrics = data.metrics || {};
20-
$: recentData = data.recentData || {};
19+
let metrics = $derived(data.metrics || {});
20+
let recentData = $derived(data.recentData || {});
2121
2222
function formatCurrency(/** @type {any} */ amount) {
2323
return new Intl.NumberFormat('en-US', {

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<script>
2-
import { page } from '$app/stores';
2+
import { page } from '$app/state';
33
import { goto } from '$app/navigation';
44
import { Search, Plus, Eye, Edit, Phone, MapPin, Calendar, Users, TrendingUp, Building2, Globe, DollarSign, ChevronUp, ChevronDown, Filter } from '@lucide/svelte';
55
6-
export let data;
6+
let { data } = $props();
77
8-
let { accounts, pagination } = data;
9-
let sortField = $page.url.searchParams.get('sort') || 'name';
10-
let sortOrder = $page.url.searchParams.get('order') || 'asc';
11-
let isLoading = false;
12-
let statusFilter = $page.url.searchParams.get('status') || 'all';
13-
let searchQuery = $page.url.searchParams.get('q') || '';
8+
let accounts = $state(data.accounts);
9+
let pagination = $state(data.pagination);
10+
let sortField = $state(page.url.searchParams.get('sort') || 'name');
11+
let sortOrder = $state(page.url.searchParams.get('order') || 'asc');
12+
let isLoading = $state(false);
13+
let statusFilter = $state(page.url.searchParams.get('status') || 'all');
14+
let searchQuery = $state(page.url.searchParams.get('q') || '');
1415
/** @type {NodeJS.Timeout | undefined} */
1516
let searchTimeout;
1617
@@ -21,7 +22,7 @@
2122
clearTimeout(searchTimeout);
2223
searchTimeout = setTimeout(() => {
2324
// eslint-disable-next-line svelte/prefer-svelte-reactivity
24-
const params = new URLSearchParams($page.url.searchParams);
25+
const params = new URLSearchParams(page.url.searchParams);
2526
if (value.trim()) {
2627
params.set('q', value.trim());
2728
} else {
@@ -35,7 +36,7 @@
3536
function updateQueryParams() {
3637
isLoading = true;
3738
// eslint-disable-next-line svelte/prefer-svelte-reactivity
38-
const params = new URLSearchParams($page.url.searchParams);
39+
const params = new URLSearchParams(page.url.searchParams);
3940
params.set('sort', sortField);
4041
params.set('order', sortOrder);
4142
params.set('status', statusFilter);
@@ -51,7 +52,7 @@
5152
if (newPage < 1 || newPage > pagination.totalPages) return;
5253
5354
// eslint-disable-next-line svelte/prefer-svelte-reactivity
54-
const params = new URLSearchParams($page.url.searchParams);
55+
const params = new URLSearchParams(page.url.searchParams);
5556
params.set('page', newPage.toString());
5657
goto(`?${params.toString()}`, { keepFocus: true });
5758
}
@@ -95,11 +96,11 @@
9596
}
9697
9798
// Update data when it changes from the server
98-
$: {
99+
$effect(() => {
99100
accounts = data.accounts;
100101
pagination = data.pagination;
101102
isLoading = false;
102-
}
103+
});
103104
</script>
104105

105106
<div class="p-6 bg-white dark:bg-gray-900 min-h-screen">

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

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,24 @@
2020
Send
2121
} from '@lucide/svelte';
2222
23-
/** @type {any} */
24-
export let data;
25-
/** @type {any} */
26-
export let form;
23+
/** @type {{ data: any, form: any }} */
24+
let { data, form } = $props();
2725
2826
const { account, contacts, opportunities = [], tasks, cases } = data;
29-
let comments = data.comments;
27+
let comments = $state(data.comments);
3028
3129
// Form state
32-
let showCloseModal = false;
33-
let closureReason = '';
34-
let closeError = '';
30+
let showCloseModal = $state(false);
31+
let closureReason = $state('');
32+
let closeError = $state('');
3533
3634
// Comment functionality
37-
let newComment = '';
38-
let isSubmittingComment = false;
39-
let commentError = '';
35+
let newComment = $state('');
36+
let isSubmittingComment = $state(false);
37+
let commentError = $state('');
4038
4139
// Active tab state
42-
let activeTab = 'contacts';
40+
let activeTab = $state('contacts');
4341
4442
async function submitComment() {
4543
commentError = '';
@@ -127,11 +125,11 @@
127125
}
128126
129127
// Handle form submission errors
130-
$: {
128+
$effect(() => {
131129
if (form?.success === false) {
132130
closeError = form.message;
133131
}
134-
}
132+
});
135133
</script>
136134
137135
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script>
2-
export let data;
2+
let { data } = $props();
33
let account = data.account;
4-
let name = account.name;
5-
let industry = account.industry || '';
6-
let type = account.type || '';
7-
let website = account.website || '';
8-
let phone = account.phone || '';
4+
let name = $state(account.name);
5+
let industry = $state(account.industry || '');
6+
let type = $state(account.type || '');
7+
let website = $state(account.website || '');
8+
let phone = $state(account.phone || '');
99
</script>
1010

1111
<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‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,13 @@
2020
Hash
2121
} from '@lucide/svelte';
2222
23-
/** @type {import('./$types').ActionData} */
24-
export let form;
25-
export let data;
23+
/** @type {{ form: import('./$types').ActionData, data: any }} */
24+
let { form, data } = $props();
2625
2726
// Toast state
28-
let showToast = false;
29-
let toastMessage = '';
30-
let toastType = 'success'; // 'success' | 'error'
27+
let showToast = $state(false);
28+
let toastMessage = $state('');
29+
let toastType = $state('success'); // 'success' | 'error'
3130
3231
/**
3332
* Object holding the form fields.
@@ -51,7 +50,7 @@
5150
* sicCode: string;
5251
* }}
5352
*/
54-
let formData = {
53+
let formData = $state({
5554
name: '',
5655
type: '',
5756
industry: '',
@@ -69,13 +68,13 @@
6968
tickerSymbol: '',
7069
rating: '',
7170
sicCode: ''
72-
};
71+
});
7372
7473
/**
7574
* Object to store field errors.
7675
* @type {Record<string, string>}
7776
*/
78-
let errors = {};
77+
let errors = $state({});
7978
8079
/**
8180
* Handles changes to form inputs
@@ -132,7 +131,7 @@
132131
}
133132
134133
// Submitting indicator
135-
let isSubmitting = false;
134+
let isSubmitting = $state(false);
136135
137136
/**
138137
* Resets the form to its initial state

0 commit comments

Comments
 (0)