stencil-storybook-howto.md

My stencil + storybook setup

1. Setup your stencil project as usual
2. Add storybook: npx -p @storybook/cli sb init --type react (we use react so you can use JSX inside your stories)
3. Add required deps: npm add @babel/plugin-syntax-import-meta @open-wc/webpack-import-meta-loader webpack-merge -D
4. preview.js:

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

defineCustomElements();

5. main.js

const merge = require('webpack-merge');

module.exports = {
  addons: [
  ],
  stories: ['../src/**/*.stories.mdx'],
  webpack: config => {
    return merge(config, {
      module: {
        rules: [
          {
            test: /\.js$/,
            loader: require.resolve('@open-wc/webpack-import-meta-loader')
          }
        ]
      }
    });
  }
};

6. .babelrc.js

module.exports = {
  plugins: ['@babel/plugin-syntax-import-meta']
};

7. Start stencil: stencil build --watch (MUST run in prod mode, NOT dev mode)

8. Start storybook: npm run storybook

9. Write your stories

import { Meta, Preview, Story } from "@storybook/addon-docs/blocks";

<Meta title="My Component" />

# My Component

Hello world

<Preview>
  <Story name="API">
    <my-component
      first="Jeroen"
      middle="Pieter"
      last="Zwartepoorte"
    ></my-component>
  </Story>
</Preview>

10. You have storybook running with live reload when you save a stencil file.

NOTE: This setup works great as long as you don't try to pass complex objects to a web components. So this will not work:

<x-foo foo={{ foo: 'asdf', bar: 1234 }}></x-foo>

If you want to do this from an MDX story, you have to use @storybook/web-components and lit-html.

This is great! Thank you for documenting this!

This example is no longer working :( Do you have any repo with example?

replace

const merge = require('webpack-merge');

with

const {merge} = require('webpack-merge');