Stencil support

[marcolanaro]

Issue: #4600

What I did

• Added support for Stencil.
• I added example kitchen sink for Stencil.

How to test

• Is this testable with Jest or Chromatic screenshots? No
• Does this need a new example in the kitchen sink apps? Yes
• Does this need an update to the documentation? No

[nx-cloud]

Nx Cloud Report

We didn't find any information for the current pull request with the commit d446537.
Please make sure you set the \ NX_BRANCH\ environment variable in your CI pipeline .

Check the Getting started section to configure the app.

---

Sent with 💌 from NxCloud.

[shilman]

@marcolanaro thanks so much for putting this PR together--this is a great start!

I have some questions to help me wrap my head around it.

In the issue you mention that this is a half-solution and you still need to run npm run build.watch by hand. do you envision the full solution being one where storybook effectively runs that on your behalf, and then cleans up gracefully on shutdown?

If you're up for it, I'd love to chat more about this on Discord https://discord.gg/storybook

[marcolanaro]

@marcolanaro thanks so much for putting this PR together--this is a great start!

I have some questions to help me wrap my head around it.

In the issue you mention that this is a half-solution and you still need to run npm run build.watch by hand. do you envision the full solution being one where storybook effectively runs that on your behalf, and then cleans up gracefully on shutdown?

If you're up for it, I'd love to chat more about this on Discord https://discord.gg/storybook

@shilman This is correct. This would unblock stencil developers writing stories easily.

I saw many different works around that:

• vanilla javascript (quite bloated if you have to pass down rich data or event listeners)
• output jsdoc to feed to lit and then use of lit-html (another template language to learn) for rendering in the stories
• additional proxy server that replace storybook iframe
• use of jsx-dom (not yet production ready).

This would enable developers to stay in the same environment and write stories as they write components. Yes, it's not perfect from storybook point of view.
To be able to run the compiler using storybook, I need to do a lot of investigations. Stencil expose a very limited set of APIs and it's time consuming looking at the internals.
This PR took me an entire weekend and I will not have much more spare time in the next month.
I can look into the compiler in August (so I would say let's catch up then for phase 2 if it's not a problem for you).

[shilman]

@marcolanaro thanks for getting back to me. just let me know when you have more time to discuss in August. In the meantime we'll take a look at your solution and see whether we can build on it

[merceyz]

Suggested change

	"@storybook/stencil": "../../app/stencil",
	"@storybook/stencil": "6.4.0-alpha.11",

This will actually pack that folder into the cache, you should use a version instead

[sawden]

Is the stencil support still in progress? 🙂

[cymptom]

I'd also love to know if/when official Stencil support is likely to arrive. For our Stencil-based design system, we've been holding off on Storybook until official support arrives.

[julzmon]

I was hoping to see some progress when coming here but sad to see no :(
Are we waiting for something official from Stencil team, or folks have to time to work on it?

[shilman]

I haven't heard back from @marcolanaro about continuing this work.

In the meantime I have discussed with the Stencil core team and they are looking into how they might provide official support from their end 🤞 Please upvote the issues here ionic-team/stencil#3104

[splitinfinities]

Thank you so much @shilman!

Yes, the Stencil team is looking for feedback on the linked issue above. I am working through the logistics of what it means for Stencil as a compiler that can not only produce web components, but can also produce components for other frameworks. So any other related feedback and suggestions on direction is welcome!

[ndelangen]

I'm closing this due to inactivity, sorry.