is there documentation for decorator support

[sacrosanctic]

it says decorators are supported but i cant find any example code, either for individual stories or globally

https://storybook.js.org/docs/svelte/get-started/whats-a-story
https://github.com/storybookjs/addon-svelte-csf#readme

[sacrosanctic]

i found this which does mention it but the story decorator and global decorator does not work

[JReinhold]

@sacrosanctic can you give an example of a use case for this, given that you can define nested components in Template and Story?

Is it so that you can define some outer components that all stories are wrapped in, without having to copy them for each <Story/> definition?

I don't think defining decorators within the same file is supported in this addon yet.

[j3rem1e]

Decorator are handled by Storybook, not this addon. "It shoud work" because Storybook is rendering our stories as child of the global/story decorator

[j3rem1e]

I can't reproduce any issue with decorators. The official doc seem to be working fine.

The syntax here is not special:

<Meta component={Button} decorators={[() => MarginDecorator]}/>

and with the new meta export, it's exactly like in the official storybook documentation:

<script context="module">
  import Button from './Button.svelte';

  export const meta = {
    component: Button,
    decorators: [() => MarginDecorator]
  }
</script>

Feel free to reopen this issue if you need more details.

[svallory]

Documentation regarding how to properly implement decorators would be really appreciated. My decorator works, but I get a typescript type error.

Value of type 'typeof DualTheme__SvelteComponent_' has no properties in common with type 'SvelteStoryResult<any, any>'. Did you mean to call it?

Also, how would I pass parameters/props to it from the .storybook/preview.ts file? Right now I'm handling parameters outside of my decorator:

preview.ts

decorators: [
  (story, { parameters }) =>
    parameters.dualTheme !== false ? (DualTheme as any) : story(),
],

[xeho91]

Aight, I'll reopen for investigation.

[JReinhold]

Also, how would I pass parameters/props to it from the .storybook/preview.ts file? Right now I'm handling parameters outside of my decorator:

preview.ts

decorators: [
  (story, { parameters }) =>
    parameters.dualTheme !== false ? (DualTheme as any) : story(),
],

I don't fully understand this question, can you elaborate with a use case? @svallory

[svallory]

@JReinhold I could have explained it a little better 😅

In the example below, I'm checking for the boolean parameter dualTheme in the preview.ts configuration file, to decide if I should use the decorator or not.

decorators: [
  (story, { parameters }) =>
    parameters.dualTheme !== false ? (DualTheme as any) : story(),
],

That's fine for this scenario, but what if I wanted something more complex?

Since I'm returning the default export of the Svelte component as is, I have no idea how I can pass the entire parameters object as a prop to my component.