[dev-server-storybook] make targets configurable via main.js

[tlouisse]

Problem

Right now we can't opt-out of IE support, but transpiling to this lowest common denominator can lead to breaking code in all browsers. Currently you would have to redefine a complete configuration of the rollup-babel-plugin. See: https://lit-and-friends.slack.com/archives/CJGFWJN9J/p1632463265093000

Potential solution

Would it be possible to allow for this in ./storybook/main.js?

module.exports = {
  ...
  targets: [
      'last 3 Chrome major versions',
      'last 3 ChromeAndroid major versions',
      'last 3 Firefox major versions',
      'last 3 Edge major versions',
      'last 3 Safari major versions',
      'last 3 iOS major versions',
    ],
 ...
};

It could be applied here when provided via params: https://github.com/modernweb-dev/web/blob/master/packages/dev-server-storybook/src/build/rollup/createRollupConfig.ts#L61

[Westbrook]

This sounds like it makes sense. I'd be happy to see a PR for this. Could I interest you in preparing one?

Separately, I'm a bit confused about what sort of breaks might occur when transpiling to the lowest common denominator. Other than file bloat, this should be fine, unless polyfills of some sort were missed in the process.

[tlouisse]

This sounds like it makes sense. I'd be happy to see a PR for this. Could I interest you in preparing one?

Separately, I'm a bit confused about what sort of breaks might occur when transpiling to the lowest common denominator. Other than file bloat, this should be fine, unless polyfills of some sort were missed in the process.

Hi Westbrook, thanks for the response. Was a bit confused myself as well that transpiling to lowest common denominator breaks in all browsers. I think it broke after we migrated lion from lit v1 to v2. It might be related to the polyfill that is included here: https://github.com/open-wc/open-wc/blob/master/packages/scoped-elements/src/ScopedElementsMixin.js#L1 (although this is just a guess).

I might find some in the coming period to do a pr for this. An alternative approach btw could be to use plugins-manager: https://github.com/modernweb-dev/rocket/blob/main/docs/docs/tools/plugins-manager.md (this allows for adjusting the babel plugin config without redefining it).