Switch to runes and simplify

Author: zerebos

frontend/eslint.config.js

@@ -21,7 +21,7 @@ export default ts.config(
         }
     },
     {
-        files: ["**/*.svelte"],
+        files: ["**/*.svelte", "**/*.svelte.ts"],
 
         languageOptions: {
             parserOptions: {

frontend/package.json

@@ -7,12 +7,12 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "eslint ."
+    "dev": "bun run --bun vite dev",
+    "build": "bun run --bun vite build",
+    "preview": "bun run --bun vite preview",
+    "check": "bun run --bun svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "bun run --bun svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "bun run --bun eslint ."
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.8",

frontend/package.json.md5

@@ -1 +1 @@
-6e58a5b802452375c26c96a98fc755d5
+c2d828eed2c9ae8c618e56421f60c145

frontend/src/lib/actions/debug.ts

@@ -1,6 +1,5 @@
 <script lang="ts">
-    // NOTES: preventing the default click event behavior is needed to stop the change event being fired twice when the spacebar is pressed.
-    import {handleKeyboardToggle, checkItem} from "../stores/controls";
+    import {handleKeyboardToggle} from "$lib/utils/handlers";
 
 
     interface Props {
@@ -10,23 +9,16 @@
     }
 
     // eslint-disable-next-line prefer-const
-    let {checked, label, onchange}: Props = $props();
+    let {checked = $bindable(), label, onchange}: Props = $props();
 
     let checkbox: HTMLInputElement;
-
-    function handleKeyDown(e: KeyboardEvent) {
-        if (e.key === " ") {
-            e.preventDefault();
-            checkItem(checkbox);
-        }
-    }
 </script>
 
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <label class="checkbox-container" onkeypress={(e: KeyboardEvent) => handleKeyboardToggle(e, checkbox)}>
     <div class="checkbox-inner">
-        <input class="checkbox" type="checkbox" bind:this={checkbox} bind:checked {onchange} onkeydown={handleKeyDown} />
+        <input class="checkbox" type="checkbox" bind:this={checkbox} bind:checked {onchange} onkeypress={(e: KeyboardEvent) => handleKeyboardToggle(e, checkbox)} />
         <svg class="checkbox-glyph" viewBox="0 0 24 24">
             <path d="M0.73, 11.91 8.1,19.28 22.79,4.59" fill="none" />
         </svg>

frontend/src/lib/actions/log.ts

@@ -2,42 +2,66 @@
     import Button from "./Button.svelte";
     import ButtonGroup from "./ButtonGroup.svelte";
     import SocialLinks from "./SocialLinks.svelte";
-    import {canGoForward, canGoBack, nextPage, state} from "../stores/navigation";
-    import quit from "../actions/quit";
-    import {goto, onNavigate} from "$app/navigation";
+    import {goto} from "$app/navigation";
     import {page} from "$app/state";
     import {base} from "$app/paths";
+    import app from "$lib/stores/state.svelte";
+    import {NavDirection, type NavigationState} from "$lib/types";
 
+    const {
+        next, previous,
+        nextLabel = "Next",
+        previousLabel = "Back",
+        canGoNext = true,
+        canGoPrevious = true,
+        nextAction, previousAction
+    }: NavigationState = $derived(app.navigation);
+
+    $effect(() => {
+        // eslint-disable-next-line no-console
+        console.log({
+            next,
+            previous,
+            nextLabel,
+            previousLabel,
+            canGoNext,
+            canGoPrevious,
+            nextAction,
+            previousAction
+        });
+    });
+
+
+    const nextDisabled: boolean = $derived.by(() => {
+        if (!canGoNext) return true;
+        if (!nextAction && !next) return true;
+        return false;
+    });
+
+    const previousDisabled: boolean = $derived.by(() => {
+        if (!canGoPrevious) return true;
+        if (!previousAction && !previous) return true;
+        return false;
+    });
 
-    let nextButtonContent = "Next";
 
     async function goToNext() {
-        state.direction = 1;
-        if ($nextPage) goto(`${base}${$nextPage}`, page.state);
-        else await quit();
+        app.navigation.direction = NavDirection.FORWARDS;
+        if (typeof nextAction === "function") return nextAction();
+        if (next) goto(`${base}${next}`, page.state);
     }
 
     function goBack() {
-        state.direction = -1;
-        window.history.back();
+        app.navigation.direction = NavDirection.BACKWARDS;
+        if (typeof previousAction === "function") return previousAction();
+        if (previous) goto(`${base}${previous}`, page.state);
     }
 
-    onNavigate(() => {
-        if (window.location.pathname.startsWith("/actions/setup/")) {
-            const action = window.location.pathname.slice(15);
-            const actionText = action[0].toUpperCase() + action.slice(1);
-            nextButtonContent = actionText;
-        }
-        else {
-            nextButtonContent = "Next";
-        }
-    });
-
     function navigatePage(event: KeyboardEvent) {
-        if ((event.key === "ArrowRight" && event.ctrlKey) && $canGoForward) {
+        if ((event.key === "ArrowRight" && event.ctrlKey) && canGoNext) {
             goToNext();
         }
-        else if ((event.key === "ArrowLeft" && event.ctrlKey) && $canGoBack) {
+        else if ((event.key === "ArrowLeft" && event.ctrlKey) && canGoPrevious) {
             goBack();
         }
     }
@@ -49,8 +73,12 @@
 <footer class="install-footer">
     <SocialLinks />
     <ButtonGroup>
-        <Button style="secondary" disabled={!$canGoBack} onclick={goBack}>Back</Button>
-        <Button style="primary" disabled={!$canGoForward} onclick={goToNext}>{#if $nextPage}{nextButtonContent}{:else}Close{/if}</Button>
+        <Button style="secondary" disabled={previousDisabled} onclick={goBack}>
+            {previousLabel}
+        </Button>
+        <Button style="primary" disabled={nextDisabled} onclick={goToNext}>
+            {nextLabel}
+        </Button>
     </ButtonGroup>
 </footer>
 

frontend/src/lib/components/Checkbox.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Button from "./Button.svelte";
-    import {handleKeyboardToggle} from "../stores/controls";
+    import {handleKeyboardToggle} from "$lib/utils/handlers";
     import type {Snippet} from "svelte";
 
     // export let value: string;
@@ -20,14 +20,15 @@
         children?: Snippet;
     }
 
-    const {children, icon, description, disabled = false, checked = false, onclick, onchange}: Props = $props();
+    // eslint-disable-next-line prefer-const
+    let {children, icon, description, disabled = false, checked = $bindable(), onclick, onchange}: Props = $props();
 
     let checkbox: HTMLInputElement;
 
 </script>
 
 <label class="check-container">
-    <input bind:this={checkbox} type="checkbox" hidden {disabled} {checked} {onchange} />
+    <input bind:this={checkbox} bind:checked type="checkbox" hidden {disabled} {onchange} />
     <div onkeypress={(e: KeyboardEvent) => handleKeyboardToggle(e, checkbox)} tabindex="0" class="check-item" class:disabled role="listbox">
         <div class="icon">
             {@render icon?.()}

frontend/src/lib/components/Footer.svelte

@@ -2,15 +2,31 @@
     import type {Snippet} from "svelte";
     import PageHeader from "./PageHeader.svelte";
     import page from "$lib/transitions/page";
+    import {createNavState, type NavigationState} from "$lib/types";
+    import app from "$lib/stores/state.svelte";
 
 
-    interface Props {
+    interface Props extends Partial<NavigationState> {
         children: Snippet;
         icon?: Snippet;
         title?: string;
     }
 
-    const {children, icon, title = "BetterDiscord"}: Props = $props();
+    // TODO: remove when the PR lands in eslint-plugin-svelte
+    // the below is not actually an issue with our code
+    // eslint-disable-next-line svelte/valid-compile
+    const {children, icon, title = "BetterDiscord", ...footer}: Props = $props();
+
+
+    // Allow page users to easily setup the navigation state
+    $effect(() => {
+        const nav: Omit<NavigationState, "direction"> = createNavState(footer);
+        for (const n in nav) {
+            const key = n as keyof Omit<NavigationState, "direction">;
+            // @ts-expect-error it doesn't make sense
+            app.navigation[key] = nav[key];
+        }
+    });
 </script>
 
 

frontend/src/lib/components/Multiselect.svelte

@@ -12,6 +12,7 @@
     let {group = $bindable(), value, onchange, children}: Props = $props();
 </script>
 
+
 <label class="radio-container">
     <input type="radio" hidden bind:group {onchange} {value} />
     <div tabindex="-1" class="radio-item">
@@ -21,6 +22,7 @@
     </div>
 </label>
 
+
 <style>
     .radio-item {
         display: flex;