[6.x] [build/ts] transpile public code with webpack-specific ts config (#21865) (#21893)

Backports the following commits to 6.x:
 - [build/ts] transpile public code with webpack-specific ts config  (#21865)

src/dev/build/tasks/clean_tasks.js

@@ -50,7 +50,7 @@ export const CleanTypescriptTask = {
   async run(config, log, build) {
     await deleteAll(log, [
       build.resolvePath('**/*.{ts,tsx,d.ts}'),
-      build.resolvePath('**/tsconfig.json'),
+      build.resolvePath('**/tsconfig*.json'),
     ]);
   },
 };

src/dev/build/tasks/copy_source_task.js

@@ -42,7 +42,7 @@ export const CopySourceTask = {
         'bin/**',
         'webpackShims/**',
         'config/kibana.yml',
-        'tsconfig.json',
+        'tsconfig*.json',
       ],
     });
   },

src/dev/build/tasks/transpile_typescript_task.js

@@ -23,15 +23,24 @@ export const TranspileTypescriptTask = {
   description: 'Transpiling sources with typescript compiler',
 
   async run(config, log, build) {
-    await exec(
-      log,
-      require.resolve('typescript/bin/tsc'),
-      [
-        '--pretty', 'true'
-      ],
-      {
-        cwd: build.resolvePath(),
-      }
-    );
+    const tsConfigPaths = [
+      build.resolvePath('tsconfig.json'),
+      build.resolvePath('tsconfig.browser.json')
+    ];
+
+    for (const tsConfigPath of tsConfigPaths) {
+      log.info(`Compiling`, tsConfigPath, 'project');
+      await exec(
+        log,
+        require.resolve('typescript/bin/tsc'),
+        [
+          '--pretty', 'true',
+          '--project', tsConfigPath,
+        ],
+        {
+          cwd: build.resolvePath(),
+        }
+      );
+    }
   },
 };

src/dev/jest/ts_transform.ts

@@ -22,19 +22,29 @@ import { JestConfig, TransformOptions } from 'ts-jest/dist/jest-types';
 
 import { getTsProjectForAbsolutePath } from '../typescript';
 
+const DEFAULT_TS_CONFIG_PATH = require.resolve('../../../tsconfig.json');
+const DEFAULT_BROWSER_TS_CONFIG_PATH = require.resolve('../../../tsconfig.browser.json');
+
 function extendJestConfigJSON(jestConfigJSON: string, filePath: string) {
   const jestConfig = JSON.parse(jestConfigJSON) as JestConfig;
   return JSON.stringify(extendJestConfig(jestConfig, filePath));
 }
 
 function extendJestConfig(jestConfig: JestConfig, filePath: string) {
+  let tsConfigFile = getTsProjectForAbsolutePath(filePath).tsConfigPath;
+
+  // swap ts config file for jest tests
+  if (tsConfigFile === DEFAULT_BROWSER_TS_CONFIG_PATH) {
+    tsConfigFile = DEFAULT_TS_CONFIG_PATH;
+  }
+
   return {
     ...jestConfig,
     globals: {
       ...(jestConfig.globals || {}),
       'ts-jest': {
         skipBabel: true,
-        tsConfigFile: getTsProjectForAbsolutePath(filePath).tsConfigPath,
+        tsConfigFile,
       },
     },
   };

src/dev/typescript/project.ts

@@ -57,7 +57,7 @@ export class Project {
   private include: IMinimatch[];
   private exclude: IMinimatch[];
 
-  constructor(public tsConfigPath: string) {
+  constructor(public tsConfigPath: string, name?: string) {
     const { files, include, exclude = [] } = parseTsConfig(tsConfigPath);
 
     if (files || !include) {
@@ -67,7 +67,7 @@ export class Project {
     }
 
     this.directory = dirname(this.tsConfigPath);
-    this.name = relative(REPO_ROOT, this.directory) || basename(this.directory);
+    this.name = name || relative(REPO_ROOT, this.directory) || basename(this.directory);
     this.include = makeMatchers(this.directory, include);
     this.exclude = makeMatchers(this.directory, exclude);
   }

src/dev/typescript/projects.ts

@@ -24,13 +24,17 @@ import { REPO_ROOT } from '../constants';
 import { Project } from './project';
 
 export const PROJECTS = [
-  'tsconfig.json',
-  'x-pack/tsconfig.json',
+  new Project(resolve(REPO_ROOT, 'tsconfig.json')),
+  new Project(resolve(REPO_ROOT, 'tsconfig.browser.json'), 'kibana (browser)'),
+  new Project(resolve(REPO_ROOT, 'x-pack/tsconfig.json')),
+
   // NOTE: using glob.sync rather than glob-all or globby
   // because it takes less than 10 ms, while the other modules
   // both took closer to 1000ms.
-  ...glob.sync('packages/*/tsconfig.json', { cwd: REPO_ROOT }),
-].map(path => new Project(resolve(REPO_ROOT, path)));
+  ...glob
+    .sync('packages/*/tsconfig.json', { cwd: REPO_ROOT })
+    .map(path => new Project(resolve(REPO_ROOT, path))),
+];
 
 export function filterProjectsByFlag(projectFlag?: string) {
   if (!projectFlag) {

src/optimize/base_optimizer.js

@@ -307,10 +307,9 @@ export default class BaseOptimizer {
                   transpileOnly: true,
                   experimentalWatchApi: true,
                   onlyCompileBundledFiles: true,
+                  configFile: fromRoot('tsconfig.browser.json'),
                   compilerOptions: {
                     sourceMap: Boolean(this.sourceMaps),
-                    target: 'es5',
-                    module: 'esnext',
                   }
                 }
               }

tsconfig.browser.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+  },
+  "include": [
+    "src/**/public/**/*"
+  ],
+  "exclude": [
+    "src/**/__fixtures__/**/*"
+  ]
+}

tsconfig.json

@@ -48,6 +48,7 @@
     "src/**/*"
   ],
   "exclude": [
-    "src/**/__fixtures__/**/*"
+    "src/**/__fixtures__/**/*",
+    "src/**/public/**/*"
   ]
 }