Storybook: Svelte component doesn't displayed

[PritulaRoman]

Describe the bug
Using Centered addon in Svelte stories leads to an empty screen. No component displayed.

To Reproduce
_devDependencies_

}
  "svelte": "^3.12.1",
  "@storybook/svelte": "^5.2.1",
  "@storybook/addon-centered": "^5.2.3"
}

You can see the issue on the Live Examples Svelte page

Screenshots

[jerriclynsjohn]

I'm facing the exact same issue too.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[aromanarguello]

Hi, is there anyone working on this? I Would like to see if I can contribute? It would be my first contribution to Open source.

[shilman]

@aromanarguello AFAIK nobody's working on this, and we'd love your help. please hop on our discord if you need any help getting started! https://discord.gg/UUt2PJb

[alexdilley]

This is presumably because Svelte storybooks don't currently support using templates in a story, and this addon wraps the original component via a slot.

[aromanarguello]

@alexdilley Hey! I was trying to investigate this and that is what I found as well, that the problem is that the component data is not being slotted into the wrapper. I'm not an expert as svelte, do you have any alternative ideas to fix this?

[alexdilley]

I guess either wait for support to be added to Storybook or perhaps style the root element (ofc this is global to all stories though):

#root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

There's theming support but it doesn't seem to extend to adding arbitrary styles to the main frame.

[tonai]

I also face the same issue and here my investigations:

The centered addon decorator is set up using the Wrapper option here

Then this Wrapper option is converted to a Svelte component here

And the problem is that it uses a slots option to pass down the story component that will be wrapped by the centered decorator. This option is not documented anywhere in the Svelte docs

This option seems to exist in svelte 2 but was removed in Svelte 3.
There is an issue about this problem on the Svelte repo and there is also a PR created on May the 5th 2019.
This has still not been merged but in the original issue someone proposed a workaround that seems to work.

Maybe we should make use of that workaround.

I Will try to make a PR

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.5 containing PR #9724 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.11 containing PR #9724 that references this issue. Upgrade today to try it out!