Babel 7

package.json

@@ -15,19 +15,19 @@
     "index.js"
   ],
   "dependencies": {
+    "@babel/code-frame": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/generator": "^7.0.0",
+    "@babel/parser": "^7.0.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+    "@babel/plugin-transform-react-jsx": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@babel/template": "^7.0.0",
+    "@babel/traverse": "^7.0.0",
+    "@babel/types": "^7.0.0",
     "ansi-to-html": "^0.6.4",
-    "babel-code-frame": "^6.26.0",
-    "babel-core": "^6.25.0",
-    "babel-generator": "^6.25.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.7.0",
-    "babel-template": "^6.26.0",
-    "babel-traverse": "^6.26.0",
-    "babel-types": "^6.26.0",
-    "babylon": "^6.17.4",
     "babylon-walk": "^1.0.2",
     "browserslist": "^3.2.6",
     "chalk": "^2.1.0",
@@ -73,11 +73,14 @@
     "ws": "^5.1.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/register": "^7.0.0",
     "@vue/component-compiler-utils": "^2.0.0",
-    "babel-cli": "^6.26.0",
-    "babel-plugin-transform-async-super": "^1.0.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-register": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "babylon": "^6.18.0",
     "bsb-js": "^1.0.1",
     "codecov": "^3.0.0",
     "coffeescript": "^2.0.3",

src/.babelrc

@@ -1,9 +1,9 @@
 {
-  "presets": [["env", {
+  "presets": [["@babel/preset-env", {
     "targets": {
       "node": "6"
     }
   }]],
-  "plugins": ["transform-async-super"],
+  "plugins": ["@babel/plugin-transform-runtime"],
   "ignore": ["builtins"]
 }

src/assets/JSAsset.js

@@ -1,15 +1,17 @@
-const {File: BabelFile} = require('babel-core');
-const traverse = require('babel-traverse').default;
-const codeFrame = require('babel-code-frame');
+const babelCore = require('@babel/core');
+const traverse = require('@babel/traverse').default;
+const codeFrame = require('@babel/code-frame').codeFrameColumns;
 const collectDependencies = require('../visitors/dependencies');
 const walk = require('babylon-walk');
 const Asset = require('../Asset');
-const babylon = require('babylon');
+const babelParser = require('@babel/parser');
+const localRequire = require('../utils/localRequire');
 const insertGlobals = require('../visitors/globals');
 const fsVisitor = require('../visitors/fs');
 const envVisitor = require('../visitors/env');
-const babel = require('../transforms/babel');
-const generate = require('babel-generator').default;
+const babel = require('../transforms/babel/transform');
+const babel7 = require('../transforms/babel/babel7');
+const generate = require('@babel/generator').default;
 const terser = require('../transforms/terser');
 const SourceMap = require('../SourceMap');
 const hoist = require('../scope-hoisting/hoist');
@@ -62,41 +64,62 @@ class JSAsset extends Asset {
 
   async getParserOptions() {
     // Babylon options. We enable a few plugins by default.
-    const options = {
-      filename: this.name,
-      allowReturnOutsideFunction: true,
-      allowHashBang: true,
-      ecmaVersion: Infinity,
-      strictMode: false,
-      sourceType: 'module',
-      locations: true,
-      plugins: ['exportExtensions', 'dynamicImport']
+    let options = {
+      parserOpts: {
+        filename: this.name,
+        allowReturnOutsideFunction: true,
+        strictMode: false,
+        sourceType: 'module',
+        plugins: ['exportExtensions', 'exportDefaultFrom', 'exportNamespaceFrom', 'dynamicImport']
+      }
     };
 
     // Check if there is a babel config file. If so, determine which parser plugins to enable
     this.babelConfig = await babel.getConfig(this);
     if (this.babelConfig) {
-      const file = new BabelFile(this.babelConfig);
-      options.plugins.push(...file.parserOpts.plugins);
+      if (this.babelConfig.babelVersion === 6) {
+        options.parserOpts.tokens = true;
+        // options = options.parserOpts;
+      }
+
+      Object.assign(options, this.babelConfig);
+
+      let babelVersion = this.babelConfig.babelVersion;
+      Object.defineProperty(options, 'babelVersion', {
+        value: babelVersion,
+        configurable: true
+      });
+
+      // if (this.babelConfig) {
+      //   const file = new BabelFile(this.babelConfig);
+      //   options.plugins.push(...file.parserOpts.plugins);
+      // }
     }
 
     return options;
   }
 
   async parse(code) {
-    const options = await this.getParserOptions();
-    return babylon.parse(code, options);
+    // const options = await this.getParserOptions();
+    // return babelCore.parse(code, options);
+    await babel(this);
+    if (!this.ast) {
+      console.log('NO AST')
+      this.ast = babelParser.parse(code);
+    }
+
+    return this.ast;
   }
 
   traverse(visitor) {
     // Create a babel File object if one hasn't been created yet.
     // This is needed so that cached NodePath objects get a `hub` object on them.
     // Plugins like babel-minify depend on this to get the original source code string.
-    if (!this.babelFile) {
-      this.babelFile = new BabelFile(this.babelConfig || {});
-      this.babelFile.addCode(this.contents);
-      this.babelFile.addAst(this.ast);
-    }
+    // if (!this.babelFile) {
+    //   this.babelFile = new BabelFile(this.babelConfig || {});
+    //   this.babelFile.addCode(this.contents);
+    //   this.babelFile.addAst(this.ast);
+    // }
 
     return traverse(this.ast, visitor, null, this);
   }
@@ -177,7 +200,7 @@ class JSAsset extends Asset {
 
   async pretransform() {
     await this.loadSourceMap();
-    await babel(this);
+    // await babel(this);
 
     // Inline environment variables
     if (this.options.target === 'browser' && ENV_RE.test(this.contents)) {
@@ -214,7 +237,12 @@ class JSAsset extends Asset {
       this.isAstDirty = true;
     } else {
       if (this.isES6Module) {
-        await babel(this);
+        await babel7(this, {
+          internal: true,
+          config: {
+            plugins: [require('@babel/plugin-transform-modules-commonjs')]
+          }
+        });
       }
     }
 
@@ -285,11 +313,10 @@ class JSAsset extends Asset {
   generateErrorMessage(err) {
     const loc = err.loc;
     if (loc) {
-      err.codeFrame = codeFrame(this.contents, loc.line, loc.column + 1);
+      err.codeFrame = codeFrame(this.contents, {start: loc});
       err.highlightedCodeFrame = codeFrame(
         this.contents,
-        loc.line,
-        loc.column + 1,
+        {start: loc},
         {highlightCode: true}
       );
     }

src/packagers/JSConcatPackager.js

@@ -4,8 +4,8 @@ const concat = require('../scope-hoisting/concat');
 const urlJoin = require('../utils/urlJoin');
 const getExisting = require('../utils/getExisting');
 const walk = require('babylon-walk');
-const babylon = require('babylon');
-const t = require('babel-types');
+const babylon = require('@babel/parser');
+const t = require('@babel/types');
 const {getName, getIdentifier} = require('../scope-hoisting/utils');
 
 const prelude = getExisting(
@@ -530,10 +530,11 @@ class JSConcatPackager extends Packager {
       // Add source map url if a map bundle exists
       let mapBundle = this.bundle.siblingBundlesMap.get('map');
       if (mapBundle) {
-        output += `\n//# sourceMappingURL=${urlJoin(
+        let mapUrl = urlJoin(
           this.options.publicURL,
           path.basename(mapBundle.name)
-        )}`;
+        );
+        output += `\n//# sourceMappingURL=${mapUrl}`;
       }
     }
 

src/packagers/JSPackager.js

@@ -225,12 +225,11 @@ class JSPackager extends Packager {
       // Add source map url if a map bundle exists
       let mapBundle = this.bundle.siblingBundlesMap.get('map');
       if (mapBundle) {
-        await this.write(
-          `\n//# sourceMappingURL=${urlJoin(
-            this.options.publicURL,
-            path.basename(mapBundle.name)
-          )}`
+        let mapUrl = urlJoin(
+          this.options.publicURL,
+          path.basename(mapBundle.name)
         );
+        await this.write(`\n//# sourceMappingURL=${mapUrl}`);
       }
     }
     await this.dest.end();

src/scope-hoisting/concat.js

@@ -1,8 +1,8 @@
 const {relative} = require('path');
-const template = require('babel-template');
-const t = require('babel-types');
-const traverse = require('babel-traverse').default;
-const generate = require('babel-generator').default;
+const template = require('@babel/template').default;
+const t = require('@babel/types');
+const traverse = require('@babel/traverse').default;
+const generate = require('@babel/generator').default;
 const treeShake = require('./shake');
 const mangleScope = require('./mangler');
 const {getName, getIdentifier} = require('./utils');

src/scope-hoisting/hoist.js

@@ -1,8 +1,7 @@
 const path = require('path');
-const matchesPattern = require('../visitors/matches-pattern');
 const mm = require('micromatch');
-const t = require('babel-types');
-const template = require('babel-template');
+const t = require('@babel/types');
+const template = require('@babel/template').default;
 const rename = require('./renamer');
 const {getName, getIdentifier, getExportIdentifier} = require('./utils');
 
@@ -175,20 +174,20 @@ module.exports = {
       return;
     }
 
-    if (matchesPattern(path.node, 'module.exports')) {
+    if (t.matchesPattern(path.node, 'module.exports')) {
       path.replaceWith(getExportsIdentifier(asset));
       asset.cacheData.isCommonJS = true;
     }
 
-    if (matchesPattern(path.node, 'module.id')) {
+    if (t.matchesPattern(path.node, 'module.id')) {
       path.replaceWith(t.stringLiteral(asset.id));
     }
 
-    if (matchesPattern(path.node, 'module.hot')) {
+    if (t.matchesPattern(path.node, 'module.hot')) {
       path.replaceWith(t.identifier('null'));
     }
 
-    if (matchesPattern(path.node, 'module.bundle')) {
+    if (t.matchesPattern(path.node, 'module.bundle')) {
       path.replaceWith(t.identifier('require'));
     }
   },
@@ -332,7 +331,7 @@ module.exports = {
       );
     }
 
-    if (matchesPattern(callee, 'require.resolve')) {
+    if (t.matchesPattern(callee, 'require.resolve')) {
       path.replaceWith(
         REQUIRE_RESOLVE_CALL_TEMPLATE({
           ID: t.stringLiteral(asset.id),

src/scope-hoisting/mangler.js

@@ -1,5 +1,5 @@
 const rename = require('./renamer');
-const t = require('babel-types');
+const t = require('@babel/types');
 
 const CHARSET = (
   'abcdefghijklmnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ$_'

src/scope-hoisting/shake.js

@@ -1,4 +1,4 @@
-const t = require('babel-types');
+const t = require('@babel/types');
 
 const EXPORTS_RE = /^\$([^$]+)\$exports$/;
 

src/scope-hoisting/utils.js

@@ -1,4 +1,4 @@
-const t = require('babel-types');
+const t = require('@babel/types');
 
 function getName(asset, type, ...rest) {
   return (