build: combine vite config into a single file (@fehmer) (monkeytypegame#7190)

- **build: replace dotenv with vite env variables (@fehmer)**
- **build: combine vite config into a single file (@fehmer)**

---------

Co-authored-by: Miodec <[email protected]>

Author: fehmer

.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/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();