@parcel/transformer-babel 2.0.0-beta.3.1 → 2.0.0-dev.1515

package/src/config.js

@@ -1,19 +1,21 @@
 // @flow
 
-import type {Config, PluginOptions} from '@parcel/types';
-import type {PluginLogger} from '@parcel/logger';
+import type {Config, PluginOptions, PluginLogger} from '@parcel/types';
 import typeof * as BabelCore from '@babel/core';
+import type {Diagnostic} from '@parcel/diagnostic';
+import type {BabelConfig} from './types';
 
+import json5 from 'json5';
 import path from 'path';
-import * as internalBabelCore from '@babel/core';
-import {md5FromObject, relativePath, resolveConfig} from '@parcel/utils';
+import {hashObject, relativePath, resolveConfig} from '@parcel/utils';
+import {md, generateJSONCodeHighlights} from '@parcel/diagnostic';
+import {BABEL_CORE_RANGE} from './constants';
 
 import isJSX from './jsx';
 import getFlowOptions from './flow';
 import {enginesToBabelTargets} from './utils';
 
 const TYPESCRIPT_EXTNAME_RE = /\.tsx?$/;
-const BABEL_TRANSFORMER_DIR = path.dirname(__dirname);
 const JS_EXTNAME_RE = /^\.(js|cjs|mjs)$/;
 const BABEL_CONFIG_FILENAMES = [
   '.babelrc',
@@ -28,11 +30,18 @@ const BABEL_CONFIG_FILENAMES = [
   'babel.config.cjs',
 ];
 
+type BabelConfigResult = {|
+  internal: boolean,
+  config: BabelConfig,
+  targets?: mixed,
+  syntaxPlugins?: mixed,
+|};
+
 export async function load(
   config: Config,
   options: PluginOptions,
   logger: PluginLogger,
-): Promise<void> {
+): Promise<?BabelConfigResult> {
   // Don't transpile inside node_modules
   if (!config.isSource) {
     return;
@@ -56,24 +65,26 @@ export async function load(
       options.projectRoot,
     ))
   ) {
-    await buildDefaultBabelConfig(options, config);
-    return;
+    return buildDefaultBabelConfig(options, config);
   }
 
   const babelCore: BabelCore = await options.packageManager.require(
     '@babel/core',
     config.searchPath,
     {
-      range: '^7.12.0',
+      range: BABEL_CORE_RANGE,
       saveDev: true,
       shouldAutoInstall: options.shouldAutoInstall,
     },
   );
   config.addDevDependency({
-    moduleSpecifier: '@babel/core',
+    specifier: '@babel/core',
     resolveFrom: config.searchPath,
+    range: BABEL_CORE_RANGE,
   });
 
+  config.invalidateOnEnvChange('BABEL_ENV');
+  config.invalidateOnEnvChange('NODE_ENV');
   let babelOptions = {
     filename: config.searchPath,
     cwd: options.projectRoot,
@@ -96,23 +107,28 @@ export async function load(
       // We need to invalidate on startup in case the config is non-static,
       // e.g. uses unknown environment variables, reads from the filesystem, etc.
       logger.warn({
-        message: `It looks like you're using a JavaScript Babel config file. This means the config cannot be watched for changes, and Babel transformations cannot be cached. You'll need to restart Parcel for changes to this config to take effect. Try using a ${path.basename(
-          file,
-          path.extname(file),
-        ) + '.json'} file instead.`,
+        message: `It looks like you're using a JavaScript Babel config file. This means the config cannot be watched for changes, and Babel transformations cannot be cached. You'll need to restart Parcel for changes to this config to take effect. Try using a ${
+          path.basename(file, path.extname(file)) + '.json'
+        } file instead.`,
       });
-      config.shouldInvalidateOnStartup();
+      config.invalidateOnStartup();
 
       // But also add the config as a dev dependency so we can at least attempt invalidation in watch mode.
       config.addDevDependency({
-        moduleSpecifier: relativePath(options.projectRoot, file),
+        specifier: relativePath(options.projectRoot, file),
         resolveFrom: path.join(options.projectRoot, 'index'),
-        // Also invalidate @parcel/transformer-babel when the config or a dependency updates.
+        // Also invalidate @babel/core when the config or a dependency updates.
         // This ensures that the caches in @babel/core are also invalidated.
-        invalidateParcelPlugin: true,
+        additionalInvalidations: [
+          {
+            specifier: '@babel/core',
+            resolveFrom: config.searchPath,
+            range: BABEL_CORE_RANGE,
+          },
+        ],
       });
     } else {
-      config.addIncludedFile(file);
+      config.invalidateOnFileChange(file);
     }
   };
 
@@ -121,7 +137,7 @@ export async function load(
       message:
         'You are using an old version of @babel/core which does not support the necessary features for Parcel to cache and watch babel config files safely. You may need to restart Parcel for config changes to take effect. Please upgrade to @babel/core 7.12.0 or later to resolve this issue.',
     });
