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...

[alexlafroscia]

I ran into that issue as well -- I had to override the DocsPage component at the "component" level

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#replacing-docspage

[vidarc]

is it at all possible to get @storybook/html to work with jsx? would make writing my stories for stencil components much easier. would get typing, auto-complete, and don't have to use document.createElement or large template strings. tried to trick typescript with a // @jsx at the top using the react package, but that didn't work.

[Hypnosphi]

@vidarc what was the error when you did that? Do you have a custom babel config?

[vidarc]

not much customizing. a few things added to the webpack. first typescript complains about Cannot find name 'h'. my tsconfig has jsx = react and jsxFactory = h. i can get those warnings to go away using the // @jsx h pragma setting at the top, but then i get a storybook error due to it not returning a DOM node or string.

going to try out: https://github.com/developit/vhtml next

EDIT: works great with jsx. can't figure out how to get it to work with typescript though :/

[Hypnosphi]

@vidarc if h stands for hyperscript, it returns a custom object which is neither string nor DOM element

vhtml seems the way to go

[shilman]

FYI, we have an incoming PR for a web-components app: https://github.com/storybookjs/storybook/pull/8400

Can somebody here comment on how that intersects with this issue? @vidarc @DesignByOnyx @Edd-Strickland @alexlafroscia @daKmoR

[ericclemmons]

I haven't test #8400 yet, but prior to testing that I have been able to get "live" Stencil working via:

1. Run start-storybook -s ./www in one window.
2. Run stencil build --dev --watch in another.
3. Update .storybook/config.ts to reload the window on HMR:

