Skip to content

Commit

Permalink
[canvas/plugins] enable typescript support (#26050)
Browse files Browse the repository at this point in the history
  • Loading branch information
Spencer authored Nov 22, 2018
1 parent 4f1ca7e commit bdcccfb
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 82 deletions.
1 change: 1 addition & 0 deletions x-pack/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
189 changes: 111 additions & 78 deletions x-pack/plugins/canvas/tasks/helpers/webpack.plugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
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'),
},

output: {
path: buildDir,
filename: '[name].js', // Need long paths here.
libraryTarget: 'umd',
},
// 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',

resolve: {
extensions: ['.js', '.json'],
mainFields: ['browser', 'main'],
},
output: {
path: buildDir,
filename: '[name].js', // Need long paths here.
libraryTarget: 'umd',
},

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;
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
mainFields: ['browser', 'main'],
},

this.plugin('run', function(compiler, callback) {
isWatch = false;
callback.call(compiler);
});
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('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__/**',
},
]),
],
this.plugin('run', function(compiler, callback) {
isWatch = false;
callback.call(compiler);
});

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'],
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__/**',
},
]),
],
},

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/,
},
};
}
8 changes: 4 additions & 4 deletions x-pack/plugins/canvas/tasks/plugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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)));
});
}

0 comments on commit bdcccfb

Please sign in to comment.