Dynamic source rendering for Web components

[shilman]

Follow-up to #11332 but for Web components

[maggiewachs]

@shilman thank you for adding this! Anything I can do to help get some traction here?

[shilman]

@maggiewachs thanks for your enthusiasm for this. after 6.0 is released i can write more about what this might look like. but the core idea is that for each framework we need a decorator that takes the rendered output of the story function and converts it to an appropriate human-readable string. if you can contribute a proof of concept for web components, i'd be happy to point you at how to integrate that into Storybook.

[maggiewachs]

@shilman:

we need a decorator that takes the rendered output of the story function

If you can point me to an example of how to access the rendered output, I'm game to hack something together. :) Is there an API that describes each story?

[maggiewachs]

@shilman *bump* This issue could be a real blocker for us, we need working code samples for clients. LMK if you or someone on the team can provide a little direction, I'd be happy to at least take a look and see if it's something I can do. TY!

[shilman]

@maggiewachs It looks like the result of the storyFn is either TemplateResult or Node (or string already):

https://github.com/storybookjs/storybook/blob/master/app/web-components/src/client/preview/render.ts#L19

https://github.com/storybookjs/storybook/blob/master/app/web-components/src/client/preview/render.ts#L31

So, given a function that takes one of those values and outputs a useful String, ideally with tests, I'd be happy to do the integration on the Storybook side (which is not necessarily straightforward and subject to change).

[shilman]

As a workaround until this is ready: if you're using args stories, you can set the docs.source.type parameter to "code" and it will use the static source code of the story function.

[bennypowers]

cc @Matsuuu

[shilman]

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.14 containing PR #15337 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[jbruni]

@shilman - I'm a Storybook newbie, and I've been happily using the HTML "framework" for vanilla Web Components (non-lit).

I could resolve my own willing for dynamic source there, quick and easy, if only the code (or other docs.source property from story parameters) accepted a function which received the "args" and provided the code string as output.

This PR as well as #11332 are overwhelming to me... And I think that even if someone introduces a given solution for the HTML "framework", others may have their own custom needs.

If people can provide their own function... we would be able to provide whatever dynamic source code strategy we want, without the need of knowing Storybook internals and changing each framework's implementation.

P.S.: I'm sorry if this is not the proper place for a feature request... at least I have the context here. Thank you!