feat: add ForkTsChecker

packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap

@@ -158,6 +158,14 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
     ]
   },
   plugins: [
+    /* config.plugin('ForkTsCheckerWebpackPlugin') */
+    new ForkTsCheckerWebpackPlugin(
+      {
+        typescript: {
+          memoryLimit: 4096
+        }
+      }
+    ),
     /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {
@@ -383,6 +391,14 @@ exports[`react configuration > android > base config 1`] = `
     ]
   },
   plugins: [
+    /* config.plugin('ForkTsCheckerWebpackPlugin') */
+    new ForkTsCheckerWebpackPlugin(
+      {
+        typescript: {
+          memoryLimit: 4096
+        }
+      }
+    ),
     /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {
@@ -608,6 +624,14 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
     ]
   },
   plugins: [
+    /* config.plugin('ForkTsCheckerWebpackPlugin') */
+    new ForkTsCheckerWebpackPlugin(
+      {
+        typescript: {
+          memoryLimit: 4096
+        }
+      }
+    ),
     /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {
@@ -836,6 +860,14 @@ exports[`react configuration > ios > base config 1`] = `
     ]
   },
   plugins: [
+    /* config.plugin('ForkTsCheckerWebpackPlugin') */
+    new ForkTsCheckerWebpackPlugin(
+      {
+        typescript: {
+          memoryLimit: 4096
+        }
+      }
+    ),
     /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {

packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap

@@ -138,7 +138,8 @@ exports[`svelte configuration for android 1`] = `
               hotOptions: {
                 injectCss: false,
                 'native': true
-              }
+              },
+              onwarn: function () { /* omitted long function */ }
             }
           }
         ]
@@ -172,6 +173,14 @@ exports[`svelte configuration for android 1`] = `
     ]
   },
   plugins: [
+    /* config.plugin('ForkTsCheckerWebpackPlugin') */
+    new ForkTsCheckerWebpackPlugin(
+      {
+        typescript: {
+          memoryLimit: 4096
+        }
+      }
+    ),
     /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {
@@ -375,7 +384,8 @@ exports[`svelte configuration for ios 1`] = `
               hotOptions: {
                 injectCss: false,
                 'native': true
-              }
+              },
+              onwarn: function () { /* omitted long function */ }
             }
           }
         ]
@@ -409,6 +419,14 @@ exports[`svelte configuration for ios 1`] = `
     ]
   },
   plugins: [
+    /* config.plugin('ForkTsCheckerWebpackPlugin') */
+    new ForkTsCheckerWebpackPlugin(
+      {
+        typescript: {
+          memoryLimit: 4096
+        }
+      }
+    ),
     /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {

packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap

@@ -169,6 +169,20 @@ exports[`vue configuration for android 1`] = `
   plugins: [
     /* config.plugin('VueLoaderPlugin') */
     new VueLoaderPlugin(),
+    /* config.plugin('ForkTsCheckerWebpackPlugin') */
+    new ForkTsCheckerWebpackPlugin(
+      {
+        typescript: {
+          memoryLimit: 4096,
+          extensions: {
+            vue: {
+              enabled: true,
+              compiler: 'nativescript-vue-template-compiler'
+            }
+          }
+        }
+      }
+    ),
     /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {
@@ -403,6 +417,20 @@ exports[`vue configuration for ios 1`] = `
   plugins: [
     /* config.plugin('VueLoaderPlugin') */
     new VueLoaderPlugin(),
+    /* config.plugin('ForkTsCheckerWebpackPlugin') */
+    new ForkTsCheckerWebpackPlugin(
+      {
+        typescript: {
+          memoryLimit: 4096,
+          extensions: {
+            vue: {
+              enabled: true,
+              compiler: 'nativescript-vue-template-compiler'
+            }
+          }
+        }
+      }
+    ),
     /* config.plugin('CleanWebpackPlugin') */
     new CleanWebpackPlugin(
       {

packages/webpack5/jest.setup.ts

@@ -11,6 +11,17 @@ jest.mock(
 	{ virtual: true }
 );
 
+jest.mock('cosmiconfig', () => ({
+	cosmiconfigSync(moduleName) {
+		return {
+			search() {
+				// no-op in tests
+				return null;
+			},
+		};
+	},
+}));
+
 jest.mock('path', () => ({
 	...jest.requireActual('path'),
 	// we are mocking resolve to just simply join the paths for tests

packages/webpack5/package.json

@@ -26,6 +26,7 @@
 		"copy-webpack-plugin": "^6.3.2",
 		"css": "^3.0.0",
 		"css-loader": "^5.0.1",
+		"fork-ts-checker-webpack-plugin": "^6.0.3",
 		"loader-utils": "^2.0.0",
 		"react-refresh": "^0.9.0",
 		"sass": "^1.29.0",

packages/webpack5/src/configuration/base.ts

@@ -2,6 +2,7 @@ import { DefinePlugin, HotModuleReplacementPlugin } from 'webpack';
 import Config from 'webpack-chain';
 import path from 'path';
 
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
@@ -134,6 +135,15 @@ export default function (config: Config, env: IWebpackEnv): Config {
 			},
 		});
 
+	// Use Fork TS Checker to do type checking in a separate non-blocking process
+	config.plugin('ForkTsCheckerWebpackPlugin').use(ForkTsCheckerWebpackPlugin, [
+		{
+			typescript: {
+				memoryLimit: 4096,
+			},
+		},
+	]);
+
 	// set up js
 	// todo: do we need babel-loader? It's useful to support it
 	config.module

packages/webpack5/src/configuration/vue.ts

@@ -39,6 +39,20 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 			});
 		});
 
+	config.plugin('ForkTsCheckerWebpackPlugin').tap((args) => {
+		args[0] = merge(args[0], {
+			typescript: {
+				extensions: {
+					vue: {
+						enabled: true,
+						compiler: 'nativescript-vue-template-compiler',
+					},
+				},
+			},
+		});
+		return args;
+	});
+
 	// add VueLoaderPlugin as the first plugin
 	config
 		.plugin('VueLoaderPlugin')