Merge pull request jonhoo#177 from jonhoo/svelte-5

svelte 5 auto-migration

client/package.json

@@ -11,7 +11,7 @@
 		"format": "prettier --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.1",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.15.0",
 		"eslint-config-prettier": "^9.1.0",

client/src/App.svelte

@@ -3,7 +3,7 @@
 	import { event } from "./store";
 	import List from "./List.svelte";
 
-	let problum;
+	let problum = $state();
 
 	async function popstate() {
 		const path = window.location.pathname;
@@ -60,7 +60,7 @@
 	onMount(popstate);
 </script>
 
-<svelte:window on:popstate={popstate} />
+<svelte:window onpopstate={popstate} />
 
 {#if problum}
 	<div class="fixed bottom-4 left-0 right-0">
@@ -93,7 +93,7 @@
 	<div class="flex h-screen items-center justify-center">
 		<button
 			class="border-2 border-red-500 bg-orange-700 p-4 px-8 font-bold text-white hover:border-red-400"
-			on:click={create}>Open new Q&amp;A session</button
+			onclick={create}>Open new Q&amp;A session</button
 		>
 	</div>
 {/if}

client/src/List.svelte

@@ -82,8 +82,8 @@
 		return await r.json();
 	}
 
-	let problum;
-	let rawQuestions;
+	let problum = $state();
+	let rawQuestions = $state();
 	event.subscribe((e) => {
 		loadQuestions(e)
 			.then((qs) => {
@@ -203,16 +203,15 @@
 		return qs;
 	}
 
-	$: questions = adjustQuestions(rawQuestions, $localAdjustments, $votedFor);
-	$: unanswered = (questions || []).filter((q) => !q.answered && !q.hidden);
-	$: answered = (questions || [])
-		.filter((q) => q.answered && !q.hidden)
-		.sort((a, b) => a.answered - b.answered);
-	$: hidden = (questions || []).filter((q) => q.hidden);
+	let questions = $derived(adjustQuestions(rawQuestions, $localAdjustments, $votedFor));
+	let unanswered = $derived((questions || []).filter((q) => !q.answered && !q.hidden));
+	let answered = $derived(
+		(questions || []).filter((q) => q.answered && !q.hidden).sort((a, b) => a.answered - b.answered)
+	);
+	let hidden = $derived((questions || []).filter((q) => q.hidden));
 
 	async function ask() {
 		let q;
-		/* eslint-disable no-constant-condition */
 		while (true) {
 			q = prompt("Question:", q || "");
 			if (q === null) {
@@ -267,14 +266,14 @@
 	}
 </script>
 
-<svelte:window on:visibilitychange={visibilitychange} />
+<svelte:window onvisibilitychange={visibilitychange} />
 
 {#if questions}
 	<div class="text-center">
 		{#if $event.secret}
 			<button
 				class="border-2 border-red-100 bg-orange-700 p-4 px-8 font-bold text-white hover:border-red-400"
-				on:click={share}>{share_text}</button
+				onclick={share}>{share_text}</button
 			>
 			<div class="pt-4 text-slate-400">
 				The URL in your address bar shares the host view.<br />
@@ -284,7 +283,7 @@
 		{:else}
 			<button
 				class="border-2 border-red-100 bg-orange-700 p-4 px-8 font-bold text-white hover:border-red-400"
-				on:click={ask}>Ask another question</button
+				onclick={ask}>Ask another question</button
 			>
 		{/if}
 	</div>
@@ -304,9 +303,9 @@
 	<section class="pt-4">
 		{#if unanswered.length > 0}
 			<div class="flex flex-col divide-y">
-				{#each unanswered as question (question.qid)}
+				{#each unanswered as question, i (question.qid)}
 					<div animate:flip={{ duration: 500 }}>
-						<Question bind:question />
+						<Question index={i} bind:question={unanswered[i]} />
 					</div>
 				{/each}
 			</div>
@@ -329,9 +328,9 @@
 				>
 			</h2>
 			<div class="flex flex-col divide-y">
-				{#each answered as question (question.qid)}
+				{#each answered as question, i (question.qid)}
 					<div animate:flip={{ duration: 500 }}>
-						<Question bind:question />
+						<Question index={i} bind:question={answered[i]} />
 					</div>
 				{/each}
 			</div>
@@ -341,9 +340,9 @@
 		<section>
 			<h2 class="mb-4 mt-8 text-center text-2xl text-slate-400 dark:text-slate-500">Hidden</h2>
 			<div class="flex flex-col divide-y">
-				{#each hidden as question (question.qid)}
+				{#each hidden as question, i (question.qid)}
 					<div animate:flip={{ duration: 500 }}>
-						<Question bind:question />
+						<Question index={i} bind:question={hidden[i]} />
 					</div>
 				{/each}
 			</div>

client/src/Question.svelte

@@ -2,9 +2,9 @@
 	import { onMount } from "svelte";
 	import { votedFor, questionCache, questionData, localAdjustments, event } from "./store.js";
 
-	export let question;
+	let { question } = $props();
 
-	let now = new Date();
+	let now = $state(new Date());
 	onMount(() => {
 		const interval = setInterval(() => {
 			now = new Date();
@@ -15,8 +15,8 @@
 		};
 	});
 
-	$: liked = question.qid in $votedFor;
-	$: q = questionData(question.qid, $questionCache);
+	let liked = $derived(question.qid in $votedFor);
+	let q = $derived(questionData(question.qid, $questionCache));
 
 	async function vote() {
 		let dir;
@@ -110,9 +110,9 @@
 	<div class="flex items-center">
 		<div class="mr-4 w-8 shrink-0 grow-0 text-center">
 			{#if liked}
-				<button class="hover:opacity-50" title="Retract vote" on:click={vote}>▲</button>
+				<button class="hover:opacity-50" title="Retract vote" onclick={vote}>▲</button>
 			{:else}
-				<button class="opacity-30 hover:opacity-100" title="Vote" on:click={vote}>△</button>
+				<button class="opacity-30 hover:opacity-100" title="Vote" onclick={vote}>△</button>
 			{/if}
 			<div class="font-bold text-black dark:text-slate-300">{question.votes}</div>
 		</div>
@@ -129,15 +129,15 @@
 					{#if $event.secret}
 						—
 						{#if question.answered}
-							<button on:click={answered}>Mark as not answered</button>
+							<button onclick={answered}>Mark as not answered</button>
 						{:else}
-							<button on:click={answered}>Mark as answered</button>
+							<button onclick={answered}>Mark as answered</button>
 						{/if}
 						|
 						{#if question.hidden}
-							<button on:click={hidden}>Unhide</button>
+							<button onclick={hidden}>Unhide</button>
 						{:else}
-							<button on:click={hidden}>Hide</button>
+							<button onclick={hidden}>Hide</button>
 						{/if}
 					{/if}
 				</div>

client/src/main.js

@@ -1,6 +1,7 @@
 import App from "./App.svelte";
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
 	target: document.getElementById("app")
 });
 

client/src/store.js

@@ -104,7 +104,6 @@ export async function questionData(qid, qs) {
 		_reject = reject1;
 	});
 
-	/* eslint-disable no-constant-condition */
 	while (true) {
 		// make the current batch of qids (and their promises).
 		fetching = batch;