Open rChaoz opened 2 months ago
Storybook has a Vite plugin that extracts the JSDoc comments and puts them on parameters.docs.description.component
:
https://github.com/storybookjs/storybook/blob/next/code/lib/csf-tools/src/enrichCsf.ts/#L135-L140 https://github.com/storybookjs/storybook/blob/next/code/builders/builder-vite/src/vite-config.ts/#L99
I suspect what's happening here is that the Svelte CSF Vite plugin is added after the CSF plugin, meaning that it will first extract comments from all stories.js
files, and then convert stories.svelte
files to stories.js
, thus never extract comments from those.
I think I'm wrong here, there's plenty of code in this addon to handle this specifically, so this should work actually.
I actually have this working fine with the example from https://github.com/storybookjs/addon-svelte-csf/blob/main/stories/metaexport.stories.svelte
See https://stackblitz.com/~/edit/github-5qdaww
Can you provide a minimal reproduction?
It doesn't work with HMR, maybe that threw you off?
It seems like adding lang="ts"
to the style tag causes the issue, I cloned your stackblitz, added that and it stops working (see here).
I'm not even using any types in the code, just the lang tag. But I think that should narrow it down a lot.
I am not sure what the heck happened. Upgrading pnpm
and adding svelte-package
to the CI step possibly fixed the issue (at least when I tried to reproduce locally), the demonstration can be seen at #180
Or in the Chromatic preview - the story uses lang="ts"
now:
https://6042cb92fd1bb200234586ee-mpuazznpwt.chromatic.com/?path=%2Fdocs%2Fdemo-metaexport-metaexport--docs
I'm not sure either, but I don't think the "fix" is propagated to user projects. I tried upgrading my reproduction to the canary from that branch, and it still doesn't show JSDocs when lang="ts"
.
https://stackblitz.com/~/edit/github-5qdaww?file=src/stories/Batton.stories.svelte
According to the documentation, to set the description of a component you should use a JSDoc comment above the
meta
variable or above the component. The first variant does not work and the second one doesn't make sense (what is "above" a Svelte component)?The only variant remaining is to set the string manually in meta like so: