storybookjs / addon-svelte-csf

[Incubation] CSF using Svelte components.
MIT License
98 stars 29 forks source link

[Bug] JSDoc description disappears with `lang="ts"` #175

Open rChaoz opened 2 months ago

rChaoz commented 2 months ago

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:

export const meta = {
    ...other,
    parameters: {
        docs: {
            description: {
                component: "Description here"
            }
        }
    }
}
JReinhold commented 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.

JReinhold commented 2 months ago

I think I'm wrong here, there's plenty of code in this addon to handle this specifically, so this should work actually.

JReinhold commented 2 months ago

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?

rChaoz commented 2 months ago

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.

xeho91 commented 1 month ago

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

JReinhold commented 1 month ago

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