Update to `core-js@3` by zloirock · Pull Request #7646 · babel/babel

zloirock · 2018-03-31T18:24:18Z

Current state:

`@babel/runtime`

Added @babel/runtime-corejs3 package and corejs: 3 options to @babel/plugin-transform-runtime.
Added support of instance methods, fixes Make all the polyfills available without global namespace pollution #8928.
Added flag proposals (in corejs: { version: 3, proposals: true } format) for support all proposals polyfills from core-js.
Used separate directories in runtime for core-js entry points with proposals and without.
Used get-iterator-method helper for getting iterators, fixes When using babel-runtime, Symbol.iterator is different in user code & in polyfills #2500.
As a cheap bonus, added support of IE8- (except some cases of regenerator).

`@babel/polyfill`

Should be deprecated in favor of separate usage required features from core-js and regenerator-runtime with an informative message.

`@babel/preset-env`

Uses for built-ins data from core-js-compat instead of compat-table since information from compat-table is not enough.
useBuilIns now requires direct setting of corejs version option, without it will be used 2 by default and shown deprecation warning.
Added support of minor core-js versions for simplify updating in the future.
For preventing some order-related problems, polyfills in the both core-js@3 plugins added on post stage in the order of core-js-compat data.
Divided plugins and polyfills parts of preset-env, instead of 2 internal plugins for adding polyfills, we have 6: usage and entry versions of plugins for core-js@2, core-js@3, regenerator-runtime.
Added support samsung target (for Samsung Internet) since core-js-compat and compat-table now contains mapping for this, fixes Add support for Samsung Internet browser #6602.

`useBuilIns: entry` with `corejs: 3`

No longer transforms @babel/polyfill.
Transforms all possible core-js entry points to import of related modules (based on data from core-js-compat).
Since of this, we no longer need shippedProposals / proposals flags with useBuilIns: entry.
Removes regenerator-runtime/runtime import where it's not required.

`useBuilIns: usage` with `corejs: 3`

In addition to shippedProposals, added flag proposals (in corejs: { version: 3, proposals: true } format) for polyfill all proposals from core-js.
Fixed list of dependencies in built-in definitions.
Improved the way of determination method / built-in name and source of this method.
Adds import of required polyfills on MemberExpression, ObjectPattern, in operator.
Adds import of required polyfills on access to global object properties.
Adds import of all required common iterators on all syntax features which use iterators protocol (for-of, destructuring, spread, yield delegation, etc.).
Adds import of promises on syntax features which use promises (async functions/generators, dynamic import, etc.), fixes @babel/preset-env not always polyfilling Promise #9250, Bug Report: babel-preset-env feature-detection error with dynamic import() statements. #7402, etc.

`core-js@2` stuff

I didn't want to tough core-js@2-related stuff, however

Fixed some serious errors in definitions which breaks Object.getOwnPropertySymbols, Symbol.toStringTag logic, Promise#finally, Array#forEach, etc.
Array#flatMap and trim methods moved to stable features as a part of ES2019 and loaded by deprecated @babel/polyfill and @babel/preset-env with corejs: 2 option.

2018.12.30 Explanation of the current situation:

`@babel/runtime`

Here we have no serious problems.

Added @babel/runtime-corejs3 package and corejs: 3 options to @babel/plugin-transform-runtime.
Added support of instance methods.
Used get-iterator-method helper for getting iterators, fixes When using babel-runtime, Symbol.iterator is different in user code & in polyfills #2500.
As a cheap bonus, added support of IE8- (except some cases of regenerator).

Breaking changes

@babel/runtime can be updated without any problems by adding @babel/runtime-corejs3 package. But not @babel/polyfill and @babel/preset-env.

Updating @babel/polyfill to core-js@3 will break @babel/preset-env. @babel/preset-env with useBuiltIns transforms import of @babel/polyfill to import of required core-js modules. Most users don't add core-js dependency directly. In case of a minor update, even if @babel/polyfill dependency will be updated with @babel/preset-env, in the top level of node_modules we will have core-js@2, not core-js@3 because a serious part of dependencies depends on packages with core-js@2 in dependencies.

