Custom Storybook for SvelteKit?

[janosh]

Describe the problem

There's 2-year-old Sapper issue sveltejs/sapper-template#120 in which @Rich-Harris mentioned the possibility of developing an in-house alternative to the dependency-heavy Storybook.

Describe the proposed solution

Now that Sapper was replaced by SvelteKit, I'd be curious to hear if there's a new outlook on that?

Alternatives considered

Storybook is nice but requires some modifications to work with "type": "module" packages and comes with a huge list of dependencies.

Importance

would make my life easier

Additional Information

No response

[kevmodrome]

There's a project called Svench by @rixo that you should check out: https://svench-docs.vercel.app/ - probably not worth spending time making yet another Storybook alternative when one already exists :)

[janosh]

Looks cool. Kit support is still WIP (rixo/svench#29) and the readme says Svench is in PoC stage, but I agree, if this project develops as far as say, MDSveX, there's no point in creating another one.

[7antra]

It seems that Storybook make great efforts to implement Svelte without config https://storybook.js.org/blog/storybook-for-svelte/

[janosh]

@7antra Yeah, I tried that but just setting it up took a minute and made the fans on my machine turn wild. Since coming to Svelte, I've been trying to avoid these sorts of heavy dependencies.

[benmccann]

I think that svelte-kit package (https://kit.svelte.dev/docs#packaging) is supposed to fulfill some of these needs. I saw Rich mentioned Storybook in the original issue for it: #518

[janosh]

@benmccann svelte-kit package is great for publishing packages. But from my understanding, Storybook also has some auto-documentation and testing features which svelte-kit package lacks and isn't intended to receive. Correct me if I'm wrong here.

[benmccann]

We don't have a recommended testing setup for SvelteKit yet, but would like to do that. I'd hope that it could get close to the StoryBook setup as well

[janosh]

I've never used Storybook (or svelte-kit package for that matter), but it looks to me like StoryBook DocsPage would be quite easy to replicate for svelte-kit package and is probably basically supported today.

I wasn't aware that svelte-kit package has anything along the lines of automatic documentation? Could you elaborate?

[benmccann]

Nevermind. I just took a closer look at what StoryBook Docs provides and it's not really something SvelteKit does today. It would be cool to have though 😄

[Tymek]

Maybe this can this be done with a vite plugin? Something like virtual modules - injecting a page with components?

[bluwy]

Re-implementing Storybook is not fun, I had spent a fair amount of time in the past trying to do so. There's a reason why Storybook is bulky today, e.g. component iframe isolation (leading to CSF spec), document-iframe inter-communication, plugins, and it's an app itself.

With that said, there's also https://github.com/vitebook/vitebook, but from a brief look into its internals, it doesn't (and probably won't?) implement Storybook's component iframe isolation feature. But seems fairly robust to try out otherwise.

[Tymek]

Vitebook looks promising. It's great to see new solutions in this space. I'll definitely try it out.

True component isolation in iframe was very valuable when we didn't have easy and robust style isolation. I personally crave for simple configuration, like directory regex, that will allow me to show components with knobs within existing app layout. Documentation utility over sandbox features.

Edit: I just noticed that there already exists svelte2tsx parser that extracts component props. Maybe this can be utilized to generate docs/controls.

Edit2: I'll collect relevant attempts and links here

• ViteBook
• svelte2tsx
  • (feat) rewrite svelte2tsx language-tools#1237
• alexxnb/svelte-docs
  • Typescript support? AlexxNB/svelte-docs#34
• alexprey/sveltedoc-parser
  • Add support of TypeScript inside Svelte components KatChaotic/sveltedoc-parser#34
• Documenting components (@component tag) - Language Tools README
• el3um4s/svelte-get-component-info with regular expressions instead of AST
• @jsdoc/parse
• carbon-design-system/sveld
  • SvelteKit Support (Vite compatibility?) carbon-design-system/sveld#57
    • mattjennings/vite-plugin-sveld
• material-svelte/material-svelte/tree/main/tools/svelte-type-generator

[IanVS]

Just a heads-up, there's also a vite builder for storybook which works with svelte. https://github.com/storybookjs/builder-vite.

And storybook is making changes soon to avoid users having to install webpack at all, which should help a lot with dependency bloat and performance.

But, for now the automatic docs generation is not hooked up. Thanks for collecting a list of projects to handle this @Tymek. If any of them output something similar to react-docgen or vue-docgen-api, then it should be a simple matter of adding support within the vite builder.

[IanVS]

For what it's worth, storybook with the vite builder now uses https://github.com/alexprey/sveltedoc-parser/ to generate docgen for svelte projects. However, a current limitation is that it cannot use typescript, due to KatChaotic/sveltedoc-parser#34.

[benmccann]

We probably won't be re-implementing all of Storybook 😄 But we are working on making Storybook and SvelteKit work together well! So I'm going to close this in favor of #5397. I have PRs out to make Storybook setup work better with "type": "module" and reduce the number of dependencies, which were the items mentioned in the issue description here