const req = require.context('../src/components', true, /.stories.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

if (module.hot) {
  module.hot.accept(req.id, () => {
    const currentLocationHref = window.location.href;
    window.history.pushState(null, null, currentLocationHref);
    window.location.reload();
  });
}

It's a little kludgy.

The reason why I couldn't investigate alternatives like https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.js is that import "./my-component" fails since import { Component } from "@stencil/core" isn't a valid export, and in fact stripped as part of the build process:

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

[rjaguilar]

Does anyone actually have a stencil and storybook implementation/configuration that works in IE11? I've tried each implementation mentioned in this thread with no luck. always run into Unhandled promise rejection TypeError: Invalid Scheme with stencil versions 1.2.4 -> 1.7.4.

[fictivecreations]

@shilman I was able to get stencil components up on the web-components app but it seems to me that it's just reading them in the same way everyone is doing with the html one, and HMR doesn't react to updates to the stencil components themselves.

It would really be better if there was a way to get the stencil compiler built into the storybook run sequence like it is for React, Angular, etc.

[ericclemmons]

I'll continue trying out ways of getting Stencil components "live", but the architectural problem I've been running into is that, unless I'm mistaken, Stencil components require a custom build step to work (stencil build --dev --watch), and there's not a run-time equivalent.

I attempted to do import { MyComponent} from "./MyComponent", but that fails since @Component isn't actually exported from @stencil/core. In fact, it's stripped as part of the build step:

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

Knowing this, my next test is to keep the build step with React bindings (https://github.com/ionic-team/stencil-ds-plugins), but instead replace the HMR logic to use React (instead of HTML) stories.

Hopefully this will let the storybook UX match the React one, leaving Stencil to just the component implementation.

[shilman]

I don't think it's the end of the world to require stencil build to be running in parallel in dev mode:

• We could instruct the user how to run this with concurrently in their package.json
• A stencil preset could spawn this process on startup, and then kill it on shutdown if we wanted to hide that from the user

A solution with fewer moving parts is preferable, but let's not let good be the enemy of great here. AFAIK for now everybody's still rolling their own stencil support right now, and there's a nice opportunity to help simplify things for a lot of people here...

[ericclemmons]

Using concurrently is what's working for me currently.

There are incremental steps for sure.

The main thing that got me as a user was "why" stencil didn't work the same as my react stories, which can't be resolved without stencil-specific changes.

On Thu, Oct 31, 2019, 5:02 PM Michael Shilman notifications@github.com wrote:

I don't think it's the end of the world to require stencil build to be running in parallel in dev mode:

• We could instruct the user how to run this with concurrently https://www.npmjs.com/package/concurrently in their package.json
• A stencil preset could spawn this process on startup, and then kill it on shutdown if we wanted to hide that from the user

A solution with fewer moving parts is preferable, but let's not let good be the enemy of great here. AFAIK for now everybody's still rolling their own stencil support right now, and there's a nice opportunity to help simplify things for a lot of people here...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECZTMEQ#issuecomment-548615698, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA .

[daKmoR]

one other approach to this would be to clearly separate the UI (storybook) from the Preview (stencil). With storybook standalone, this should be already possible. That way you could even prebuild storybook 💪 which would mean way faster bootup times.

And then you sort of would only use stencil build while developing (but still using storybooks UI). Which would mean you will get all the goodies the stencil dev server supports without a need to think about interopt with storybooks webpack setup.

We already investigated this by using es-dev-server to power the preview for web-components. We sort of have a POC... but there are still quite some rough edges. However, I assume the exact same approach should work for stencil as well.

If someone has any questions or would be interested to investigate this for stencil or help with making a reference project by using es-dev-server then I'm sure @LarsDenBakker is happy to share some more details 🤗

PS: all of this is only possible because of storybook having this awesome iframe setup with channel messages to keep the UI separate from the preview 🤗

[Edd-Strickland]

Hey all

After some time and a great deal of fiddling around this is my repo for a stencil integrated storybook implementation https://github.com/Edd-Strickland/stencilbook.

Happy to discuss further hopefully most things are obvious from the readme and from looking at the package.json for the scripts.

This is built using the vanilla stencil starter component and the vanilla storybook HTML implementation.

Please look and review...

StencilBook - A Stencil Storybook Starter

This is a starter project for building a standalone Web Component using Stencil and Storybook.

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

Clone the repo

git clone https://github.com/Edd-Strickland/stencilbook.git

Change into the base directory:

cd stencilbook

Install the modules:

npm install

and run a build for the entire repo:

npm run build:all

After this run storybook:

npm run storybook

Other commands for this repo include:

Build stencil:

npm run stencil

Start stencil directly in serve/watch mode; Useful for ameneding stencil components directly:

npm run stencil:start

Run storybook and a stencil build with watch and serve, deleting any previous versions built and will serve locally:

npm run storybook:build:all

Serve storybook Locally:

npm run storybook:serve

Reset modules; Deletes and reinstalls node modules:

npm run reset:modules

To run the unit tests for the components, run:

npm test

Test

To run tests in watch mode:

npm run test.watch

Generate new components

To generate new Stencil components automagically:

npm run generate

[mboudreau]

@Edd-Strickland This is a great start! If I could suggest that maybe you add a start script for easier bootup, I did "start": "npm-run-all -p stencil:start storybook" and it works pretty well, except there's no hot reloading as storybook doesn't seem to recognize when stencil has built.

...that is unless I'm missing something?

[robaxelsen]

@shilman there seems to be a @storybook/web-components package already in master in alpha, but I don't see Stencil referenced in the README.md: https://github.com/storybookjs/storybook/tree/next/app/web-components

Is this parallel effort? If not, would you happen to know the corresponding issue? Could not find when searching for web-components in issues. Found the app: web-components tag, but has just been added to the release and a bug.

[shilman]

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components%22+

I don't understand what is necessary to add proper stencil support above and beyond what is provided by @storybook/web-components. I'm sure somebody on this thread knows though!

[Edd-Strickland]

@Edd-Strickland This is a great start! If I could suggest that maybe you add a start script for easier bootup, I did "start": "npm-run-all -p stencil:start storybook" and it works pretty well, except there's no hot reloading as storybook doesn't seem to recognize when stencil has built.

...that is unless I'm missing something?

Hmm Apologies been busy and at conferences at the end of last week.

I'm confused as to the issue you're having, could you raise this via the repo issues rather than on this thread for more detail.

However if you do an install, and then run the storybook command it will launch the watch server accordingly. Stencil will auto HMR whenever you change or add or update a component whilst this is running.

[Edd-Strickland]

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components%22+

I don't understand what is necessary to add proper stencil support above and beyond what is provided by @storybook/web-components. I'm sure somebody on this thread knows though!

depends, the web components works with vanilla instances I've not compared the differences between them however stencil outputs web components but runs as a complier for W/C rather than being W/C by default.

So arguably there's need for both. One native JS W/C and one for the stencil compiler if you want to fast prototype Stencil based W/C's in side of storybook as you could with say a react or angular component.

I've not have time to catch up with @daKmoR to discuss if this is duplication or redundant given their work however for the time being we're maintaining this version.

[4aficiona2]

I recently stumbled upon Bulmil due to their work on the Stencil integration with nuxt-stencil and their nuxt examples.

I also figured out that there is a decent Storybook support. Maybe it's worth a look too. I don't know the internals / how they differ from the current state of this thread but it works out of the box within Bulmil once you run storybook.

@storybook/addon-actions does not yet seem to work or I was not yet able to get this working.

[ndelangen]

Maybe we can get @Gomah in this thread and hear his ideas for collaboration on making stencil support better for storybook?

[Edd-Strickland]

Recently I stumbled upon Bulmil due to their work on the Stencil integration with nuxt-stencil and their nuxt examples.

I also figured out that there is a decent Storybook support. Maybe it's worth a look too. I don't know the internals / how they differ from the current state of this thread but it works out of the box within Bulmil once you run storybook.

@storybook/addon-actions does not yet seem to work or I was not yet able to get this working. Certainly within the repo above add on-actions will work, as a standard storybook addon

E2A: the stencil book not the @Gomah variant.

The object with the basic stencil / SB integration above was simply to create a base which allowed storybook to storybook and stencil to stencil and then both of them to integrate together to allow you to have web components made via stencil out put into a storybook frame.

I’ve stuck a spike in with my teams sprint for the next two weeks to see if the W/C version will run as well as this iteration and if we could convert our existing version we’re using to the W/C version.

Ideally it would all work so there would be no fragmentation of the W/C variants however unlike native W/C implementations Stencil isn’t really a framework it’s. compiler. So it might still be worth while having the distinction to allow you to write JSX components which will output as W/C after.

Or it might be really simple.

Will let you know once we’ve completed the spike.

[robaxelsen]

not much customizing. a few things added to the webpack. first typescript complains about Cannot find name 'h'. my tsconfig has jsx = react and jsxFactory = h. i can get those warnings to go away using the // @jsx h pragma setting at the top, but then i get a storybook error due to it not returning a DOM node or string.

going to try out: https://github.com/developit/vhtml next

EDIT: works great with jsx. can't figure out how to get it to work with typescript though :/

Hi @vidarc. Were you able to make this work with storiesOf() syntax? If so, I would be really curious to see how you did it. Do you have a code example or code base to share?

While we have storybook and stencil integrated and working well in our project, the biggest pain point we have is having to resort to creating stories with document.createElement() for components with object props etc. If vhtml can solve this, that would be awesome!

[robaxelsen]

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components%22+

I don't understand what is necessary to add proper stencil support above and beyond what is provided by @storybook/web-components. I'm sure somebody on this thread knows though!

You're right, and I agree. I noticed in the README.md the folders included, and saw other web-components frameworks, but not stencil:

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

I therefore thought stencil was not included for a reason. But if this works well without anything added, that's perfectly fine with me.

Btw, can this this issue now be closed, as it's solved by aforementioned web-components preset?

[Edd-Strickland]

not much customizing. a few things added to the webpack. first typescript complains about Cannot find name 'h'. my tsconfig has jsx = react and jsxFactory = h. i can get those warnings to go away using the // @jsx h pragma setting at the top, but then i get a storybook error due to it not returning a DOM node or string. going to try out: https://github.com/developit/vhtml next EDIT: works great with jsx. can't figure out how to get it to work with typescript though :/

Hi @vidarc. Were you able to make this work with storiesOf() syntax? If so, I would be really curious to see how you did it. Do you have a code example or code base to share?

While we have storybook and stencil integrated and working well in our project, the biggest pain point we have is having to resort to creating stories with document.createElement() for components with object props etc. If vhtml can solve this, that would be awesome!

you can make them as CSF stories directly with the latest and swap your stories to that format it works well. Also if you import some data factories to populate the data objects then you can just use these to hydrate your props....

[Edd-Strickland]

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components%22+ I don't understand what is necessary to add proper stencil support above and beyond what is provided by @storybook/web-components. I'm sure somebody on this thread knows though!

You're right, and I agree. I noticed in the README.md the folders included, and saw other web-components frameworks, but not stencil:

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

I therefore thought stencil was not included for a reason. But if this works well without anything added, that's perfectly fine with me.

Btw, can this this issue now be closed, as it's solved by aforementioned web-components preset?

I'm going to test if it works with stencil and will report back then we can close. No point in closing if it doesn't actually work with stencil...

[robaxelsen]

...

Hi @vidarc. Were you able to make this work with storiesOf() syntax? If so, I would be really curious to see how you did it. Do you have a code example or code base to share? While we have storybook and stencil integrated and working well in our project, the biggest pain point we have is having to resort to creating stories with document.createElement() for components with object props etc. If vhtml can solve this, that would be awesome!

you can make them as CSF stories directly with the latest and swap your stories to that format it works well. Also if you import some data factories to populate the data objects then you can just use these to hydrate your props....

Thanks. Hadn't realized that CSF now is the recommended way to write stories. Have you managed to make the jsx addon to work with vhtml btw, or is that not possible?

[Edd-Strickland]

...

Hi @vidarc. Were you able to make this work with storiesOf() syntax? If so, I would be really curious to see how you did it. Do you have a code example or code base to share? While we have storybook and stencil integrated and working well in our project, the biggest pain point we have is having to resort to creating stories with document.createElement() for components with object props etc. If vhtml can solve this, that would be awesome!

you can make them as CSF stories directly with the latest and swap your stories to that format it works well. Also if you import some data factories to populate the data objects then you can just use these to hydrate your props....

Thanks. Hadn't realized that CSF now is the recommended way to write stories. Have you managed to make the jsx addon to work with vhtml btw, or is that not possible?

So the JSX is parsed directly via the stencil compiler into the shadow dom. So as long as you're using the integration of the complier into storybook you write your standard stencil component and then include it in the CSF story and then import in your data factory to populate the prop's.

The vanilla repo I posted with do this out of the box no need for VHTML plugins or any thing else no need even for a wrapper you can write directly as stencil and just output.

you can use the storyOf syntax but then you're locked into the classic document.createElement Pattern. For example this old storysOf Syntax for our icon

import { storiesOf } from '@storybook/html';
/** 
  * Import readme from component into the story 
  */
import markdown from './readme.md';

storiesOf('1-Atoms/icon', module)
    .addParameters({ viewport: { defaultViewport: 'responsive' } })
    .add('knobs', () => {
        /**
         * Add Knobs to component panel
         * Set within Each knob as the third parameter
         */
        let icon = document.createElement('namespace-icon');
        icon.classList.add('namespace-action-plan');
        icon.size = 'medium';
        return icon;
    }, { notes: { markdown } });

VS

import centered from '@storybook/addon-centered/html';
import markdown from './readme.md';

export default {
  title: 'Atoms|Icon',
  decorators: [centered],
  parameters: {
    notes: { markdown },
    viewport: { defaultViewport: 'responsive' }
  }
};

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

[vidarc]

not much customizing. a few things added to the webpack. first typescript complains about Cannot find name 'h'. my tsconfig has jsx = react and jsxFactory = h. i can get those warnings to go away using the // @jsx h pragma setting at the top, but then i get a storybook error due to it not returning a DOM node or string. going to try out: https://github.com/developit/vhtml next EDIT: works great with jsx. can't figure out how to get it to work with typescript though :/

Hi @vidarc. Were you able to make this work with storiesOf() syntax? If so, I would be really curious to see how you did it. Do you have a code example or code base to share?

While we have storybook and stencil integrated and working well in our project, the biggest pain point we have is having to resort to creating stories with document.createElement() for components with object props etc. If vhtml can solve this, that would be awesome!

@robaxelsen I ended up just using @storybook/react and modifying the webpack config to transform MD files along with MDX files. Then just a small bit of code to create knobs based on the json doc output stencil provides. For the stencil code, we use storybook's copy from their CLI and link those files in the preview-head.html file. Suits my purposes pretty well.

[robaxelsen]

@Edd-Strickland Thanks a lot for the example and explanation. With your last example, I still end up having to pass attributes programmatically though, as props on the element. My hope was that I could, either with vhtml or plain stencil compiler write my stories as JSX.

So instead of:

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

...I would write:

export const knobs = (): HTMLNamespaceIconElement => {
    return (
        <namespace-icon class="namespace-action-plan" size="medium">
        </namespace-icon>
    );
};

Both for readability, and ease of creating stories. This is not possible, then? If it is possible, could you provide a quick example?

We can also talk in discord chat if that is easier. I am Rob Axelsen#1373.

EDIT: To add to the above, I've also looked at the CSF documentation, and tried with JSX syntax importing h, but throws error "Expecting an HTML snippet or DOM node from the story: "Simple Story" of "Component".":

export const simpleStory = () => <namespace-icon class="namespace-action-plan" size="medium"></name-spaceicon>;

[daKmoR]

If this is about writing stories that need to set properties for web components then you can take a look at @storybook/web-components. It is using lit-html to declaratively create html with properties.

This should work when running storybook and stencil side by side :)

[Edd-Strickland]

Except stencil doesn't use lit html. That's a Vue thing...

@shilman there seems to be a @storybook/web-components package already in master in alpha, but I don't see Stencil referenced in the README.md: https://github.com/storybookjs/storybook/tree/next/app/web-components

How do we download and test the web-components package the repo linked here has no clone actions etc?

[shilman]

@Edd-Strickland that's just a directory in the main storybook monorepo

[daKmoR]

Except stencil doesn't use lit html. That's a Vue thing...

it's a lit thing 🤔

however, that is the beauty of web components - it does not matter what stencil uses under the hood. You can use lit-html or any other way of defining your stories. All you probably need is a way of writing "html" with properties.

For lit-html it would look like this

export myStory = () => {
  const dataArray = [{ name: 'john', age: 21 }, { name: 'maria', age: 28 }];
  return html`
    <my-lit-component .title=${'some title'} power="unlimited">
      <p> some light dom</p>
    </my-lit-component>
    <my-stencil-component super-mode .data=${dataArray}></my-stencil-component>
  `;
}

So if you would go into the DevTools in Chrome in the story you could select the lit-component and you could read the following details

• property title e.g. console.log($0.title) // some title
• attribute power e.g. console.log($0.getAttribute('power')) // unlimited

for the stencil component it would be "the same"

• property data e.g. console.log($0.data) // [{ name: 'john', age: 21 }, { name: 'maria', age: 28 }];
• attribute super-mode e.g. console.log($0.hasAttribute('super-mode')) // true

lit-html only renders the dom... where/how the dom elements are registered lit-html doesn't know/care about - so which technology is used for each component can be completely different... e.g. you can have component who are lit-element, stencil, vanilla HTMLElement or it could be even a web component wrapper for a full react/vue/angular application... 😱

stencil may be a compiler but once it's compiled to web component it can be used as just dom 🤗

PS: @storybook/web-components uses lit-html

[jagreehal]

The Stencil team are refactoring the compiler which I think will change the Stencil/Storybook integration.

If anyone is just going to use Stencil and Storybook via React checkout https://github.com/the-road-to-learn-react/use-custom-element which allow you to pass arrays and objects. I'll have a try myself later but this could help some people.

[bbellmyers]

For those interested, I've published a starter for combining Storybook/react and Stencil: https://github.com/bbellmyers/stencil-storybook-starter. Note that with this configuration, changes to components require a hard refresh in the browser, but changes to stories do not.

[sem4phor]

Seems like storybook is developing storybook for web components. I tried it out with stencil and it is working pretty good.

https://github.com/storybookjs/storybook/tree/next/app/web-components

[dmartinjs]

@sem4phor can you share you configuration ?

I'm getting errors about lit-html on a fresh storybook install for web-components

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

[gmlnchv]

@dmartinjs you do need to install 'lit-html' yourself it's being used to render components in the default examples.

[ndelangen]

@Edd-Strickland we added storybook for web-components & in 6.0.0 storybook for polymer will be deprecated / not updated anymore.

Is there anything there needs to be done to make storybook for web-components work for stencil components?

[LarsDenBakker]

The web components storybook can render stencil web components components, but stencil isn't able to run in the browser as is and needs to be compiled. Therefore it still needs some special handling, unless you compile the stencil components before running storybook.

[ndelangen]

@LarsDenBakker is it a matter of adding a webpack plugin / loader to get the above to work. ( I imagine it's desired to make stencil component HMR & compile dynamically )

[LarsDenBakker]

Yes, although stencil itself uses rollup. If the compile step can be used as a separate project, you could make it into a webpack plugin perhaps. I don't know enough about the internals for that.

[Edd-Strickland]

Stencil doesn't use Webpack. It uses Rollup instead.

It's possible using the repo I set up to have both working accordingly and enable HMR equivalent in Stencil with the -watch call. So that stencil reloads when stencils updated and that Storybook reloads when it's updated.

So no need to build out each time as this will cover it.

Whilst I'v e not had time recently to update the repo with the latest SB or Stencil this process will still work and you can then upgrade the repo with the latest versions.

Thanks

[Edd-Strickland]

@Edd-Strickland we added storybook for web-components & in 6.0.0 storybook for polymer will be deprecated / not updated anymore.

Is there anything there needs to be done to make storybook for web-components work for stencil components?

yes it still doesn't really account for live reload/ HMR because as detailed above the differences between webpack use and roll up use so at present if you want to use the SB WC version then it requires a full build of stencil in order to render then all the goodness of HMR is lost to stencil.

This version is currently based on the HTML version not the polymer version so this shouldn't impact on the longer term aim to retire that version.

[Edd-Strickland]

@LarsDenBakker is it a matter of adding a webpack plugin / loader to get the above to work. ( I imagine it's desired to make stencil component HMR & compile dynamically )

I wouldn't advise it, the webpack version of Stencil is a significantly more difficult development path and increases the dependancies footprint without any need, As show in the repo I produced it's perfectly possible to have stencil running in watch most which recompiles live on every change of the WC or the SB instance. It's about configuring it to allow both.

[Edd-Strickland]

Yes, although stencil itself uses rollup. If the compile step can be used as a separate project, you could make it into a webpack plugin perhaps. I don't know enough about the internals for that.

There is already a stencil WP plugin however this isn't a supported or community approved dependancy.

[romulocintra]

cc @jthoms1 @adamdbradley

[LeeBurton]

@dmartinjs you do need to install 'lit-html' yourself it's being used to render components in the default examples.

@sem4phor can you share you configuration ?

I'm getting errors about lit-html on a fresh storybook install for web-components

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Any feedback on this? I am having to install this dependency myself. If it is used by @storybook/web-components, then it should be automatically installed as a dependency...?

[shilman]

@LeeBurton not if it's a peer dependency? (Not sure whether it is, if it's not perhaps it should be) cc @daKmoR