storybook [Bug]: Svelte JSDoc类型注解不会自动转换为argTypes

8wigbo56  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(124)

描述错误

在之前的版本(v6.5)中,Svelte组件参数上的JSDoc @type注解被正确地翻译为自动构建component stories的argTypes。特别是,定义了多个选项的类型被翻译为单选按钮。
例如,给定以下组件参数:

/**
   * @type {'small' | 'medium' | 'large'} How large should the button be?
   */
  export let size = 'medium';

Storybook v6.5会在故事文件中生成一个带有3个选项的单选按钮控件,无需手动argTypes定义。在使用v7时,单选按钮仍然被识别为合适的控件,但会出现错误,不会向单选按钮控件提供选项。
在调查过程中,我发现该第三方包仍然可以正确解析Svelte组件并识别JSDoc注解,将size参数解释为union类型,与之前相同(这个第三方包已经超过一年没有更新了)。此外,svelte渲染器中的extractArgTypes函数似乎将控件类型识别为具有适当选项集的单选按钮。然而,在extractArgTypes的某个地方,选项丢失了。前端输出一条控制台日志消息,显示“无选项的单选按钮:size”。

重现步骤

https://github.com/michaelstachowiak/storybook-v7-svelte-issue

To reproduce, you can just create the reproduction for svelte and comment out the manual `argTypes` definition for button sizes, which I've done in the public repository above.  In v6.5 it would have correctly generated a radio button, in v7 it encounters the error outlined above.

系统环境

Environment Info:

  System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 3.3.1 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 106.0.5
    Safari: 16.1
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/addon-interactions: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/addon-links: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/blocks: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/svelte: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/svelte-webpack5: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/testing-library: ^0.0.13 => 0.0.13

其他上下文信息

extractArgTypes输出中可以看到单个参数的输出。根据此输出,我不明白为什么单选按钮不渲染任何选项,它们似乎已经被正确提取。

{
    "control": {
        "type": "radio",
        "options": [
            "small",
            "medium",
            "large"
        ]
    },
    "name": "color",
    "description": "How large should the button be?",
    "type": {
        "required": false,
        "name": "'small' | 'medium' | 'large'"
    },
    "table": {
        "type": {
            "summary": "'small' | 'medium' | 'large'"
        },
        "defaultValue": {
            "summary": "medium"
        },
        "category": "properties"
    }
}
bis0qfac

bis0qfac1#

很遗憾,问题仍然存在。
任何额外的见解或建议将不胜感激。
感谢您的持续支持。🙏

bf1o4zei

bf1o4zei2#

你好,这个问题有什么更新吗?

相关问题