From 30fa0c4c1faece6b054105fe3cce5107f24a2fa2 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Sun, 3 Nov 2024 15:33:43 -0500
Subject: Svelte 5: go through and use runes in components, pages, and layouts.

Does not use runes in stores (yet).
---
 ui/lib/components/ActiveChannel.svelte         |  4 +--
 ui/lib/components/Channel.svelte               |  4 +--
 ui/lib/components/ChannelList.svelte           |  5 +---
 ui/lib/components/CreateChannelForm.svelte     |  9 ++++---
 ui/lib/components/CurrentUser.svelte           |  5 ++--
 ui/lib/components/Invite.svelte                |  4 +--
 ui/lib/components/Invites.svelte               | 13 +++++-----
 ui/lib/components/LogIn.svelte                 | 13 ++++++----
 ui/lib/components/Message.svelte               | 12 ++++-----
 ui/lib/components/MessageInput.svelte          | 34 +++++++++++---------------
 ui/lib/components/MessageRun.svelte            |  8 +++---
 ui/routes/(app)/+layout.svelte                 |  6 ++---
 ui/routes/(app)/ch/[channel]/+page.svelte      |  2 +-
 ui/routes/(app)/me/+page.svelte                | 17 +++++++------
 ui/routes/(login)/invite/[invite]/+page.js     | 12 ++++++---
 ui/routes/(login)/invite/[invite]/+page.svelte | 17 +++++++------
 ui/routes/(login)/login/+page.svelte           |  5 ++--
 ui/routes/(login)/setup/+page.svelte           | 11 +++++----
 18 files changed, 90 insertions(+), 91 deletions(-)

diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index 212048a..ac1a0b9 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -2,8 +2,8 @@
 	import { messages } from '$lib/store';
 	import MessageRun from './MessageRun.svelte';
 
