#24889 added initial support for the current Svelte 5 prereleases (next.17 at the time of writing).

Svelte 5 is not out in stable yet and things might still change until then. This issue is an attempt at keeping track of those changes. Unfortunately I don't think we can close this issue completely until Svelte 5 has gone GA.

Here are some known tasks we know we need to get done:

Drop support for on:X handlers

The current Svelte 3+4 renderer supports attaching events handlers to custom component events (eg. <Button on:click={callback} />) by setting args.on.click. This is very lightly (or not at all) documented, however it is activated automatically by our argTypes inferencer.

Svelte 5 deprecates this type of "traditional" event handler but still supports it. However you can't attach handlers to a dynamic component instance anymore in Svelte 5, so we can't actually attach these handlers. That's why we can't support this anymore in Svelte 5.

The only migration possible here is for users to migrate to the new event handlers which are just regular props and set a callback directly on the arg, similar to how you would do it for a React story today.

In practice we've had to skip the addon-actions test in Svelte 5 because the action is not automatically attached as an event handler.

Drop support for Svelte 4

There are arguments for and against dropping support for Svelte 4. I'm strongly leaning towards dropping support and @shilman is initially on board with that, but I can be persuaded otherwise.

Why we should drop it

1. Migrating a Svelte 4 application to a Svelte 5 one should be fairly easy for most users given that Svelte 5 largely maintains support for Svelte 4 syntax. It is mostly the JS-api of Svelte that are breaking (which we use heavily), which I would only expect to be used in edge cases by users.
2. Given the limitation of event handlers as described above and the fact that Svelte 5 is a completely new syntax, we should change our example components and stories to match this new syntax. Attempting to support both Svelte 4 and 5 would mean that we'd need to maintain examples with both the old and the new syntax and generate them based on version detection. We already do this with Next.js versions today but it's not trivial
3. ... the same point applies to all the code snippets in our docs.
4. While supporting Svelte 4 and 5 is (currently) trivial in our renderer, we have no idea if the same is true for supporting Svelte 4+5+6 in the future, should Svelte 6 be released before Storybook 9.
5. Tools and maintainers in the Vite ecosystem are in general in favor of dropping support for older versions early, to move the community forward and spend less time maintaining backwards compatibility. My feeling is that this community is more eager to upgrade than the React, Babel and Webpack community.

Why we should keep supporting it

1. Dropping support for Svelte 4 would block some users from upgrading to Storybook 8 if they don't want to spend the effort required to also upgrade to Svelte 5.
2. If we kept support for Svelte 4, users would not be required to change all their event handlers as per the section above

Update example stories+components

We should update all example components and stories to use the new Svelte 5 syntax. Especially because this is the only way to attach event handlers in Svelte 5.