Storybook: @storybook/svelte renders all stories simultaneously?

[gersomvg]

It seems like @storybook/svelte does an initial render of all stories, even the ones that aren't actively shown?

I have a Svelte component that is doing this:

export let showNativeCursor = false;

$: document.body.style.cursor = showNativeCursor ? 'initial' : 'none';

onDestroy(() => {
    document.body.style.cursor = 'initial';
});

and it is causing the cursor to be hidden on all stories..

[BlackFenix2]

@gersomvg the svelte components are rendered inline of a story, when you target document.body that applies to the entire DOM versus just the svelte component.

Ill try to replicate this issue with the svelte storybook example. do you have a repo i could look at as well? it would help me identify a specific bug to fix.

[gersomvg]

@BlackFenix2 Thanks for chiming in! On the docs page that makes sense, but in the default view there is only 1 iframe visible with just 1 story at a time. In that case I would expect the active story to not be influenced by other stories. But if this is by design, I'll try to work around this by setting the default prop values differently in the stories.

[BlackFenix2]

i see what is happening, when you called 'document.body.style.cursor' you were targeting the iFrame with the id "storybook-preview-iframe". This is the only Iframe used in storybook, it looks like your svelte component is having trouble accessing the document object on the destroy lifecycle

can you try using the component? its the svelte way of targeting document.body.

https://svelte.dev/docs#svelte_body

[BlackFenix2]

@gersomvg I looked further into this, I added your code snippet into a svelte component and I cannot replicate this issue. you might have your svelte component on the first story rendered when storybook starts up.

ill close this issue since this doesn't appear to be a storybook/svelte specific bug. You can reach out to us on discord if you need code assistance: https://discord.gg/kkApMQvv.

[gersomvg]

Thanks, I appreciate you taking the time to have a look at this! It's a good thing you can't replicate the issue, because that means the solution is hopefully on my side :)

I didn't have the time to dig in further yesterday, I'll try so later this week and report back here.

[gersomvg]

This error seems only to be triggered if using addon-docs. Otherwise it works 🤷

I'm also running into other issues related to not being able to bind:this or bind:propery on components, when enabling addon-docs.

Could this be due to automatic addon-docs argTypes inference? @BlackFenix2

Is there a way to use addon-docs without the automatic argTypes inference?