CSF3: Update story types

[shilman]

In older versions of Component Story Format, named exports were functions. Starting in CSF 3.0, named exports can also be objects with render functions. We need to update the typescript types accordingly.

• React
• Vue
• Vue3
• Angular
• Web components
• Svelte
• Ember

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.16 containing PR #15558 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.

[yannbf]

Hey @shilman I checked frameworks which got the proper typings from the list you set.

Regarding Svelte, I don't think there are any types so far, even before CSF3.. we have to add them. I also am wondering if anything has to be done in @storybook/addon-svelte-csf to support CSF3.

About Ember, I think type-wise is the same situation as Svelte.

[benbender]

@yannbf Just played a little bit around and found #15498. So to answer the question: As the renderer for svelte is missing, storybook has no clue what to do with the exported svelte-component and it, sadly, wont work atm...

[shilman]

@benbender temp workaround: provide your own render function in your stories. better workaround: PR a sensible default for svelte! 🙏

[benbender]

@shilman sorry that sounded a bit reproachful. Wasn't meant to! Just wanted to answer the question and - as already said - I appreciate the work you and the other maintainers are doing to bring the ecosystem a step forward!

I'll try the approach with the custom render-function and report back! For the PR: I would love to if I had the time and/or knowledge to do so. But sadly I'm quite new to storybook and svelte and so I'm lacking both :/

[shilman]

@benbender not at all, no worries. having a default render function is brand new in CSF3, so the "custom" render function should just look like every other story that's been written up until now.