CSF3: Default render functions for Svelte

[shilman]

Broken out of #15498 for discussion @benbender

[shilman]

why do we have two packages for svelte (@storybook/svelte & @storybook/addon-svelte-csf) and what are the plans on those?

Svelte CSF is a "svelte-native" way to write stories. It compiles to CSF under the hood, but it's not actually CSF. Much like addon-docs supports writing stories in MDX, but MDX is not CSF either.

We released Svelte CSF as an addon for a couple reasons:

1. It is experimental, so I didn't want to bake it into core
2. It is opt-out, meaning that if it doesn't get updated to include new CSF features, users can still use those features by simply opting out and writing in CSF instead.

We've already made it the default that ships with new Storybook for Svelte projects, which means that it's a pretty aggressive experiment! In order to move it into the core I would want:

• A maintainer or group of maintainers to step up and commit to maintaining it and @storybook/svelte moving forward
• Some indication from the community that the Svelte CSF is by far the preferred way to write Svelte stories

I could get the general csf3-support in a working state quite easily but struggled on the render-part for individual stories. It seemed like I would need to use addon-svelte-csf on that. As the relation between those and reasoning for this division is quite unclear to me, I wanted to clearify before investing additional work.

I'm guessing this would be a few lines of code to get working in CSF. I'm not sure what would be required in Svelte CSF since I'm not familiar with the codebase. We're doing a massive refactor of the core in #15871 which will have some minor changes to how this will work. Once that's merged (in the next week?) I can create a small POC PR for you to kick the tires on, and then maybe you can figure out what else needs to be done to make it complete.

Let me know what you think!

[benbender]

Let me know what you think!

Sounds good to me!

For csf3 in core:

I don't see any bigger problems with supporting csf3 in core for svelte - even with play-functions (given the existing infrastructure f.e. sveltejest). As said, the only thing I'm unsure about are the custom inline render-functions simply because of the fact that svelte in general has a file-based, instead of a function-based, approach to components. Therefor it is unclear to me how this is intended to work in core - other then just returning imported components from the render-functions (which seems to be a bit pointless...). If there is some approach I'm not aware of I'm happy to hear about it or have a look at a POC.

Besides those points I think csf3-support for svelte is a good first target to improve on and gather some experience for me in sb-land :) And I would like to benefit from existing and upcoming features (f.e. play-functions) of sb with csf3 while working on svelte projects :)

PS: My first (unfinished) experiments are here: https://github.com/benbender/storybook/commits/svelte/csf3

[shilman]

closing this as fixed at some point in v6.x