Storybook: Stencil / web components?

[tycho01]

So Ionic has recently put out an impressive HNPWA (here) based on their Stencil, a "Compiler for Web Components" (site).
This made me wonder: can storybook be used with web components? Would it require something specific to this Stencil to be used with it?

[ndelangen]

Interesting, yeah looks like that could work!

[ndelangen]

Hey @tycho01,

Check this out:
https://github.com/storybooks/storybook/pull/2225

This will actually support regular webcomponents just fine, I'm pretty sure ;)

It's unreleased for right now, but it's coming!

[leonrodenburg]

I looked at the code of #2225 again, and the current rendering code of Storybook for Polymer does not actually depend on Polymer. It just renders plain web components and would also work for Stencil / Skate JS / ... (fill in any other web components compliant framework). @ndelangen Maybe we should try to keep Storybook for Polymer framework-agnostic and rename it to Storybook for Web Components in the future?

Once the support for web components is added I can help set up example projects for Stencil or any other frameworks.

[ndelangen]

Yes, if we can keep #2225 working the way it does now, we could actually rename it to Storybook for WebComponents! 🎉

[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 60 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!

[franktopel]

@leonrodenburg @ndelangen Please re-open this ticket and let us know what has been done on this very promising issue! Related: https://github.com/storybooks/storybook/issues/3423

[ndelangen]

@franktopel Have you tried using the polymer version with stencil?

I remember this conversation happening:
https://twitter.com/seveves/status/950332458096087042

[tonai]

For information I have made the test of integrating stencil and here is the comment that describe the process : https://github.com/storybooks/storybook/pull/2225#issuecomment-385005765

It can perhaps helps other stencil projects even if @storybook/polymer is not completely compatible now due to the polyfill that polymer uses and that cannot be removed from storybook.

[igor-dv]

@tonai, check this #3497, maybe it will help you to progress

[tonai]

Thanks @igor-dv, it indeed helps me because I was trying the v3 of storybook.
Upgrading to v4.0.0-alpha4 solved the polyfill problem.