Add a side panel Chrome extension within the Adventure Pack

miorel · miorel · commit 74a9ffc0edf0 · 2024-08-25T17:26:09.000-07:00
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 .",
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/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/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/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/src/scripts/scrapeGraphQLSchema.ts b/workspaces/leetcode-api/src/scripts/scrapeGraphQLSchema.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/util/src/writeToTemporaryFile.ts b/workspaces/util/src/writeToTemporaryFile.ts
@@ -1,15 +1,16 @@
-import fsPromises from "node:fs/promises";
+import { writeFile } from "node:fs/promises";
 
 import { createTemporaryFile } from "@code-chronicles/util/createTemporaryFile";
 
 export async function writeToTemporaryFile(
-  data: Parameters<typeof fsPromises.writeFile>[1],
+  data: Parameters<typeof writeFile>[1],
+  options?: Parameters<typeof writeFile>[2],
   { prefix = "", suffix = "" }: { prefix?: string; suffix?: string } = {},
 ): Promise<string> {
   let fh, filename;
   try {
     [filename, fh] = await createTemporaryFile(prefix, suffix);
-    await fsPromises.writeFile(fh, data);
+    await writeFile(fh, data, options);
     return filename;
   } finally {
     fh && (await fh.close());
