storybookjs / storybook

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

Missing description in 'Docs' for Svelte components with top-level {#if}s #18846

Open egargan opened 2 years ago

egargan commented 2 years ago

Describe the bug The 'docs' addon isn't displaying Svelte components' descriptions in the 'Docs' tab, when that component includes a top-level {#if ...}.

Note this only happens for component descriptions in HTML comments (the recommended approach for component docs). If the description is in a JSDoc block, the description is displayed correctly in the 'Docs' tab.

To Reproduce Follow the install instructions in this reproduction repo.

System

Environment Info:
  System:
    OS: macOS 11.6.7
    CPU: <removed>
  Binaries:
    Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v17.9.1/bin/yarn
    npm: 7.21.1 - ~/.nvm/versions/node/v16.9.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 102.0.1
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9
    @storybook/addon-essentials: ^6.5.9 => 6.5.9
    @storybook/addon-interactions: ^6.5.9 => 6.5.9
    @storybook/addon-links: ^6.5.9 => 6.5.9
    @storybook/addon-svelte-csf: ^2.0.4 => 2.0.4
    @storybook/svelte: ^6.5.9 => 6.5.9
    @storybook/testing-library: ^0.0.13 => 0.0.13
egargan commented 2 years ago

I've also noticed the same issue applies to components that just contain an empty element, e.g.

<!--
  Horizontal rule component foo bar. This description doesn't appear in 'Docs'! 
  @component
-->

<hr/>