[canvas/plugins] enable typescript support (#26050) (#26060)

x-pack/package.json

@@ -110,6 +110,7 @@
     "supertest-as-promised": "^4.0.2",
     "tmp": "0.0.31",
     "tree-kill": "^1.1.0",
+    "ts-loader": "^3.5.0",
     "typescript": "^3.0.3",
     "vinyl-fs": "^3.0.2",
     "xml-crypto": "^0.10.1",

x-pack/plugins/canvas/tasks/helpers/webpack.plugins.js

@@ -10,92 +10,125 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const sourceDir = path.resolve(__dirname, '../../canvas_plugin_src');
 const buildDir = path.resolve(__dirname, '../../canvas_plugin');
 
-module.exports = {
-  entry: {
-    'elements/all': path.join(sourceDir, 'elements/register.js'),
-    'renderers/all': path.join(sourceDir, 'renderers/register.js'),
-    'uis/transforms/all': path.join(sourceDir, 'uis/transforms/register.js'),
-    'uis/models/all': path.join(sourceDir, 'uis/models/register.js'),
-    'uis/views/all': path.join(sourceDir, 'uis/views/register.js'),
-    'uis/datasources/all': path.join(sourceDir, 'uis/datasources/register.js'),
-    'uis/arguments/all': path.join(sourceDir, 'uis/arguments/register.js'),
-    'functions/browser/all': path.join(sourceDir, 'functions/browser/register.js'),
-    'functions/common/all': path.join(sourceDir, 'functions/common/register.js'),
-    'types/all': path.join(sourceDir, 'types/register.js'),
-  },
+export function getWebpackConfig({ devtool, watch } = {}) {
+  return {
+    watch,
+    devtool,
 
-  // there were problems with the node and web targets since this code is actually
-  // targetting both the browser and node.js. If there was a hybrid target we'd use
-  // it, but this seems to work either way.
-  target: 'webworker',
-
-  output: {
-    path: buildDir,
-    filename: '[name].js', // Need long paths here.
-    libraryTarget: 'umd',
-  },
-
-  resolve: {
-    extensions: ['.js', '.json'],
-    mainFields: ['browser', 'main'],
-  },
-
-  plugins: [
-    function loaderFailHandler() {
-      // bails on error, including loader errors
-      // see https://github.com/webpack/webpack/issues/708, which does not fix loader errors
-      let isWatch = true;
-
-      this.plugin('run', function(compiler, callback) {
-        isWatch = false;
-        callback.call(compiler);
-      });
-
-      this.plugin('done', function(stats) {
-        if (!stats.hasErrors()) return;
-        const errorMessage = stats.toString('errors-only');
-        if (isWatch) console.error(errorMessage);
-        else throw new Error(errorMessage);
-      });
+    entry: {
+      'elements/all': path.join(sourceDir, 'elements/register.js'),
+      'renderers/all': path.join(sourceDir, 'renderers/register.js'),
+      'uis/transforms/all': path.join(sourceDir, 'uis/transforms/register.js'),
+      'uis/models/all': path.join(sourceDir, 'uis/models/register.js'),
+      'uis/views/all': path.join(sourceDir, 'uis/views/register.js'),
+      'uis/datasources/all': path.join(sourceDir, 'uis/datasources/register.js'),
+      'uis/arguments/all': path.join(sourceDir, 'uis/arguments/register.js'),
+      'functions/browser/all': path.join(sourceDir, 'functions/browser/register.js'),
+      'functions/common/all': path.join(sourceDir, 'functions/common/register.js'),
+      'types/all': path.join(sourceDir, 'types/register.js'),
     },
-    new CopyWebpackPlugin([
-      {
-        from: `${sourceDir}/functions/server/`,
-        to: `${buildDir}/functions/server/`,
-        ignore: '**/__tests__/**',
-      },
-    ]),
-  ],
 
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: [/node_modules/],
-        loaders: 'babel-loader',
-        options: {
-          babelrc: false,
-          presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
+    // there were problems with the node and web targets since this code is actually
+    // targetting both the browser and node.js. If there was a hybrid target we'd use
+    // it, but this seems to work either way.
+    target: 'webworker',
+
+    output: {
+      path: buildDir,
+      filename: '[name].js', // Need long paths here.
+      libraryTarget: 'umd',
+    },
+
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.json'],
+      mainFields: ['browser', 'main'],
+    },
+
+    plugins: [
+      function loaderFailHandler() {
+        // bails on error, including loader errors
+        // see https://github.com/webpack/webpack/issues/708, which does not fix loader errors
+        let isWatch = true;
+
+        this.plugin('run', function(compiler, callback) {
+          isWatch = false;
+          callback.call(compiler);
+        });
+
+        this.plugin('done', function(stats) {
+          if (!stats.hasErrors()) return;
+          const errorMessage = stats.toString('errors-only');
+          if (isWatch) console.error(errorMessage);
+          else throw new Error(errorMessage);
+        });
+      },
+      new CopyWebpackPlugin([
+        {
+          from: `${sourceDir}/functions/server/`,
+          to: `${buildDir}/functions/server/`,
+          ignore: '**/__tests__/**',
         },
-      },
-      {
-        test: /\.(png|jpg|gif|jpeg|svg)$/,
-        loaders: ['url-loader'],
-      },
-      {
-        test: /\.(css|scss)$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader'],
-      },
+      ]),
     ],
-  },
 
-  node: {
-    // Don't replace built-in globals
-    __filename: false,
-    __dirname: false,
-  },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: [/node_modules/],
+          loaders: 'babel-loader',
+          options: {
+            babelrc: false,
+            presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
+          },
+        },
+        {
+          test: /\.(png|jpg|gif|jpeg|svg)$/,
+          loaders: ['url-loader'],
+        },
+        {
+          test: /\.(css|scss)$/,
+          loaders: ['style-loader', 'css-loader', 'sass-loader'],
+        },
+        {
+          test: /\.tsx?$/,
+          include: sourceDir,
+          use: [
+            {
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+                experimentalWatchApi: true,
+                onlyCompileBundledFiles: true,
+                configFile: require.resolve('../../../../tsconfig.json'),
+                compilerOptions: {
+                  sourceMap: Boolean(devtool),
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
 
-  watchOptions: {
-    ignored: [/node_modules/],
-  },
-};
+    node: {
+      // Don't replace built-in globals
+      __filename: false,
+      __dirname: false,
+    },
+
+    watchOptions: {
+      ignored: [/node_modules/],
+    },
+
+    stats: {
+      // when typescript doesn't do a full type check, as we have the ts-loader
+      // configured here, it does not have enough information to determine
+      // whether an imported name is a type or not, so when the name is then
+      // exported, typescript has no choice but to emit the export. Fortunately,
+      // the extraneous export should not be harmful, so we just suppress these warnings
+      // https://github.com/TypeStrong/ts-loader#transpileonly-boolean-defaultfalse
+      warningsFilter: /export .* was not found in/,
+    },
+  };
+}

x-pack/plugins/canvas/tasks/plugins.js

@@ -8,7 +8,7 @@ import path from 'path';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import webpack from 'webpack';
 import del from 'del';
-import webpackConfig from './helpers/webpack.plugins';
+import { getWebpackConfig } from './helpers/webpack.plugins';
 
 const devtool = 'inline-cheap-module-source-map';
 const buildDir = path.resolve(__dirname, '../canvas_plugin');
@@ -26,20 +26,20 @@ export default function pluginsTasks(gulp, { log, colors }) {
   };
 
   gulp.task('canvas:plugins:build', function(done) {
-    del(buildDir).then(() => webpack({ ...webpackConfig, devtool }, onComplete(done)));
+    del(buildDir).then(() => webpack(getWebpackConfig({ devtool }), onComplete(done)));
   });
 
   // eslint-disable-next-line no-unused-vars
   gulp.task('canvas:plugins:dev', function(done /* added to make gulp async */) {
     log(`${colors.green.bold('canvas:plugins')} Starting initial build, this will take a while`);
     del(buildDir).then(() =>
-      webpack({ ...webpackConfig, devtool, watch: true }, (err, stats) => {
+      webpack(getWebpackConfig({ devtool, watch: true }), (err, stats) => {
         onComplete()(err, stats);
       })
     );
   });
 
   gulp.task('canvas:plugins:build-prod', function(done) {
-    del(buildDir).then(() => webpack(webpackConfig, onComplete(done)));
+    del(buildDir).then(() => webpack(getWebpackConfig(), onComplete(done)));
   });
 }