babel 6 upgrade (#9702)

* [npm] upgrade babel

The upgrade to babel 6 requires an upgrade to all of the associated modules, which meant that a few other things changed at the same time. The most notable is the way that we handle our babel-options, which is now done with an npm module and includes using the babel-loader's "presets" query string param.

This meant changes to the babel_options.js module and extending it to help setting up the "babel-register" module, which was previously copy-pasted in several places.

* [mtodules] upgrade to support babel6 module semantics

* [eslint] fix lint errors

* [babel] ignoer massive fixture files

* [cli/errors] use Object.setPrototypeOf since subclassing Error is broken

* [babel] Upgrading core babel libraries

[babel] Use WIP babel-6-fix branch of babel-preset-kibana

* Fix broken test

* [babel] Reverse unnecessary module.exports changes

* Fix notifier

* Use babel presets and plugins directly

* [babel/options] resolve preset/plugins paths for better plugin compatibility

* [babel/options] use babel-preset-env for correct node settings

* [babel] cache babel compilation in webpack like we thought we were

.gitignore

@@ -31,6 +31,7 @@ config/*
 coverage
 selenium
 .babelcache.json
+.webpack.babelcache
 *.swp
 *.swo
 *.out

Gruntfile.js

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

package.json

@@ -93,10 +93,18 @@
     "ansicolors": "0.3.2",
     "autoprefixer": "6.5.4",
     "autoprefixer-loader": "2.0.0",
-    "babel": "5.8.38",
-    "babel-core": "5.8.38",
-    "babel-loader": "5.3.2",
-    "babel-runtime": "5.8.38",
+    "babel-cli": "6.18.0",
+    "babel-core": "6.21.0",
+    "babel-loader": "6.2.10",
+    "babel-plugin-add-module-exports": "0.2.1",
+    "babel-polyfill": "6.20.0",
+    "babel-preset-env": "1.1.8",
+    "babel-preset-es2015": "6.22.0",
+    "babel-preset-es2015-node": "6.1.1",
+    "babel-preset-react": "6.22.0",
+    "babel-preset-stage-1": "6.22.0",
+    "babel-register": "6.18.0",
+    "babel-runtime": "6.20.0",
     "bluebird": "2.9.34",
     "body-parser": "1.12.0",
     "boom": "2.8.0",
@@ -188,7 +196,7 @@
     "faker": "1.1.0",
     "grunt": "1.0.1",
     "grunt-aws-s3": "0.14.5",
-    "grunt-babel": "5.0.1",
+    "grunt-babel": "6.0.0",
     "grunt-cli": "0.1.13",
     "grunt-contrib-clean": "1.0.0",
     "grunt-contrib-copy": "0.8.1",

src/cli/index.js

@@ -1,5 +1,2 @@
-// load the babel options seperately so that they can modify the process.env
-// before calling babel/register
-const babelOptions = require('../optimize/babel_options').node;
-require('babel/register')(babelOptions);
+require('../optimize/babel/register');
 require('./cli');

src/cli_plugin/index.js

@@ -1,5 +1,2 @@
-// load the babel options seperately so that they can modify the process.env
-// before calling babel/register
-const babelOptions = require('../optimize/babel_options').node;
-require('babel/register')(babelOptions);
+require('../optimize/babel/register');
 require('./cli');

src/cli_plugin/lib/errors.js

@@ -1 +1,5 @@
-export class UnsupportedProtocolError extends Error {}
+export function UnsupportedProtocolError() {
+  Error.call(this, 'Unsupported protocol');
+}
+
+UnsupportedProtocolError.prototype = Object.create(Error.prototype);

src/core_plugins/dev_mode/public/vis_debug_spy_panel.js

@@ -1,6 +1,5 @@
 import visDebugSpyPanelTemplate from 'plugins/dev_mode/vis_debug_spy_panel.html';
-// register the spy mode or it won't show up in the spys
-require('ui/registry/spy_modes').register(VisDetailsSpyProvider);
+import spyModesRegistry from 'ui/registry/spy_modes';
 
 function VisDetailsSpyProvider(Notifier, $filter, $rootScope, config) {
   return {
@@ -16,4 +15,5 @@ function VisDetailsSpyProvider(Notifier, $filter, $rootScope, config) {
   };
 }
 
-export default VisDetailsSpyProvider;
+// register the spy mode or it won't show up in the spys
+spyModesRegistry.register(VisDetailsSpyProvider);

src/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js

@@ -1,7 +1,15 @@
 import visTypes from 'ui/registry/vis_types';
-visTypes.register(require('plugins/kbn_vislib_vis_types/histogram'));
-visTypes.register(require('plugins/kbn_vislib_vis_types/line'));
-visTypes.register(require('plugins/kbn_vislib_vis_types/pie'));
-visTypes.register(require('plugins/kbn_vislib_vis_types/area'));
-visTypes.register(require('plugins/kbn_vislib_vis_types/tile_map'));
-visTypes.register(require('plugins/kbn_vislib_vis_types/heatmap'));
+
+import histogramVisTypeProvider from 'plugins/kbn_vislib_vis_types/histogram';
+import lineVisTypeProvider from 'plugins/kbn_vislib_vis_types/line';
+import pieVisTypeProvider from 'plugins/kbn_vislib_vis_types/pie';
+import areaVisTypeProvider from 'plugins/kbn_vislib_vis_types/area';
+import tileMapVisTypeProvider from 'plugins/kbn_vislib_vis_types/tile_map';
+import heatmapVisTypeProvider from 'plugins/kbn_vislib_vis_types/heatmap';
+
+visTypes.register(histogramVisTypeProvider);
+visTypes.register(lineVisTypeProvider);
+visTypes.register(pieVisTypeProvider);
+visTypes.register(areaVisTypeProvider);
+visTypes.register(tileMapVisTypeProvider);
+visTypes.register(heatmapVisTypeProvider);

src/core_plugins/kibana/public/dashboard/index.js

@@ -2,13 +2,14 @@ import 'plugins/kibana/dashboard/dashboard';
 import 'plugins/kibana/dashboard/saved_dashboard/saved_dashboards';
 import 'plugins/kibana/dashboard/styles/index.less';
 import uiRoutes from 'ui/routes';
+import savedObjectRegistry from 'ui/saved_objects/saved_object_registry';
 import { savedDashboardRegister } from 'plugins/kibana/dashboard/saved_dashboard/saved_dashboard_register';
 
 import dashboardListingTemplate from './listing/dashboard_listing.html';
 import { DashboardListingController } from './listing/dashboard_listing';
 import { DashboardConstants } from './dashboard_constants';
 
-require('ui/saved_objects/saved_object_registry').register(savedDashboardRegister);
+savedObjectRegistry.register(savedDashboardRegister);
 
 uiRoutes
   .defaults(/dashboard/, {

src/core_plugins/kibana/public/dashboard/saved_dashboard/saved_dashboards.js

@@ -2,9 +2,10 @@ import _ from 'lodash';
 import Scanner from 'ui/utils/scanner';
 import 'plugins/kibana/dashboard/saved_dashboard/saved_dashboard';
 import uiModules from 'ui/modules';
-const module = uiModules.get('app/dashboard');
 import { SavedObjectLoader } from 'ui/courier/saved_object/saved_object_loader';
 
+const module = uiModules.get('app/dashboard');
+
 // bring in the factory
 
 

src/core_plugins/kibana/public/discover/index.js

@@ -7,7 +7,6 @@ import 'plugins/kibana/discover/controllers/discover';
 import 'plugins/kibana/discover/styles/main.less';
 import 'ui/doc_table/components/table_row';
 import savedObjectRegistry from 'ui/saved_objects/saved_object_registry';
+import savedSearchProvider from 'plugins/kibana/discover/saved_searches/saved_search_register';
 
-// preload
-
-savedObjectRegistry.register(require('plugins/kibana/discover/saved_searches/saved_search_register'));
+savedObjectRegistry.register(savedSearchProvider);

src/core_plugins/kibana/public/visualize/index.js

@@ -17,10 +17,11 @@ import 'ui/draggable/draggable_handle';
 import 'plugins/kibana/visualize/saved_visualizations/_saved_vis';
 import 'plugins/kibana/visualize/saved_visualizations/saved_visualizations';
 import uiRoutes from 'ui/routes';
-
 import visualizeListingTemplate from './listing/visualize_listing.html';
 import { VisualizeListingController } from './listing/visualize_listing';
 import { VisualizeConstants } from './visualize_constants';
+import savedObjectRegistry from 'ui/saved_objects/saved_object_registry';
+import savedVisusalizationProvider from 'plugins/kibana/visualize/saved_visualizations/saved_visualization_register';
 
 uiRoutes
 .defaults(/visualize/, {
@@ -34,5 +35,4 @@ uiRoutes
 
 // preloading
 
-require('ui/saved_objects/saved_object_registry')
-.register(require('plugins/kibana/visualize/saved_visualizations/saved_visualization_register'));
+savedObjectRegistry.register(savedVisusalizationProvider);

src/core_plugins/markdown_vis/public/markdown_vis.js

@@ -3,12 +3,13 @@ import 'plugins/markdown_vis/markdown_vis_controller';
 import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/template_vis_type';
 import markdownVisTemplate from 'plugins/markdown_vis/markdown_vis.html';
 import markdownVisParamsTemplate from 'plugins/markdown_vis/markdown_vis_params.html';
+import visTypesRegistry from 'ui/registry/vis_types';
 // we need to load the css ourselves
 
 // we also need to load the controller and used by the template
 
 // register the provider with the visTypes registry so that other know it exists
-require('ui/registry/vis_types').register(MarkdownVisProvider);
+visTypesRegistry.register(MarkdownVisProvider);
 
 function MarkdownVisProvider(Private) {
   const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);

src/core_plugins/metric_vis/public/metric_vis.js

@@ -4,12 +4,13 @@ import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/templat
 import VisSchemasProvider from 'ui/vis/schemas';
 import metricVisTemplate from 'plugins/metric_vis/metric_vis.html';
 import metricVisParamsTemplate from 'plugins/metric_vis/metric_vis_params.html';
+import visTypesRegistry from 'ui/registry/vis_types';
 // we need to load the css ourselves
 
 // we also need to load the controller and used by the template
 
 // register the provider with the visTypes registry
-require('ui/registry/vis_types').register(MetricVisProvider);
+visTypesRegistry.register(MetricVisProvider);
 
 function MetricVisProvider(Private) {
   const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);

src/core_plugins/spy_modes/public/req_resp_stats_spy_mode.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import reqRespStatsHTML from 'plugins/spy_modes/req_resp_stats_spy_mode.html';
+import spyModesRegistry from 'ui/registry/spy_modes';
 
 const linkReqRespStats = function ($scope, config) {
   $scope.$bind('req', 'searchSource.history[searchSource.history.length - 1]');
@@ -27,7 +28,7 @@ const linkReqRespStats = function ($scope, config) {
   });
 };
 
-require('ui/registry/spy_modes')
+spyModesRegistry
 .register(function () {
   return {
     name: 'request',

src/core_plugins/spy_modes/public/table_spy_mode.js

@@ -3,12 +3,12 @@ import _ from 'lodash';
 import 'ui/agg_table';
 import AggResponseTabifyTabifyProvider from 'ui/agg_response/tabify/tabify';
 import tableSpyModeTemplate from 'plugins/spy_modes/table_spy_mode.html';
+import spyModesRegistry from 'ui/registry/spy_modes';
+
 function VisSpyTableProvider(Notifier, $filter, $rootScope, config, Private) {
   const tabifyAggResponse = Private(AggResponseTabifyTabifyProvider);
-
   const PER_PAGE_DEFAULT = 10;
 
-
   return {
     name: 'table',
     display: 'Table',
@@ -37,4 +37,4 @@ function VisSpyTableProvider(Notifier, $filter, $rootScope, config, Private) {
   };
 }
 
-require('ui/registry/spy_modes').register(VisSpyTableProvider);
+spyModesRegistry.register(VisSpyTableProvider);

src/core_plugins/table_vis/public/table_vis.js

@@ -6,6 +6,7 @@ import 'ui/agg_table/agg_table_group';
 import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/template_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
 import tableVisTemplate from 'plugins/table_vis/table_vis.html';
+import visTypesRegistry from 'ui/registry/vis_types';
 // we need to load the css ourselves
 
 // we also need to load the controller and used by the template
@@ -15,7 +16,7 @@ import tableVisTemplate from 'plugins/table_vis/table_vis.html';
 // require the directives that we use as well
 
 // register the provider with the visTypes registry
-require('ui/registry/vis_types').register(TableVisTypeProvider);
+visTypesRegistry.register(TableVisTypeProvider);
 
 // define the TableVisType
 function TableVisTypeProvider(Private) {

src/core_plugins/timelion/public/app.js

@@ -27,7 +27,7 @@ require('./vis');
 require('ui/saved_objects/saved_object_registry').register(require('plugins/timelion/services/saved_sheet_register'));
 
 // TODO: Expose an api for dismissing notifications
-const unsafeNotifications = require('ui/notify')._notifs;
+const unsafeNotifications = require('ui/notify').default._notifs;
 
 require('ui/routes').enable();
 

src/optimize/babel/.eslintrc

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

src/optimize/babel/helpers.js

@@ -0,0 +1,52 @@
+// 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');
+
+exports.nodePresets = [
+  [
+    require.resolve('babel-preset-env'),
+    {
+      targets: {
+        node: 'current'
+      }
+    }
+  ],
+  require.resolve('babel-preset-stage-1'),
+];
+
+exports.webpackPresets = [
+  [
+    require.resolve('babel-preset-env'),
+    {
+      targets: {
+        browsers: [
+          'last 2 versions',
+          '> 5%',
+          'Safari 7' // for PhantomJS support
+        ]
+      }
+    }
+  ],
+  require.resolve('babel-preset-stage-1'),
+  require.resolve('babel-preset-react'),
+]
+
+exports.plugins = [
+  require.resolve('babel-plugin-add-module-exports'),
+];
+
+exports.devIgnore = [
+  /[\\\/](node_modules|bower_components)[\\\/]/
+]
+
+exports.buildIgnore = [
+  fromRoot('src'),
+  ...exports.devIgnore
+]

src/optimize/babel/options.build.js

@@ -0,0 +1,16 @@
+const {
+  nodePresets,
+  webpackPresets,
+  plugins,
+  buildIgnore
+} = require('./helpers');
+
+exports.webpack = {
+  presets: webpackPresets,
+  plugins: plugins
+};
+exports.node = {
+  presets: nodePresets,
+  plugins,
+  ignore: buildIgnore
+};

src/optimize/babel/options.js

@@ -0,0 +1,20 @@
+// this file is not transpiled in dev
+
+const {
+  nodePresets,
+  webpackPresets,
+  webpackCacheDir,
+  plugins,
+  devIgnore
+} = require('./helpers');
+
+exports.webpack = {
+  cacheDirectory: webpackCacheDir,
+  presets: webpackPresets,
+  plugins: plugins
+};
+exports.node = {
+  presets: nodePresets,
+  plugins,
+  ignore: devIgnore
+};

src/optimize/babel/register.js

@@ -0,0 +1,4 @@
+// this file is not transpiled in dev
+
+require('babel-polyfill');
+require('babel-register')(require('./options').node);