v5.0.0-next.29

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

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

🐛 Bug Fix

• Cleanup button example #299 (@JReinhold)
• Fix Story children not overriding args.children #298 (@JReinhold)
• Fix not working with getAbsolutePath #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

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

Authors: 3

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