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

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({
-
+  presets: [
-module.exports = babelJest.createTransformer(babelOptions);
+    require.resolve('../babel-preset/node')
+  ]
+});

src/optimize/babel/.eslintrc

@@ -1,8 +0,0 @@
----
-root: true
-env:
-  es6: true
-  node: true
-rules:
-  no-undef: error
-  quotes: [error, single]

src/optimize/babel/helpers.js

@@ -1,61 +0,0 @@
-// this file is not transpiled in dev
-
-const env = process.env;
-const fromRoot = require('path').resolve.bind(null, __dirname, '../../../');
-
-if (!env.BABEL_CACHE_PATH) {
-  env.BABEL_CACHE_PATH = fromRoot('optimize/.babelcache.json');
-}
-
-exports.webpackCacheDir = env.WEBPACK_BABEL_CACHE_DIR || fromRoot('optimize/.webpack.babelcache');
-
-const commonPreset = {
-  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'),
-    // stage 2
-    require.resolve('babel-plugin-transform-class-properties'),
-  ],
-}
-
-exports.nodePreset = {
-  presets: [
-    [require.resolve('babel-preset-env'), {
-      targets: {
-        node: 'current'
-      },
-      useBuiltIns: true,
-    }],
-    commonPreset,
-  ],
-};
-
-exports.webpackPreset = {
-  presets: [
-    [require.resolve('babel-preset-env'), {
-      targets: {
-        browsers: [
-          'last 2 versions',
-          '> 5%',
-          'Safari 7' // for PhantomJS support
-        ]
-      },
-      useBuiltIns: true,
-    }],
-    commonPreset,
-  ],
-}
-
-exports.devIgnore = [
-  /[\\\/](node_modules|bower_components)[\\\/]/
-]
-
-exports.buildIgnore = [
-  fromRoot('src'),
-  ...exports.devIgnore
-]

src/optimize/babel/options.build.js

@@ -1,20 +0,0 @@
-const {
-  nodePreset,
-  webpackPreset,
-  buildIgnore
-} = require('./helpers');
-
-const nodeOptions = {
-  presets: [nodePreset],
-  ignore: buildIgnore
-};
-
-exports.webpack = {
-  presets: [webpackPreset],
-};
-
-exports.node = nodeOptions;
-
-exports.registerNodeOptions = function () {
-  require('babel-register')(nodeOptions);
-};

src/optimize/babel/options.js

@@ -1,24 +0,0 @@
-// this file is not transpiled in dev
-
-const {
-  nodePreset,
-  webpackPreset,
-  webpackCacheDir,
-  devIgnore
-} = require('./helpers');
-
-const nodeOptions = {
-  presets: [nodePreset],
-  ignore: devIgnore
-};
-
-exports.webpack = {
-  cacheDirectory: webpackCacheDir,
-  presets: [webpackPreset],
-};
-
-exports.node = nodeOptions;
-
-exports.registerNodeOptions = function () {
-  require('babel-register')(nodeOptions);
-};

src/optimize/babel/polyfills.js

@@ -1,2 +0,0 @@
-// this is in it's own file so babel-preset-env can convert it to just the polyfills necessary
-require('babel-polyfill');

src/optimize/babel/register.js

@@ -1,3 +0,0 @@
-// this file is not transpiled in dev
-require('./options').registerNodeOptions();
-require('./polyfills');

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/babel_options.js

@@ -1,14 +0,0 @@
-module.exports = function (grunt) {
-
-  const srcFile = 'build/kibana/src/optimize/babel/options.js';
-  const buildFile = 'build/kibana/src/optimize/babel/options.build.js';
-  const rename = require('fs').renameSync;
-  const unlink = require('fs').unlinkSync;
-
-  grunt.registerTask('_build:babelOptions', function () {
-    unlink(srcFile);
-    rename(buildFile, srcFile);
-    grunt.file.mkdir('build/kibana/optimize');
-  });
-
-};

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');