Add targets option to @babel/plugin-transform-runtime

[TomerAberbach]

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

@babel/plugin-transform-runtime is great because it can be used to polyfill features without polluting the global namespace (i.e. ponyfills). This is the ideal choice for libraries because they shouldn't pollute the global namespace. However, @babel/plugin-transform-runtime does not support only polyfilling the features required by the target browser/node versions like @babel/preset-env does. This results in unnecessarily large bundles containing unused polyfills.

This pull request adds a targets option to @babel/plugin-transform-runtime that behaves similarly to @babel/preset-env's targets field. It also adds configPath and ignoreBrowserslist options like @babel/preset-env has.

With regards to dependencies, @babel/compat-data, @babel/helper-compilation-targets, and core-js-compat dependencies were added to @babel/plugin-transform-runtime.

Lastly, I'm aware that Babel is rethinking its polyfilling story so this change may become obsolete in the future. However, I think people have been waiting a long time for this feature and it could be a while before Babel's new polyfilling approach is ready; so I think this feature is useful as a short-term solution.

Looking forward to your feedback!

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d71fef1:

Sandbox	Source
amazing-hertz-f47yn	Configuration
dry-shape-9cc91	Configuration

[babel-bot]

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

[developit]

LGTM.

One additional useful thing would be the ability to prevent the inclusion of a given polyfill (like JSON.stringify/json/stringify).

[TomerAberbach]

One additional useful thing would be the ability to prevent the inclusion of a given polyfill (like JSON.stringify/json/stringify).

I think that's a good idea. We could mirror @babel/preset-env's include and exclude options (except they'd be arrays of methods and identifiers rather than plugin names). Although I think I'd prefer doing that in a separate PR (assuming this one gets merged) to avoid this PR getting too big.

[TomerAberbach]

@JLHwung is there any interest in this PR anymore? If not, then I can close it

[nicolo-ribaudo]

@TomerAberbach As a side effect of #12845, now this plugin supports targets (even if it was not originally intended, and I'd still recommend using babel-plugin-polyfill-corejs3 directly):

const input = String.raw`
Array.from(3);
foo.flatMap(fn);
`;

const out = babel.transform(input, {
  configFile: false,
  sourceType: "module",
  targets: "chrome 60",
  plugins: [[transformRuntime, { corejs: 3 }]],
});

console.log(out.code);

logs

import _flatMapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat-map";
Array.from(3);

_flatMapInstanceProperty(foo).call(foo, fn);

while

const input = String.raw`
Array.from(3);
foo.flatMap(fn);
`;

const out = babel.transform(input, {
  configFile: false,
  sourceType: "module",
  targets: "chrome 40",
  plugins: [[transformRuntime, { corejs: 3 }]],
});

console.log(out.code);

logs

import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
import _flatMapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat-map";

_Array$from(3);

_flatMapInstanceProperty(foo).call(foo, fn);

Thanks for the PR anyway!