🐛 Bug Fix

• Update peer deps for vite@7#324 (@timc13)

Authors: 1

• Tim Chen (@timc13)

🐛 Bug Fix

• Fix raw code not being injected with Svelte v5.35.1+#321 (@JReinhold)

Authors: 1

• Jeppe Reinhold (@JReinhold)

🐛 Bug Fix

• Fix readingrawCode from undefined__svelteCsf#319 (@JReinhold)

Authors: 1

• Jeppe Reinhold (@JReinhold)

🐛 Bug Fix

• Add'play-fn'-tag to stories with play-functions#317 (@JReinhold)

Authors: 1

• Jeppe Reinhold (@JReinhold)

🐛 Bug Fix

• Drop support for 9.0.0 prereleases, add support for 9.1.0 prereleases#312 (@JReinhold)

Authors: 1

• Jeppe Reinhold (@JReinhold)

🐛 Bug Fix

• fix: Prevent exported runtime stories from colliding with story names#310 (@xeho91@JReinhold)

Authors: 2

• Jeppe Reinhold (@JReinhold)
• Mateusz Kadlubowski (@xeho91)

🐛 Bug Fix

• fix: Allow user-defined local variablemeta in stories#309 (@xeho91)

Authors: 1

• Mateusz Kadlubowski (@xeho91)

5.0.0

Svelte CSF 5.0 is here

It brings support for Svelte 5, and major improvements to the Svelte CSF syntax, including

• ✂️ Snippet-based API for stories
• 🔬 Smaller bundle size
• 🛟 Type-safe stories and meta definitions
• 📚 Improveddocumentation andexamples

Please checkout ourMigration Guide to upgrade from earlier versions of the Svelte CSF addon. You can usethe Legacy API flag to gradually migrate your stories to the new syntax. The biggest breaking change is that it now requires Svelte 5.

💥 Breaking Change

• Breaking: Add support forrender indefineMeta, replacingsetTemplate-function#295 (@JReinhold)
• Breaking: Renamechildren prop totemplate, requireasChild for static stories#228 (@xeho91@JReinhold)
• Require Storybook 8.2.0 and above, support Storybook 9.0.0 prereleases#284 (@ndelangen)
• Fix missing@storybook/docs-tools dependency#190 (@JReinhold)
• Experimental support for Svelte 5#181 (@tsar-boomba@xeho91@JReinhold@benoitf)

🚀 Enhancement

• Add'svelte-csf' tag to all Svelte CSF stories#297 (@JReinhold)
• Dependencies: Support canaries and Storybook 9 prereleases#281 (@ndelangen)
• Restore & add support for legacy syntax#186 (@xeho91@JReinhold)

🐛 Bug Fix

• Fix types#302 (@JReinhold@xeho91)
• Cleanup button example#299 (@JReinhold)
• Fix Storychildren not overridingargs.children#298 (@JReinhold)
• Fix not working withgetAbsolutePath#296 (@JReinhold)
• Fix tags Story-level tags not having an effect in Vitest integration#266 (@xeho91@JReinhold)
• fix: Temporarily disable save from UI feature#285 (@xeho91)
• Revert "upgrade to sb9 alpha"#283 (@ndelangen)
• upgrade to sb9 alpha#282 (@ndelangen)
• Internal: Add Visual Tests addon#269 (@JReinhold)
• Fix legacy API template hook not running before Svelte in Vitest#264 (@JReinhold)
• Fix badly formatted ESM that was breaking Node 22 and 23#260 (@JReinhold)
• fix: properly transform invalid identifiers#246 (@paoloricciuti)
• Pre-optimize internal modules#248 (@JReinhold)
• refactor: Stop using @storybook/client-logger#247 (@JReinhold)
• refactor(transform)!:meta no longer destructurable fromdefineMeta() call#244 (@xeho91@JReinhold)
• fix: Support for legacysource prop when value isTemplateLiteral#245 (@xeho91)
• Simplify imports#243 (@JReinhold)
• fix: Prevent parser indexer not letting other addon errors to throw#242 (@xeho91)
• chore: Remove Vite pluginpost enforcement#241 (@xeho91)
• Support@sveltejs/vite-plugin-svelte v5#237 (@JReinhold)
• Support Vite 6#236 (@yannbf)
• fix: Resolve existing type issues#219 (@xeho91)
• Upgrade version ranges - drop support for Svelte 5 prereleases#225 (@xeho91)
• fix:parameters attribute from legacy<Story> being removed#224 (@xeho91)
• Fix errors atenhanceRollupError in Vite#222 (@JReinhold)
• refactor: Replace deprecatedcontext="module" withmodule#217 (@xeho91)
• fix(pre-transform): Move stories target component import declaration from instance to module tag#218 (@xeho91)
• v5: Fix tags being ignored#206 (@JReinhold)
• fix(parser): Resolveautodocs tag issue and extractingrawCode#201 (@xeho91)
• Replace lodash usage with es-toolkit#192 (@JReinhold)
• chore: use dist folder to load the files#185 (@benoitf)

🏠 Internal

• Resolve merge conflicts betweenmain andnext#305 (@xeho91@JReinhold@ndelangen@storybook-bot@valentinpalkovic@bichikim@rChaoz@yannbf)
• chore(deps): Remove unusedsvelte-preprocess#300 (@xeho91)
• ci(ESLint): Migrate to flat config & reconfigure#291 (@xeho91@JReinhold)
• Add formatting check to CI#293 (@JReinhold)
• Add@storybook/experimental-addon-test to repo (internal)#263 (@JReinhold)
• refactor: Improve AST-related types readability & fix existing issues#209 (@xeho91)

