Experimental support for Svelte 5

[xeho91]

Caution

This is still a work in progress 🚧.
Breaking changes may occur at any time, so do not use it for other purposes than experimenting yet.

Credits

• @tsar-boomba and his PR Inconsistent call of onrender sveltejs/svelte#177

---

Additional goals

1. Simplify the usage - align closer to regular CSF format, without extras
2. Take advantage of the Svelte 5 features
3. Improve examples demonstration

Resources

• Demonstrations in the official demo: https://github.com/storybookjs/svelte-csf-demo
• Discussion on official Storybook [RFC] Official support for Svelte CSF storybook#27092

Tip

Call for contribution on the demo (by add missing or improving examples) to help us find potential issues. Some of them we can fix the next major version 🙏.

---

Breaking changes

• Dropped support for webpack - See discussion [RFC] Official support for Svelte CSF storybook#27092
• Removed <Meta /> component
• Removed <Template /> component in favor of Svelte snippets
• <Story /> components no longer has a prop autodocs, use tags={['autodocs']} instead
• <Story /> components no longer has a prop source, we've revamped the behaviour
• Removed codebase with support for Storybook < v7.4

---

New features

1. Improved TypeScript experience - defineMeta({ ... }) - works in TypeScript and with JSDoc
2. Added a function setTemplate to allow adding a default {#snippet children()} to all of the <Story> in the stories file.
3. Added type helpers Args<typeof Story> and StoryContext<typeof Story> to get typings while creating Svelte v5 snippets outside the <Story />

TODO

• Refactor of indexer.ts - it uses Svelte AST from svelte.compile to extract the data required for indexer
• Refactor of parser:
  • move from estree-walker to zimmerframe,
  • use modernAst option in the svelte.compile
  • fix issues with parsing description from comment,
  • remove codebase related to <Meta> and <Template> component
• Improve naming
• Improve type-safety on the entire codebase
• Migrate <Story> to use Svelte 5 features
• Migrate addon's components context to use Svelte 5 runes instead of writable()
• Update examples in stories/
• Remove unused dependencies
• Update tests
• Improve error messages
  • compiler
  • parser
    • analyse
    • extract
  • runtime
• Revamp prop source in component Story, see: Experimental support for Svelte 5 #181 (comment) and comment: Experimental support for Svelte 5 #181 (comment)
• Update documentation:
  • Error messages in the ./ERRORS.md (below are the error categories):
    • PARSER_EXTRACT_SVELTE
    • PARSER_EXTRACT_COMPILED
    • PARSER_ANALYSE_DEFINE_META
    • PARSER_ANALYSE_STORY
  • Provide better examples in ./examples/ directory
  • Provide MIGRATION.md guide
  • Update README.md
  • CHANGELOG.md with migration guide, new prerequisites and breaking changes
  • Finish RFC

---

Issues

Legend:

• 🔴 - serious - blocks usage at runtime
• 🟡 - minor - doesn't block usage at runtime, nor releasing an experimental version to collect feedback

Related to tests

1. 🟡 Tests emit error that the components should use render from svelte/render instead of mount - I'm not sure how to deal with this one yet. Perhaps using environment variable TEST?
2. 🟡 Related to above. It seems we can't use setContext during the tests - we used' the render instead of mount, it will break while running vitest, AFAIK.
3. 🟡 I can't find a way to inject other Vite plugin's transformation (from @storybook/vite-builder & @storybook/svelte-vite). Based the compiled output, I want to test the snippets which analyse/extract AST nodes from the compiled output. To see if creating appendix to the compiled output works as expected.

Related to runtime

1. Actions tab doesn't work, I couldn't figure out whether is related to the breaking change that on:* should be replaced with on* (removed colon)
2. Typings for args used in {#snippet children(args)} - no idea yet how to crack this one
3. Setting the layout in export meta parameters is broken
4. Importing the zimmerframe fails due to vite not being able to get exports correctly - current workaround to continue developing: manual override import to default in ./node_modules/zimmerframe/package.json.
5. 🔴 Inserting HTML comments as description & <Story> doesn't work in the development mode - see: Experimental support for Svelte 5 #181 (comment)

Related to TypeScript

1. 🟡 Stories with required children snippet, and not being explicitly set. See comment: Experimental support for Svelte 5 #181 (comment)
2. 🟡 Experimental support for Svelte 5 #181 (comment)

---

📦 Published PR as canary version: 5.0.0--canary.181.26b0f68.0

✨ Test out this PR locally via:

npm install @storybook/addon-svelte-csf@5.0.0--canary.181.26b0f68.0
# or 
yarn add @storybook/addon-svelte-csf@5.0.0--canary.181.26b0f68.0

Version

Published prerelease version: v5.0.0-next.0

Changelog

💥 Breaking Change

• Experimental support for Svelte 5 #181 (@tsar-boomba @xeho91 @JReinhold @benoitf)

🐛 Bug Fix

• chore: use dist folder to load the files #185 (@benoitf)

Authors: 4

• Florent BENOIT (@benoitf)
• Isaiah Gamble (@tsar-boomba)
• Jeppe Reinhold (@JReinhold)
• Mateusz Kadlubowski (@xeho91)

[axel7083]

@axel7083 looks like you upgraded all your Storybook dependencies but storybook. They need to be in sync. npx storybook@latest doctor can maybe help you.

Oh sorry I took for granted the depandabot branch, thanks for helping! Now this is going back to

=> Failed to build the preview
[vite-plugin-svelte] [plugin vite-plugin-svelte] ../node_modules/@storybook/addon-svelte-csf/dist/runtime/Story.svelte (12:24): C:/Users/axels/Documents/github/redhat/podman-desktop/node_modules/@storybook/addon-svelte-csf/dist/runtime/Story.svelte:12:24 `p` has already been declared

Tried with 5.0.0--canary.181.82ac172.0 but same result

[shilman]

🚀 PR was released in v5.0.0-next.0 🚀

[tsar-boomba]

Happy to see this get an official release! Glad I could help getting this kickstarted 😁 👍