-    config.shouldInvalidateOnStartup();
+    config.invalidateOnStartup();
   };
 
   // Old versions of @babel/core return null from loadPartialConfig when the file should explicitly not be run through babel (ignore/exclude)
@@ -167,13 +183,6 @@ export async function load(
       syntaxPlugins.push('jsx');
     }
 
-    config.setResult({
-      internal: false,
-      config: partialConfig.options,
-      targets: enginesToBabelTargets(config.env),
-      syntaxPlugins,
-    });
-
     // If the config has plugins loaded with require(), or inline plugins in the config,
     // we can't cache the result of the compilation because we don't know where they came from.
     if (hasRequire(partialConfig.options)) {
@@ -182,18 +191,29 @@ export async function load(
           'It looks like you are using `require` to configure Babel plugins or presets. This means Babel transformations cannot be cached and will run on each build. Please use strings to configure Babel instead.',
       });
 
-      config.setResultHash(JSON.stringify(Date.now()));
-      config.shouldInvalidateOnStartup();
+      config.setCacheKey(JSON.stringify(Date.now()));
+      config.invalidateOnStartup();
     } else {
-      definePluginDependencies(config, options);
-      config.setResultHash(md5FromObject(partialConfig.options));
+      await warnOnRedundantPlugins(options.inputFS, partialConfig, logger);
+      definePluginDependencies(config, partialConfig.options, options);
+      config.setCacheKey(hashObject(partialConfig.options));
     }
+
+    return {
+      internal: false,
+      config: partialConfig.options,
+      targets: enginesToBabelTargets(config.env),
+      syntaxPlugins,
+    };
   } else {
-    await buildDefaultBabelConfig(options, config);
+    return buildDefaultBabelConfig(options, config);
   }
 }
 