-	export let channel = null;
-	$: messageList = channel !== null ? $messages.inChannel(channel) : [];
+	let { channel } = $props();
+	let messageList = $derived(channel !== null ? $messages.inChannel(channel) : []);
 
 	function* chunkBy(xs, fn) {
 		let chunk;
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index 3dc5c87..fdc5d56 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,7 +1,5 @@
 <script>
-	export let id;
-	export let name;
-	export let active = false;
+	let { id, name, active } = $props();
 </script>
 
 <li class="rounded-full" class:bg-slate-400={active}>
diff --git a/ui/lib/components/ChannelList.svelte b/ui/lib/components/ChannelList.svelte
index f7376c1..9d1227e 100644
--- a/ui/lib/components/ChannelList.svelte
+++ b/ui/lib/components/ChannelList.svelte
@@ -1,10 +1,7 @@
 <script>
-	import { channelsList } from '$lib/store';
 	import Channel from './Channel.svelte';
 
-	export let active = null;
-
-	$: channels = $channelsList.channels;
+	let { channels, active } = $props();
 </script>
 
 <nav class="list-nav">
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index 6eee5db..ac43925 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -1,11 +1,12 @@
 <script>
 	import { createChannel } from '$lib/apiServer';
 
-	let name = '';
+	let name = $state('');
 	let pending = false;
-	$: disabled = pending;
+	let disabled = $derived(pending);
 
-	async function handleSubmit() {
+	async function handleSubmit(event) {
+		event.preventDefault();
 		pending = true;
 		const response = await createChannel(name);
 		if (200 <= response.status && response.status < 300) {
@@ -15,7 +16,7 @@
 	}
 </script>
 
-<form on:submit|preventDefault={handleSubmit} class="form form-row flex-nowrap">
+<form onsubmit={handleSubmit} class="form form-row flex-nowrap">
 	<input
 		type="text"
 		placeholder="create channel"
diff --git a/ui/lib/components/CurrentUser.svelte b/ui/lib/components/CurrentUser.svelte
index 97ff980..46c76b0 100644
--- a/ui/lib/components/CurrentUser.svelte
+++ b/ui/lib/components/CurrentUser.svelte
@@ -3,7 +3,8 @@
 	import { logOut } from '$lib/apiServer';
 	import { currentUser } from '$lib/store';
 
-	async function handleLogout() {
+	async function handleLogout(event) {
+		event.preventDefault();
 		const response = await logOut();
 		if (200 <= response.status && response.status < 300) {
 			currentUser.update(() => null);
@@ -12,7 +13,7 @@
 	}
 </script>
 
-<form on:submit|preventDefault={handleLogout}>
+<form onsubmit={handleLogout}>
 	{#if $currentUser}
 		<a href="/me">@{$currentUser.username}</a>
 	{/if}
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index ea8dd1d..79fe087 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { clipboard } from '@skeletonlabs/skeleton';
 
-	export let id;
-	$: inviteUrl = new URL(`/invite/${id}`, document.location);
+	let { id } = $props();
+	let inviteUrl = $derived(new URL(`/invite/${id}`, document.location));
 </script>
 
 <button
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index bfaf2b6..337ee7e 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -1,24 +1,23 @@
 <script>
-	import { writable } from 'svelte/store';
 	import { createInvite } from '$lib/apiServer';
 	import Invite from '$lib/components/Invite.svelte';
 
-	let invites = writable([]);
-	$: $invites, console.log('invites', $invites);
+	let invites = $state([]);
 
-	async function onSubmit() {
+	async function onSubmit(event) {
+		event.preventDefault();
 		let response = await createInvite();
 		if (response.status == 200) {
-			invites.update((val) => [...val, response.data]);
+			invites.push(response.data);
 		}
 	}
 </script>
 
 <ul>
-	{#each $invites as invite}
+	{#each invites as invite}
 		<li><Invite id={invite.id} /></li>
 	{/each}
 </ul>
-<form on:submit|preventDefault={onSubmit}>
+<form onsubmit={onSubmit}>
 	<button class="btn variant-filled" type="submit"> Create Invitation </button>
 </form>
diff --git a/ui/lib/components/LogIn.svelte b/ui/lib/components/LogIn.svelte
index 4346c47..4e28abe 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -1,12 +1,15 @@
 <script>
-	export let disabled = false;
-	export let username = '';
-	export let password = '';
-	export let legend = 'sign in';
+	let {
+		username = $bindable(),
+		password = $bindable(),
+		legend = 'sign in',
+		disabled,
+		onsubmit
+	} = $props();
 </script>
 
 <div class="card m-4 p-4">
-	<form on:submit|preventDefault>
+	<form {onsubmit}>
 		<label class="label" for="username">
 			username
 			<input
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index a82318a..f47e9b6 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -2,14 +2,12 @@
 	import { marked } from 'marked';
 	import DOMPurify from 'dompurify';
 
-	export let at;
-	export let body;
-
-	$: renderedBody = DOMPurify.sanitize(marked.parse(body, { breaks: true }));
-
-	let scroll = (message) => {
+	function scroll(message) {
 		message.scrollIntoView();
-	};
+	}
+
+	let { at, body } = $props();
+	let renderedBody = $derived(DOMPurify.sanitize(marked.parse(body, { breaks: true })));
 </script>
 
 <div class="message relative">
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index e829674..220ed3b 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -1,40 +1,34 @@
 <script>
-	import { tick } from 'svelte';
 	import { postToChannel } from '$lib/apiServer';
 
-	export let channel = null;
-	let input;
-	let value = '';
+	let { channel } = $props();
+
+	let form;
+	let value = $state('');
 	let pending = false;
 
-	$: disabled = pending || channel === null;
+	let disabled = $derived(pending);
 
-	async function handleSubmit() {
-		if (channel !== null) {
-			pending = true;
-			// TODO try/catch:
-			await postToChannel(channel, value);
-			pending = false;
-			value = '';
-			await tick();
-			input.focus();
-		}
+	async function onSubmit(event) {
+		event.preventDefault();
+		pending = true;
+		await postToChannel(channel, value);
+		form.reset();
+		pending = false;
 	}
 
 	function onKeyDown(event) {
 		if (!event.altKey && event.key === 'Enter') {
-			handleSubmit();
-			event.preventDefault();
+			onSubmit(event);
 		}
 	}
 </script>
 
-<form on:submit|preventDefault={handleSubmit} class="flex flex-row flex-nowrap">
+<form bind:this={form} onsubmit={onSubmit} class="flex flex-row flex-nowrap">
 	<textarea
-		bind:this={input}
+		onkeydown={onKeyDown}
 		bind:value
 		{disabled}
-		on:keydown={onKeyDown}
 		type="search"
 		class="flex-auto h-6 input rounded-r-none"
 	></textarea>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 4894885..23c2186 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -2,12 +2,10 @@
 	import { logins, currentUser } from '$lib/store';
 	import Message from '$lib/components/Message.svelte';
 
-	export let sender;
-	export let messages;
+	let { sender, messages } = $props();
 
-	let name;
-	$: name = $logins.get(sender);
-	$: ownMessage = $currentUser.id == sender;
+	let name = $derived($logins.get(sender));
+	let ownMessage = $derived($currentUser !== null && $currentUser.id == sender);
 </script>
 
 <div
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 5d1023d..356a096 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -9,10 +9,10 @@
 	import ChannelList from '$lib/components/ChannelList.svelte';
 	import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
 
-	let loading = true;
 	let events = null;
 
-	$: channel = $page?.params?.channel;
+	let loading = $state(true);
+	let channel = $derived($page.params.channel);
 
 	function onBooted(boot) {
 		currentUser.update(() => ({
@@ -63,7 +63,7 @@
 	<div id="interface" class="p-2">
 		<nav id="sidebar" data-expanded={$showMenu}>
 			<div class="channel-list">
-				<ChannelList active={channel} />
+				<ChannelList active={channel} channels={$channelsList.channels} />
 			</div>
 			<div class="create-channel">
 				<CreateChannelForm />
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 2c1b40a..a5836fc 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -3,7 +3,7 @@
 	import ActiveChannel from '$lib/components/ActiveChannel.svelte';
 	import MessageInput from '$lib/components/MessageInput.svelte';
 
-	$: channel = $page?.params?.channel;
+	let channel = $derived($page.params.channel);
 </script>
 
 <div class="active-channel">
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 26537ad..4531a91 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -3,15 +3,16 @@
 
 	import Invites from '$lib/components/Invites.svelte';
 
-	let currentPassword = '',
-		newPassword = '',
-		confirmPassword = '',
+	let currentPassword = $state(''),
+		newPassword = $state(''),
+		confirmPassword = $state(''),
 		passwordForm;
-	let pending = false;
-	$: valid = newPassword === confirmPassword && newPassword !== currentPassword;
-	$: disabled = pending || !valid;
+	let pending = $state(false);
+	let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword);
+	let disabled = $derived(pending || !valid);
 
-	async function onPasswordChange() {
+	async function onPasswordChange(event) {
+		event.preventDefault();
 		pending = true;
 		let response = await changePassword(currentPassword, newPassword);
 		switch (response.status) {
@@ -23,7 +24,7 @@
 	}
 </script>
 
-<form on:submit|preventDefault={onPasswordChange} bind:this={passwordForm}>
+<form onsubmit={onPasswordChange} bind:this={passwordForm}>
 	<label
 		>current password
 		<input
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} />
-- 
cgit v1.2.3