Support Svelte 5

[JReinhold]

#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:

Tasks

Beta Give feedback

1. Migrations notes for dropping support for on:X events
2. Decide if we want to remove Svelte 4 support or not
3. Update example stories+components to match Svelte 5
4. Update internal Svelte components to use Svelte 5 syntax (if dropping support for Svelte 4)
5. Update code snippets in docs to use Svelte 5 syntax (nice-to-have)
6. Optional: Use CSF Native syntax (plugin) and adjust docs
7. Drop Svelte 3 support

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.

[JReinhold]

It's still too early in Svelte 5's development cycle for us to do anything meaningful with it beyond what we've already done. It's still unclear if Svelte 5 will release before Storybook 8, and if not we of course can't drop support for Svelte 4 in Storybook 8.

We should put this issue on ice until Svelte 5 is further along, and revisit when we have a clearer picture of features and the timeline.

[vanessayuenn]

@valentinpalkovic @yannbf @JReinhold let's scope this out of the breaking changes project for now.

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[bhvngt]

@JReinhold, Just checking if is there any plan to support v5 for the final version of storybook v8. v5 has gone through around 64 revisions.

Appreciate your thoughts here. It will help me decide when to get onto the v5 bandwagon.

[vanessayuenn]

@bhvngt given that Storybook 8 is almost ready to release an RC, it's very unlikely that Storybook 8 will have full support for Svelte 5.

[RobinKnipe]

It looks like there were attempts to introduce svelte5 support as part of the v8 work, I can see various references in the codebase but sadly still can't get it working locally.

Error: `createRoot` has been removed. Use `mount` or `hydrate` instead.

@vanessayuenn if we shouldn't expect "full support", does that mean there will be some support? If so, is there any guide or docs that describe how to achieve a working setup? Ideally, the storybook builder would take the existing (working) vite config and use that directly.

[JReinhold]

@RobinKnipe version 8.0.0-rc.2 just released an hour ago should add support for Svelte version 5.0.0-next.65 via #26188 - most likely also later versions but nothing is guaranteed since Svelte is still in prerelease mode and anything can break with any release.

Let me know if it doesn't work for you.

[bhvngt]

Thanks @JReinhold for adding the support. I tried to use this with @storybook/addon-svelte-csf support. I am using 4.1.2.next-0 which from its release notes should be supporting storybook 8. Though, this may not yet have the support for svelte-5.

I am getting following error

Unable to index ./src/stories/Button.stories.svelte:
  TypeError: Cannot read properties of undefined (reading 'instance')

Here's the link to the reproduction of this error.

[RobinKnipe]

@JReinhold great news! Always awesome to hear oh that thing you wanted, it was "just released an hour ago"! 🚀
Early indications suggest it's working like a charm too! I've been using component-party.dev as inspiration to check; the readiness of Svelte5, support of important related tools necessary for prod use, and my own n00b understanding... the project is here in case it's useful for others.

[axel7083]

We should put this issue on ice until Svelte 5 is further along, and revisit when we have a clearer picture of features and the timeline.

@JReinhold @RobinKnipe Svelte Team release their first Svelte 5 release candidate, do you think you might include the support of it in your roadmap?

[JReinhold]

... do you think you might include the support of it in your roadmap?
@axel7083

This issue is rather misleading and outdated.
As of Storybook 8.0, it should support Svelte 5 out of the box, except for:

1. supporting "on:X" event handlers as stated above
2. automatically inferring argtypes. This is slightly out of our hands, see [Feature Request] Support ArgTypes inference from TS prop types in Svelte #28232 (comment)

As for the Svelte CSF addon, we're hard at work with adding support for Svelte 5 in storybookjs/addon-svelte-csf#181.

As for docs, we have a separate RFC outlining the plan at #27092

That leaves us with updating the example components and stories that are generated when initialising a new Storybook. I don't think that is so important that we need a tracking issue like this. We might even wait with updating those until we drop support for Svelte 4.

If you experience any issues with Svelte 5 and Storybook, feel free to open bug reports.

Closing as outdated.

[jhechtf]

Hello, I'm trying to use storybook with Svelte 5, I've looked but cannot find any info on what changes I need to make in order to get Svelte 5 to work with Storybook 8, but according to the last comment it should work? Any link to guidance would be appreciated.

[JReinhold]

@jhechtf if Storybook doesn't work with your Svelte 5 project, please open an issue with a minimal reproduction, showing off the problems you're experiencing in a minimal project. See https://storybook.js.org/docs/contribute/how-to-reproduce