housekeeping: upgrade to babel@7 (via #5450)

* Babel 7

* preserve module output; straighten out ES/CJS syntax

* add webpack TODOs

* remove unused Babel modules

* Update index.js

* install @babel/register

.babelrc

@@ -1,51 +1,47 @@
 {
   "presets": [
-    "es2015",
-    "react",
-    "stage-0"
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "browsers": [
+            /* benefit of C/S/FF/Edge only? */
+            "> 1%",
+            "last 2 versions",
+            "Firefox ESR",
+            "not dead",
+          ]
+        },
+        "useBuiltIns": "entry",
+        "corejs": "2"
+      }
+    ],
+    "@babel/preset-react"
   ],
   "plugins": [
-    "transform-runtime",
-    "babel-plugin-transform-es2015-constants",
+    "@babel/plugin-transform-modules-commonjs",
+    ["@babel/plugin-transform-runtime", {
+      "corejs": "2"
+    }],
+    "@babel/plugin-proposal-class-properties",
     ["transform-react-remove-prop-types", {
       "additionalLibraries": ["react-immutable-proptypes"]
     }],
     [
-      "module-alias",
-      [
-        {
-          "expose": "root",
-          "src": "."
-        },
-        {
-          "expose": "components",
-          "src": "src/core/components"
-        },
-        {
-          "expose": "containers",
-          "src": "src/core/containers"
-        },
-        {
-          "expose": "core",
-          "src": "src/core"
-        },
-        {
-          "expose": "plugins",
-          "src": "src/plugins"
-        },
-        {
-          "expose": "img",
-          "src": "src/img"
-        },
-        {
-          "expose": "corePlugins",
-          "src": "src/core/plugins"
-        },
-        {
-          "expose": "less",
-          "src": "src/less"
+      "babel-plugin-module-resolver",
+      {
+        "root": ".",
+        "alias": {
+          "root": ".",
+          "components": "./src/core/components",
+          "containers": "./src/core/containers",
+          "core": "./src/core",
+          "plugins": "./src/plugins",
+          "img": "./src/img",
+          "corePlugins": "./src/core/plugins",
+          "less": "./src/less",
         }
-      ]
+      }
     ]
   ]
 }

package.json

@@ -31,7 +31,7 @@
     "lint-fix": "eslint --cache --ext '.js,.jsx' src test --fix",
     "test": "run-s just-test-in-node e2e-cypress lint-errors",
     "test-in-node": "run-s lint-errors just-test-in-node",
-    "just-test-in-node": "mocha --require test/setup.js --recursive --compilers js:babel-core/register --require source-map-support test/core test/components test/bugs test/docker test/swagger-ui-dist-package test/xss",
+    "just-test-in-node": "mocha --require test/setup.js --recursive --compilers js:@babel/register --require source-map-support test/core test/components test/bugs test/docker test/swagger-ui-dist-package test/xss",
     "just-check-coverage": "nyc npm run just-test-in-node",
     "test-e2e-cypress": "cypress run",
     "test-e2e-selenium": "sleep 3 && nightwatch test/e2e-selenium/scenarios/ --config test/e2e-selenium/nightwatch.json",
@@ -81,20 +81,22 @@
     "zenscroll": "^4.0.2"
   },
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.5.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.4.4",
+    "@babel/runtime-corejs2": "^7.0.0",
     "autoprefixer": "^8.4.1",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.23.1",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^7.1.0",
-    "babel-plugin-module-alias": "^1.6.0",
-    "babel-plugin-transform-es2015-constants": "^6.1.4",
+    "babel-eslint": "^9.0.0",
+    "babel-loader": "^8.0.0",
+    "babel-plugin-module-resolver": "^3.2.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-es2015-ie": "^6.6.2",
-    "babel-preset-react": "^6.23.0",
-    "babel-preset-stage-0": "^6.22.0",
-    "babel-runtime": "^6.23.0",
     "body-parser": "^1.18.3",
     "bundlesize": "^0.17.2",
     "chromedriver": "^2.38.3",
@@ -153,11 +155,6 @@
   "config": {
     "deps_check_dir": ".deps_check"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "IE 11"
-  ],
   "nyc": {
     "all": true,
     "include": [

src/core/index.js

@@ -1,11 +1,15 @@
-import deepExtend from "deep-extend"
+// This file uses CommonJS require/exports syntax in order to export the SwaggerUI
+// function directly, instead of `{ default: fn SwaggerUI }`, which Babel would
+// generate if we used ESM syntax.
 
-import System from "core/system"
-import win from "core/window"
-import ApisPreset from "core/presets/apis"
+const deepExtend = require("deep-extend")
+
+const System = require("core/system").default
+const ApisPreset = require("core/presets/apis").default
+const AllPlugins = require("core/plugins/all").default
+const { parseSearch } = require("core/utils")
+const win = require("core/window")
 
-import * as AllPlugins from "core/plugins/all"
-import { parseSearch } from "core/utils"
 
 if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
   win.Perf = require("react-dom/lib/ReactPerf")

src/core/plugins/all.js

@@ -2,6 +2,8 @@ import { pascalCaseFilename } from "core/utils"
 
 const request = require.context(".", true, /\.jsx?$/)
 
+const allPlugins = {}
+
 request.keys().forEach( function( key ){
   if( key === "./index.js" ) {
     return
@@ -13,5 +15,7 @@ request.keys().forEach( function( key ){
   // }
 
   let mod = request(key)
-  module.exports[pascalCaseFilename(key)] = mod.default ? mod.default : mod
+  allPlugins[pascalCaseFilename(key)] = mod.default ? mod.default : mod
 })
+
+export default allPlugins

src/core/plugins/oas3/wrap-components/model.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
 import { OAS3ComponentWrapFactory } from "../helpers"
-import { Model } from "core/components/model"
+import Model from "core/components/model"
 
 class ModelComponent extends Component {
   static propTypes = {

src/core/plugins/swagger-js/index.js

@@ -1,7 +1,7 @@
 import Swagger from "swagger-client"
 import * as configsWrapActions from "./configs-wrap-actions"
 
-module.exports = function({ configs, getConfigs }) {
+export default function({ configs, getConfigs }) {
   return {
     fn: {
       fetch: Swagger.makeHttp(configs.preFetch, configs.postFetch),

webpack-dist.config.js

@@ -23,13 +23,14 @@ module.exports = require("./make-webpack-config.js")(rules, {
   _special: {
     separateStylesheets: true,
     minimize: true,
+    // mangle: true, // TODO: enable
     sourcemaps: true,
   },
 
   entry: {
     "swagger-ui": [
       "./src/style/main.scss",
-      "./src/polyfills",
+      "./src/polyfills", // TODO: remove?
       "./src/core/index.js"
     ]
   },