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 Experimental Svelte 5 Support #177

---

Additional goals

1. Simplify the usage - to align closely with regular CSF format
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

Done

• 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

---

Issues

Legend:

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

Related to build

• 🟡 Tests are being included in the build output - see comment: Experimental support for Svelte 5 #181 (comment)

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. 🟡 See comment: Experimental support for Svelte 5 #181 (comment)
2. 🟡 Experimental support for Svelte 5 #181 (comment)

---

New features

1. Improved TypeScript experience - defineMeta({ ... }) - works in TypeScript and with JSDoc
2. First <Story /> can have a prop name omitted - it will be set to Default
3. Added a function setTemplate to allow adding a default {#snippet children()} to all of the <Story> in the stories file.
4. Added type helpers Args<typeof Story> and StoryContext<typeof Story> to get typings while creating Svelte snippets outside the <Story />

---

TODO (to be done in this PR or the next one)

• Update documentation
• Update tests
• Improve error messages
• Revamp prop source in component Story, see: Experimental support for Svelte 5 #181 (comment) and comment: Experimental support for Svelte 5 #181 (comment)

📦 Published PR as canary version: 5.0.0--canary.181.2e3e102.0

✨ Test out this PR locally via:

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