refactor: use virtual module for env-config (@fehmer) (monkeytypegame#7095)

Author: fehmer

frontend/scripts/env-config.ts

@@ -0,0 +1,61 @@
+import { Plugin } from "vite";
+import { EnvConfig } from "virtual:env-config";
+
+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 {
+  return {
+    name: "virtual-env-config",
+    resolveId(id) {
+      if (id === virtualModuleId) return resolvedVirtualModuleId;
+      return;
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        const envConfig = options.isDevelopment
+          ? developmentConfig
+          : {
+              ...productionConfig,
+              clientVersion: options.clientVersion,
+            };
+
+        return `
+          export const envConfig = ${JSON.stringify(envConfig)};
+        `;
+      }
+      return;
+    },
+  };
+}
+
+function fallbackEnv(envVariable: string, fallback: string): string {
+  const value = process.env[envVariable];
+  if (value === null || value === undefined || value === "") return fallback;
+  return value;
+}

frontend/scripts/language-hashes.ts

@@ -5,9 +5,8 @@ import { createHash } from "crypto";
 
 const virtualModuleId = "virtual:language-hashes";
 const resolvedVirtualModuleId = "\0" + virtualModuleId;
-let skip = false;
 
-export function languageHashes(): Plugin {
+export function languageHashes(options?: { skip: boolean }): Plugin {
   return {
     name: "virtual-language-hashes",
     resolveId(id) {
@@ -16,19 +15,17 @@ export function languageHashes(): Plugin {
     },
     load(id) {
       if (id === resolvedVirtualModuleId) {
-        const hashes: Record<string, string> = skip ? {} : getHashes();
+        if (options?.skip) {
+          console.log("Skipping language hashing in dev environment.");
+        }
+
+        const hashes: Record<string, string> = options?.skip ? {} : getHashes();
         return `
           export const languageHashes = ${JSON.stringify(hashes)};
         `;
       }
       return;
     },
-    configResolved(resolvedConfig) {
-      if (resolvedConfig?.define?.["IS_DEVELOPMENT"] === "true") {
-        skip = true;
-        console.log("Skipping language hashing in dev environment.");
-      }
-    },
   };
 }
 

frontend/src/ts/ape/adapters/ts-rest-adapter.ts

@@ -4,7 +4,7 @@ import {
   tsRestFetchApi,
   type ApiFetcherArgs,
 } from "@ts-rest/core";
-import { envConfig } from "../../constants/env-config";
+import { envConfig } from "virtual:env-config";
 import { getIdToken } from "../../firebase";
 import {
   COMPATIBILITY_CHECK,

frontend/src/ts/ape/index.ts

@@ -1,4 +1,4 @@
-import { envConfig } from "../constants/env-config";
+import { envConfig } from "virtual:env-config";
 import { buildClient } from "./adapters/ts-rest-adapter";
 import { contract } from "@monkeytype/contracts";
 import { devContract } from "@monkeytype/contracts/dev";

frontend/src/ts/constants/env-config.ts

@@ -1,7 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { envConfig } from "../constants/env-config";
+import { envConfig } from "virtual:env-config";
 const siteKey = envConfig.recaptchaSiteKey;
 
 const captchas: Record<string, number> = {};

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

@@ -1,4 +1,4 @@
-import { envConfig } from "../constants/env-config";
+import { envConfig } from "virtual:env-config";
 
 $("#nocss .requestedStylesheets").html(
   "Requested stylesheets:<br>" +

frontend/src/ts/elements/no-css.ts

@@ -6,7 +6,7 @@ import * as Commandline from "../commandline/commandline";
 import * as SupportPopup from "../modals/support";
 import * as ContactModal from "../modals/contact";
 import * as VersionHistoryModal from "../modals/version-history";
-import { envConfig } from "../constants/env-config";
+import { envConfig } from "virtual:env-config";
 import { COMPATIBILITY_CHECK } from "@monkeytype/contracts";
 import { lastSeenServerCompatibility } from "../ape/adapters/ts-rest-adapter";
 

frontend/src/ts/event-handlers/footer.ts

@@ -1,4 +1,4 @@
-import { envConfig } from "../constants/env-config";
+import { envConfig } from "virtual:env-config";
 import AnimatedModal from "../utils/animated-modal";
 import { showPopup } from "./simple-modals";
 import * as Notifications from "../elements/notifications";

frontend/src/ts/modals/dev-options.ts

@@ -1,4 +1,4 @@
-import { envConfig } from "./constants/env-config";
+import { envConfig } from "virtual:env-config";
 
 async function getSentry(): Promise<typeof import("@sentry/browser")> {
   return await import("@sentry/browser");