Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
JReinhold opened this issue Dec 4, 2024 · 6 comments · May be fixed by #285
Assignees
Labels
bug Something isn't working

Comments

@JReinhold
Copy link
Collaborator

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
Copy link
Contributor

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 sveltejs/esrap#13 will address that

@NeroBlackstone
Copy link

Same problem.

@xeho91 xeho91 self-assigned this Mar 4, 2025
@xeho91 xeho91 linked a pull request Mar 5, 2025 that will close this issue
@nathancahill
Copy link

This affects the Storybook 7 to 8 migration tool as well.

@xeho91
Copy link
Collaborator

xeho91 commented Mar 6, 2025

@nathancahill Can you please give us more context?

This affects the Storybook 7 to 8 migration tool as well.

In this issue, we're talking about attempting to click "Save", after playing around with controls in the Storybook UI. I can't see a connection with a migration tool.

@nathancahill
Copy link

The underlying transformation error is the same in both. Running the find-implicit-spies migration on Svelte components triggers the same error.

@JReinhold
Copy link
Collaborator Author

@nathancahill it's a pretty common error that can show up in a lot of different places, the two problems are not related.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants