change docs to render stories out of context #14911

ndelangen · 2021-05-13T14:47:49Z

Issue: #13145 #13277 #10817 #8601 #12726 #14447 #14333 #13074

What I did

I've overhauled the way we render stories inline.

I've removed the need for prepareForInline:
When docs encounters a story it needs to render inline, it creates div element with a unique id on it.
Then it emits an event triggering the framework's renderer to render a story unto the targetted div.

How to test

I'm likely missing some features, this is a POC / draft after all!

does args and controls still work
viewports
toolbar addons
HMR
switching back and forth between canvas & docs
does it work when docsOnly
performance

Known issues:

I'm not destroying / unmounting inline stories anymore.
I do not know how bad this is, I assume memory leaks
Preact seems to have issues with actions addon, might be pre-existing
Vue2 doesn't re-render stories in docs-mode when controls / args changes
Angular doesn't work at all

fire an async event to render into placeholder removes need for prepareForInline and brings inline rendering of docs to all frameworks

nx-cloud · 2021-05-13T14:49:12Z

Nx Cloud Report

CI ran the following commands for commit cdf70bd. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	`nx run-many --target=prepare --all --parallel --max-parallel=15`

Sent with 💌 from NxCloud.

github-actions · 2021-05-13T14:49:26Z

	Fails
🚫	Please choose only one of these labels: ["BREAKING CHANGE","maintenance"]
🚫	PR is marked with "BREAKING CHANGE" label.

Generated by 🚫 dangerJS against cdf70bd

ndelangen · 2021-05-13T14:49:43Z

This does require a change in all framework's renderers. so the ones we just extracted out (@shilman) might need a patch, if we decide that's worth it.

shilman · 2021-05-13T15:09:15Z

🤯 this is awesome @ndelangen 🤯

used a pretty hacky way to remove the loading indicator in lit

… it when the story is about to get rendered into it This is much better then trying to replace-render in every framework.

ndelangen · 2021-05-14T14:14:17Z

@tooppaaa @gaetanmaisse @ThibaudAV
Are you able to assist with making the required changes to angular's code in render?

ThibaudAV · 2021-05-22T22:28:04Z

When there is a navigation between two stroy of the same "stories" on the docs page all stories is loaded twice. I think it's a bug. You can see it with the logs. Do you think it is related to these changes?

ThibaudAV · 2021-05-24T18:10:08Z

lib/core-client/src/preview/StoryRenderer.tsx

+        const storyFn = () => unboundStoryFn(storyContext);
+
+        if (targetDOMNode.querySelector('[data-is-loadering-indicator="true"')) {
+          targetDOMNode.querySelector('[data-is-loadering-indicator="true"').remove();


for angular it forces the full rendering every time. 🤔
which differs from the canvas rendering which is optimized when only the args change

ndelangen · 2021-06-17T13:57:02Z

@ThibaudAV What can we do with this PR versus this PR: #15002 and what has recently been happening on next?

ThibaudAV · 2021-06-17T14:02:15Z

if this is still intended to be taken for the next version. once rebase I would do the same for the one with angular (which will be greatly reduced ^^) and I would test it still works properly
what do you think?

ndelangen · 2021-06-17T14:08:27Z

When we have a solution that works across the board we can assess if this is truly a breaking change or not. If it is, it's a 7.0 feature.

We're not targeting 6.3. rather 6.4 or 7.0.
I'm not sure there will be a 6.4.

shilman · 2021-06-17T14:12:59Z

There will be a 6.4

ThibaudAV · 2021-06-17T14:13:58Z

as you like ;) I'm pretty confident that it will work for angular with this PR

amartinez62 · 2021-07-12T13:17:57Z

Double check for feature flags if they aren't there then we need to add them and it should be off by default. Double check this works with Angular.

shilman · 2021-07-12T13:42:24Z

I genericized feature flagging here: #15375

…'s `renderToDOM` Replaces #14911

agrohs · 2021-11-03T06:18:48Z

What is the latest on this PR?

ndelangen · 2021-11-22T10:19:37Z

I'm pretty sure this got merged via another PR somewhere in @tmeasday's work, can we close this @shilman ?

shilman · 2021-11-22T10:40:24Z

Thanks @ndelangen, closing this!

ndelangen added 3 commits May 13, 2021 15:03

working draft version

4805b56

render stories out of context in docs mode

0c61d62

fire an async event to render into placeholder removes need for prepareForInline and brings inline rendering of docs to all frameworks

add support for new out-of-context rendering to all frameworks

ec05cb5

ndelangen requested review from shilman and gaetanmaisse May 13, 2021 14:47

