feat: migrate svelte v5

Author: peterpeterparker

templates/sveltekit-example/src/app.d.ts

@@ -7,17 +7,17 @@ declare global {
 		// interface PageData {}
 		// interface Platform {}
 	}
+}
 
-	/* eslint-disable */
+/* eslint-disable */
 
-	declare namespace svelteHTML {
-		interface HTMLAttributes<T> {
-			'on:junoSignOutAuthTimer'?: (event: CustomEvent<any>) => void;
-			'on:exampleReload'?: (event: CustomEvent<any>) => void;
-		}
+declare namespace svelteHTML {
+	interface HTMLAttributes<T> {
+		onjunoSignOutAuthTimer?: (event: CustomEvent<any>) => void;
+		onexampleReload?: (event: CustomEvent<any>) => void;
 	}
-
-	/* eslint-enable */
 }
 
+/* eslint-enable */
+
 export {};

templates/sveltekit-example/src/lib/components/Auth.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount, type Snippet } from 'svelte';
 	import { authSubscribe } from '@junobuild/core-peer';
 	import { userStore } from '$lib/stores/user.store';
 	import { userSignedIn } from '$lib/derived/user.derived';
 	import Logout from '$lib/components/Logout.svelte';
 	import Login from '$lib/components/Login.svelte';
 
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
 	let unsubscribe: (() => void) | undefined = undefined;
 
 	onMount(() => (unsubscribe = authSubscribe((user) => userStore.set(user))));
@@ -15,11 +21,11 @@
 	onDestroy(() => unsubscribe?.());
 </script>
 
-<svelte:window on:junoSignOutAuthTimer={automaticSignOut} />
+<svelte:window onjunoSignOutAuthTimer={automaticSignOut} />
 
 {#if $userSignedIn}
 	<div>
-		<slot />
+		{@render children()}
 
 		<Logout />
 	</div>

templates/sveltekit-example/src/lib/components/Backdrop.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let spinner = false;
+	interface Props {
+		spinner?: boolean;
+	}
+
+	let { spinner = false }: Props = $props();
 </script>
 
 <div

templates/sveltekit-example/src/lib/components/Button.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
-	export let disabled: boolean | undefined = undefined;
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		disabled?: boolean | undefined;
+		children: Snippet;
+		onclick: () => Promise<void>;
+	}
+
+	let { disabled = undefined, children, onclick }: Props = $props();
 </script>
 
 <button
-	on:click
+	{onclick}
 	{disabled}
 	class={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-sm py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled === true ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}
 >
-	<slot />
+	{@render children()}
 </button>

templates/sveltekit-example/src/lib/components/Delete.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import type { Note } from '$lib/types/note';
 	import { deleteAsset, deleteDoc, type Doc } from '@junobuild/core-peer';
 	import Backdrop from '$lib/components/Backdrop.svelte';
 
-	export let doc: Doc<Note>;
+	interface Props {
+		doc: Doc<Note>;
+		ondeleted: () => Promise<void>;
+	}
 
-	const dispatch = createEventDispatcher();
+	let { doc, ondeleted }: Props = $props();
 
-	let progress = false;
+	let progress = $state(false);
 
 	const delItem = async () => {
 		progress = true;
@@ -32,7 +34,7 @@
 				doc
 			});
 
-			dispatch('deleted');
+			await ondeleted();
 		} catch (err) {
 			console.error(err);
 		}
@@ -42,9 +44,10 @@
 </script>
 
 <button
+	aria-label="Delete document"
 	role="cell"
 	class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
-	on:click={delItem}
+	onclick={delItem}
 >
 	<svg width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" fill="currentColor">
 		<g>

templates/sveltekit-example/src/lib/components/Login.svelte

@@ -7,4 +7,4 @@
 	};
 </script>
 
-<Button on:click={login}>Sign in</Button>
+<Button onclick={login}>Sign in</Button>

templates/sveltekit-example/src/lib/components/Logout.svelte

@@ -4,7 +4,7 @@
 
 <button
 	type="button"
-	on:click={signOut}
+	onclick={signOut}
 	class="dark:text-white flex items-center gap-2 mt-24 hover:text-lavender-blue-500 active:text-lavender-blue-400"
 >
 	<svg

templates/sveltekit-example/src/lib/components/Modal.svelte

@@ -7,17 +7,16 @@
 	import type { Note } from '$lib/types/note';
 	import { userStore } from '$lib/stores/user.store';
 
-	let showModal = false;
+	let showModal = $state(false);
 
-	let inputText = '';
-	let file: File | undefined = undefined;
+	let inputText = $state('');
+	let file: File | undefined = $state(undefined);
 
-	let inputFile: HTMLInputElement | null = null;
+	let inputFile: HTMLInputElement | null = $state(null);
 
-	let progress = false;
+	let progress = $state(false);
 
-	let valid = false;
-	$: valid = inputText !== '' && $userSignedIn;
+	let valid = $derived(inputText !== '' && $userSignedIn);
 
 	const reload = () => {
 		const event = new CustomEvent('exampleReload');
@@ -74,9 +73,13 @@
 		(file = ($event as unknown as { target: EventTarget & HTMLInputElement }).target?.files?.[0]);
 
 	const openSelectFile = () => inputFile?.click();
+
+	const openModal = async () => {
+		showModal = true;
+	};
 </script>
 
-<Button on:click={() => (showModal = true)}>
+<Button onclick={openModal}>
 	Add an entry
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
@@ -105,7 +108,7 @@
 					<button
 						aria-label="Attach a file to the entry"
 						class="flex gap-2 items-center hover:text-lavender-blue-600 active:text-lavender-blue-400"
-						on:click={openSelectFile}
+						onclick={openSelectFile}
 					>
 						<svg
 							width="20"
@@ -128,7 +131,7 @@
 					<input
 						type="file"
 						class="fixed right-0 -bottom-24 opacity-0"
-						on:change={onChangeFile}
+						onchange={onChangeFile}
 						disabled={progress}
 						bind:this={inputFile}
 					/>
@@ -147,12 +150,12 @@
 						<button
 							class="py-1 px-8 hover:text-lavender-blue-600 active:text-lavender-blue-400"
 							type="button"
-							on:click={() => (showModal = false)}
+							onclick={() => (showModal = false)}
 						>
 							Close
 						</button>
 
-						<Button on:click={add} disabled={!valid}>Submit</Button>
+						<Button onclick={add} disabled={!valid}>Submit</Button>
 					</div>
 				{/if}
 			</div>

templates/sveltekit-example/src/lib/components/Table.svelte

@@ -2,12 +2,12 @@
 	import type { Note } from '$lib/types/note';
 	import { type Doc, listDocs } from '@junobuild/core-peer';
 	import Delete from '$lib/components/Delete.svelte';
-	import { userNotSignedIn, userSignedIn } from '$lib/derived/user.derived';
+	import { userNotSignedIn } from '$lib/derived/user.derived';
 
-	let items: Doc<Note>[] = [];
+	let items: Doc<Note>[] = $state([]);
 
-	const list = async () => {
-		if ($userNotSignedIn) {
+	const list = async (userNotSignedIn: boolean) => {
+		if (userNotSignedIn) {
 			items = [];
 			return;
 		}
@@ -20,10 +20,12 @@
 		items = data;
 	};
 
-	$: $userSignedIn, (async () => await list())();
+	$effect(() => {
+		list($userNotSignedIn);
+	});
 </script>
 
-<svelte:window on:exampleReload={list} />
+<svelte:window onexampleReload={list} />
 
 <div class="w-full max-w-2xl mt-8 dark:text-white" role="table">
 	<div role="row">
@@ -65,7 +67,7 @@
 						</a>
 					{/if}
 
-					<Delete doc={item} on:deleted={list} />
+					<Delete doc={item} ondeleted={list} />
 				</div>
 			</div>
 		{/each}

templates/sveltekit-example/src/routes/+layout.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
 	import { initSatellite } from '@junobuild/core-peer';
 	import Footer from '$lib/components/Footer.svelte';
 	import Background from '$lib/components/Background.svelte';
 	import '../app.css';
 	import Auth from '$lib/components/Auth.svelte';
 
-	onMount(
-		async () =>
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	$effect(
+		(async () => {
 			await initSatellite({
 				workers: {
 					auth: true
 				}
-			})
+			});
+		})()
 	);
 </script>
 
@@ -29,7 +36,7 @@
 		</p>
 
 		<Auth>
-			<slot />
+			{@render children()}
 		</Auth>
 	</main>