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

woodyrew commented 4 weeks ago

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
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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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.

storybookjs / storybook