Run webpack directly to build Adventure Pack web app (#494)

Instead of having a wrapper for `webpack`, we can use `webpack` plugins to run our additional code. This allows us to use other `webpack` features such as watch mode, for example.

Author: miorel

workspaces/adventure-pack/package.json

@@ -48,7 +48,7 @@
     "goodies:typescript:format": "prettier --color --write goodies/typescript",
     "goodies:typescript:install": "yarn",
     "goodies:typescript:test": "tsx ./jest.config.ts \"/goodies/typescript/\"",
-    "build-app": "tsx src/scripts/build/main.ts",
+    "build-app": "cross-env NODE_OPTIONS=\"--import tsx\" webpack",
     "build-chrome-extension": "tsx src/scripts/build/buildChromeExtension.ts",
     "package-goodies:test": "tsx ./jest.config.ts --testPathIgnorePatterns=\"<rootDir>/goodies/\"",
     "format": "yarn goodies:java:format && yarn goodies:kotlin:format && yarn goodies:python3:format && yarn goodies:typescript:format && prettier --color --write .",
@@ -74,6 +74,7 @@
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/react-syntax-highlighter": "15.5.13",
+    "copy-webpack-plugin": "12.0.2",
     "cross-env": "7.0.3",
     "eslint": "9.14.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",

workspaces/adventure-pack/src/app/constants.ts

@@ -1,5 +1,7 @@
 import type { Language } from "./Language.ts";
 
+export const GOODIES_FILENAME = "goodies.json";
+
 export const LANGUAGE_NAMES: Record<Language, string> = {
   java: "Java",
   javascript: "JavaScript",

workspaces/adventure-pack/src/app/fetchGoodies.ts

@@ -1,6 +1,7 @@
 import type { ReadonlyDeep } from "type-fest";
 import { z } from "zod";
 
+import { GOODIES_FILENAME } from "./constants.ts";
 import { javaGoodyZodType } from "./zod-types/javaGoodyZodType.ts";
 import { javaScriptGoodyZodType } from "./zod-types/javaScriptGoodyZodType.ts";
 import { kotlinGoodyZodType } from "./zod-types/kotlinGoodyZodType.ts";
@@ -18,7 +19,7 @@ const goodiesByLanguage = z.object({
 export type GoodiesByLanguage = ReadonlyDeep<z.infer<typeof goodiesByLanguage>>;
 
 export async function fetchGoodies(): Promise<GoodiesByLanguage> {
-  const response = await fetch("goodies.json");
+  const response = await fetch(GOODIES_FILENAME);
 
   if (!response.ok) {
     throw new Error(`Got status ${response.status} from server!`);

workspaces/adventure-pack/src/scripts/build/WriteGoodiesJsonWebpackPlugin.tsx

@@ -0,0 +1,29 @@
+import type { Compiler } from "webpack";
+
+import { jsonStringifyPrettyInDev } from "@code-chronicles/util/jsonStringifyPrettyInDev";
+
+import { GOODIES_FILENAME } from "../../app/constants.ts";
+import { readAllGoodies } from "../package-goodies/readAllGoodies.ts";
+
+export class WriteGoodiesJsonWebpackPlugin {
+  apply(compiler: Compiler) {
+    compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
+      compilation.hooks.processAssets.tapPromise(
+        {
+          name: this.constructor.name,
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        },
+        async () => {
+          const goodies = await readAllGoodies();
+
+          compilation.emitAsset(
+            GOODIES_FILENAME,
+            new compiler.webpack.sources.RawSource(
+              jsonStringifyPrettyInDev(goodies),
+            ),
+          );
+        },
+      );
+    });
+  }
+}

workspaces/adventure-pack/src/scripts/build/main.ts

@@ -1,10 +1,12 @@
 import { execSync } from "node:child_process";
 import path from "node:path";
 
-import { DefinePlugin, type Configuration } from "webpack";
+import CopyPlugin from "copy-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
+import { DefinePlugin, type Configuration } from "webpack";
 
 import { WEB_APP_DIST } from "./src/scripts/build/constants.ts";
+import { WriteGoodiesJsonWebpackPlugin } from "./src/scripts/build/WriteGoodiesJsonWebpackPlugin.tsx";
 import { WriteIndexHtmlWebpackPlugin } from "./src/scripts/build/WriteIndexHtmlWebpackPlugin.tsx";
 
 const commitHash = execSync("git rev-parse HEAD").toString().trim();
@@ -44,6 +46,9 @@ const config: Configuration = {
       ADVENTURE_PACK_COMMIT_HASH: JSON.stringify(commitHash),
     }),
 
+    // Add the other assets needed for the app.
+    new CopyPlugin({ patterns: [{ from: "css", to: WEB_APP_DIST }] }),
+    new WriteGoodiesJsonWebpackPlugin(),
     new WriteIndexHtmlWebpackPlugin(commitHash),
 
     new ForkTsCheckerWebpackPlugin(),