如何让 Storybook 自动生成 argTypes 与 Controls跨框架 Props 声明实操指南【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook本指南以 Storybook 的跨框架 Button 示例为切入点讲清 React、Angular、Vue、Svelte、Web Components 各自的 Props 声明如何被 docgen 解析最终自动产出 argTypes 与 Controls让你把组件写规范这一步就顺手拿到文档面板。官方教程讲第一个 Story时总是先给出一段带完整 Props 元信息的组件实现再进入.stories文件。这些示例的源头都在 docs/_snippets/ 目录button-component-with-proptypes.md存着组件实现本身同一个 Button一个布尔开关加一段文案被拆成 6 份代码对应 6 种框架写法。 结论先行Controls 面板的智能程度由组件侧的 Props 声明决定argTypes 是 Storybook 自动推导出来的参数元数据描述每个属性的名称、类型、默认值、描述文字以及 Controls 该渲染成开关还是文本框。它的完整结构可参考 docs/_snippets/storybook-generated-argtypes.mdconst argTypes { label: { type: { name: string, required: false }, defaultValue: Hello, description: demo description, control: { type: text }, }, };这个对象里的每个字段都有明确出处type来自你在组件里写的类型声明——boolean渲染成开关string渲染成文本框description来自字段上方的 JSDoc 注释成为 ArgsTable 与 Controls 里的说明文字defaultValue来自组件侧的默认值进入参数表的 Default 列。换句话说你在组件代码里敲下的类型和注释正是文档系统的输入数据。 argTypes 是怎么自动生成的一条四步数据流整条链路四步各框架差别只在第二步的解析工具入口和出口完全一致声明 Props按框架约定写出属性速查表见下节docgen 静态解析不执行代码只读源码抽出属性名、类型、默认值、注释产出 argTypes解析结果合并成结构化对象挂到 story 的 meta 上面板渲染Docs 页的参数表与 Canvas 里的 Controls 面板都依据这个对象绘制。各框架的 docgen 工具链仓库依赖文件里都能查到实证Reactcode/frameworks/react-vite/ 依赖react-docgen与joshwooding/vite-plugin-react-docgen-typescriptWebpack 侧则用 code/presets/react-webpack/ 中的storybook/react-docgen-typescript-pluginAngular借storybook/angular-compodoc跑 Compodoccode/frameworks/angular/build-schema.json 提供compodoc与compodocArgs配置项code/frameworks/angular-vite/ 则导出内置的./internal/docgen-workerVue 3code/renderers/vue3/ 依赖vue-docgen-apicode/renderers/vue3/src/docgen/build-docgen.ts 负责把__docgenInfo转成 argTypesSveltestorybook/addon-svelte-csf的defineMeta读取export let变量上的注释Web ComponentsLit直接解析类上方的 JSDocprop、summary、tag与property()装饰器。 跨框架 Props 声明对照表六个框架各写在哪以同一个 Button布尔isDisabled 文本content为例各框架写法汇总如下框架声明位置类型载体默认值写法必填语义描述来源React (JS)Button.propTypesPropTypes.bool/stringisRequired无由调用方传入isRequired属性上方 JSDocReact (TS)ButtonPropsinterfaceTS 类型 React.FC泛型解构默认值?可选标记字段上方 JSDocAngularInput()字段字段的 TS 类型字段初值required注释字段上方 JSDocVue 3 (JS/TS)props选项type TS 推导defineComponentdefaultrequired: true字段上方注释Svelteexport let变量Svelte 编译器变量初值required标记变量上方 JSDocWeb Componentsstatic properties/property()Lit 装饰器 TS 类型构造函数 / 字段初值靠默认值约定类上方propJSDocReact TS 版最能体现一份声明两用interface 既承担类型又承担文档锚点export interface ButtonProps { /** Checks if the button should be disabled */ isDisabled: boolean; /** The display content of the button */ content: string; }所有框架共用一条铁律类型声明与 JSDoc 注释写在同一个字段上——前者决定控件形态后者变成面板说明。缺任何一边面板对应栏目都会空着。⚠️ 四个让 argTypes缺失或说谎的坑命名不统一。React / Angular / Web Components 示例用isDisabledSvelte 示例改用disabledVue 示例则把文案属性叫label。写 story 时 args 的键必须与组件属性名逐字一致对不上号控件就改不动组件。必填与默认值并存。Vue 示例里required: true与default同时出现语义上其实是冗余的TS 版示例便把required去掉了。二者选其一并保持项目内一致。注释位置错了等于没写。注释必须紧贴并悬挂在对应字段上方——propTypes项上方、interface 字段上方、Input()上方或类上方。写在函数体里、或与代码同行docgen 都匹配不到该属性。Svelte 片段的闭合标签。示例第 90 行写作script/真实 Svelte 组件里脚本标签应闭合为/script否则编译器直接报错。另外两条命名小规则也值得留意Angular 的 selector 应使用至少两个词如my-button避免撞上原生标签Vue 的name: button这种单词名会被vue/multi-word-component-namesESLint 规则告警。 组件写完后第一个 Story 的 meta 只需一行衔接在Button.stories文件的 meta 中声明component: ButtonStorybook 就把组件元数据与这组 story 关联起来const meta { component: Button, parameters: { actions: { argTypesRegex: ^on.* } }, } satisfies Metatypeof Button;Web Components 的元素按名字注册meta 里改用字符串component: demo-button跨框架完整写法见 docs/_snippets/button-story-matching-argtypes.mdargTypesRegex: ^on.*会把以on开头的属性自动登记到 Actions 面板方便记录onClick这类事件背景见 docs/essentials/actions.mdx官方教程入口docs/get-started/whats-a-story.mdx 与 docs/writing-stories/args.mdx。关键回顾Props 声明是 Storybook 产出 argTypes 的唯一数据来源类型定控件形态注释成说明文字默认值进参数表。六个框架写法各异但都遵守注释紧贴字段上方这一条。meta 里接上component之后Controls 与 Docs 面板便随组件声明自动生效。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何让 Storybook 自动生成 argTypes 与 Controls：跨框架 Props 声明实操指南
如何让 Storybook 自动生成 argTypes 与 Controls跨框架 Props 声明实操指南【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook本指南以 Storybook 的跨框架 Button 示例为切入点讲清 React、Angular、Vue、Svelte、Web Components 各自的 Props 声明如何被 docgen 解析最终自动产出 argTypes 与 Controls让你把组件写规范这一步就顺手拿到文档面板。官方教程讲第一个 Story时总是先给出一段带完整 Props 元信息的组件实现再进入.stories文件。这些示例的源头都在 docs/_snippets/ 目录button-component-with-proptypes.md存着组件实现本身同一个 Button一个布尔开关加一段文案被拆成 6 份代码对应 6 种框架写法。 结论先行Controls 面板的智能程度由组件侧的 Props 声明决定argTypes 是 Storybook 自动推导出来的参数元数据描述每个属性的名称、类型、默认值、描述文字以及 Controls 该渲染成开关还是文本框。它的完整结构可参考 docs/_snippets/storybook-generated-argtypes.mdconst argTypes { label: { type: { name: string, required: false }, defaultValue: Hello, description: demo description, control: { type: text }, }, };这个对象里的每个字段都有明确出处type来自你在组件里写的类型声明——boolean渲染成开关string渲染成文本框description来自字段上方的 JSDoc 注释成为 ArgsTable 与 Controls 里的说明文字defaultValue来自组件侧的默认值进入参数表的 Default 列。换句话说你在组件代码里敲下的类型和注释正是文档系统的输入数据。 argTypes 是怎么自动生成的一条四步数据流整条链路四步各框架差别只在第二步的解析工具入口和出口完全一致声明 Props按框架约定写出属性速查表见下节docgen 静态解析不执行代码只读源码抽出属性名、类型、默认值、注释产出 argTypes解析结果合并成结构化对象挂到 story 的 meta 上面板渲染Docs 页的参数表与 Canvas 里的 Controls 面板都依据这个对象绘制。各框架的 docgen 工具链仓库依赖文件里都能查到实证Reactcode/frameworks/react-vite/ 依赖react-docgen与joshwooding/vite-plugin-react-docgen-typescriptWebpack 侧则用 code/presets/react-webpack/ 中的storybook/react-docgen-typescript-pluginAngular借storybook/angular-compodoc跑 Compodoccode/frameworks/angular/build-schema.json 提供compodoc与compodocArgs配置项code/frameworks/angular-vite/ 则导出内置的./internal/docgen-workerVue 3code/renderers/vue3/ 依赖vue-docgen-apicode/renderers/vue3/src/docgen/build-docgen.ts 负责把__docgenInfo转成 argTypesSveltestorybook/addon-svelte-csf的defineMeta读取export let变量上的注释Web ComponentsLit直接解析类上方的 JSDocprop、summary、tag与property()装饰器。 跨框架 Props 声明对照表六个框架各写在哪以同一个 Button布尔isDisabled 文本content为例各框架写法汇总如下框架声明位置类型载体默认值写法必填语义描述来源React (JS)Button.propTypesPropTypes.bool/stringisRequired无由调用方传入isRequired属性上方 JSDocReact (TS)ButtonPropsinterfaceTS 类型 React.FC泛型解构默认值?可选标记字段上方 JSDocAngularInput()字段字段的 TS 类型字段初值required注释字段上方 JSDocVue 3 (JS/TS)props选项type TS 推导defineComponentdefaultrequired: true字段上方注释Svelteexport let变量Svelte 编译器变量初值required标记变量上方 JSDocWeb Componentsstatic properties/property()Lit 装饰器 TS 类型构造函数 / 字段初值靠默认值约定类上方propJSDocReact TS 版最能体现一份声明两用interface 既承担类型又承担文档锚点export interface ButtonProps { /** Checks if the button should be disabled */ isDisabled: boolean; /** The display content of the button */ content: string; }所有框架共用一条铁律类型声明与 JSDoc 注释写在同一个字段上——前者决定控件形态后者变成面板说明。缺任何一边面板对应栏目都会空着。⚠️ 四个让 argTypes缺失或说谎的坑命名不统一。React / Angular / Web Components 示例用isDisabledSvelte 示例改用disabledVue 示例则把文案属性叫label。写 story 时 args 的键必须与组件属性名逐字一致对不上号控件就改不动组件。必填与默认值并存。Vue 示例里required: true与default同时出现语义上其实是冗余的TS 版示例便把required去掉了。二者选其一并保持项目内一致。注释位置错了等于没写。注释必须紧贴并悬挂在对应字段上方——propTypes项上方、interface 字段上方、Input()上方或类上方。写在函数体里、或与代码同行docgen 都匹配不到该属性。Svelte 片段的闭合标签。示例第 90 行写作script/真实 Svelte 组件里脚本标签应闭合为/script否则编译器直接报错。另外两条命名小规则也值得留意Angular 的 selector 应使用至少两个词如my-button避免撞上原生标签Vue 的name: button这种单词名会被vue/multi-word-component-namesESLint 规则告警。 组件写完后第一个 Story 的 meta 只需一行衔接在Button.stories文件的 meta 中声明component: ButtonStorybook 就把组件元数据与这组 story 关联起来const meta { component: Button, parameters: { actions: { argTypesRegex: ^on.* } }, } satisfies Metatypeof Button;Web Components 的元素按名字注册meta 里改用字符串component: demo-button跨框架完整写法见 docs/_snippets/button-story-matching-argtypes.mdargTypesRegex: ^on.*会把以on开头的属性自动登记到 Actions 面板方便记录onClick这类事件背景见 docs/essentials/actions.mdx官方教程入口docs/get-started/whats-a-story.mdx 与 docs/writing-stories/args.mdx。关键回顾Props 声明是 Storybook 产出 argTypes 的唯一数据来源类型定控件形态注释成说明文字默认值进参数表。六个框架写法各异但都遵守注释紧贴字段上方这一条。meta 里接上component之后Controls 与 Docs 面板便随组件声明自动生效。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考