组件库文档站怎么搭Svelte Materialify 用 api-generator 自动生成 60 个组件 API 参考实战【免费下载链接】svelte-materialifyA Material UI Design Component library for Svelte heavily inspired by vuetify.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-materialifySvelte Materialify 是一个受 Material Design 启发的 Svelte 组件库它的文档站里 60 多个组件的 API 参考页Props / Events / Slots 表格全部由 api-generator 工具从源码自动生成。本文带你拆解这套改源码 → 跑一条命令 → 文档全量更新的完整做法新手也能照搬。为什么组件库的 API 文档不该手写组件库最大的维护痛点是文档腐烂组件加了 prop、改了默认值手写文档却忘了同步。Svelte Materialify 的解法很简单——单一数据源 组件源码本身API 文档只是它的编译产物。库里有 61 个.svelte组件文件每个文件在文档站都对应一页 API 参考。手写 61 张属性表几乎不可能长期维护自动生成则是零边际成本。整体架构Monorepo 三件套项目用 Lerna 管理三个包各管一段包职责关键路径svelte-materialify组件源码61 个.svelte文件 样式 actionssrc/api-generatorAPI 文档生成器产物即 npm 包svelte-materialify-apihelpers/generate.jsdocs基于 Sapper 的文档站Markdown 可交互示例 API 页面package.json依赖方向是单向的docs依赖api-generator的产物api-generator只读取组件源码互不污染。api-generator三步流水线生成器核心就是一个约 60 行的脚本 helpers/generate.js流程分三步1️⃣ 扫描组件源码用globby匹配../svelte-materialify/src/**/*.svelte拿到全部组件文件路径——新增组件文件后无需改任何配置自动进入生成范围。2️⃣ 用 sveltedoc-parser 解析成 JSONsveltedoc-parser{ version: 3, name: Alert, data: [ { visibility: public, name: visible, type: { kind: type, text: boolean, type: boolean }, defaultValue: true } ] }同时自动生成两个索引文件src/all.json所有组件名列表导航要用src/index.js把 60 个 JSON 全部 re-export 的入口文件3️⃣ Rollup 打包成 UMD 产物rollup terser把index.js打包为dist/index.jsUMD 格式随后发布为svelte-materialify-api包供文档站直接import * as Docs from svelte-materialify-api。在 api-generator/package.json 中整个流程浓缩为一条命令yarn api # 等价于 node helpers/generate.js改组件 → 跑yarn api→ 60 页 API 文档全部刷新。文档站如何渲染 API 页面docs 是一个 Sapper 应用API 页面用动态路由实现只有两个文件① 数据端点src/routes/api/[slug].json.js按 URL 中的slug从svelte-materialify-api里查对应 JSON查到返回 200查不到直接 404const output Docs[slug];② 展示页src/routes/api/[slug].sveltepreload拿到数据后用组件库自己的Table渲染三张表Props属性 / 默认值 / 描述、Events、Slots并自动过滤visibility ! public的内部属性。③ 导航零维护src/util/routes.js 里侧边栏API分组的 60 多个链接是循环生成的items: API.names.map((i) ({ text: ${i} API, href: /api/${i}/ }))新增组件后导航条目、数据端点、页面渲染三处全部自动生效这正是单一数据源的好处。顺手加菜可交互示例 Markdown 一体化除了 API 页文档站还有两个值得一提的机制示例代码自动增强scripts/examples.js 在编译期给src/examples/下每个示例自动注入MaterialApp包裹和 Prism 高亮[Example.svelte](https://link.gitcode.com/i/8274604fc0d42c2bc67227891fc142ac)再动态加载渲染——文档作者写纯组件代码即可不用管包装。Markdown 页面统一布局scripts/preprocess.js 用 mdsvex 把.md编译为 Svelte配remark-*插件组自动给标题加锚点、给外部链接加图标所有 md 页面共享同一个 Layout.svelte。也就是说教程页Markdown 示例页组件 API 页生成数据三种页面共用一套框架互不重复。给新手的 5 点复刻清单想给自家组件库搭文档站可以照抄这 5 个决策别手写 API 表用 sveltedoc-parser 类工具从源码解析属性表永远是编译产物索引文件也要生成all.json/index.js导航、端点、入口一处配置全生效用动态路由[slug]承载所有组件页一个页面模板吃下所有组件数据与展示分离JSON 端点 Svelte 模板将来换主题、换站点框架都不用动生成器把生成命令写进 package.json scripts如yarn api降低记得重新生成的门槛这套源码 → JSON → UMD 包 → 文档站的单向流水线就是 Svelte Materialify 60 页 API 文档零手工维护的全部秘密。【免费下载链接】svelte-materialifyA Material UI Design Component library for Svelte heavily inspired by vuetify.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-materialify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 组件库文档站怎么搭？Svelte Materialify 用 api-generator 自动生成 60 个组件 API 参考实战
组件库文档站怎么搭Svelte Materialify 用 api-generator 自动生成 60 个组件 API 参考实战【免费下载链接】svelte-materialifyA Material UI Design Component library for Svelte heavily inspired by vuetify.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-materialifySvelte Materialify 是一个受 Material Design 启发的 Svelte 组件库它的文档站里 60 多个组件的 API 参考页Props / Events / Slots 表格全部由 api-generator 工具从源码自动生成。本文带你拆解这套改源码 → 跑一条命令 → 文档全量更新的完整做法新手也能照搬。为什么组件库的 API 文档不该手写组件库最大的维护痛点是文档腐烂组件加了 prop、改了默认值手写文档却忘了同步。Svelte Materialify 的解法很简单——单一数据源 组件源码本身API 文档只是它的编译产物。库里有 61 个.svelte组件文件每个文件在文档站都对应一页 API 参考。手写 61 张属性表几乎不可能长期维护自动生成则是零边际成本。整体架构Monorepo 三件套项目用 Lerna 管理三个包各管一段包职责关键路径svelte-materialify组件源码61 个.svelte文件 样式 actionssrc/api-generatorAPI 文档生成器产物即 npm 包svelte-materialify-apihelpers/generate.jsdocs基于 Sapper 的文档站Markdown 可交互示例 API 页面package.json依赖方向是单向的docs依赖api-generator的产物api-generator只读取组件源码互不污染。api-generator三步流水线生成器核心就是一个约 60 行的脚本 helpers/generate.js流程分三步1️⃣ 扫描组件源码用globby匹配../svelte-materialify/src/**/*.svelte拿到全部组件文件路径——新增组件文件后无需改任何配置自动进入生成范围。2️⃣ 用 sveltedoc-parser 解析成 JSONsveltedoc-parser{ version: 3, name: Alert, data: [ { visibility: public, name: visible, type: { kind: type, text: boolean, type: boolean }, defaultValue: true } ] }同时自动生成两个索引文件src/all.json所有组件名列表导航要用src/index.js把 60 个 JSON 全部 re-export 的入口文件3️⃣ Rollup 打包成 UMD 产物rollup terser把index.js打包为dist/index.jsUMD 格式随后发布为svelte-materialify-api包供文档站直接import * as Docs from svelte-materialify-api。在 api-generator/package.json 中整个流程浓缩为一条命令yarn api # 等价于 node helpers/generate.js改组件 → 跑yarn api→ 60 页 API 文档全部刷新。文档站如何渲染 API 页面docs 是一个 Sapper 应用API 页面用动态路由实现只有两个文件① 数据端点src/routes/api/[slug].json.js按 URL 中的slug从svelte-materialify-api里查对应 JSON查到返回 200查不到直接 404const output Docs[slug];② 展示页src/routes/api/[slug].sveltepreload拿到数据后用组件库自己的Table渲染三张表Props属性 / 默认值 / 描述、Events、Slots并自动过滤visibility ! public的内部属性。③ 导航零维护src/util/routes.js 里侧边栏API分组的 60 多个链接是循环生成的items: API.names.map((i) ({ text: ${i} API, href: /api/${i}/ }))新增组件后导航条目、数据端点、页面渲染三处全部自动生效这正是单一数据源的好处。顺手加菜可交互示例 Markdown 一体化除了 API 页文档站还有两个值得一提的机制示例代码自动增强scripts/examples.js 在编译期给src/examples/下每个示例自动注入MaterialApp包裹和 Prism 高亮[Example.svelte](https://link.gitcode.com/i/8274604fc0d42c2bc67227891fc142ac)再动态加载渲染——文档作者写纯组件代码即可不用管包装。Markdown 页面统一布局scripts/preprocess.js 用 mdsvex 把.md编译为 Svelte配remark-*插件组自动给标题加锚点、给外部链接加图标所有 md 页面共享同一个 Layout.svelte。也就是说教程页Markdown 示例页组件 API 页生成数据三种页面共用一套框架互不重复。给新手的 5 点复刻清单想给自家组件库搭文档站可以照抄这 5 个决策别手写 API 表用 sveltedoc-parser 类工具从源码解析属性表永远是编译产物索引文件也要生成all.json/index.js导航、端点、入口一处配置全生效用动态路由[slug]承载所有组件页一个页面模板吃下所有组件数据与展示分离JSON 端点 Svelte 模板将来换主题、换站点框架都不用动生成器把生成命令写进 package.json scripts如yarn api降低记得重新生成的门槛这套源码 → JSON → UMD 包 → 文档站的单向流水线就是 Svelte Materialify 60 页 API 文档零手工维护的全部秘密。【免费下载链接】svelte-materialifyA Material UI Design Component library for Svelte heavily inspired by vuetify.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-materialify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考