Minor improvements to zen-mode extension (#435)

* Decided to use `Object.defineProperty` to mark `Blob` objects.
* Removed some stray debugging code.
* Shared some constants.
* Introduced a `jsonStringifyPrettyInDev` utility for the manifest.

Author: miorel

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

@@ -1,30 +1,18 @@
 import { writeFile } from "node:fs/promises";
 import path from "node:path";
 
-import prettier from "prettier";
-
-import { isEnvironmentDev } from "@code-chronicles/util/isEnvironmentDev";
+import { jsonStringifyPrettyInDev } from "@code-chronicles/util/jsonStringifyPrettyInDev";
 
 import { readAllGoodies } from "../package-goodies/readAllGoodies.ts";
 import { WEB_APP_DIST } from "./constants.ts";
 
-async function readAllGoodiesAsString(): Promise<string> {
-  const goodies = await readAllGoodies();
-  const text = JSON.stringify(goodies);
-
-  if (isEnvironmentDev()) {
-    // Could also change the arguments to `JSON.stringify` but thought we
-    // could give Prettier the chance to do something fancier.
-    return await prettier.format(text, { parser: "json" });
-  }
-
-  return text + "\n";
-}
-
 export async function writeGoodiesJson(): Promise<void> {
-  const text = await readAllGoodiesAsString();
+  const goodies = await readAllGoodies();
 
-  await writeFile(path.join(WEB_APP_DIST, "goodies.json"), text, {
-    encoding: "utf8",
-  });
+  // TODO: share the filenames via some constants
+  await writeFile(
+    path.join(WEB_APP_DIST, "goodies.json"),
+    jsonStringifyPrettyInDev(goodies),
+    { encoding: "utf8" },
+  );
 }

workspaces/eslint-config/package.json

@@ -27,7 +27,7 @@
     "@typescript-eslint/parser": "8.5.0",
     "eslint-import-resolver-typescript": "3.6.3",
     "eslint-plugin-import": "2.30.0",
-    "eslint-plugin-import-x": "4.2.1",
+    "eslint-plugin-import-x": "4.3.0",
     "eslint-plugin-jest": "28.8.3",
     "globals": "15.9.0",
     "typescript": "5.6.2"

workspaces/leetcode-zen-mode/package.json

@@ -22,7 +22,8 @@
     "typecheck": "tsc --pretty --project ."
   },
   "dependencies": {
-    "@code-chronicles/util": "workspace:*"
+    "@code-chronicles/util": "workspace:*",
+    "nullthrows": "patch:nullthrows@npm%3A1.1.1#~/.yarn/patches/nullthrows-npm-1.1.1-3d1f817134.patch"
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "workspace:*",
@@ -32,6 +33,7 @@
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "tsx": "4.19.1",
+    "type-fest": "4.26.1",
     "typescript": "5.6.2",
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4"

workspaces/leetcode-zen-mode/src/extension/setUpFileReaderReadAsTextInterception.ts

@@ -5,7 +5,6 @@ export function setUpFileReaderReadAsTextInterception(): void {
   const { readAsText } = FileReader.prototype;
 
   FileReader.prototype.readAsText = function (blob) {
-    (window as unknown as Record<string, unknown>).foo = blob;
     if (!(blob instanceof Blob) || !Object.hasOwn(blob, GRAPHQL_XHR_RESPONSE)) {
       readAsText.apply(
         this,

workspaces/leetcode-zen-mode/src/extension/setUpXhrResponseInterception.ts

@@ -1,3 +1,5 @@
+import nullthrows from "nullthrows";
+
 import { GRAPHQL_XHR_RESPONSE } from "./constants.ts";
 
 export function setUpXhrResponseInterception(): void {
@@ -9,15 +11,20 @@ export function setUpXhrResponseInterception(): void {
   Object.defineProperty(XMLHttpRequest.prototype, "response", {
     ...xhrResponseDescriptor,
     get() {
-      const res = xhrResponseDescriptor.get!.call(this);
+      const res = nullthrows(xhrResponseDescriptor.get).call(this);
+
       if (
         this.responseURL === "https://leetcode.com/graphql/" &&
         res instanceof Blob &&
         res.type === "application/json"
       ) {
-        (res as unknown as Record<PropertyKey, unknown>)[GRAPHQL_XHR_RESPONSE] =
-          true;
+        Object.defineProperty(res, GRAPHQL_XHR_RESPONSE, {
+          enumerable: false,
+          configurable: false,
+          value: undefined,
+        });
       }
+
       return res;
     },
   });

workspaces/leetcode-zen-mode/src/scripts/constants.ts

@@ -0,0 +1,3 @@
+export const DIST_DIRECTORY = "dist";
+
+export const SCRIPT_FILENAME = "main.js";

workspaces/leetcode-zen-mode/src/scripts/getManifest.ts

@@ -0,0 +1,25 @@
+import type { JsonObject } from "type-fest";
+
+import { SCRIPT_FILENAME } from "./constants.ts";
+import packageJson from "../../package.json" with { type: "json" };
+
+export function getManifest(): JsonObject {
+  return {
+    name: "LeetCode Zen Mode",
+    description: packageJson.description,
+    version: packageJson.version,
+
+    // eslint-disable-next-line camelcase
+    manifest_version: 3,
+    // eslint-disable-next-line camelcase
+    content_scripts: [
+      {
+        matches: ["https://*.leetcode.com/*"],
+        js: [SCRIPT_FILENAME],
+        // eslint-disable-next-line camelcase
+        run_at: "document_start",
+        world: "MAIN",
+      },
+    ],
+  };
+}

workspaces/leetcode-zen-mode/src/scripts/writeManifest.ts

@@ -1,40 +1,19 @@
 import { mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 
-import packageJson from "../../package.json" with { type: "json" };
+import { jsonStringifyPrettyInDev } from "@code-chronicles/util/jsonStringifyPrettyInDev";
 
-// TODO: figure out a way to reuse this in webpack and eslint configs
-const DIST_DIRECTORY = "dist";
+import { DIST_DIRECTORY } from "./constants.ts";
+import { getManifest } from "./getManifest.ts";
 
 async function main(): Promise<void> {
   await mkdir(DIST_DIRECTORY, { recursive: true });
 
+  const manifest = getManifest();
+
   await writeFile(
     path.join(DIST_DIRECTORY, "manifest.json"),
-    JSON.stringify(
-      {
-        name: "LeetCode Zen Mode",
-        description: packageJson.description,
-        version: packageJson.version,
-
-        // eslint-disable-next-line camelcase
-        manifest_version: 3,
-        // eslint-disable-next-line camelcase
-        content_scripts: [
-          {
-            matches: ["https://*.leetcode.com/*"],
-            // TODO: share this constant with webpack
-            js: ["main.js"],
-            // eslint-disable-next-line camelcase
-            run_at: "document_start",
-            world: "MAIN",
-          },
-        ],
-      },
-      // TODO: prettify or not based on NODE_ENV
-      null,
-      2,
-    ) + "\n",
+    jsonStringifyPrettyInDev(manifest),
     { encoding: "utf8" },
   );
 }

workspaces/util/src/jsonStringifyPrettyInDev.ts

@@ -0,0 +1,7 @@
+import { isEnvironmentDev } from "@code-chronicles/util/isEnvironmentDev";
+
+export function jsonStringifyPrettyInDev(value: unknown): string {
+  return isEnvironmentDev()
+    ? JSON.stringify(value, null, 2)
+    : JSON.stringify(value);
+}