Closed franktopel closed 5 years ago
@storybooks/team looks like we need a slow start guide for polymer / web components
Stencil is a "compiler", that combines TS + Angular-like-components syntax + JSX. Also, It might be tested with Jest (which is good for example to be able supporting storyshots). As the result, it compiles to web-components.
@Prop
and @Components
with all fields like styleUrl
, that have to be treated in a special way (like we do with angular-cli integration to webpack).So storybook/polymer
can't help here. To be more specific it won't fully support all of the Stencil "snowflakes" and integrating it there will be a pain in the ass.
I think it will be a very good addition to Storybook, since it will open a channel to the ionic users. But as a separate app.
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Related: #1870 @tonai, can you share your findings ?
Of course :)
From stencil-component-starter :
npm install --save-dev @storybook/polymer@4.0.0-alpha.4 polymer-webpack-loader lit-html
Then add the script line in the package.json:
{
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook -s www"
}
}
Create the .storybook
folder and a .storybook/config.js
file:
import { configure } from '@storybook/polymer';
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
And also a .storybook/preview-head.html
with:
<script src="/build/mycomponent.js"></script>
<link rel="stylesheet" type="text/css" href="/build/mycomponent.css">
Finally create a story, for example src/components/my-component/my-component.stories.js
:
import { storiesOf } from '@storybook/polymer';
const stories = storiesOf('My component', module);
stories.add('default', () => (`<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>`));
There is still warnings when you run npm run storybook
but the component display correcly.
π This is great news - last time I tried @storybook/polymer
things got painful as soon as you got away from the default Polymer 2 stack (HTML imports, webcomponentsjs polyfills, etc). If this does work smoothly with other web components libraries (or just vanilla web components), would be a great opportunity to rename the package to @storybook/webcomponents
before it's out of alpha, so it's not hard tied to Polymer. Especially since Polymer itself is now insta-deprecating Polymer 3 in favour of LitElement.
@tonai Thank you for your guide. It's now working for me, with minor changes:
react
, react-dom
and velocity-react
to devDependencies..storybook/preview-head.html
, as StencilJS is not emitting CSS in my installation.Since everyone is happy, I am closing this now π You all are welcome to PR the "how".
I've used a slight different approach: Vue.js-Storybook and added Stencil there. Here's how I've made it: https://github.com/silentHoo/stencil-storybook-spike
@igor-dv is renaming the @storybook/polymer
package something the storybook team would consider? Should I file an issue for it? Just think this kind of confusion will keep coming up if the plugin is associated closely w/ Polymer vs. WC in general.
@seaneking yes, that's on the table, would you want to help us do it?
Creating a new issue for is, possibly even a PR would be best.
Sure, but I don't have access to publish to NPM or change GitHub repo names, what would you like a PR for? AFAIK there's no docs for it yet, just the stuff in the GitHub repo
One potential issue is the getstorybook
CLI - you could make it check for a bunch of common WC libraries (Polymer, Stencil, Svelte, SkateJS), but that doesn't seem very robust (nor account for vanilla web components), since most are moving towards loose collections of base classes and mixins (eg: Polymer's LitElement).
That said, I've always wondered why getstorybook
didn't prompt the user to choose a quick start option if it couldn't auto detect the project, rather than just failing outright. That would address this, check for common WC setups and if none found the user can select to quick-scaffold a webcomponents setup anyway.
We have a pure @storybook/html
version in a new 4 alpha release, which is framework agnostic. Maybe there will be easier to use it
Proper (website) documentation for framework-agnostic web components (e.g. pwa-starter-kit, LitElement) would be appreciated. After all, web components is the future! π
Is there a way this would work with hot module reloading? So I could develop web components using stencil and get a live display of them by Storybook? @tonai does your setup provide this functionality or does it run without HMR? I can't seem to get this running without it being staticβ¦
For anyone wondering how to set up a build script with @tonai's solution, here's what I figured out:
Add this to your scripts:
"build:storybook": "build-storybook -c .storybook -s www -o .storybook-build"
Now you can npm run build:storybook
and you can deploy the newly created ".storybook-build" folder to a web server.
hi @michaelauderer, sorry but this setup does not provide HMR (for now).
I don't how if there is a way to tell storybook to launch the build script of stencil when it detect a file change. Or may be the solution is to delegate the watch to another tool like npm-watch for example.
if stencil
has its own watcher, you can run Storybook and this watcher in parallel in two command windows. Or using concurrently
you can even combine them into one script
.
Yes @igor-dv is right, it is not optimal (it requires you to refresh the page manually) but it works.
I've tried the following scripts with the npm-run-all
package:
{
"build": "stencil build",
"start": "stencil build --dev --watch --serve",
"storybook": "start-storybook -p 9009 -s www",
"storybook:watch": "run-p start storybook"
}
So if I run storybook:watch it will recompile both storybook and stencil.
New Starter build for Current stencil and SB 5 to be created
Closed in favour of reopening https://github.com/storybooks/storybook/issues/4600
Bug or support request summary
I'd love to use storybook for the web components library our company is about to create using StencilJS. Can you please add information as on how to get that up & running?
Steps to reproduce
Create a project from stencil-component-starter, then open up a terminal and issue
getstorybook
.Please specify which version of Storybook and optionally any affected addons that you're running
@storybook/polymer
Affected platforms
any
Screenshots / Screencast / Code Snippets (Optional)