From ffff885ffb7080bf8c6f722be7749e71ef2b30bf Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Tue, 10 Sep 2024 09:22:46 +0200
Subject: [PATCH] Event handlers with the `on:` directive are deprecated in
 svelte 5

Also bubbling events from HTML elements to the components have to be
done with `onclick` callback props.
---
 src/components/Border.svelte      | 3 ++-
 src/components/Button.svelte      | 3 ++-
 src/components/Fill.svelte        | 3 ++-
 src/components/Header.svelte      | 6 +++---
 src/components/Icon.svelte        | 3 ++-
 src/components/Link.svelte        | 2 +-
 src/components/Popover.svelte     | 2 +-
 src/components/ThemeSwitch.svelte | 4 ++--
 8 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Border.svelte b/src/components/Border.svelte
index 6b019f201..cbbee05fe 100644
--- a/src/components/Border.svelte
+++ b/src/components/Border.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   export let variant: "primary" | "secondary" | "ghost";
   export let hoverable: boolean = false;
+  export let onclick: (() => void) | undefined = undefined;
 
   export let stylePadding: string | undefined = undefined;
   export let styleHeight: string | undefined = undefined;
@@ -150,7 +151,7 @@
 <div
   style:width={styleWidth}
   class="container"
-  on:click
+  {onclick}
   role="button"
   tabindex="0"
   {style}
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 5571a0505..e686daba0 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   export let variant: "primary" | "secondary" | "ghost";
+  export let onclick: (() => void) | undefined = undefined;
 
   $: style =
     `--button-color-1: var(--color-fill-${variant});` +
@@ -222,7 +223,7 @@
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="container" on:click role="button" tabindex="0" {style}>
+<div class="container" {onclick} role="button" tabindex="0" {style}>
   <div class="pixel p1-1"></div>
   <div class="pixel p1-2"></div>
   <div class="pixel p1-3"></div>
diff --git a/src/components/Fill.svelte b/src/components/Fill.svelte
index 4b7ef9ae9..4e0e5339e 100644
--- a/src/components/Fill.svelte
+++ b/src/components/Fill.svelte
@@ -9,6 +9,7 @@
   export let stylePadding: string | undefined = undefined;
   export let styleHeight: string | undefined = undefined;
   export let styleWidth: string | undefined = undefined;
+  export let onclick: (() => void) | undefined = undefined;
 
   $: style =
     variant === "transparent"
@@ -82,9 +83,9 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="container"
-  on:click
   role="button"
   tabindex="0"
+  {onclick}
   {style}
   style:width={styleWidth}
   style:height={styleHeight}>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index cba644c35..3d8a61fc5 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -41,12 +41,12 @@
       <div class="flex-item navigation" style:gap="0.5rem">
         <Icon
           name="arrow-left"
-          on:click={() => {
+          onclick={() => {
             window.history.back();
           }} />
         <Icon
           name="arrow-right"
-          on:click={() => {
+          onclick={() => {
             window.history.forward();
           }} />
       </div>
@@ -67,7 +67,7 @@
         <Border
           slot="toggle"
           let:toggle
-          on:click={toggle}
+          onclick={toggle}
           variant="ghost"
           stylePadding="0 0.25rem"
           styleHeight="32px">
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index ae0c5db69..e468c7376 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -2,6 +2,7 @@
   import { unreachable } from "@app/lib/utils";
 
   export let size: "16" | "32" = "16";
+  export let onclick: (() => void) | undefined = undefined;
 
   export let name:
     | "arrow-left"
@@ -39,7 +40,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <svg
   role="img"
-  on:click
+  {onclick}
   width={size}
   height={size}
   fill="currentColor"
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
index 68f903139..534b2db2e 100644
--- a/src/components/Link.svelte
+++ b/src/components/Link.svelte
@@ -28,6 +28,6 @@
   }
 </style>
 
-<a on:click={navigateToRoute} href={routeToPath(route)}>
+<a onclick={navigateToRoute} href={routeToPath(route)}>
   <slot />
 </a>
diff --git a/src/components/Popover.svelte b/src/components/Popover.svelte
index 8929e34bc..3c676b825 100644
--- a/src/components/Popover.svelte
+++ b/src/components/Popover.svelte
@@ -47,7 +47,7 @@
   }
 </style>
 
-<svelte:window on:click={clickOutside} on:touchstart={clickOutside} />
+<svelte:window onclick={clickOutside} on:touchstart={clickOutside} />
 
 <div
   bind:this={thisComponent}
diff --git a/src/components/ThemeSwitch.svelte b/src/components/ThemeSwitch.svelte
index 1288d73fd..ec3fef991 100644
--- a/src/components/ThemeSwitch.svelte
+++ b/src/components/ThemeSwitch.svelte
@@ -39,7 +39,7 @@
     <Fill
       stylePadding="0 0.5rem"
       variant={$theme === "dark" ? "secondary" : "transparent"}
-      on:click={() => {
+      onclick={() => {
         storeTheme("dark");
       }}>
       <Icon name="moon" />
@@ -49,7 +49,7 @@
     <Fill
       stylePadding="0 0.5rem"
       variant={$theme === "light" ? "secondary" : "transparent"}
-      on:click={() => {
+      onclick={() => {
         storeTheme("light");
       }}>
       <span