Add a side panel Chrome extension within the Adventure Pack (#380)

miorel · web-flow · commit e8a7763cfa05 · 2024-08-30T19:39:38.000-07:00
A starting point for adding in the Adventure Pack!
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "eslint": "9.9.0",
+    "eslint": "9.9.1",
     "prettier": "3.3.3"
   },
   "packageManager": "yarn@4.4.1"
diff --git a/workspaces/adventure-pack/package.json b/workspaces/adventure-pack/package.json
@@ -48,6 +48,7 @@
     "goodies:typescript:install": "yarn",
     "goodies:typescript:test": "jest --color goodies/typescript",
     "build-app": "tsx src/scripts/build/main.ts",
+    "build-chrome-extension": "ts-node src/scripts/build/buildChromeExtension.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 .",
@@ -67,22 +68,22 @@
     "@code-chronicles/eslint-config": "0.0.1",
     "@code-chronicles/util": "0.0.1",
     "@jest/globals": "29.7.0",
-    "@types/node": "22.5.0",
-    "@types/react": "18.3.3",
+    "@types/node": "22.5.1",
+    "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@types/react-syntax-highlighter": "15.5.13",
     "cross-env": "7.0.3",
-    "eslint": "9.9.0",
+    "eslint": "9.9.1",
     "invariant": "2.2.4",
     "jest": "29.7.0",
     "prettier": "3.3.3",
     "prettier-plugin-java": "2.6.4",
-    "ts-jest": "29.2.4",
+    "ts-jest": "29.2.5",
     "ts-loader": "9.5.1",
     "ts-morph": "23.0.0",
     "ts-node": "10.9.2",
-    "tsx": "4.17.0",
-    "type-fest": "4.24.0",
+    "tsx": "4.19.0",
+    "type-fest": "4.26.0",
     "typescript": "5.5.4",
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
diff --git a/workspaces/adventure-pack/src/scripts/build/buildChromeExtension.ts b/workspaces/adventure-pack/src/scripts/build/buildChromeExtension.ts
@@ -0,0 +1,55 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import { CHROME_EXTENSION_DIST } from "./constants";
+
+async function main(): Promise<void> {
+  await mkdir(CHROME_EXTENSION_DIST, { recursive: true });
+
+  await writeFile(
+    path.join(CHROME_EXTENSION_DIST, "manifest.json"),
+    JSON.stringify(
+      {
+        name: "Adventure Pack",
+        // TODO: get a nice description from the package.json perhaps
+        description: "TODO: add a nice description",
+        // TODO: get a version from the package.json perhaps
+        version: "0.0.1",
+
+        // eslint-disable-next-line camelcase
+        manifest_version: 3,
+        // eslint-disable-next-line camelcase
+        side_panel: {
+          // eslint-disable-next-line camelcase
+          default_path: "index.html",
+        },
+        permissions: ["sidePanel"],
+      },
+      null,
+      2,
+    ) + "\n",
+    { encoding: "utf8" },
+  );
+
+  await writeFile(
+    path.join(CHROME_EXTENSION_DIST, "index.html"),
+    `
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>Adventure Pack</title>
+  </head>
+  <body>
+    <div id="main">Hello World!</div>
+  </body>
+</html>
+    `,
+    { encoding: "utf8" },
+  );
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exitCode = 1;
+});
diff --git a/workspaces/adventure-pack/src/scripts/build/constants.ts b/workspaces/adventure-pack/src/scripts/build/constants.ts
@@ -1,3 +1,4 @@
 import path from "node:path";
 
-export const WEBAPP_DIST = path.resolve("dist", "web-app");
+export const CHROME_EXTENSION_DIST = path.resolve("dist", "chrome-extension");
+export const WEB_APP_DIST = path.resolve("dist", "web-app");
diff --git a/workspaces/adventure-pack/src/scripts/build/main.ts b/workspaces/adventure-pack/src/scripts/build/main.ts
@@ -1,6 +1,6 @@
 import { mkdir } from "node:fs/promises";
 
