prisma-docs-generator 打印层揭秘HTMLPrinter 组装目录、模型与类型页面的原理【免费下载链接】prisma-docs-generatorPrisma generator for automatically generating documentation reference from the Prisma schema.项目地址: https://gitcode.com/gh_mirrors/pr/prisma-docs-generatorprisma-docs-generator 是一个 Prisma 生成器读取你的 schema.prisma自动生成一份可交互的数据库文档参考页。本文带你看透它的打印层——HTMLPrinter如何在一次prisma generate中把目录TOC、模型Models与类型Types三块内容拼装成一张静态 HTML 页面全程零手写模板。 30 秒速览prisma-docs-generator 能做什么输入prisma/schema.prisma中定义的数据模型输出prisma/docs/index.html 一份 Tailwind 风格的main.css触发方式在 schema 里注册生成器后执行npx prisma generate预览方式npx prisma-docs-generator serve起一个本地静态服务安装并注册只需一小步generator docs { provider node node_modules/prisma-docs-generator }之后每次 schema 有变更、重新 generate文档就会自动跟随更新这就是文档即代码的快乐所在。 打印层入口从 DMMF 到 HTML 的完整链路整条流水线由入口文件src/index.ts串联流程非常直白读取生成器配置如includeRelationFields调用transformDMMF源码位于src/generator/transformDMMF.ts对 Prisma 的 DMMF 元数据做预处理用处理后的数据实例化new HTMLPrinter(dmmf)在 output 目录下写入index.html和styles/main.css而HTMLPrinter本身定义在src/printer/index.ts它实现了一个统一的Generatable接口data/getData/toHTML接口声明在src/generator/helpers.ts。这个接口让每个子生成器都遵循数据归一 → 渲染 HTML的套路打印层才敢放心地把它们组合起来。HTMLPrinter.toHTML()就是整条装配线它依次创建三个子生成器再把它们吐出的 HTML 片段按页面骨架拼接——TOCGeneratorsrc/generator/toc.ts→ 侧边栏导航ModelGeneratorsrc/generator/model.ts→ 模型主体内容TypesGeneratorsrc/generator/apitypes.ts→ 输入/输出类型详情 三大子生成器各自负责哪一块1️⃣ 目录生成器 TOCGenerator侧边栏不是手写的而是从数据推导出来的每个模型渲染成一个分组内含Fields与Operations两小节类型区分为Input Types与Output Types两组每个条目都是一个锚点链接命名约定为#model-{模型名}-{字段/操作}、#type-inputType-{类型名}这样的模式这份锚点命名规则就是目录与正文之间的契约目录只生产链接正文只生产锚点两边靠约定对齐改一处不用改两处。2️⃣ 模型生成器 ModelGenerator这是信息密度最高的一块每个模型渲染为模型标题带锚点与描述来自 schema 里的注释文档指令表格id、unique、index等属性一览Fields 表格Name / Type / Attributes / Required / Comment 五列Operations 区块create、findUnique、findMany、update、upsert、delete等操作各占一节附描述文字、Prism.js 高亮的调用示例、Input 参数表与 Output 类型说明值得一提的是字段类型如果指向另一个模型会被渲染成指向类型区的锚点链接——单页文档的超链接感就是这样实现的。3️⃣ 类型生成器 TypesGenerator负责把 Prisma 自动推导出的输入/输出类型对象如UserWhereInput、User等逐条展开每个类型一个标题加一张 Name / Type / Nullable 三列表格非基础类型的字段之间同样互相锚点跳转方便顺着类型图谱一路点下去。 HTML 组装细节一页静态文档如何长出来页面骨架同样由HTMLPrinter用模板字符串拼出几个关键设计head极简只引一份styles/main.css由styles_generator/中的 Tailwind 工程构建而来布局用 Flex 实现左侧w-1/5的粘性sticky侧边栏放 Logo 与目录右侧放模型 类型主体全部内容渲染在同一个页面里导航完全依赖锚点因此不需要任何前端路由——这也解释了为什么 serve 命令一个 express 静态服务就够代码高亮交给 Prism.js模型操作的示例代码在生成时就被 highlight 好⚙️ 数据源头transformDMMF 的预处理打印层拿到的并不是原始 DMMF而是src/generator/transformDMMF.ts加工过的版本若配置includeRelationFields false会过滤掉所有关系字段让文档更清爽统一 mappings 命名差异例如findSingle/findOne/findUnique归一为findUnique模型生成器因此可以按一套稳定接口渲染不用关心 Prisma 不同版本间的字段别名 生成后快速预览serve 命令的原理src/cli.ts提供了serve子命令它先从 schema 中定位本生成器的输出路径再用 express 以静态目录方式托管默认端口 5858可用--port修改。启动后浏览器打开http://localhost:5858即可翻阅刚生成的 Prisma 文档参考页。 关键文件速查清单文件路径职责src/index.ts生成器入口配置读取、落盘 index.html 与样式src/printer/index.tsHTMLPrinter主装配器页面骨架 三大子生成器src/generator/toc.ts侧边栏目录模型、操作、类型导航src/generator/model.ts模型区块指令表、字段表、操作示例src/generator/apitypes.ts输入/输出类型区块src/generator/transformDMMF.tsDMMF 预处理过滤关系字段、归一 mappingssrc/generator/helpers.tsGeneratable接口与类型判断工具src/cli.tsserve静态服务expressstyles_generator/Tailwind 样式构建工程prisma/schema.prisma自带示例 schema可直接跑通生成流程src/tests/快照测试守护目录与模型渲染结果✅ 小结prisma-docs-generator 的打印层看似只是拼 HTML 字符串实则是一套小而美的分层设计transformDMMF先把 Prisma 元数据洗成稳定结构三个子生成器各自负责目录、模型、类型共用同一套锚点契约HTMLPrinter把它们装配成单页静态 HTML配合 express 静态服务即可预览如果你想动手改主题或增加内容区块从src/printer/index.ts入手再顺着src/generator/下的三个文件走一遍十分钟就能摸清全貌。【免费下载链接】prisma-docs-generatorPrisma generator for automatically generating documentation reference from the Prisma schema.项目地址: https://gitcode.com/gh_mirrors/pr/prisma-docs-generator创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 prisma-docs-generator 打印层揭秘：HTMLPrinter 组装目录、模型与类型页面的原理
prisma-docs-generator 打印层揭秘HTMLPrinter 组装目录、模型与类型页面的原理【免费下载链接】prisma-docs-generatorPrisma generator for automatically generating documentation reference from the Prisma schema.项目地址: https://gitcode.com/gh_mirrors/pr/prisma-docs-generatorprisma-docs-generator 是一个 Prisma 生成器读取你的 schema.prisma自动生成一份可交互的数据库文档参考页。本文带你看透它的打印层——HTMLPrinter如何在一次prisma generate中把目录TOC、模型Models与类型Types三块内容拼装成一张静态 HTML 页面全程零手写模板。 30 秒速览prisma-docs-generator 能做什么输入prisma/schema.prisma中定义的数据模型输出prisma/docs/index.html 一份 Tailwind 风格的main.css触发方式在 schema 里注册生成器后执行npx prisma generate预览方式npx prisma-docs-generator serve起一个本地静态服务安装并注册只需一小步generator docs { provider node node_modules/prisma-docs-generator }之后每次 schema 有变更、重新 generate文档就会自动跟随更新这就是文档即代码的快乐所在。 打印层入口从 DMMF 到 HTML 的完整链路整条流水线由入口文件src/index.ts串联流程非常直白读取生成器配置如includeRelationFields调用transformDMMF源码位于src/generator/transformDMMF.ts对 Prisma 的 DMMF 元数据做预处理用处理后的数据实例化new HTMLPrinter(dmmf)在 output 目录下写入index.html和styles/main.css而HTMLPrinter本身定义在src/printer/index.ts它实现了一个统一的Generatable接口data/getData/toHTML接口声明在src/generator/helpers.ts。这个接口让每个子生成器都遵循数据归一 → 渲染 HTML的套路打印层才敢放心地把它们组合起来。HTMLPrinter.toHTML()就是整条装配线它依次创建三个子生成器再把它们吐出的 HTML 片段按页面骨架拼接——TOCGeneratorsrc/generator/toc.ts→ 侧边栏导航ModelGeneratorsrc/generator/model.ts→ 模型主体内容TypesGeneratorsrc/generator/apitypes.ts→ 输入/输出类型详情 三大子生成器各自负责哪一块1️⃣ 目录生成器 TOCGenerator侧边栏不是手写的而是从数据推导出来的每个模型渲染成一个分组内含Fields与Operations两小节类型区分为Input Types与Output Types两组每个条目都是一个锚点链接命名约定为#model-{模型名}-{字段/操作}、#type-inputType-{类型名}这样的模式这份锚点命名规则就是目录与正文之间的契约目录只生产链接正文只生产锚点两边靠约定对齐改一处不用改两处。2️⃣ 模型生成器 ModelGenerator这是信息密度最高的一块每个模型渲染为模型标题带锚点与描述来自 schema 里的注释文档指令表格id、unique、index等属性一览Fields 表格Name / Type / Attributes / Required / Comment 五列Operations 区块create、findUnique、findMany、update、upsert、delete等操作各占一节附描述文字、Prism.js 高亮的调用示例、Input 参数表与 Output 类型说明值得一提的是字段类型如果指向另一个模型会被渲染成指向类型区的锚点链接——单页文档的超链接感就是这样实现的。3️⃣ 类型生成器 TypesGenerator负责把 Prisma 自动推导出的输入/输出类型对象如UserWhereInput、User等逐条展开每个类型一个标题加一张 Name / Type / Nullable 三列表格非基础类型的字段之间同样互相锚点跳转方便顺着类型图谱一路点下去。 HTML 组装细节一页静态文档如何长出来页面骨架同样由HTMLPrinter用模板字符串拼出几个关键设计head极简只引一份styles/main.css由styles_generator/中的 Tailwind 工程构建而来布局用 Flex 实现左侧w-1/5的粘性sticky侧边栏放 Logo 与目录右侧放模型 类型主体全部内容渲染在同一个页面里导航完全依赖锚点因此不需要任何前端路由——这也解释了为什么 serve 命令一个 express 静态服务就够代码高亮交给 Prism.js模型操作的示例代码在生成时就被 highlight 好⚙️ 数据源头transformDMMF 的预处理打印层拿到的并不是原始 DMMF而是src/generator/transformDMMF.ts加工过的版本若配置includeRelationFields false会过滤掉所有关系字段让文档更清爽统一 mappings 命名差异例如findSingle/findOne/findUnique归一为findUnique模型生成器因此可以按一套稳定接口渲染不用关心 Prisma 不同版本间的字段别名 生成后快速预览serve 命令的原理src/cli.ts提供了serve子命令它先从 schema 中定位本生成器的输出路径再用 express 以静态目录方式托管默认端口 5858可用--port修改。启动后浏览器打开http://localhost:5858即可翻阅刚生成的 Prisma 文档参考页。 关键文件速查清单文件路径职责src/index.ts生成器入口配置读取、落盘 index.html 与样式src/printer/index.tsHTMLPrinter主装配器页面骨架 三大子生成器src/generator/toc.ts侧边栏目录模型、操作、类型导航src/generator/model.ts模型区块指令表、字段表、操作示例src/generator/apitypes.ts输入/输出类型区块src/generator/transformDMMF.tsDMMF 预处理过滤关系字段、归一 mappingssrc/generator/helpers.tsGeneratable接口与类型判断工具src/cli.tsserve静态服务expressstyles_generator/Tailwind 样式构建工程prisma/schema.prisma自带示例 schema可直接跑通生成流程src/tests/快照测试守护目录与模型渲染结果✅ 小结prisma-docs-generator 的打印层看似只是拼 HTML 字符串实则是一套小而美的分层设计transformDMMF先把 Prisma 元数据洗成稳定结构三个子生成器各自负责目录、模型、类型共用同一套锚点契约HTMLPrinter把它们装配成单页静态 HTML配合 express 静态服务即可预览如果你想动手改主题或增加内容区块从src/printer/index.ts入手再顺着src/generator/下的三个文件走一遍十分钟就能摸清全貌。【免费下载链接】prisma-docs-generatorPrisma generator for automatically generating documentation reference from the Prisma schema.项目地址: https://gitcode.com/gh_mirrors/pr/prisma-docs-generator创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考