Makes loading of WebComponent Polyfills configurable

[oterral]

Currently webcomponent-bundle.js loads 3 different polyfills:

sd : shadyDOM useless when you use your web-component with {shadow: false}
ce : CustomElement
pf : Platform polyfills some others basic polyfill probably already loaded by the app which use your web-component.

Those polyfills could be separetely loaded depending of your app:
https://www.jsdelivr.com/package/npm/@webcomponents/webcomponentsjs?path=bundles

Maybe the simple solution is to move the import of polyfills from the WebComponent.tsx class to the App.js class then the developer can modify the polyfill imported for his specific usecase.

What do you think ?

I try to achieve that because in one of our application we have trouble using jquery and the web-component polyfill bundle in IE 11 because of shadyDOM
ShadyDom makes calls like $('myElement').triggers('change') impossible.

[SimonHoiberg]

Hi @oterral
Thank you for creating this issue, these are very useful insight.
I definitely like the idea of making the polyfills configurable, and I'm thinking that this should be somehow done through the direflow-config.js file, perhaps using an optional plugin for polyfills.

Great suggestion, thanks! 👍

[SimonHoiberg]

Hi, @oterral
This feature is included in Direflow v. 3.0.0

Pr. default, all polyfills are now lazyloaded and not included in the Direflow bundle.
However, you can now also use a plugin for full customizability.

Example:

{
  name: 'polyfill-loader',
  options: {
    use: {
      sd: false,
      ce: true,
    }
  }
}

This will include the ce-bundle, but exclude the sd-bundle.

You can also specify your own source, if needed:

{
  name: 'polyfill-loader',
  options: {
    use: {
      sd: 'https://cdn.of.my.choice/webcomponents-sd.js',
      ce: true,
    }
  }
}

Thanks a lot for your help with this one! 😄
You did all the research in advance, so it was really easy for me to get started on this one!
Great 😊

[oterral]

Thx @silind !!