migrate deprecated code to svelte 5 practices (#30)

Pyreko · Nov 24, 2024 · 4e3d521 · 4e3d521
1 parent 9c07721
commit 4e3d521
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/site/src/lib/components/InfoButton.svelte b/site/src/lib/components/InfoButton.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	type Props = {
+		openModal: () => void;
+	};
 
-	const dispatch = createEventDispatcher();
+	let { openModal }: Props = $props();
 
 	function openInfoModal() {
-		dispatch('message');
+		openModal();
 	}
 </script>
 

diff --git a/site/src/lib/components/InfoModal.svelte b/site/src/lib/components/InfoModal.svelte
@@ -1,27 +1,38 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	import { fade } from 'svelte/transition';
-	import { createEventDispatcher } from 'svelte';
 
-	const dispatch = createEventDispatcher();
+	type Props = {
+		closeModal: () => void;
+	};
+
+	let { closeModal }: Props = $props();
+
 	function closeInfoModal() {
-		dispatch('message');
+		closeModal();
+	}
+
+	function onModalMousePress(event: MouseEvent) {
+		closeInfoModal();
+		event.stopPropagation();
 	}
 
 	function onKeyPress(event: KeyboardEvent) {
 		if (event.key === 'Escape') {
 			closeInfoModal();
+			event.stopPropagation();
 		}
 	}
 </script>
 
 <svelte:window onkeydown={onKeyPress} />
 
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-<div id="modal-background" onclick={closeInfoModal} transition:fade={{ duration: 100 }}>
-	<div class="modal-wrapper" onclick={stopPropagation(bubble('click'))}>
+<div
+	id="modal-background"
+	role="none"
+	onclick={onModalMousePress}
+	transition:fade={{ duration: 100 }}
+>
+	<div class="modal-wrapper">
 		<div class="modal-header">
 			<h1>About</h1>
 			<button class="close" onclick={closeInfoModal}>✕</button>

diff --git a/site/src/routes/+page.svelte b/site/src/routes/+page.svelte
@@ -68,11 +68,11 @@
 <Diamonds />
 
 <div class="info-wrapper">
-	<InfoButton on:message={openInfoModal} />
+	<InfoButton openModal={openInfoModal} />
 </div>
 
 {#if modalVisible}
-	<InfoModal on:message={closeInfoModal} />
+	<InfoModal closeModal={closeInfoModal} />
 {/if}
 
 {#if $clickOpacity > 0}
@@ -86,9 +86,7 @@
 <div class="box">
 	{#if isAnniversary()}
 		<Anniversary numYears={anniversaryYears()} />
-	{/if}
-
-	{#if isBirthday()}
+	{:else if isBirthday()}
 		<Birthday />
 	{/if}