Svelte: Drop Support for Svelte < 5

[valentinpalkovic]

Closes #

What I did

• Dropped Svelte < 5 support (adjusted package.json version ranges)
• Changed stories to use new reactivity model of Svelte 5
• Removed deprecated API's and use Svelte 5 API's instead where possible
• Removed sveltedoc-parser
• Removed svelte-webpack preset
• Added an autoblocker to prevent @storybook/svelte-webpack5 users to upgrade

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	79.9 MB	79.9 MB	0 B	1.34	0%
initSize	79.9 MB	79.9 MB	0 B	1.34	0%
diffSize	97 B	97 B	0 B	-	0%
buildSize	7.45 MB	7.45 MB	-19 B	1.1	0%
buildSbAddonsSize	1.9 MB	1.9 MB	-12 B	0.78	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.88 MB	1.88 MB	-3 B	-0.73	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.97 MB	3.97 MB	-15 B	-0.73	0%
buildPreviewSize	3.47 MB	3.47 MB	-4 B	1.11	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7.9s	7.3s	-644ms	-1.01	-8.8%
generateTime	19.4s	19.3s	-85ms	-0.23	-0.4%
initTime	4.8s	5.1s	312ms	1.38	🔺6.1%
buildTime	9.5s	8.7s	-774ms	-0.52	-8.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.9s	4.5s	-330ms	-0.95	-7.2%
devManagerResponsive	4.7s	4.3s	-338ms	-1	-7.7%
devManagerHeaderVisible	799ms	712ms	-87ms	-0.49	-12.2%
devManagerIndexVisible	809ms	728ms	-81ms	-0.62	-11.1%
devStoryVisibleUncached	2.5s	1.4s	-1s -117ms	-1.45	🔰-77.5%
devStoryVisible	1.2s	1s	-124ms	0.38	-11.5%
devAutodocsVisible	1.1s	991ms	-131ms	0.44	-13.2%
devMDXVisible	986ms	1s	28ms	0.43	2.8%
buildManagerHeaderVisible	782ms	1s	261ms	1.9	🔺25%
buildManagerIndexVisible	791ms	1s	267ms	1.8	🔺25.2%
buildStoryVisible	764ms	1s	265ms	1.92	🔺25.8%
buildAutodocsVisible	740ms	1s	345ms	2.74	🔺31.8%
buildMDXVisible	719ms	831ms	112ms	1.63	🔺13.5%

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 78dfeca.

Command	Status	Duration	Result
nx affected -t check -c production --parallel=7	✅ Succeeded	<1s	View ↗
nx run-many -t build -c production --parallel=3	✅ Succeeded	3s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-03 17:42:32 UTC

[github-actions]

	Fails
🚫	PR is marked with "BREAKING CHANGE" label.

Generated by 🚫 dangerJS against ff7616e

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: 78dfeca, ran on 3 March 2025 at 17:48:44 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/svelte-vite

	Before	After	Difference
Dependency count	131	131	0
Self size	23 KB	23 KB	🎉 -10 B 🎉
Dependency size	36.55 MB	36.53 MB	🎉 -26 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/sveltekit

	Before	After	Difference
Dependency count	139	139	0
Self size	48 KB	48 KB	🎉 -10 B 🎉
Dependency size	39.86 MB	39.84 MB	🎉 -26 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/svelte

	Before	After	Difference
Dependency count	103	103	0
Self size	95 KB	70 KB	🎉 -26 KB 🎉
Dependency size	10.63 MB	10.63 MB	🎉 -10 B 🎉
Bundle Size Analyzer	Link	Link

[JReinhold]

Great job!

We also need to:

1. Update sandboxes. Currently svelte-kit/skeleton-js and svelte-kit/skeleton-ts uses Svelte 4 and are disabled. I think we can remove svelte-kit/skeleton-js and svelte-kit/prerelease-ts, and just update svelte-kit/skeleton-ts, do you agree? (we already cover both JS and TS in the svelte-vite sandboxes) I can do that, the template needs to use the new sv CLI.
2. Remove the usage of the sveltedoc-parser package from both svelte-vite and svelte, as we have a better way for docgen for Svelte 5.

[JReinhold]

let's convert these to the $props() rune too

[valentinpalkovic]

Can you please try it? I had a long fourth and back with transforming SlotDecorator and other files to runes, and for some reason, components weren't rendered anymore. Therefore, I've reverted the change.