chore: canvas tasks - dev, peg, and plugins

get dev, peg, and plugin building tasks working

x-pack/gulpfile.js

@@ -10,6 +10,8 @@ require('dotenv').config({ silent: true });
 const path = require('path');
 const gulp = require('gulp');
 const mocha = require('gulp-mocha');
+const pegjs = require('gulp-pegjs');
+const multiProcess = require('gulp-multi-process');
 const fancyLog = require('fancy-log');
 const ansiColors = require('ansi-colors');
 const pkg = require('./package.json');
@@ -20,14 +22,16 @@ const packageDir = path.resolve(buildDir, 'distributions');
 const coverageDir = path.resolve(__dirname, 'coverage');
 
 const gulpHelpers = {
-  log: fancyLog,
-  colors: ansiColors,
-  mocha,
-  pkg,
   buildDir,
   buildTarget,
-  packageDir,
+  colors: ansiColors,
   coverageDir,
+  log: fancyLog,
+  mocha,
+  multiProcess,
+  packageDir,
+  pegjs,
+  pkg,
 };
 
 require('./tasks/build')(gulp, gulpHelpers);
@@ -36,3 +40,4 @@ require('./tasks/dev')(gulp, gulpHelpers);
 require('./tasks/prepare')(gulp, gulpHelpers);
 require('./tasks/report')(gulp, gulpHelpers);
 require('./tasks/test')(gulp, gulpHelpers);
+require('./plugins/canvas/tasks')(gulp, gulpHelpers);

x-pack/package.json

@@ -33,6 +33,9 @@
     "aws-sdk": "2.2.33",
     "axios": "^0.18.0",
     "babel-jest": "^23.4.2",
+    "babel-plugin-inline-react-svg": "^0.5.4",
+    "babel-plugin-pegjs-inline-precompile": "^0.1.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.14",
     "chalk": "^2.4.1",
     "chance": "1.0.10",
     "checksum": "0.1.1",
@@ -47,6 +50,8 @@
     "fetch-mock": "^5.13.1",
     "gulp": "3.9.1",
     "gulp-mocha": "2.2.0",
+    "gulp-pegjs": "^0.1.0",
+    "gulp-multi-process": "^1.3.1",
     "hapi": "14.2.0",
     "jest": "^23.5.0",
     "jest-cli": "^23.5.0",
@@ -63,6 +68,7 @@
     "redux-test-utils": "0.2.2",
     "rsync": "0.4.0",
     "run-sequence": "^2.2.1",
+    "sass-loader": "^7.1.0",
     "simple-git": "1.37.0",
     "sinon": "^5.0.7",
     "squel": "^5.12.2",

x-pack/plugins/canvas/package.json

@@ -8,7 +8,12 @@
   },
   "scripts": {
     "kbn": "node ../../../scripts/kbn",
+    "start": "../../node_modules/.bin/gulp canvas:dev",
     "lint": "node ../../../scripts/eslint '*.js' '__tests__/**/*.js' 'tasks/**/*.js' 'server/**/*.js' 'common/**/*.js' 'public/**/*.{js,jsx}' 'canvas_plugin_src/**/*.{js,jsx}' --ignore-pattern 'canvas_plugin_src/lib/flot-charts/**/*' --ignore-pattern 'common/lib/grammar.js' --ignore-pattern 'canvas_plugin/**/*'",
-    "fix": "yarn run lint --fix"
+    "test": "echo NOT READY; exit 1",
+    "peg:build": "../../node_modules/.bin/gulp canvas:peg:build",
+    "peg:dev": "../../node_modules/.bin/gulp canvas:peg:dev",
+    "build": "echo Run build from x-pack root; exit 1",
+    "build:plugins": "../../node_modules/.bin/gulp canvas:plugins:build"
   }
 }

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

@@ -0,0 +1,5 @@
+export default (gulp, { multiProcess }) => {
+  gulp.task('canvas:dev', done => {
+    return multiProcess(['canvas:plugins:dev', 'dev'], done, true);
+  });
+};

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

@@ -1,23 +1,26 @@
 const path = require('path');
 