-async function buildDefaultBabelConfig(options: PluginOptions, config: Config) {
+async function buildDefaultBabelConfig(
+  options: PluginOptions,
+  config: Config,
+): Promise<?BabelConfigResult> {
   // If this is a .ts or .tsx file, we don't need to enable flow.
   if (TYPESCRIPT_EXTNAME_RE.test(config.searchPath)) {
     return;
@@ -211,25 +231,12 @@ async function buildDefaultBabelConfig(options: PluginOptions, config: Config) {
     syntaxPlugins.push('jsx');
   }
 
-  babelOptions.presets = (babelOptions.presets || []).map(preset =>
-    internalBabelCore.createConfigItem(preset, {
-      type: 'preset',
-      dirname: BABEL_TRANSFORMER_DIR,
-    }),
-  );
-  babelOptions.plugins = (babelOptions.plugins || []).map(plugin =>
-    internalBabelCore.createConfigItem(plugin, {
-      type: 'plugin',
-      dirname: BABEL_TRANSFORMER_DIR,
-    }),
-  );
-
-  config.setResult({
+  definePluginDependencies(config, babelOptions, options);
+  return {
     internal: true,
     config: babelOptions,
     syntaxPlugins,
-  });
-  definePluginDependencies(config, options);
+  };
 }
 
 function hasRequire(options) {
@@ -237,26 +244,170 @@ function hasRequire(options) {
   return configItems.some(item => !item.file);
 }
 
-function definePluginDependencies(config, options) {
-  let babelConfig = config.result.config;
+function definePluginDependencies(config, babelConfig: ?BabelConfig, options) {
   if (babelConfig == null) {
     return;
   }
 
-  let configItems = [...babelConfig.presets, ...babelConfig.plugins];
+  let configItems = [
+    ...(babelConfig.presets || []),
+    ...(babelConfig.plugins || []),
+  ];
   for (let configItem of configItems) {
     // FIXME: this uses a relative path from the project root rather than resolving
     // from the config location because configItem.file.request can be a shorthand
     // rather than a full package name.
     config.addDevDependency({
-      moduleSpecifier: relativePath(
-        options.projectRoot,
-        configItem.file.resolved,
-      ),
+      specifier: relativePath(options.projectRoot, configItem.file.resolved),
       resolveFrom: path.join(options.projectRoot, 'index'),
-      // Also invalidate @parcel/transformer-babel when the plugin or a dependency updates.
+      // Also invalidate @babel/core when the plugin or a dependency updates.
       // This ensures that the caches in @babel/core are also invalidated.
-      invalidateParcelPlugin: true,
+      additionalInvalidations: [
+        {
+          specifier: '@babel/core',
+          resolveFrom: config.searchPath,
+          range: BABEL_CORE_RANGE,
+        },
+      ],
+    });
+  }
+}
+
+const redundantPresets = new Set([
+  '@babel/preset-env',
+  '@babel/preset-react',
+  '@babel/preset-typescript',
+  '@parcel/babel-preset-env',
+]);
+
+async function warnOnRedundantPlugins(fs, babelConfig, logger) {
+  if (babelConfig == null) {
+    return;
+  }
+
+  let configPath = babelConfig.config ?? babelConfig.babelrc;
+  if (!configPath) {
+    return;
+  }
+
+  let presets = babelConfig.options.presets || [];
+  let plugins = babelConfig.options.plugins || [];
+  let foundRedundantPresets = new Set();
+
+  let filteredPresets = presets.filter(preset => {
+    if (redundantPresets.has(preset.file.request)) {
+      foundRedundantPresets.add(preset.file.request);
+      return false;
+    }
+
+    return true;
+  });
+
+  let filePath = path.relative(process.cwd(), configPath);
+  let diagnostics: Array<Diagnostic> = [];
+
+  if (
+    filteredPresets.length === 0 &&
+    foundRedundantPresets.size > 0 &&
+    plugins.length === 0
+  ) {
+    diagnostics.push({
+      message: md`Parcel includes transpilation by default. Babel config __${filePath}__ contains only redundant presets. Deleting it may significantly improve build performance.`,
+      codeFrames: [
+        {
+          filePath: configPath,
+          codeHighlights: await getCodeHighlights(
+            fs,
+            configPath,
+            foundRedundantPresets,
+          ),
+        },
+      ],
+      hints: [md`Delete __${filePath}__`],
+      documentationURL:
+        'https://parceljs.org/languages/javascript/#default-presets',
+    });
+  } else if (foundRedundantPresets.size > 0) {
+    diagnostics.push({
+      message: md`Parcel includes transpilation by default. Babel config __${filePath}__ includes the following redundant presets: ${[
+        ...foundRedundantPresets,
+      ].map(p =>
+        md.underline(p),
+      )}. Removing these may improve build performance.`,
+      codeFrames: [
+        {
+          filePath: configPath,
+          codeHighlights: await getCodeHighlights(
+            fs,
+            configPath,
+            foundRedundantPresets,
+          ),
+        },
+      ],
+      hints: [md`Remove the above presets from __${filePath}__`],
+      documentationURL:
+        'https://parceljs.org/languages/javascript/#default-presets',
     });
   }
+
+  if (foundRedundantPresets.has('@babel/preset-env')) {
+    diagnostics.push({
+      message:
+        "@babel/preset-env does not support Parcel's targets, which will likely result in unnecessary transpilation and larger bundle sizes.",
+      codeFrames: [
+        {
+          filePath: babelConfig.config ?? babelConfig.babelrc,
+          codeHighlights: await getCodeHighlights(
+            fs,
+            babelConfig.config ?? babelConfig.babelrc,
+            new Set(['@babel/preset-env']),
+          ),
+        },
+      ],
+      hints: [
+        `Either remove __@babel/preset-env__ to use Parcel's builtin transpilation, or replace with __@parcel/babel-preset-env__`,
+      ],
+      documentationURL:
+        'https://parceljs.org/languages/javascript/#custom-plugins',
+    });
+  }
+
+  if (diagnostics.length > 0) {
+    logger.warn(diagnostics);
+  }
+}
+
+async function getCodeHighlights(fs, filePath, redundantPresets) {
+  let ext = path.extname(filePath);
+  if (ext !== '.js' && ext !== '.cjs' && ext !== '.mjs') {
+    let contents = await fs.readFile(filePath, 'utf8');
+    let json = json5.parse(contents);
+
+    let presets = json.presets || [];
+    let pointers = [];
+    for (let i = 0; i < presets.length; i++) {
+      if (Array.isArray(presets[i]) && redundantPresets.has(presets[i][0])) {
+        pointers.push({type: 'value', key: `/presets/${i}/0`});
+      } else if (redundantPresets.has(presets[i])) {
+        pointers.push({type: 'value', key: `/presets/${i}`});
+      }
+    }
+
+    if (pointers.length > 0) {
+      return generateJSONCodeHighlights(contents, pointers);
+    }
+  }
+
+  return [
+    {
+      start: {
+        line: 1,
+        column: 1,
+      },
+      end: {
+        line: 1,
+        column: 1,
+      },
+    },
+  ];
 }

package/src/constants.js

@@ -1,3 +1,3 @@
 // @flow strict-local
 
-export const BABEL_RANGE = '^7.0.0';
+export const BABEL_CORE_RANGE = '^7.12.0';

package/src/flow.js

@@ -1,7 +1,11 @@
 // @flow
 
-import type {Config, PluginOptions} from '@parcel/types';
+import type {Config, PluginOptions, PackageJSON} from '@parcel/types';
 import type {BabelConfig} from './types';
+import typeof * as BabelCore from '@babel/core';
+
+import {BABEL_CORE_RANGE} from './constants';
+import path from 'path';
 
 /**
  * Generates a babel config for stripping away Flow types.
@@ -15,9 +19,10 @@ export default async function getFlowOptions(
   }
 
   // Only add flow plugin if `flow-bin` is listed as a dependency in the root package.json
-  let conf = await config.getConfigFrom(options.projectRoot + '/index', [
-    'package.json',
-  ]);
+  let conf = await config.getConfigFrom<PackageJSON>(
+    options.projectRoot + '/index',
+    ['package.json'],
+  );
   let pkg = conf?.contents;
   if (
     !pkg ||
@@ -27,9 +32,35 @@ export default async function getFlowOptions(
     return null;
   }
 
+  const babelCore: BabelCore = await options.packageManager.require(
+    '@babel/core',
+    config.searchPath,
+    {
+      range: BABEL_CORE_RANGE,
+      saveDev: true,
+      shouldAutoInstall: options.shouldAutoInstall,
+    },
+  );
+
+  await options.packageManager.require(
+    '@babel/plugin-transform-flow-strip-types',
+    config.searchPath,
+    {
+      range: '^7.0.0',
+      saveDev: true,
+      shouldAutoInstall: options.shouldAutoInstall,
+    },
+  );
+
   return {
     plugins: [
-      ['@babel/plugin-transform-flow-strip-types', {requireDirective: true}],
+      babelCore.createConfigItem(
+        ['@babel/plugin-transform-flow-strip-types', {requireDirective: true}],
+        {
+          type: 'plugin',
+          dirname: path.dirname(config.searchPath),
+        },
+      ),
     ],
   };
 }

package/src/jsx.js

@@ -33,7 +33,8 @@ export default async function isJSX(
       libName =>
         pkg &&
         ((pkg.dependencies && pkg.dependencies[libName]) ||
-          (pkg.devDependencies && pkg.devDependencies[libName])),
+          (pkg.devDependencies && pkg.devDependencies[libName]) ||
+          (pkg.peerDependencies && pkg.peerDependencies[libName])),
     );
   }
 }

package/src/remapAstLocations.js

@@ -0,0 +1,70 @@
+// @flow strict-local
+
+import type {File as BabelNodeFile} from '@babel/types';
+import type SourceMap from '@parcel/source-map';
+import type {Node} from '@babel/types';
+import typeof * as BabelTypes from '@babel/types';
+
+export function remapAstLocations(
+  t: BabelTypes,
+  ast: BabelNodeFile,
+  map: SourceMap,
+) {
+  // remap ast to original mappings
+  // This improves sourcemap accuracy and fixes sourcemaps when scope-hoisting
+  traverseAll(t, ast.program, node => {
+    if (node.loc) {
+      if (node.loc?.start) {
+        let mapping = map.findClosestMapping(
+          node.loc.start.line,
+          node.loc.start.column,
+        );
+
+        if (mapping?.original) {
+          // $FlowFixMe
+          node.loc.start.line = mapping.original.line;
+          // $FlowFixMe
+          node.loc.start.column = mapping.original.column;
+
+          // $FlowFixMe
+          let length = node.loc.end.column - node.loc.start.column;
+
+          // $FlowFixMe
+          node.loc.end.line = mapping.original.line;
+          // $FlowFixMe
+          node.loc.end.column = mapping.original.column + length;
+
+          // $FlowFixMe
+          node.loc.filename = mapping.source;
+        } else {
+          // Maintain null mappings?
+          node.loc = null;
+        }
+      }
+    }
+  });
+}
+
+function traverseAll(
+  t: BabelTypes,
+  node: Node,
+  visitor: (node: Node) => void,
+): void {
+  if (!node) {
+    return;
+  }
+
+  visitor(node);
+
+  for (let key of t.VISITOR_KEYS[node.type] || []) {
+    // $FlowFixMe
+    let subNode: Node | Array<Node> = node[key];
+    if (Array.isArray(subNode)) {
+      for (let i = 0; i < subNode.length; i++) {
+        traverseAll(t, subNode[i], visitor);
+      }
+    } else {
+      traverseAll(t, subNode, visitor);
+    }
+  }
+}

package/src/utils.js

@@ -5,7 +5,22 @@ import type {Targets as BabelTargets} from '@babel/preset-env';
 
 import invariant from 'assert';
 import semver from 'semver';
-import {TargetNames} from '@babel/helper-compilation-targets/lib/options';
+
+// Copied from @babel/helper-compilation-targets/lib/options.js
+const TargetNames = {
+  node: 'node',
+  chrome: 'chrome',
+  opera: 'opera',
+  edge: 'edge',
+  firefox: 'firefox',
+  safari: 'safari',
+  ie: 'ie',
+  ios: 'ios',
+  android: 'android',
+  electron: 'electron',
+  samsung: 'samsung',
+  rhino: 'rhino',
+};
 
 // List of browsers to exclude when the esmodule target is specified.
 // Based on https://caniuse.com/#feat=es6-module
@@ -47,7 +62,7 @@ export function enginesToBabelTargets(env: Environment): BabelTargets {
     } else {
       invariant(typeof engineValue === 'string');
       if (!TargetNames.hasOwnProperty(engineName)) continue;
-      let minVersion = getMinSemver(engineValue);
+      let minVersion = semver.minVersion(engineValue)?.toString();
       targets[engineName] = minVersion ?? engineValue;
     }
   }
@@ -69,15 +84,3 @@ export function enginesToBabelTargets(env: Environment): BabelTargets {
 
   return targets;
 }
-
-// TODO: Replace with `minVersion` (https://github.com/npm/node-semver#ranges-1)
-//       once semver has been upgraded across Parcel.
-export function getMinSemver(version: string): ?string {
-  try {
-    let range = new semver.Range(version);
-    let sorted = range.set.sort((a, b) => a[0].semver.compare(b[0].semver));
-    return sorted[0][0].semver.version;
-  } catch (err) {
-    return null;
-  }
-}

package/lib/astConverter.js

@@ -1,114 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.babel7toBabel6 = babel7toBabel6;
-exports.babel6toBabel7 = babel6toBabel7;
-
-function _traverse() {
-  const data = _interopRequireDefault(require("@babel/traverse"));
-
-  _traverse = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// Convert between babel 7 and babel 6 AST
-// More info on the AST Changes: https://babeljs.io/docs/en/v7-migration-api#ast-changes
-function babel7toBabel6(ast) {
-  const visitor = {
-    ArrowFunctionExpression: node => {
-      node.expression = node.body.type !== 'BlockStatement';
-    },
-    ExistsTypeAnnotation: node => {
-      node.type = 'ExistentialTypeParam';
-    },
-    NumberLiteralTypeAnnotation: node => {
-      node.type = 'NumericLiteralTypeAnnotation';
-    },
-    ObjectTypeIndexer: node => {
-      node.end++;
-      node.loc.end.column++;
-    },
-    ForOfStatement: node => {
-      node.type = 'ForAwaitStatement';
-      delete node.await;
-    },
-    SpreadElement: (node, path) => {
-      if (path.parentPath.isObjectExpression() || path.parentPath.isArrayExpression()) {
-        node.type = 'SpreadProperty';
-      }
-    },
-    RestElement: (node, path) => {
-      if (path.parentPath.isObjectPattern() || path.parentPath.isArrayPattern()) {
-        node.type = 'RestProperty';
-      }
-    }
-  };
-  (0, _traverse().default)(ast, {
-    enter(path) {
-      if (path.node.variance && path.node.variance.type === 'Variance') {
-        path.node.variance = path.node.variance.kind;
-      }
-
-      let visitorFunc = visitor[path.node.type];
-
-      if (visitorFunc) {
-        visitorFunc(path.node, path);
-      }
-    }
-
-  });
-  return ast;
-}
-
-function babel6toBabel7(ast) {
-  const visitor = {
-    ArrowFunctionExpression: node => {
-      delete node.expression;
-    },
-    ExistentialTypeParam: node => {
-      node.type = 'ExistsTypeAnnotation';
-    },
-    NumericLiteralTypeAnnotation: node => {
-      node.type = 'NumberLiteralTypeAnnotation';
-    },
-    ObjectTypeIndexer: node => {
-      node.end--;
-      node.loc.end.column--;
-    },
-    ForAwaitStatement: node => {
-      node.type = 'ForOfStatement';
-      node.await = true;
-    },
-    SpreadProperty: node => {
-      node.type = 'SpreadElement';
-    },
-    RestProperty: node => {
-      node.type = 'RestElement';
-    }
-  };
-  (0, _traverse().default)(ast, {
-    enter(path) {
-      if (path.node.variance && typeof path.node.variance === 'string') {
-        path.node.variance = {
-          type: 'VarianceNode',
-          kind: path.node.variance
-        };
-      }
-
-      let visitorFunc = visitor[path.node.type];
-
-      if (visitorFunc) {
-        visitorFunc(path.node);
-      }
-    }
-
-  });
-  return ast;
-}