Addon-docs: Angular inline rendering support

[bmayen]

Some great work has been done in #7929 to to support inline rendering for Vue. This PR additionally paves the way for other framework support via prepareForInline. As is suggested in the docs in that PR, this could be implemented for Angular by wrapping Angular components as Angular Elements.

Are you able to assist bring the feature to reality?
Once #7929 is merged and prepareForInline is available, I should be able to get a PR in for this.

[bmayen]

Would like to keep this open. Contribution is still pending the referenced issue above.

[shilman]

@bmayen #7929 has been merged. I'll assign this issue to you and mark it as in progress so the bot goes away.

[bmayen]

@shilman Finally had a chance to look into this a bit more. Hoping I can get some feedback/guidance from you.

The problem I see with using Angular Elements here is that creating an Angular Element requires more than simply defining an Angular Component and calling a function from Storybook to turn it to an Element. The Component needs to be declared in an app ngModule and have an app component which calls Angular's createCustomElement on it. It's not clear to me how this would be integrated into Storybook.

[shilman]

@bmayen TBH I have no idea. Maybe @kroeder or someone with more angular knowledge can help out here?

[dannymcgee]

@bmayen I haven't dug into Storybook's codebase at all, but my company is using Storybook to develop a component library for Angular and I would be extremely interested in this feature for a lot of reasons. Is there anything I might be able to do to help you out here?

[dperciful]

Second this. Inline rendering for Angular would be ideal here rather than those ancient old slow rendering iframes. ;o)

[shilman]

Looks like this might be the way forward for Angular inline rendering support: #3889 (comment)

Any takers? cc @petermikitsh

[bmayen]

Removed my assignment as it sounds like we're looking in another direction now

[matheo]

@bmayen any insight on that new direction to share please?
the uncertainty in the comment feels weird

[bmayen]

@matheo, I'm referring to @shilman's previous comment

[matheo]

@bmayen oh nice! didn't realize, thanks!

[alc-1]

This is definitely something I'd like to see happen!
iFrames are a blocker for anyone wanting to adopt addon-docs while having an Angular app.

@shilman I'm interested to take it so that it goes forward (or even if it's not forward, at least it'll move 😄 )

Since it'd be my first contribution, I'd definitely enjoy having someone to help there. 👍

[shilman]

@costalvaro thanks so much for taking this on! 💯

i'd be happy to help you out with the addon-docs integration. i suspect the trickier part will be on the angular side. hopefully @kroeder @matheo @gaetanmaisse and the rest of the #angular channel on Storybook's Discord can help you out with that.

[alc-1]

Hi folks!
Sorry for being late, took longer than expected to come back.
Here's a "little" resume of what's going on.

While testing how to inline Angular components, I'v hit 2 main issues.
Both are independent, so I'm gonna describe them below. Maybe one of you will be able to help on them. :)

1. 🚫 Technical blocker point: Rendering multiple angular components with the same selector in a react page

A demo is stronger than any word : https://stackblitz.com/edit/angular-to-react
While showcasing multiple Angular components with different selectors is possible, it doesn't reflect reality.
We need a way to have a single wrapper for Angular components... and that implies a single selector, with multiple occurences.
Don't hesitate to play around with this stackblitz, I'd love to hear about workarounds!
Btw an equivalent is available as a github repo if you prefer : https://github.com/costalvaro/angular-to-react

In a nutshell : Angular in React works for a single component, but atm won't for multiple occurences.

2. 🚀 Storybook integration point: Making use of @storybook/angular rendering logic inside @storybook/addon-docs

While my draft was an honorable way to get started, it simply pinpointed where an integration should be done.. without being even close to working.
To be more specific, docs prepareForInline function provides a StoryFn, which is litteraly the content you'd write to describe a story (component/template/props/...).
It needs to take into account moduleMetadatas and so on, so it basically requires the logic defined in @storybook/angular render()...

From my current understanding, this whole logic happens while displaying iframe.html so that the core is agnostic of any frameworks.
Considering that point, what could be the best way to make use of @storybook/angular logic inside @storybook/addon-docs ?

In a nutshell : In it's current form, prepareForInline could integrate components that don't have any dependencies.
It'd require to use @storybook/angular render() logic in order to have all current abilities (dependencies, addons, etc).

@shilman Any hint about how to progress form this point on ?
Sure we could dig into the Storybook integration point, but as long as the technical blocker isn't solved, it won't be of much use.

(Btw sorry if I'm being a captain obvious in some parts of my message, I'm just expressing what I understood from parsing the code in case it helps someone catching on 😄 )

[shilman]

@costalvaro awesome that you've been able to push this forward!

re: angular and ID's, i don't have a good sense for that and will let an angular user respond

re: the storybook side, i get it and have a couple thoughts on that.

1. in @storybook/vue we do some setup so that every story gets wrapped in a decorator by the framework handling code. so when you call storyFn() you're actually calling a wrapped function that does some of the work for you. refactoring into this pattern might help you get some of the "framework logic" for free in angular. it's a big change though.

https://github.com/storybookjs/storybook/blob/next/app/vue/src/client/preview/index.ts#L116

2. @tmeasday has been looking at exposing some of the framework logic for the purposes of testing React: Add renderStory export #11478. i wonder if the generalization of that work would help this issue. perhaps @tmeasday has thoughts here.

also cc @kroeder and @stupidawesome who might have thoughts on this

[Marklb]

@costalvaro For the first point, I was able to modify the bootstrap process in your demo and make all three render. Instead of using the bootstrap property of the NgModule decorator, I made the component an entryComponent and manually bootstrapped it in ngDoBootstrap(). I don't know if that is a stable way of doing this, but it worked for your demo. Here is my fork of your demo: https://stackblitz.com/edit/angular-to-react-kxbfux

The reason I manually bootstrapped it was to customize the selector, by adding a "hopefully" unique attribute to the element by incrementing a counter each time I create one and using an attribute selector for the bootstrapping. I used an attribute, because I assume that would have the least chance of conflicting.

[alc-1]

@Marklb This is an amazing contribution!
Thank you for showcasing how to manually bootstrap a component with dynamic selector, never had to do that until now. 😄
It works perfectly, so I'm gonna focus on the storybook integration for now, and will get back to improving this part when/if needed.

@shilman Thanks for the insights!
This is a new & unknown ground for me, so it's gonna take some time to dig the code and understand what's going on.
That wrapping logic applied to vue is interesting, gonna try that way for now. 👍

FYI I'm being quite busy these days, so the issue is moving slower than I'd like.
If anyone wanna see that issue go faster, please feel free to give a try!
This is my first open source contribution so I'm not aware of how it works, but I have no issue with anyone else giving a shot.

1. ✅ Technical blocker point: Rendering multiple angular components with the same selector in a react page
2. 🚧 Storybook integration point: Making use of @storybook/angular rendering logic inside @storybook/addon-docs

[manuelmeister]

Has this an impact on #2962 (comment)?
Meaning that we can wrap stories not just with story.template syntax, but with components?

[Marklb]

@manuelmeister It could potentially be for that in docs maybe, but I don't think they are really related. That issue is about decorators, but this is mainly about rendering the stories in the same document. Currently an Angular story is rendered in an iframe, sort of like each story is it's own embeded app. For some stories that is great, but for others it is unnecessary and just causes a docs page to render slow when there are multiple iframes bootstrapping Angular.

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.19 containing PR #13525 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.

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-rc.3 containing PR #14270 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease