@parcel/transformer-babel 2.0.0-nightly.142 → 2.0.0-nightly.1421

package/lib/jsx.js

@@ -3,56 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = getJSXOptions;
-
-var _path = _interopRequireDefault(require("path"));
-
+exports.default = isJSX;
+function _path() {
+  const data = _interopRequireDefault(require("path"));
+  _path = function () {
+    return data;
+  };
+  return data;
+}
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const JSX_EXTENSIONS = new Set(['.jsx', '.tsx']);
+const JSX_LIBRARIES = ['react', 'preact', 'nervejs', 'hyperapp'];
 
-const JSX_EXTENSIONS = {
-  '.jsx': true,
-  '.tsx': true
-};
-const JSX_PRAGMA = {
-  react: {
-    pragma: 'React.createElement',
-    pragmaFrag: 'React.Fragment'
-  },
-  preact: {
-    pragma: 'h',
-    pragmaFrag: 'Fragment'
-  },
-  nervjs: {
-    pragma: 'Nerv.createElement',
-    pragmaFrag: undefined
-  },
-  hyperapp: {
-    pragma: 'h',
-    pragmaFrag: undefined
-  }
-};
 /**
- * Generates a babel config for JSX. Attempts to detect react or react-like libraries
- * and changes the pragma accordingly.
+ * Returns whether an asset is likely JSX. Attempts to detect react or react-like libraries
+ * along with
  */
