Property descriptions missing from Docs Page on Svelte + TypeScript #15891
Comments
|
(Dropping |
|
Thanks for logging this, was just running into this issue. I've noticed that I can leave the The workaround outlined above works great specifically for Storybook docs, but to my knowledge removes the functional aspect of formally typing the properties when using the component outside of Storybook. |
|
@MasonOh91 |
|
@notpushkin |
|
Hello! Has anyone had the chance to look into this? I'm using It definitely is my preference to be able to use typescript as expected and have my js doc comments pulled into the storybook UI. The automatic documentation is such a cool feature! Definitely unfortunate to have to choose between it and using typescript in svelte components. |
|
You can track KatChaotic/sveltedoc-parser#34 for typescript support in the package we use to extract docs information from svelte files. |
|
It makes sense that the TS Parser is not yet ready for prime time, but I am puzzled why the story docs attribute can't be set in the parameters within a story like: export const Primary = (args) => ({
Component: Counter,
props: {
...args,
},
parameters: {
docs: {
description: {
story: "hello foo bar baz",
},
},
},
});or with <Story
name="Primary"
args={{
count: 5,
}}
parameters={{
docs: {
description: {
story: "Testing 123",
},
},
}}
/>In both cases it doesn't render the doc description for the story, although it does render the doc description for the component. |
|
Did anything ever come of this? |
|
cc @JReinhold |
|
This is still a current limitation of As for @CallumHoward's issue:
That should be working as of v7.0 |
|
@Ddupasquier JSdoc automatic property description generation works fine with storybook 7.0.8 & <script lang="ts">
// Source of the asset
export let src:string = ''
</script>
... |
|
This isn't an issue related with If you are using svelte with vite and storybook with vite for svelte, do that:
The new svelte template use The Changing the preprocessor have some implications, you can check more here: https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md Indeed Exampleimport fs from 'fs';
import path from 'path';
import { preprocess } from 'svelte/compiler';
import sveltePreprocess from "svelte-preprocess";
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
const cwd = process.cwd();
const resource = path.relative(cwd, "src/stories/Button.svelte");
const src = fs.readFileSync(resource).toString();
const { code: fileContent } = await preprocess(src, vitePreprocess(), {
filename: resource
});
const { code: fileContent2 } = await preprocess(src, sveltePreprocess(), {
filename: resource
});
console.log(fileContent)
console.log(fileContent2)output with vite preprocess: <script lang="ts">import "./button.css";
export let primary = false;
export let backgroundColor = void 0;
export let size = "medium";
export let label = "";
$:
mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
$:
style = backgroundColor ? `background-color: ${backgroundColor}` : "";
</script>
<button
type="button"
class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
{style}
on:click
>
{label}
</button>output with svelte preprocess: <script lang="ts">import './button.css';
/**
* Is this the principal call to action on the page?
*/
export let primary = false;
/**
* What background color to use
*/
export let backgroundColor = undefined;
/**
* How large should the button be?
*/
export let size = 'medium';
/**
* Button contents
*/
export let label = '';
$: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
$: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
</script>
<button
type="button"
class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
{style}
on:click
>
{label}
</button> |
|
Thanks for the insights @01oseluiz, that's very interesting. This is a big frustration for users, I'm happy to know there's a workaround. @benmccann do you see a way forward here where users wouldn't need to do the workaround described above, or is this just how it is and that we need to document it? Given that |
Describe the bug
When a Svelte component is using plain JavaScript, its property descriptions are extracted from JSDoc blocks inside the component. However, if you switch
<script>with<script lang="ts">(and optionally adding some types in there), it stops picking up anything at all.To Reproduce
https://github.com/notpushkin/repro-storybook-svelte-typescript
System
Additional context
Possibly related? #14876
The text was updated successfully, but these errors were encountered: