Added support for tsconfig.build.json

.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.

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;

packages/cli/src/webpack/config.ts

@@ -13,11 +13,12 @@ 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, {
+import {
   Configuration,
   RuleSetRule,
   RuleSetUseItem,
   WebpackPluginInstance,
+  HotModuleReplacementPlugin,
 } from 'webpack';
 
 import { getLanguageEntryPoints } from './languages';
@@ -51,7 +52,7 @@ export default async (
     name,
     processCss,
     outputFolders,
-    useTypescript,
+    typescript,
     imaEnvironment,
     appDir,
     useHMR,
@@ -424,7 +425,7 @@ export default async (
             /**
              * Handle app Typescript files
              */
-            useTypescript && {
+            typescript.enabled && {
               test: /\.(ts|tsx)$/,
               include: appDir,
               loader: require.resolve('swc-loader'),
@@ -582,8 +583,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 +639,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({

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',