build: extract vite plugins (@fehmer) (monkeytypegame#7103)

fehmer · web-flow · commit 81f09b9b90ca · 2025-11-12T16:54:56.000+01:00
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -13,6 +13,6 @@
       "virtual:env-config": ["./src/ts/virtual-env-config.d.ts"]
     }
   },
-  "include": ["./src/**/*.ts", "./scripts/**/*.ts"],
+  "include": ["./src/**/*.ts", "./scripts/**/*.ts", "vite-plugins/**/*.ts"],
   "exclude": ["node_modules", "build", "setup-tests.ts", "**/*.spec.ts"]
 }
diff --git a/frontend/vite-plugins/env-config.ts b/frontend/vite-plugins/env-config.ts
diff --git a/frontend/vite-plugins/font-preview.ts b/frontend/vite-plugins/font-preview.ts
@@ -1,3 +1,4 @@
+import { Plugin } from "vite";
 import * as fs from "fs";
 import * as path from "path";
 import { fileURLToPath } from "url";
@@ -9,9 +10,30 @@ import { KnownFontName } from "@monkeytype/schemas/fonts";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-export async function generatePreviewFonts(
-  debug: boolean = false
-): Promise<void> {
+/**
+ * Generate a preview file from each font in `static/webfonts` into `static/webfonts-preview`.
+ * A preview file only contains the characters needed to show the preview.
+ * @returns
+ */
+export function fontPreview(): Plugin {
+  return {
+    name: "vite-plugin-webfonts-preview",
+    apply: "build",
+    async buildStart() {
+      const start = performance.now();
+      console.log("\nCreating webfonts preview...");
+
+      await generatePreviewFonts();
+
+      const end = performance.now();
+      console.log(
+        `Creating webfonts preview took ${Math.round(end - start)} ms`
+      );
+    },
+  };
+}
+
+async function generatePreviewFonts(debug: boolean = false): Promise<void> {
   const srcDir = __dirname + "/../static/webfonts";
   const targetDir = __dirname + "/../static/webfonts-preview";
   fs.mkdirSync(targetDir, { recursive: true });
diff --git a/frontend/vite-plugins/fontawesome-subset.ts b/frontend/vite-plugins/fontawesome-subset.ts
@@ -1,6 +1,38 @@
+import { Plugin } from "vite";
 import * as fs from "fs";
 import { createRequire } from "module";
 import * as path from "path";
+import { fontawesomeSubset as createFontawesomeSubset } from "fontawesome-subset";
+
+/**
+ * Detect fontawesome icons used by the application and creates subset font files only containing the used icons.
+ * @param options
+ * @returns
+ */
+export function fontawesomeSubset(): Plugin {
+  return {
+    name: "vite-plugin-fontawesome-subset",
+    apply: "build",
+    async buildStart() {
+      const start = performance.now();
+      console.log("\nCreating fontawesome subset...");
+
+      const fontawesomeClasses = getFontawesomeConfig();
+      await createFontawesomeSubset(
+        fontawesomeClasses,
+        "src/webfonts-generated",
+        {
+          targetFormats: ["woff2"],
+        }
+      );
+
+      const end = performance.now();
+      console.log(
+        `Creating fontawesome subset took ${Math.round(end - start)} ms`
+      );
+    },
+  };
+}
 
 type FontawesomeConfig = {
   /* used regular icons without `fa-` prefix*/
@@ -56,8 +88,7 @@ const modules2 = {
  * @param {boolean} debug - Enable debug output
  * @returns {FontawesomeConfig} - used icons
  */
-
-export function getFontawesomeConfig(debug = false): FontawesomeConfig {
+function getFontawesomeConfig(debug = false): FontawesomeConfig {
   const time = Date.now();
   const srcFiles = findAllFiles(
     "./src",
diff --git a/frontend/vite-plugins/language-hashes.ts b/frontend/vite-plugins/language-hashes.ts
diff --git a/frontend/vite-plugins/minify-json.ts b/frontend/vite-plugins/minify-json.ts
@@ -0,0 +1,76 @@
+import { Plugin } from "vite";
+import { readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import path from "node:path";
+
+/**
+ * Minifies all json files in the `dist` directory
+ * @returns
+ */
+export function minifyJson(): Plugin {
+  return {
+    name: "minify-json",
+    apply: "build",
+    generateBundle() {
+      let totalOriginalSize = 0;
+      let totalMinifiedSize = 0;
+
+      const minifyJsonFiles = (dir: string): void => {
+        readdirSync(dir).forEach((file) => {
+          const sourcePath = path.join(dir, file);
+          const stat = statSync(sourcePath);
+
+          if (stat.isDirectory()) {
+            minifyJsonFiles(sourcePath);
+          } else if (path.extname(file) === ".json") {
+            const originalContent = readFileSync(sourcePath, "utf8");
+            const originalSize = Buffer.byteLength(originalContent, "utf8");
+            const minifiedContent = JSON.stringify(JSON.parse(originalContent));
+            const minifiedSize = Buffer.byteLength(minifiedContent, "utf8");
+
+            totalOriginalSize += originalSize;
+            totalMinifiedSize += minifiedSize;
+
+            writeFileSync(sourcePath, minifiedContent);
+
+            /*
+            const savings =
+              ((originalSize - minifiedSize) / originalSize) * 100;
+            console.log(
+              `\x1b[0m \x1b[36m${sourcePath}\x1b[0m | ` +
+                `\x1b[90mOriginal: ${originalSize} bytes\x1b[0m | ` +
+                `\x1b[90mMinified: ${minifiedSize} bytes\x1b[0m | ` +
+                `\x1b[32mSavings: ${savings.toFixed(2)}%\x1b[0m`
+            );
+            */
+          }
+        });
+      };
+
+      // console.log("\n\x1b[1mMinifying JSON files...\x1b[0m\n");
+      const start = performance.now();
+
+      minifyJsonFiles("./dist");
+
+      const end = performance.now();
+      const totalSavings =
+        ((totalOriginalSize - totalMinifiedSize) / totalOriginalSize) * 100;
+
+      console.log(
+        `\n\n\x1b[1mJSON Minification Summary:\x1b[0m\n` +
+          `  \x1b[90mTotal original size: ${(
+            totalOriginalSize /
+            1024 /
+            1024
+          ).toFixed(2)} mB\x1b[0m\n` +
+          `  \x1b[90mTotal minified size: ${(
+            totalMinifiedSize /
+            1024 /
+            1024
+          ).toFixed(2)} mB\x1b[0m\n` +
+          `  \x1b[32mTotal savings: ${totalSavings.toFixed(
+            2
+          )}%\x1b[0m took ${Math.round(end - start)} ms\n`
+      );
+    },
+  };
+}
diff --git a/frontend/vite-plugins/version-file.ts b/frontend/vite-plugins/version-file.ts
@@ -0,0 +1,20 @@
+import { Plugin } from "vite";
+import path from "node:path";
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+export function versionFile(options: { clientVersion: string }): Plugin {
+  return {
+    name: "generate-version-json",
+    apply: "build",
+
+    closeBundle() {
+      const distPath = path.resolve("./dist");
+      if (!existsSync(distPath)) {
+        mkdirSync(distPath, { recursive: true });
+      }
+
+      const versionJson = JSON.stringify({ version: options.clientVersion });
+      const versionPath = path.resolve(distPath, "version.json");
+      writeFileSync(versionPath, versionJson);
+    },
+  };
+}
diff --git a/frontend/vite.config.dev.js b/frontend/vite.config.dev.js
@@ -2,8 +2,8 @@ import { checker } from "vite-plugin-checker";
 import Inspect from "vite-plugin-inspect";
 import path from "node:path";
 import { getFontsConig } from "./vite.config";
-import { envConfig } from "./scripts/env-config";
-import { languageHashes } from "./scripts/language-hashes";
+import { envConfig } from "./vite-plugins/env-config";
+import { languageHashes } from "./vite-plugins/language-hashes";
 
 /** @type {import("vite").UserConfig} */
 export default {
diff --git a/frontend/vite.config.prod.js b/frontend/vite.config.prod.js
@@ -1,26 +1,19 @@
-import { fontawesomeSubset } from "fontawesome-subset";
-import { getFontawesomeConfig } from "./scripts/fontawesome";
-import { generatePreviewFonts } from "./scripts/font-preview";
 import { VitePWA } from "vite-plugin-pwa";
 import replace from "vite-plugin-filter-replace";
 import path from "node:path";
 import childProcess from "child_process";
 import { checker } from "vite-plugin-checker";
-import { writeFileSync } from "fs";
 // eslint-disable-next-line import/no-unresolved
 import UnpluginInjectPreload from "unplugin-inject-preload/vite";
-import {
-  existsSync,
-  mkdirSync,
-  readdirSync,
-  readFileSync,
-  statSync,
-} from "node:fs";
 import { ViteMinifyPlugin } from "vite-plugin-minify";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { getFontsConig } from "./vite.config";
-import { envConfig } from "./scripts/env-config";
-import { languageHashes } from "./scripts/language-hashes";
+import { fontawesomeSubset } from "./vite-plugins/fontawesome-subset";
+import { fontPreview } from "./vite-plugins/font-preview";
+import { envConfig } from "./vite-plugins/env-config";
+import { languageHashes } from "./vite-plugins/language-hashes";
+import { minifyJson } from "./vite-plugins/minify-json";
+import { versionFile } from "./vite-plugins/version-file";
 
 function pad(numbers, maxLength, fillString) {
   return numbers.map((number) =>
@@ -63,39 +56,9 @@ export default {
   plugins: [
     envConfig({ isDevelopment: false, clientVersion: CLIENT_VERSION }),
     languageHashes(),
-    {
-      name: "vite-plugin-fontawesome-subset",
-      apply: "build",
-      buildStart() {
-        const fontawesomeClasses = getFontawesomeConfig();
-        fontawesomeSubset(fontawesomeClasses, "src/webfonts-generated", {
-          targetFormats: ["woff2"],
-        });
-      },
-    },
-    {
-      name: "generate-version-json",
-      apply: "build",
-
-      closeBundle() {
-        const distPath = path.resolve(__dirname, "dist");
-        if (!existsSync(distPath)) {
-          mkdirSync(distPath, { recursive: true });
-        }
-
-        const version = CLIENT_VERSION;
-        const versionJson = JSON.stringify({ version });
-        const versionPath = path.resolve(distPath, "version.json");
-        writeFileSync(versionPath, versionJson);
-      },
-    },
-    {
-      name: "vite-plugin-webfonts-preview",
-      apply: "build",
-      buildStart() {
-        generatePreviewFonts();
-      },
-    },
+    fontawesomeSubset(),
+    versionFile({ clientVersion: CLIENT_VERSION }),
+    fontPreview(),
     checker({
       typescript: {
         tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
@@ -205,68 +168,7 @@ export default {
       ],
       injectTo: "head-prepend",
     }),
-    {
-      name: "minify-json",
-      apply: "build",
-      generateBundle() {
-        let totalOriginalSize = 0;
-        let totalMinifiedSize = 0;
-
-        const minifyJsonFiles = (dir) => {
-          readdirSync(dir).forEach((file) => {
-            const sourcePath = path.join(dir, file);
-            const stat = statSync(sourcePath);
-
-            if (stat.isDirectory()) {
-              minifyJsonFiles(sourcePath);
-            } else if (path.extname(file) === ".json") {
-              const originalContent = readFileSync(sourcePath, "utf8");
-              const originalSize = Buffer.byteLength(originalContent, "utf8");
-              const minifiedContent = JSON.stringify(
-                JSON.parse(originalContent)
-              );
-              const minifiedSize = Buffer.byteLength(minifiedContent, "utf8");
-
-              totalOriginalSize += originalSize;
-              totalMinifiedSize += minifiedSize;
-
-              writeFileSync(sourcePath, minifiedContent);
-
-              // const savings =
-              //   ((originalSize - minifiedSize) / originalSize) * 100;
-              // console.log(
-              //   `\x1b[0m \x1b[36m${sourcePath}\x1b[0m | ` +
-              //     `\x1b[90mOriginal: ${originalSize} bytes\x1b[0m | ` +
-              //     `\x1b[90mMinified: ${minifiedSize} bytes\x1b[0m | ` +
-              //     `\x1b[32mSavings: ${savings.toFixed(2)}%\x1b[0m`
-              // );
-            }
-          });
-        };
-
-        // console.log("\n\x1b[1mMinifying JSON files...\x1b[0m\n");
-
-        minifyJsonFiles("./dist");
-
-        const totalSavings =
-          ((totalOriginalSize - totalMinifiedSize) / totalOriginalSize) * 100;
-
-        console.log(
-          `\n\n\x1b[1mJSON Minification Summary:\x1b[0m\n` +
-            `  \x1b[90mTotal original size: ${(
-              totalOriginalSize /
-              1024 /
-              1024
-            ).toFixed(2)} mB\x1b[0m\n` +
-            `  \x1b[90mTotal minified size: ${(
-              totalMinifiedSize /
-              1024 /
-              1024
-            ).toFixed(2)} mB\x1b[0m\n` +
-            `  \x1b[32mTotal savings: ${totalSavings.toFixed(2)}%\x1b[0m\n`
-        );
-      },
-    },
+    minifyJson(),
   ],
   build: {
     sourcemap: process.env.SENTRY,
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from "vitest/config";
-import { languageHashes } from "./scripts/language-hashes";
-import { envConfig } from "./scripts/env-config";
+import { languageHashes } from "./vite-plugins/language-hashes";
+import { envConfig } from "./vite-plugins/env-config";
 
 export default defineConfig({
   test: {

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@`
`13`	`13`	`"virtual:env-config": ["./src/ts/virtual-env-config.d.ts"]`
`14`	`14`	`}`
`15`	`15`	`},`
`16`		`- "include": ["./src/*/.ts", "./scripts/*/.ts"],`
	`16`	`+ "include": ["./src/*/.ts", "./scripts/*/.ts", "vite-plugins/*/.ts"],`
`17`	`17`	`"exclude": ["node_modules", "build", "setup-tests.ts", "*/.spec.ts"]`
`18`	`18`	`}`