在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

storybookjs/storybook

菜单

框架渲染器

相关源文件

框架渲染器负责将 Storybook 的通用故事执行模型适配到 Vue、React、Angular 等特定的前端框架。它们实现了特定于框架的渲染逻辑、组件挂载以及文档源代码生成。

有关渲染器集成的更广泛的插件系统的信息，请参阅 插件系统。有关编排渲染器执行的核心预览系统的信息，请参阅 预览系统。

渲染器架构概述

框架渲染器遵循标准化的接口，使 Storybook 能够在不同的前端框架中渲染故事，同时保持诸如控件、操作和文档生成等功能的行为一致。

来源：code/renderers/vue3/src/render.ts1-176 code/renderers/react/src/docs/jsxDecorator.tsx1-266 code/frameworks/angular/src/client/docs/sourceDecorator.ts1-63

核心渲染器接口

Vue 3 渲染器体现了所有框架渲染器实现的标准渲染器接口。核心函数提供了故事渲染、组件挂载和响应式更新。

render 函数从故事组件创建 Vue 渲染函数

renderToCanvas 函数管理完整的渲染生命周期，包括应用创建、挂载和清理。它维护一个活动 Vue 应用的映射，以实现高效的更新和正确的清理。

来源：code/renderers/vue3/src/render.ts10-19 code/renderers/vue3/src/render.ts43-112 code/renderers/vue3/src/render.ts35-41

源代码生成系统

每个框架渲染器都实现了源代码装饰器，用于为文档生成可读的源代码。这些装饰器分析故事参数和组件元数据，以生成适合框架的代码示例。

Vue 源代码装饰器展示了复杂的代码生成过程

  • generateSourceCode 协调整个生成过程
  • generatePropsSourceCode 处理属性绑定，支持 v-model 指令
  • generateSlotSourceCode 为 slot 内容创建模板块
  • parseDocgenInfo 提取组件元数据以进行准确的代码生成

来源：code/renderers/vue3/src/docs/sourceDecorator.ts42-57 code/renderers/vue3/src/docs/sourceDecorator.ts64-106 code/renderers/vue3/src/docs/sourceDecorator.ts199-341

特定于框架的实现

Vue 3 渲染器

Vue 3 渲染器提供了与 Vue 的组合式 API 和响应式系统深度集成。它支持组件挂载、响应式参数更新以及复杂的源代码生成。

主要功能

  • 通过 globalThis.PLUGINS_SETUP_FUNCTIONS 注册 setup 函数
  • 使用 updateArgs 进行响应式参数管理
  • 使用 getSlots 函数处理 slot
  • 与 Vue 的 errorHandler 集成错误边界

React 渲染器

React 渲染器专注于 JSX 生成和组件显示名称解析。它处理 React 特有的问题，如 forward refs、memo 组件和基于 Symbol 的组件。

主要功能

  • 用于 JSX 字符串生成的 renderJsx 函数
  • 用于 React Symbol 解析的 getReactSymbolName
  • 使用 mdxToJsx 进行 MDX 元素转换
  • 组件类型检测以获得正确的显示名称

Angular 渲染器

Angular 渲染器与 Angular 的模板系统集成，并提供基于组件元数据和模板分析的源代码生成。

主要功能

  • 用于模板生成的 computesTemplateSourceFromComponent
  • 与 Angular 组件元数据集成
  • 支持基于组件和基于模板的故事

来源：code/renderers/vue3/src/render.ts21-33 code/renderers/react/src/docs/jsxDecorator.tsx39-51 code/frameworks/angular/src/client/docs/sourceDecorator.ts26-62

集成模式

框架渲染器通过标准化的装饰器模式和事件系统与 Storybook 核心集成。源代码装饰器使用 emitTransformCode 函数将生成的源代码传回文档系统。

所有框架渲染器都实现了代码生成的一致性跳过逻辑

  • 如果 parameters.docs.source.type 为 SourceType.CODE，则跳过
  • 如果通过 parameters.docs.source.code 提供了自定义源代码，则跳过
  • 如果故事不是 args 故事（除非强制使用 SourceType.DYNAMIC），则跳过
  • 特定于框架的跳过条件（例如，Svelte CSF 检测）

渲染器中的 shouldSkipSourceCodeGeneration 和类似函数在保持一致性的同时允许框架扩展。

来源：code/renderers/vue3/src/docs/sourceDecorator.ts116-128 code/renderers/react/src/docs/jsxDecorator.tsx205-217 code/renderers/html/src/docs/sourceDecorator.ts9-22