Process changelog markdown during build process to avoid having to include marked in the build

~5% reduction in app bundle size

Author: Coteh

README.md

@@ -35,7 +35,7 @@ A clone of [2048](https://play2048.co/) created using TypeScript, HTML, and CSS.
 - Confetti animation when player achieves 2048 (using [canvas-confetti](https://github.com/catdad/canvas-confetti) library)
 - Changelog Dialog
     - Shows the contents of [CHANGELOG.md](CHANGELOG.md) in a dialog box in-game
-    - Uses [marked](https://github.com/markedjs/marked) to parse the changelog markdown file into HTML to be displayed in the dialog
+    - Uses [marked](https://github.com/markedjs/marked) during build time to parse the changelog markdown file into HTML to be displayed in the dialog
 
 ## Development Setup
 

plugins/file-transformer.ts

@@ -0,0 +1,52 @@
+import * as fs from "fs";
+import * as path from "path";
+
+export default function fileTransformerPlugin({ input, transformer, output }) {
+    if (!input || !transformer || !output) {
+        throw new Error('fileTransformerPlugin requires "input", "transformer", and "output" options.');
+    }
+
+    return {
+        name: 'file-transformer',
+        async buildStart() {
+            // Do not perform emit file operation in watch mode (ie. `vite dev`)
+            if (this.meta.watchMode) return;
+
+            // Read and process the file during the build start phase
+            const filePath = path.resolve(input);
+            let fileContent;
+
+            try {
+                fileContent = fs.readFileSync(filePath, 'utf-8');
+            } catch (err) {
+                throw new Error(`Failed to read file: ${input} - ${err.message}`);
+            }
+
+            // Transform the content using the provided transformer function
+            const transformedContent = await transformer(fileContent);
+
+            // Emit the processed file as an asset
+            this.emitFile({
+                type: 'asset',
+                fileName: output,
+                source: transformedContent,
+            });
+        },
+        configureServer(server) {
+            server.middlewares.use(async (req, res, next) => {
+                if (req.url === `/${output}`) {
+                    try {
+                        const content = fs.readFileSync(input, 'utf-8');
+                        const transformed = await transformer(content);
+                        res.setHeader('Content-Type', 'text/html');
+                        res.end(transformed);
+                    } catch (err) {
+                        next(err);
+                    }
+                } else {
+                    next();
+                }
+            });
+        },
+    };
+}

src/index.ts

@@ -31,7 +31,6 @@ import posthog from "posthog-js";
 import { UndoManager } from "./manager/undo";
 import { AssetManager } from "./manager/asset";
 import { formatTilesetName } from "./util/format";
-import * as marked from "marked";
 import { FullscreenManager } from "./manager/fullscreen";
 import { ActionIconManager } from "./manager/action-icon";
 import { AppIconManager } from "./manager/app-icon";
@@ -79,14 +78,6 @@ const LANDSCAPE_CLASS_NAME = "landscape";
 
 const CLASSIC_THEME_LABEL = "2048Clone";
 
-let changelogText: string;
-// @ts-ignore TODO: Fix ts error saying that CHANGELOG.md cannot be found
-import("../CHANGELOG.md").then((res) => {
-    fetch(res.default)
-        .then((resp) => resp.text())
-        .then((text) => (changelogText = text));
-});
-
 let isAnimationEnabled = false;
 
 let isPrompted = false;
@@ -1040,8 +1031,10 @@ document.addEventListener("DOMContentLoaded", async () => {
     const changelogLink = document.querySelector("#changelog-link") as HTMLAnchorElement;
     changelogLink.addEventListener("click", async (e) => {
         e.preventDefault();
+        // Fetch changelog
+        // TODO: Cache it
+        const changelog = await fetch("CHANGELOG.html").then((res) => res.text());
         const dialogElem = createDialogContentFromTemplate("#changelog-content");
-        const changelog = await marked.parse(changelogText);
         const changelogElem = dialogElem.querySelector("#changelog-text") as HTMLElement;
         changelogElem.innerHTML = changelog;
         // Capitalize title

vite.config.ts

@@ -5,6 +5,8 @@ import { version } from "./package.json";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import * as childProcess from "child_process";
 import appIconLabel from './plugins/app-labels';
+import fileTransformerPlugin from "./plugins/file-transformer";
+import * as marked from "marked";
 
 const commitHash = childProcess.execSync("git rev-parse --short HEAD").toString();
 
@@ -82,6 +84,11 @@ export default defineConfig(({ mode }) => {
                 ],
                 position: 'bottom',
             }),
+            fileTransformerPlugin({
+                input: 'CHANGELOG.md',
+                transformer: (content) => marked.parse(content),
+                output: 'CHANGELOG.html',
+            }),
             // Must go after all other plugins
             sentryVitePlugin({
                 org: "james-cote",