[WCJS] Add "bare" polyfill bundle

[TimvdLippe]

Since this issue was opened, open-wc shipped a loader (https://open-wc.org/building/polyfills-loader.html) which pretty much works as described here. We are still evaluating options, but please let us know if the open-wc loader is working for you

Currently we ship multiple polyfills with this polyfill. Most notably polyfills for Symbol, URL and Promise (see https://github.com/webcomponents/webcomponentsjs/blob/9871da5b319fd2fe8000c168d6bbb54d905b5a86/entrypoints/webcomponents-sd-ce-pf-index.js) and some stuff regarding Event and Array.from (https://github.com/webcomponents/webcomponents-platform). Whenever we make an update to these polyfills, some part of our userbase encounters issues.

To reduce the publication risk, it would therefore be better to also publish a polyfill bundle that does not include any other polyfill. It would then be up to the consumer of our polyfill to patch the browser environment themselves.

One option is to introduce a new option bare, which would import a bare bundle instead on line https://github.com/webcomponents/webcomponentsjs/blob/9871da5b319fd2fe8000c168d6bbb54d905b5a86/webcomponents-loader.js#L139 E.g. change the logic to the following:

polyfills = ['sd-ce-pf' + (window.WebComponents.bare ? '-bare' : '')];

With the bare polyfill:

import '../node_modules/@webcomponents/template/template.js';
import '../node_modules/@webcomponents/shadydom/src/shadydom.js';
import '../node_modules/@webcomponents/custom-elements/src/custom-elements.js';
import '../node_modules/@webcomponents/shadycss/entrypoints/scoping-shim.js';

[ruphin]

I think the overwhelming majority of users will be using babel-polyfill. Would it make sense to explicitly check the overlap of babel-polyfill with our polyfills, and only remove the polyfills that overlap?

If we remove all polyfills, and some of them are not included with babel-polyfill, users will be forced to find additional polyfills for missing features.

If you think this is a good idea, I could do some research on exactly which polyfills overlap with babel.

[TimvdLippe]

Our polyfill only polyfills features if we detect they are necessary. I think the babel-polyfill includes all features that are necessary for us. Feel free to check to make sure :smile:

[morewry]

I'm pretty sure it does, based on my poking around in #972. At least in terms of the pure JS ones like Promise, Object.assign, etc. The platform feature polyfills, not so much. But my perspective is that the platform feature polyfills required for WCs are what I want webcomponentsjs for. Now, if there are some that aren't strictly essential for WCs (like maybe the URL parser), I think it would be ideal if there was a "just the essentials" vs "luxury experience" option, but it doesn't have to be perfect.

[TimvdLippe]

For reference, there is a different loader that has the specified behavior: https://open-wc.org/building/polyfills-loader.html

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.