ndelangen assigned ndelangen and shilman May 13, 2021

ndelangen added this to the 7.0 milestone May 13, 2021

ndelangen added addon: docs BREAKING CHANGE maintenance User-facing maintenance tasks labels May 13, 2021

ndelangen added 8 commits May 14, 2021 12:29

FIX vue3

5b59497

fix lit

e432d10

used a pretty hacky way to remove the loading indicator in lit

cleanup render in react

2c2b25d

remove scrollbar in toolbar in docs (should extract into separate PR)

c63460d

fix lockfile for litexample

3ed43fc

ADD a selectable identifier on the loading indicator so we can remove…

1ed43aa

… it when the story is about to get rendered into it This is much better then trying to replace-render in every framework.

attempt to fix svelte, but failed

600bcee

fix vue2 rendering, but controls do not yet work correctly in docs

c62fd4a

ndelangen added 4 commits May 14, 2021 16:16

make the renderMain function the same name in all frameworks

00f41ce

fix linting

ceff503

FIX linting & ts

3b79695

fix linting

79e222f

ThibaudAV mentioned this pull request May 22, 2021

Angular/out of context docs rendering stories #15002

Closed

ThibaudAV mentioned this pull request May 24, 2021

Addon-docs: Support Angular Ivy rendering of multiple stories on a page #15017

Closed

2 tasks

ThibaudAV reviewed May 24, 2021

View reviewed changes

shilman mentioned this pull request May 27, 2021

Add different viewMode for iframed stories on Docs Tab #13444

Open

shilman mentioned this pull request Jun 8, 2021

Spurious warnings on Docs tab #13074

Open

shilman added 2 commits June 25, 2021 17:59

Merge branch 'next' into tech/out-of-context-docs-rendering-stories

e0ac328

Add a feature flag for modern inline rendering

cdf70bd

shilman mentioned this pull request Jul 7, 2021

Addon-docs: Support CSF3 play function #15511

Open

2 tasks

shilman modified the milestones: 7.0, 6.4 PRs Jul 22, 2021

tmeasday added a commit that referenced this pull request Aug 6, 2021

Add a modernInlineRender that renders the story using the framework…

f8f3dba

…'s `renderToDOM` Replaces #14911

shilman closed this Nov 22, 2021

MichaelAllenWarner mentioned this pull request Nov 22, 2021

Addon-docs: Inline rendering support for loaders #12726

Open

stof deleted the tech/out-of-context-docs-rendering-stories branch May 25, 2022 09:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

change docs to render stories out of context #14911

change docs to render stories out of context #14911

ndelangen commented May 13, 2021 •

edited by shilman

Loading

nx-cloud bot commented May 13, 2021 •

edited

Loading

github-actions bot commented May 13, 2021 •

edited

Loading

ndelangen commented May 13, 2021

shilman commented May 13, 2021

ndelangen commented May 14, 2021

ThibaudAV commented May 22, 2021

ThibaudAV May 24, 2021

ndelangen commented Jun 17, 2021

ThibaudAV commented Jun 17, 2021

ndelangen commented Jun 17, 2021

shilman commented Jun 17, 2021

ThibaudAV commented Jun 17, 2021

amartinez62 commented Jul 12, 2021

shilman commented Jul 12, 2021

agrohs commented Nov 3, 2021

ndelangen commented Nov 22, 2021

shilman commented Nov 22, 2021

change docs to render stories out of context #14911

change docs to render stories out of context #14911

Conversation

ndelangen commented May 13, 2021 • edited by shilman Loading

What I did

How to test

nx-cloud bot commented May 13, 2021 • edited Loading

Nx Cloud Report

github-actions bot commented May 13, 2021 • edited Loading

ndelangen commented May 13, 2021

shilman commented May 13, 2021

ndelangen commented May 14, 2021

ThibaudAV commented May 22, 2021

ThibaudAV May 24, 2021

Choose a reason for hiding this comment

ndelangen commented Jun 17, 2021

ThibaudAV commented Jun 17, 2021

ndelangen commented Jun 17, 2021

shilman commented Jun 17, 2021

ThibaudAV commented Jun 17, 2021

amartinez62 commented Jul 12, 2021

shilman commented Jul 12, 2021

agrohs commented Nov 3, 2021

ndelangen commented Nov 22, 2021

shilman commented Nov 22, 2021

ndelangen commented May 13, 2021 •

edited by shilman

Loading

nx-cloud bot commented May 13, 2021 •

edited

Loading

github-actions bot commented May 13, 2021 •

edited

Loading