+const sourceDir = path.resolve(__dirname, '../../canvas_plugin_src');
+const buildDir = path.resolve(__dirname, '../../canvas_plugin');
+
 module.exports = {
   entry: {
-    'elements/all': './canvas_plugin_src/elements/register.js',
-    'renderers/all': './canvas_plugin_src/renderers/register.js',
-    'uis/transforms/all': './canvas_plugin_src/uis/transforms/register.js',
-    'uis/models/all': './canvas_plugin_src/uis/models/register.js',
-    'uis/views/all': './canvas_plugin_src/uis/views/register.js',
-    'uis/datasources/all': './canvas_plugin_src/uis/datasources/register.js',
-    'uis/arguments/all': './canvas_plugin_src/uis/arguments/register.js',
-    'functions/browser/all': './canvas_plugin_src/functions/browser/register.js',
-    'functions/common/all': './canvas_plugin_src/functions/common/register.js',
-    'functions/server/all': './canvas_plugin_src/functions/server/register.js',
-    'types/all': './canvas_plugin_src/types/register.js',
+    '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'),
+    'functions/server/all': path.join(sourceDir, 'functions/server/register.js'),
+    'types/all': path.join(sourceDir, 'types/register.js'),
   },
   target: 'webworker',
 
   output: {
-    path: path.resolve(__dirname, 'canvas_plugin'),
+    path: buildDir,
     filename: '[name].js', // Need long paths here.
     libraryTarget: 'umd',
   },
@@ -26,6 +29,24 @@ module.exports = {
     extensions: ['.js', '.json'],
   },
 
+  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.compilation.errors && stats.compilation.errors.length && !isWatch)
+          throw stats.compilation.errors[0];
+      });
+    },
+  ],
+
   module: {
     rules: [
       // There's some React 15 propTypes funny business in EUI, this strips out propTypes and fixes it

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

@@ -0,0 +1,13 @@
+import dev from './dev';
+// import test from './test';
+import peg from './peg';
+import plugins from './plugins';
+import prepare from './prepare';
+
+export default function canvasTasks(gulp, gulpHelpers) {
+  dev(gulp, gulpHelpers);
+  // test(gulp, gulpHelpers);
+  peg(gulp, gulpHelpers);
+  plugins(gulp, gulpHelpers);
+  prepare(gulp, gulpHelpers);
+}

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

@@ -0,0 +1,21 @@
+import { resolve } from 'path';
+
+const grammarDir = resolve(__dirname, '..', 'common', 'lib');
+
+export default function pegTask(gulp, { pegjs }) {
+  gulp.task('canvas:peg:build', function() {
+    return gulp
+      .src(`${grammarDir}/*.peg`)
+      .pipe(
+        pegjs({
+          format: 'commonjs',
+          allowedStartRules: ['expression', 'argument'],
+        })
+      )
+      .pipe(gulp.dest(grammarDir));
+  });
+
+  gulp.task('canvas:peg:dev', function() {
+    gulp.watch(`${grammarDir}/*.peg`, ['peg']);
+  });
+}

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

@@ -0,0 +1,30 @@
+import webpack from 'webpack';
+import webpackConfig from './helpers/webpack.plugins';
+
+const devtool = 'inline-cheap-module-source-map';
+
+export default function pluginsTasks(gulp, { log, colors }) {
+  const onComplete = done => (err, stats) => {
+    if (err) {
+      done && done(err);
+    } else {
+      const seconds = ((stats.endTime - stats.startTime) / 1000).toFixed(2);
+      log(`${colors.green.bold('canvas:plugins')} Plugins built in ${seconds} seconds`);
+      done && done();
+    }
+  };
+
+  gulp.task('canvas:plugins:build', function(done) {
+    webpack({ ...webpackConfig, devtool }, onComplete(done));
+  });
+
+  // eslint-disable-next-line no-unused-vars
+  gulp.task('canvas:plugins:dev', function(done /* added to make gulp async */) {
+    log('Starting initial build of plugins. This will take awhile.');
+    webpack({ ...webpackConfig, devtool, watch: true }, (err, stats) => {
+      onComplete()(err, stats);
+    });
+  });
+
+  gulp.task('canvas:plugins:build-prod', done => webpack(webpackConfig, onComplete(done)));
+}

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

@@ -0,0 +1,4 @@
+export default gulp => {
+  // anything that needs to happen pre-build or pre-dev
+  gulp.task('canvas:prepare', ['canvas:plugins:build-prod']);
+};

x-pack/tasks/prepare.js

@@ -14,5 +14,5 @@ export default gulp => {
   gulp.task('prepare:dev', ['prepare']);
 
   // anything that needs to happen before building
-  gulp.task('prepare:build', ['prepare']);
+  gulp.task('prepare:build', ['prepare', 'canvas:prepare']);
 };