Create a plugin to inline initial resources

Author: aryanpingle

esbuild.js

@@ -3,28 +3,32 @@ const esbuild = require("esbuild");
 const {
     esbuildProblemMatcherPlugin,
 } = require("./plugins/esbuildProblemMatchersPlugin");
-const { injectInitialScriptPlugin } = require("./plugins/injectInitialScript");
+const { injectionPlugin } = require("./plugins/injection-plugin");
 
 const production = process.argv.includes("--production");
 const watch = process.argv.includes("--watch");
 
+const commonBuildOptions = {
+    bundle: true,
+    format: "esm",
+    target: "es2020",
+    minify: production,
+    sourcesContent: false,
+    logLevel: "silent",
+    alias: {
+        react: "preact/compat",
+    },
+    allowOverwrite: true,
+};
+
 async function main() {
     const contexts = [];
     // Build the visualization webview code
     contexts.push(
         await esbuild.context({
-            entryPoints: ["src/index.tsx", "src/initial-script.ts"],
-            bundle: true,
-            format: "esm",
-            target: "es2020",
-            minify: production,
-            sourcesContent: false,
-            outdir: "./dist/bundle",
-            metafile: true,
-            logLevel: "silent",
-            alias: {
-                react: "preact/compat",
-            },
+            ...commonBuildOptions,
+            entryPoints: ["src/index.tsx"],
+            outfile: "./dist/bundle/index.js",
             plugins: [
                 esbuildPluginCopy({
                     // Resolve relative to the current working directory
@@ -37,7 +41,22 @@ async function main() {
                         },
                     ],
                 }),
-                injectInitialScriptPlugin,
+                /* add to the end of plugins array */
+                esbuildProblemMatcherPlugin,
+            ],
+        }),
+    );
+    // Build the initial resources (JS and CSS)
+    contexts.push(
+        await esbuild.context({
+            ...commonBuildOptions,
+            entryPoints: ["src/initial-resources/index.ts"],
+            outfile: "./dist/bundle/initial.js",
+            plugins: [
+                injectionPlugin({
+                    inFile: "src/index.ejs",
+                    outFile: "dist/index.html",
+                }),
                 /* add to the end of plugins array */
                 esbuildProblemMatcherPlugin,
             ],
@@ -46,19 +65,13 @@ async function main() {
     // Build the service worker
     contexts.push(
         await esbuild.context({
+            ...commonBuildOptions,
             entryPoints: ["src/service-worker.ts"],
-            bundle: true,
-            format: "esm",
-            target: "es2020",
-            minify: production,
-            sourcesContent: false,
             outdir: "./dist",
-            logLevel: "silent",
             plugins: [
                 /* add to the end of plugins array */
                 esbuildProblemMatcherPlugin,
             ],
-            allowOverwrite: true,
         }),
     );
 

package-lock.json

@@ -13,6 +13,7 @@
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^22.7.4",
+    "ejs": "^3.1.10",
     "esbuild": "^0.23.1",
     "esbuild-plugin-copy": "^2.1.1",
     "preact": "^10.23.2",

package.json

@@ -0,0 +1,39 @@
+const fs = require("fs");
+const ejs = require("ejs");
+
+const pluginName = "injection-plugin";
+
+function injectFile(type, filepath) {
+    const fileContent = fs.readFileSync(filepath).toString().trim();
+    switch (type) {
+        // JS
+        case "js":
+            return `<script type="module">${fileContent}</script>`;
+        // CSS
+        case "css":
+            return `<style>${fileContent}</style>`;
+        // Plaintext
+        case "text":
+            return fileContent;
+        default:
+            throw new Error(
+                `${pluginName}: Injection of type "${type}" not supported`,
+            );
+    }
+}
+
+/**
+ * @returns {import('esbuild').Plugin}
+ */
+module.exports.injectionPlugin = function ({ inFile, outFile }) {
+    return {
+        name: "injection-plugin",
+        setup: (build) => {
+            build.onEnd(() => {
+                const ejsTemplate = fs.readFileSync(inFile).toString();
+                const html = ejs.render(ejsTemplate, { injectFile });
+                fs.writeFileSync(outFile, html);
+            });
+        },
+    };
+};

plugins/injectInitialScript.js

@@ -6,15 +6,14 @@
         <title>Runic - The Tunic Translation Tool</title>
 
         <!-- Initial Script -->
-        <!-- inject:initial-script -->
+        <%- injectFile("js", "dist/bundle/initial.js") %>
+        <!-- Initial CSS -->
+        <%- injectFile("css", "dist/bundle/initial.css") %>
 
         <!-- Preconnect to fonts.gstatic.com -->
         <link rel="preconnect" href="fonts.gstatic.com" />
 
-        <!-- CSS -->
-        <link rel="stylesheet" href="./bundle/index.css" />
-
-        <!-- JS -->
+        <!-- Lazy JS -->
         <script src="./bundle/index.js" async defer></script>
 
         <!-- Google tag (gtag.js) -->
@@ -84,6 +83,9 @@
         />
     </head>
     <body>
+        <!-- Lazy CSS -->
+        <link rel="stylesheet" href="./bundle/index.css" />
+
         <div class="fancy-orb-background">
             <div class="orb orb-red"></div>
             <div class="orb orb-green"></div>
@@ -116,8 +118,8 @@ <h2>Runic translator</h2>
                     <p>
                         Anything you type in English will be translated to
                         phonetic, and then converted to Runic.<br />
-                        Put phrases within '<i>@</i>' to display them in
-                        English, like '<i>@The Librarian@</i>'
+                        Put phrases within '<i>&#64;</i>' to display them in
+                        English, like '<i>&#64;The Librarian&#64;</i>'
                     </p>
                 </section>
                 <div class="runic-editor-container"></div>

plugins/injection-plugin.js

@@ -1,6 +1,3 @@
-import "./fonts.css";
-import "./index.css";
-
 import { render } from "preact";
 import { loadIPADict } from "./ipa";
 import { RunicEditor } from "components/RunicEditor";

public/index.html src/index.ejs

@@ -1,3 +1,6 @@
+import "./fonts.css";
+import "./index.css";
+
 function setTheme() {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     if (mediaQuery.matches) {