Stencil Component Starter

This is a starter project for building components with Stencil in Storybook. This sample includes hot reloading in Storybook, with the Stencil build running in watch mode. Since I couldn't find any samples doing just this exact thing, I figured I'd build one.

Running this project

To run this project, run npm run build.watch and npm run storybook in your shell of choice. The first command will spin up the Stencil build process in watch mode. The second command runs Storybook.

Integrating this into your project

The solution is quite simple, once you know the components needed:

1. add a preview.js file in the .storybook folder, containing the import of the Stencil loader:

import {defineCustomElements} from '../dist/esm/loader';

defineCustomElements();

2. add an npm script, running the build in watch but NOT dev mode:

"build.watch": "stencil build --watch",

That's it!