Skip to content

chore(deps): update dependency @storybook/addon-svelte-csf to v5.0.3 #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore(deps): update dependency @storybook/addon-svelte-csf to v5.0.3 #197

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented May 8, 2025 •
edited
Loading

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@storybook/addon-svelte-csf =5.0.0-next.28 -> =5.0.3 age adoption passing confidence

Release Notes

storybookjs/addon-svelte-csf (@​storybook/addon-svelte-csf)

v5.0.3

Compare Source

🐛 Bug Fix
Authors: 1

v5.0.2

Compare Source

🐛 Bug Fix
Authors: 2

v5.0.1

Compare Source

🐛 Bug Fix
Authors: 1

v5.0.0

Compare Source

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 '@&#8203;storybook/addon-svelte-csf';
+ import { defineMeta } from '@&#8203;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 //@&#8203;ts-ignore or //@&#8203;ts-expect-error. See https://github.com/sveltejs/language-tools/issues/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 '@&#8203;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 '@&#8203;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 '@&#8203;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>
Require Storybook 8.2.0 and above, support Storybook 9.0.0 prereleases (#​284)

The addon now requires Storybook 8.2.0 and upwards (was previously 8.0.0), and has a peer dependency on the storybook-package. That package should always be in your project anyway though.

💥 Breaking Change
🚀 Enhancement
🐛 Bug Fix
🏠 Internal
📝 Documentation
🧪 Tests
Authors: 12

v5.0.0-next.30

Compare Source

🐛 Bug Fix
🏠 Internal
📝 Documentation
Authors: 2

v5.0.0-next.29

Compare Source

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 '@&#8203;storybook/addon-svelte-csf';
+ import { defineMeta } from '@&#8203;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 //@&#8203;ts-ignore or //@&#8203;ts-expect-error. See https://github.com/sveltejs/language-tools/issues/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 '@&#8203;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 '@&#8203;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 '@&#8203;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
🚀 Enhancement
🐛 Bug Fix
🏠 Internal
📝 Documentation
Authors: 3

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@renovate renovate bot added the dependencies Relates to dependencies label May 8, 2025
@renovate renovate bot requested review from lishaduck and ParkerH27 as code owners May 8, 2025 14:07
@renovate renovate bot added the dependencies Relates to dependencies label May 8, 2025
@renovate renovate bot force-pushed the renovate/storybook-addon-svelte-csf-5.x branch from f51517c to ada9314 Compare May 8, 2025 15:05
@socket-security Socket Security
Copy link

socket-security bot commented May 8, 2025 •
edited
Loading

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security		 Vulnerability Quality Maintenance License
Updated@​storybook/​addon-svelte-csf@​5.0.0-next.28 ⏵ 5.0.399 +1100100 +1100100

View full report

@renovate renovate bot force-pushed the renovate/storybook-addon-svelte-csf-5.x branch from ada9314 to a123482 Compare May 18, 2025 23:33
@renovate renovate bot changed the title chore(deps): update dependency @storybook/addon-svelte-csf to v5.0.0 chore(deps): update dependency @storybook/addon-svelte-csf to v5.0.1 May 18, 2025
@renovate renovate bot force-pushed the renovate/storybook-addon-svelte-csf-5.x branch from a123482 to bca97c0 Compare May 31, 2025 11:49
@renovate renovate bot changed the title chore(deps): update dependency @storybook/addon-svelte-csf to v5.0.1 chore(deps): update dependency @storybook/addon-svelte-csf to v5.0.3 May 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lishaduck lishaduck Awaiting requested review from lishaduck lishaduck is a code owner

@ParkerH27 ParkerH27 Awaiting requested review from ParkerH27 ParkerH27 is a code owner

Assignees

@lishaduck lishaduck

@ParkerH27 ParkerH27

Labels
dependencies Relates to dependencies
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@lishaduck @ParkerH27