storybookjs/storybook

[Bug]: Storybook 7 "No code available" when component template uses FAST ref directive

Open

#21,893 opened on Apr 3, 2023

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
block: sourcebugcompatibility with other toolshelp wantedhtmlsev:S3

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

Describe the bug

The "Show code" button on several of my stories' autodocs pages changed to say "No code available" after upgrading Storybook from 6.5 to 7.0. This happened on stories that use the FAST Element ref directive to refer to parts of their template.

I tried debugging my source transform function and found that it was only called with an empty string as the source input in the stories that stopped working.

To Reproduce

This is reproducing in the Storybook for the ni/nimble repository in docs pages like dialog (source) and tooltip (source).

To build this repository, clone the main branch then run npm install then npm run build. Then npm run storybook -w @ni/nimble-components will launch the storybook.

I can try to provide a smaller reproduction if that would be helpful. I could also try debugging the code that populates the "Show code" pane if you can share instructions for where to look and how to debug the code with source maps.

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Firefox: 111.0.1
    Safari: 16.3

Additional context

FAST is a framework for defining custom elements, similar to others like LitElement. It offers a templating syntax which we are using to construct the HTML that we pass to Storybook. That syntax includes directives like ref to identify DOM nodes in the template so they can be referenced from elsewhere. That directive runs during the connectedCallback() to populate a property on the custom element which refers to that DOM element. I'm not sure what about this might trigger this bug.

Contributor guide