storybook: Angular source code view unavailable until control toggled
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:
- Create a new angular cli project
npx sb@next initin the projectnpm run storybook- Click on Primary button and click the Docs tab
- Note the disabled option to view code
- Click primary toggle switch
- 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® Core™ 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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 5
- Comments: 43 (23 by maintainers)
Commits related to this issue
- ⬆️ Bump storybook to 6.4 beta Needed due to the following issue in storybook with 'show code' snippet: https://github.com/storybookjs/storybook/issues/14193 — committed to kirbydesign/designsystem by RasmusKjeldgaard 3 years ago
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.
I have the same problem (angular 11)
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.
Seems to appear again at least since 6.4.12+ https://github.com/storybookjs/storybook/issues/18234
This is still a problem in storybook 6.3. Currently I reverted to 6.1 and not upgrading until fixed.
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.
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
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
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.
Beat me to the comment @dexster 😃
@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.
Yeah, I see inline mode no longer solves this for me anymore.
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?