[Feature Request] Support ArgTypes inference from TS prop types in Svelte

[woodyrew]

Describe the bug

The Typescript types in a Svelte component don't come through to the props table in Storybook.

Steps to reproduce the behaviour

MyComponent.svelte

<script lang="ts">
    /**
     * Prop with type definition doesn't come through
     */
    export let title: string;

    /**
     * Prop with default value with type inference works
     */
    export let titleWithDefault = 'Default value';

    /**
     * Prop with duplicated JSDoc type works
     * @type {string}
     */
     export let titleTypeDuplication: string;

    /**
     * Typescript doesn't consume with JSDoc type
     * unless `lang=ts` removed
     * @type {string}
     */
    export let titleJSDocType;
</script>

<div>
    {title}
    {titleWithDefault}
    {titleTypeDuplication}
    {titleJSDocType}
</div>

MyComponent.stories.svelte

<script
    context="module"
    lang="ts"
>
    import { Story, Template } from "@storybook/addon-svelte-csf";
    import Component from "./MyComponent.svelte";

    /**
     * My Awesome Component.
     */
    export const meta = {
        title: "My Component,
        component: Component,
    };
</script>

<Template let:args>
    <Component {...args} />
</Template>

<Story
    name="default"
    args={{
        title: "My title",
        titleWithDefault: "Another title",
        titleTypeDuplication: "titled",
        titleJSDocType: "The last one",
    }}
/>

Storybook Properties table:	Name	Description	Default	Control
title	Prop with type definition doesn't come through any		"My title"
titleWithDefault	Prop with default value with type inference works string	Default value	Another title
titleTypeDuplication	Prop with duplicated JSDoc type works string		titled
titleJSDocType	Typescript doesn't consume JSDoc type, assigns type: any. Unless lang=ts removed string		The last one

Note: with the title showing type any in Storybook, the control is an Object so the UX is poor.

Expected behaviour

The expected behaviour would be that the title in the Storybook Properties table would have the correct type and associated control.

Environment

• @storybook/addon-svelte-csf: "4.1.3"

[JReinhold]

This is unrelated to @storybook/addon-svelte-csf as this is an issue with regular CSF as well, so I've transferred it to the Storybook monorepo.

TypeScript types have never been supported, so I consider this a feature request and rather than a bug.

There isn't proper tooling in the Svelte community to get prop types from a TS-typed Svelte-component, so we're blocked on the Svelte team or community providing such a tool. Eg. Vue has vue-component-meta, Svelte doesn't have anything similar AFAIK.

[woodyrew]

Thanks for providing more context around this and putting it in the right place.

There isn't proper tooling in the Svelte community to get prop types from a TS-typed Svelte-component

Could we not use the Svelte ComponentProps for the prop types?

[JReinhold]

Could we not use the Svelte ComponentProps for the prop types?

They are only TypeScript-level types, they can't be used to generate anything at runtime, as types are stripped away.

Years of experience have taught us that this specific problem is best solved by the specific framework's communities, as attempting to solve it within Storybook is biting of more than we can chew. Here are a few examples:

• React: https://github.com/reactjs/react-docgen, https://github.com/styleguidist/react-docgen-typescript
• Angular: https://github.com/compodoc/compodoc
• Web Components: https://github.com/webcomponents/custom-elements-manifest
• Vue: vue-component-meta, vue-docgen-api
• Svelte: https://github.com/alexprey/sveltedoc-parser (currently used, unmaintained, doesn't support TypeScript, Svelte 5)

We're hoping that eventually the Svelte team will provide an API like this, but currently they have their hands full with the release of v5, which makes sense. The Svelte Language Server must do this computation internally to work, however its not exposed as an API, and Storybook's architecture isn't built to be able to interact with a language server.