[Bug]: Creating stories from Controls fails in Svelte CSF with SyntaxError: Unexpected token, expected "}" #240
Description
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
- Create a svelte-vite sandbox, all stories there should now be in Svelte CSF
- Open Storybook dev
- Edit a control and press save
- 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\@storybook+core@8.4.6\node_modules\@storybook\core\dist\babel\index.cjs:14251:15)
at Wl.raise (.\node_modules\.pnpm\@storybook+core@8.4.6\node_modules\@storybook\core\dist\babel\index.cjs:16508:54)
at Wl.unexpected (.\node_modules\.pnpm\@storybook+core@8.4.6\node_modules\@storybook\core\dist\babel\index.cjs:16525:18)
at Wl.expect (.\node_modules\.pnpm\@storybook+core@8.4.6\node_modules\@storybook\core\dist\babel\index.cjs:16789:27)
at Wl.jsxParseExpressionContainer (.\node_modules\.pnpm\@storybook+core@8.4.6\node_modules\@storybook\core\dist\babel\index.cjs:18853:75)
at Wl.jsxParseElementAt (.\node_modules\.pnpm\@storybook+core@8.4.6\node_modules\@storybook\core\dist\babel\index.cjs:18894:122)
at Wl.jsxParseElement (.\node_modules\.pnpm\@storybook+core@8.4.6\node_modules\@storybook\core\dist\babel\index.cjs:18915:32)
at Wl.parseExprAtom (.\node_modules\.pnpm\@storybook+core@8.4.6\node_modules\@storybook\core\dist\babel\index.cjs:18924:37)
at Wl.parseExprSubscripts (.\node_modules\.pnpm\@storybook+core@8.4.6\node_modules\@storybook\core\dist\babel\index.cjs:21426:78)
at Wl.parseUpdate (.\node_modules\.pnpm\@storybook+core@8.4.6\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
Activity