storybook 文档中的简短源代码以错误的方式显示插槽和事件

uinbv5nw  于 2022-10-29  发布在  其他
关注(0)|答案(1)|浏览(186)

描述Bug

我有一个带有插槽和事件的细长组件。在文档页面上生成的源代码是错误的。
故事:

<Template let:args>
    <Button {...args} on:click={args.event_click}>
        {args.slot_default}
    </Button>
</Template>

<Story name="Primary" args={{primary: true, slot_default: 'Button Label'}} />

源代码如何生成:

<Button primary>Button Label</Button>

源代码实际是如何生成的:

<Button primary slot_default="Button Label" event_click={undefined}/>

重现

我创建了一个存储库来重现https://github.com/vekunz/storybook-svelte-docs-source-bug问题。只需按照自述文件中的说明操作即可。

系统

System:                                                 
    OS: Windows 10 10.0.19044                             
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
  Binaries:                                               
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE      
    npm: 8.13.2 - C:\Program Files\nodejs\npm.CMD         
  Browsers:                                               
    Chrome: 103.0.5060.114                                
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)
  npmPackages:
    @storybook/addon-actions: 6.5.9 => 6.5.9
    @storybook/addon-essentials: 6.5.9 => 6.5.9
    @storybook/addon-interactions: 6.5.9 => 6.5.9
    @storybook/addon-links: 6.5.9 => 6.5.9
    @storybook/addon-svelte-csf: 2.0.6 => 2.0.6
    @storybook/builder-vite: 0.2.0 => 0.2.0
    @storybook/svelte: 6.5.9 => 6.5.9
    @storybook/testing-library: 0.0.13 => 0.0.13

其他上下文

我使用Storybook来描述Slete组件。此外,我还使用@storybook/addon-svelte-csf来将故事写在.svelte文件中(否则就不可能描述插槽)。

相关问题