SuperAPI AI 工具集

fusion-to-publish

编程与开发

查看项目

更新于 10-15 17:30

技能介绍

用途:连接 Builder.io Fusion(代码生成)与 Publish(可视化 CMS),把 React 组件注册到 Publish 可视化编辑器中使用。

主要能力:

  1. 搭建 Publish 集成脚手架,包括 catch-all 路由、builder-registry.ts、SDK 配置与 .builderrules;
  2. 注册单个组件:读取 TypeScript props,映射为 Builder 输入类型并加入 registry;
  3. 批量注册组件:扫描目录,并行分析多个组件后统一注册。

必要用法:项目需为 Next.js App Router,并拥有带公开 API key 的 Builder.io Publish space。安装命令:npm install @builder.io/react @builder.io/dev-tools。API key 写入 .env.local 的 NEXT_PUBLIC_BUILDER_API_KEY,且需在部署平台环境变量中同样配置。可视化编辑器无法使用 localhost,需部署到公网 URL。

限制与注意:list 输入必须有 defaultValue: [],object 输入必须有 defaultValue: {};枚举需用 type: "text" 加 enum 数组,不能用 type: "enum";不要重复包裹 BuilderDevTools;catch-all 路由与服务端、客户端两处 builder.init() 不可删除其一;[...page] 不处理根路径 /;CSP 或 X-Frame-Options 需允许 https://*.builder.io。其余细节暂未提供。