Svelte CSF issue with Save from Controls

[jonniebigodes]

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:

Svelte_Save_from_Controls_issue.mp4

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]

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