diff --git a/.changeset/hip-walls-draw.md b/.changeset/hip-walls-draw.md new file mode 100644 index 0000000000..d7fdf0fc5e --- /dev/null +++ b/.changeset/hip-walls-draw.md @@ -0,0 +1,5 @@ +--- +"@ima/cli": minor +--- + +Added support for `tsconfig.build.json` config file, which is prioritized for tsChecker plugin in webpack. This allows to have separate tsconfig for build and code editor, which let's you opt out of checking some files not needed for build. diff --git a/packages/cli/src/types.ts b/packages/cli/src/types.ts index 20522c588c..c49e22337a 100644 --- a/packages/cli/src/types.ts +++ b/packages/cli/src/types.ts @@ -66,7 +66,10 @@ export interface ImaConfigurationContext extends ImaCliArgs { js: string; public: string; }; - useTypescript: boolean; + typescript: { + enabled: boolean; + tsconfigPath: string | undefined; + }; imaEnvironment: Environment; appDir: string; lessGlobalsPath: string; diff --git a/packages/cli/src/webpack/config.ts b/packages/cli/src/webpack/config.ts index d5dc2fdad3..937643ff99 100644 --- a/packages/cli/src/webpack/config.ts +++ b/packages/cli/src/webpack/config.ts @@ -13,11 +13,13 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import lessPluginGlob from 'less-plugin-glob'; import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import TerserPlugin from 'terser-webpack-plugin'; -import webpack, { +// eslint-disable-next-line import/default +import { Configuration, RuleSetRule, RuleSetUseItem, WebpackPluginInstance, + HotModuleReplacementPlugin, } from 'webpack'; import { getLanguageEntryPoints } from './languages'; @@ -51,7 +53,7 @@ export default async ( name, processCss, outputFolders, - useTypescript, + typescript, imaEnvironment, appDir, useHMR, @@ -424,7 +426,7 @@ export default async ( /** * Handle app Typescript files */ - useTypescript && { + typescript.enabled && { test: /\.(ts|tsx)$/, include: appDir, loader: require.resolve('swc-loader'), @@ -582,8 +584,11 @@ export default async ( * to show errors at least during build so it fails before going to production. */ isClientES && - useTypescript && + typescript.enabled && new ForkTsCheckerWebpackPlugin({ + typescript: { + configFile: typescript.tsconfigPath, + }, async: ctx.command === 'dev', // be async only in watch mode, devServer: false, // Custom formatter for async mode @@ -635,7 +640,7 @@ export default async ( : []), // Following plugins enable react refresh and hmr in watch mode - useHMR && new webpack.HotModuleReplacementPlugin(), + useHMR && new HotModuleReplacementPlugin(), useHMR && ctx.reactRefresh && new ReactRefreshWebpackPlugin({ diff --git a/packages/cli/src/webpack/utils.ts b/packages/cli/src/webpack/utils.ts index 60bf397b2d..9ff1d6e7d5 100644 --- a/packages/cli/src/webpack/utils.ts +++ b/packages/cli/src/webpack/utils.ts @@ -12,6 +12,7 @@ import webpackConfig from './config'; import { ImaConfigurationContext, ImaConfig, ImaCliArgs } from '../types'; export const IMA_CONF_FILENAME = 'ima.config.js'; +const TS_CONFIG_PATHS = ['tsconfig.build.json', 'tsconfig.json']; /** * Helper for finding rules with given loader in webpack config. @@ -372,7 +373,6 @@ export function createContexts( !!imaConfig.sourceMaps || args.environment === 'development'; const imaEnvironment = resolveEnvironment(rootDir); const appDir = path.join(rootDir, 'app'); - const useTypescript = fs.existsSync(path.join(rootDir, './tsconfig.json')); const lessGlobalsPath = path.join(rootDir, 'app/less/globals.less'); const isDevEnv = environment === 'development'; const mode = environment === 'production' ? 'production' : 'development'; @@ -382,6 +382,16 @@ export function createContexts( : 'source-map' : false; + let tsconfigPath: string | undefined = undefined; + + // Find tsconfig path in rootDir based on priority set in TS_CONFIG_PATHS + for (const fileName of TS_CONFIG_PATHS) { + if (fs.existsSync(path.join(rootDir, fileName))) { + tsconfigPath = path.join(rootDir, fileName); + break; + } + } + // es2018 targets (taken from 'browserslist-generator') const targets = [ 'and_chr >= 63', @@ -415,7 +425,10 @@ export function createContexts( ? 'static/js' : 'static/js.es', }, - useTypescript, + typescript: { + enabled: !!tsconfigPath, + tsconfigPath, + }, imaEnvironment, appDir, useHMR: command === 'dev' && name === 'client.es',