Storybook support

[benmccann]

Describe the problem

Storybook mostly works now, but there's still some things that can be cleaned up. Opening this as a tracking issue for the various pending PRs

Describe the proposed solution

• Remove peerDependency on @types/react intuit/design-systems-cli#701
• Add a link to native format example storybookjs/addon-svelte-csf#61
• Make svelte-loader optional storybookjs/addon-svelte-csf#62
• remove transitive dependencies from peerDependencies storybookjs/addon-svelte-csf#63
• update description storybookjs/addon-svelte-csf#66
• Add .storybook to server.fs.allow storybookjs/builder-vite#427
• Read svelte.config.js storybookjs/builder-vite#428
• cleanup dependencies on alphas/betas storybookjs/builder-vite#444
• Cleanup peerDependencies storybookjs/builder-vite#445
• Svelte: Make svelte-loader optional dependency storybookjs/storybook#18645
• cleanup: remove webpack dependency storybookjs/storybook#18651
• Add link to Storybook adder svelte-add/svelte-add#220
• Vite: Add partial SvelteKit support storybookjs/storybook#19338
• Svelte Example Components injecting global CSS storybookjs/storybook#19409
• fix npx sb init
  • bug: always create main with cjs extension storybookjs/storybook#18648
  • Cleanup Svelte generator storybookjs/storybook#18705
  • update viteFinal to match michaelwooley/storybook-experimental-vite when SvelteKit is present
  • reference:
    • svelte generator
    • base generator
    • example files
• check potential alias issues on michaelwooley/storybook-experimental-vite and public env vars issue $env/dynamic/private not getting loaded by vitest and vite-node #6225 (comment)

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[GauBen]

I ran into this very issue this morning, and after a bit of trial and error, I managed to have a working configuration: windicss/windicss#267 (comment)

I'll try to contribute to svelte-add.

[benmccann]

I think rather than creating a new Svelte adder it may make more sense to fix npx sb init, which does the same thing

[IanVS]

For sb init, you have remove need for yarn. There is some logic to detect the package manager in use based on the lockfile, but I've seen it fail sometimes and try to use yarn in npm projects. It can be forced using --use-npm, but there's no --use-pnpm.

[benmccann]

I somehow had an empty yarn.lock file in my home directory that the generator was picking up on. I removed that and it's working now

[benbender]

Thanks for this combined effort! 🎉

The last missing piece, after all those changes have landed, will be some kind of docgen-extraction for ts-types inside of svelte-components, right?

The different storybook-svelte-packages (and more) are using https://github.com/alexprey/sveltedoc-parser which seems quite dead atm and, sadly, never finished support of doc-extraction of ts-components. Last time I checked there wasn't any complete/working solution for this problem.

That's not really specific for storybook, but more a lack in the svelte-ecosystem.
Any plans to tackle that too?

[IanVS]

I wonder if some of https://github.com/styleguidist/react-docgen-typescript could be used as a starting point / reference to add sveltedoc-parser typescript support. There was already some work in alexprey/sveltedoc-parser@dev...typescript-support, I hope someone will be willing to fork the project and continue working on adding support. It seems like it would benefit much of the ecosystem.

[GauBen]

The svelte language tools probably contain all that's needed to extract the documentation, given that it works in vscode:

[dummdidumm]

Yes and no - we rely on typescript to show all of this, not sure how we could intercept this cleverly to get what we want. However, we indeed have some kind of extraction going on, which could be reused to achieve this. svelte2tsx is the package where it would be implemented

[IanVS]

I mentioned svelte2tsx in the sveltedoc-parser typescript issue a while back, with no response. @dummdidumm what do you envision would need to be done to achieve docgen from svelte typescript?

[benmccann]

Storybook 7 will have SvelteKit support:
https://storybook.js.org/blog/storybook-for-sveltekit/
https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md