Babel 7 (#1955)

.gitignore

@@ -14,6 +14,9 @@ lib
 *.min.js
 test/integration/**/target
 test/integration/**/Cargo.lock
+test/**/node_modules
+test/**/yarn.lock
+test/**/package-lock.json
 # Logs
 logs
 *.log

package.json

@@ -15,21 +15,21 @@
     "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",
+    "browserslist": "^4.1.0",
     "chalk": "^2.1.0",
     "clone": "^2.1.1",
     "command-exists": "^1.2.6",
@@ -74,11 +74,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",
@@ -119,7 +122,7 @@
     "build": "yarn minify && babel src -d lib && ncp src/builtins lib/builtins",
     "prepublish": "yarn build",
     "minify": "terser -c -m -o src/builtins/prelude.min.js src/builtins/prelude.js && terser -c -m -o src/builtins/prelude2.min.js src/builtins/prelude2.js",
-    "precommit": "npm run lint && lint-staged",
+    "precommit": "lint-staged",
     "lint": "eslint . && prettier \"./{src,bin,test}/**/*.{js,json,md}\" --list-different",
     "postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mLove Parcel? You can now donate to our open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/parcel/donate\\u001b[0m')\""
   },

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

@@ -499,7 +499,7 @@ class Bundler extends EventEmitter {
     // If the module resolved (i.e. wasn't a local file), but the module directory wasn't found, install it.
     if (resolved.moduleName && !resolved.moduleDir) {
       try {
-        await installPackage([resolved.moduleName], asset.name, {
+        await installPackage(resolved.moduleName, asset.name, {
           saveDev: false
         });
       } catch (err) {

src/assets/JSAsset.js

@@ -1,15 +1,15 @@
-const {File: BabelFile} = require('babel-core');
-const traverse = require('babel-traverse').default;
-const codeFrame = require('babel-code-frame');
+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 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');
@@ -60,44 +60,17 @@ class JSAsset extends Asset {
     );
   }
 
-  async getParserOptions() {
-    // Babylon options. We enable a few plugins by default.
-    const options = {
+  async parse(code) {
+    return babelParser.parse(code, {
       filename: this.name,
       allowReturnOutsideFunction: true,
-      allowHashBang: true,
-      ecmaVersion: Infinity,
       strictMode: false,
       sourceType: 'module',
-      locations: true,
-      plugins: ['exportExtensions', '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);
-    }
-
-    return options;
-  }
-
-  async parse(code) {
-    const options = await this.getParserOptions();
-    return babylon.parse(code, options);
+      plugins: ['exportDefaultFrom', 'exportNamespaceFrom', 'dynamicImport']
+    });
   }
 
   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);
-    }
-
     return traverse(this.ast, visitor, null, this);
   }
 
@@ -214,7 +187,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 +263,18 @@ class JSAsset extends Asset {
   generateErrorMessage(err) {
     const loc = err.loc;
     if (loc) {
-      err.codeFrame = codeFrame(this.contents, loc.line, loc.column + 1);
+      // Babel 7 adds its own code frame on the error message itself
+      // We need to remove it and pass it separately.
+      if (err.message.startsWith(this.name)) {
+        err.message = err.message
+          .slice(this.name.length + 1, err.message.indexOf('\n'))
+          .trim();
+      }
+
+      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');
 
@@ -76,7 +75,7 @@ module.exports = {
 
         ReturnStatement(path) {
           // Wrap in a function if we see a top-level return statement.
-          if (path.getFunctionParent().isProgram()) {
+          if (!path.getFunctionParent()) {
             shouldWrap = true;
             asset.cacheData.isCommonJS = true;
             path.replaceWith(
@@ -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),
@@ -523,9 +522,10 @@ function addExport(asset, path, local, exported) {
     LOCAL: identifier
   });
 
-  let constantViolations = scope
-    .getBinding(local.name)
-    .constantViolations.concat(path);
+  let binding = scope.getBinding(local.name);
+  let constantViolations = binding
+    ? binding.constantViolations.concat(path)
+    : [path];
 
   if (!asset.cacheData.exports[exported.name]) {
     asset.cacheData.exports[exported.name] = identifier.name;

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 (