Allow preset-env to toggle module handling based on flags from the caller (like babel-loader) by loganfsmyth · Pull Request #8485 · babel/babel

loganfsmyth · 2018-08-17T01:17:12Z

Q	A
Fixed Issues?	Fixes #7517
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

What this PR essentially means is that utilities calling Babel can:

Pass a name to Babel, so that if there are errors, it can give more useful error messages
Pass misc flags that presets can hook into

For instance, babel-loader would be able to do:

babel.transform("code;", {
  filename,
  presets: ["@babel/preset-env"],
  caller: {
    name: "babel-loader",
    supportsStaticESM: true,
  },
});

and preset-env can automatically change its behavior from modules: "commonjs" to modules: false.

babel-bot · 2018-08-17T01:24:12Z

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/8854/

babel-bot · 2018-08-17T01:24:12Z

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/8829/

loganfsmyth · 2018-08-17T02:16:27Z

@Andarist Any thoughts on this, since it'll probably fit nicely into your work on the Rollup plugin too.

nicolo-ribaudo · 2018-08-17T09:44:52Z

packages/babel-preset-env/src/index.js

+      // When the `exclude` callback returns a truthy value, Babel not use the
+      // 'item' plugin here.
+      overrides.push({
+        exclude: (filename, { caller }) => caller && caller.supportsStaticESM,


Since the caller isn't file-specific but it is more similar to env, can we pass it using the api object instead using the exclude option (which is usally used to exclude plugins based on the file path)?

That's a great question. Let me revisit that. This approach was from an old branch I had, so I hadn't acutally revisited that. My concern would be caching of plugin instances. The issue with caching is that the API would need to be

const supportsStaticESM = api.caller(caller => !!(caller && caller.supportsStaticESM));

because your build might be used both with and without static ESM support, and Babel needs to know whether or not it should re-evaluate the plugin function, since it does its best to only evaluate the plugin/preset functions a single time unless told otherwise.

I'm actually fine if we want to expose the api approach, but I'd still probably be tempted to leave this exposed in test/include/exclude too.

Caller is an object that can only contain null, undefined, booleans, strings, and numbers: it can be JSON.stringifyed and stored to invalidate the cache when needed.

That's true, I'm personally not a huge fan of that because we could always want to expand that in the future, and having to re-stringify the object all the time just seems undesirable. At the end of the day I don't feel that strongly about it I guess. One other downside being that the plugin cache would get invalidated if any caller flag changed, even if it was something other than supportsStaticESM.

nicolo-ribaudo · 2018-08-17T09:47:47Z

packages/babel-core/src/config/config-chain.js

+export function buildPresetChain(
+  arg: PresetInstance,
+  context: *,
+): ConfigChain | null {


This function never returns null.

Oh good catch.

nicolo-ribaudo · 2018-08-17T22:37:56Z

Does Babel use the same config validation for config files and options directly passed to babel.transform? If not, we could disallow caller in .babelrc/babel.config.js since users should directly configure the preset.

loganfsmyth · 2018-08-17T23:01:51Z

If not, we could disallow caller in .babelrc/babel.config.js since users should directly configure the preset.

Already done! caller is only allowed as part of the programmatic call options to Babel.

loganfsmyth · 2018-08-19T23:22:00Z

packages/babel-preset-env/src/index.js

+    moduleTransformations[modules] &&
+    // TODO: Remove the 'api.caller' check eventually. Just here to prevent
+    // unnecessary breakage in the short term for users on older betas/RCs.
+    (modules !== "auto" || !api.caller || !api.caller(supportsStaticESM))


@nicolo-ribaudo Thoughts? Ended up exposing both and using the api.caller approach I mentioned.

…ure caching.

…lude functions.

existentialism · 2018-08-20T17:39:06Z

packages/babel-preset-env/test/normalize-options.spec.js

    });

-    it("`false` option returns commonjs", () => {
+    it("`false` option returns false", () => {


🤦‍♂️

hzoo · 2018-08-20T20:27:20Z

This is really great! Something we should document for our integrations to also take advantage of.

Andarist · 2018-08-21T08:07:54Z

🚀 super! Sorry I've missed this PR before, but this is super awesome - preventing the users misconfiguring their tool in clean way, gonna land this in rollup-plugin-babel once it gets released

This resolves a frustrating error I encountered where I was receiving: ReferenceError: Unknown option: .caller ...when trying to use `@babel/register`. This mysteriously went away when I upgraded to `rc.2`, which was inspired after I honed in on related work to the `caller` option in babel/babel#8485 after debugging Babel's `loadOptions` (in `7.0.0-rc.1`) with the Node.js debugger.

babel/babel#8485 babel/babel-loader#660 https://babeljs.io/docs/en/options#caller

webuniverseio · 2018-11-25T19:34:58Z

packages/babel-preset-env/src/normalize-options.js

+      ` - 'false' to indicate no module processing\n` +
+      ` - a specific module type: 'commonjs', 'amd', 'umd', 'systemjs'` +
+      ` - 'auto' (default) which will automatically select 'false' if the current\n` +
+      `   process is known to support ES module syntax, or "commonjs" otherwise\n`,


Hi, I have a ❓ about "if the current process is known to support ES module syntax". I'm not sure what that means. Can someone please clarify? Thank you!

For example, if you are calling Babel using babel-loader, modules will be set to false because webpack supports ES modules

Thanks @nicolo-ribaudo, I'll link to your reply from babel/babel-loader#521 😃

loganfsmyth added the PR: New Feature 🚀 A type of pull request used for our changelog categories label Aug 17, 2018

loganfsmyth mentioned this pull request Aug 17, 2018

Should we leave the module transform enabled by default for env and es2015 in 7.x? #7517

Closed

nicolo-ribaudo reviewed Aug 17, 2018

View reviewed changes

loganfsmyth force-pushed the caller-option branch from 5e28652 to a68f3e8 Compare August 19, 2018 23:19

loganfsmyth commented Aug 19, 2018

View reviewed changes

loganfsmyth added 6 commits August 20, 2018 10:12

Ensure that presets properly flatten their options.

25d2f59

Enforce a limited set of cache key values for plugins/presets for fut…

2c3c12f

…ure caching.

Expose optional caller metadata to Babel ignore/only/test/include/exc…

8f4bae8

…lude functions.

Expose an api.caller(...) handler for presets to access caller metadata.

8d6ed7e

Pass the caller.name option in Babel's own callers.

90bebe7

Expose caller.supportsStaticESM as a flag to change preset-env behavior.

d60c5e1

loganfsmyth force-pushed the caller-option branch from a68f3e8 to d60c5e1 Compare August 20, 2018 17:28

nicolo-ribaudo approved these changes Aug 20, 2018

View reviewed changes

existentialism reviewed Aug 20, 2018

View reviewed changes

existentialism approved these changes Aug 20, 2018

View reviewed changes

loganfsmyth merged commit 2a4f162 into babel:master Aug 20, 2018

loganfsmyth deleted the caller-option branch August 20, 2018 17:44

loganfsmyth mentioned this pull request Aug 21, 2018

Make preset-env skip CommonJS compilation by default, so that Webpack itself can handle it. babel/babel-loader#660

Merged

lixiaoyan mentioned this pull request Aug 23, 2018

@babel/plugin-transform-runtime: use supportsStaticESM for useESModules by default #8516

Closed

Andarist mentioned this pull request Aug 24, 2018

Pass appropriate caller config to babel.transform rollup/rollup-plugin-babel#238

Merged

SimenB mentioned this pull request Sep 10, 2018

[WIP] Upgrade entire suite to Babel 7 jestjs/jest#6949

Merged

3 tasks

Hypnosphi mentioned this pull request Sep 10, 2018

preset-env: update modules default value babel/website#1820

Open

andrey-skl added a commit to JetBrains/babel-preset that referenced this pull request Sep 11, 2018

Remove "modules: false" option since it must be a default now

387981c

babel/babel#8485 babel/babel-loader#660 https://babeljs.io/docs/en/options#caller

loganfsmyth mentioned this pull request Oct 3, 2018

Add docs for preset-env's modules:auto behavior babel/website#1852

Open

webuniverseio reviewed Nov 25, 2018

View reviewed changes

ockham mentioned this pull request May 31, 2019

Build: Use calypso-build's default preset to transpile dependencies Automattic/wp-calypso#33492

Closed

lock bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Oct 4, 2019

lock bot locked as resolved and limited conversation to collaborators Oct 4, 2019

Uh oh!

Conversation

loganfsmyth commented Aug 17, 2018

Uh oh!

babel-bot commented Aug 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

babel-bot commented Aug 17, 2018

Uh oh!

loganfsmyth commented Aug 17, 2018

Uh oh!

nicolo-ribaudo Aug 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nicolo-ribaudo commented Aug 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

loganfsmyth commented Aug 17, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hzoo commented Aug 20, 2018

Uh oh!

Andarist commented Aug 21, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

babel-bot commented Aug 17, 2018 •

edited

Loading

nicolo-ribaudo Aug 17, 2018 •

edited

Loading

nicolo-ribaudo commented Aug 17, 2018 •

edited

Loading