Use a webpack plugin to generate Adventure Pack index.html (#487)

miorel · web-flow · commit 3d69c981c778 · 2024-10-30T20:16:57.000-07:00
This allows the file to be written when we run webpack in watch mode.
diff --git a/workspaces/adventure-pack/src/scripts/build/WriteIndexHtmlWebpackPlugin.tsx b/workspaces/adventure-pack/src/scripts/build/WriteIndexHtmlWebpackPlugin.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import ReactDOMServer from "react-dom/server";
+import type { Compiler } from "webpack";
+
+import { App } from "../../app/components/App.tsx";
+
+export class WriteIndexHtmlWebpackPlugin {
+  constructor(private commitHash: string) {}
+
+  apply(compiler: Compiler) {
+    compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: this.constructor.name,
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        },
+        () => {
+          compilation.emitAsset(
+            "index.html",
+            new compiler.webpack.sources.RawSource(
+              "<!DOCTYPE html>\n" +
+                ReactDOMServer.renderToStaticMarkup(
+                  <html lang="en-US">
+                    <head>
+                      <meta charSet="utf-8" />
+                      <title>Adventure Pack</title>
+                      <link
+                        rel="preconnect"
+                        href="https://fonts.googleapis.com"
+                        crossOrigin=""
+                      />
+                      <link
+                        rel="preconnect"
+                        href="https://fonts.gstatic.com"
+                        crossOrigin=""
+                      />
+                      <link
+                        href="https://fonts.googleapis.com/css2?family=Courgette&display=swap"
+                        rel="stylesheet"
+                      />
+                      <script async src="main.js" />
+                      <script async src="dependencies.js" />
+                      <link href="style.css" rel="stylesheet" />
+                    </head>
+                    <body>
+                      <div id="main">
+                        <App commitHash={this.commitHash} />
+                      </div>
+                    </body>
+                  </html>,
+                ) +
+                "\n",
+            ),
+          );
+        },
+      );
+    });
+  }
+}
diff --git a/workspaces/adventure-pack/src/scripts/build/main.ts b/workspaces/adventure-pack/src/scripts/build/main.ts
@@ -3,18 +3,12 @@ import { mkdir } from "node:fs/promises";
 import { WEB_APP_DIST } from "./constants.ts";
 import { runWebpack } from "./runWebpack.ts";
 import { writeGoodiesJson } from "./writeGoodiesJson.ts";
-import { writeIndexHtml } from "./writeIndexHtml.tsx";
 import { writeStyleCss } from "./writeStyleCss.ts";
 
 async function main(): Promise<void> {
   await mkdir(WEB_APP_DIST, { recursive: true });
 
-  await Promise.all([
-    runWebpack(),
-    writeIndexHtml(),
-    writeGoodiesJson(),
-    writeStyleCss(),
-  ]);
+  await Promise.all([runWebpack(), writeGoodiesJson(), writeStyleCss()]);
 }
 
 main().catch((err) => {
diff --git a/workspaces/adventure-pack/src/scripts/build/writeIndexHtml.tsx b/workspaces/adventure-pack/src/scripts/build/writeIndexHtml.tsx
diff --git a/workspaces/adventure-pack/webpack.config.ts b/workspaces/adventure-pack/webpack.config.ts
@@ -5,6 +5,7 @@ import { DefinePlugin, type Configuration } from "webpack";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 
 import { WEB_APP_DIST } from "./src/scripts/build/constants.ts";
+import { WriteIndexHtmlWebpackPlugin } from "./src/scripts/build/WriteIndexHtmlWebpackPlugin.tsx";
 
 const commitHash = execSync("git rev-parse HEAD").toString().trim();
 
@@ -43,6 +44,8 @@ const config: Configuration = {
       ADVENTURE_PACK_COMMIT_HASH: JSON.stringify(commitHash),
     }),
 
+    new WriteIndexHtmlWebpackPlugin(commitHash),
+
     new ForkTsCheckerWebpackPlugin(),
   ],
 
diff --git a/workspaces/webpack-chrome-extension-manifest-plugin/src/main.ts b/workspaces/webpack-chrome-extension-manifest-plugin/src/main.ts
@@ -7,7 +7,7 @@ export class WebpackChromeExtensionManifestPlugin {
   constructor(private manifest: JsonObject) {}
 
   apply(compiler: Compiler) {
-    compiler.hooks.compilation.tap("ManifestPlugin", (compilation) => {
+    compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
       compilation.hooks.processAssets.tap(
         {
           name: this.constructor.name,

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ export class WebpackChromeExtensionManifestPlugin {`
`7`	`7`	`constructor(private manifest: JsonObject) {}`
`8`	`8`
`9`	`9`	`apply(compiler: Compiler) {`
`10`		`- compiler.hooks.compilation.tap("ManifestPlugin", (compilation) => {`
	`10`	`+ compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {`
`11`	`11`	`compilation.hooks.processAssets.tap(`
`12`	`12`	`{`
`13`	`13`	`name: this.constructor.name,`