refactor: update to Svelte 5 preview

feat: add charrecorder feat: dynamic os layouts for CC1
2026-02-02 15:22:39 +00:00 · 2024-08-01 00:28:38 +02:00
parent 6201cf5b0c
commit b8b903c5e1
61 changed files with 6765 additions and 4572 deletions
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -4,7 +4,7 @@
  import "$lib/style/scrollbar.scss";
  import "$lib/style/tippy.scss";
  import "$lib/style/theme.scss";
-  import { onDestroy, onMount } from "svelte";
+  import { onDestroy, onMount, type Snippet } from "svelte";
  import {
    applyTheme,
    argbFromHex,
@@ -49,7 +49,7 @@
    });
  }

-  export let data: LayoutData;
+  let { data, children }: { data: LayoutData; children: Snippet } = $props();

  onMount(async () => {
    theme.subscribe((it) => {
@@ -79,7 +79,7 @@
    stopLayoutDetection?.();
  });

-  let webManifestLink = "";
+  let webManifestLink = $state("");

  function handleHotkey(event: KeyboardEvent) {
    let key = $osLayout.get(event.code);
@@ -121,7 +121,9 @@
 <!-- <PickChangesDialog /> -->

 <PageTransition>
-  <slot />
+  {#if children}
+    {@render children()}
+  {/if}
 </PageTransition>

 <Footer />
@@ -131,34 +133,4 @@
 {/if}

 <style lang="scss" global>
-  body {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-
-    font-family: "Noto Sans Mono", monospace;
-    color: var(--md-sys-color-on-background);
-
-    background: var(--md-sys-color-background);
-  }
-
-  main {
-    contain: strict;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    align-items: center;
-    padding-inline: 16px;
-  }
-
-  h1 {
-    margin-block-start: 0;
-    font-size: 4rem;
-    font-weight: 700;
-    color: var(--md-sys-color-secondary);
-  }
 </style>
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
--- a/src/routes/(app)/+page.ts
+++ b/src/routes/(app)/+page.ts
@@ -1,6 +0,0 @@
-import { redirect } from "@sveltejs/kit";
-import type { PageLoad } from "./$types";
-
-export const load = (() => {
-  redirect(302, "/config/");
-}) satisfies PageLoad;
--- a/src/routes/(app)/BackupPopup.svelte
+++ b/src/routes/(app)/BackupPopup.svelte
@@ -25,25 +25,25 @@
  </p>
  <fieldset>
    <legend>{$LL.backup.INDIVIDUAL()}</legend>
-    <button on:click={() => downloadFile(createChordBackup())}>
+    <button onclick={() => downloadFile(createChordBackup())}>
      <span class="icon">piano</span>
      {$LL.configure.chords.TITLE()}
    </button>
-    <button on:click={() => downloadFile(createLayoutBackup())}>
+    <button onclick={() => downloadFile(createLayoutBackup())}>
      <span class="icon">keyboard</span>
      {$LL.configure.layout.TITLE()}
    </button>
-    <button on:click={() => downloadFile(createSettingsBackup())}>
+    <button onclick={() => downloadFile(createSettingsBackup())}>
      <span class="icon">settings</span>
      {$LL.configure.settings.TITLE()}
    </button>
  </fieldset>
  <div class="save">
-    <button class="primary" on:click={downloadBackup}
+    <button class="primary" onclick={downloadBackup}
      ><span class="icon">download</span>{$LL.backup.DOWNLOAD()}</button
    >
    <label class="button"
-      ><input on:input={restoreBackup} type="file" /><span class="icon"
+      ><input oninput={restoreBackup} type="file" /><span class="icon"
        >settings_backup_restore</span
      >{$LL.backup.RESTORE()}</label
    >
--- a/src/routes/(app)/ConfigTabs.svelte
+++ b/src/routes/(app)/ConfigTabs.svelte
@@ -1,8 +1,11 @@
-<script>
+<script lang="ts">
  import { page } from "$app/stores";
  import LL from "$i18n/i18n-svelte";
+  import type { Snippet } from "svelte";

-  $: paths = [
+  let { children }: { children?: Snippet } = $props();
+
+  let paths = $derived([
    {
      href: "/config/chords/",
      title: $LL.configure.chords.TITLE(),
@@ -18,7 +21,7 @@
      title: $LL.configure.settings.TITLE(),
      icon: "settings",
    },
-  ];
+  ]);
 </script>

 <nav>
@@ -30,7 +33,9 @@
  {/each}
 </nav>

-<slot />
+{#if children}
+  {@render children()}
+{/if}

 <style lang="scss">
  nav {
--- a/src/routes/(app)/ConnectionPopup.svelte
+++ b/src/routes/(app)/ConnectionPopup.svelte
@@ -34,13 +34,9 @@
    }
  }

-  let rebootInfo = false;
-  let terminal = false;
-  let powerDialog = false;
-
-  $: if ($serialPort) {
-    rebootInfo = false;
-  }
+  let rebootInfo = $derived($serialPort !== undefined);
+  let terminal = $state(false);
+  let powerDialog = $state(false);
 </script>

 <section>
@@ -117,7 +113,7 @@
      {#if $serialPort}
        <button
          class="secondary"
-          on:click={() => {
+          onclick={() => {
            $serialPort?.forget();
            $serialPort = undefined;
          }}
@@ -125,7 +121,7 @@
          >{$LL.deviceManager.DISCONNECT()}</button
        >
      {:else}
-        <button class="error" on:click={connect}
+        <button class="error" onclick={connect}
          ><span class="icon">usb</span>{$LL.deviceManager.CONNECT()}</button
        >
      {/if}
@@ -135,13 +131,13 @@
          title={$LL.deviceManager.TERMINAL()}
          class="icon"
          class:disabled={$serialPort === undefined}
-          on:click={() => (terminal = !terminal)}>terminal</a
+          onclick={() => (terminal = !terminal)}>terminal</a
        >
        <button
          class="icon"
          title={$LL.deviceManager.bootMenu.TITLE()}
          disabled={$serialPort === undefined}
-          on:click={() => (powerDialog = !powerDialog)}>settings_power</button
+          onclick={() => (powerDialog = !powerDialog)}>settings_power</button
        >
      </div>
    </div>
@@ -151,18 +147,18 @@
        role="button"
        tabindex="-1"
        transition:fade={{ duration: 250 }}
-        on:click={() => (powerDialog = !powerDialog)}
-        on:keypress={(event) => {
+        onclick={() => (powerDialog = !powerDialog)}
+        onkeypress={(event) => {
          if (event.key === "Enter") powerDialog = !powerDialog;
        }}
-      />
+      ></div>
      <dialog open transition:slide={{ duration: 250 }}>
        <h3>{$LL.deviceManager.bootMenu.TITLE()}</h3>
-        <button on:click={reboot}
+        <button onclick={reboot}
          ><span class="icon">restart_alt</span
          >{$LL.deviceManager.bootMenu.REBOOT()}</button
        >
-        <button on:click={bootloader}
+        <button onclick={bootloader}
          ><span class="icon">rule_settings</span
          >{$LL.deviceManager.bootMenu.BOOTLOADER()}</button
        >
--- a/src/routes/(app)/EditActions.svelte
+++ b/src/routes/(app)/EditActions.svelte
@@ -25,7 +25,7 @@
    if (event.shiftKey) {
      changes.set([]);
    } else {
-      redoQueue = [$changes.pop()!, ...redoQueue];
+      redoQueue.unshift($changes.pop()!);
      changes.update((it) => it);
    }
  }
@@ -39,7 +39,7 @@
      });
    }
  }
-  let redoQueue: Change[] = [];
+  let redoQueue: Change[] = $state([]);

  async function save() {
    try {
@@ -138,19 +138,19 @@
  use:action={{ title: $LL.saveActions.UNDO(), shortcut: "ctrl+z" }}
  class="icon"
  disabled={$changes.length === 0}
-  on:click={undo}>undo</button
+  onclick={undo}>undo</button
 >
 <button
  use:action={{ title: $LL.saveActions.REDO(), shortcut: "ctrl+y" }}
  class="icon"
  disabled={redoQueue.length === 0}
-  on:click={redo}>redo</button
+  onclick={redo}>redo</button
 >
 {#if $changes.length !== 0}
  <button
    transition:fly={{ x: 10 }}
    use:action={{ title: $LL.saveActions.SAVE(), shortcut: "ctrl+shift+s" }}
-    on:click={save}
+    onclick={save}
    class="click-me"
    ><span class="icon">save</span>{$LL.saveActions.SAVE()}</button
  >
--- a/src/routes/(app)/Footer.svelte
+++ b/src/routes/(app)/Footer.svelte
@@ -10,14 +10,16 @@
  import SyncOverlay from "./SyncOverlay.svelte";
  import { serialPort } from "$lib/serial/connection";

-  let locale =
-    (browser && (localStorage.getItem("locale") as Locales)) || detectLocale();
-  $: if (browser)
-    (async () => {
-      localStorage.setItem("locale", locale);
-      await loadLocaleAsync(locale);
+  let locale = $state(
+    (browser && (localStorage.getItem("locale") as Locales)) || detectLocale(),
+  );
+  $effect(() => {
+    if (!browser) return;
+    localStorage.setItem("locale", locale);
+    loadLocaleAsync(locale).then(() => {
      setLocale(locale);
-    })();
+    });
+  });

  function switchTheme() {
    const mode = $theme.mode === "light" ? "dark" : "light";
@@ -37,7 +39,6 @@
 <footer>
  <ul>
    <li>
-      <!-- svelte-ignore not-defined -->
      <a
        href={import.meta.env.VITE_HOMEPAGE_URL}
        rel="noreferrer"
@@ -86,7 +87,7 @@
        <button
          use:action={{ title: $LL.profile.theme.DARK_MODE() }}
          class="icon"
-          on:click={switchTheme}
+          onclick={switchTheme}
        >
          dark_mode
        </button>
@@ -94,25 +95,27 @@
        <button
          use:action={{ title: $LL.profile.theme.LIGHT_MODE() }}
          class="icon"
-          on:click={switchTheme}
+          onclick={switchTheme}
        >
          light_mode
        </button>
      {/if}
    </li>
    <li>
-      <button
+      <div
+        role="button"
        class="icon"
        use:action={{ title: $LL.profile.LANGUAGE() }}
-        on:click={() => languageSelect.click()}
-        >translate
+        onclick={() => languageSelect.click()}
+      >
+        translate

        <select bind:value={locale} bind:this={languageSelect}>
          {#each locales as code}
            <option value={code}>{code}</option>
          {/each}
        </select>
-      </button>
+      </div>
    </li>
  </ul>
 </footer>
--- a/src/routes/(app)/Navigation.svelte
+++ b/src/routes/(app)/Navigation.svelte
@@ -35,15 +35,15 @@
        use:action={{ title: $LL.share.TITLE() }}
        transition:fly={{ x: -8 }}
        class="icon"
-        on:click={triggerShare}>share</button
+        onclick={triggerShare}>share</button
      >
      <button
        use:action={{ title: $LL.print.TITLE() }}
        transition:fly={{ x: -8 }}
        class="icon"
-        on:click={() => print()}>print</button
+        onclick={() => print()}>print</button
      >
-      <div transition:slide class="separator" />
+      <div transition:slide class="separator"></div>
    {/if}
    {#if import.meta.env.TAURI_FAMILY === undefined}
      {#await import("$lib/components/PwaStatus.svelte") then { default: PwaStatus }}
--- a/src/routes/(app)/PageTransition.svelte
+++ b/src/routes/(app)/PageTransition.svelte
@@ -2,13 +2,16 @@
  import { fly } from "svelte/transition";
  import { afterNavigate, beforeNavigate } from "$app/navigation";
  import { expoIn, expoOut } from "svelte/easing";
+  import type { Snippet } from "svelte";

-  let inDirection = 0;
-  let outDirection = 0;
-  let outroEnd: undefined | (() => void) = undefined;
+  let { children }: { children: Snippet } = $props();
+
+  let inDirection = $state(0);
+  let outDirection = $state(0);
+  let outroEnd: undefined | (() => void) = $state(undefined);
  let animationDone: Promise<void>;

-  let isNavigating = false;
+  let isNavigating = $state(false);

  const routeOrder = [
    "/config/chords/",
@@ -48,8 +51,8 @@
  <main
    in:fly={{ x: inDirection * 24, duration: 150, easing: expoOut }}
    out:fly={{ x: outDirection * 24, duration: 150, easing: expoIn }}
-    on:outroend={outroEnd}
+    onoutroend={outroEnd}
  >
-    <slot />
+    {@render children()}
  </main>
 {/if}
--- a/src/routes/(app)/SyncOverlay.svelte
+++ b/src/routes/(app)/SyncOverlay.svelte
@@ -23,7 +23,7 @@
      {/if}
    </div>
  {:else if $serialPort}
-    <button transition:slide on:click={sync}
+    <button transition:slide onclick={sync}
      ><span class="icon">refresh</span>{$LL.sync.RELOAD()}</button
    >
  {/if}
--- a/src/routes/(app)/config/chords/+page.svelte
+++ b/src/routes/(app)/config/chords/+page.svelte
@@ -21,7 +21,7 @@
  let resizeObserver: ResizeObserver;

  let abortIndexing: (() => void) | undefined;
-  let progress = 0;
+  let progress = $state(0);

  onMount(() => {
    resizeObserver = new ResizeObserver(() => {
@@ -37,11 +37,11 @@

  let index = new FlexSearch.Index();
  let searchIndex = writable<FlexSearch.Index | undefined>(undefined);
-  $: {
+  $effect(() => {
    abortIndexing?.();
    progress = 0;
    buildIndex($chords, $osLayout).then(searchIndex.set);
-  }
+  });

  function encodeChord(chord: ChordInfo, osLayout: Map<string, string>) {
    const plainPhrase: string[] = [""];
@@ -210,7 +210,7 @@

  setContext("cursor-crossfade", crossfade({}));

-  let page = 0;
+  let page = $state(0);
 </script>

 <svelte:head>
@@ -222,7 +222,7 @@
  <input
    type="search"
    placeholder={$LL.configure.chords.search.PLACEHOLDER(progress + 1)}
-    on:input={(event) => $searchIndex && search($searchIndex, event)}
+    oninput={(event) => $searchIndex && search($searchIndex, event)}
    class:loading={progress !== $chords.length - 1}
  />
  <div class="paginator">
@@ -234,12 +234,12 @@
  </div>
  <button
    class="icon"
-    on:click={() => (page = Math.max(page - 1, 0))}
+    onclick={() => (page = Math.max(page - 1, 0))}
    use:action={{ shortcut: "ctrl+left" }}>navigate_before</button
  >
  <button
    class="icon"
-    on:click={() => (page = Math.min(page + 1, $lastPage))}
+    onclick={() => (page = Math.min(page + 1, $lastPage))}
    use:action={{ shortcut: "ctrl+right" }}>navigate_next</button
  >
 </div>
@@ -250,22 +250,24 @@
    <div class="results">
      <table transition:fly={{ y: 48, easing: expoOut }}>
        {#if $lastPage !== -1}
-          {#if page === 0}
-            <tr
-              ><th class="new-chord"
-                ><ChordActionEdit
-                  on:submit={({ detail }) => insertChord(detail)}
-                /></th
-              ><td /><td /></tr
-            >
-          {/if}
-          {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
-            {#if chord}
-              <tr>
-                <ChordEdit {chord} on:duplicate={() => (page = 0)} />
-              </tr>
+          <tbody>
+            {#if page === 0}
+              <tr
+                ><th class="new-chord"
+                  ><ChordActionEdit
+                    onsubmit={(action) => insertChord(action)}
+                  /></th
+                ><td></td><td></td></tr
+              >
            {/if}
-          {/each}
+            {#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
+              {#if chord}
+                <tr>
+                  <ChordEdit {chord} onduplicate={() => (page = 0)} />
+                </tr>
+              {/if}
+            {/each}</tbody
+          >
        {:else}
          <caption>{$LL.configure.chords.search.NO_RESULTS()}</caption>
        {/if}
@@ -277,7 +279,7 @@
          "\n\nDid you know? " +
          randomTips[Math.floor(randomTips.length * Math.random())]}
      ></textarea>
-      <button on:click={downloadVocabulary}
+      <button onclick={downloadVocabulary}
        ><span class="icon">download</span>
        {$LL.configure.chords.VOCABULARY()}</button
      >
--- a/src/routes/(app)/config/chords/ChordActionEdit.svelte
+++ b/src/routes/(app)/config/chords/ChordActionEdit.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
  import type { ChordInfo } from "$lib/undo-redo";
+  import { SvelteSet } from "svelte/reactivity";
  import { changes, chordHashes, ChangeType } from "$lib/undo-redo";
-  import { createEventDispatcher } from "svelte";
  import LL from "$i18n/i18n-svelte";
  import ActionString from "$lib/components/ActionString.svelte";
  import { selectAction } from "./action-selector";
  import { serialPort } from "$lib/serial/connection";
  import { get } from "svelte/store";
  import { inputToAction } from "./input-converter";
-  import { hashChord } from "$lib/serial/chord";
+  import { hashChord, type Chord } from "$lib/serial/chord";

-  export let chord: ChordInfo | undefined = undefined;
+  let {
+    chord = undefined,
+    onsubmit,
+  }: { chord?: ChordInfo; onsubmit: (actions: number[]) => void } = $props();

-  const dispatch = createEventDispatcher();
-
-  let pressedKeys = new Set<number>();
-  let editing = false;
+  let pressedKeys = new SvelteSet<number>();
+  let editing = $state(false);

  function compare(a: number, b: number) {
    return a - b;
@@ -37,7 +38,7 @@
  }

  function edit() {
-    pressedKeys = new Set();
+    pressedKeys.clear();
    editing = true;
  }

@@ -52,14 +53,13 @@
      return;
    }
    pressedKeys.add(input);
-    pressedKeys = pressedKeys;
  }

  function keyup() {
    if (!editing) return;
    editing = false;
    if (pressedKeys.size < 1) return;
-    if (!chord) return dispatch("submit", makeChordInput(...pressedKeys));
+    if (!chord) return onsubmit(makeChordInput(...pressedKeys));
    changes.update((changes) => {
      changes.push({
        type: ChangeType.Chord,
@@ -73,6 +73,7 @@
  }

  function addSpecial(event: MouseEvent) {
+    event.stopPropagation();
    selectAction(event, (action) => {
      changes.update((changes) => {
        changes.push({
@@ -88,7 +89,7 @@

  function* resolveCompound(chord?: ChordInfo) {
    if (!chord) return;
-    let current = chord;
+    let current: Chord = chord;
    for (let i = 0; i < 10; i++) {
      if (current.actions[3] !== 0) return;
      const compound = current.actions
@@ -106,10 +107,10 @@
    return;
  }

-  $: chordActions = chord?.actions
-    .slice(chord.actions.lastIndexOf(0) + 1)
-    .toSorted(compare);
-  $: compoundInputs = [...resolveCompound(chord)].reverse();
+  let chordActions = $derived(
+    chord?.actions.slice(chord.actions.lastIndexOf(0) + 1).toSorted(compare),
+  );
+  let compoundInputs = $derived([...resolveCompound(chord)].reverse());
 </script>

 <button
@@ -120,10 +121,10 @@
    (chordActions.length < 2 ||
      chordActions.some((it, i) => chordActions[i] !== it))}
  class="chord"
-  on:click={edit}
-  on:keydown={keydown}
-  on:keyup={keyup}
-  on:blur={keyup}
+  onclick={edit}
+  onkeydown={keydown}
+  onkeyup={keyup}
+  onblur={keyup}
 >
  {#if editing && pressedKeys.size === 0}
    <span>{$LL.configure.chords.HOLD_KEYS()}</span>
@@ -143,12 +144,10 @@
  {/if}
  <ActionString
    display="keys"
-    actions={editing ? [...pressedKeys].sort(compare) : chordActions ?? []}
+    actions={editing ? [...pressedKeys].sort(compare) : (chordActions ?? [])}
  />
  <sup>•</sup>
-  <button class="icon add" on:click|stopPropagation={addSpecial}
-    >add_circle</button
-  >
+  <div role="button" class="icon add" onclick={addSpecial}>add_circle</div>
 </button>

 <style lang="scss">
--- a/src/routes/(app)/config/chords/ChordEdit.svelte
+++ b/src/routes/(app)/config/chords/ChordEdit.svelte
@@ -8,11 +8,10 @@
  import { charaFileToUriComponent } from "$lib/share/share-url";
  import SharePopup from "../SharePopup.svelte";
  import tippy from "tippy.js";
-  import { createEventDispatcher } from "svelte";
+  import { mount, unmount } from "svelte";

-  export let chord: ChordInfo;
-
-  const dispatch = createEventDispatcher<{ duplicate: void }>();
+  let { chord, onduplicate }: { chord: ChordInfo; onduplicate: () => void } =
+    $props();

  function remove() {
    changes.update((changes) => {
@@ -47,7 +46,7 @@
    id.splice(id.indexOf(0), 1);
    id.push(0);
    while ($chords.some((it) => JSON.stringify(it.id) === JSON.stringify(id))) {
-      id[id.length - 1]++;
+      id[id.length - 1]!++;
    }

    changes.update((changes) => {
@@ -60,7 +59,7 @@
      return changes;
    });

-    dispatch("duplicate");
+    onduplicate();
  }

  async function share(event: Event) {
@@ -74,48 +73,48 @@
      }),
    );
    await navigator.clipboard.writeText(url.toString());
-    let shareComponent: SharePopup;
+    let shareComponent = {};
    tippy(event.target as HTMLElement, {
      onCreate(instance) {
        const target = instance.popper.querySelector(".tippy-content")!;
-        shareComponent = new SharePopup({ target });
+        shareComponent = mount(SharePopup, { target });
      },
      onHidden(instance) {
        instance.destroy();
      },
      onDestroy(_instance) {
-        shareComponent.$destroy();
+        unmount(shareComponent);
      },
    }).show();
  }
 </script>

 <th>
-  <ChordActionEdit {chord} />
+  <ChordActionEdit {chord} onsubmit={() => {}} />
 </th>
 <td>
  <ChordPhraseEdit {chord} />
 </td>
 <td class="table-buttons">
  {#if !chord.deleted}
-    <button transition:slide class="icon compact" on:click={remove}
+    <button transition:slide class="icon compact" onclick={remove}
      >delete</button
    >
  {:else}
-    <button transition:slide class="icon compact" on:click={restore}
+    <button transition:slide class="icon compact" onclick={restore}
      >restore_from_trash</button
    >
  {/if}
-  <button disabled={chord.deleted} class="icon compact" on:click={duplicate}
+  <button disabled={chord.deleted} class="icon compact" onclick={duplicate}
    >content_copy</button
  >
  <button
    class="icon compact"
    class:disabled={chord.isApplied}
-    on:click={restore}>undo</button
+    onclick={restore}>undo</button
  >
-  <div class="separator" />
-  <button class="icon compact" on:click={share}>share</button>
+  <div class="separator"></div>
+  <button class="icon compact" onclick={share}>share</button>
 </td>

 <style lang="scss">
--- a/src/routes/(app)/config/chords/ChordPhraseEdit.svelte
+++ b/src/routes/(app)/config/chords/ChordPhraseEdit.svelte
@@ -9,11 +9,11 @@
  import { serialPort } from "$lib/serial/connection";
  import { get } from "svelte/store";

-  export let chord: ChordInfo;
+  let { chord }: { chord: ChordInfo } = $props();

  onMount(() => {
    if (chord.phrase.length === 0) {
-      box.focus();
+      box?.focus();
    }
  });

@@ -40,6 +40,7 @@
  }

  function moveCursor(to: number) {
+    if (!box) return;
    cursorPosition = Math.max(0, Math.min(to, chord.phrase.length));
    const item = box.children.item(cursorPosition) as HTMLElement;
    cursorOffset = item.offsetLeft + item.offsetWidth;
@@ -71,7 +72,7 @@
  }

  function clickCursor(event: MouseEvent) {
-    if (event.target === button) return;
+    if (box === undefined || event.target === button) return;
    const distance = (event as unknown as { layerX: number }).layerX;

    let i = 0;
@@ -93,37 +94,36 @@
        insertAction(cursorPosition, action);
        tick().then(() => moveCursor(cursorPosition + 1));
      },
-      () => box.focus(),
+      () => box?.focus(),
    );
  }

-  let button: HTMLButtonElement;
-  let box: HTMLDivElement;
+  let button: HTMLButtonElement | undefined = $state();
+  let box: HTMLDivElement | undefined = $state();
  let cursorPosition = 0;
-  let cursorOffset = 0;
+  let cursorOffset = $state(0);

-  let hasFocus = false;
+  let hasFocus = $state(false);
 </script>

-<!-- svelte-ignore a11y-autofocus -->
 <div
-  on:keydown={keypress}
-  on:mousedown={clickCursor}
+  onkeydown={keypress}
+  onmousedown={clickCursor}
  role="textbox"
  tabindex="0"
  bind:this={box}
  class:edited={!chord.deleted && chord.phraseChanged}
-  on:focusin={() => (hasFocus = true)}
-  on:focusout={(event) => {
+  onfocusin={() => (hasFocus = true)}
+  onfocusout={(event) => {
    if (event.relatedTarget !== button) hasFocus = false;
  }}
 >
  {#if hasFocus}
    <div transition:scale class="cursor" style:translate="{cursorOffset}px 0">
-      <button class="icon" bind:this={button} on:click={addSpecial}>add</button>
+      <button class="icon" bind:this={button} onclick={addSpecial}>add</button>
    </div>
  {:else}
-    <div />
+    <div></div>
    <!-- placeholder for cursor placement -->
  {/if}
  <ActionString actions={chord.phrase} />
--- a/src/routes/(app)/config/chords/action-selector.ts
+++ b/src/routes/(app)/config/chords/action-selector.ts
@@ -1,12 +1,21 @@
 import ActionSelector from "$lib/components/layout/ActionSelector.svelte";
-import { tick } from "svelte";
+import { mount, unmount, tick } from "svelte";

 export function selectAction(
  event: MouseEvent | KeyboardEvent,
  select: (action: number) => void,
  dismissed?: () => void,
 ) {
-  const component = new ActionSelector({ target: document.body });
+  const component = mount(ActionSelector, {
+    target: document.body,
+    props: {
+      onclose: () => closed(),
+      onselect: (action: number) => {
+        select(action);
+        closed();
+      },
+    },
+  });
  const dialog = document.querySelector("dialog > div") as HTMLDivElement;
  const backdrop = document.querySelector("dialog") as HTMLDialogElement;
  const dialogRect = dialog.getBoundingClientRect();
@@ -40,14 +49,8 @@ export function selectAction(

    await dialogAnimation.finished;

-    component.$destroy();
+    unmount(component);
    await tick();
    dismissed?.();
  }
-
-  component.$on("close", closed);
-  component.$on("select", ({ detail }) => {
-    select(detail);
-    closed();
-  });
 }
--- a/src/routes/(app)/config/layout/+page.svelte
+++ b/src/routes/(app)/config/layout/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { share } from "$lib/share";
  import tippy from "tippy.js";
-  import { setContext } from "svelte";
+  import { mount, setContext, unmount } from "svelte";
  import Layout from "$lib/components/layout/Layout.svelte";
  import { charaFileToUriComponent } from "$lib/share/share-url";
  import SharePopup from "../SharePopup.svelte";
@@ -25,17 +25,17 @@
      }),
    );
    await navigator.clipboard.writeText(url.toString());
-    let shareComponent: SharePopup;
+    let shareComponent: {};
    tippy(event.target as HTMLElement, {
      onCreate(instance) {
        const target = instance.popper.querySelector(".tippy-content")!;
-        shareComponent = new SharePopup({ target });
+        shareComponent = mount(SharePopup, { target });
      },
      onHidden(instance) {
        instance.destroy();
      },
      onDestroy() {
-        shareComponent.$destroy();
+        unmount(shareComponent);
      },
    }).show();
  }
--- a/src/routes/(app)/config/settings/+page.svelte
+++ b/src/routes/(app)/config/settings/+page.svelte
@@ -229,12 +229,6 @@
          />ms</span
        ></label
      >
-      <label
-        >Compound Chording<input
-          type="checkbox"
-          use:setting={{ id: 0x61 }}
-        /></label
-      >
    </fieldset>

    <fieldset>
--- a/src/routes/(app)/config/settings/ConfirmChallenge.svelte
+++ b/src/routes/(app)/config/settings/ConfirmChallenge.svelte
@@ -1,20 +1,18 @@
 <script lang="ts">
  import { serialPort } from "$lib/serial/connection";
-  import { createEventDispatcher } from "svelte";

-  export let challenge: string;
+  let { challenge, onconfirm }: { challenge: string; onconfirm: () => void } =
+    $props();

-  let challengeInput = "";
-  $: challengeString = `${challenge} ${$serialPort!.device}`;
-  $: isValid = challengeInput === challengeString;
-
-  const dispatch = createEventDispatcher();
+  let challengeInput = $state("");
+  let challengeString = $derived(`${challenge} ${$serialPort!.device}`);
+  let isValid = $derived(challengeInput === challengeString);
 </script>

 <h3>Type the following to confirm the action</h3>

 <p>{challengeString}</p>
-<!-- svelte-ignore a11y-autofocus -->
+<!-- svelte-ignore a11y_autofocus -->
 <input
  autofocus
  type="text"
@@ -22,9 +20,7 @@
  placeholder={challengeString}
 />

-<button disabled={!isValid} on:click={() => dispatch("confirm")}
-  >Confirm {challenge}</button
->
+<button disabled={!isValid} onclick={onconfirm}>Confirm {challenge}</button>

 <style lang="scss">
  input[type="text"] {
--- a/src/routes/(app)/plugin/+page.svelte
+++ b/src/routes/(app)/plugin/+page.svelte
@@ -155,28 +155,30 @@
      doc: examplePlugin,
    });
  });
-  $: channels = $serialPort
-    ? ({
-        getVersion: async (..._args: unknown[]) => $serialPort.version,
-        getDevice: async (..._args: unknown[]) => $serialPort.device,
-        commit: async (..._args: unknown[]) => {
-          if (
-            confirm(
-              "Perform a commit? Settings are already applied until the next reboot.\n\n" +
-                "Excessive commits can lead to premature breakdowns, as the settings storage is only rated for 10,000-25,000 commits.\n\n" +
-                "Click OK to perform the commit anyways.",
-            )
-          ) {
-            return $serialPort.commit();
-          }
-        },
-        ...Object.fromEntries(
-          charaMethods.map(
-            (it) => [it, $serialPort[it].bind($serialPort)] as const,
+  let channels = $derived(
+    $serialPort
+      ? ({
+          getVersion: async (..._args: unknown[]) => $serialPort.version,
+          getDevice: async (..._args: unknown[]) => $serialPort.device,
+          commit: async (..._args: unknown[]) => {
+            if (
+              confirm(
+                "Perform a commit? Settings are already applied until the next reboot.\n\n" +
+                  "Excessive commits can lead to premature breakdowns, as the settings storage is only rated for 10,000-25,000 commits.\n\n" +
+                  "Click OK to perform the commit anyways.",
+              )
+            ) {
+              return $serialPort.commit();
+            }
+          },
+          ...Object.fromEntries(
+            charaMethods.map(
+              (it) => [it, $serialPort[it].bind($serialPort)] as const,
+            ),
          ),
-        ),
-      } satisfies Record<string, Function>)
-    : ({} as any);
+        } satisfies Record<string, Function>)
+      : ({} as any),
+  );

  async function onMessage(event: MessageEvent) {
    if (event.origin !== "null" || event.source !== frame.contentWindow) return;
@@ -205,12 +207,12 @@
  let editorView: EditorView;
 </script>

-<svelte:window on:message={onMessage} />
+<svelte:window onmessage={onMessage} />
 <section>
-  <button on:click={runPlugin}
+  <button onclick={runPlugin}
    ><span class="icon">play_arrow</span>{$LL.plugin.editor.RUN()}</button
  >
-  <div class="editor-root" bind:this={editor} />
+  <div class="editor-root" bind:this={editor}></div>
 </section>

 <iframe
@@ -219,7 +221,7 @@
  bind:this={frame}
  src="/sandbox/"
  sandbox="allow-scripts"
-/>
+></iframe>

 <style lang="scss">
  section {