How to Set Up Storybook to Play Nice With Lit-html-based Element
I’d like to share a few tips which might help you set up @storybook/polymer with a JS-only elements. The core issue was importing a base mixin class from Polymer 3, which causes the default babel configuration to transpile into an unusable bundle.
In my code I have a base class which uses Polymer’s
PropertiesChanged mixin to offload handling attributes
1 2 3 4 5 6 7
There is not build step and the code works great when bundled using webpack in an actual web application.
The issue with storybook
Unfortunately this does not work of out the box with Storybook for Web Components (maybe it will be renamed
after all). By design the storybook generates a shell
index.html which loads web components polyfill and
custom-elements-es5-adapter.js. The latter requires that all ES6 be transpiled into ES5. Otherwise any of
the code would not work in older browsers which do not support classes.
The thing is though that it’s an all or nothing approach. Without the adapter all code must be ES6, as per custom elements v1 spec. With the adapter on other hand it is not possible to mix the two approaches. So what happens when Storybook generates its bundle? My code gets transpiled as expected:
1 2 3 4 5 6 7 8 9 10 11 12 13
_PropertiesChanged however would still be as ES6 class (because it comes from
node_modules?) even though
they both end up in the very same bundle. The effect is a sight many web component developers probably witnessed:
TypeError: Class constructor PropertiesChanged cannot be invoked without ‘new’
It had taken me a few hours of futile experiments with various webpack and babel configs until my colleague Kamil helped me out. Turns out all it took was a minimal babel setup.
First things first, here are the steps I used to set up Storybook in my repository, similar to the Slow start guide
When started, nothing will show and the error mentioned above will be reported in the console.
Steps to fix
Turns out the fix is not so difficult but also not obvious for a weekend JS dev . One, it’s necessary to install babel presets:
.babelrc as follows. It is interesting that
es2015 in not required to be called out
explicitly but it has to be installed as a dependency nonetheless.
1 2 3
yarn add -D babel-plugin-transform-decorators-legacy.
Finally the simplest webpack config must be added next to storybooks config file.
1 2 3 4 5 6 7 8 9 10
It will cause all of
node_modules to be loaded by babel which can take significantly more to build, but
hey, at least now my storybook works!