Repository navigation
Storybook support #5397
Description
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
peerDependencyon@types/reactintuit/design-systems-cli#701 - Add a link to native format example storybookjs/addon-svelte-csf#61
- Make
svelte-loaderoptional storybookjs/addon-svelte-csf#62 - remove transitive dependencies from peerDependencies storybookjs/addon-svelte-csf#63
- update description storybookjs/addon-svelte-csf#66
- Add
.storybooktoserver.fs.allowstorybookjs/builder-vite#427 - Read
svelte.config.jsstorybookjs/builder-vite#428 - cleanup dependencies on alphas/betas storybookjs/builder-vite#444
- Cleanup
peerDependenciesstorybookjs/builder-vite#445 - Svelte: Make
svelte-loaderoptional 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
viteFinalto match michaelwooley/storybook-experimental-vite when SvelteKit is present - reference:
- 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
Activity
GauBen commentedon Jul 6, 2022
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 commentedon Jul 6, 2022
I think rather than creating a new Svelte adder it may make more sense to fix
npx sb init, which does the same thingIanVS commentedon Jul 7, 2022
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 commentedon Jul 7, 2022
I somehow had an empty
yarn.lockfile in my home directory that the generator was picking up on. I removed that and it's working nowbenbender commentedon Jul 16, 2022
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 commentedon Jul 21, 2022
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 KatChaotic/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 commentedon Jul 21, 2022
The svelte language tools probably contain all that's needed to extract the documentation, given that it works in vscode:
dummdidumm commentedon Jul 21, 2022
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 commentedon Jul 21, 2022
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 commentedon Dec 13, 2022
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
ciscorn commentedon Jul 9, 2024
I just submitted a PR to introduce an approach using svelte2tsx and TypeScript.
storybookjs/storybook#28492