feat: svelte v5 templates

templates/sveltekit-example/eslint.config.js

@@ -1,11 +1,10 @@
+import prettier from 'eslint-config-prettier';
 import js from '@eslint/js';
-import ts from 'typescript-eslint';
 import svelte from 'eslint-plugin-svelte';
-import prettier from 'eslint-config-prettier';
 import globals from 'globals';
+import ts from 'typescript-eslint';
 
-/** @type {import('eslint').Linter.FlatConfig[]} */
-export default [
+export default ts.config(
 	js.configs.recommended,
 	...ts.configs.recommended,
 	...svelte.configs['flat/recommended'],
@@ -21,13 +20,14 @@ export default [
 	},
 	{
 		files: ['**/*.svelte'],
+
 		languageOptions: {
 			parserOptions: {
 				parser: ts.parser
 			}
 		}
 	},
 	{
-		ignores: ['build/', '.svelte-kit/', 'package/', 'static/workers/**/*']
+		ignores: ['build/', '.svelte-kit/', 'dist/', 'static/']
 	}
-];
+);

templates/sveltekit-example/package.json

@@ -16,25 +16,25 @@
 	"devDependencies": {
 		"@junobuild/config": "^0.0.14",
 		"@junobuild/vite-plugin": "^0.0.18",
-		"@sveltejs/adapter-static": "^3.0.4",
-		"@sveltejs/kit": "^2.5.25",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
-		"@types/eslint": "^8.56.7",
+		"@sveltejs/adapter-static": "^3.0.5",
+		"@sveltejs/kit": "^2.7.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^8.57.0",
+		"eslint": "^9.13.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.43.0",
-		"globals": "^15.9.0",
-		"postcss": "^8.4.41",
+		"eslint-plugin-svelte": "^2.46.0",
+		"globals": "^15.11.0",
+		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.6",
-		"svelte": "^4.2.19",
-		"svelte-check": "^3.8.6",
-		"tailwindcss": "^3.4.10",
-		"tslib": "^2.7.0",
-		"typescript": "^5.5.4",
-		"typescript-eslint": "^8.3.0",
-		"vite": "^5.4.2"
+		"prettier-plugin-svelte": "^3.2.7",
+		"svelte": "^5.1.0",
+		"svelte-check": "^4.0.5",
+		"tailwindcss": "^3.4.14",
+		"tslib": "^2.8.0",
+		"typescript": "^5.6.3",
+		"typescript-eslint": "^8.11.0",
+		"vite": "^5.4.10"
 	},
 	"type": "module",
 	"dependencies": {

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

@@ -12,8 +12,8 @@ declare global {
 
 	declare namespace svelteHTML {
 		interface HTMLAttributes<T> {
-			'on:junoSignOutAuthTimer'?: (event: CustomEvent<any>) => void;
-			'on:exampleReload'?: (event: CustomEvent<any>) => void;
+			onjunoSignOutAuthTimer?: (event: CustomEvent<any>) => void;
+			onjunoExampleReload?: (event: CustomEvent<any>) => void;
 		}
 	}
 

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,20 +7,19 @@
 	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');
+		const event = new CustomEvent('junoExampleReload');
 		window.dispatchEvent(event);
 	};
 
@@ -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,14 @@
 		items = data;
 	};
 
-	$: $userSignedIn, (async () => await list())();
+	const reload = async () => await list($userNotSignedIn);
+
+	$effect(() => {
+		list($userNotSignedIn);
+	});
 </script>
 
-<svelte:window on:exampleReload={list} />
+<svelte:window onjunoExampleReload={reload} />
 
 <div class="w-full max-w-2xl mt-8 dark:text-white" role="table">
 	<div role="row">
@@ -65,7 +69,7 @@
 						</a>
 					{/if}
 
-					<Delete doc={item} on:deleted={list} />
+					<Delete doc={item} ondeleted={reload} />
 				</div>
 			</div>
 		{/each}

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

@@ -1,19 +1,28 @@
 <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 () =>
-			await initSatellite({
-				workers: {
-					auth: true
-				}
-			})
-	);
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	const init = async () => {
+		await initSatellite({
+			workers: {
+				auth: true
+			}
+		});
+	};
+
+	$effect(() => {
+		init();
+	});
 </script>
 
 <div class="relative isolate min-h-[100dvh]">
@@ -29,7 +38,7 @@
 		</p>
 
 		<Auth>
-			<slot />
+			{@render children()}
 		</Auth>
 	</main>