-
-async function getJSXOptions(config) {
+async function isJSX(options, config) {
   if (!config.isSource) {
-    return null;
-  } // Find a dependency that we can map to a JSX pragma
-
-
-  const pkg = await config.getPackage();
-  const reactLib = Object.keys(JSX_PRAGMA).find(libName => pkg && (pkg.dependencies && pkg.dependencies[libName] || pkg.devDependencies && pkg.devDependencies[libName]));
-  const pragma = reactLib ? JSX_PRAGMA[reactLib].pragma : undefined;
-  const pragmaFrag = reactLib ? JSX_PRAGMA[reactLib].pragmaFrag : undefined;
-
-  if (pragma || JSX_EXTENSIONS[_path.default.extname(config.searchPath)]) {
-    return {
-      plugins: [['@babel/plugin-transform-react-jsx', {
-        pragma,
-        pragmaFrag
-      }]]
-    };
+    return false;
+  }
+  if (JSX_EXTENSIONS.has(_path().default.extname(config.searchPath))) {
+    return true;
+  }
+  let pkg = await config.getPackage();
+  if (pkg !== null && pkg !== void 0 && pkg.alias && pkg.alias['react']) {
+    // e.g.: `{ alias: { "react": "preact/compat" } }`
+    return true;
+  } else {
+    // Find a dependency that implies JSX syntax.
+    return JSX_LIBRARIES.some(libName => pkg && (pkg.dependencies && pkg.dependencies[libName] || pkg.devDependencies && pkg.devDependencies[libName] || pkg.peerDependencies && pkg.peerDependencies[libName]));
   }
 }

package/lib/remapAstLocations.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.remapAstLocations = remapAstLocations;
+function remapAstLocations(t, ast, map) {
+  // remap ast to original mappings
+  // This improves sourcemap accuracy and fixes sourcemaps when scope-hoisting
+  traverseAll(t, ast.program, node => {
+    if (node.loc) {
+      var _node$loc;
+      if ((_node$loc = node.loc) !== null && _node$loc !== void 0 && _node$loc.start) {
+        let mapping = map.findClosestMapping(node.loc.start.line, node.loc.start.column);
+        if (mapping !== null && mapping !== void 0 && 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, node, visitor) {
+  if (!node) {
+    return;
+  }
+  visitor(node);
+  for (let key of t.VISITOR_KEYS[node.type] || []) {
+    // $FlowFixMe
+    let subNode = 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/lib/utils.js

@@ -4,41 +4,61 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.enginesToBabelTargets = enginesToBabelTargets;
-exports.getMinSemver = getMinSemver;
-
-var _assert = _interopRequireDefault(require("assert"));
-
-var _semver = _interopRequireDefault(require("semver"));
-
-var _options = require("@babel/helper-compilation-targets/lib/options");
-
+function _assert() {
+  const data = _interopRequireDefault(require("assert"));
+  _assert = function () {
+    return data;
+  };
+  return data;
+}
+function _semver() {
+  const data = _interopRequireDefault(require("semver"));
+  _semver = function () {
+    return data;
+  };
+  return data;
+}
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// 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
 const ESMODULE_BROWSERS = ['not ie <= 11', 'not edge < 16', 'not firefox < 60', 'not chrome < 61', 'not safari < 11', 'not opera < 48', 'not ios_saf < 11', 'not op_mini all', 'not android < 76', 'not blackberry > 0', 'not op_mob > 0', 'not and_chr < 76', 'not and_ff < 68', 'not ie_mob > 0', 'not and_uc > 0', 'not samsung < 8.2', 'not and_qq > 0', 'not baidu > 0', 'not kaios > 0'];
-
 function enginesToBabelTargets(env) {
   // "Targets" is the name @babel/preset-env uses for what Parcel calls engines.
   // This should not be confused with Parcel's own targets.
   // Unlike Parcel's engines, @babel/preset-env expects to work with minimum
   // versions, not semver ranges, of its targets.
   let targets = {};
-
   for (let engineName of Object.keys(env.engines)) {
-    let engineValue = env.engines[engineName]; // if the engineValue is a string, it might be a semver range. Use the minimum
-    // possible version instead.
+    let engineValue = env.engines[engineName];
 
+    // if the engineValue is a string, it might be a semver range. Use the minimum
+    // possible version instead.
     if (engineName === 'browsers') {
       targets[engineName] = engineValue;
     } else {
-      (0, _assert.default)(typeof engineValue === 'string');
-      if (!_options.TargetNames.hasOwnProperty(engineName)) continue;
-      let minVersion = getMinSemver(engineValue);
+      var _semver$minVersion;
+      (0, _assert().default)(typeof engineValue === 'string');
+      if (!TargetNames.hasOwnProperty(engineName)) continue;
+      let minVersion = (_semver$minVersion = _semver().default.minVersion(engineValue)) === null || _semver$minVersion === void 0 ? void 0 : _semver$minVersion.toString();
       targets[engineName] = minVersion !== null && minVersion !== void 0 ? minVersion : engineValue;
     }
   }
-
   if (env.outputFormat === 'esmodule' && env.isBrowser()) {
     // If there is already a browsers target, add a blacklist to exclude
     // instead of using babel's esmodules target. This allows specifying
@@ -51,18 +71,5 @@ function enginesToBabelTargets(env) {
       targets.esmodules = true;
     }
   }
-
   return targets;
-} // TODO: Replace with `minVersion` (https://github.com/npm/node-semver#ranges-1)
-//       once semver has been upgraded across Parcel.
-
-
-function getMinSemver(version) {
-  try {
-    let range = new _semver.default.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/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-babel",
-  "version": "2.0.0-nightly.142+c87c29dd",
+  "version": "2.0.0-nightly.1421+a1391ed8a",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
@@ -12,29 +16,24 @@
   "main": "lib/BabelTransformer.js",
   "source": "src/BabelTransformer.js",
   "engines": {
-    "node": ">= 10.0.0",
-    "parcel": "^2.0.0-alpha.1.1"
+    "node": ">= 12.0.0",
+    "parcel": "2.0.0-nightly.1419+a1391ed8a"
   },
   "dependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/generator": "^7.0.0",
-    "@babel/helper-compilation-targets": "^7.8.4",
-    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
-    "@babel/plugin-transform-react-jsx": "^7.0.0",
-    "@babel/plugin-transform-typescript": "^7.4.5",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/traverse": "^7.0.0",
-    "@parcel/babel-preset-env": "2.0.0-nightly.142+c87c29dd",
-    "@parcel/plugin": "2.0.0-nightly.142+c87c29dd",
-    "@parcel/source-map": "2.0.0-nightly.142+c87c29dd",
-    "@parcel/utils": "2.0.0-nightly.142+c87c29dd",
+    "@parcel/diagnostic": "2.0.0-nightly.1421+a1391ed8a",
+    "@parcel/plugin": "2.0.0-nightly.1421+a1391ed8a",
+    "@parcel/source-map": "^2.1.1",
+    "@parcel/utils": "2.0.0-nightly.1421+a1391ed8a",
     "browserslist": "^4.6.6",
-    "core-js": "^3.2.1",
+    "json5": "^2.2.0",
     "nullthrows": "^1.1.1",
-    "semver": "^5.7.0"
+    "semver": "^7.5.2"
   },
   "devDependencies": {
-    "@parcel/types": "2.0.0-nightly.142+c87c29dd"
+    "@babel/core": "^7.22.11",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/types": "^7.22.11",
+    "@parcel/types": "2.0.0-nightly.1421+a1391ed8a"
   },
-  "gitHead": "c87c29dd9ca09832e9677bb4d914d2e64bb2d5b8"
+  "gitHead": "a1391ed8a719fc2f976dbadb528ca2dcffa7da12"
 }

package/src/BabelTransformer.js

@@ -1,45 +1,45 @@
-// @flow
+// @flow strict-local
 
+import {babelErrorEnhancer} from './babelErrorUtils';
 import {Transformer} from '@parcel/plugin';
+import {relativeUrl} from '@parcel/utils';
 import SourceMap from '@parcel/source-map';
-import generate from '@babel/generator';
 import semver from 'semver';
 import babel7 from './babel7';
-import {relativeUrl} from '@parcel/utils';
-import {load, preSerialize, postDeserialize} from './config';
-import {babelErrorEnhancer} from './babelErrorUtils';
-
-export default new Transformer({
-  async loadConfig({config, options, logger}) {
-    await load(config, options, logger);
-  },
+import {load} from './config';
 
-  preSerializeConfig({config}) {
-    return preSerialize(config);
-  },
-
-  postDeserializeConfig({config, options}) {
-    return postDeserialize(config, options);
+export default (new Transformer({
+  loadConfig({config, options, logger}) {
+    return load(config, options, logger);
   },
 
   canReuseAST({ast}) {
     return ast.type === 'babel' && semver.satisfies(ast.version, '^7.0.0');
   },
 
-  async transform({asset, config, options}) {
-    // TODO: come up with a better name
+  async transform({asset, config, logger, options, tracer}) {
     try {
       if (config?.config) {
-        if (asset.meta.babelPlugins && Array.isArray(asset.meta.babelPlugins)) {
-          // $FlowFixMe
-          asset.ast = await babel7(
+        if (
+          asset.meta.babelPlugins != null &&
+          Array.isArray(asset.meta.babelPlugins)
+        ) {
+          await babel7({
             asset,
             options,
-            config,
-            asset.meta.babelPlugins,
-          );
+            logger,
+            babelOptions: config,
+            additionalPlugins: asset.meta.babelPlugins,
+            tracer,
+          });
         } else {
-          asset.ast = await babel7(asset, options, config);
+          await babel7({
+            asset,
+            options,
+            logger,
+            babelOptions: config,
+            tracer,
+          });
         }
       }
 
@@ -49,27 +49,54 @@ export default new Transformer({
     }
   },
 
-  async generate({asset, options}) {
+  async generate({asset, ast, options}) {
+    let originalSourceMap = await asset.getMap();
     let sourceFileName: string = relativeUrl(
       options.projectRoot,
       asset.filePath,
     );
 
-    try {
-      // $FlowFixMe: figure out how to make AST required in generate method
-      let generated = generate(asset.ast.program, {
-        sourceMaps: options.sourceMaps,
-        sourceFileName: sourceFileName,
-      });
+    const babelCorePath = await options.packageManager.resolve(
+      '@babel/core',
+      asset.filePath,
+      {
+        range: '^7.12.0',
+        saveDev: true,
+        shouldAutoInstall: options.shouldAutoInstall,
+      },
+    );
 
-      return {
-        code: generated.code,
-        map: new SourceMap(generated.rawMappings ?? undefined, {
-          [sourceFileName]: null,
-        }),
-      };
-    } catch (e) {
-      throw await babelErrorEnhancer(e, asset);
+    const {default: generate} = await options.packageManager.require(
+      '@babel/generator',
+      babelCorePath.resolved,
+    );
+
+    let {code, rawMappings} = generate(ast.program, {
+      sourceFileName,
+      sourceMaps: !!asset.env.sourceMap,
+      comments: true,
+    });
+
+    let map = new SourceMap(options.projectRoot);
+    if (rawMappings) {
+      map.addIndexedMappings(rawMappings);
     }
+
+    if (originalSourceMap) {
+      // The babel AST already contains the correct mappings, but not the source contents.
+      // We need to copy over the source contents from the original map.
+      let sourcesContent = originalSourceMap.getSourcesContentMap();
+      for (let filePath in sourcesContent) {
+        let content = sourcesContent[filePath];
+        if (content != null) {
+          map.setSourceContent(filePath, content);
+        }
+      }
+    }
+
+    return {
+      content: code,
+      map,
+    };
   },
-});
+}): Transformer);

package/src/babel7.js

@@ -1,28 +1,47 @@
 // @flow
 
-import type {MutableAsset, AST, PluginOptions} from '@parcel/types';
+import type {
+  MutableAsset,
+  AST,
+  PluginOptions,
+  PluginTracer,
+  PluginLogger,
+} from '@parcel/types';
+import typeof * as BabelCore from '@babel/core';
 
 import invariant from 'assert';
+import path from 'path';
+import {md} from '@parcel/diagnostic';
+import {relativeUrl} from '@parcel/utils';
+import {remapAstLocations} from './remapAstLocations';
 
-import {BABEL_RANGE} from './constants';
 import packageJson from '../package.json';
 
 const transformerVersion: mixed = packageJson.version;
 invariant(typeof transformerVersion === 'string');
 
-export default async function babel7(
+type Babel7TransformOptions = {|
   asset: MutableAsset,
   options: PluginOptions,
+  logger: PluginLogger,
   babelOptions: any,
-  additionalPlugins: Array<any> = [],
+  additionalPlugins?: Array<any>,
+  tracer: PluginTracer,
+|};
+
+export default async function babel7(
+  opts: Babel7TransformOptions,
 ): Promise<?AST> {
-  // 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 = babelOptions.internal
-    ? require('@babel/core')
-    : await options.packageManager.require('@babel/core', asset.filePath, {
-        range: BABEL_RANGE,
-      });
+  let {asset, options, babelOptions, additionalPlugins = [], tracer} = opts;
+  const babelCore: BabelCore = await options.packageManager.require(
+    '@babel/core',
+    asset.filePath,
+    {
+      range: '^7.12.0',
+      saveDev: true,
+      shouldAutoInstall: options.shouldAutoInstall,
+    },
+  );
 
   let config = {
     ...babelOptions.config,
@@ -34,33 +53,92 @@ export default async function babel7(
     configFile: false,
     parserOpts: {
       ...babelOptions.config.parserOpts,
+      sourceFilename: relativeUrl(options.projectRoot, asset.filePath),
       allowReturnOutsideFunction: true,
       strictMode: false,
       sourceType: 'module',
-      plugins: ['dynamicImport'],
+      plugins: [
+        ...(babelOptions.config.parserOpts?.plugins ?? []),
+        ...(babelOptions.syntaxPlugins ?? []),
+        // Applied by preset-env
+        'classProperties',
+        'classPrivateProperties',
+        'classPrivateMethods',
+        'exportDefaultFrom',
+        // 'topLevelAwait'
+      ],
     },
     caller: {
       name: 'parcel',
       version: transformerVersion,
       targets: JSON.stringify(babelOptions.targets),
+      outputFormat: asset.env.outputFormat,
     },
   };
 
-  let code = await asset.getCode();
+  if (tracer.enabled) {
+    config.wrapPluginVisitorMethod = (
+      key: string,
+      nodeType: string,
+      fn: Function,
+    ) => {
+      return function () {
+        let pluginKey = key;
+        if (pluginKey.startsWith(options.projectRoot)) {
+          pluginKey = path.relative(options.projectRoot, pluginKey);
+        }
+        const measurement = tracer.createMeasurement(
+          pluginKey,
+          nodeType,
+          path.relative(options.projectRoot, asset.filePath),
+        );
+        fn.apply(this, arguments);
+        measurement && measurement.end();
+      };
+    };
+  }
 
+  let ast = await asset.getAST();
   let res;
-  if (asset.ast) {
-    res = babel.transformFromAstSync(asset.ast.program, code, config);
+  if (ast) {
+    res = await babelCore.transformFromAstAsync(
+      ast.program,
+      asset.isASTDirty() ? undefined : await asset.getCode(),
+      config,
+    );
   } else {
-    res = babel.transformSync(code, config);
+    res = await babelCore.transformAsync(await asset.getCode(), config);
+    if (res.ast) {
+      let map = await asset.getMap();
+      if (map) {
+        remapAstLocations(babelCore.types, res.ast, map);
+      }
+    }
+    if (res.externalDependencies) {
+      for (let f of res.externalDependencies) {
+        if (!path.isAbsolute(f)) {
+          opts.logger.warn({
+            message: md`Ignoring non-absolute Babel external dependency: ${f}`,
+            hints: [
+              'Please report this to the corresponding Babel plugin and/or to Parcel.',
+            ],
+          });
+        } else {
+          if (await options.inputFS.exists(f)) {
+            asset.invalidateOnFileChange(f);
+          } else {
+            asset.invalidateOnFileCreate({filePath: f});
+          }
+        }
+      }
+    }
   }
 
   if (res.ast) {
-    return {
+    asset.setAST({
       type: 'babel',
       version: '7.0.0',
       program: res.ast,
-      isDirty: true,
-    };
+    });
   }
 }

package/src/babelErrorUtils.js

@@ -17,9 +17,10 @@ export async function babelErrorEnhancer(
   asset: BaseAsset,
 ): Promise<BabelError> {
   if (error.loc) {
-    error.message = error.message
-      .slice(asset.filePath.length + 1, error.message.indexOf('\n'))
-      .trim();
+    let start = error.message.startsWith(asset.filePath)
+      ? asset.filePath.length + 1
+      : 0;
+    error.message = error.message.slice(start).split('\n')[0].trim();
   }
 
   error.source = await asset.getCode();