Enable TypeScript for Hello World extension (#377)

miorel · web-flow · commit 92bfd5182557 · 2024-08-24T14:48:08.000-07:00
The extension should generally work the same as before, but a `yarn build` will be needed to compile the TypeScript code to a runnable extension.
diff --git a/workspaces/adventure-pack/package.json b/workspaces/adventure-pack/package.json
@@ -67,7 +67,7 @@
     "@code-chronicles/eslint-config": "0.0.1",
     "@code-chronicles/util": "0.0.1",
     "@jest/globals": "29.7.0",
-    "@types/node": "22.2.0",
+    "@types/node": "22.5.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/react-syntax-highlighter": "15.5.13",
@@ -84,7 +84,7 @@
     "tsx": "4.17.0",
     "type-fest": "4.24.0",
     "typescript": "5.5.4",
-    "webpack": "5.93.0",
+    "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "zod": "3.23.8"
   }
diff --git a/workspaces/chrome-extension-hello-world/.gitignore b/workspaces/chrome-extension-hello-world/.gitignore
@@ -0,0 +1 @@
+dist/
diff --git a/workspaces/chrome-extension-hello-world/eslint.config.mjs b/workspaces/chrome-extension-hello-world/eslint.config.mjs
@@ -1 +1,3 @@
-export { default } from "@code-chronicles/eslint-config";
+import config from "@code-chronicles/eslint-config";
+
+export default [...config, { ignores: ["dist/"] }];
diff --git a/workspaces/chrome-extension-hello-world/hello.html b/workspaces/chrome-extension-hello-world/hello.html
@@ -1,6 +1,6 @@
 <html>
   <body>
     <h1>Hello Extensions</h1>
-    <script src="popup.js"></script>
+    <script src="dist/main.js"></script>
   </body>
 </html>
diff --git a/workspaces/chrome-extension-hello-world/package.json b/workspaces/chrome-extension-hello-world/package.json
@@ -7,12 +7,20 @@
     "url": "https://github.com/code-chronicles-code/leetcode-curriculum.git",
     "directory": "workspaces/chrome-extension-hello-world"
   },
+  "main": "src/main.ts",
   "scripts": {
+    "build": "webpack",
     "format": "prettier --color --write .",
-    "lint": "eslint --color --max-warnings=0 ."
+    "lint": "eslint --color --max-warnings=0 .",
+    "typecheck": "tsc --pretty --project ."
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "prettier": "3.3.3"
+    "@types/node": "22.5.0",
+    "prettier": "3.3.3",
+    "ts-loader": "9.5.1",
+    "typescript": "5.5.4",
+    "webpack": "5.94.0",
+    "webpack-cli": "5.1.4"
   }
 }
diff --git a/workspaces/chrome-extension-hello-world/popup.js b/workspaces/chrome-extension-hello-world/popup.js
diff --git a/workspaces/chrome-extension-hello-world/src/main.ts b/workspaces/chrome-extension-hello-world/src/main.ts
@@ -0,0 +1 @@
+alert("This is a TypeScript popup!");
diff --git a/workspaces/chrome-extension-hello-world/tsconfig.json b/workspaces/chrome-extension-hello-world/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig-base.json"
+}
diff --git a/workspaces/chrome-extension-hello-world/webpack.config.ts b/workspaces/chrome-extension-hello-world/webpack.config.ts
@@ -0,0 +1,51 @@
+import path from "node:path";
+
+import type { Configuration } from "webpack";
+
+import packageJson from "./package.json";
+
+const config: Configuration = {
+  target: "web",
+  entry: path.resolve(__dirname, packageJson.main),
+  output: {
+    filename: "[name].js",
+    path: path.resolve(__dirname, "dist"),
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              compilerOptions: {
+                noEmit: false,
+              },
+            },
+          },
+        ],
+        exclude: /\bnode_modules\b/,
+      },
+    ],
+  },
+
+  resolve: {
+    extensions: [".tsx", ".ts", "..."],
+  },
+
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        dependencies: {
+          test: /\bnode_modules\b/,
+          name: "dependencies",
+          chunks: "all",
+        },
+      },
+    },
+  },
+};
+
+export default config;
diff --git a/workspaces/download-leetcode-submissions/package.json b/workspaces/download-leetcode-submissions/package.json
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.2.0",
+    "@types/node": "22.5.0",
     "eslint": "9.9.0",
     "prettier": "3.3.3",
     "typescript": "5.5.4"
diff --git a/workspaces/fetch-leetcode-problem-list/package.json b/workspaces/fetch-leetcode-problem-list/package.json
@@ -26,13 +26,13 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.2.0",
+    "@types/node": "22.5.0",
     "eslint": "9.9.0",
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
-    "webpack": "5.93.0",
+    "webpack": "5.94.0",
     "webpack-cli": "5.1.4"
   }
 }
diff --git a/workspaces/fetch-recent-accepted-leetcode-submissions/package.json b/workspaces/fetch-recent-accepted-leetcode-submissions/package.json
@@ -26,13 +26,13 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.2.0",
+    "@types/node": "22.5.0",
     "eslint": "9.9.0",
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
-    "webpack": "5.93.0",
+    "webpack": "5.94.0",
     "webpack-cli": "5.1.4"
   }
 }
diff --git a/workspaces/generate-health-report/package.json b/workspaces/generate-health-report/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.2.0",
+    "@types/node": "22.5.0",
     "eslint": "9.9.0",
     "prettier": "3.3.3",
     "ts-node": "10.9.2",
diff --git a/workspaces/leetcode-api/package.json b/workspaces/leetcode-api/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.2.0",
+    "@types/node": "22.5.0",
     "eslint": "9.9.0",
     "graphql": "16.9.0",
     "prettier": "3.3.3",
diff --git a/workspaces/post-leetcode-potd-to-discord/package.json b/workspaces/post-leetcode-potd-to-discord/package.json
@@ -33,12 +33,12 @@
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
     "@types/invariant": "2.2.37",
-    "@types/node": "22.2.0",
+    "@types/node": "22.5.0",
     "eslint": "9.9.0",
     "prettier": "3.3.3",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
-    "webpack": "5.93.0",
+    "webpack": "5.94.0",
     "webpack-cli": "5.1.4"
   }
 }
diff --git a/workspaces/repository-scripts/package.json b/workspaces/repository-scripts/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
-    "@types/node": "22.2.0",
+    "@types/node": "22.5.0",
     "eslint": "9.9.0",
     "prettier": "3.3.3",
     "ts-node": "10.9.2",
diff --git a/workspaces/repository-scripts/src/scripts.ts b/workspaces/repository-scripts/src/scripts.ts
@@ -68,7 +68,7 @@ export function isScript(value: string): value is Script {
 export const SCRIPTS_TO_SKIP_BY_WORKSPACE: Readonly<
   Record<string, ReadonlySet<Script>>
 > = {
-  "chrome-extension-hello-world": new Set(["test", "typecheck"]),
+  "chrome-extension-hello-world": new Set(["test"]),
   "download-leetcode-submissions": new Set(["test"]),
   "eslint-config": new Set(["test", "typecheck"]),
   "fetch-leetcode-problem-list": new Set(["test"]),
diff --git a/workspaces/util/package.json b/workspaces/util/package.json
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@code-chronicles/eslint-config": "0.0.1",
     "@jest/globals": "29.7.0",
-    "@types/node": "22.2.0",
+    "@types/node": "22.5.0",
     "eslint": "9.9.0",
     "jest": "29.7.0",
     "prettier": "3.3.3",
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "extends": "../../tsconfig-base.json"`
	`3`	`+}`