use event attributes

Author: dummdidumm

src/lib/components/Modal.svelte

@@ -1,6 +1,9 @@
 <script>
 	import { onMount } from 'svelte';
 
+	/** @type {{ onclose?: () => void; children?: import('svelte').Snippet }}*/
+	let { onclose } = $props();
+
 	/** @type {HTMLDialogElement} */
 	let modal;
 
@@ -41,7 +44,7 @@
 
 <div class="modal-background" />
 
-<dialog class="modal" tabindex="-1" bind:this={modal} on:close>
+<dialog class="modal" tabindex="-1" bind:this={modal} {onclose}>
 	<slot />
 </dialog>
 

src/routes/tutorial/[slug]/+page.svelte

@@ -111,7 +111,7 @@
 		show_editor = true;
 	}
 
-	/** @param {string} name */
+	/** @param {string | null} name */
 	function navigate_to_file(name) {
 		if (name === s.selected_name) return;
 
@@ -158,7 +158,7 @@
 
 <svelte:window
 	bind:innerWidth={w}
-	on:popstate={(e) => {
+	onpopstate={(e) => {
 		const q = new URLSearchParams(location.search);
 		const file = q.get('file');
 
@@ -181,8 +181,8 @@
 					bind:sidebar
 					index={data.index}
 					exercise={data.exercise}
-					on:select={(e) => {
-						navigate_to_file(e.detail.file);
+					on_select={(file) => {
+						navigate_to_file(file);
 					}}
 				/>
 			</section>
@@ -199,7 +199,7 @@
 						>
 							<section class="navigator" slot="a">
 								{#if mobile}
-									<button class="file" on:click={() => (show_filetree = !show_filetree)}>
+									<button class="file" onclick={() => (show_filetree = !show_filetree)}>
 										{s.selected_file?.name.replace(
 											data.exercise.scope.prefix,
 											data.exercise.scope.name + '/'
@@ -208,8 +208,8 @@
 								{:else}
 									<Filetree
 										exercise={data.exercise}
-										on:select={(e) => {
-											select_file(e.detail.name);
+										on_select={(name) => {
+											select_file(name);
 										}}
 									/>
 								{/if}
@@ -218,7 +218,7 @@
 									class="solve"
 									class:completed
 									disabled={!data.exercise.has_solution}
-									on:click={() => {
+									onclick={() => {
 										reset_files(Object.values(completed ? data.exercise.a : data.exercise.b));
 									}}
 								>
@@ -239,8 +239,8 @@
 										<Filetree
 											mobile
 											exercise={data.exercise}
-											on:select={(e) => {
-												navigate_to_file(e.detail.name);
+											on_select={(name) => {
+												navigate_to_file(name);
 											}}
 										/>
 									</div>
@@ -259,8 +259,8 @@
 
 	<div class="screen-toggle">
 		<ScreenToggle
-			on:change={(e) => {
-				show_editor = e.detail.pressed;
+			on_change={(pressed) => {
+				show_editor = pressed;
 
 				const url = new URL(location.origin + location.pathname);
 

src/routes/tutorial/[slug]/Chrome.svelte

@@ -1,31 +1,34 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
-
-	/** @type {{path: string; loading: boolean; href: string | null;}}*/
-	let { path, loading, href } = $props();
-
-	const dispatch = createEventDispatcher();
+	/** @type {{
+	 * 	path: string;
+	 * 	loading: boolean;
+	 * 	href: string | null;
+	 * 	on_refresh?: () => void;
+	 * 	on_change?: (value: string) => void;
+	 * 	on_toggle_terminal?: () => void;
+	 * }}*/
+	let { path, loading, href, on_refresh, on_change, on_toggle_terminal } = $props();
 </script>
 
 <div class="chrome" class:loading>
 	<button
 		disabled={loading}
 		class="reload icon"
-		on:click={() => dispatch('refresh')}
+		onclick={() => on_refresh?.()}
 		aria-label="reload"
 	/>
 
 	<input
 		disabled={loading}
 		aria-label="URL"
 		value={path}
-		on:change={(e) => {
-			dispatch('change', { value: e.currentTarget.value });
+		onchange={(e) => {
+			on_change?.(e.currentTarget.value);
 		}}
-		on:keydown={(e) => {
+		onkeydown={(e) => {
 			if (e.key !== 'Enter') return;
 
-			dispatch('change', { value: e.currentTarget.value });
+			on_change?.(e.currentTarget.value);
 			e.currentTarget.blur();
 		}}
 	/>
@@ -41,7 +44,7 @@
 	<button
 		disabled={loading}
 		class="terminal icon"
-		on:click={() => dispatch('toggle_terminal')}
+		onclick={() => on_toggle_terminal?.()}
 		aria-label="toggle terminal"
 	/>
 </div>

src/routes/tutorial/[slug]/Editor.svelte

@@ -203,12 +203,12 @@
 </script>
 
 <svelte:window
-	on:pointerdown={(e) => {
+	onpointerdown={(e) => {
 		if (!container.contains(/** @type {HTMLElement} */ (e.target))) {
 			preserve_editor_focus = false;
 		}
 	}}
-	on:message={(e) => {
+	onmessage={(e) => {
 		if (preserve_editor_focus && e.data.type === 'iframe_took_focus') {
 			editor_view.focus();
 		}
@@ -218,11 +218,11 @@
 <div
 	class="container"
 	bind:this={container}
-	on:focusin={() => {
+	onfocusin={() => {
 		clearTimeout(remove_focus_timeout);
 		preserve_editor_focus = true;
 	}}
-	on:focusout={() => {
+	onfocusout={() => {
 		// Heuristic: user did refocus themmselves if iframe_took_focus
 		// doesn't happen in the next few miliseconds. Needed
 		// because else navigations inside the iframe refocus the editor.

src/routes/tutorial/[slug]/Menu.svelte

@@ -44,7 +44,7 @@
 
 		<button
 			class="heading"
-			on:click={() => ($is_mobile ? open_nav() : (is_open = !is_open))}
+			onclick={() => ($is_mobile ? open_nav() : (is_open = !is_open))}
 			class:open={is_open}
 		>
 			<h1>
@@ -87,7 +87,8 @@
 									transition:slide={{ duration }}
 								>
 									<button
-										on:click|stopPropagation={() => {
+										onclick={(e) => {
+											e.stopPropagation();
 											if (expanded_part !== part.slug) {
 												expanded_part = part.slug;
 												expanded_chapter = part.chapters[0].slug;
@@ -106,7 +107,10 @@
 													aria-current={chapter.slug === current.chapter.slug ? 'step' : undefined}
 												>
 													<button
-														on:click|stopPropagation={() => (expanded_chapter = chapter.slug)}
+														onclick={(e) => {
+															e.stopPropagation();
+															expanded_chapter = chapter.slug;
+														}}
 														style="width: 100%; text-align: start;"
 													>
 														<!-- <img src={arrow} alt="Arrow icon" /> -->
@@ -126,7 +130,7 @@
 																>
 																	<a
 																		href="/tutorial/{exercise.slug}"
-																		on:click={() => (is_open = false)}
+																		onclick={() => (is_open = false)}
 																	>
 																		{exercise.title}
 																	</a>

src/routes/tutorial/[slug]/Output.svelte

@@ -85,7 +85,7 @@
 
 		// To prevent iframe flickering.
 		// Set to `visible` by calling `set_iframe_visible` function
-		// from iframe on:load or setTimeout
+		// from iframe onload or setTimeout
 		iframe.style.visibility = 'hidden';
 		setTimeout(set_iframe_visible, 1000);
 
@@ -109,20 +109,20 @@
 	}
 </script>
 
-<svelte:window on:message={handle_message} />
+<svelte:window onmessage={handle_message} />
 <Chrome
 	{path}
 	{loading}
 	href={a.base && a.base + path}
-	on:refresh={() => {
+	on_refresh={() => {
 		set_iframe_src(a.base + path);
 	}}
-	on:toggle_terminal={() => {
+	on_toggle_terminal={() => {
 		terminal_visible = !terminal_visible;
 	}}
-	on:change={(e) => {
+	on_change={(value) => {
 		if (a.base) {
-			const url = new URL(e.detail.value, a.base);
+			const url = new URL(value, a.base);
 			path = url.pathname + url.search + url.hash;
 			set_iframe_src(a.base + path);
 		}
@@ -131,7 +131,7 @@
 
 <div class="content">
 	{#if browser}
-		<iframe bind:this={iframe} title="Output" on:load={set_iframe_visible} />
+		<iframe bind:this={iframe} title="Output" onload={set_iframe_visible} />
 	{/if}
 
 	{#if paused || loading || a.error}

src/routes/tutorial/[slug]/ScreenToggle.svelte

@@ -1,30 +1,27 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import ToggleButton from './ToggleButton.svelte';
 
-	/** @type {{pressed: boolean}} */
-	let { pressed = false } = $props();
-
-	const dispatch = createEventDispatcher();
+	/** @type {{pressed: boolean; on_change?: (pressed: boolean) => void}} */
+	let { pressed = false, on_change } = $props();
 </script>
 
 <div class="input-output-toggle">
 	<button
 		aria-hidden="true"
-		on:click={() => {
+		onclick={() => {
 			if (pressed) {
 				pressed = false;
-				dispatch('change', { pressed });
+				on_change?.(pressed);
 			}
 		}}>Tutorial</button
 	>
-	<ToggleButton label="Show editor" {pressed} on:change />
+	<ToggleButton label="Show editor" {pressed} {on_change} />
 	<button
 		aria-hidden="true"
-		on:click={() => {
+		onclick={() => {
 			if (!pressed) {
 				pressed = true;
-				dispatch('change', { pressed });
+				on_change?.(pressed);
 			}
 		}}>Editor</button
 	>

src/routes/tutorial/[slug]/Sidebar.svelte

@@ -1,12 +1,9 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import Menu from './Menu.svelte';
 
-	/** @type {{ index: import('$lib/types').PartStub[]; exercise: import('$lib/types').Exercise; sidebar: HTMLElement }}*/
-	let { index, exercise, sidebar } = $props();
-
-	const dispatch = createEventDispatcher();
+	/** @type {{ index: import('$lib/types').PartStub[]; exercise: import('$lib/types').Exercise; sidebar: HTMLElement; on_select?: (file: string) => void }}*/
+	let { index, exercise, sidebar, on_select } = $props();
 
 	const namespace = 'learn.svelte.dev';
 	const copy_enabled = `${namespace}:copy_enabled`;
@@ -19,7 +16,7 @@
 <section bind:this={sidebar}>
 	<div
 		class="text"
-		on:copy={(e) => {
+		oncopy={(e) => {
 			if (sessionStorage[copy_enabled]) return;
 
 			/** @type {HTMLElement | null} */
@@ -40,19 +37,19 @@
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
-			on:click={(e) => {
+			onclick={(e) => {
 				const node = /** @type {HTMLElement} */ (e.target);
 
 				if (node.nodeName === 'CODE') {
 					const { file } = node.dataset;
 					if (file) {
-						dispatch('select', { file });
+						on_select?.(file);
 					}
 				}
 
 				if (node.nodeName === 'SPAN' && node.classList.contains('filename')) {
 					const file = exercise.scope.prefix + node.textContent;
-					dispatch('select', { file });
+					on_select?.(file);
 				}
 			}}
 		>
@@ -77,7 +74,7 @@
 </section>
 
 {#if show_modal}
-	<Modal on:close={() => (show_modal = false)}>
+	<Modal onclose={() => (show_modal = false)}>
 		<div class="modal-contents">
 			<h2>Copy and paste is currently disabled!</h2>
 
@@ -88,14 +85,14 @@
 			<label>
 				<input
 					type="checkbox"
-					on:change={(e) => {
+					onchange={(e) => {
 						sessionStorage[copy_enabled] = e.currentTarget.checked ? 'true' : '';
 					}}
 				/>
 				enable copy-and-paste for the duration of this session
 			</label>
 
-			<button on:click={() => (show_modal = false)}>OK</button>
+			<button onclick={() => (show_modal = false)}>OK</button>
 		</div>
 	</Modal>
 {/if}