Framework support - Stencil.js

[maraisr]

Describe the solution you'd like I'd like to see Stencil.js support, as I see Storybook to be very component focused, and Stencil being a very component focus framework - these tools would compliment each other very well.

Are you able to assist bring the feature to reality? yes, I can...

[igor-dv]

Duplicate to #1870 and #3423. Let's continue a discussion there

[Edd-Strickland]

New Starter build for Current stencil and SB 5 to be created

[ndelangen]

@Edd-Strickland want to work on a stencl support version 🎉

[Edd-Strickland]

I've upgraded the polymer starter with stencil to the latest version of SB need some help in removing polymer and adding in stencil complier now

[vogloblinsky]

Hi,

@Edd-Strickland just for information, i have implemented Stencil inside Storybook like you did in your starter, in this project : https://github.com/vogloblinsky/nutrition-web-components

I have used the HTML starter of Storybook.

For now with Storybook & Stencil, i just had to :

• add a custom header pointing to each root JavaScript file generated by Stencil
• add static files generated by Stencil in Storybook

The main problem i think is the usage of Webpack by Storybook to handle JavaScript files imported inside a story. The ideal workflow is to only imported the JS file of the Web Component.

[Edd-Strickland]

Yeah this is what have done previously but with the polymer version however what this means is that by importing as plain static W/C implementations is you need to update each time into your story's which feels limiting.

[nisheed2440]

Hi All, I have created a wrapper that can be installed on a stencil component type project. Hope it helps. https://github.com/nisheed2440/stencil-storybook-wrapper

[Edd-Strickland]

looks really good I'll test on Monday. Good work :)

[o-t-w]

Will this be made into an official part of Storybook? I have a desperate need for this!

[ndelangen]

@o-t-w We're trying, would you be able to help us?

[o-t-w]

@ndelangen I would be happy to test things and provide feedback/bug reports.

[o-t-w]

Would this work with LitElement (and web components in general) or just Stencil?

[Nightbr]

@nisheed2440 your wrapper seems promising, I will test this soon! But it could be great to have a "native" integration documented by Storybook 👌

[Edd-Strickland]

@nisheed2440 I have been very busy(sorry everyone) but have had a very small window today to test a very vanilla version of this locally and it's really good. works really well.

going to spend some time on this next week trying to incorporate it into an existing project to see how this might work for existing stencil users / projects.

[Nightbr]

I have tested it this morning and it works pretty well too! GJ it's really easy to setup. I have installed and tested some addons:

import '@storybook/addon-backgrounds/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';

Everything works fine, just found one issue with addon-knobs https://github.com/storybooks/storybook/issues/5017 But there is a workaround and this should be fixed pretty soon I think.

[popcorn245]

I spent the last 2 weeks playing with StencilJS and Storybook and did a livestream where I cover my solution. I feel there is a much better way, but I was able to get HMR, and most plugins to work with little issue. Would love any feedback you guys have on how to improve or import the loaders from the distribution stencil bundle.

https://www.youtube.com/watch?v=XwHtPw3izLE

And here is the repo! ^_^ https://github.com/MadnessLabs/enjin-components

[ghaiat]

@nisheed2440 Hello, i m using an approach very similar to yours and everything is working expect chromatic. were you able to make chromatic work with stencil/storybook? when i run, it does discover all my stories but all the screenshots are empty. it s probably missing the stencil when trying to render the component screenshot on chromatic server

[dougestey]

@nisheed2440 Thank you so much for this really great effort. Hopefully this gives the team here a head start in the right direction. Stencil and Storybooks are ideal for each other.

[stale[bot]]

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!

[shilman]

Anybody want to pick this up?

[grahamlucid]

My team is using StencilJS + Storybook for our common component library and I'd love to contribute. Maybe a few of us can get this thing back on track...

[shilman]

Seems like there's a lot of interest, e.g. https://twitter.com/dboskovic/status/1120336958008348672