-import { WEBAPP_DIST } from "./constants";
+import { WEB_APP_DIST } from "./constants";
 import { runWebpack } from "./runWebpack";
 import { writeGoodiesJson } from "./writeGoodiesJson";
 import { writeIndexHtml } from "./writeIndexHtml";
@@ -9,7 +9,7 @@ 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 mkdir(WEB_APP_DIST, { recursive: true });
 
   await Promise.all([
     runWebpack(),
diff --git a/workspaces/adventure-pack/src/scripts/build/writeGoodiesJson.ts b/workspaces/adventure-pack/src/scripts/build/writeGoodiesJson.ts
@@ -6,7 +6,7 @@ import prettier from "prettier";
 import { isEnvironmentDev } from "@code-chronicles/util/isEnvironmentDev";
 
 import { readAllGoodies } from "../package-goodies/readAllGoodies";
-import { WEBAPP_DIST } from "./constants";
+import { WEB_APP_DIST } from "./constants";
 
 async function readAllGoodiesAsString(): Promise<string> {
   const goodies = await readAllGoodies();
@@ -24,5 +24,7 @@ async function readAllGoodiesAsString(): Promise<string> {
 export async function writeGoodiesJson(): Promise<void> {
   const text = await readAllGoodiesAsString();
 
-  await writeFile(path.join(WEBAPP_DIST, "goodies.json"), text);
+  await writeFile(path.join(WEB_APP_DIST, "goodies.json"), text, {
+    encoding: "utf8",
+  });
 }
diff --git a/workspaces/adventure-pack/src/scripts/build/writeIndexHtml.tsx b/workspaces/adventure-pack/src/scripts/build/writeIndexHtml.tsx
@@ -1,13 +1,13 @@
 import { exec as execWithCallback } from "node:child_process";
-import { mkdir, writeFile } from "node:fs/promises";
+import { writeFile } from "node:fs/promises";
 import path from "node:path";
 import { promisify } from "node:util";
 
 import React from "react";
 import ReactDOMServer from "react-dom/server";
 
 import { App } from "../../app/components/App";
-import { WEBAPP_DIST } from "./constants";
+import { WEB_APP_DIST } from "./constants";
 
 const exec = promisify(execWithCallback);
 
@@ -16,9 +16,8 @@ const exec = promisify(execWithCallback);
 export async function writeIndexHtml(): Promise<void> {
   const commitHash = (await exec("git rev-parse HEAD")).stdout.trim();
 
-  await mkdir(WEBAPP_DIST, { recursive: true });
   await writeFile(
-    path.join(WEBAPP_DIST, "index.html"),
+    path.join(WEB_APP_DIST, "index.html"),
     "<!DOCTYPE html>\n" +
       ReactDOMServer.renderToStaticMarkup(
         <html lang="en-US">
@@ -51,5 +50,6 @@ export async function writeIndexHtml(): Promise<void> {
         </html>,
       ) +
       "\n",
+    { encoding: "utf8" },
   );
 }
diff --git a/workspaces/adventure-pack/src/scripts/build/writeStyleCss.ts b/workspaces/adventure-pack/src/scripts/build/writeStyleCss.ts
@@ -1,11 +1,11 @@
 import { copyFile } from "node:fs/promises";
 import path from "node:path";
 
-import { WEBAPP_DIST } from "./constants";
+import { WEB_APP_DIST } from "./constants";
 
 export async function writeStyleCss(): Promise<void> {
   await copyFile(
     path.join("css", "style.css"),
-    path.join(WEBAPP_DIST, "style.css"),
+    path.join(WEB_APP_DIST, "style.css"),
   );
 }
diff --git a/workspaces/adventure-pack/webpack.config.ts b/workspaces/adventure-pack/webpack.config.ts
@@ -3,16 +3,17 @@ import path from "node:path";
 
 import webpack, { type Configuration } from "webpack";
 
-import { WEBAPP_DIST } from "./src/scripts/build/constants";
+import { WEB_APP_DIST } from "./src/scripts/build/constants";
 
 const commitHash = execSync("git rev-parse HEAD").toString().trim();
 
 const config: Configuration = {
   target: "web",
+  // TODO: for Chrome extension we will need devtool: "cheap-source-map" since we can't eval.
   entry: "./src/app/main.tsx",
   output: {
     filename: "[name].js",
-    path: path.resolve(__dirname, WEBAPP_DIST),
+    path: path.resolve(__dirname, WEB_APP_DIST),
   },
 
   module: {
diff --git a/workspaces/chrome-extension-hello-world/package.json b/workspaces/chrome-extension-hello-world/package.json
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.5.0",
+    "@types/node": "22.5.1",
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "typescript": "5.5.4",
diff --git a/workspaces/download-leetcode-submissions/package.json b/workspaces/download-leetcode-submissions/package.json
@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.5.0",
-    "eslint": "9.9.0",
+    "@types/node": "22.5.1",
+    "eslint": "9.9.1",
     "prettier": "3.3.3",
     "typescript": "5.5.4"
   }
diff --git a/workspaces/download-leetcode-submissions/src/main.ts b/workspaces/download-leetcode-submissions/src/main.ts
@@ -1,4 +1,4 @@
-import fsPromises from "node:fs/promises";
+import { mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 import process from "node:process";
 
@@ -92,10 +92,10 @@ async function main(): Promise<void> {
           console.error(`Saving submission ${submission.id} to a file.`);
 
           const dir = getDirnameForSubmission(submission);
-          await fsPromises.mkdir(dir, { recursive: true });
+          await mkdir(dir, { recursive: true });
 
           const filename = getFilenameForSubmission(submission);
-          await fsPromises.writeFile(path.join(dir, filename), code);
+          await writeFile(path.join(dir, filename), code, { encoding: "utf8" });
         });
       }
 
diff --git a/workspaces/download-leetcode-submissions/src/writeSubmissionsMetadataAndHashes.ts b/workspaces/download-leetcode-submissions/src/writeSubmissionsMetadataAndHashes.ts
@@ -1,4 +1,4 @@
-import fsPromises from "node:fs/promises";
+import { writeFile } from "node:fs/promises";
 
 import { METADATA_FILE, HASHES_FILE } from "./constants";
 import { getFilenameForSubmission } from "./getFilenameForSubmission";
@@ -13,14 +13,15 @@ export async function writeSubmissionsMetadataAndHashes(
   );
 
   await Promise.all([
-    fsPromises.writeFile(
+    writeFile(
       METADATA_FILE,
       submissions
         .map((submission) => JSON.stringify(submission) + "\n")
         .join(""),
+      { encoding: "utf8" },
     ),
 
-    fsPromises.writeFile(
+    writeFile(
       HASHES_FILE,
       submissions
         .map(
@@ -31,6 +32,7 @@ export async function writeSubmissionsMetadataAndHashes(
             )}/${getFilenameForSubmission(submission)}\n`,
         )
         .join(""),
+      { encoding: "utf8" },
     ),
   ]);
 }
diff --git a/workspaces/eslint-config/package.json b/workspaces/eslint-config/package.json
@@ -20,17 +20,17 @@
     "lint": "eslint --color --max-warnings=0 ."
   },
   "dependencies": {
-    "@stylistic/eslint-plugin-js": "2.6.2",
-    "@stylistic/eslint-plugin-ts": "2.6.2",
-    "@typescript-eslint/eslint-plugin": "8.0.1",
-    "@typescript-eslint/parser": "8.0.1",
+    "@stylistic/eslint-plugin-js": "2.7.2",
+    "@stylistic/eslint-plugin-ts": "2.7.2",
+    "@typescript-eslint/eslint-plugin": "8.3.0",
+    "@typescript-eslint/parser": "8.3.0",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import-x": "3.1.0",
-    "eslint-plugin-jest": "28.8.0",
+    "eslint-plugin-jest": "28.8.1",
     "globals": "15.9.0"
   },
   "devDependencies": {
-    "eslint": "9.9.0",
+    "eslint": "9.9.1",
     "prettier": "3.3.3"
   }
 }
diff --git a/workspaces/fetch-leetcode-problem-list/package.json b/workspaces/fetch-leetcode-problem-list/package.json
@@ -26,8 +26,8 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.5.0",
-    "eslint": "9.9.0",
+    "@types/node": "22.5.1",
+    "eslint": "9.9.1",
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
diff --git a/workspaces/fetch-leetcode-problem-list/src/main.ts b/workspaces/fetch-leetcode-problem-list/src/main.ts
@@ -1,5 +1,5 @@
 import { constants } from "node:fs";
-import fsPromises from "node:fs/promises";
+import { writeFile } from "node:fs/promises";
 import process from "node:process";
 
 import {
@@ -55,10 +55,13 @@ async function main(): Promise<void> {
     (a, b) => a.questionFrontendId - b.questionFrontendId,
   );
 
-  await fsPromises.writeFile(
+  await writeFile(
     FILENAME,
     problems.map((p) => JSON.stringify(p) + "\n"),
-    { flag: constants.O_CREAT | constants.O_RDWR | constants.O_EXCL },
+    {
+      encoding: "utf8",
+      flag: constants.O_CREAT | constants.O_RDWR | constants.O_EXCL,
+    },
   );
 
   console.error(`Wrote data to: ${FILENAME}`);
diff --git a/workspaces/fetch-recent-accepted-leetcode-submissions/package.json b/workspaces/fetch-recent-accepted-leetcode-submissions/package.json
@@ -26,8 +26,8 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.5.0",
-    "eslint": "9.9.0",
+    "@types/node": "22.5.1",
+    "eslint": "9.9.1",
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
diff --git a/workspaces/generate-health-report/package.json b/workspaces/generate-health-report/package.json
@@ -24,8 +24,8 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.5.0",
-    "eslint": "9.9.0",
+    "@types/node": "22.5.1",
+    "eslint": "9.9.1",
     "prettier": "3.3.3",
     "ts-node": "10.9.2",
     "typescript": "5.5.4"
diff --git a/workspaces/generate-health-report/src/main.ts b/workspaces/generate-health-report/src/main.ts
@@ -12,6 +12,8 @@ import { spawnWithSafeStdio } from "@code-chronicles/util/spawnWithSafeStdio";
 const COMMANDS = [
   "yarn test",
   "yarn workspace @code-chronicles/adventure-pack build-app",
+  "yarn workspace @code-chronicles/adventure-pack build-chrome-extension",
+  "yarn workspace @code-chronicles/chrome-extension-hello-world build",
   "yarn workspace @code-chronicles/fetch-leetcode-problem-list build",
   "yarn workspace @code-chronicles/fetch-recent-accepted-leetcode-submissions build",
   "yarn workspace @code-chronicles/leetcode-api validate-graphql-schema",
@@ -52,7 +54,7 @@ async function main(): Promise<void> {
     });
   }
 
-  await writeFile(outputPath, summary.join(""));
+  await writeFile(outputPath, summary.join(""), { encoding: "utf8" });
 
   maybeThrow(errors);
 }
diff --git a/workspaces/leetcode-api/package.json b/workspaces/leetcode-api/package.json
@@ -28,8 +28,8 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.5.0",
-    "eslint": "9.9.0",
+    "@types/node": "22.5.1",
+    "eslint": "9.9.1",
     "graphql": "16.9.0",
     "prettier": "3.3.3",
     "typescript": "5.5.4"
diff --git a/workspaces/leetcode-api/src/scripts/scrape-graphql-schema/main.ts b/workspaces/leetcode-api/src/scripts/scrape-graphql-schema/main.ts
@@ -102,7 +102,7 @@ async function main(): Promise<void> {
 
   maybeThrow(validateSchema(buildSchema(schema)));
 
-  await writeFile(SCHEMA_FILE, schema);
+  await writeFile(SCHEMA_FILE, schema, { encoding: "utf8" });
 }
 
 main().catch((err) => {
diff --git a/workspaces/post-leetcode-potd-to-discord/package.json b/workspaces/post-leetcode-potd-to-discord/package.json
diff --git a/workspaces/repository-scripts/package.json b/workspaces/repository-scripts/package.json
diff --git a/workspaces/util/package.json b/workspaces/util/package.json
diff --git a/workspaces/util/src/writeToTemporaryFile.ts b/workspaces/util/src/writeToTemporaryFile.ts
diff --git a/yarn.lock b/yarn.lock
