@storybook/web-components
Storybook for web-components: View web components snippets in isolation with Hot Reloading.
Last updated 5 days ago by shilman .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @storybook/web-components 
SYNC missed versions from official npm registry.

Storybook for web-components


Storybook for web-components is a UI development environment for your plain web-component snippets. With it, you can visualize different states of your UI components and develop them interactively.

Storybook Screenshot

Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

Getting Started

cd my-app
npx -p @storybook/cli sb init -t web_components

For more information visit: storybook.js.org


Storybook also comes with a lot of addons and a great API to customize as you wish. You can also build a static version of your storybook and deploy it anywhere you want.

Setup page reload via HMR

As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet.

Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast. To activate full page reload

// ==> REPLACE
configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);

// ==> WITH
// force full reload to not reregister web components
const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
configure(req, module);
if (module.hot) {
  module.hot.accept(req.id, () => {
    const currentLocationHref = window.location.href;
    window.history.pushState(null, null, currentLocationHref);
    window.location.reload();
  });
}

Setup es6/7 dependencies

By default storybook only works with precompiled es5 code but as most web components themselves and their libs are distributed as es7 you will need to manually mark those packages as "needs transpilation".

For example if you have a library called my-library which is in es7 then you can add it like so

// .storybook/main.js

module.exports = { 
  webpackFinal: async config => {
    // find web-components rule for extra transpilation
    const webComponentsRule = config.module.rules.find(
      rule => rule.use && rule.use.options && rule.use.options.babelrc === false
    );
    // add your own `my-library`
    webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));

    return config;
  },
};

