Babel 7

package.json

@@ -15,6 +15,17 @@
     "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/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",

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 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 babylon = 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 generate = require('@babel/generator').default;
 const terser = require('../transforms/terser');
 const SourceMap = require('../SourceMap');
 const hoist = require('../scope-hoisting/hoist');
@@ -63,40 +63,44 @@ 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']
+      parserOpts: {
+        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);
-    }
+    Object.assign(options, this.babelConfig);
+    // 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);
+    // return babylon.parse(code, options);
+    return babelCore.parse(code, options);
   }
 
   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);
   }
@@ -285,11 +289,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(

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 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,7 +1,7 @@
 const path = require('path');
 const matchesPattern = require('../visitors/matches-pattern');
 const mm = require('micromatch');
-const t = require('babel-types');
+const t = require('@babel/types');
 const template = require('babel-template');
 const rename = require('./renamer');
 const {getName, getIdentifier, getExportIdentifier} = require('./utils');

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 (

src/transforms/babel.js

@@ -1,12 +1,12 @@
-const presetEnv = require('babel-preset-env');
+const presetEnv = require('@babel/preset-env');
 const getTargetEngines = require('../utils/getTargetEngines');
 const localRequire = require('../utils/localRequire');
 const path = require('path');
-const {util: babelUtils} = require('babel-core');
+// const {util: babelUtils} = require('@babel/core');
 const fs = require('../utils/fs');
 
 const NODE_MODULES = `${path.sep}node_modules${path.sep}`;
-const ENV_PLUGINS = require('babel-preset-env/data/plugins');
+const ENV_PLUGINS = require('@babel/preset-env/data/plugins');
 const ENV_PRESETS = {
   es2015: true,
   es2016: true,
@@ -35,19 +35,19 @@ async function babelTransform(asset) {
 
   await asset.parseIfNeeded();
 
-  // If this is an internally generated config, use our internal babel-core,
+  // If this is an internally generated config, use our internal @babel/core,
   // otherwise require a local version from the package we're compiling.
   let babel = config.internal
-    ? require('babel-core')
-    : await localRequire('babel-core', asset.name);
+    ? require('@babel/core')
+    : await localRequire('@babel/core', asset.name);
 
   // TODO: support other versions of babel
-  if (parseInt(babel.version, 10) !== 6) {
-    throw new Error(`Unsupported babel version: ${babel.version}`);
-  }
+  // if (parseInt(babel.version, 10) !== 6) {
+  //   throw new Error(`Unsupported babel version: ${babel.version}`);
+  // }
 
   let res = babel.transformFromAst(asset.ast, asset.contents, config);
-  if (!res.ignored) {
+  if (res.ast) {
     asset.ast = res.ast;
     asset.isAstDirty = true;
   }
@@ -59,6 +59,7 @@ async function getConfig(asset) {
   let config = await getBabelConfig(asset);
   if (config) {
     config.code = false;
+    config.ast = true;
     config.filename = asset.name;
     config.babelrc = false;
 
@@ -82,7 +83,7 @@ async function getBabelConfig(asset) {
   if (asset.isES6Module) {
     return {
       internal: true,
-      plugins: [require('babel-plugin-transform-es2015-modules-commonjs')]
+      plugins: [require('@babel/plugin-transform-modules-commonjs')]
     };
   }
 
@@ -105,24 +106,24 @@ async function getBabelConfig(asset) {
   let jsxConfig = await getJSXConfig(asset, isSource);
   let flowConfig = getFlowConfig(asset, isSource);
 
-  // Merge the babel-preset-env config and the babelrc if needed
+  // Merge the @babel/preset-env config and the babelrc if needed
   if (babelrc && !shouldIgnoreBabelrc(asset.name, babelrc)) {
     if (envConfig) {
-      // Filter out presets that are already applied by babel-preset-env
+      // Filter out presets that are already applied by @babel/preset-env
       if (Array.isArray(babelrc.presets)) {
         babelrc.presets = babelrc.presets.filter(preset => {
           return !ENV_PRESETS[getPluginName(preset)];
         });
       }
 
-      // Filter out plugins that are already applied by babel-preset-env
+      // Filter out plugins that are already applied by @babel/preset-env
       if (Array.isArray(babelrc.plugins)) {
         babelrc.plugins = babelrc.plugins.filter(plugin => {
           return !ENV_PLUGINS[getPluginName(plugin)];
         });
       }
 
-      // Add plugins generated by babel-preset-env to get to the app's target engines.
+      // Add plugins generated by @babel/preset-env to get to the app's target engines.
       mergeConfigs(babelrc, envConfig);
     }
 
@@ -145,7 +146,7 @@ async function getBabelConfig(asset) {
     return babelrc;
   }
 
-  // If there is a babel-preset-env config, and it isn't empty use that
+  // If there is a @babel/preset-env config, and it isn't empty use that
   if (envConfig && (envConfig.plugins.length > 0 || jsxConfig || flowConfig)) {
     mergeConfigs(envConfig, jsxConfig);
     mergeConfigs(envConfig, flowConfig);
@@ -226,22 +227,23 @@ async function findBabelRc(asset) {
 }
 
 function shouldIgnoreBabelrc(filename, babelrc) {
+  return false;
   // Determine if we should ignore this babelrc file. We do this here instead of
-  // letting babel-core handle it because this config might be merged with our
+  // letting @babel/core handle it because this config might be merged with our
   // autogenerated one later which shouldn't be ignored.
-  let ignore = babelUtils.arrayify(babelrc.ignore, babelUtils.regexify);
-  let only =
-    babelrc.only && babelUtils.arrayify(babelrc.only, babelUtils.regexify);
-  return babelUtils.shouldIgnore(filename, ignore, only);
+  // let ignore = babelUtils.arrayify(babelrc.ignore, babelUtils.regexify);
+  // let only =
+  //   babelrc.only && babelUtils.arrayify(babelrc.only, babelUtils.regexify);
+  // return babelUtils.shouldIgnore(filename, ignore, only);
 }
 
 /**
- * Generates a babel-preset-env config for an asset.
+ * Generates a @babel/preset-env config for an asset.
  * This is done by finding the source module's target engines, and the app's
  * target engines, and doing a diff to include only the necessary plugins.
  */
 async function getEnvConfig(asset, isSourceModule) {
-  // Load the target engines for the app and generate a babel-preset-env config
+  // Load the target engines for the app and generate a @babel/preset-env config
   let targetEngines = await getTargetEngines(asset, true);
   let targetEnv = await getEnvPlugins(targetEngines, true);
   if (!targetEnv) {
@@ -277,16 +279,21 @@ async function getEnvPlugins(targets, useBuiltIns = false) {
   }
 
   let plugins = presetEnv.default(
-    {},
-    {targets, modules: false, useBuiltIns: useBuiltIns ? 'entry' : false}
+    {assertVersion: () => true},
+    {
+      targets,
+      modules: false,
+      useBuiltIns: useBuiltIns ? 'entry' : false,
+      shippedProposals: true
+    }
   ).plugins;
 
-  // babel-preset-env version 6.x does not cover object-rest-spread so always
+  // @babel/preset-env version 6.x does not cover object-rest-spread so always
   // add it.
-  plugins.push([
-    require('babel-plugin-transform-object-rest-spread'),
-    {useBuiltIns}
-  ]);
+  // plugins.push([
+  //   require('babel-plugin-transform-object-rest-spread'),
+  //   {useBuiltIns}
+  // ]);
 
   envCache.set(key, plugins);
   return plugins;
@@ -319,7 +326,7 @@ async function getJSXConfig(asset, isSourceModule) {
 
   if (pragma || JSX_EXTENSIONS[path.extname(asset.name)]) {
     return {
-      plugins: [[require('babel-plugin-transform-react-jsx'), {pragma}]],
+      plugins: [[require('@babel/plugin-transform-react-jsx'), {pragma}]],
       internal: true
     };
   }
@@ -331,7 +338,7 @@ async function getJSXConfig(asset, isSourceModule) {
 function getFlowConfig(asset) {
   if (/^(\/{2}|\/\*+) *@flow/.test(asset.contents.substring(0, 20))) {
     return {
-      plugins: [[require('babel-plugin-transform-flow-strip-types')]],
+      plugins: [[require('@babel/plugin-transform-flow-strip-types')]],
       internal: true
     };
   }

src/utils/getTargetEngines.js

@@ -12,7 +12,7 @@ const DEFAULT_ENGINES = {
  *   - package.json engines field
  *   - package.json browserslist field
  *   - browserslist or .browserslistrc files
- *   - .babelrc or .babelrc.js files with babel-preset-env
+ *   - .babelrc or .babelrc.js files with @babel/preset-env
  */
 async function getTargetEngines(asset, isTargetApp) {
   let targets = {};

src/visitors/dependencies.js

@@ -1,6 +1,6 @@
-const types = require('babel-types');
+const types = require('@babel/types');
 const template = require('babel-template');
-const traverse = require('babel-traverse').default;
+const traverse = require('@babel/traverse').default;
 const urlJoin = require('../utils/urlJoin');
 const isURL = require('../utils/is-url');
 const matchesPattern = require('./matches-pattern');

src/visitors/env.js

@@ -1,4 +1,4 @@
-const types = require('babel-types');
+const types = require('@babel/types');
 const matchesPattern = require('./matches-pattern');
 
 module.exports = {

src/visitors/fs.js

@@ -1,4 +1,4 @@
-const t = require('babel-types');
+const t = require('@babel/types');
 const Path = require('path');
 const fs = require('fs');
 const template = require('babel-template');

src/visitors/globals.js

@@ -1,5 +1,5 @@
 const Path = require('path');
-const types = require('babel-types');
+const types = require('@babel/types');
 
 const VARS = {
   process: asset => {

src/visitors/matches-pattern.js

@@ -1,7 +1,7 @@
-const types = require('babel-types');
+const types = require('@babel/types');
 
-// from babel-types. remove when we upgrade to babel 7.
-// https://github.com/babel/babel/blob/0189b387026c35472dccf45d14d58312d249f799/packages/babel-types/src/index.js#L347
+// from @babel/types. remove when we upgrade to babel 7.
+// https://github.com/babel/babel/blob/0189b387026c35472dccf45d14d58312d249f799/packages/@babel/types/src/index.js#L347
 module.exports = function matchesPattern(member, match, allowPartial) {
   // not a member expression
   if (!types.isMemberExpression(member)) return false;

test/javascript.js

@@ -4,7 +4,7 @@ const path = require('path');
 const {bundle, run, assertBundleTree, deferred} = require('./utils');
 const {mkdirp} = require('../src/utils/fs');
 
-describe('javascript', function() {
+describe.only('javascript', function() {
   it('should produce a basic JS bundle with CommonJS requires', async function() {
     let b = await bundle(__dirname + '/integration/commonjs/index.js');