event rewrite

Author: Miodec

frontend/src/ts/components/layout/header/AccountXpBar.tsx

@@ -1,7 +1,6 @@
 import { XpBreakdown } from "@monkeytype/schemas/results";
 import { isSafeNumber } from "@monkeytype/util/numbers";
 import {
-  createMemo,
   createSignal,
   For,
   JSXElement,
@@ -14,7 +13,7 @@ import { createSignalWithSetters } from "../../../hooks/createSignalWithSetters"
 import { createEffectOn } from "../../../hooks/effects";
 import { getFocus } from "../../../states/core";
 import {
-  getSkipBreakdownEvent,
+  skipBreakdownEvent,
   getXpBarData,
   setAnimatedLevel,
 } from "../../../states/header";
@@ -38,11 +37,11 @@ export function AccountXpBar(): JSXElement {
   const [getBarAnimationDuration, setBarAnimationDuration] = createSignal(0);
   const [getBarAnimationEase, setBarAnimationEase] = createSignal("out(5)");
 
-  const [getAnimationEvent, fireAnimationEvent] = createEvent();
+  const animationEvent = createEvent();
   const [getTotal, { setTotal }] = createSignalWithSetters(0)({
     setTotal: (set, value: number) => {
       set(value);
-      fireAnimationEvent();
+      animationEvent.dispatch();
     },
   });
 
@@ -54,23 +53,29 @@ export function AccountXpBar(): JSXElement {
   let skipped = false;
   let runId = 0;
 
-  const flashAnimation = createMemo(() => {
-    getAnimationEvent(); // trigger on every total update, even if value unchanged
+  const [flashAnimation, setFlashAnimation] = createSignal({
+    scale: [1, 1],
+    rotate: [0, 0],
+    duration: 2000,
+    ease: "out(5)",
+  });
+
+  animationEvent.useListener(() => {
     const rand = (Math.random() * 2 - 1) / 4;
     const rand2 = (Math.random() + 1) / 2;
-    return {
+    setFlashAnimation({
       scale: [1 + 0.5 * rand2, 1],
       rotate: [10 * rand, 0],
       duration: 2000,
       ease: "out(5)",
-    };
+    });
   });
 
   const addItem = (label: string, amount: number | string): void => {
     setBreakdownItems((items) => [...items, { label, amount }]);
   };
 
-  createEffectOn(getSkipBreakdownEvent, async () => {
+  skipBreakdownEvent.useListener(async () => {
     if (skipped || !canSkip) return;
 
     const myId = runId; // capture before first await

frontend/src/ts/components/layout/header/Logo.tsx

@@ -1,7 +1,7 @@
 import { JSXElement } from "solid-js";
 
 import {
-  dispatchRestartTest,
+  restartTestEvent,
   getActivePage,
   getFocus,
 } from "../../../states/core";
@@ -21,7 +21,7 @@ export function Logo(): JSXElement {
       }}
       data-ui-element="logo"
       onClick={() => {
-        if (getActivePage() === "test") dispatchRestartTest();
+        if (getActivePage() === "test") restartTestEvent.dispatch();
       }}
     >
       <svg

frontend/src/ts/components/layout/header/Nav.tsx

@@ -4,7 +4,7 @@ import { createMemo, JSXElement, Show } from "solid-js";
 import { createEffectOn } from "../../../hooks/effects";
 import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
 import {
-  dispatchRestartTest,
+  restartTestEvent,
   getActivePage,
   getFocus,
 } from "../../../states/core";
@@ -80,7 +80,7 @@ export function Nav(): JSXElement {
           "data-nav-item": "test",
         }}
         onClick={() => {
-          if (getActivePage() === "test") dispatchRestartTest();
+          if (getActivePage() === "test") restartTestEvent.dispatch();
         }}
       />
       <Button

frontend/src/ts/hooks/createEvent.ts

@@ -1,34 +1,56 @@
-import { Accessor, createSignal } from "solid-js";
+import { onCleanup } from "solid-js";
+
+type Listener<T> = (value: T) => void;
+
+type EventBus<T> = {
+  dispatch: (...args: T extends undefined ? [] : [value: T]) => void;
+  subscribe: (fn: Listener<T>) => () => void;
+  useListener: (fn: Listener<T>) => void;
+};
 
 /**
- * Creates a reactive event primitive.
+ * Creates a pub-sub event bus.
  *
- * Returns a tuple of:
- * - An accessor whose value increments each time the event is dispatched.
- *   Reactive consumers (effects, memos, etc.) re-run whenever the event fires.
- * - A dispatch function that triggers the event.
- *
- * @returns `[accessor, dispatch]`
+ * - `dispatch(value)` notifies all listeners. No args needed when `T` is `undefined`.
+ * - `subscribe(fn)` registers a listener, returns an unsubscribe function.
+ * - `useListener(fn)` registers a listener that auto-unsubscribes via Solid's `onCleanup`.
  *
  * @example
  * ```ts
- * const [onSave, dispatchSave] = createEvent();
- *
- * createEffect(() => {
- *   onSave(); // re-runs every time dispatchSave() is called
- *   console.log("saved!");
- * });
+ * const clickEvent = createEvent2<{ x: number; y: number }>();
+ * clickEvent.useListener(({ x, y }) => console.log(x, y));
+ * clickEvent.dispatch({ x: 10, y: 20 });
  *
- * dispatchSave(); // triggers the effect
+ * const resetEvent = createEvent2();
+ * resetEvent.useListener(() => console.log("reset"));
+ * resetEvent.dispatch();
  * ```
  */
 
-export function createEvent(): [Accessor<number>, () => void] {
-  const [get, set] = createSignal(0);
-  return [
-    get,
-    () => {
-      set((v) => v + 1);
-    },
-  ];
+export function createEvent<T = undefined>(): EventBus<T> {
+  const listeners = new Set<Listener<T>>();
+
+  function dispatch(...args: T extends undefined ? [] : [value: T]): void {
+    const value = args[0] as T;
+    for (const fn of listeners) {
+      try {
+        fn(value);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
+  function subscribe(fn: Listener<T>): () => void {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+  }
+
+  // Auto-unsubscribes when the Solid owner scope is disposed
+  function useListener(fn: Listener<T>): void {
+    listeners.add(fn);
+    onCleanup(() => listeners.delete(fn));
+  }
+
+  return { dispatch, subscribe, useListener };
 }

frontend/src/ts/states/core.ts

@@ -38,4 +38,4 @@ export const [getSelectedProfileName, setSelectedProfileName] = createSignal<
   string | undefined
 >(undefined);
 
-export const [onRestartTest, dispatchRestartTest] = createEvent();
+export const restartTestEvent = createEvent();

frontend/src/ts/states/header.ts

@@ -15,4 +15,4 @@ export const [getXpBarData, setXpBarData] = createSignal<XpBarData | null>(
   null,
 );
 
-export const [getSkipBreakdownEvent, skipBreakdown] = createEvent();
+export const skipBreakdownEvent = createEvent();

frontend/src/ts/test/test-logic.ts

@@ -26,8 +26,7 @@ import * as TodayTracker from "./today-tracker";
 import * as ChallengeContoller from "../controllers/challenge-controller";
 import * as QuoteRateModal from "../modals/quote-rate";
 import * as Result from "./result";
-import { createEffect, on } from "solid-js";
-import { getActivePage, onRestartTest } from "../states/core";
+import { getActivePage, restartTestEvent } from "../states/core";
 import * as TestInput from "./test-input";
 import * as TestWords from "./test-words";
 import * as WordsGenerator from "./words-generator";
@@ -1433,7 +1432,7 @@ qs(".pageTest")?.onChild("click", "#restartTestButtonWithSameWordset", () => {
   });
 });
 
-createEffect(on(onRestartTest, () => restart(), { defer: true }));
+restartTestEvent.subscribe(() => restart());
 
 qs(".pageTest")?.onChild("click", "#testConfig .mode .textButton", (e) => {
   if (TestState.testRestarting) return;

frontend/src/ts/test/test-ui.ts

@@ -68,7 +68,7 @@ import {
   qsr,
 } from "../utils/dom";
 import { getTheme } from "../states/theme";
-import { skipBreakdown } from "../states/header";
+import { skipBreakdownEvent } from "../states/header";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1918,7 +1918,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
     if (Config.randomTheme !== "off") {
       void ThemeController.randomizeTheme();
     }
-    skipBreakdown();
+    skipBreakdownEvent.dispatch();
   }
 
   currentTestLine = 0;