Angular source code view unavailable until control toggled

[dexster]

Describe the bug
In the Docs tab the "Show code" option is disabled and shows "No code available". Simply clicking a control enables the ability to Show code

To Reproduce
Steps to reproduce the behavior:

1. Create a new angular cli project
2. npx sb@next init in the project
3. npm run storybook
4. Click on Primary button and click the Docs tab
5. Note the disabled option to view code
6. Click primary toggle switch
7. Note the Show code option is now enabled

Expected behavior
Show code should be immediately available when page loads

Screenshots

Disabled on load

Enabled after clicking primary

System
System:
OS: macOS 11.2.2
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.5/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
Browsers:
Chrome: 89.0.4389.82
Edge: 88.0.705.81
Firefox: 86.0
Safari: 14.0.3
npmPackages:
@storybook/addon-actions: ^6.2.0-beta.12 => 6.2.0-beta.12
@storybook/addon-essentials: ^6.2.0-beta.12 => 6.2.0-beta.12
@storybook/addon-links: ^6.2.0-beta.12 => 6.2.0-beta.12
@storybook/angular: ^6.2.0-beta.12 => 6.2.0-beta.12

┆Issue is synchronized with this Asana task by Unito

[shilman]

@yngvebn is this something you can help with?

[yngvebn]

@yngvebn is this something you can help with?

I can atleast point in the right direction. As far as I remember, this is broken in the "old" Angular rendering-mechanic, but works if you apply prepareForInline in docs. So in preview.ts:

import { prepareForInline } from '@storybook/addon-docs/angular/inline';

// ...

addParameters({
   // ...
  docs: {
      inlineStories: true,
      prepareForInline
  }
});

This should enable the Show Code button immediately, and added benefit is faster rendering of Angular storybooks :)

[dexster]

Yes, inline fixed the issue for me. Thanks

(And made the page size much smaller as i don't have the Angular framework in each iframe)

Leaving this open as I assume it needs to be fixed for iframe scenarios?

[yngvebn]

@ThibaudAV or @shilman might answer if framed stories are going to be deprecated or not...

[shilman]

we might make inline the default in the (near) future.

as for deprecating iframe stories, i don't see that happening. we'll probably need to fix the bugs eventually, but later as part of a major refactor for addon-docs.

[bmayen]

I'm seeing the same issue on 6.2.1 now. Was not seeing this on previous 6.2.0 release candidates, but just updated to 6.2.1 and noticed it.

[shilman]

@bmayen any chance you can bisect to find out which specific version introduced the problem?

[snutij]

If it can help you, i see this problem on version 6.2.0-beta.1.
I have updated storybook to 6.2.1 version on my project to check if this problem was solved, seems not, but the workaround inlineStories: true work fine 👍

[bmayen]

I am using inlineStories but I see the problem even with it enabled on versions >=6.2.0-rc.10. 6.2.0-rc.7 works as expected. Trying rc.8 and rc.9, but they aren't building properly for me with the changes to the prepareForInline config. Don't really have time this morning to debug exactly what's going on there, but hopefully it's helpful to know that rc.7 works but something changed between then and rc.10 that causes "no code available" for stories until a control is toggled.

[pravbeseda]

I have the same problem (angular 11)

1. ng new test-app
2. cd test-app
3. npx -p @storybook/cli sb init
4. npm run storybook

On Docs tab of predefined Stories I see "No code available". The "Show code" button is unlocked after clicking on "Reset controls" or after some switching between Stories.

The problem is reproducible on versions 6.2.1-6.2.8.

And inline mode does not solve the problem.

[dexster]

Yeah, I see inline mode no longer solves this for me anymore.

[dexster]

Maybe it was never working correctly. I have been manually setting the source code using parameters.source.code. Doing this makes the source code view available immediately.

[shilman]

@dexster the difference between your work around and the default behavior for stories that accept args as their input is that the source.code parameter is static, and the default snippets are dynamically rendered with the live value from the controls.

[bmayen]

Looking at diffs between 6.2.0 rc.7 and rc.10. Perhaps a change introduced here is having an effect on this?

[shilman]

cc @ThibaudAV ☝️ 🤔

[ThibaudAV]

@bmayen yes there is a problem in this commit but it is fixed here and this problem is fixed in v6.2.8

I'm not sure if it's related 🤷‍♂️ . I also find that the behavior of the "Show code" is quite random

[shilman]

@ThibaudAV which PR fixed it in 6.2.8? Also can you elaborate on "quite random"?

[bmayen]

I'm setting inlineStories to true in my config, so I don't think this would affect things. On 6.2.0-rc.7, the behavior works reliably/consistently as expected. Something changed at some point between then and 6.2.0-rc.10 that caused the problem described in this issue. Not able to pinpoint exactly which version introduced it because rc.8 and rc.9 don't work for me, so the commit I posted above is just a hunch.

For now, I'm pinned to rc.7 since Show Code is a critical feature for us.

[ThibaudAV]

@shilman this PR : #14447
added in version 6.2.2 no ? :
6.2.2 changelog

@bmayen In 6.2.0-rc.10 this bug stil present unless you have angular/element configured for inline stories
Can you test with the 6.2.2 ? or higher?

you need to remove this import import { prepareForInline } from '@storybook/addon-docs/angular/inline'; it's not nessesary after 6.2.0-rc.10

@shilman "quite random" because I don't seem to understand when it displays and when it doesn't ^^
Actually it doesn't work on my project because of a problem with prettier that I don't understand 😢

[dexster]

Still happening in 6.3.0-alpha.7. If I get some time I will try assist and see if I can find anything in the source

[ThibaudAV]

I don't know if it's related but I have bump babel to "@babel/core": "7.13.15", and it works better for me 🤷‍♂️

[ThibaudAV]

@dexster @shilman another way to reproduce this problem ^^

1. Go : https://next--storybookjs.netlify.app/angular-cli/?path=/docs/addons-actions--component-output-with-event-emitter (storybook angular exemple)
2. See "No code available"
3. Navigate on next story Use action in method
4. See "Show code"
5. Go back to the previous story
6. See "Show code"

why the 1st time the code is unavailable ?

I looked insourceDecorator and the emits are well done. I think the problem comes later 🤔

[dexster]

Hope this helps:

I added a log entry in sourceDecorator.ts for when the sourceDecorator method emits SNIPPET_RENDERED with the source code data.

In 6.2-rc.7 on initial page load it emits SNIPPET_RENDERED first then the events for setting and rendering docs happen. Note the "manager received docsRendered"

In later versions (6.3-alpha5 for this test) on initial page load, you can see in the second screenshot that all the events including "manager received docsRendered" happen before SNIPPET_RENDERED is emitted.

In the last screenshot you can see that after toggling to the canvas tab and back to docs the order is correct. SNIPPET_RENDERED is called first and then docsRendered and other events happen after that

6.2-rc.7

6.3-alpha.5

6.3-alpha.5 after toggling to canvas and then back to docs

[shilman]

@dexster thanks for this detective work. just to confirm a bit:

• this is only about the iframe rendering of stories in angular; inline rendering is working?
• is there a version where iframe rendering has been working properly, given that there are a few different behaviors above?

Thanks! 🙏

[dexster]

inlineStories is true when I tested above with those logs.

When I initially created this issue I was using iframes but I have moved to inline and it still happens

[bmayen]

@shilman I'm seeing this specifically with inline rendering. @dexster also confirmed earlier that he is seeing the problem with inline rendering enabled. 6.2.0-rc.7 is the last version I've found that works as expected.

[bmayen]

Beat me to the comment @dexster :)

[alexan]

show source with inlineStories are also not working for me

[eliserothberg]

Odd behavior - if you run storybook and have Safari as your default browser and it automatically opens on the first load of Storybook only, it WILL show "Show Code" but if you open another browser or browser window or even refresh that same page that had previously worked, it won't show "Show Code" until you toggle or click something else on the page.

[bmayen]

With v6.3 now in beta, could this get a bump in priority? Would love to upgrade and test newer releases, but this is a blocker for us and is keeping us pinned to 6.2.0-rc.7. We have multiple teams, both internal and external contractors, using Storybook daily to reference canonical code samples and we can't tell them all to use this hack every time they view it.

[daan93]

I don't know if it helps, but when I click around after I see "no code available" (navigate, reload docs table, set background) the wrong source gets loaded.

This is with iframe stories, not inline stories.

[daan93]

This is still a problem in storybook 6.3. Currently I reverted to 6.1 and not upgrading until fixed.

[alexan]

this is still a major blocker

[daan93]

After a clean install of latest storybook 6.3, the source code is showing up but not completely. See #15575

[lucas-labs]

I'm experiencing this issue.
Switching to inline-components works, but it causes other issues. For example, we have a component which is a header fixed to the top with css (position:fixed; top:0;...). As you can imagine, since the component is no longer inside an iframe, now it's being rendered fixed to the top of the docs page:

This makes using inline components not an option for us 😞

[dexster]

But that's not an issue with StoryBook. That's your component working as expected 😄

You could wrap that story with a container that meets the requirements to "contain" the header. Personally, I've just let my header stories show the components at the top of the page.

[lucas-labs]

Yes, you're totally right, it's the expected behaviour. But it's a shame it's not showing the code example with iframed components.
Wrapping this component inside a container is a good option tho. Thanks!

[bmayen]

@lucas-labs, are you saying that the bug described in this issue by the OP is only a problem for you with iframes and not with inline? Because we've been seeing it with inline as well. What version are you on?

[lucas-labs]

@bmayen, yes exactly, it's working ok for me with inline components. I'm on v6.3.8

[joshuahunt10]

I upgraded to v6.3.9 and am having the "No code available" bug, but in a slightly different way. On initial load of the docs I see the code. Navigate to another set of stories, come back to the original set of stories, and now I see "No code available". Getting the "Show code" back can be done by loading another story in the set or clicking the reload button on the args table.

I have tried with

export const parameters = {
    docs: {
        inlineStories: true,
        prepareForInline
    },
}

and

export const parameters = {
    docs: {
        inlineStories: true
    },
}

[bmayen]

@joshuahunt10, I upgraded to 6.3.12 and am seeing the same behavior. Also described here #16003.

[shilman]

I believe this has been fixed in 6.4-beta. To upgrade:

npx sb@next upgrade --prerelease

Closing this for now. Please let me know if it needs to be reopened!

[DzmVasileusky]

Seems to appear again at least since 6.4.12+
#18234