[build/ts] transpile public code with webpack-specific ts config (#21865

)

Right now the build process is running TypeScript code through a single transpilation process which produces the JS code that ships with the distributable. This process causes problems because when running the optimizer from source we use a slightly different config https://github.com/elastic/kibana/blob/33c6ade75631fb3f56816bc134dff83d08f4f387/src/optimize/base_optimizer.js#L312-L313, which instructs typescript to build modules using ESM, which webpack understands, but in the build we transpile this TypeScript to commonjs, which does not support features that are important to the strategy we are using to maintain BWC with the legacy platform as we migrate to the new platform.

This implements a `tsconfig.browser.json` file at the root of the repository that extends the default `tsconfig.json` file and includes a `src/**/public/**/*` code, which the root `tsconfig.json` file now excludes. This new config file is added to the list of projects that we lint, is shared with webpack, and is built along with the default project in the build process to create JS code that uses esm for webpack to consume.

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

@@ -43,7 +43,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/**/*"
   ]
 }