Add Chrome extension to use Prettier for formatting on LeetCode

Author: miorel

workspaces/leetcode-prettier-extension/.gitignore

@@ -0,0 +1 @@
+dist/

workspaces/leetcode-prettier-extension/README.md

@@ -0,0 +1,32 @@
+# @code-chronicles/leetcode-prettier-extension
+
+Chrome extension to replace LeetCode's code formatter with Prettier.
+
+To use:
+
+1. **Build the extension:**
+
+   ```sh
+   # It's easiest to do this from the package's directory:
+   cd workspaces/leetcode-prettier-extension
+
+   # Install dependencies, if you haven't already:
+   yarn
+
+   # Build the extension:
+   yarn build
+   ```
+
+2. **Load the extension into Chrome.** The built extension will be in a directory named `dist`. You will have to load it as an "unpacked extension", using Developer mode. See [the official tutorial](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked).
+
+## Development
+
+Like the rest of the [Code Chronicles Leetcode ecosystem](../../), this package is structured as a Node module, using [Yarn](https://yarnpkg.com/) as the package manager.
+
+You can install dependencies by running `yarn`, either in this package's directory, or in the repository root. The usual `yarn format`, `yarn lint`, and `yarn typecheck` scripts are available to aid in development and occasionally to annoy. Read more in the repository's general [development guide](../../DEVELOPMENT.md).
+
+This package supports an additional `package.json` script:
+
+### `yarn build`
+
+Builds (an unpacked version of) the extension, in a `dist` directory within the package's workspace.

workspaces/leetcode-prettier-extension/eslint.config.js

@@ -0,0 +1,3 @@
+import config from "@code-chronicles/eslint-config";
+
+export default [...config, { ignores: ["dist/"] }];

workspaces/leetcode-prettier-extension/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@code-chronicles/leetcode-prettier-extension",
+  "description": "TODO: add a nice description",
+  "version": "0.0.1",
+  "license": "MIT",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code-chronicles-code/leetcode-curriculum.git",
+    "directory": "workspaces/leetcode-prettier-extension"
+  },
+  "author": {
+    "name": "Miorel-Lucian Palii",
+    "url": "https://github.com/miorel"
+  },
+  "type": "module",
+  "exports": "./src/extension/main.ts",
+  "scripts": {
+    "build": "tsx src/scripts/writeManifest.ts && cross-env NODE_OPTIONS=\"--import tsx\" webpack",
+    "format": "prettier --color --write .",
+    "lint": "eslint --color --max-warnings=0 .",
+    "typecheck": "tsc --pretty --project ."
+  },
+  "dependencies": {
+    "prettier": "3.3.3"
+  },
+  "devDependencies": {
+    "@code-chronicles/eslint-config": "workspace:*",
+    "@code-chronicles/util": "workspace:*",
+    "@types/node": "22.7.5",
+    "cross-env": "7.0.3",
+    "eslint": "9.12.0",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
+    "ts-loader": "9.5.1",
+    "tsx": "4.19.1",
+    "type-fest": "4.26.1",
+    "typescript": "5.6.3",
+    "webpack": "5.95.0",
+    "webpack-cli": "5.1.4"
+  }
+}

workspaces/leetcode-prettier-extension/src/extension/main.ts

@@ -0,0 +1,33 @@
+import { format } from "prettier/standalone";
+import estreePlugin from "prettier/plugins/estree";
+import tsPlugin from "prettier/plugins/typescript";
+
+function main(): void {
+  // TODO: improve types
+  let monaco: any = undefined;
+
+  Object.defineProperty(globalThis, "monaco", {
+    get() {
+      return monaco;
+    },
+
+    set(newMonaco) {
+      monaco = newMonaco;
+      monaco.editor.onDidCreateEditor((ed: any) => {
+        const { getAction } = ed;
+        ed.getAction = function (this: unknown) {
+          const action = getAction.apply(this, arguments);
+          action.run = function () {
+            format(ed.getModel().getValue(), {
+              parser: "typescript",
+              plugins: [estreePlugin, tsPlugin],
+            }).then((text) => ed.getModel().setValue(text));
+          };
+          return action;
+        };
+      });
+    },
+  });
+}
+
+main();

workspaces/leetcode-prettier-extension/src/scripts/constants.ts

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

workspaces/leetcode-prettier-extension/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 Prettier",
+    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-prettier-extension/src/scripts/writeManifest.ts

@@ -0,0 +1,24 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import { jsonStringifyPrettyInDev } from "@code-chronicles/util/jsonStringifyPrettyInDev";
+
+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"),
+    jsonStringifyPrettyInDev(manifest),
+    { encoding: "utf8" },
+  );
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exitCode = 1;
+});

workspaces/leetcode-prettier-extension/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig-base.json"
+}

workspaces/leetcode-prettier-extension/webpack.config.ts

@@ -0,0 +1,40 @@
+import path from "node:path";
+
+import type { Configuration } from "webpack";
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
+
+import packageJson from "./package.json" with { type: "json" };
+
+const config: Configuration = {
+  target: "web",
+  entry: path.resolve(__dirname, packageJson.exports),
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "dist"),
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+            },
+          },
+        ],
+        exclude: /\bnode_modules\b/,
+      },
+    ],
+  },
+
+  resolve: {
+    conditionNames: ["import"],
+  },
+
+  plugins: [new ForkTsCheckerWebpackPlugin()],
+};
+
+export default config;