Use fork-ts-checker-webpack-plugin to typecheck during webpack (#449)

Author: miorel

workspaces/adventure-pack/package.json

@@ -75,6 +75,7 @@
     "@types/react-syntax-highlighter": "15.5.13",
     "cross-env": "7.0.3",
     "eslint": "9.11.1",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
     "jest": "29.7.0",
     "prettier": "3.3.3",
     "prettier-plugin-java": "2.6.4",

workspaces/adventure-pack/webpack.config.ts

@@ -1,7 +1,8 @@
 import { execSync } from "node:child_process";
 import path from "node:path";
 
-import webpack, { type Configuration } from "webpack";
+import { DefinePlugin, type Configuration } from "webpack";
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 
 import { WEB_APP_DIST } from "./src/scripts/build/constants.ts";
 
@@ -24,7 +25,6 @@ const config: Configuration = {
           {
             loader: "ts-loader",
             options: {
-              // TODO: Consider using fork-ts-checker-webpack-plugin for typechecking.
               transpileOnly: true,
             },
           },
@@ -39,9 +39,11 @@ const config: Configuration = {
   },
 
   plugins: [
-    new webpack.DefinePlugin({
+    new DefinePlugin({
       ADVENTURE_PACK_COMMIT_HASH: JSON.stringify(commitHash),
     }),
+
+    new ForkTsCheckerWebpackPlugin(),
   ],
 
   optimization: {

workspaces/download-leetcode-submissions/package.json

@@ -32,6 +32,7 @@
     "@types/node": "22.7.4",
     "cross-env": "7.0.3",
     "eslint": "9.11.1",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "tsx": "4.19.1",

workspaces/download-leetcode-submissions/webpack.config.ts

@@ -1,10 +1,12 @@
 import { builtinModules } from "node:module";
 import path from "node:path";
 
-import webpack, {
+import {
+  BannerPlugin,
   type Configuration,
   type ExternalItemFunctionData,
 } from "webpack";
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 
 import { stripPrefix } from "@code-chronicles/util/stripPrefix";
 import { stripPrefixOrThrow } from "@code-chronicles/util/stripPrefixOrThrow";
@@ -28,7 +30,6 @@ const config: Configuration = {
           {
             loader: "ts-loader",
             options: {
-              // TODO: Consider using fork-ts-checker-webpack-plugin for typechecking.
               transpileOnly: true,
             },
           },
@@ -53,11 +54,13 @@ const config: Configuration = {
     ),
 
   plugins: [
-    new webpack.BannerPlugin({
+    new BannerPlugin({
       banner: "#!/usr/bin/env node\n",
       raw: true,
       entryOnly: true,
     }),
+
+    new ForkTsCheckerWebpackPlugin(),
   ],
 };
 

workspaces/fetch-leetcode-problem-list/package.json

@@ -30,6 +30,7 @@
     "@types/node": "22.7.4",
     "cross-env": "7.0.3",
     "eslint": "9.11.1",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "tsx": "4.19.1",

workspaces/fetch-leetcode-problem-list/webpack.config.ts

@@ -2,11 +2,13 @@ import { chmod } from "node:fs/promises";
 import { builtinModules } from "node:module";
 import path from "node:path";
 
-import webpack, {
+import {
+  BannerPlugin,
   type Compiler,
   type Configuration,
   type ExternalItemFunctionData,
 } from "webpack";
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 
 import { stripPrefix } from "@code-chronicles/util/stripPrefix";
 import { stripPrefixOrThrow } from "@code-chronicles/util/stripPrefixOrThrow";
@@ -16,7 +18,7 @@ import packageJson from "./package.json" with { type: "json" };
 class WebpackMakeOutputExecutablePlugin {
   // eslint-disable-next-line class-methods-use-this -- This is the interface expected by webpack.
   apply(compiler: Compiler): void {
-    compiler.hooks.afterEmit.tapAsync(
+    compiler.hooks.afterEmit.tapPromise(
       "WebpackMakeOutputExecutablePlugin",
       async (compilation) => {
         const promises: Promise<void>[] = [];
@@ -59,7 +61,6 @@ const config: Configuration = {
           {
             loader: "ts-loader",
             options: {
-              // TODO: Consider using fork-ts-checker-webpack-plugin for typechecking.
               transpileOnly: true,
             },
           },
@@ -84,13 +85,15 @@ const config: Configuration = {
     ),
 
   plugins: [
-    new webpack.BannerPlugin({
+    new BannerPlugin({
       banner: "#!/usr/bin/env node\n",
       raw: true,
       entryOnly: true,
     }),
 
     new WebpackMakeOutputExecutablePlugin(),
+
+    new ForkTsCheckerWebpackPlugin(),
   ],
 };
 

workspaces/fetch-recent-accepted-leetcode-submissions/package.json

@@ -30,6 +30,7 @@
     "@types/node": "22.7.4",
     "cross-env": "7.0.3",
     "eslint": "9.11.1",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "tsx": "4.19.1",

workspaces/fetch-recent-accepted-leetcode-submissions/webpack.config.ts

@@ -1,10 +1,12 @@
 import { builtinModules } from "node:module";
 import path from "node:path";
 
-import webpack, {
+import {
+  BannerPlugin,
   type Configuration,
   type ExternalItemFunctionData,
 } from "webpack";
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 
 import { stripPrefix } from "@code-chronicles/util/stripPrefix";
 import { stripPrefixOrThrow } from "@code-chronicles/util/stripPrefixOrThrow";
@@ -28,7 +30,6 @@ const config: Configuration = {
           {
             loader: "ts-loader",
             options: {
-              // TODO: Consider using fork-ts-checker-webpack-plugin for typechecking.
               transpileOnly: true,
             },
           },
@@ -53,11 +54,13 @@ const config: Configuration = {
     ),
 
   plugins: [
-    new webpack.BannerPlugin({
+    new BannerPlugin({
       banner: "#!/usr/bin/env node\n",
       raw: true,
       entryOnly: true,
     }),
+
+    new ForkTsCheckerWebpackPlugin(),
   ],
 };
 

workspaces/leetcode-zen-mode/package.json

@@ -30,6 +30,7 @@
     "@types/node": "22.7.4",
     "cross-env": "7.0.3",
     "eslint": "9.11.1",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
     "prettier": "3.3.3",
     "ts-loader": "9.5.1",
     "tsx": "4.19.1",

workspaces/leetcode-zen-mode/webpack.config.ts

@@ -1,6 +1,7 @@
 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" };
 
@@ -20,7 +21,6 @@ const config: Configuration = {
           {
             loader: "ts-loader",
             options: {
-              // TODO: Consider using fork-ts-checker-webpack-plugin for typechecking.
               transpileOnly: true,
             },
           },
@@ -33,6 +33,8 @@ const config: Configuration = {
   resolve: {
     conditionNames: ["import"],
   },
+
+  plugins: [new ForkTsCheckerWebpackPlugin()],
 };
 
 export default config;