diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap index 6edd42dfb..38dbadddc 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap +++ b/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( { diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap index edeabb073..d7abbb0d3 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap +++ b/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( { diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap index 382b7f4aa..bb499c011 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap +++ b/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( { diff --git a/packages/webpack5/jest.setup.ts b/packages/webpack5/jest.setup.ts index 67a009407..82b311c92 100644 --- a/packages/webpack5/jest.setup.ts +++ b/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 diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json index 691dc74b3..9dd4ad202 100644 --- a/packages/webpack5/package.json +++ b/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", diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts index 80ba6561b..937d39eb9 100644 --- a/packages/webpack5/src/configuration/base.ts +++ b/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 diff --git a/packages/webpack5/src/configuration/vue.ts b/packages/webpack5/src/configuration/vue.ts index c27a0b842..24a36b7ce 100644 --- a/packages/webpack5/src/configuration/vue.ts +++ b/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')