📝 Documentation

• Remove workarounds for Svelte TS snippet bug#303 (@JReinhold)
• FixasChild link in ERRORS.md#292 (@JReinhold)

🧪 Tests

• chore: Upgradevitest andvite dependencies &jsdom ->happy-dom#230 (@xeho91@JReinhold)

Authors: 12

• Bichi Kim (@bichikim)
• Florent BENOIT (@benoitf)
• Isaiah Gamble (@tsar-boomba)
• Jeppe Reinhold (@JReinhold)
• Matei Trandafir (@rChaoz)
• Mateusz Kadlubowski (@xeho91)
• Norbert de Langen (@ndelangen)
• Paolo Ricciuti (@paoloricciuti)
• Steve Lee (@SteveALee)
• Storybook Bot ([@storybook-bot](https://github.com/storyb...

🐛 Bug Fix

• Fix types#302 (@JReinhold@xeho91)

🏠 Internal

• chore(deps): Remove unusedsvelte-preprocess#300 (@xeho91)

📝 Documentation

• Remove workarounds for Svelte TS snippet bug#303 (@JReinhold)

Authors: 2

• Jeppe Reinhold (@JReinhold)
• Mateusz Kadlubowski (@xeho91)

Release Notes

Breaking: Add support forrender indefineMeta, replacingsetTemplate-function (#295)

setTemplate-function removed in favor ofrender indefineMeta

ThesetTemplate-function has been removed. Instead reference your default snippet with therender-property indefineMeta:

<script module>- import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';+ import { defineMeta } from '@storybook/addon-svelte-csf';  import MyComponent from './MyComponent.svelte';  const { Story } = defineMeta({    /* ... */+   render: template  });</script>-<script>-  setTemplate(template);-</script>{#snippet template(args)}  <MyComponent {...args}>    ...  </MyComponent>{/snippet}<Story name="With Default Template" />

This new API achieves the same thing, but in a less verbose way, and is closer aligned with Storybook's regular CSF. 🎉

Breaking: Renamechildren prop totemplate, requireasChild for static stories (#228)

This release contains breaking changes related to thechildren-API. The legacy API stays as-is to maintain backwards compatibility.

children renamed totemplate

Thechildren-prop andchildren-snippet onStory has been renamed totemplate, to align better with Svelte's API and not be confused with Svelte's defaultchildren-snippet. If you have any stories using thechildren prop or snippet, you need to migrate them:

{#snippet template()}  ...{/snippet}-<Story name="MyStory" children={template} />+<Story name="MyStory" template={template} /><Story name="MyStory">-  {#snippet children(args)}+  {#snippet template(args)}    <MyComponent />  {/snippet}</Story>

Story children are now forwarded to components

Previously, to define static stories, you would just add children to aStory, and they would be the full story. To make it easier to passchildren to your components in stories, the children are now instead forwarded to the component instead of replacing it completely.

Previously:

<scriptmodule>import {defineMeta }from'@storybook/addon-svelte-csf';importMyComponentfrom'./MyComponent.svelte';const {Story }=defineMeta({    component: MyComponent,  });</script><!--This story renders:This would be the full story, ignoring the MyComponent in the meta--><Storyname="Static Story">  This would be the full story, ignoring the MyComponent in the meta</Story>

Now:

<scriptmodule>import {defineMeta }from'@storybook/addon-svelte-csf';importMyComponentfrom'./MyComponent.svelte';const {Story }=defineMeta({    component: MyComponent,  });</script><!--This story renders:<MyComponent>  This is now forwarded to the component</MyComponent>--><Storyname="MyComponent children">  This is now forwarded to the component</Story>

To get the same behavior as previously, a newasChild boolean prop has been introduced on theStory component.asChild is a common prop in UI libraries, where you want thechildren tobe the output, instead of just being children of the Component. By adding that you can get the old behavior back, when you need more control over what the story renders:

<scriptmodule>import {defineMeta }from'@storybook/addon-svelte-csf';importMyComponentfrom'./MyComponent.svelte';const {Story }=defineMeta({    component: MyComponent,  });</script><!--This story renders:This is the full story, ignoring the MyComponent in the meta--><Storyname="Static Story"asChild>  This is the full story, ignoring the MyComponent in the meta</Story>

💥 Breaking Change

• Breaking: Add support forrender indefineMeta, replacingsetTemplate-function#295 (@JReinhold)
• Breaking: Renamechildren prop totemplate, requireasChild for static stories#228 (@xeho91@JReinhold)

🚀 Enhancement

• Add'svelte-csf' tag to all Svelte CSF stories#297 (@JReinhold)

🐛 Bug Fix

• Cleanup button example#299 (@JReinhold)
• Fix Storychildren not overridingargs.children#298 (@JReinhold)
• Fix not working withgetAbsolutePath#296 (@JReinhold)
• Fix tags Story-level tags not having an effect in Vitest integration#266 (@xeho91@JReinhold)

🏠 Internal

• ci(ESLint): Migrate to flat config & reconfigure#291 (@xeho91@JReinhold)
• Add formatting check to CI#293 (@JReinhold)

📝 Documentation

• FixasChild link in ERRORS.md#292 (@JReinhold)

Authors: 3

• Jeppe Reinhold (@JReinhold)
• Mateusz Kadlubowski (@xeho91)
• Steve Lee (@SteveALee)