Global decorators do not seem to be working for SvelteKit

[BeeMargarida]

Describe the bug
The logic documented in the Decorators docs for SvelteKit - https://storybook.js.org/docs/svelte/writing-stories/decorators#global-decorators - does not seem to be working.

To Reproduce
I made a repo with a reproduction - https://github.com/BeeMargarida/svelte-storybook-template.
Steps:

• npm install
• npm run storybook

I made the global decorator something like

<script>
    console.log("here");
</script>

<div style="height: 1000px; width: 1000px; background-color: red;">
    GLOBAL HEADER
    <slot />
</div>

and in preview.js I added the line export const decorators = [() => Decorator];. But the script tag is not run and the GLOBAL HEADER does not appear. I checked and the decorators arrow function is executed.

System

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.16.0 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - /opt/homebrew/opt/node@16/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: 102.0.1
    Safari: 15.5

[BeeMargarida]

As a workaround, the solution I found was defining the decorator in preview.js as:

import Decorator from './Decorator.svelte';

export const decorators = [() => ({ Component: Decorator })];

and with some props

export const decorators = [(_, story) => ({ Component: Decorator, props: { context: story.globals } })];

[doolijb]

Still an issue.
Running Svelte with Vite

npx @roxi/routify@next create .
npx storybook init

Decorators will render but the children (story component) does not.
@BeeMargarida 's solution did not work for me

[IanVS]

Can anyone confirm whether this is still a problem in the latest 7.0 betas?

[BeeMargarida]

Can anyone confirm whether this is still a problem in the latest 7.0 betas?

I was trying to test this in my template project, but after updating to SvelteKit 1.0 it started giving out this error - storybookjs/builder-vite#532.

I later tried out with storybook v7.0.0-beta.16 and addon-svelte-csf@v3.0.0-next.3 and I can't run the command start-storybook (says command not found). Am I missing something? My package.json using 7.0 beta

[IanVS]

@BeeMargarida there has been a change to the binary used to run storybook. You can use npx sb@next automigrate to update it automatically, or read the MIGRATION.md doc for details to do it manually.

[BeeMargarida]

@IanVS Thank you, that was it! It's working now with the decorator setup mentioned in the documentation.
As a note, it only worked with storyStoreV7set to true, but it's showing the warning below in the console (but everything is working fine).

Cannot process .svelte file with storyStoreV7: src/lib/Button/Button.stories.svelte

[IanVS]

We got rid of that warning a while back. Are you sure that you're using the latest beta version of @storybook/builder-vite? It should be at the same version as the rest of your @storybook packages.

[BeeMargarida]

I actually didn't even have it as a dependency, just had this in main.js:

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-svelte-csf"
  ],
  framework: "@storybook/sveltekit",
  features: {
    storyStoreV7: true
  },
  docs: {
    autodocs: false
  }
};

I added it just to test (with the same versions as the other storybook packages) and the warning remains. Here's the link to the current setup I have

[IanVS]

Can you share the output of npx sb@next info? And possibly also npm ls @storybook/builder-vite

Nevermind, I found the warning. I'll update it, but for now you can safely ignore it, it has no impact.

PR to remove the warning: #20442

Thanks for the heads-up.

[BeeMargarida]

Thank you! 🙌

[benmccann]

Closing this since #20442 was merged