[Bug]: Creating stories from Controls fails in Svelte CSF with SyntaxError: Unexpected token, expected "}"

[JReinhold]

Describe the bug

When viewing a story written in Svelte CSF, editing controls and pressing "Save", the UI shows did not save, unknown error, and the terminal shows an error.

This is because the editing logic of controls doesn't support Svelte CSF, only regular CSF, which is a completely different format, language even.

Steps to reproduce the behavior

1. Create a svelte-vite sandbox, all stories there should now be in Svelte CSF
2. Open Storybook dev
3. Edit a control and press save
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots and/or logs

Error in terminal:

Error writing to .\src\stories\Button.stories.svelte:
SyntaxError: Unexpected token, expected "}" (8:9)
    at constructor (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:14251:15)
    at Wl.raise (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:16508:54)
    at Wl.unexpected (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:16525:18)
    at Wl.expect (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:16789:27)
    at Wl.jsxParseExpressionContainer (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:18853:75)
    at Wl.jsxParseElementAt (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:18894:122)       
    at Wl.jsxParseElement (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:18915:32)
    at Wl.parseExprAtom (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:18924:37)
    at Wl.parseExprSubscripts (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:21426:78)      
    at Wl.parseUpdate (.\node_modules\.pnpm\@[email protected]\node_modules\@storybook\core\dist\babel\index.cjs:21416:45)

Additional context

At the moment it's not feasible to implement Svelte CSF support in Create from Controls. The feature works by modifying the AST, and given it's a completely different AST, the logic would have to be completely different. It might even be impossible at the current stage, given the only tool that allows you to print a Svelte AST to source is svelte-ast-print which lacks features such as TypeScript support.

We should instead disable the feature from the addon. That is done by setting a specific parameter, and the addon can set that parameter for all stories it touches, so it wouldn't affect stories written in regular CSF:

https://storybook.js.org/docs/essentials/controls#disablesavefromui

Originally reported at sveltejs/cli#339

[benmccann]

the only tool that allows you to print a Svelte AST to source is svelte-ast-print which lacks features such as TypeScript support.

hopefully Rich-Harris/esrap#13 will address that