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.67k stars 9.32k forks source link

Svelte CSF issue with Save from Controls #29460

Open jonniebigodes opened 2 weeks ago

jonniebigodes commented 2 weeks ago

Describe the bug

When a user tries to use the Save from Controls feature in a Svelte project with template syntax, it throws a cryptic error message without any helpful information to the user when he attempts to use any of the workflow controls (e.g., Update Story, Save new Story). This issue is reproducible in the latest Storybook version and also in the latest pre-release version.

Below is a recording of the issue:

https://github.com/user-attachments/assets/49cf4879-8fca-4b32-8f72-309d5da61363

As an aside, the documentation will be updated to reflect this limitation. However, it would be ideal to turn off the feature for Svelte projects until it is fully supported to avoid confusion or provide a more informative error message to the user when the feature is not supported in the current context.

cc @JReinhold

Reproduction link

https://stackblitz.com/edit/github-vbubyc?file=src%2Fstories%2FButton.stories.svelte

Reproduction steps

  1. Create a new Svelte project
  2. Add Storybook to the project
  3. Open a Svelte native template syntax story file (e.g., Button.stories.svelte)
  4. Try to use any part of the feature (e.g., Update Story, Save new Story)

System

Storybook Environment Info:

  System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M3
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm <----- active
    pnpm: 9.12.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.70
    Edge: 130.0.2849.56
    Safari: 18.0.1
  npmPackages:
    @storybook/addon-essentials: ^8.3.6 => 8.3.6
    @storybook/addon-interactions: ^8.3.6 => 8.3.6
    @storybook/addon-links: ^8.3.6 => 8.3.6
    @storybook/addon-svelte-csf: ^5.0.0-next.8 => 5.0.0-next.8
    @storybook/blocks: ^8.3.6 => 8.3.6
    @storybook/svelte: ^8.3.6 => 8.3.6
    @storybook/sveltekit: ^8.3.6 => 8.3.6
    @storybook/test: ^8.3.6 => 8.3.6
    storybook: ^8.3.6 => 8.3.6

Additional context

No response

JReinhold commented 2 weeks ago

Ideally we should detect Svelte CSF files (*.stories.svelte) and not show the Save from Controls bar at all. If that's not possible, then at least show a better error.

FYI In Svelte CSF 5, every story has an object at parameters.__svelteCSF that can be used to detect if it's svelte CSF or not:

https://github.com/storybookjs/addon-svelte-csf/blob/b74aee011588635bd24fd1d69a0386eb2f979b88/src/compiler/post-transform/story/insert-svelte-csf.ts#L63