[Angular] Want to publish/share/render story WITHOUT using Chromatic - is this even possible?

[rwcorbett]

Question about being able to publish/share stories and doc page WITHOUT using Chromatic. (please excuse the cross-post: https://discord.com/channels/486522875931656193/1096460114782855279/1232397789166702592)

I have searched through the discussions and have only come across a few other people discussing this (ex. #24057)

What I am aiming to do is use Storybook to create the awesome docs and stories for my components - THEN - I would like to simply just render the a story and inject the output where I need it. Perhaps something like (pseudocode)

import Meta, { Primary } from './path/component.stories';
...
export const RenderedPrimaryStory = Primary.render(Meta);
...
(then in the view:)
<RenderedPrimaryStory />
or
<object data="./reference-to/RenderedPrimaryStory" type="text/html??"></object>
...

This is pseudocode so please ignore the syntax... the concept I am trying to achieve is how to publish the story without Chromatic.

Can we render the static HTML build for a single component?

i.e. $> build-storybook --name-of-story --output-folder

[Marklb]

So, are you wanting to render the stories and doc pages, without Storybook's UI, instead of just using a custom theme?

I don't know how well it works, but think I have heard of people hosting Storybook and embedding the url that you would get from the "Open canvas in new tab" button, on the top right of a story, in an iframe on another site. I don't know if the docs pages can do something similar though. I think you would still have to host your Storybook app, even if not directly using it, for this though.

Since you mentioned Angular, if you are wanting to render the Angular component, generated as the root of a story, as a component in a regular Angular application then it would be possible, but there would be limitations and workarounds that could cause issues. I could probably make an example, but I don't see it as a good solution and it would probably take a little while to figure out what all is needed. I am thinking a mix between Storybook's inline rendering and what I did for @storybook/testing-angular. The composed story for testing should work in an application, even though I haven't actually tried, but you would not be able to rerender if you are changing args that cause the template to change. Also, two Stories using the same component would not work. Some of those limitations can be worked around with what Storybook's inline rendering does, by clearing the cache of component that Angular uses to determine if a component has already been declared. Angular does not expect you to do that though, so it could cause unexpected bugs that are hard to track down. Inline components work by basically clearing all the globals of the last rendered story's app then creating a new app, which leaves the other applications with global info missing. For Storybook, that missing info isn't too important for the majority of cases, because if the limited usage of the inline rendering.

[rwcorbett]

a mix between Storybook's inline rendering and what I did for @storybook/testing-angular. The composed story for testing should work in an application, even though I haven't actually tried, but you would not be able to rerender if you are changing args that cause the template to change.

Yes - I am finding the same thing. I also thought to use the @storybook/testing-angular render in the Angular component .ts file and then display that, but no such luck. I feel like this has to do with the React runtime that SB uses to render, but I am not 100% certain about that, and am running low on time to keep hammering away at this. This is not the hill I will die on ;-)

Since I am on an older version of Angular I am also using older SB, so I think that I will need to rely on the iframe embed option for now.