Storybook 元级自定义渲染通过 Meta 中的 render 复用定制模板CSF 3 与 CSF Next 全框架指南本指南围绕 Storybook 官方写作故事文档中“自定义渲染”Custom rendering的核心片段展开讲解如何在 CSF 的meta默认导出中定义统一的render函数让一个组件库的所有 story 共享同一套“组件套组件”的复合渲染模板同时覆盖 Angular、React、Vue、Web Components 四种渲染器以及 CSF 3 / CSF Next 两种编写范式。读完你将从三个层面掌握该能力为何要把render提升到 meta 层级、四种渲染器各自的模板写法与 args 传递差异以及如何借助 Angular 的argsToTemplate工具函数规避undefined绑定带来的默认值失效问题。背景Story 的默认渲染与“套壳”需求在 Storybook 中一个 story 捕获的是 UI 组件在给定一组参数args下的渲染状态。默认情况下story 会渲染meta即默认导出中声明的component并把当前 story 的args传入其中——这是 docs/writing-stories/index.mdx 中Stories一节对 CSF 的基本约定。但组件往往不是孤立存在的一个Button可能永远要被放在Alert、Card、表单布局等父组件中使用。若希望每个 story 在展示组件本体之外还要展示它在真实容器中的样子就需要“自定义渲染”——为 story 提供一个接收args并返回任意输出的render函数。例如把Button渲染进一个Alert中这个需求可以用单条 story 级render解决对应片段见 docs/_snippets/render-custom-in-story.md而当整个组件文件的每条 story 都需要这种“套壳”效果时逐条重复编写render既冗余又难维护。Storybook 的做法是允许把render定义在meta 层级从而让同文件内所有 story 共享同一渲染逻辑。这正是本次要讲解的官方代码片段 docs/_snippets/render-custom-in-meta.md 的全部内容。官方文档片段仅供在组件侧书写 story 使用它需要你本地已有Button、Alert两个组件文件以及可用的 Storybook 环境仓库为只读项目本文只介绍在你自己项目中如何照此编写。在 meta 中声明 render 的通用原则无论使用哪种渲染器meta 级 render都遵循同一套规则render接收args需要按当前渲染器的语法把组件拼进模板并返回渲染描述对象必须把args“展开”到内部目标组件上React 的{...args}、Vue 的v-bindargs、Angular 的argsToTemplate(args)、Web Components 的逐属性绑定。只有这样做Controls 等基于 args 的 addon 才能在 Storybook UI 中动态改写组件属性meta 级 render 可被 story 级 render 覆盖因此仍然可以对个别 story 做特化处理render还会收到第二个context参数内含该 story 的其他全部上下文包括parameters、globals等。官方片段给出的复合示例结构如下组件为Button容器为AlertDefaultInAlertargs { label: Button }PrimaryInAlertargs { primary: true, label: Button }下面按渲染器逐一看完整代码。Angular对象式模板 argsToTemplateAngular 渲染器的render需要返回一个“组件描述对象”包含props与template而不是 JSX 或模板字符串本身。官方示例把该对象的创建直接写在render内CSF 3 写法import { type Meta, type StoryObj, argsToTemplate } from storybook/angular; import { Button } from ./button.component; const meta: MetaButton { component: Button, render: (args) ({ props: args, template: demo-alert Alert text demo-button ${argsToTemplate(args)}/demo-button /demo-alert , }), }; export default meta; type Story StoryObjButton; export const DefaultInAlert: Story { args: { label: Button, }, }; export const PrimaryInAlert: Story { args: { primary: true, label: Button, }, };CSF Next 写法import { argsToTemplate } from storybook/angular; import preview from ../.storybook/preview; import { Button } from ./button.component; const meta preview.meta({ component: Button, render: (args) ({ props: args, template: demo-alert Alert text demo-button ${argsToTemplate(args)}/demo-button /demo-alert , }), }); export const DefaultInAlert meta.story({ args: { label: Button, }, }); export const PrimaryInAlert meta.story({ args: { primary: true, label: Button, }, });ReactJSX 渲染函数CSF 3 与 CSF NextReact 渲染器的render直接返回 JSX 元素。把 Button 的 props 用展开运算符透传给内部组件是保证 Controls 可用的关键。CSF 3.jsximport { Alert } from ./Alert; import { Button } from ./Button; export default { component: Button, render: (args) ( Alert Alert text Button {...args} / /Alert ), }; export const DefaultInAlert { args: { label: Button, }, }; export const PrimaryInAlert { args: { primary: true, label: Button, }, };CSF 3.tsx带类型标注// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc. import { Meta, StoryObj } from storybook/your-framework; import { Alert } from ./Alert; import { Button } from ./Button; const meta { component: Button, render: (args) ( Alert Alert text Button {...args} / /Alert ), } satisfies Metatypeof Button; export default meta; type Story StoryObjtypeof meta; export const DefaultInAlert: Story { args: { label: Button, }, }; export const PrimaryInAlert: Story { args: { primary: true, label: Button, }, };CSF Next .tsx / .jsximport preview from ../.storybook/preview; import { Alert } from ./Alert; import { Button } from ./Button; const meta preview.meta({ component: Button, render: (args) ( Alert Alert text Button {...args} / /Alert ), }); export const DefaultInAlert meta.story({ args: { label: Button, }, }); export const PrimaryInAlert meta.story({ args: { primary: true, label: Button, }, });Vuesetup 局部组件注册Vue 渲染器的render返回一个组件选项对象需要把Alert、Button注册进components在setup()中暴露args再用v-bindargs把参数透传给子组件。CSF 3.jsimport Alert from ./Alert.vue; import Button from ./Button.vue; export default { component: Button, render: (args) ({ components: { Alert, Button }, setup() { return { args }; }, template: AlertButton v-bindargs //Alert, }), }; export const DefaultInAlert { args: { label: Button, }, }; export const PrimaryInAlert { args: { primary: true, label: Button, }, };CSF 3.tssatisfies 标注import type { Meta, StoryObj } from storybook/vue3-vite; import Alert from ./Alert.vue; import Button from ./Button.vue; const meta { component: Button, render: (args) ({ components: { Alert, Button }, setup() { return { args }; }, template: AlertButton v-bindargs //Alert, }), } satisfies Metatypeof Button; export default meta; type Story StoryObjtypeof meta; export const DefaultInAlert: Story { args: { label: Button, }, }; export const PrimaryInAlert: Story { args: { primary: true, label: Button, }, };CSF Next .ts / .jsimport preview from ../.storybook/preview; import Alert from ./Alert.vue; import Button from ./Button.vue; const meta preview.meta({ component: Button, render: (args) ({ components: { Alert, Button }, setup() { return { args }; }, template: AlertButton v-bindargs //Alert, }), }); export const DefaultInAlert meta.story({ args: { label: Button, }, }); export const PrimaryInAlert meta.story({ args: { primary: true, label: Button, }, });Web ComponentsLit 模板与逐属性绑定Web Components 渲染器基于 Lit 的html标签模板。component字段直接填自定义元素标签名如demo-button渲染时不再有“组件引用”而是把每个 args 显式映射为属性绑定或布尔特性boolean attribute。CSF 3.jsimport html from lit; export default { component: demo-button, render: (args) html demo-alert Alert text demo-button ?primary${args.primary} label${args.label}/demo-button /demo-alert , }; export const DefaultInAlert { args: { label: Button, }, }; export const PrimaryInAlert { args: { primary: true, label: Button, }, };CSF 3.tsimport type { Meta, StoryObj } from storybook/web-components-vite; import html from lit; const meta: Meta { component: demo-button, render: (args) html demo-alert Alert text demo-button ?primary${args.primary} label${args.label}/demo-button /demo-alert , }; export default meta; type Story StoryObj; export const DefaultInAlert: Story { args: { label: Button, }, }; export const PrimaryInAlert: Story { args: { primary: true, label: Button, }, };CSF Next .tsimport html from lit; import preview from ../.storybook/preview; const meta preview.meta({ component: demo-button, render: (args) html demo-alert Alert text demo-button ?primary${args.primary} label${args.label}/demo-button /demo-alert , }); export const DefaultInAlert meta.story({ args: { label: Button, }, }); export const PrimaryInAlert meta.story({ args: { primary: true, label: Button, }, });需要留意的是Web Components 由于没有框架的“展开运算符”args 中的布尔开关通常用?attr${...}形式绑定普通属性用attr${...}绑定这意味着新增 args 时需要同步维护模板中的绑定行这与 React/Vue/Angular 的自动透传形成对比。CSF Next 与 CSF 3 的差异要点从上面的成对代码可以看出两种范式的结构差异官方代码片段同样保留了两种写法元数据来源不同CSF 3 用export default meta加type Story StoryObj...CSF Next 通过preview.meta({ ... })从项目的.storybook/preview注册信息中派生 metaexport 的是preview.meta()的返回值定义 story 的方式不同CSF 3 用具名导出对象export const DefaultInAlert: StoryCSF Next 用meta.story({ ... })方法创建 story 对象两者的 meta 级render语义完全一致component、render、args的配置位置与覆盖优先级都没有变化因此把现有 CSF 3 story 迁移到 CSF Next 时render函数体基本可以原样搬动。源码深挖Angular 的 argsToTemplate 到底解决了什么Angular 示例中的argsToTemplate是一个值得单独解释的工具函数其完整实现位于 code/frameworks/angular/src/client/argsToTemplate.ts并从 code/frameworks/angular/src/client/index.ts 作为公共 API 导出。它的核心行为函数签名与筛选逻辑见argsToTemplate.ts第 59–82 行过滤掉值为undefined的键。源码注释解释了原因Angular 会把属性绑定中的undefined当作真实值处理一旦[input2]input2绑定的运行时值是undefinedAngular 不会回退到组件属性声明的默认值。反过来若不写这一条绑定默认值虽然生效用户却无法通过 Controls 覆盖它——argsToTemplate恰好让“未传值时走内部默认值、传值时可由 Controls 改写”两个目标同时成立支持include/exclude白名单与黑名单且include优先于exclude见ArgsToTemplateOptions定义把值为函数的键渲染成事件绑定(key)key($event)把其余键渲染成属性绑定[key]key对含-等非点号命名的键自动改写为this[key]表达式保证模板语法合法。这些行为有完整的单元测试佐证位于 code/frameworks/angular/src/client/argsToTemplate.test.ts例如混合属性与事件时输出[input]input (event1)event1($event)、include与exclude同时给出时include生效、非点号键名输出[non-dot]this[non-dot]等。由此可见Angular 的 meta 级render之所以推荐使用argsToTemplate(args)而非手写[label]label [primary]primary就是为了让 story 文件中args对象与模板绑定始终一一对应不遗漏、不错绑、不破坏默认值语义。meta 级覆盖与第二参数 context在 docs/writing-stories/index.mdx 的 Custom rendering 小节第 134–219 行中官方明确了配套的几条行为规则写作 story 时应一并遵守覆盖规则meta 中定义的render可以在任意 story 上被重新定义从而对个别 story 特化渲染未覆盖的 story 则统一使用 meta 级模板context 参数render函数接收的第二个context参数包含该 story 的其余全部细节例如parameters静态元数据与globals全局工具状态。也就是说 meta 级 render 不仅能读当前 args还能根据 story 上下文做条件渲染与 Controls 联动只有正确展开 argsControls 面板才能把修改后的值重新注入模板实现“在 Storybook UI 里动态改 Button 属性”的调试闭环。对于装饰器场景官方文档将装饰器定义为“包裹 story 渲染的通用机制”而本文讨论的 meta 级render更适合处理“组件本身处于某种组合关系中”的情况。两者可以按需搭配装饰器解决横切关注点主题、Providermeta 级 render 解决单一组件的复合形态展示。小结把render从 story 提升到 meta是 CSF 组织复合组件展示的核心手法一份模板、多组 args、全文件生效。React/Vue 依赖原生展开语法传递 argsWeb Components 需要逐属性手写绑定Angular 则由argsToTemplate负责属性、事件与默认值语义的自动编排。无论使用 CSF 3 还是 CSF Next这套 meta 级自定义渲染的机制保持一致并可随时在单个 story 上覆盖以应对例外。若需进一步了解 args 的生命周期与 Controls 联动可继续查阅官方写作故事主文档 docs/writing-stories/index.mdx 的 Defining stories、Using args 相关小节以及本仓库中按渲染器划分的框架源码目录如 code/frameworks/angular、code/renderers/react、code/renderers/vue3、code/renderers/web-components对应的 renderer 实现。创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Storybook 元级自定义渲染：通过 Meta 中的 render 复用定制模板（CSF 3 与 CSF Next 全框架指南）
Storybook 元级自定义渲染通过 Meta 中的 render 复用定制模板CSF 3 与 CSF Next 全框架指南本指南围绕 Storybook 官方写作故事文档中“自定义渲染”Custom rendering的核心片段展开讲解如何在 CSF 的meta默认导出中定义统一的render函数让一个组件库的所有 story 共享同一套“组件套组件”的复合渲染模板同时覆盖 Angular、React、Vue、Web Components 四种渲染器以及 CSF 3 / CSF Next 两种编写范式。读完你将从三个层面掌握该能力为何要把render提升到 meta 层级、四种渲染器各自的模板写法与 args 传递差异以及如何借助 Angular 的argsToTemplate工具函数规避undefined绑定带来的默认值失效问题。背景Story 的默认渲染与“套壳”需求在 Storybook 中一个 story 捕获的是 UI 组件在给定一组参数args下的渲染状态。默认情况下story 会渲染meta即默认导出中声明的component并把当前 story 的args传入其中——这是 docs/writing-stories/index.mdx 中Stories一节对 CSF 的基本约定。但组件往往不是孤立存在的一个Button可能永远要被放在Alert、Card、表单布局等父组件中使用。若希望每个 story 在展示组件本体之外还要展示它在真实容器中的样子就需要“自定义渲染”——为 story 提供一个接收args并返回任意输出的render函数。例如把Button渲染进一个Alert中这个需求可以用单条 story 级render解决对应片段见 docs/_snippets/render-custom-in-story.md而当整个组件文件的每条 story 都需要这种“套壳”效果时逐条重复编写render既冗余又难维护。Storybook 的做法是允许把render定义在meta 层级从而让同文件内所有 story 共享同一渲染逻辑。这正是本次要讲解的官方代码片段 docs/_snippets/render-custom-in-meta.md 的全部内容。官方文档片段仅供在组件侧书写 story 使用它需要你本地已有Button、Alert两个组件文件以及可用的 Storybook 环境仓库为只读项目本文只介绍在你自己项目中如何照此编写。在 meta 中声明 render 的通用原则无论使用哪种渲染器meta 级 render都遵循同一套规则render接收args需要按当前渲染器的语法把组件拼进模板并返回渲染描述对象必须把args“展开”到内部目标组件上React 的{...args}、Vue 的v-bindargs、Angular 的argsToTemplate(args)、Web Components 的逐属性绑定。只有这样做Controls 等基于 args 的 addon 才能在 Storybook UI 中动态改写组件属性meta 级 render 可被 story 级 render 覆盖因此仍然可以对个别 story 做特化处理render还会收到第二个context参数内含该 story 的其他全部上下文包括parameters、globals等。官方片段给出的复合示例结构如下组件为Button容器为AlertDefaultInAlertargs { label: Button }PrimaryInAlertargs { primary: true, label: Button }下面按渲染器逐一看完整代码。Angular对象式模板 argsToTemplateAngular 渲染器的render需要返回一个“组件描述对象”包含props与template而不是 JSX 或模板字符串本身。官方示例把该对象的创建直接写在render内CSF 3 写法import { type Meta, type StoryObj, argsToTemplate } from storybook/angular; import { Button } from ./button.component; const meta: MetaButton { component: Button, render: (args) ({ props: args, template: demo-alert Alert text demo-button ${argsToTemplate(args)}/demo-button /demo-alert , }), }; export default meta; type Story StoryObjButton; export const DefaultInAlert: Story { args: { label: Button, }, }; export const PrimaryInAlert: Story { args: { primary: true, label: Button, }, };CSF Next 写法import { argsToTemplate } from storybook/angular; import preview from ../.storybook/preview; import { Button } from ./button.component; const meta preview.meta({ component: Button, render: (args) ({ props: args, template: demo-alert Alert text demo-button ${argsToTemplate(args)}/demo-button /demo-alert , }), }); export const DefaultInAlert meta.story({ args: { label: Button, }, }); export const PrimaryInAlert meta.story({ args: { primary: true, label: Button, }, });ReactJSX 渲染函数CSF 3 与 CSF NextReact 渲染器的render直接返回 JSX 元素。把 Button 的 props 用展开运算符透传给内部组件是保证 Controls 可用的关键。CSF 3.jsximport { Alert } from ./Alert; import { Button } from ./Button; export default { component: Button, render: (args) ( Alert Alert text Button {...args} / /Alert ), }; export const DefaultInAlert { args: { label: Button, }, }; export const PrimaryInAlert { args: { primary: true, label: Button, }, };CSF 3.tsx带类型标注// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc. import { Meta, StoryObj } from storybook/your-framework; import { Alert } from ./Alert; import { Button } from ./Button; const meta { component: Button, render: (args) ( Alert Alert text Button {...args} / /Alert ), } satisfies Metatypeof Button; export default meta; type Story StoryObjtypeof meta; export const DefaultInAlert: Story { args: { label: Button, }, }; export const PrimaryInAlert: Story { args: { primary: true, label: Button, }, };CSF Next .tsx / .jsximport preview from ../.storybook/preview; import { Alert } from ./Alert; import { Button } from ./Button; const meta preview.meta({ component: Button, render: (args) ( Alert Alert text Button {...args} / /Alert ), }); export const DefaultInAlert meta.story({ args: { label: Button, }, }); export const PrimaryInAlert meta.story({ args: { primary: true, label: Button, }, });Vuesetup 局部组件注册Vue 渲染器的render返回一个组件选项对象需要把Alert、Button注册进components在setup()中暴露args再用v-bindargs把参数透传给子组件。CSF 3.jsimport Alert from ./Alert.vue; import Button from ./Button.vue; export default { component: Button, render: (args) ({ components: { Alert, Button }, setup() { return { args }; }, template: AlertButton v-bindargs //Alert, }), }; export const DefaultInAlert { args: { label: Button, }, }; export const PrimaryInAlert { args: { primary: true, label: Button, }, };CSF 3.tssatisfies 标注import type { Meta, StoryObj } from storybook/vue3-vite; import Alert from ./Alert.vue; import Button from ./Button.vue; const meta { component: Button, render: (args) ({ components: { Alert, Button }, setup() { return { args }; }, template: AlertButton v-bindargs //Alert, }), } satisfies Metatypeof Button; export default meta; type Story StoryObjtypeof meta; export const DefaultInAlert: Story { args: { label: Button, }, }; export const PrimaryInAlert: Story { args: { primary: true, label: Button, }, };CSF Next .ts / .jsimport preview from ../.storybook/preview; import Alert from ./Alert.vue; import Button from ./Button.vue; const meta preview.meta({ component: Button, render: (args) ({ components: { Alert, Button }, setup() { return { args }; }, template: AlertButton v-bindargs //Alert, }), }); export const DefaultInAlert meta.story({ args: { label: Button, }, }); export const PrimaryInAlert meta.story({ args: { primary: true, label: Button, }, });Web ComponentsLit 模板与逐属性绑定Web Components 渲染器基于 Lit 的html标签模板。component字段直接填自定义元素标签名如demo-button渲染时不再有“组件引用”而是把每个 args 显式映射为属性绑定或布尔特性boolean attribute。CSF 3.jsimport html from lit; export default { component: demo-button, render: (args) html demo-alert Alert text demo-button ?primary${args.primary} label${args.label}/demo-button /demo-alert , }; export const DefaultInAlert { args: { label: Button, }, }; export const PrimaryInAlert { args: { primary: true, label: Button, }, };CSF 3.tsimport type { Meta, StoryObj } from storybook/web-components-vite; import html from lit; const meta: Meta { component: demo-button, render: (args) html demo-alert Alert text demo-button ?primary${args.primary} label${args.label}/demo-button /demo-alert , }; export default meta; type Story StoryObj; export const DefaultInAlert: Story { args: { label: Button, }, }; export const PrimaryInAlert: Story { args: { primary: true, label: Button, }, };CSF Next .tsimport html from lit; import preview from ../.storybook/preview; const meta preview.meta({ component: demo-button, render: (args) html demo-alert Alert text demo-button ?primary${args.primary} label${args.label}/demo-button /demo-alert , }); export const DefaultInAlert meta.story({ args: { label: Button, }, }); export const PrimaryInAlert meta.story({ args: { primary: true, label: Button, }, });需要留意的是Web Components 由于没有框架的“展开运算符”args 中的布尔开关通常用?attr${...}形式绑定普通属性用attr${...}绑定这意味着新增 args 时需要同步维护模板中的绑定行这与 React/Vue/Angular 的自动透传形成对比。CSF Next 与 CSF 3 的差异要点从上面的成对代码可以看出两种范式的结构差异官方代码片段同样保留了两种写法元数据来源不同CSF 3 用export default meta加type Story StoryObj...CSF Next 通过preview.meta({ ... })从项目的.storybook/preview注册信息中派生 metaexport 的是preview.meta()的返回值定义 story 的方式不同CSF 3 用具名导出对象export const DefaultInAlert: StoryCSF Next 用meta.story({ ... })方法创建 story 对象两者的 meta 级render语义完全一致component、render、args的配置位置与覆盖优先级都没有变化因此把现有 CSF 3 story 迁移到 CSF Next 时render函数体基本可以原样搬动。源码深挖Angular 的 argsToTemplate 到底解决了什么Angular 示例中的argsToTemplate是一个值得单独解释的工具函数其完整实现位于 code/frameworks/angular/src/client/argsToTemplate.ts并从 code/frameworks/angular/src/client/index.ts 作为公共 API 导出。它的核心行为函数签名与筛选逻辑见argsToTemplate.ts第 59–82 行过滤掉值为undefined的键。源码注释解释了原因Angular 会把属性绑定中的undefined当作真实值处理一旦[input2]input2绑定的运行时值是undefinedAngular 不会回退到组件属性声明的默认值。反过来若不写这一条绑定默认值虽然生效用户却无法通过 Controls 覆盖它——argsToTemplate恰好让“未传值时走内部默认值、传值时可由 Controls 改写”两个目标同时成立支持include/exclude白名单与黑名单且include优先于exclude见ArgsToTemplateOptions定义把值为函数的键渲染成事件绑定(key)key($event)把其余键渲染成属性绑定[key]key对含-等非点号命名的键自动改写为this[key]表达式保证模板语法合法。这些行为有完整的单元测试佐证位于 code/frameworks/angular/src/client/argsToTemplate.test.ts例如混合属性与事件时输出[input]input (event1)event1($event)、include与exclude同时给出时include生效、非点号键名输出[non-dot]this[non-dot]等。由此可见Angular 的 meta 级render之所以推荐使用argsToTemplate(args)而非手写[label]label [primary]primary就是为了让 story 文件中args对象与模板绑定始终一一对应不遗漏、不错绑、不破坏默认值语义。meta 级覆盖与第二参数 context在 docs/writing-stories/index.mdx 的 Custom rendering 小节第 134–219 行中官方明确了配套的几条行为规则写作 story 时应一并遵守覆盖规则meta 中定义的render可以在任意 story 上被重新定义从而对个别 story 特化渲染未覆盖的 story 则统一使用 meta 级模板context 参数render函数接收的第二个context参数包含该 story 的其余全部细节例如parameters静态元数据与globals全局工具状态。也就是说 meta 级 render 不仅能读当前 args还能根据 story 上下文做条件渲染与 Controls 联动只有正确展开 argsControls 面板才能把修改后的值重新注入模板实现“在 Storybook UI 里动态改 Button 属性”的调试闭环。对于装饰器场景官方文档将装饰器定义为“包裹 story 渲染的通用机制”而本文讨论的 meta 级render更适合处理“组件本身处于某种组合关系中”的情况。两者可以按需搭配装饰器解决横切关注点主题、Providermeta 级 render 解决单一组件的复合形态展示。小结把render从 story 提升到 meta是 CSF 组织复合组件展示的核心手法一份模板、多组 args、全文件生效。React/Vue 依赖原生展开语法传递 argsWeb Components 需要逐属性手写绑定Angular 则由argsToTemplate负责属性、事件与默认值语义的自动编排。无论使用 CSF 3 还是 CSF Next这套 meta 级自定义渲染的机制保持一致并可随时在单个 story 上覆盖以应对例外。若需进一步了解 args 的生命周期与 Controls 联动可继续查阅官方写作故事主文档 docs/writing-stories/index.mdx 的 Defining stories、Using args 相关小节以及本仓库中按渲染器划分的框架源码目录如 code/frameworks/angular、code/renderers/react、code/renderers/vue3、code/renderers/web-components对应的 renderer 实现。创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考