Addon-docs/Angular: Inline rendering support with angular-elements

[ThibaudAV]

Issue: #8153 #12264 #13480

Another PR : #11339

TODO / Question :

• Check the optional dependencies on angular element works correctly on a project that is not in monorepo.
• Add / correct the doc
• Optimization with change of props (avoids refresh the whole component if props change) (if necessary in another PR)
• Add a more complete example in angular-cli?
• Should we activate inlineStories by default?
• Add tests

What I did

Uses angular element to transform story component into customElements (web-component).
The custom element is then added in React.

Add optional @storybook/angular dependency to @storybook/addon-docs.
Add optional @angular/elements & @webcomponents/custom-elements dependencies in @storybook/angular.
Only one file (ElementRendererService ) uses these dependencies, so if it is not called these depeandace still optional. It seems to me 🤔
:not-sure:

User has to specify these dependencies if he uses prepareForInline

I tried to add them in the addon-docs but it adds more angular dependency. I figure it's better if they're all in @storybook/angular?
What do you think about it?

How it work

Add : yarn add -D @angular/elements @webcomponents/custom-elements
Then update .storybook/preview.js:

import { addParameters } from '@storybook/angular';
import { prepareForInline } from '@storybook/addon-docs/angular/inline';
addParameters({
  docs: {
    inlineStories: true,
    prepareForInline,
  },
});

A special rendering is made by prepareForInline:

• is called for each story
• prepareForInline use ElementRendererService from @storybook/angular
• ElementRendererService use singleton instance of angular platform from RendererService
• ElementRendererService generate custom ElementsModule from storyInput ("main component" is generated in the same way as the "classic render")
• ElementsModule is bootstrap by angular in <div id="root">
• ElementsModule use createCustomElement from @angular/elements to extract the main component (the one of the story) and return them to prepareForInline as customElement
• prepareForInline define in customElements new customElement

Note: as it is not possible to delete defined customElements. An "increment" allows to make each new generation unique.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[shilman]

This is great and will make a lot of people happy. I don't understand enough about the Angular/Web components story to comment on the high-level approach, but I believe @stupidawesome suggested this in a previous conversation with @kroeder and me back when we were discussing Ivy rendering.

@kroeder @stupidawesome @costalvaro @petermikitsh @manuelmeister can you please take a look at this PR and give feedback?

[kroeder]

Nice work so far 🙂

Your plan is to solve the issues with Storybooks docs mode, right?

I tried to add them in the addon-docs but it adds more angular dependency. I figure it's better if they're all in @storybook/angular?
What do you think about it?

@shilman Something you might be able to give feedback to.

[ThibaudAV]

thanks :)

Your plan is to solve the issues with Storybooks docs mode, right?

yes to propose an "inline" alternative to avoid iframe (adapts to the size of the component, changes in line with docs. can change theme with toolbar dynamically, ...)

[shilman]

cc @mandarini

[ThibaudAV]

Try it here https://deploy-preview-13525--storybookjs.netlify.app/

[ThibaudAV]

I'm not sure how to test. :/
if you have ideas, I'm interested :)
I figure it can be done with chromatic when / if this feature is used by default. 🤷‍♂️

[shilman]

Working great! One small change.

[shilman]

All the other angular-cli examples are in Addon/x. I think "addons" is better, but I suggest making the switch in a separate PR and updating all the other examples at the same time.

[ThibaudAV]

aaa you have unmasked me
I would like to rework all stories example. group them, sort them,..., in order to see quickly their goals
I will do it in another PR

[ThibaudAV]

I do a final manual test :
-> New project with storyshots addon and without angular element

And then it will seem good to me

[shilman]

Let me know when you're ready. Super excited about this!!!

[ThibaudAV]

@shilman My test was useful and I had to make a change :

add a specific file so that the whole code branch (with element import) is not used if the user does not use prepareForInline
94230a2#diff-61c1e0294b5dcd012e60f3b1aa8cb382baee5a19876bd82b22394716b90a4e46R1

[shilman]

@ThibaudAV are we good to go now after the tests pass?

[ThibaudAV]

yes it's ok for me

[shilman]

There's an e2e failure but it's related to a different PR that I merged and @phated is following up on that. So I'm merging this since everything else looks great. ❤️

[danielleroux]

@ThibaudAV Hi iam testing the new inline feature in our component library (Angular 10) but iam discovered a strange behavior in my project. I have to compile my library with the ngcc compiler after each build, otherwise i get the following error message:

zone.js:690 Unhandled Promise rejection: Cannot read property 'id' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'id' of undefined at registerNgModuleType (core.umd.js:24829) at core.umd.js:24840 at Array.forEach (<anonymous>) at registerNgModuleType (core.umd.js:24840) at new NgModuleFactory (core.umd.js:24936) at compileNgModuleFactory__POST_R3__ (core.umd.js:28472) at PlatformRef.push../node_modules/@angular/core/bundles/core.umd.js.PlatformRef.bootstrapModule (core.umd.js:28716) at ElementRendererService.<anonymous> (ElementRendererService.js:89) at step (ElementRendererService.js:53) at Object.next (ElementRendererService.js:34) TypeError: Cannot read property 'id' of undefined at registerNgModuleType (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:76527:31) at http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:76538:51 at Array.forEach (<anonymous>) at registerNgModuleType (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:76538:21) at new NgModuleFactory (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:76634:17) at compileNgModuleFactory__POST_R3__ (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:80170:29) at PlatformRef.push../node_modules/@angular/core/bundles/core.umd.js.PlatformRef.bootstrapModule (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:80414:20) at ElementRendererService.<anonymous> (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:140803:26) at step (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:140767:23) at Object.next (http://localhost:6006/vendors~main.331aca382febe703f812.bundle.js:140748:53)

Does this mean storybook need a compiled ivy library to run?