ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

fumadocs-typescript 类型表生成实战:从 ts-morph 到 TypeScript 7 原生编译器

fumadocs-typescript 类型表生成实战:从 ts-morph 到 TypeScript 7 原生编译器 fumadocs-typescript 类型表生成实战从 ts-morph 到 TypeScript 7 原生编译器【免费下载链接】fumadocsThe beautiful flexible React.js docs framework.项目地址: https://gitcode.com/GitHub_Trending/fu/fumadocsFumadocs 是构建于 React.js 之上的文档框架其fumadocs-typescript包负责把 TypeScript 源码中的类型声明自动转换为文档站点里可读的类型表Type Table。本文基于仓库内 packages/typescript/CHANGELOG.md 的演进记录结合 packages/typescript/src 下的真实实现系统讲解fumadocs-typescript的安装配置、createGenerator与remarkAutoTypeTable两大核心 API、JSDoc 标签约定、缓存机制以及它从 ts-morph 迁移到 TypeScript 7 原生编译器背后的性能与行为变化读完即可在自己的 Fumadocs 站点中落地自动类型文档。包定位TypeScript 与 Fumadocs 之间的桥梁fumadocs-typescript在 packages/typescript/README.md 中的定位只有一句话Typescript Integration for Fumadocs.其职责是读取源码中的类型/类/接口声明把它们序列化成结构化数据再交由 Fumadocs UI 的TypeTable组件渲染。包入口 packages/typescript/src/index.ts 导出四部分内容/lib/basecreateGenerator、GeneratedDoc、DocEntry、GenerateOptions等核心生成逻辑./markdown的类型MarkdownRenderer用于把类型字符串和描述渲染为 HAST/React 节点/lib/remark-auto-type-tableremarkAutoTypeTableMDX 编译插件./cache与./cache/fs-cache文件系统缓存适配器。在 Fumadocs 文档站点仓库的apps/docs以及examples/next、examples/tanstack-start等示例中类型表正是通过该包自动生成的。版本演进主线五步看懂 CHANGELOG结合 packages/typescript/CHANGELOG.md可以梳理出这条演进主线版本关键变化2.0.0引入fumadocs-docgen新增remarkDocGen插件体系3.1.0新增remarkAutoTypeTable插件废弃 MDX 生成器4.0.0引入createGeneratorAPI统一复用编译器实例5.0.0生成文档改为 async移除废弃 API缓存改为显式声明5.4.0弃用 ts-morph改用 TypeScript 7 原生编译器tsgo下面按这条主线逐层深入。remarkAutoTypeTable在 MDX 中声明式生成类型表3.1.0 起类型表生成从先跑脚本产出 MDX 文件的模式改为在 MDX 源文件里直接放置AutoTypeTable /组件由 packages/typescript/src/lib/remark-auto-type-table.ts 在编译期完成转换。该插件会遍历 MDX 树中名为auto-type-table默认值的 JSX 流元素收集path、name、type、cwd四个受支持的属性其余属性原样透传给输出组件path目标 TypeScript 源文件路径配合basePath或cwd解析name要生成文档的导出名类、接口、类型别名等type直接内联一个类型表达式适合文档中临时定义的类型cwd置为true时以file.cwdMDX 编译的工作目录为基准解析path。一个典型的 MDX 用法如下import { AutoTypeTable } from fumadocs-typescript; AutoTypeTable path./types.ts nameButtonProps /插件处理时会把每个auto-type-table节点替换为若干个TypeTable节点outputName默认值每个节点携带idtype-table-docId以及一个序列化后的type属性表达式。从源码看remarkAutoTypeTable还支持以下配置项RemarkAutoTypeTableOptionsname匹配的自定义组件名默认auto-type-tableoutputName输出的组件名默认TypeTablegenerator复用已有的Generator实例默认内部创建一个renderMarkdown/renderType自定义渲染函数默认使用 Shiki 渲染shiki使用默认渲染器时的 Shiki 配置options透传给类型表生成的GenerateTypeTableOptionsremarkStringify默认true将生成的文档 JSON 字符串化便于remark-stringify等场景。输出数据的形状无论走 MDX 插件还是直接使用组件生成结果都遵循 base.ts 中定义的 DocEntry 结构interface DocEntry { name: string; description: string; type: string; // 完整类型文本 typeHref?: string; // 由 fumadocsHref 标签注入的类型跳转链接 simplifiedType: string;// 简化形式如 object / array / function / 联合名 tags: RawTag[]; // JSDoc 标签原文 required: boolean; // 是否必填 deprecated: boolean; // 是否标记 deprecated }GeneratedDoc顶层还包含id由文件名与导出名哈希生成与整个导出的description。createGenerator编译器实例的复用与 async 化4.0.0 之前API 是分散的generateDocumentation()、generateMDX()、generateFiles()每次调用都可能在内部创建编译环境4.0.0 统一为createGenerator确保编译器实例始终被复用import { createGenerator } from fumadocs-typescript; const generator createGenerator({ // 5.0.0 起显式声明缓存见下文 cache: createFileSystemGeneratorCache(.next/fumadocs-typescript), });随后所有能力都挂在 generator 实例上await generator.generateDocumentation({ path: ./file.ts }, MyClass); const processor createProcessor({ remarkPlugins: [[remarkAutoTypeTable, { generator }]], }); return AutoTypeTable generator{generator} {...props} /;5.0.0 将generator.generateDocumentation()强制改为 asyncMajor Changes中明确说明这是为了支持 async 缓存适配器并移除了独立导出的generateDocumentation()函数以及generateFiles/MDX 生成 API后者一律改用remarkAutoTypeTable。从源码看生成主流程packages/typescript/src/lib/base.ts 中的createGenerator返回对象包含两个方法generateDocumentation(file, name, options)读取文件内容允许通过file.content传内存版本文本避免落盘计算缓存 key哈希内容包括文件路径、导出名、文件内容与包版本号命中缓存直接返回否则通过project.getSourceFile()把文件加载进编译程序遍历模块导出找到与name匹配的符号自动处理SymbolFlags.Alias别名的getAliasedSymbol再对每个属性生成DocEntrygenerateTypeTable(props, options)转发到 type-table.ts 的 getTypeTableOutput处理type属性单行时自动包装为export type $Fumadocs ...多行时要求手动导出并配合name指定类型名。可用的生成选项GenerateOptionsbase.ts包含allowInternal默认为false为true时允许带internal标签的字段进入文档transform回调函数可修改输出的DocEntrythis上下文暴露programTypeScript 7 的Project、checker、type与declarationtypeSimplifierTypeSimplifierOptions控制简化类型生成含shouldSimplify、override、noUndefined三个子项。从源码看getDocEntry会先过滤私有类成员TypeScript 对#name暴露的转义名以#或__#开头再依次计算可选性、JSDoc 标签、完整类型使用UseAliasDefinedOutsideCurrentScope | NoTruncation标志与简化类型可选属性传入noUndefined: true。简化类型生成原理类型表同时展示完整类型与简化类型两列后者由 packages/typescript/src/lib/get-simple-form.ts 的getSimpleForm实现规则如下带undefined且noUndefined为 true 时返回空串可选属性因此不再把undefined计入类型描述有类型别名时递归展开别名参数如FooBar联合类型union默认输出union但noUndefined时会先剔除undefined成员若只剩一个成员则递归取其简化形式——这正是 CHANGELOG 5.2.1 中修复的 noUndefinedfor union types ingetSimpleForm() 行为交叉类型intersection对每个成员取简化形式、去掉空串与never后用拼接并去重对象类型按tuple、array、function、object分类其余情况回退到checker.typeToString输出原生类型名。该逻辑在 packages/typescript/test/type-gen.test.ts 中有对应的测试用例覆盖。JSDoc 标签控制类型表的文档语义CHANGELOG 中多个 patch 都与标签解析相关以下是 base.ts 中 getDocEntry 的标签处理 与 parse-tags.ts 共同支持的标签体系标签作用internal从文档中排除该字段除非allowInternal为 true1.0.1 引入fumadocsType用标签内的反引号包裹内容替换完整类型4.0.14 引入fumadocsHref为属性的完整类型添加跳转链接typeHref5.1.3 引入remarks用反引号包裹内容替换简化类型4.0.9 修复其与完整类型的对应关系deprecated将该属性标记为 deprecated并在表格中展示删除线样式default/defaultValue展示默认值param解析为参数列表名称 - 描述格式用于函数/方法参数的展示returns展示返回值说明例如export interface ButtonProps { /** * 按钮文案。 * default Submit */ label?: string; /** internal 内部使用的渲染节点 */ _internal?: ReactNode; /** * 点击回调。 * param event 鼠标事件 * returns 无 */ onClick?: (event: MouseEvent) void; /** deprecated 使用 onPress 替代 */ onPressOld?: () void; }解析后的param/default/returns会通过 parseTags 被映射为TypeTable的parameters、default、returns渲染字段AutoTypeTable组件packages/typescript/src/ui/auto-type-table.tsx在客户端渲染时同样调用parseTags还原这些元数据。缓存5.0.0 起必须显式开启5.0.0 之前文件系统缓存默认开启但目录不可配置且仅支持 Next.js5.0.0 改为默认关闭、显式声明。官方迁移指引要求更新所有createGenerator()调用import { createGenerator, createFileSystemGeneratorCache, } from fumadocs-typescript; const generator createGenerator({ // 5.0.0 起必须显式声明缓存 cache: createFileSystemGeneratorCache(.next/fumadocs-typescript), });从 base.ts 的实现看缓存命中与否通过generateHash(${file.path}:${name}:${content}:${packageVersion})计算 key——包版本号参与哈希因此升级依赖后缓存会自动失效重建缓存读写均为await的异步调用这也是 5.0.0 要求生成方法 async 的直接原因。缓存适配器实现位于 packages/typescript/src/cache/fs-cache.tsGeneratorOptions.cache允许传入任意满足Cache接口的实现默认为false关闭。5.4.0迁移到 TypeScript 7 原生编译器CHANGELOG 中最重要的变化是 5.4.0fumadocs-typescript不再使用 ts-morph改为通过typescript/unstable/syncAPI 驱动 TypeScript 7 原生编译器tsgo并将编译器作为依赖打包因此无论宿主项目使用哪个 TypeScript 版本包括程序化 API 尚未稳定的 TypeScript 7都能正常工作。性能与行为变化加载范围更小只把被文档引用的文件及其 import 链加载进编译器而不是整个tsconfig.json项目。Fumadocs 官网实测冷生成约快 5 倍首张表 500ms → 50ms后续表 20ms → 5ms内存占用约减半。这些数据来自 CHANGELOG 的官方记录属于 Fumadocs 站点的基准值具体数值会随项目规模与机器配置不同。Hook 参数类型变化transform与typeSimplifier接收的不再是 ts-morph 包装对象而是 TypeScript 7 API 对象Type、Symbol、Checker、Nodethis.program是 TypeScript 7 的Project同时新增this.checker。project选项类型变化createGenerator({ project })现在接收createProject()返回的Project见下。成员顺序变化映射类型如Pick与联合类型的成员可能按原生编译器顺序输出与 ts-morph 时代可能不同。原生编译器的工程化封装packages/typescript/src/lib/project.ts 中的createProject展示了这套封装的核心技巧生成一个虚拟tsconfig.fumadocs-typescript.json冲突时自动递增后缀通过extends继承用户 tsconfig但把include置空、files只放被加载的文件从而保持编译程序最小化通过API的fs.readFile钩子拦截文件读取实现内存虚拟文件覆盖磁盘virtualFiles映射因此generateDocumentation可以直接传入不落盘的源码内容使用updateSnapshot增量更新编译快照changed/created文件列表并在替换快照时dispose()旧快照释放内存提供close()关闭原生 TypeScript 进程。5.2.x 与 5.3.0 的周边演进5.3.0内部包与模板默认从 Radix UI 切换到 Base UI5.2.7用cnfast替换tailwind-merge此前 5.2.6 还在升级 ts-morph印证了 5.4.0 迁移前的过渡状态5.2.2修复remarkAutoTypeTable未把deprecated字段序列化进 MDX 输出的问题5.1.3类型表支持 props 透传并支持 ID 与fumadocsHref标签5.1.0/5.1.5Markdown 渲染改用 Universal Shiki 配置并升级 Shiki.js v45.0.1改进错误信息改用 tsdown 打包。从 fumadocs-docgen 到完整接入流程2.0.0 曾把remark-dynamic-content、remark-install插件迁移到独立的fumadocs-docgen包并新增代码块驱动的remarkDocGen语法json doc-gen:file 这条脉络说明 Fumadocs 的文档生成是插件化的。但对类型表而言现代推荐路径始终是一个 generator MDX 内嵌组件安装fumadocs-typescript对 Fumadocs 16 系列包以fumadocs-core、fumadocs-ui为 peer 依赖5.2.5 起更新了 peer 依赖约束且 4.0.6 将types/react设为可选 peer 依赖以避免 monorepo 版本冲突在 MDX 中引入并放置AutoTypeTable /或在 remark 插件列表中注册[remarkAutoTypeTable, { generator }]在createGenerator()中显式配置createFileSystemGeneratorCache()以加速增量构建为源文件补充default、param、returns、deprecated、fumadocsType等标签获得完整的表格语义如对渲染有特殊需求通过transform/typeSimplifierHook 或renderMarkdown/renderType自定义输出。小结从 CHANGELOG 与源码对照可以确认fumadocs-typescript的演进始终围绕更快的生成、更简洁的 API、更可控的缓存展开——5.4.0 的 TypeScript 7 原生编译器迁移带来约 5 倍冷生成提速与近半内存占用下降官方站点基准5.0.0 的显式缓存与 async API 让缓存适配器可插拔4.0.0 的createGenerator统一了编译器实例生命周期。若要深入实践可在仓库内继续阅读 remark-auto-type-table.ts 的插件实现、type-gen.test.ts 的生成测试、index.test.ts 的标签解析测试以及examples/next、examples/tanstack-start中类型表的实际接线方式。【免费下载链接】fumadocsThe beautiful flexible React.js docs framework.项目地址: https://gitcode.com/GitHub_Trending/fu/fumadocs创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表