storybook [Bug]: @values 在 prop jsdoc 中不通过 vue-docgen-api 填充控件,

eqqqjvef  于 4个月前  发布在  其他
关注(0)|答案(5)|浏览(35)

描述bug

我希望向prop提供@valuestype时,结果应该是枚举/选择样式,因为这是vue-docgen-api的功能,但我没有看到这种行为。

复现链接

https://stackblitz.com/edit/github-hfdqmp?file=src%2Fstories%2FButton.stories.js,src%2Fstories%2FButton.vue&preset=node

复现步骤

  1. 转到链接
  2. 观察组件中的jsdoc块
  3. 在文档故事中查看props表。它是一个字符串输入,但应该是一个带有有效选项的下拉框或单选按钮,这些选项在jsdoc注解中提供:@values 'small', 'medium', 'large'

系统

Based on storybook.new starter I linked in the repro, but also happening in v7 and 8.2.1. 
I also tested the `vue-cli` and `typescript` Vue 3 starters on stackblitz.

附加上下文

还请注意,vue-component-meta在这种方式下也无法正常工作,如此处所示:https://stackblitz.com/edit/github-akbacb?file=src%2Fstories%2FButton.stories.ts,src%2Fstories%2FButton.vue,.storybook%2Fmain.ts&preset=node

cbeh67ev

cbeh67ev1#

免责声明:由于信息是自动生成的,可能存在不准确的情况。
要解决在 prop JSDoc 中未填充控件的问题,请按照以下步骤操作:

  1. 更新组件中的 JSDoc:确保您的 JSDoc 正确包含 @values
<!-- src/stories/Button.vue -->
<script setup>
/**
* Button size
* @values 'small', 'medium', 'large'
*/
defineProps({
size: {
type: String,
default: 'medium'
}
});
</script>
  1. 配置 Storybook:确保您的故事文件中的 argTypes 反映了枚举值。
// src/stories/Button.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3';
import Button from './Button.vue';

const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['small', 'medium', 'large'] },
  },
  args: {
    size: 'medium',
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    size: 'medium',
  },
};
  1. 检查 vue-docgen-api 配置:确保您在 Storybook 设置中正确配置了 vue-docgen-api 以解析 JSDoc 注解。
// .storybook/main.ts
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-docs'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.vue$/,
      loader: 'vue-docgen-loader',
      options: {
        docgenOptions: {
          alias: { '@': path.resolve(__dirname, '../src') },
        },
      },
    });
    return config;
  },
};

参考资料

/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/ReferenceTypeProps.stories.ts
/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta
/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/options-api
/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts

关于 Greptile

此响应为您提供研究的起点,而非精确解决方案。
帮助我们改进!如果这有帮助,请留下一个 👍,如果无关紧要,请留下一个 👎。

ca1c2owp

ca1c2owp2#

@larsrickert @chakAs3 @kasperpeulen 你能帮忙解决这个问题吗?

pjngdqdw

pjngdqdw3#

@thedamon,我们从未能让vue-docgen-api处理高级功能,所以我们认为它是遗留的。你提供的引用正在使用vue-component-meta,这是官方Vue语言工具(Volar)的一部分。

lkaoscv7

lkaoscv74#

@chakAs3 Ah k.这可能在很大程度上解释了它。我的参考是我知道vue-docgen- api本身应该通过jsdoc中的@values字段拉取可能的值,而我对它在Vue 2和storybook 6的某种组合中工作的记忆有些模糊。
然而,对于vue-component-meta,如果我们不使用TS,我不确定如何制作自动控件...我们在仓库中使用autodocs时得到的结果非常有限(也许是因为工作区)。我制作的复现示例昨天对我来说无法填充控件,但今天在我重新运行yarn storybook后对我来说是可以的;如果不使用TS,是否有办法在使用jsdoc时访问autodocs控件?

jfgube3f

jfgube3f5#

@thedamon 我认为在Vue中(不依赖于Storybook),如果没有TypeScript,自动控制是不可能的,因为纯JavaScript仅限于Number, String, Boolean, Object, Array类型,无法进行更详细的类型定义。
即使为枚举值添加JSDoc标签,当你将鼠标悬停在props上时,Vue VSCode扩展(与vue-component-meta使用的Volar类似)仍然会显示String类型。
我建议要么使用TypeScript,或者你可以像这样手动定义参数,这应该是等效的努力,因为你可以删除@values JSDoc标签,因为它不会有任何效果:

const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['small', 'medium', 'large'] },
  },
};

相关问题