refactor: refactor iteration over funboxes (@fehmer) (monkeytypegame#6275)

Author: fehmer

frontend/src/ts/controllers/account-controller.ts

@@ -48,7 +48,7 @@ import { navigate } from "./route-controller";
 import { FirebaseError } from "firebase/app";
 import * as PSA from "../elements/psa";
 import defaultResultFilters from "../constants/default-result-filters";
-import { getActiveFunboxes } from "../test/funbox/list";
+import { getFunctionsFromActiveFunboxes } from "../test/funbox/list";
 
 export const gmailProvider = new GoogleAuthProvider();
 export const githubProvider = new GithubAuthProvider();
@@ -174,8 +174,10 @@ async function getDataAndInit(): Promise<boolean> {
     UpdateConfig.saveFullConfigToLocalStorage(true);
 
     //funboxes might be different and they wont activate on the account page
-    for (const fb of getActiveFunboxes()) {
-      fb.functions?.applyGlobalCSS?.();
+    for (const applyGlobalCSS of getFunctionsFromActiveFunboxes(
+      "applyGlobalCSS"
+    )) {
+      applyGlobalCSS();
     }
   }
   AccountButton.loading(false);

frontend/src/ts/controllers/input-controller.ts

@@ -35,7 +35,11 @@ import { ModifierKeys } from "../constants/modifier-keys";
 import { navigate } from "./route-controller";
 import * as Loader from "../elements/loader";
 import * as KeyConverter from "../utils/key-converter";
-import { getActiveFunboxes } from "../test/funbox/list";
+import {
+  findSingleActiveFunboxWithFunction,
+  getFunctionsFromActiveFunboxes,
+  isFunboxActiveWithProperty,
+} from "../test/funbox/list";
 
 let dontInsertSpace = false;
 let correctShiftUsed = true;
@@ -145,7 +149,7 @@ function backspaceToPrevious(): void {
 
   TestInput.input.current = TestInput.input.popHistory();
   TestInput.corrected.popHistory();
-  if (getActiveFunboxes().find((f) => f.properties?.includes("nospace"))) {
+  if (isFunboxActiveWithProperty("nospace")) {
     TestInput.input.current = TestInput.input.current.slice(0, -1);
     setWordsInput(" " + TestInput.input.current + " ");
   }
@@ -194,8 +198,8 @@ async function handleSpace(): Promise<void> {
 
   const currentWord: string = TestWords.words.getCurrent();
 
-  for (const fb of getActiveFunboxes()) {
-    fb.functions?.handleSpace?.();
+  for (const handleSpace of getFunctionsFromActiveFunboxes("handleSpace")) {
+    handleSpace();
   }
 
   dontInsertSpace = true;
@@ -204,9 +208,7 @@ async function handleSpace(): Promise<void> {
   void LiveBurst.update(Math.round(burst));
   TestInput.pushBurstToHistory(burst);
 
-  const nospace =
-    getActiveFunboxes().find((f) => f.properties?.includes("nospace")) !==
-    undefined;
+  const nospace = isFunboxActiveWithProperty("nospace");
 
   //correct word or in zen mode
   const isWordCorrect: boolean =
@@ -406,8 +408,8 @@ function isCharCorrect(char: string, charIndex: number): boolean {
     return true;
   }
 
-  const funbox = getActiveFunboxes().find((fb) => fb.functions?.isCharCorrect);
-  if (funbox?.functions?.isCharCorrect) {
+  const funbox = findSingleActiveFunboxWithFunction("isCharCorrect");
+  if (funbox) {
     return funbox.functions.isCharCorrect(char, originalChar);
   }
 
@@ -492,15 +494,11 @@ function handleChar(
 
   const isCharKorean: boolean = TestInput.input.getKoreanStatus();
 
-  for (const fb of getActiveFunboxes()) {
-    if (fb.functions?.handleChar) {
-      char = fb.functions.handleChar(char);
-    }
+  for (const handleChar of getFunctionsFromActiveFunboxes("handleChar")) {
+    char = handleChar(char);
   }
 
-  const nospace =
-    getActiveFunboxes().find((f) => f.properties?.includes("nospace")) !==
-    undefined;
+  const nospace = isFunboxActiveWithProperty("nospace") !== undefined;
 
   if (char !== "\n" && char !== "\t" && /\s/.test(char)) {
     if (nospace) return;
@@ -904,10 +902,8 @@ $(document).on("keydown", async (event) => {
     return;
   }
 
-  for (const fb of getActiveFunboxes()) {
-    if (fb.functions?.handleKeydown) {
-      void fb.functions.handleKeydown(event);
-    }
+  for (const handleKeydown of getFunctionsFromActiveFunboxes("handleKeydown")) {
+    void handleKeydown(event);
   }
 
   //autofocus
@@ -1157,20 +1153,20 @@ $(document).on("keydown", async (event) => {
     }
   }
 
-  for (const fb of getActiveFunboxes()) {
-    if (fb.functions?.preventDefaultEvent) {
-      if (
-        await fb.functions.preventDefaultEvent(
-          //i cant figure this type out, but it works fine
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          event as JQuery.KeyDownEvent
-        )
-      ) {
-        event.preventDefault();
-        handleChar(event.key, TestInput.input.current.length);
-        updateUI();
-        setWordsInput(" " + TestInput.input.current);
-      }
+  for (const preventDefaultEvent of getFunctionsFromActiveFunboxes(
+    "preventDefaultEvent"
+  )) {
+    if (
+      await preventDefaultEvent(
+        //i cant figure this type out, but it works fine
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        event as JQuery.KeyDownEvent
+      )
+    ) {
+      event.preventDefault();
+      handleChar(event.key, TestInput.input.current.length);
+      updateUI();
+      setWordsInput(" " + TestInput.input.current);
     }
   }
 

frontend/src/ts/ready.ts

@@ -7,7 +7,7 @@ import * as AccountButton from "./elements/account-button";
 //@ts-expect-error
 import Konami from "konami";
 import * as ServerConfiguration from "./ape/server-configuration";
-import { getActiveFunboxes } from "./test/funbox/list";
+import { getFunctionsFromActiveFunboxes } from "./test/funbox/list";
 import { loadPromise } from "./config";
 
 $(async (): Promise<void> => {
@@ -19,8 +19,10 @@ $(async (): Promise<void> => {
   $("body").css("transition", "background .25s, transform .05s");
   MerchBanner.showIfNotClosedBefore();
 
-  for (const fb of getActiveFunboxes()) {
-    fb.functions?.applyGlobalCSS?.();
+  for (const applyGlobalCSS of getFunctionsFromActiveFunboxes(
+    "applyGlobalCSS"
+  )) {
+    applyGlobalCSS();
   }
 
   $("#app")

frontend/src/ts/test/funbox/funbox.ts

@@ -9,21 +9,28 @@ import * as FunboxMemory from "./funbox-memory";
 import { HighlightMode } from "@monkeytype/contracts/schemas/configs";
 import { Mode } from "@monkeytype/contracts/schemas/shared";
 import { FunboxName, checkCompatibility } from "@monkeytype/funbox";
-import { getActiveFunboxes, getActiveFunboxNames, get } from "./list";
+import {
+  getActiveFunboxes,
+  getActiveFunboxNames,
+  get,
+  getFunctionsFromActiveFunboxes,
+  isFunboxActiveWithProperty,
+  getActiveFunboxesWithProperty,
+} from "./list";
 import { checkForcedConfig } from "./funbox-validation";
 
 export function toggleScript(...params: string[]): void {
   if (Config.funbox === "none") return;
 
-  for (const fb of getActiveFunboxes()) {
-    fb.functions?.toggleScript?.(params);
+  for (const toggleScript of getFunctionsFromActiveFunboxes("toggleScript")) {
+    toggleScript(params);
   }
 }
 
 export function setFunbox(funbox: string): boolean {
   if (funbox === "none") {
-    for (const fb of getActiveFunboxes()) {
-      fb.functions?.clearGlobal?.();
+    for (const clearGlobal of getFunctionsFromActiveFunboxes("clearGlobal")) {
+      clearGlobal();
     }
   }
   FunboxMemory.load();
@@ -125,9 +132,7 @@ export async function activate(funbox?: string): Promise<boolean | undefined> {
   }
 
   if (language.ligatures) {
-    if (
-      getActiveFunboxes().find((f) => f.properties?.includes("noLigatures"))
-    ) {
+    if (isFunboxActiveWithProperty("noLigatures")) {
       Notifications.add(
         "Current language does not support this funbox mode",
         0
@@ -194,16 +199,18 @@ export async function activate(funbox?: string): Promise<boolean | undefined> {
   }
 
   ManualRestart.set();
-  for (const fb of getActiveFunboxes()) {
-    fb.functions?.applyConfig?.();
+  for (const applyConfig of getFunctionsFromActiveFunboxes("applyConfig")) {
+    applyConfig();
   }
   // ModesNotice.update();
   return true;
 }
 
 export async function rememberSettings(): Promise<void> {
-  for (const fb of getActiveFunboxes()) {
-    fb.functions?.rememberSettings?.();
+  for (const rememberSettings of getFunctionsFromActiveFunboxes(
+    "rememberSettings"
+  )) {
+    rememberSettings();
   }
 }
 
@@ -220,11 +227,7 @@ async function setFunboxBodyClasses(): Promise<boolean> {
       ?.split(/\s+/)
       .filter((it) => !it.startsWith("fb-")) ?? [];
 
-  if (
-    getActiveFunboxes().some((it) =>
-      it.properties?.includes("ignoreReducedMotion")
-    )
-  ) {
+  if (isFunboxActiveWithProperty("ignoreReducedMotion")) {
     currentClasses.push("ignore-reduced-motion");
   }
 
@@ -238,14 +241,12 @@ async function setFunboxBodyClasses(): Promise<boolean> {
 
 async function applyFunboxCSS(): Promise<boolean> {
   $(".funBoxTheme").remove();
-  for (const funbox of getActiveFunboxes()) {
-    if (funbox.properties?.includes("hasCssFile")) {
-      const css = document.createElement("link");
-      css.classList.add("funBoxTheme");
-      css.rel = "stylesheet";
-      css.href = "funbox/" + funbox.name + ".css";
-      document.head.appendChild(css);
-    }
+  for (const funbox of getActiveFunboxesWithProperty("hasCssFile")) {
+    const css = document.createElement("link");
+    css.classList.add("funBoxTheme");
+    css.rel = "stylesheet";
+    css.href = "funbox/" + funbox.name + ".css";
+    document.head.appendChild(css);
   }
   return true;
 }

frontend/src/ts/test/funbox/list.ts

@@ -59,14 +59,102 @@ export function getActiveFunboxNames(): FunboxName[] {
   return stringToFunboxNames(Config.funbox);
 }
 
+/**
+ * Get all active funboxes defining the given property
+ * @param property
+ * @returns list of matching funboxes, empty list if none matching
+ */
 export function getActiveFunboxesWithProperty(
   property: FunboxProperty
 ): FunboxMetadataWithFunctions[] {
   return getActiveFunboxes().filter((fb) => fb.properties?.includes(property));
 }
 
-export function getActiveFunboxesWithFunction(
+/**
+ * Find a single active funbox defining the given property
+ * @param property
+ * @returns the active funbox if any, `undefined`  otherwise.
+ * @throws Error if there are multiple funboxes defining the given property
+ */
+export function findSingleActiveFunboxWithProperty(
+  property: FunboxProperty
+): FunboxMetadataWithFunctions | undefined {
+  const matching = getActiveFunboxesWithProperty(property);
+  if (matching.length == 0) return undefined;
+  if (matching.length == 1) return matching[0];
+  throw new Error(
+    `Expecting exactly one funbox with property "${property} but found ${matching.length}`
+  );
+}
+
+/**
+ * Check if there is an active funbox with the given property name
+ * @param property property name
+ * @returns
+ */
+export function isFunboxActiveWithProperty(property: FunboxProperty): boolean {
+  return getActiveFunboxesWithProperty(property).length > 0;
+}
+
+type MandatoryFunboxFunction<F extends keyof FunboxFunctions> = Exclude<
+  FunboxFunctions[F],
+  undefined
+>;
+type FunboxWithFunction<F extends keyof FunboxFunctions> =
+  FunboxMetadataWithFunctions & {
+    functions: Record<F, MandatoryFunboxFunction<F>>;
+  };
+
+/**
+ * Get all active funboxes implementing the given function
+ * @param functionName function name
+ * @returns list of matching funboxes, empty list if none matching
+ */
+export function getActiveFunboxesWithFunction<F extends keyof FunboxFunctions>(
+  functionName: F
+): FunboxWithFunction<F>[] {
+  return getActiveFunboxes().filter(
+    (fb) => fb.functions?.[functionName]
+  ) as FunboxWithFunction<F>[];
+}
+
+/**
+ * Get requested, implemented functions from all active funboxes
+ * @param functionName name of the function
+ * @returns array of each implemented requested function of all active funboxes
+ */
+export function getFunctionsFromActiveFunboxes<F extends keyof FunboxFunctions>(
+  functionName: F
+): MandatoryFunboxFunction<F>[] {
+  return getActiveFunboxesWithFunction(functionName).map(
+    (it) => it.functions[functionName]
+  );
+}
+
+/**
+ * Check if there is an active funbox implemenging the given function
+ * @param functionName function name
+ * @returns
+ */
+export function isFunboxActiveWithFunction(
   functionName: keyof FunboxFunctions
-): FunboxMetadataWithFunctions[] {
-  return getActiveFunboxes().filter((fb) => fb.functions?.[functionName]);
+): boolean {
+  return getActiveFunboxesWithFunction(functionName).length > 0;
+}
+
+/**
+ * Find a single active funbox implementing the given function name
+ * @param functionName
+ * @returns the active funbox if any, `undefined`  otherwise.
+ * @throws Error if there are multiple funboxes implementing the function name
+ */
+export function findSingleActiveFunboxWithFunction<
+  F extends keyof FunboxFunctions
+>(functionName: F): FunboxWithFunction<F> | undefined {
+  const matching = getActiveFunboxesWithFunction(functionName);
+  if (matching.length == 0) return undefined;
+  if (matching.length == 1) return matching[0] as FunboxWithFunction<F>;
+  throw new Error(
+    `Expecting exactly one funbox implementing "${functionName} but found ${matching.length}`
+  );
 }

frontend/src/ts/test/result.ts

@@ -37,7 +37,11 @@ import type {
 } from "chartjs-plugin-annotation";
 import Ape from "../ape";
 import { CompletedEvent } from "@monkeytype/contracts/schemas/results";
-import { getActiveFunboxes, getFromString } from "./funbox/list";
+import {
+  getActiveFunboxes,
+  getFromString,
+  isFunboxActiveWithProperty,
+} from "./funbox/list";
 import { getFunboxesFromString } from "@monkeytype/funbox";
 
 let result: CompletedEvent;
@@ -678,10 +682,7 @@ function updateTestType(randomQuote: Quote | null): void {
       testType += " " + ["short", "medium", "long", "thicc"][randomQuote.group];
     }
   }
-  const ignoresLanguage =
-    getActiveFunboxes().find((f) =>
-      f.properties?.includes("ignoresLanguage")
-    ) !== undefined;
+  const ignoresLanguage = isFunboxActiveWithProperty("ignoresLanguage");
   if (Config.mode !== "custom" && !ignoresLanguage) {
     testType += "<br>" + Strings.getLanguageDisplayString(result.language);
   }