Stencil 2.0.3 + Storybook 6.0.26 + Real Stencil HMR (hot module reloading)

DEMO Storybook on gh-pages

This is a starter project for building components with Stencil in Storybook. This sample includes Real HMR in Storybook, with the Stencil build running in watch mode. Storybook only knows the stories, markup of stencil and entry point.

Aswell its chromatic tested, this means visiual regression testing of your stories.

Thanks to stencil storybook starters bjankord, elwynelwyn
And shoelace where i got the proxy hmr solution.

And maybe this issue can be closed?

✔️ NodeJS 14.13.1 ready (use nvm!)
✔️ Stencil 2 ready, not yet es5 tested but should work! + BEM and REM utils
✔️ Storybook 6+ WebComponents ready
✔️ Real HMR on development with Stencil Dev Server, this keep storybooks state of controls
✔️ chromatic.com visiual regression testing ready
✔️ Tested on Windows 10 and Mac 10.15.6
✔️ Bootstrap reset and Webfonts boilerplate included

How the HMR works

Stencil has an included /~dev-server which can out of the box HMR. So we start storybook with webpack and stencil dev mode with rollup. On the top we have a proxy which include the /~dev-server of stencil into the storybook canvas iframe.html Et voilà, this is what we want!

When you have issues, please let me know!

Use my issues section

Start to develop

npm install
npm start
your storybook will run under: http://localhost:3000

Build your production

npm build

Test your Stencil

npm test
npm test -t special.spec.ts

That's it!
Cheers dutscher