storybook-apprun

A small guide to setup apprun with storybook

1. Setup storybook for HTML

   npx -p @storybook/cli sb init --type html

2. install additional packages

   npm i -D apprun @babel/preset-react

3. modify .storybook/main.js

    const path = require('path');
   
    module.exports = {
      stories: ['../stories/**/*.stories.js'],
      webpackFinal: async (config, { configType }) => {
   
        for (let rule of config.module.rules) {
          if (rule.use && rule.use[0].loader === 'babel-loader') {
            rule.use[0].options.presets.push('@babel/preset-react')
          }
        }
   
        return config;
      },
    };

4. add a utility function in stories

   stories/render.js

    export const render = (Node) => {
      const el = document.createElement('section')
      if (typeof Node === 'function') {
        new Node().start(el)
      } else {
        app.render(el, Node)
      }
      return el
    }

5. test your apprun component

   e.g. stories/apprun.stories.js

    import { apprun, Component } from 'apprun'
   
    import { render } from './render'
   
    export default {
      title: 'Demo',
    }
   
    export const Counter = () => {
      class Counter extends Component {
        state = 0;
        view = state => (
          <div>
            <h1>{state}</h1>
            <button $onclick='-1'>-1</button>
            <button $onclick='+1'>+1</button>
          </div>
        );
        update = {
          '+1': state => state + 1,
          '-1': state => state - 1
        };
      }
      return render(Counter)
    }

License

MIT licensed