New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel includes polyfill 'core-js/modules/web.dom.iterable' to output if script contains forEach() method call. #9449

Open
zhaparoff opened this Issue Feb 3, 2019 · 6 comments

Comments

Projects
None yet
4 participants
@zhaparoff
Copy link

zhaparoff commented Feb 3, 2019

Bug Report

Current Behavior
Babel includes import "core-js/modules/web.dom.iterable"; in any output which input contains forEach() method call. It can be Array.prototype.forEach() or forEach() method defined in custom class or interface:
https://github.com/zhaparoff/ts-babel-tests/blob/master/src/js/babelTest2.js -> https://github.com/zhaparoff/ts-babel-tests/blob/master/dist/js/babelTest2.js

https://github.com/zhaparoff/ts-babel-tests/blob/master/src/ts/babelTest1.ts ->
https://github.com/zhaparoff/ts-babel-tests/blob/master/dist/ts/babelTest1.js

The only exception is calling forEach() for an array defined in the same visibility scope.
https://github.com/zhaparoff/ts-babel-tests/blob/master/src/js/babelTest1.js -> https://github.com/zhaparoff/ts-babel-tests/blob/master/dist/js/babelTest1.js

Also targeting Node instead of browsers omits that polyfill, which is obviously expected.
But targeting any browser, even the latest version of Chrome, includes that polyfill.

Input Code
https://github.com/zhaparoff/ts-babel-tests

Expected behavior/code
From my point of view, Babel shouldn't polyfill something that does not require polyfilling for sure.
I understand that JS has no type signatures and polyfilling suggestions could be made only from the context where the call is found. But developer should have ability to precisely control such kind of polyfilling, am I right? Probably there is a setting or plugin to tur off or a workaround, that I'm not aware of?

Babel Configuration (.babelrc, package.json, cli command)
https://github.com/zhaparoff/ts-babel-tests/blob/master/package.json
https://github.com/zhaparoff/ts-babel-tests/blob/master/.babelrc
npm run build

Environment

  • Babel version(s): 7.2.2
  • Node/npm version: Node 11.8.0/npm 6.7.0
  • OS: Windows 10, 1803
  • Monorepo: ?
  • How you are using Babel: cli through npm run

Possible Solution
Include the option for DOM polyfills into env preset, allowing to control it separately of browser/node target settings. Or move this polyfilling to a separate plugin, which can be disabled.

Additional context/Screenshots
I even won't use DOM manipulations in my project, they will be handled by existing application platform API. I believe, there should be the feasible way to control it.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Feb 3, 2019

Hey @zhaparoff! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Feb 4, 2019

@zhaparoff

This comment has been minimized.

Copy link
Author

zhaparoff commented Feb 4, 2019

@nicolo-ribaudo

Yes I can... Suddenly, this option works with built-ins as well as with plugins, although documentation says nothing about it... Thanks for pointing that.

Anyway, potential ability to control web-polyfills sepately from selected targets could be quite usefull as for me.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Feb 4, 2019

Well, it says "it works like includes" and includes mentions polyfills a few lines above.

Anyway, potential ability to control web-polyfills sepately from selected targets could be quite usefull as for me.

How would your ideal configuration be?

@zhaparoff

This comment has been minimized.

Copy link
Author

zhaparoff commented Feb 4, 2019

Well... Ideally, my configuration should be... no configuration at all. Suddenly, isn't it? ;-)

So, as I can imagine it, babel-typescript preset should use some plugin, which will be adding metadata to the transpiled code. It could be decorators or just comments in some fixed format, like webpack is using for example.

This metadata could be used by JS processing to optimize JS transpilation. Thus, if some parameter or method call will be marked as 'does not require polyfilling/shimming' it won't be affected by further transpilation.

Probably, these metadata descriptors can be documented and added manually to sorce JS code, for those developers who doesn't work with TS, but want to control babel transpilation more precisely.

In the final stage these metadata records can be cleaned out, to minify the output. Or left untouched for debugging purposes.

This is very highlevel, raw sketch - I'm not aware of any babel internal implementation, so can't even say if it's possible. Again, TypeScript support is new thing in Babel, so probably this is in the roadmap already. And I can't even imagine, how this could affect the performance...

But my opinion is that information defined by types should be kept until the end of transpilation flow and used during this process, as much as possible.

@polkovnikov-ph

This comment has been minimized.

Copy link

polkovnikov-ph commented Feb 9, 2019

It's a very weird situation when there are several kilobytes of polyfills included in bundles for modern browsers if there is a forEach, which was added several years ago and has universal support. Whatever is that feature it's intended to polyfill, it must be opt-in, not opt-out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment