search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.21k stars 9.26k forks source link

[Vue] Source panel doesn't include render function-based component #14454

Open paulgv opened 3 years ago

paulgv commented 3 years ago

Describe the bug

One of our components is written in a .vue file but leverages a render function instead of a <template> section to render its markup: GlSprintf.

We wrote a few stories for this component. For instance, here's what the SentenceWithLink story looks like:

Screen Shot 2021-04-02 at 9 24 03 AM

Note how this story also uses the GlLink component. Interestingly, the generated source code for this story – and all other GlSprintf stories – does not include GlSprintf itself, but it does however include GlLink:

Screen Shot 2021-04-02 at 9 28 07 AM

Here's the relevant page in our hosted Storybook: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/utilities-sprintf--sentence-with-link

To Reproduce Steps to reproduce the behavior:

  1. Pull https://gitlab.com/gitlab-org/gitlab-ui.git.
  2. Run yarn && yarn start.
  3. Navigate to GlSprintf stories.
  4. Expand any story's source code panel in the Docs tab.

Expected behavior

The source code includes all components used in the story.

System

Environment Info:

  System:
    [REDACTED]
  Binaries:
    Node: 12.18.4 - ~/.asdf/installs/nodejs/12.18.4/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.6 - ~/.asdf/installs/nodejs/12.18.4/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 87.0
    Safari: 13.1.3
  npmPackages:
    @storybook/addon-a11y: 6.2.2 => 6.2.2
    @storybook/addon-docs: 6.2.2 => 6.2.2
    @storybook/addon-essentials: 6.2.2 => 6.2.2
    @storybook/addon-knobs: 6.2.2 => 6.2.2
    @storybook/addon-storyshots: 6.2.2 => 6.2.2
    @storybook/addon-storyshots-puppeteer: 6.2.2 => 6.2.2
    @storybook/addon-viewport: 6.2.2 => 6.2.2
    @storybook/theming: 6.2.2 => 6.2.2
    @storybook/vue: 6.2.2 => 6.2.2
alexan commented 2 years ago

is there any update? Have you found a solution to render the source correctly?

ndelangen commented 1 year ago

This has been addressed recently in 7.0 beta.

Would you mind trying it, and report if it meets your needs?

paulgv commented 1 year ago

@ndelangen this is still happening in Storybook 7.0.7: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/utilities-sprintf--docs

Here's the story file: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/df415b9dfc204e41a9d0941a2bd3aedafe542b79/src/components/utilities/sprintf/sprintf.stories.js