Svelte 5: go through and use runes in components, pages, and layouts.

Does not use runes in stores (yet).

4 files changed, 27 insertions, 18 deletions

diff --git a/ui/routes/(login)/invite/[invite]/+page.js b/ui/routes/(login)/invite/[invite]/+page.js
index a48ba89..32c9290 100644
--- a/ui/routes/(login)/invite/[invite]/+page.js
+++ b/ui/routes/(login)/invite/[invite]/+page.js
@@ -1,12 +1,11 @@
 import { getInvite } from '$lib/apiServer';
 
-export async function load({ params }) {
-	let { invite } = params;
+async function loadInvite(invite) {
 	let response = await getInvite(invite);
 	switch (response.status) {
 		case 200: {
 			let invite = response.data;
-			return { invite };
+			return invite;
 		}
 		case 404:
 			return null;
@@ -15,3 +14,10 @@ export async function load({ params }) {
 			break;
 	}
 }
+
+export function load({ params }) {
+	let { invite } = params;
+	return {
+		invite: loadInvite(invite)
+	};
+}
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 8f4d1a4..65f5a97 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -4,14 +4,15 @@
 
 	import LogIn from '$lib/components/LogIn.svelte';
 
-	export let data;
+	let { data } = $props();
 
-	let username = '',
-		password = '';
+	let username = $state(''),
+		password = $state('');
 	let pending = false;
-	$: disabled = pending;
+	let disabled = $derived(pending);
 
-	async function onSubmit() {
+	async function onSubmit(event) {
+		event.preventDefault();
 		pending = true;
 		const response = await acceptInvite(data.invite.id, username, password);
 		if (200 <= response.status && response.status < 300) {
@@ -23,13 +24,13 @@
 	}
 </script>
 
-{#await data}
+{#await data.invite}
 	<div class="card m-4 p-4">
 		<p>Loading invitation…</p>
 	</div>
-{:then { invite }}
+{:then invite}
 	<div class="card m-4 p-4">
 		<p>Hi there! {invite.issuer} invites you to the conversation.</p>
 	</div>
-	<LogIn bind:disabled bind:username bind:password on:submit={onSubmit} />
+	<LogIn {disabled} bind:username bind:password onsubmit={onSubmit} />
 {/await}
diff --git a/ui/routes/(login)/login/+page.svelte b/ui/routes/(login)/login/+page.svelte
index dba7f5a..77c2d62 100644
--- a/ui/routes/(login)/login/+page.svelte
+++ b/ui/routes/(login)/login/+page.svelte
@@ -9,7 +9,8 @@
 	let pending = false;
 	$: disabled = pending;
 
-	async function onSubmit() {
+	async function onSubmit(event) {
+		event.preventDefault();
 		pending = true;
 		const response = await logIn(username, password);
 		if (200 <= response.status && response.status < 300) {
@@ -21,4 +22,4 @@
 	}
 </script>
 
-<LogIn bind:disabled bind:username bind:password on:submit={onSubmit} />
+<LogIn {disabled} bind:username bind:password onsubmit={onSubmit} />
diff --git a/ui/routes/(login)/setup/+page.svelte b/ui/routes/(login)/setup/+page.svelte
index 2f098ef..f95403f 100644
--- a/ui/routes/(login)/setup/+page.svelte
+++ b/ui/routes/(login)/setup/+page.svelte
@@ -4,12 +4,13 @@
 
 	import LogIn from '$lib/components/LogIn.svelte';
 
-	let username = '',
-		password = '';
+	let username = $state(''),
+		password = $state('');
 	let pending = false;
-	$: disabled = pending;
+	let disabled = $derived(pending);
 
-	async function onSubmit() {
+	async function onSubmit(event) {
+		event.preventDefault();
 		pending = true;
 		const response = await setup(username, password);
 		if (200 <= response.status && response.status < 300) {
@@ -21,4 +22,4 @@
 	}
 </script>
 
-<LogIn bind:disabled bind:username bind:password legend="set up" on:submit={onSubmit} />
+<LogIn {disabled} bind:username bind:password legend="set up" onsubmit={onSubmit} />