Skip to content

Releases: storybookjs/addon-svelte-csf

v5.0.7

14 Jul 07:40
@storybook-bot storybook-bot
v5.0.7
34afbe3
Compare
Choose a tag to compare
v5.0.7 Latest
Latest

🐛 Bug Fix

Authors: 1

Assets 2
Loading

v5.0.6

04 Jul 06:09
@storybook-bot storybook-bot
v5.0.6
d105dbd
Compare
Choose a tag to compare
v5.0.6

🐛 Bug Fix

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

Authors: 1

Loading

v5.0.5

03 Jul 12:57
@storybook-bot storybook-bot
v5.0.5
4053be4
Compare
Choose a tag to compare
v5.0.5

🐛 Bug Fix

Authors: 1

Loading

v5.0.4

24 Jun 13:39
@storybook-bot storybook-bot
v5.0.4
00a80db
Compare
Choose a tag to compare
v5.0.4

🐛 Bug Fix

Authors: 1

Loading

v5.0.3

28 May 13:39
@storybook-bot storybook-bot
v5.0.3
a475611
Compare
Choose a tag to compare
v5.0.3

🐛 Bug Fix

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

Authors: 1

Loading

v5.0.2

28 May 13:26
@storybook-bot storybook-bot
v5.0.2
c97820f
Compare
Choose a tag to compare
v5.0.2

🐛 Bug Fix

Authors: 2

Loading

v5.0.1

18 May 11:15
@storybook-bot storybook-bot
v5.0.1
b5c9e39
Compare
Choose a tag to compare
v5.0.1

🐛 Bug Fix

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

Authors: 1

Loading

v5.0.0

06 May 19:48
@storybook-bot storybook-bot
v5.0.0
7f3d46b
Compare
Choose a tag to compare
v5.0.0

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
  • 📚 Improved documentation and examples

Please checkout our Migration Guide to upgrade from earlier versions of the Svelte CSF addon. You can use the 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

🚀 Enhancement

🐛 Bug Fix

🏠 Internal

📝 Documentation

🧪 Tests

Authors: 12

Read more
Loading

v5.0.0-next.30

06 May 19:17
@storybook-bot storybook-bot
v5.0.0-next.30
0e01dcf
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.0.0-next.30 Pre-release
Pre-release

🐛 Bug Fix

🏠 Internal

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

📝 Documentation

Authors: 2

Loading

v5.0.0-next.29

29 Apr 13:49
@storybook-bot storybook-bot
v5.0.0-next.29
03f4f29
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.0.0-next.29 Pre-release
Pre-release

Release Notes

Breaking: Add support for render in defineMeta, replacing setTemplate-function (#295)

setTemplate-function removed in favor of render in defineMeta

The setTemplate-function has been removed. Instead reference your default snippet with the render-property in defineMeta:

<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. 🎉

Important

There is currently a bug in the Svelte language tools, which causes TypeScript to error with TS(2448): Block-scoped variable 'SNIPPET_NAMAE' used before its declaration.. Until that is fixed, you have to silent it with //@ts-ignore or //@ts-expect-error. See sveltejs/language-tools#2653

Breaking: Rename children prop to template, require asChild for static stories (#228)

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

children renamed to template

The children-prop and children-snippet on Story has been renamed to template, to align better with Svelte's API and not be confused with Svelte's default children-snippet. If you have any stories using the children 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 a Story, and they would be the full story. To make it easier to pass children to your components in stories, the children are now instead forwarded to the component instead of replacing it completely.

Previously:

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';

  import MyComponent from './MyComponent.svelte';

  const { Story } = defineMeta({
    component: MyComponent,
  });
</script>

<!--
This story renders:

This would be the full story, ignoring the MyComponent in the meta
-->
<Story name="Static Story">
  This would be the full story, ignoring the MyComponent in the meta
</Story>

Now:

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';

  import MyComponent from './MyComponent.svelte';

  const { Story } = defineMeta({
    component: MyComponent,
  });
</script>

<!--
This story renders:

<MyComponent>
  This is now forwarded to the component
</MyComponent>
-->
<Story name="MyComponent children">
  This is now forwarded to the component
</Story>

To get the same behavior as previously, a new asChild boolean prop has been introduced on the Story component. asChild is a common prop in UI libraries, where you want the children to be 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:

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';

  import MyComponent from './MyComponent.svelte';

  const { Story } = defineMeta({
    component: MyComponent,
  });
</script>

<!--
This story renders:

This is the full story, ignoring the MyComponent in the meta
-->
<Story name="Static Story" asChild>
  This is the full story, ignoring the MyComponent in the meta
</Story>

💥 Breaking Change

  • Breaking: Add support for render in defineMeta, replacing setTemplate-function #295 (@JReinhold)
  • Breaking: Rename children prop to template, require asChild for static stories #228 (@xeho91 @JReinhold)

🚀 Enhancement

🐛 Bug Fix

🏠 Internal

📝 Documentation

Authors: 3

Loading