Updating @babel/preset-env will cause the same problem. More other, @babel/preset-env transforms also imports of core-js. If someone has core-js@2 in dependencies, a minor update of @babel/preset-env will break it.

Before babel@7 release, I proposed to deprecate @babel/polyfill in favor of separate inclusion of core-js and regenerator-runtime, but it was not done.

So,

Options for @babel/polyfill:

A major bump of @babel/polyfill.
Deprecation of @babel/polyfill package in favor recommendation of separate inclusion of required parts of core-js and babel-runtime.

Options for @babel/preset-env:

A major bump of @babel/preset-env.
Adding an option with a version of core-js like in @babel/plugin-transform-runtime. I'm not a fan of this way, because in this case, we will use a deprecated version of core-js by default, will cause spaghetti in configs and the code base and will cause problems for other mentioned here changes, at least, see polyfilling of proposals section.
Deprecation of useBuiltIns option of @babel/preset-env in favor of creation plugin(s) / preset in the scope of core-js for polyfills only.

`@babel/preset-env`

Some of the improvements already added, some should be added.

compat-table is not enough for correct detection of environments where core-js modules required. More info about it you could find here. So I made core-js-compat package with required data which should be used here.
Built-ins definitions should be updated for include correct dependencies. Some parts of that were added before babel@7 release, some still not.
All syntax features that work with iterators should add common iterators, async functions / generators should add Promise with dependencies (@babel/preset-env not always polyfilling Promise #9250), etc.

Polyfilling of proposals

In the final babel@7 versions, from all polyfilling-related stuff was removed polyfilling of proposals. Seems that it was a mistake.

New babel plugins for proposals will rely on new standard library features. And, with the current approach to polyfilling of proposals, it's too problematic.

I can understand why polyfilling of proposals was removed from the default @babel/polyfill. But in this case, we should have added entry points which include proposals.

Adding polyfills of proposals from core-js when the main part of polyfills loaded from @babel/polyfill is not a good solution because they could be loaded from another instance of core-js and it will cause problems.

Removing proposals from runtime will kill usage of new proposal plugins which depends on new standard library features with the runtime. They should be available in helpers. Even import of required part of core-js without global namespace pollution is rocket science for a serious part of developers. Also, @babel/runtime-corejsx is not @babel/runtime-stable-corejsx-features.

The same for @babel/preset-env, but not so critical.

@babel/preset-env transforms core-js only to import of stable ES features. But the main core-js entry point also contains proposals and someone can expect some of them.

runtime and preset-env inject polyfills based on feature detection, only when they are used, so I don't see any arguments why polyfilling of proposals was removed from those tools.

The shippedProposals option of @babel/preset-env looks like something strange. We haven't any equal in core-js entry points, so I don't see what should be transformed. Implementing in browser definitely is not an indicator that it should be polyfilled, but non-implemented proposals should not. I don't think that it's something that should be supported.

So, by my vision, the best approach is:

Deprecate @babel/polyfill in favor recommendation of separate inclusion of required parts of core-js and babel-runtime. If someone needs polyfills of proposals - he will use polyfills of proposals, not - not.
Deprecate transform of @babel/polyfill in @babel/preset-env.
Add to preset-env with useBuiltIns: entry (or a successor for polyfilling) transforms: core-js to all modules, core-js/es, core-js/proposals and core-js/web to related parts of core-js.
Allow runtime and preset-env inject proposals polyfills. Maybe - with an option for that, but option will make it harder.

--------------------

Before the next step, we should decide what should we do with @babel/polyfill, @babel/preset-env breaking changes and polyfilling of proposals. Thoughts?

packages/babel-preset-env/src/use-built-ins-plugin.js

packages/babel-plugin-transform-runtime/src/definitions.js

packages/babel-preset-env/src/built-in-definitions.js

Jessidhia · 2018-04-05T01:56:17Z

packages/babel-preset-env/src/built-in-definitions.js

-      getOwnPropertyDescriptors: "es7.object.get-own-property-descriptors",
+      assign: "es.object.assign",
+      create: "es.object.create",
+      defineProperty: "es.object.define-property",


I wonder; will, in core-js 3, it be possible to omit including the polyfill for this if your target does not include a browser that needs it?

Right now, in core-js 2, even if you don't include it via preset-env, it'll be overwhelmingly likely that whatever feature you do include the polyfill of will indirectly require the defineProperty polyfill.

It's true that it's safer that way, but it's unfortunate that you can't get significantly smaller code size even when you're specifically being unsafe by using this instead of just loading all of core-js.

No, if any polyfill requires this logic - it will be added as an internal module. And it's about almost all fundamental ES5 features.

It's related this issue. You talk about the second option from this comment. It's not hard for implementation, but it will cause too many problems.

For example, Array#fill from the issue. It requires not just Object.defineProperty for adding this polyfill, but, for example, Object.create for adding Array#[@@unscopables] where should be the name of this method. Object.create depends on Object.defineProperties, Object.defineProperties depends on Object.getOwnPropertyNames, etc.

So for working es.array.fill in IE8 we should add all of those dependencies. It's critically hard to determinate this list for manual adding. It's not so critical for babel-preset-env, but the list of internal dependencies could be changed in core-js, for example, after fixing any engine bug and it could be a breaking change for babel-preset-env.

I wanted to propose this issue to discuss before core-js@4. And it's the main problem which can be some time solved by dropping IE8 support in core-js.

packages/babel-preset-env/src/built-in-definitions.js

existentialism · 2018-04-05T13:27:23Z

@zloirock this is looking great, mind if I regen and push the test fixtures so we can see the effects?

zloirock · 2018-04-05T13:41:20Z

@existentialism makes sense, I wanted to add some more changes and after that work on stabilisation and tests.

packages/babel-helpers/src/helpers.js

sujiangyin · 2018-04-25T06:01:01Z

I meet the same error like：
if('get' in Attributes || 'set' in Attributes)throw TypeError('Accessors not supported!');`
hen I load up the page in IE8,and I use webpack3.xx and babel. any ways for me to handle this?thx

zloirock · 2018-04-25T06:11:50Z

@suarasaur support of getters and setters can't be polyfilled or transpiled in IE8-, so you can't use it or use transforms which use it. Webpack use it for modules, so, in this case, I recommend to use babel modules-commonjs transform with loose mode option.

… definitions, fix #9449

…2` definitions for prevent new issues like #9705

babel-bot · 2019-03-19T01:55:48Z

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

buildsize · 2019-03-19T01:55:49Z

File name	Previous Size	New Size	Change
babel-preset-env.js	2.05 MB	2.27 MB	228.09 KB (11%)
babel-preset-env.min.js	1.1 MB	1.3 MB	208.42 KB (19%)
babel.js	2.78 MB	2.8 MB	21.57 KB (1%)
babel.min.js	1.55 MB	1.56 MB	9.68 KB (1%)

- [x] ./available-plugins.js - [x] ./filter-items.js - [x] ./index.js - [x] ./get-option-specific-excludes.js - [x] ./debug.js - [x] ./types.js - [x] ./utils.js - [x] ./options.js - [x] ./targets-parser.js - [x] ./normalize-options.js - [x] ./module-transformations.js - [x] ./polyfills/regenerator/entry-plugin.js - [x] ./polyfills/regenerator/usage-plugin.js - [x] ./polyfills/corejs2/entry-plugin.js - [x] ./polyfills/corejs2/get-platform-specific-default.js - [x] ./polyfills/corejs2/built-in-definitions.js - [x] ./polyfills/corejs2/usage-plugin.js - [x] ./polyfills/corejs3/entry-plugin.js - [x] ./polyfills/corejs3/shipped-proposals.js - [x] ./polyfills/corejs3/built-in-definitions.js - [x] ./polyfills/corejs3/usage-plugin.js

babel-bot · 2019-03-19T18:15:40Z

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

buildsize · 2019-03-19T18:15:46Z

File name	Previous Size	New Size	Change
babel-preset-env.js	2.05 MB	2.27 MB	227.54 KB (11%)
babel-preset-env.min.js	1.1 MB	1.3 MB	208.28 KB (19%)
babel.js	2.78 MB	2.8 MB	21.57 KB (1%)
babel.min.js	1.55 MB	1.56 MB	9.68 KB (1%)

buildsize · 2019-03-19T19:47:59Z

File name	Previous Size	New Size	Change
babel-preset-env.js	2.05 MB	2.27 MB	227.54 KB (11%)
babel-preset-env.min.js	1.1 MB	1.3 MB	208.28 KB (19%)
babel.js	2.78 MB	2.8 MB	21.57 KB (1%)
babel.min.js	1.55 MB	1.56 MB	9.68 KB (1%)

zloirock added the PR: Breaking Change 💥 A type of pull request used for our changelog categories for next major release label Mar 31, 2018

zloirock force-pushed the update-to-core-js-3 branch from f608dbb to 178ffb1 Compare April 4, 2018 22:34

zloirock commented Apr 5, 2018

View reviewed changes

packages/babel-preset-env/src/use-built-ins-plugin.js Outdated Show resolved Hide resolved

zloirock force-pushed the update-to-core-js-3 branch from 4e6beea to 3dbaa20 Compare April 5, 2018 00:29

zloirock commented Apr 5, 2018

View reviewed changes

packages/babel-preset-env/src/use-built-ins-plugin.js Outdated Show resolved Hide resolved

zloirock requested review from existentialism and hzoo April 5, 2018 00:41

Jessidhia reviewed Apr 5, 2018

View reviewed changes

zloirock mentioned this pull request Apr 5, 2018

RegExp constructor to support copying other regex objects #5978

Closed

zloirock force-pushed the update-to-core-js-3 branch 3 times, most recently from 7465532 to 9fd9e11 Compare April 7, 2018 00:46

zloirock mentioned this pull request Apr 8, 2018

When using babel-runtime, Symbol.iterator is different in user code & in polyfills #2500

Closed

zloirock force-pushed the update-to-core-js-3 branch from 83e4d40 to 8347eb9 Compare April 12, 2018 01:19

TrySound mentioned this pull request Apr 17, 2018

Fix rollup UMD bundle size regression atlassian/react-beautiful-dnd#447

Closed

Jessidhia added this to the Babel 7 RC milestone Apr 18, 2018

zloirock commented Apr 18, 2018

View reviewed changes

packages/babel-helpers/src/helpers.js Show resolved Hide resolved

zloirock force-pushed the update-to-core-js-3 branch from d6a53a8 to 36c8160 Compare April 19, 2018 08:56

This was referenced Apr 25, 2018

Bump compat-table for preset-env #7808

Merged

Clean up and add some additional polyfill mappings in preset-env #7809

Merged

Improve useBuiltIns: usage mappins in preset-env #7810

Merged

zloirock force-pushed the update-to-core-js-3 branch from 36c8160 to 986d8f8 Compare April 26, 2018 08:20

zloirock mentioned this pull request May 19, 2018

babel-preset-env with useBuiltins neglects es7 promise features for some targets #7795

Closed

zloirock force-pushed the update-to-core-js-3 branch from 986d8f8 to 265d18d Compare May 19, 2018 21:01

zloirock force-pushed the update-to-core-js-3 branch 2 times, most recently from bb06bc8 to cdfc668 Compare May 27, 2018 12:06

zloirock added 4 commits March 19, 2019 08:21

remove web.dom.iterable from .forEach dependencies in core-js@2…

2572d72

… definitions, fix #9449

update to core-js@3.0.0-beta.20

2268d73

sync with master

f40e7f5

add required Promise dependencies on .finally method in `core-js@…

331e634

…2` definitions for prevent new issues like #9705

nicolo-ribaudo added 2 commits March 19, 2019 19:08

Merge master

7af14c5

update to core-js@3.0.0

3856bc3

mikerogne mentioned this pull request Mar 19, 2019

Build fails with @babel/preset-env 7.4.0 vuejs/vue-cli#3671

Closed

SGrondin mentioned this pull request Mar 19, 2019

Unexpected "With useBuiltins option, required direct setting of corejs option" with default configuration parcel-bundler/parcel#2819

Closed

bimohxh mentioned this pull request Mar 20, 2019

Module not found: Error: Can't resolve 'core-js/modules/es6.array.iterator' in '/app/.nuxt' nuxt/nuxt#5287

Closed

Zero2key mentioned this pull request Mar 20, 2019

Parcel reports "Export 'X' is not defined" if a ESM module tries to export a function parcel-bundler/parcel#2820

Closed

blowery mentioned this pull request Mar 20, 2019

fix(deps): update babel monorepo Automattic/wp-calypso#31572

Merged

1 task

haoqunjiang mentioned this pull request Mar 21, 2019

Roadmap for version 4 vuejs/vue-cli#3649

Closed

19 tasks

maxiloEmmmm mentioned this pull request Mar 21, 2019

core-js module error vuejs/vue-cli#3678

Closed

ZauberNerd mentioned this pull request Mar 21, 2019

Warnings for "un build" with new babel / core-js versions untool/untool#309

Closed

This was referenced Mar 21, 2019

Allow to call configureBabel with an external Babel configuration symfony/webpack-encore#544

Merged

Set useBuiltIns to false by default and allow to set core-js version symfony/webpack-encore#545

Merged

oakromulo mentioned this pull request Mar 22, 2019

Update package.json (@babel/core@7.4.0 issue) vuejs/vue-cli#3692

Closed

jakeNiemiec mentioned this pull request Apr 2, 2019

deprecates babel/polyfill in favor of core-js@3 rails/webpacker#2031

Merged

Catchwa mentioned this pull request Apr 15, 2019

Error when compiling application atlassian/react-beautiful-dnd#1046

Closed

SlothOfAnarchy mentioned this pull request Apr 16, 2019

babelrc: Specify iOS target in lower case engelsystem/engelsystem#588

Merged

swissspidy mentioned this pull request Apr 24, 2019

Update to Babel 7.4 and core-js 3 WordPress/gutenberg#15139

Merged

5 tasks

zone117x mentioned this pull request Apr 24, 2019

[WIP] Feature/toolchain updates stx-labs/stacks.js#658

Closed

zloirock mentioned this pull request Jun 26, 2019

IE8 polyfilled when targets option specify ie9 #10129

Closed

esakal mentioned this pull request Jul 7, 2019

Unit tests Infrastructure eshaham/israeli-bank-scrapers#211

Merged

Uh oh!

Conversation

zloirock commented Mar 31, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current state:

@babel/runtime

@babel/polyfill

@babel/preset-env

useBuilIns: entry with corejs: 3

useBuilIns: usage with corejs: 3

core-js@2 stuff

2018.12.30 Explanation of the current situation:

@babel/runtime

Breaking changes

@babel/preset-env

Polyfilling of proposals

--------------------

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Jessidhia Apr 5, 2018

Choose a reason for hiding this comment

Uh oh!

zloirock Apr 5, 2018

Choose a reason for hiding this comment

Uh oh!

Uh oh!

existentialism commented Apr 5, 2018

Uh oh!

zloirock commented Apr 5, 2018

Uh oh!

Uh oh!

sujiangyin commented Apr 25, 2018

Uh oh!

zloirock commented Apr 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

babel-bot commented Mar 19, 2019

Uh oh!

buildsize bot commented Mar 19, 2019

Uh oh!

babel-bot commented Mar 19, 2019

Uh oh!

buildsize bot commented Mar 19, 2019

Uh oh!

buildsize bot commented Mar 19, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

14 participants

zloirock commented Mar 31, 2018 •

edited

Loading

`@babel/runtime`

`@babel/polyfill`

`@babel/preset-env`

`useBuilIns: entry` with `corejs: 3`

`useBuilIns: usage` with `corejs: 3`

`core-js@2` stuff

`@babel/runtime`

`@babel/preset-env`

zloirock commented Apr 25, 2018 •

edited

Loading