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

[rChaoz]

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]

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]

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

[JReinhold]

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]

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]

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]

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

[JReinhold]

I believe this is fixed in v5

addon-svelte-csf/examples/Button.stories.svelte

Lines 9 to 12 in 8b588ac

	/**
	* These are the stories for the `Button` component.
	* It's the default button we use throughout our application.
	*/