[pull] master from monkeytypegame:master

.github/labeler.yml

@@ -18,4 +18,4 @@ packages:
   - any: ["packages/**/*"]
 
 local dev:
-  - any: ["**/turbo.json", "**/tsconfig.json", "**/knip.json", "**/.prettierrc", "**/.oxlintrc.json", "**/.eslintrc.cjs", "**/vite.config.dev.js"]
+  - any: ["**/turbo.json", "**/tsconfig.json", "**/knip.json", "**/.prettierrc", "**/.oxlintrc.json", "**/.eslintrc.cjs"]

frontend/package.json

@@ -58,7 +58,6 @@
     "@vitest/coverage-v8": "4.0.8",
     "autoprefixer": "10.4.20",
     "concurrently": "8.2.2",
-    "dotenv": "16.4.5",
     "eslint": "8.57.1",
     "eslint-plugin-compat": "6.0.2",
     "firebase-tools": "13.15.1",

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

@@ -217,7 +217,7 @@ export function updateActiveElement(
     | { direction: "forward" | "back"; initial?: undefined }
     | { direction?: undefined; initial: true },
 ): void {
-  requestDebouncedAnimationFrame("test-ui.updateActiveElement", () => {
+  requestDebouncedAnimationFrame("test-ui.updateActiveElement", async () => {
     const { direction, initial } = options;
 
     let previousActiveWordTop: number | null = null;
@@ -251,10 +251,6 @@ export function updateActiveElement(
 
     updateWordsInputPosition();
 
-    if (!initial && Config.tapeMode !== "off") {
-      void scrollTape();
-    }
-
     if (previousActiveWordTop === null) return;
 
     const isTimedTest =
@@ -265,9 +261,13 @@ export function updateActiveElement(
     if (isTimedTest || !Config.showAllLines) {
       const newActiveWordTop = newActiveWord.offsetTop;
       if (newActiveWordTop > previousActiveWordTop) {
-        void lineJump(previousActiveWordTop);
+        await lineJump(previousActiveWordTop);
       }
     }
+
+    if (!initial && Config.tapeMode !== "off") {
+      await scrollTape();
+    }
   });
 }
 
@@ -942,7 +942,7 @@ export async function updateWordLetters({
         if (!Config.showAllLines) {
           const wordTopAfterUpdate = wordAtIndex.offsetTop;
           if (wordTopAfterUpdate > activeWordTop) {
-            void lineJump(activeWordTop, true);
+            await lineJump(activeWordTop, true);
           }
         }
       }
@@ -1210,14 +1210,13 @@ export async function lineJump(
   currentTop: number,
   force = false,
 ): Promise<void> {
-  const { resolve, promise } = Misc.promiseWithResolvers();
   //last word of the line
   if (currentTestLine > 0 || force) {
     const hideBound = currentTop;
 
     const activeWordEl = getActiveWordElement();
     if (!activeWordEl) {
-      resolve();
+      // resolve();
       return;
     }
 
@@ -1244,10 +1243,9 @@ export async function lineJump(
     }
 
     if (lastElementIndexToRemove === undefined) {
-      resolve();
       currentTestLine++;
       updateWordsWrapperHeight();
-      return promise;
+      return;
     }
 
     currentLinesJumping++;
@@ -1265,29 +1263,24 @@ export async function lineJump(
 
     if (Config.smoothLineScroll) {
       lineTransition = true;
-      animate(wordsEl, {
+      await Misc.promiseAnimate(wordsEl, {
         marginTop: newMarginTop,
         duration,
-        onComplete: () => {
-          currentLinesJumping = 0;
-          activeWordTop = activeWordEl.offsetTop;
-          activeWordHeight = activeWordEl.offsetHeight;
-          removeTestElements(lastElementIndexToRemove);
-          wordsEl.style.marginTop = "0";
-          lineTransition = false;
-          resolve();
-        },
       });
+      currentLinesJumping = 0;
+      activeWordTop = activeWordEl.offsetTop;
+      activeWordHeight = activeWordEl.offsetHeight;
+      removeTestElements(lastElementIndexToRemove);
+      wordsEl.style.marginTop = "0";
+      lineTransition = false;
     } else {
       currentLinesJumping = 0;
       removeTestElements(lastElementIndexToRemove);
-      resolve();
     }
   }
   currentTestLine++;
   updateWordsWrapperHeight();
-
-  return promise;
+  return;
 }
 
 export function setRightToLeft(isEnabled: boolean): void {

frontend/src/ts/utils/misc.ts

@@ -448,7 +448,8 @@ export async function promiseAnimate(
   return new Promise((resolve) => {
     animate(el, {
       ...options,
-      onComplete: () => {
+      onComplete: (self, e) => {
+        options.onComplete?.(self, e);
         resolve();
       },
     });

frontend/tsconfig.json

@@ -15,6 +15,11 @@
       "virtual:env-config": ["./src/ts/types/virtual-env-config.d.ts"]
     }
   },
-  "include": ["./src/**/*.ts", "./scripts/**/*.ts", "vite-plugins/**/*.ts"],
+  "include": [
+    "./src/**/*.ts",
+    "./scripts/**/*.ts",
+    "vite-plugins/**/*.ts",
+    "vite.config.ts"
+  ],
   "exclude": ["node_modules", "build", "setup-tests.ts", "**/*.spec.ts"]
 }

frontend/vite-plugins/env-config.ts

@@ -1,40 +1,14 @@
 import { Plugin } from "vite";
 import { EnvConfig } from "virtual:env-config";
-import { config as dotenvConfig } from "dotenv";
-
-const envFile =
-  process.env["NODE_ENV"] === "production" ? ".env.production" : ".env";
-dotenvConfig({ path: envFile });
 
 const virtualModuleId = "virtual:env-config";
 const resolvedVirtualModuleId = "\0" + virtualModuleId;
 
-const developmentConfig: EnvConfig = {
-  isDevelopment: true,
-  backendUrl: fallbackEnv("BACKEND_URL", "http://localhost:5005"),
-  clientVersion: "DEVELOPMENT_CLIENT",
-  recaptchaSiteKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
-  quickLoginEmail: process.env["QUICK_LOGIN_EMAIL"],
-  quickLoginPassword: process.env["QUICK_LOGIN_PASSWORD"],
-};
-const productionConfig: Omit<EnvConfig, "clientVersion"> = {
-  isDevelopment: false,
-  backendUrl: fallbackEnv("BACKEND_URL", "https://api.monkeytype.com"),
-  recaptchaSiteKey: process.env["RECAPTCHA_SITE_KEY"] ?? "",
-  quickLoginEmail: undefined,
-  quickLoginPassword: undefined,
-};
-
-export function envConfig(
-  options:
-    | {
-        isDevelopment: true;
-      }
-    | {
-        isDevelopment: false;
-        clientVersion: string;
-      },
-): Plugin {
+export function envConfig(options: {
+  isDevelopment: boolean;
+  clientVersion: string;
+  env: Record<string, string>;
+}): Plugin {
   return {
     name: "virtual-env-config",
     resolveId(id) {
@@ -43,13 +17,31 @@ export function envConfig(
     },
     load(id) {
       if (id === resolvedVirtualModuleId) {
-        const envConfig = options.isDevelopment
-          ? developmentConfig
-          : {
-              ...productionConfig,
-              clientVersion: options.clientVersion,
-            };
+        const devConfig: EnvConfig = {
+          isDevelopment: true,
+          backendUrl: fallback(
+            options.env["BACKEND_URL"],
+            "http://localhost:5005",
+          ),
+          clientVersion: options.clientVersion,
+          recaptchaSiteKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
+          quickLoginEmail: options.env["QUICK_LOGIN_EMAIL"],
+          quickLoginPassword: options.env["QUICK_LOGIN_PASSWORD"],
+        };
+
+        const prodConfig: EnvConfig = {
+          isDevelopment: false,
+          backendUrl: fallback(
+            options.env["BACKEND_URL"],
+            "https://api.monkeytype.com",
+          ),
+          recaptchaSiteKey: options.env["RECAPTCHA_SITE_KEY"] ?? "",
+          quickLoginEmail: undefined,
+          quickLoginPassword: undefined,
+          clientVersion: options.clientVersion,
+        };
 
+        const envConfig = options.isDevelopment ? devConfig : prodConfig;
         return `
           export const envConfig = ${JSON.stringify(envConfig)};
         `;
@@ -59,8 +51,7 @@ export function envConfig(
   };
 }
 
-function fallbackEnv(envVariable: string, fallback: string): string {
-  const value = process.env[envVariable];
+function fallback(value: string | undefined | null, fallback: string): string {
   if (value === null || value === undefined || value === "") return fallback;
   return value;
 }

frontend/vite-plugins/jquery-inject.ts

@@ -0,0 +1,29 @@
+import { Plugin } from "vite";
+import MagicString from "magic-string";
+
+export function jqueryInject(): Plugin {
+  return {
+    name: "simple-jquery-inject",
+    async transform(src: string, id: string) {
+      if (id.endsWith(".ts")) {
+        //check if file has a jQuery or $() call
+        if (/(?:jQuery|\$)\([^)]*\)/.test(src)) {
+          const s = new MagicString(src);
+
+          //if file has "use strict"; at the top, add it below that line, if not, add it at the very top
+          if (src.startsWith(`"use strict";`)) {
+            s.appendRight(12, `\nimport $ from "jquery";`);
+          } else {
+            s.prepend(`import $ from "jquery";`);
+          }
+
+          return {
+            code: s.toString(),
+            map: s.generateMap({ hires: true, source: id }),
+          };
+        }
+      }
+      return;
+    },
+  };
+}

frontend/vite-plugins/language-hashes.ts

@@ -16,7 +16,7 @@ export function languageHashes(options?: { skip: boolean }): Plugin {
     load(id) {
       if (id === resolvedVirtualModuleId) {
         if (options?.skip) {
-          console.log("Skipping language hashing in dev environment.");
+          console.log("Skipping language hashing.");
         }
 
         const hashes: Record<string, string> = options?.skip ? {} : getHashes();