Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jattasNI opened this issue Apr 3, 2023 · 0 comments

Comments

@jattasNI
Copy link

jattasNI commented Apr 3, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Empathy Backlog
Development

No branches or pull requests

4 participants