One easy win would be publishing a @storybook/preset-stencil package which packages @popcorn245 's config into a storybook preset. I still need to finish off the docs for that, but I'm using it for the upcoming Storybook Docs release and it's straightforward & how most SB config will work in the future.

I'd be happy to guide anybody who wants to pick that up.

[popcorn245]

Hey @shilman, stoked so many people are psyched to pickup on this and implement Stencil with Storybook. That thread has some good things that I have found, but there are many more little bugs like having to return a string of the element in order to use knobs.

A much better implementation would piggy-back off of the Stencil compiler and allow for use of JSX like with React components, but that is MHO.

Also, Stencil One is about to drop with some huge changes so it may be good to put peepers on this Changelog to make sure whoever is working on this is aware of what is coming down the pipeline.

https://github.com/ionic-team/stencil/blob/core-refactor/BREAKING_CHANGES.md

[drwpow]

This thread was immensely helpful to me, especially @popcorn245’s config. Personally I was using @stencil/state-tunnel, which broke that config. Fortunately I was able to get it to work with some minor ~hacks~ tweaks by running:

npm i -D [email protected]

And adding this to .storybook/webpack.config.js:

const { existsSync, readdirSync } = require('fs');
const { resolve } = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = ({ config }) => {
  // 1. Transpile @stencil modules with Babel
  const babelLoader = config.module.rules.find(
    ({ use }) => use && use[0].loader === 'babel-loader'
  );
  babelLoader.exclude = [/node_modules\/(?!\@stencil).*/];
  if (babelLoader.use[0].options) {
    babelLoader.use[0].options.plugins = ['@babel/plugin-syntax-dynamic-import'];
  }

  // 2. Load JS & CSS from our components
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.js'));
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.css'));

  const components = resolve(__dirname, '..', 'dist', 'collection', 'components');
  readdirSync(components).map(file => {
    jsFilePath = resolve(components, file, `${file}.js`);
    try {
      if (existsSync(jsFilePath)) config.entry.push(jsFilePath);
    } catch (err) {
      console.error(err);
    }

    cssFilePath = resolve(components, file, `${file}.css`);
    try {
      if (existsSync(cssFilePath)) config.entry.push(cssFilePath);
    } catch (err) {
      console.error(err);
    }
  });

  // 3. Fix dynamic imports for Storybook
  // IMPORTANT: webpack must be at 4.28 due to a bug. See here: https://github.com/webpack/webpack/issues/8656
  config.plugins.push(
    new CopyPlugin([
      {
        from: resolve(__dirname, '..', 'dist'),
        to: resolve(__dirname, '..', 'node_modules', '@storybook', 'core', 'dist', 'public'),
      },
    ])
  );

  return config;
};

[fvaldes33]

Starting to experiment with this also and (as mentioned somewhere else) using concurrently seems to work just fine for me (for now). I created a quick starter project that includes everything you need to get up and running with both stencil and storybook. Already using the latest stencil release.

Check it out here: stencil-storybook-starter

[drwpow]

@fvaldes33 Nice! Starred it. I actually just updated to Stencil One beta and my config looks similar—I basically could use the stock webpack setup entirely.

The only difference for me was using stencil build --watch (prod, not dev) because the build times are so fast and it’s easier to consume the prod version in Stencil (especially with global styles and other imports).

[perkrlsn]

@fvaldes33 how are you able to reference the build/components.js in your preview-head.html like that? I have to supply the full path e.g. http://localhost:3333/build/components.js. But I would like to not have to do that.

(I'm not using your starter, but i'm using the stencil component starter with a fresh storybook/html install)

EDIT: realized i was starting storybook on port 6006 instead of in the www folder. problem solved!

[jagreehal]

Looks like lots of us have similar solutions out there (including me https://github.com/jagreehal/stencil-boilerplate), but I'd really like hot/live updates when I edit a Stencil component. Currently I have to manually refresh the browser to reload Storybook.

[chazzmoney]

Is there a bullet list of requirements to complete this? I'd be happy to pitch in if I knew what needed to be built.

[jeanbenitez]

What is the current state? Can we contribute? I would love to see this!