Single script for building the Adventure Pack web app (#378)

Author: miorel

.github/workflows/deploy-github-pages.yml

@@ -48,7 +48,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./workspaces/adventure-pack/dist
+          path: ./workspaces/adventure-pack/dist/web-app
 
       - name: Deploy to GitHub Pages
         id: deployment

.github/workflows/lint.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Set up everything
         uses: ./.github/workflows/set-up-everything
 
-      - name: Linting
+      - name: Lint
         run: yarn lint
         # TODO: Annotations of files that fail lint?
         # TODO: Maybe write up a job summary per https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#adding-a-job-summary

workspaces/adventure-pack/package.json

@@ -47,7 +47,7 @@
     "goodies:typescript:format": "prettier --color --write goodies/typescript",
     "goodies:typescript:install": "yarn",
     "goodies:typescript:test": "jest --color goodies/typescript",
-    "build-app": "ts-node src/scripts/package-goodies/main.ts && tsx src/scripts/build-html.tsx && webpack && cp css/style.css dist/style.css",
+    "build-app": "tsx src/scripts/build/main.ts",
     "package-goodies:test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --color --testPathIgnorePatterns=\"/goodies/\"",
     "format": "yarn goodies:java:format && yarn goodies:kotlin:format && yarn goodies:python3:format && yarn goodies:typescript:format && prettier --color --write .",
     "lint": "eslint --color --max-warnings=0 .",

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

@@ -0,0 +1,3 @@
+import path from "node:path";
+
+export const WEBAPP_DIST = path.resolve("dist", "web-app");

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

@@ -0,0 +1,25 @@
+import { mkdir } from "node:fs/promises";
+
+import { WEBAPP_DIST } from "./constants";
+import { runWebpack } from "./runWebpack";
+import { writeGoodiesJson } from "./writeGoodiesJson";
+import { writeIndexHtml } from "./writeIndexHtml";
+import { writeStyleCss } from "./writeStyleCss";
+
+// TODO: Investigate why this script works with `tsx` but not `ts-node`.
+
+async function main(): Promise<void> {
+  await mkdir(WEBAPP_DIST, { recursive: true });
+
+  await Promise.all([
+    runWebpack(),
+    writeIndexHtml(),
+    writeGoodiesJson(),
+    writeStyleCss(),
+  ]);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exitCode = 1;
+});

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

@@ -0,0 +1,5 @@
+import { spawnWithSafeStdio } from "@code-chronicles/util/spawnWithSafeStdio";
+
+export async function runWebpack(): Promise<void> {
+  await spawnWithSafeStdio("webpack", ["--color"]);
+}

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

@@ -0,0 +1,15 @@
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import { readAllGoodies } from "../package-goodies/readAllGoodies";
+import { WEBAPP_DIST } from "./constants";
+
+export async function writeGoodiesJson(): Promise<void> {
+  const goodies = await readAllGoodies();
+
+  await writeFile(
+    path.join(WEBAPP_DIST, "goodies.json"),
+    // TODO: pretty print if NODE_ENV is "development"
+    JSON.stringify(goodies) + "\n",
+  );
+}

workspaces/adventure-pack/src/scripts/build-html.tsx renamed to workspaces/adventure-pack/src/scripts/build/writeIndexHtml.tsx

@@ -6,18 +6,19 @@ import { promisify } from "node:util";
 import React from "react";
 import ReactDOMServer from "react-dom/server";
 
-import { App } from "../app/components/App";
+import { App } from "../../app/components/App";
+import { WEBAPP_DIST } from "./constants";
 
 const exec = promisify(execWithCallback);
 
 // TODO: Investigate why this script works with `tsx` but not `ts-node`.
 
-async function main(): Promise<void> {
+export async function writeIndexHtml(): Promise<void> {
   const commitHash = (await exec("git rev-parse HEAD")).stdout.trim();
 
-  await mkdir("dist", { recursive: true });
+  await mkdir(WEBAPP_DIST, { recursive: true });
   await writeFile(
-    path.join("dist", "index.html"),
+    path.join(WEBAPP_DIST, "index.html"),
     "<!DOCTYPE html>\n" +
       ReactDOMServer.renderToStaticMarkup(
         <html lang="en-US">
@@ -52,8 +53,3 @@ async function main(): Promise<void> {
       "\n",
   );
 }
-
-main().catch((err) => {
-  console.error(err);
-  process.exitCode = 1;
-});

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

@@ -0,0 +1,11 @@
+import { copyFile } from "node:fs/promises";
+import path from "node:path";
+
+import { WEBAPP_DIST } from "./constants";
+
+export async function writeStyleCss(): Promise<void> {
+  await copyFile(
+    path.join("css", "style.css"),
+    path.join(WEBAPP_DIST, "style.css"),
+  );
+}