create babel-preset and babel-register modules (#13973)

* [babel] create babel-preset and babel-register modules

* [babel-preset] add comments to babel-preset-env.target choices

* [babel-preset] use more normal BUILT_WITH_BABEL signal

* [babel-register] extended comment about filtering ./src in dist

* [babel-preset] stage of class properties has changed, sorta

(cherry picked from commit 48d35f8)

Gruntfile.js

@@ -1,4 +1,4 @@
-require('./src/optimize/babel/register');
+require('./src/babel-register');
 
 module.exports = function (grunt) {
  // set the config once before calling load-grunt-config

package.json

@@ -89,13 +89,13 @@
  "ansicolors": "0.3.2",
  "autoprefixer": "6.5.4",
  "autoprefixer-loader": "2.0.0",
- "babel-cli": "6.18.0",
  "babel-core": "6.21.0",
  "babel-jest": "21.0.0",
  "babel-loader": "6.2.10",
  "babel-plugin-add-module-exports": "0.2.1",
  "babel-plugin-transform-async-generator-functions": "6.24.1",
  "babel-plugin-transform-class-properties": "6.24.1",
+ "babel-plugin-transform-define": "1.3.0",
  "babel-plugin-transform-object-rest-spread": "6.23.0",
  "babel-polyfill": "6.20.0",
  "babel-preset-env": "1.4.0",

scripts/README.md

@@ -10,7 +10,7 @@ node scripts/{{script name}} --help
 
 This directory is excluded from the build and tools within it should help users discover their capabilities. Each script in this directory must:
 
-- include the `../src/optimize/babel/register` module to bootstrap babel
+- require `src/babel-register` to bootstrap babel
 - call out to source code that is in the `src` directory
 - react to the `--help` flag
 - run everywhere OR check and fail fast when a required OS or toolchain is not available

scripts/docs.js

@@ -1,2 +1,2 @@
-require('../src/optimize/babel/register');
+require('../src/babel-register');
 require('../src/docs/cli');

scripts/es_archiver.js

@@ -1,2 +1,2 @@
-require('../src/optimize/babel/register');
+require('../src/babel-register');
 require('../src/es_archiver/cli');

scripts/functional_test_runner.js

@@ -1,2 +1,2 @@
-require('../src/optimize/babel/register');
+require('../src/babel-register');
 require('../src/functional_test_runner/cli');

scripts/jest.js

@@ -10,6 +10,5 @@
 //
 // See all cli options in https://facebook.github.io/jest/docs/cli.html
 
-require('../src/optimize/babel/register');
+require('../src/babel-register');
 require('../src/jest/cli');
-

scripts/mocha.js

@@ -1,2 +1,2 @@
-require('../src/optimize/babel/register');
+require('../src/babel-register');
 require('../test/scripts/run_mocha');

src/babel-preset/common.js

@@ -0,0 +1,19 @@
+module.exports = {
+ presets: [
+ require.resolve('babel-preset-react'),
+ ],
+ plugins: [
+ require.resolve('babel-plugin-add-module-exports'),
+ // stage 3
+ require.resolve('babel-plugin-transform-async-generator-functions'),
+ require.resolve('babel-plugin-transform-object-rest-spread'),
+
+ // the class properties proposal was merged with the private fields proposal
+ // into the "class fields" proposal. Babel doesn't support this combined
+ // proposal yet, which includes private field, so this transform is
+ // TECHNICALLY stage 2, but for all intents and purposes it's stage 3
+ //
+ // See https://github.com/babel/proposals/issues/12 for progress
+ require.resolve('babel-plugin-transform-class-properties'),
+ ],
+};

src/babel-preset/node.js

@@ -0,0 +1,31 @@
+module.exports = {
+ presets: [
+ [
+ require.resolve('babel-preset-env'),
+ {
+ targets: {
+ // only applies the necessary transformations based on the
+ // current node.js processes version. For example: running
+ // `nvm install 8 && node ./src/cli` will run kibana in node
+ // version 8 and babel will stop transpiling async/await
+ // because they are supported in the "current" version of node
+ node: 'current',
+ },
+
+ // replaces `import "babel-polyfill"` with a list of require statements
+ // for just the polyfills that the target versions don't already supply
+ // on their own
+ useBuiltIns: true,
+ },
+ ],
+ require('./common'),
+ ],
+ plugins: [
+ [
+ require.resolve('babel-plugin-transform-define'),
+ {
+ 'global.__BUILT_WITH_BABEL__': 'true'
+ }
+ ]
+ ]
+};

src/babel-preset/webpack.js

@@ -0,0 +1,18 @@
+module.exports = {
+ presets: [
+ [
+ require.resolve('babel-preset-env'),
+ {
+ targets: {
+ browsers: [
+ 'last 2 versions',
+ '> 5%',
+ 'Safari 7', // for PhantomJS support
+ ],
+ },
+ useBuiltIns: true,
+ },
+ ],
+ require('./common'),
+ ]
+};

src/babel-register/index.js

@@ -0,0 +1,5 @@
+// register and polyfill need to happen in this
+// order and in separate files. Checkout each file
+// for a much more detailed explaination
+require('./register');
+require('./polyfill');

src/babel-register/polyfill.js

@@ -0,0 +1,10 @@
+// `babel-preset-env` looks for and rewrites the following import
+// statement into a list of import statements based on the polyfills
+// necessary for our target environment (the current version of node)
+// but since it does that during compilation, `import 'babel-polyfill'`
+// must be in a file that is loaded with `require()` AFTER `babel-register`
+// is configured.
+//
+// This is why we have this single statement in it's own file and require
+// it from ./index.js
+import 'babel-polyfill';

src/babel-register/register.js

@@ -0,0 +1,34 @@
+const { resolve } = require('path');
+
+// this must happen before `require('babel-register')` and can't be changed
+// once the module has been loaded
+if (!process.env.BABEL_CACHE_PATH) {
+ process.env.BABEL_CACHE_PATH = resolve(__dirname, '../../optimize/.babelcache.json');
+}
+
+// paths that babel-register should ignore
+const ignore = [
+ /[\\\/](node_modules|bower_components)[\\\/]/,
+];
+
+if (global.__BUILT_WITH_BABEL__) {
+ // when building the Kibana source we replace the statement
+ // `global.__BUILT_WITH_BABEL__` with the value `true` so that
+ // when babel-register is required for the first time by users
+ // it will exclude kibana's `src` directory.
+ //
+ // We still need babel-register for plugins though, we've been
+ // building their server code at require-time since version 4.2
+ // TODO: the plugin install process could transpile plugin server code...
+ ignore.push(resolve(__dirname, '../../src'));
+}
+
+// modifies all future calls to require() to automatically
+// compile the required source with babel
+require('babel-register')({
+ ignore,
+ babelrc: false,
+ presets: [
+ require.resolve('../babel-preset/node')
+ ],
+});

src/cli/index.js

@@ -1,2 +1,2 @@
-require('../optimize/babel/register');
+require('../babel-register');
 require('./cli');

src/cli_plugin/index.js

@@ -1,2 +1,2 @@
-require('../optimize/babel/register');
+require('../babel-register');
 require('./cli');

src/jest/babelTransform.js

@@ -1,6 +1,7 @@
 const babelJest = require('babel-jest');
-const options = require('../optimize/babel/options');
 
-const babelOptions = options.node;
-
-module.exports = babelJest.createTransformer(babelOptions);
+module.exports = babelJest.createTransformer({
+ presets: [
+ require.resolve('../babel-preset/node')
+ ]
+});

src/optimize/base_optimizer.js

@@ -10,7 +10,6 @@ import UglifyJsPlugin from 'webpack/lib/optimize/UglifyJsPlugin';
 import { defaults, transform } from 'lodash';
 
 import { fromRoot } from '../utils';
-import babelOptions from './babel/options';
 import pkg from '../../package.json';
 import { setLoaderQueryParam, makeLoaderString } from './loaders';
 
@@ -133,7 +132,11 @@ export default class BaseOptimizer {
  test: /\.js$/,
  exclude: babelExclude.concat(this.env.noParse),
  loader: 'babel-loader',
- query: babelOptions.webpack
+ query: {
+ presets: [
+ require.resolve('../babel-preset/webpack')
+ ]
+ }
  },
  ],
  postLoaders: this.env.postLoaders || [],

tasks/build/index.js

@@ -9,7 +9,6 @@ module.exports = function (grunt) {
  'copy:devSource',
  'clean:devSourceForTestbed',
  'babel:build',
- '_build:babelOptions',
  '_build:plugins',
  '_build:data',
  '_build:verifyTranslations',

tasks/config/babel.js

@@ -1,8 +1,10 @@
-import babelOptions from '../../src/optimize/babel/options';
-
 module.exports = {
  build: {
- options: babelOptions.node,
+ options: {
+ presets: [
+ require.resolve('../../src/babel-preset/node')
+ ]
+ },
  src: [
  'build/kibana/**/*.js',
  '!**/public/**',

test/mocha_setup.js

@@ -1 +1 @@
-require('../src/optimize/babel/register');
+require('../src/babel-register');