Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[canvas/plugins] enable typescript support #26050

Merged
merged 3 commits into from
Nov 22, 2018
Merged

[canvas/plugins] enable typescript support #26050

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
24a6e8d
[canvas/plugins] enable typescript support
Nov 21, 2018
07a50c4
Merge branch 'master' of github.com:elastic/kibana into implement/can…
Nov 21, 2018
be519f2
Merge branch 'master' into implement/canvas-plugin-ts-support
Nov 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions x-pack/package.json
View file
Open in desktop
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
187 changes: 110 additions & 77 deletions x-pack/plugins/canvas/tasks/helpers/webpack.plugins.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,91 +10,124 @@ 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'),
},
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'),
},

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
Open in desktop
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)));
});
}