Storybook: Core: ES modules output target for iframe-webpack-config

[web-padawan]

Is your feature request related to a problem? Please describe.
The problem is that certain browser standards (specifically, Custom Elements) need native ES2015 classes to work properly. Otherwise, when transpiled to ES5, special shim is needed to prevent issues like #3497 to happen. This is actually already used by @storybook/polymer:
https://github.com/storybooks/storybook/blob/bbcbf7c4d41b979498c0dafc260d24b4c2dc2d94/app/polymer/src/client/preview/globals.js#L2

At the same time, Chrome, Safari and Firefox support ES modules natively, and the tools like Vue CLI already allow to produce "modern" and "legacy" builds to serve module and nomodule bundles.
Same set of browsers also natively supports Custom Elements specification (+ hopefully Edge soon).

What I'm suggesting is to integrate the webpack plugin which our team has been evaluating and it generally solves the described problem really well, especially when using with HtmlWebpackPlugin.

Describe the solution you'd like
Use webpack-babel-multi-target-plugin to provide ES module bundle for evergreen browsers supporting modules, and nomodule bundle as a fallback for older browsers.

Describe alternatives you've considered
The custom plugin could be implemented for using in Storybook only, but that's like extra effort.

Are you able to assist bring the feature to reality?
I can help with integrating the plugin as I mentioned in https://github.com/storybooks/storybook/issues/4958#issuecomment-462071607
But I would need some guidance from the maintainers.

Additional context
I have created a very basic example of using webpack-babel-multi-target plugin here:
https://github.com/web-padawan/webpack-wc-demo

This will fix #3497 and will make implementation of #4958 a very straightforward task.

[daKmoR]

another benefit of this would be that currently if you have any es6 code in your node_modules then it does not get transpiled as there is an exclude for all inside node_modules...

using above mentioned plugin also goes through each package and checks if it needs transpilation and applies it if needed (e.g. there is a "module" in package.json)

So there would be no global exclude for node_modules anymore... (which currently requires some strange workarounds with regex and stuff 🙈)

[web-padawan]

Tagging @DanielSchaffer who is the author of the plugin I'm suggesting to integrate.

Also, note there is a proposal for the plugin API changes, which might make sense in scope of integrating the plugin to Storybook core: DanielSchaffer/webpack-babel-multi-target-plugin#21

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[web-padawan]

I'm still interested but haven't got any time to take a closer look. Will try to do it this week.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!