By default the following folders are included

  • src/*.js
  • packages/*/src/*.js
  • node_modules/lit-html/*.js
  • node_modules/lit-element/*.js
  • node_modules/@open-wc/*.js
  • node_modules/@polymer/*.js
  • node_modules/@vaadin/*.js

As you can see the src folder is also included. The reason for that is as it has some extra configuration to allow for example import.meta. If you use a different folder you will need to make sure webpack/babel can handle it.

FAQ

  • While working on my component I get the error Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry => please see Setup page reload via HMR

Current Tags

  • 6.0.28-alpha.0                                ...           debug (9 hours ago)
  • 6.0.27                                ...           latest (5 days ago)
  • 6.1.0-alpha.31                                ...           next (a day ago)

257 Versions

  • 6.0.28-alpha.0                                ...           9 hours ago
  • 6.1.0-alpha.31                                ...           a day ago
  • 6.1.0-alpha.30                                ...           2 days ago
  • 6.1.0-alpha.29                                ...           5 days ago
  • 6.0.27                                ...           5 days ago
  • 6.1.0-alpha.28                                ...           5 days ago
  • 6.1.0-alpha.27                                ...           9 days ago
  • 6.1.0-alpha.26                                ...           10 days ago
  • 6.1.0-alpha.25                                ...           12 days ago
  • 6.1.0-alpha.24                                ...           13 days ago
  • 6.1.0-alpha.23                                ...           16 days ago
  • 6.1.0-alpha.22                                ...           18 days ago
  • 6.1.0-alpha.21                                ...           20 days ago
  • 6.0.26                                ...           23 days ago
  • 6.1.0-alpha.20                                ...           23 days ago
  • 6.0.25                                ...           25 days ago
  • 6.0.23                                ...           25 days ago
  • 6.1.0-alpha.19                                ...           25 days ago
  • 6.1.0-alpha.18                                ...           a month ago
  • 6.1.0-alpha.17                                ...           a month ago
  • 6.0.22                                ...           a month ago
  • 6.1.0-alpha.16                                ...           a month ago
  • 6.1.0-alpha.15                                ...           a month ago
  • 6.1.0-alpha.14                                ...           a month ago
  • 6.1.0-alpha.12                                ...           a month ago
  • 6.1.0-alpha.11                                ...           a month ago
  • 6.1.0-alpha.10                                ...           a month ago
  • 6.1.0-alpha.9                                ...           2 months ago
  • 6.1.0-alpha.8                                ...           2 months ago
  • 6.1.0-alpha.7                                ...           2 months ago
  • 6.1.0-alpha.6                                ...           2 months ago
  • 6.1.0-alpha.4                                ...           2 months ago
  • 6.1.0-alpha.3                                ...           2 months ago
  • 6.1.0-alpha.1                                ...           2 months ago
  • 6.1.0-alpha.0                                ...           2 months ago
  • 6.0.21                                ...           2 months ago
  • 6.0.20                                ...           2 months ago
  • 5.3.21                                ...           2 months ago
  • 6.0.19                                ...           2 months ago
  • 5.3.20                                ...           2 months ago
  • 6.0.18                                ...           2 months ago
  • 6.0.17                                ...           2 months ago
  • 6.0.16                                ...           2 months ago
  • 6.0.15                                ...           2 months ago
  • 6.0.14                                ...           2 months ago
  • 6.0.13                                ...           2 months ago
  • 6.0.12                                ...           2 months ago
  • 6.0.10                                ...           2 months ago
  • 6.0.9                                ...           2 months ago
  • 6.0.7                                ...           2 months ago
  • 6.0.6                                ...           2 months ago
  • 6.0.5                                ...           3 months ago
  • 6.0.4                                ...           3 months ago
  • 6.0.3                                ...           3 months ago
  • 6.0.2                                ...           3 months ago
  • 6.0.1                                ...           3 months ago
  • 6.0.0                                ...           3 months ago
  • 6.0.0-rc.30                                ...           3 months ago
  • 6.0.0-rc.29                                ...           3 months ago
  • 6.0.0-rc.28                                ...           3 months ago
  • 6.0.0-rc.27                                ...           3 months ago
  • 6.0.0-rc.26                                ...           3 months ago
  • 6.0.0-rc.25                                ...           3 months ago
  • 6.0.0-rc.24                                ...           3 months ago
  • 6.0.0-rc.23                                ...           3 months ago
  • 6.0.0-rc.22                                ...           3 months ago
  • 6.0.0-rc.21                                ...           3 months ago
  • 6.0.0-rc.20                                ...           3 months ago
  • 6.0.0-rc.19                                ...           3 months ago
  • 6.0.0-rc.18                                ...           3 months ago
  • 6.0.0-rc.16                                ...           3 months ago
  • 6.0.0-rc.15                                ...           3 months ago
  • 6.0.0-rc.14                                ...           3 months ago
  • 6.0.0-rc.13                                ...           3 months ago
  • 6.0.0-rc.12                                ...           3 months ago
  • 6.0.0-rc.11                                ...           3 months ago
  • 6.0.0-rc.10                                ...           3 months ago
  • 6.0.0-rc.9                                ...           3 months ago
  • 6.0.0-rc.8                                ...           3 months ago
  • 6.0.0-rc.5                                ...           3 months ago
  • 6.0.0-rc.3                                ...           4 months ago
  • 6.0.0-rc.2                                ...           4 months ago
  • 6.0.0-rc.1                                ...           4 months ago
  • 6.0.0-rc.0                                ...           4 months ago
  • 6.0.0-beta.46                                ...           4 months ago
  • 6.0.0-beta.45                                ...           4 months ago
  • 6.0.0-beta.44                                ...           4 months ago
  • 6.0.0-beta.43                                ...           4 months ago
  • 6.0.0-beta.42                                ...           4 months ago
  • 6.0.0-beta.41                                ...           4 months ago
  • 6.0.0-beta.40                                ...           4 months ago
  • 6.0.0-beta.39                                ...           4 months ago
  • 6.0.0-beta.38                                ...           4 months ago
  • 6.0.0-beta.37                                ...           4 months ago
  • 6.0.0-beta.36                                ...           4 months ago
  • 6.0.0-beta.35                                ...           4 months ago
  • 6.0.0-beta.34                                ...           4 months ago
  • 6.0.0-beta.33                                ...           4 months ago
  • 6.0.0-beta.32                                ...           4 months ago
  • 6.0.0-beta.31                                ...           4 months ago
  • 6.0.0-beta.30                                ...           4 months ago
  • 6.0.0-beta.29                                ...           4 months ago
  • 6.0.0-beta.28                                ...           4 months ago
  • 6.0.0-beta.27                                ...           4 months ago
  • 6.0.0-beta.26                                ...           5 months ago
  • 6.0.0-beta.25                                ...           5 months ago
  • 6.0.0-beta.24                                ...           5 months ago
  • 6.0.0-beta.23                                ...           5 months ago
  • 6.0.0-beta.22                                ...           5 months ago
  • 6.0.0-beta.21                                ...           5 months ago
  • 6.0.0-beta.20                                ...           5 months ago
  • 6.0.0-beta.19                                ...           5 months ago
  • 6.0.0-beta.18                                ...           5 months ago
  • 6.0.0-beta.17                                ...           5 months ago
  • 6.0.0-beta.16                                ...           5 months ago
  • 6.0.0-beta.15                                ...           5 months ago
  • 6.0.0-beta.14                                ...           5 months ago
  • 5.3.19                                ...           5 months ago
  • 6.0.0-beta.13                                ...           5 months ago
  • 6.0.0-beta.12                                ...           5 months ago
  • 6.0.0-beta.9                                ...           5 months ago
  • 6.0.0-beta.8                                ...           5 months ago
  • 6.0.0-beta.7                                ...           5 months ago
  • 6.0.0-beta.6                                ...           6 months ago
  • 6.0.0-beta.5                                ...           6 months ago
  • 6.0.0-beta.4                                ...           6 months ago
  • 6.0.0-beta.3                                ...           6 months ago
  • 6.0.0-beta.2                                ...           6 months ago
  • 6.0.0-beta.1                                ...           6 months ago
  • 6.0.0-beta.0                                ...           6 months ago
  • 6.0.0-alpha.46                                ...           6 months ago
  • 6.0.0-alpha.45                                ...           6 months ago
  • 6.0.0-alpha.44                                ...           6 months ago
  • 6.0.0-alpha.43                                ...           6 months ago
  • 6.0.0-alpha.42                                ...           6 months ago
  • 6.0.0-alpha.41                                ...           6 months ago
  • 6.0.0-alpha.40                                ...           6 months ago
  • 6.0.0-alpha.39                                ...           6 months ago
  • 6.0.0-alpha.37                                ...           6 months ago
  • 6.0.0-alpha.36                                ...           6 months ago
  • 6.0.0-alpha.35                                ...           6 months ago
  • 6.0.0-alpha.34                                ...           6 months ago
  • 6.0.0-alpha.33                                ...           6 months ago
  • 6.0.0-alpha.32                                ...           7 months ago
  • 6.0.0-alpha.31                                ...           7 months ago
  • 5.3.18                                ...           7 months ago
  • 6.0.0-alpha.30                                ...           7 months ago
  • 6.0.0-alpha.29                                ...           7 months ago
  • 6.0.0-alpha.28                                ...           7 months ago
  • 5.3.17                                ...           7 months ago
  • 5.3.15                                ...           7 months ago
  • 6.0.0-alpha.27                                ...           7 months ago
  • 6.0.0-alpha.26                                ...           8 months ago
  • 6.0.0-alpha.25                                ...           8 months ago
  • 6.0.0-alpha.24                                ...           8 months ago
  • 6.0.0-alpha.22                                ...           8 months ago
  • 6.0.0-alpha.21                                ...           8 months ago
  • 6.0.0-alpha.20                                ...           8 months ago
  • 5.3.14                                ...           8 months ago
  • 6.0.0-alpha.19                                ...           8 months ago
  • 6.0.0-alpha.18                                ...           8 months ago
  • 6.0.0-alpha.17                                ...           8 months ago
  • 6.0.0-alpha.15                                ...           8 months ago
  • 6.0.0-alpha.14                                ...           8 months ago
  • 6.0.0-alpha.13                                ...           8 months ago
  • 6.0.0-alpha.12                                ...           8 months ago
  • 6.0.0-alpha.11                                ...           9 months ago
  • 5.3.13                                ...           9 months ago
  • 6.0.0-alpha.10                                ...           9 months ago
  • 6.0.0-alpha.9                                ...           9 months ago
  • 6.0.0-alpha.8                                ...           9 months ago
  • 6.0.0-alpha.7                                ...           9 months ago
  • 6.0.0-alpha.6                                ...           9 months ago
  • 5.3.12                                ...           9 months ago
  • 5.3.11                                ...           9 months ago
  • 6.0.0-alpha.5                                ...           9 months ago
  • 6.0.0-alpha.4                                ...           9 months ago
  • 5.3.10                                ...           9 months ago
  • 6.0.0-alpha.3                                ...           9 months ago
  • 6.0.0-alpha.2                                ...           9 months ago
  • 5.3.9                                ...           9 months ago
  • 6.0.0-alpha.1                                ...           9 months ago
  • 5.3.8                                ...           9 months ago
  • 6.0.0-alpha.0                                ...           9 months ago
  • 5.3.7                                ...           9 months ago
  • 5.3.6                                ...           9 months ago
  • 5.3.5                                ...           9 months ago
  • 5.3.4                                ...           9 months ago
  • 5.3.3                                ...           9 months ago
  • 5.3.2                                ...           9 months ago
  • 5.3.1                                ...           10 months ago
  • 5.3.0                                ...           10 months ago
  • 5.3.0-rc.14                                ...           10 months ago
  • 5.3.0-rc.13                                ...           10 months ago
  • 5.3.0-rc.12                                ...           10 months ago
  • 5.3.0-rc.11                                ...           10 months ago
  • 5.3.0-rc.10                                ...           10 months ago
  • 5.3.0-rc.9                                ...           10 months ago
  • 5.3.0-rc.8                                ...           10 months ago
  • 5.3.0-rc.7                                ...           10 months ago
  • 5.3.0-rc.6                                ...           10 months ago
  • 5.3.0-rc.5                                ...           10 months ago
  • 5.3.0-rc.4                                ...           10 months ago
  • 5.3.0-rc.3                                ...           10 months ago
  • 5.3.0-rc.1                                ...           10 months ago
  • 5.3.0-rc.0                                ...           10 months ago
  • 5.3.0-beta.31                                ...           10 months ago
  • 5.3.0-beta.26                                ...           10 months ago
  • 5.3.0-beta.30                                ...           10 months ago
  • 5.3.0-beta.29                                ...           10 months ago
  • 5.3.0-beta.28                                ...           10 months ago
  • 5.3.0-beta.27                                ...           10 months ago
  • 5.3.0-beta.25                                ...           10 months ago
  • 5.3.0-beta.23                                ...           10 months ago
  • 5.3.0-beta.22                                ...           a year ago
  • 5.3.0-beta.21                                ...           a year ago
  • 5.3.0-beta.20                                ...           a year ago
  • 5.3.0-beta.19                                ...           a year ago
  • 5.3.0-beta.18                                ...           a year ago
  • 5.3.0-beta.17                                ...           a year ago
  • 5.3.0-beta.16                                ...           a year ago
  • 5.3.0-beta.15                                ...           a year ago
  • 5.3.0-beta.14                                ...           a year ago
  • 5.3.0-beta.13                                ...           a year ago
  • 5.3.0-beta.12                                ...           a year ago
  • 5.3.0-beta.11                                ...           a year ago
  • 5.3.0-beta.10                                ...           a year ago
  • 5.3.0-beta.9                                ...           a year ago
  • 5.3.0-beta.8                                ...           a year ago
  • 5.3.0-beta.6                                ...           a year ago
  • 5.3.0-beta.3                                ...           a year ago
  • 5.3.0-beta.2                                ...           a year ago
  • 5.3.0-beta.1                                ...           a year ago
  • 5.3.0-beta.0                                ...           a year ago
  • 5.3.0-alpha.47                                ...           a year ago
  • 5.3.0-alpha.46                                ...           a year ago
  • 5.3.0-alpha.45                                ...           a year ago
  • 5.3.0-alpha.44                                ...           a year ago
  • 5.3.0-alpha.43                                ...           a year ago
  • 5.3.0-alpha.42                                ...           a year ago
  • 5.3.0-alpha.41                                ...           a year ago
  • 5.3.0-alpha.40                                ...           a year ago
  • 5.3.0-alpha.39                                ...           a year ago
  • 5.3.0-alpha.38                                ...           a year ago
  • 5.3.0-alpha.37                                ...           a year ago
  • 5.3.0-alpha.36                                ...           a year ago
  • 5.3.0-alpha.35                                ...           a year ago
  • 5.3.0-alpha.34                                ...           a year ago
  • 5.3.0-alpha.33                                ...           a year ago
  • 5.3.0-alpha.32                                ...           a year ago
  • 5.3.0-alpha.31                                ...           a year ago
  • 5.3.0-alpha.30                                ...           a year ago
  • 5.3.0-alpha.29                                ...           a year ago
  • 5.3.0-alpha.28                                ...           a year ago
  • 5.3.0-alpha.27                                ...           a year ago
  • 5.3.0-alpha.26                                ...           a year ago
  • 5.3.0-alpha.25                                ...           a year ago

Copyright 2014 - 2016 © taobao.org |