[Bug]: Svelte - Decorators not working at all

[gbkwiatt]

Describe the bug

I was trying to apply decorators on my sveltekit storybook. But no matter how I do it it's just not being wrapper at all, either globally or component. I was thinking maybe class is not being picked up by tailwind, but I can't find that div with a class anywhere in the code

To Reproduce

Here is an example of mdx file

import { Meta } from '@storybook/addon-docs';
import Readme from './README.md';
import Decorator from './Decorator.svelte';

<Meta title="Base/Schema/Techincal Docs"  decorators={[() => Decorator]}/>

<Readme/>

and my Decorator.svelte

<div class="bg-red-500">
    <slot />
</div>

or I've tried globally

import Decorator from 'components/base/Decorator.svelte';
export const decorators = [() => {
    // if I add console log here, it's being executed on story load
    return Decorator
}];

### System

Environment Info:

  System:
    OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
  Binaries:
    Node: 18.1.0 - ~/.nvm/versions/node/v18.1.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.1.0/bin/yarn
    npm: 8.8.0 - ~/.nvm/versions/node/v18.1.0/bin/npm
  npmPackages:
    @storybook/addon-actions: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/addon-backgrounds: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/addon-docs: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/addon-essentials: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/addon-highlight: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/addon-interactions: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/addon-links: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/addon-measure: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/addon-outline: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/addon-svelte-csf: ^2.0.9 => 2.0.9 
    @storybook/builder-vite: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/builder-webpack4: next => 6.5.0-rc.1 
    @storybook/client-api: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/client-logger: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/manager-webpack4: next => 6.5.0-rc.1 
    @storybook/svelte: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/svelte-vite: 7.0.0-alpha.41 => 7.0.0-alpha.41 
    @storybook/testing-library: ^0.0.14-next.0 => 0.0.14-next.0 
    @storybook/theming: 7.0.0-alpha.41 => 7.0.0-alpha.41

Additional context

No response

[JReinhold]

You are correct, currently decorators doesn't work with Svelte (at least not in v7). I'm not getting nothing like you are, I'm instead getting 'target' is a required option. Maybe that's because you're using stories.mdx to define the story while I've only tried with CSF3.

I have managed to get decorators working with slots in Svelte locally, but it's not quite done yet. I'll keep you updated.

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.55 containing PR #19987 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[JReinhold]

@gbkwiatt I'd love if you could try with the new alpha version and let us know if it fixed the issue or not.