[pull] master from monkeytypegame:master

.github/pull_request_template.md

@@ -4,8 +4,6 @@
 
 ### Checks
 
-- [ ] Adding/modifying Typescript code?
-  - [ ] I have used `qs`, `qsa` or `qsr` instead of JQuery selectors.
 - [ ] Adding quotes?
   - [ ] Make sure to include translations for the quotes in the description (or another comment) so we can verify their content.
 - [ ] Adding a language?

docs/CONTRIBUTING_ADVANCED.md

@@ -150,8 +150,6 @@ If you are on a UNIX system and you get a spawn error, run npm with `sudo`.
 
 Code formatting is enforced by [Prettier](https://prettier.io/docs/en/install.html), which automatically runs every time you make a commit.
 
-We are currently in the process of converting from JQuery to vanilla JS. When submitting new code, please use the `qs`, `qsa` and `qsr` helper functions. These return a class with a lot of JQuery-like methods. You can read how they work and import them from `frontend/src/ts/utils/dom.ts`.
-
 For guidelines on commit messages, adding themes, languages, or quotes, please refer to [CONTRIBUTING.md](./CONTRIBUTING.md). Following these guidelines will increase the chances of getting your change accepted.
 
 ## Questions

frontend/__tests__/test/layout-emulator.spec.ts

@@ -13,14 +13,11 @@ describe("LayoutEmulator", () => {
       updateAltGrState(event);
     });
 
-    const createEvent = (
-      code: string,
-      type: string,
-    ): JQuery.KeyboardEventBase =>
+    const createEvent = (code: string, type: string): KeyboardEvent =>
       ({
         code,
         type,
-      }) as JQuery.KeyboardEventBase;
+      }) as KeyboardEvent;
 
     it("should set isAltGrPressed to true on AltRight keydown", () => {
       const event = createEvent("AltRight", "keydown");

frontend/__tests__/utils/dom.jsdom-spec.ts

@@ -26,7 +26,6 @@ describe("dom", () => {
           handler({
             target: e.target,
             childTarget: e.childTarget,
-            //@ts-expect-error will be added later, check TODO on the ChildEvent
             currentTarget: e.currentTarget,
           }),
         );
@@ -130,10 +129,6 @@ describe("dom", () => {
         await userEvent.click(clickTarget);
 
         //THEN
-
-        //This is the same behavior as jQuery `.on` with selector.
-        //The handler will be called two times,
-        //It does NOT call on the <section> or the parent element itself
         expect(handler).toHaveBeenCalledTimes(2);
 
         //First call is for childTarget inner2 (grand child of parent)

frontend/package.json

@@ -47,7 +47,6 @@
     "hangul-js": "0.2.6",
     "howler": "2.2.3",
     "idb": "8.0.3",
-    "jquery": "3.7.1",
     "konami": "1.7.0",
     "lz-ts": "1.1.2",
     "modern-screenshot": "4.6.5",
@@ -73,7 +72,6 @@
     "@types/chartjs-plugin-trendline": "1.0.1",
     "@types/damerau-levenshtein": "1.0.0",
     "@types/howler": "2.2.7",
-    "@types/jquery": "3.5.14",
     "@types/node": "24.9.1",
     "@types/object-hash": "3.0.6",
     "@types/subset-font": "1.4.3",

frontend/src/ts/components/layout/footer/Footer.tsx

@@ -4,23 +4,14 @@ import { getFocus } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
 import { Button } from "../../common/Button";
 
+import { Keytips } from "./Keytips";
 import { ThemeIndicator } from "./ThemeIndicator";
 import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
   return (
     <footer class="text-sub relative text-xs">
-      <div
-        class="mb-8 text-center leading-loose transition-opacity"
-        classList={{
-          "opacity-0": getFocus(),
-        }}
-      >
-        <kbd>tab</kbd> and <kbd>enter</kbd> - restart test
-        <br />
-        <kbd>ctrl/cmd</kbd> + <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd>{" "}
-        - command line
-      </div>
+      <Keytips />
 
       <div
         class="-m-2 flex justify-between gap-8 transition-opacity"

frontend/src/ts/components/layout/footer/Keytips.tsx

@@ -0,0 +1,44 @@
+import { JSXElement, Show } from "solid-js";
+
+import { getConfig } from "../../../signals/config";
+import { getFocus } from "../../../signals/core";
+import { Conditional } from "../../common/Conditional";
+
+export function Keytips(): JSXElement {
+  const userAgent = window.navigator.userAgent.toLowerCase();
+  const modifierKey =
+    userAgent.includes("mac") && !userAgent.includes("firefox")
+      ? "cmd"
+      : "ctrl";
+
+  const commandKey = (): string =>
+    getConfig.quickRestart === "esc" ? "tab" : "esc";
+
+  return (
+    <Show when={getConfig.showKeyTips}>
+      <div
+        class="mb-8 text-center leading-loose transition-opacity"
+        classList={{
+          "opacity-0": getFocus(),
+        }}
+      >
+        <Conditional
+          if={getConfig.quickRestart === "off"}
+          then={
+            <>
+              <kbd>tab</kbd> + <kbd>enter</kbd> - restart test
+            </>
+          }
+          else={
+            <>
+              <kbd>{getConfig.quickRestart}</kbd> - restart test
+            </>
+          }
+        />
+        <br />
+        <kbd>{commandKey()}</kbd> or <kbd>{modifierKey}</kbd> + <kbd>shift</kbd>{" "}
+        + <kbd>p</kbd> - command line
+      </div>
+    </Show>
+  );
+}

frontend/src/ts/components/pages/AboutPage.tsx

@@ -2,7 +2,7 @@ import { intervalToDuration } from "date-fns";
 import { createResource, For, JSXElement, Show } from "solid-js";
 
 import Ape from "../../ape";
-import { getAds } from "../../signals/config";
+import { getConfig } from "../../signals/config";
 import { getActivePage } from "../../signals/core";
 import { showModal } from "../../stores/modals";
 import { getContributorsList, getSupportersList } from "../../utils/json-data";
@@ -225,7 +225,7 @@ export function AboutPage(): JSXElement {
             </dd>
           </dl>
         </section>
-        <Show when={getAds() === "sellout"}>
+        <Show when={getConfig.ads === "sellout"}>
           <div
             id="ad-about-1-wrapper"
             class="ad full-width advertisement ad-h place-self-center"
@@ -358,7 +358,7 @@ export function AboutPage(): JSXElement {
             adding themes and more
           </p>
         </section>
-        <Show when={getAds() === "sellout"}>
+        <Show when={getConfig.ads === "sellout"}>
           <div
             id="ad-about-2-wrapper"
             class="ad full-width advertisement ad-h place-self-center"

frontend/src/ts/config.ts

@@ -353,6 +353,7 @@ export async function applyConfigFromJson(json: string): Promise<void> {
 const { promise: configLoadPromise, resolve: loadDone } =
   promiseWithResolvers();
 
+export const getConfig = (): Config => config;
 export { configLoadPromise };
 export default config;
 export const __testing = {

frontend/src/ts/index.ts

@@ -97,9 +97,6 @@ addToGlobal({
 });
 
 if (isDevEnvironment()) {
-  void import("jquery").then((jq) => {
-    addToGlobal({ $: jq.default });
-  });
   void getDevOptionsModal().then((module) => {
     module.appendButton();
   });

frontend/src/ts/signals/config.ts

@@ -1,13 +1,22 @@
-import { createSignal } from "solid-js";
 import { subscribe } from "../observables/config-event";
-import { Ads } from "@monkeytype/schemas/configs";
+import { Config as ConfigType } from "@monkeytype/schemas/configs";
+import { createStore } from "solid-js/store";
+import { getDefaultConfig } from "../constants/default-config";
+import * as Config from "../config";
 
-export const [getAds, setAds] = createSignal<Ads>("off");
+const [getConfig, setConfigStore] = createStore<ConfigType>(getDefaultConfig());
+export { getConfig };
 
-//populate selected config events to the core signals
-//this will get replaced once the config is converted to a signal/store
+let fullConfigChange = false;
 subscribe(({ key, newValue }) => {
-  if (key === "ads") {
-    setAds(newValue);
+  if (key === "fullConfigChange") {
+    fullConfigChange = true;
+  } else if (key === "fullConfigChangeFinished") {
+    fullConfigChange = false;
+    setConfigStore(Config.getConfig());
+  } else if (fullConfigChange) {
+    return;
+  } else {
+    setConfigStore(key, newValue);
   }
 });

frontend/src/ts/test/focus.ts

@@ -6,13 +6,14 @@ import * as TimerProgress from "./timer-progress";
 import * as PageTransition from "../states/page-transition";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { getFocus, setFocus } from "../signals/core";
+import { qsa, ElementsWithUtils } from "../utils/dom";
 
 const unfocusPx = 3;
 
 let cacheReady = false;
 let cache: {
-  focus?: HTMLElement[];
-  cursor?: HTMLElement[];
+  focus?: ElementsWithUtils;
+  cursor?: ElementsWithUtils;
 } = {};
 
 function initializeCache(): void {
@@ -33,8 +34,8 @@ function initializeCache(): void {
     "#ad-footer-small-wrapper",
   ].join(",");
 
-  cache.cursor = [...document.querySelectorAll<HTMLElement>(cursorSelector)];
-  cache.focus = [...document.querySelectorAll<HTMLElement>(elementsSelector)];
+  cache.cursor = qsa(cursorSelector);
+  cache.focus = qsa(elementsSelector);
 
   cacheReady = true;
 }
@@ -50,14 +51,10 @@ export function set(value: boolean, withCursor = false): void {
 
       // batch DOM operations for better performance
       if (cache.focus) {
-        for (const el of cache.focus) {
-          el.classList.add("focus");
-        }
+        cache.focus.addClass("focus");
       }
       if (!withCursor && cache.cursor) {
-        for (const el of cache.cursor) {
-          el.style.cursor = "none";
-        }
+        cache.cursor.setStyle({ cursor: "none" });
       }
 
       Caret.stopAnimation();
@@ -69,14 +66,10 @@ export function set(value: boolean, withCursor = false): void {
       setFocus(false);
 
       if (cache.focus) {
-        for (const el of cache.focus) {
-          el.classList.remove("focus");
-        }
+        cache.focus.removeClass("focus");
       }
       if (cache.cursor) {
-        for (const el of cache.cursor) {
-          el.style.cursor = "";
-        }
+        cache.cursor.setStyle({ cursor: "" });
       }
 
       Caret.startAnimation();

frontend/src/ts/test/funbox/funbox-functions.ts

@@ -23,6 +23,7 @@ import * as TestState from "../test-state";
 import { WordGenError } from "../../utils/word-gen-error";
 import { FunboxName, KeymapLayout, Layout } from "@monkeytype/schemas/configs";
 import { Language, LanguageObject } from "@monkeytype/schemas/languages";
+import { qs } from "../../utils/dom";
 
 export type FunboxFunctions = {
   getWord?: (wordset?: Wordset, wordIndex?: number) => string;
@@ -61,9 +62,9 @@ async function readAheadHandleKeydown(event: KeyboardEvent): Promise<void> {
         TestWords.words.get(TestState.activeWordIndex - 1) ||
       Config.freedomMode)
   ) {
-    $("#words").addClass("read_ahead_disabled");
+    qs("#words")?.addClass("read_ahead_disabled");
   } else if (event.key === " ") {
-    $("#words").removeClass("read_ahead_disabled");
+    qs("#words")?.removeClass("read_ahead_disabled");
   }
 }
 
@@ -510,7 +511,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
   },
   memory: {
     applyConfig(): void {
-      $("#wordsWrapper").addClass("hidden");
+      qs("#wordsWrapper")?.hide();
       setConfig("showAllLines", true, {
         nosave: true,
       });
@@ -529,11 +530,11 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
     },
     start(): void {
       MemoryTimer.reset();
-      $("#words").addClass("hidden");
+      qs("#words")?.hide();
     },
     restart(): void {
       MemoryTimer.start(Math.round(Math.pow(TestWords.words.length, 1.2)));
-      $("#words").removeClass("hidden");
+      qs("#words")?.show();
       if (Config.keymapMode === "next") {
         setConfig("keymapMode", "react");
       }
@@ -672,14 +673,14 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
           return;
         }
       }
-      $("body").append('<div id="scanline" />');
-      $("body").addClass("crtmode");
-      $("#globalFunBoxTheme").attr("href", `funbox/crt.css`);
+      qs("body")?.appendHtml('<div id="scanline" />');
+      qs("body")?.addClass("crtmode");
+      qs("#globalFunBoxTheme")?.setAttribute("href", `funbox/crt.css`);
     },
     clearGlobal(): void {
-      $("#scanline").remove();
-      $("body").removeClass("crtmode");
-      $("#globalFunBoxTheme").attr("href", ``);
+      qs("#scanline")?.remove();
+      qs("body")?.removeClass("crtmode");
+      qs("#globalFunBoxTheme")?.setAttribute("href", ``);
     },
   },
   ALL_CAPS: {