add-new-package

用途

add-new-package 是 Remotion 仓库提供的一项技能，用于向 Remotion monorepo 中添加一个新包。它把新增包所需的全部步骤整理成清单，涵盖包脚手架、monorepo 注册、文档、构建脚本以及发布清单更新。

主要能力

该技能指导完成以下工作：

• 创建 packages/<name>/ 目录，并准备所需文件：
  • package.json：以 @remotion/light-leaks 为模板复制，更新 name、description、homepage、dependencies。
  • tsconfig.json：extends ../tsconfig.settings.json，使用 tsgo，emitDeclarationOnly: true，outDir: "dist"，module: "es2020"，moduleResolution: "bundler"，target: "ES2022"。
  • src/index.ts：导出内容。
  • bundle.ts：Bun 构建脚本，将 react、remotion、remotion/no-react、react/jsx-runtime、react/jsx-dev-runtime、react-dom 外部化。
  • eslint.config.mjs：若使用 React 则用 remotionFlatConfig({react: true})，否则用 {react: false}。
  • .npmignore：从 @remotion/light-leaks 复制。
  • README.md：包含包名、描述、安装命令、文档链接。
• 在 monorepo 中注册：
  • 根 tsconfig.json：在 references 中添加 {"path": "./packages/<name>"}。
  • packages/cli/src/list-of-remotion-packages.ts：添加 '@remotion/<name>'。
  • packages/create-video/src/list-of-remotion-packages.ts：添加 '@remotion/<name>'。
  • packages/studio-shared/src/package-info.ts：添加到 packages、descriptions、installableMap、apiDocs。
• 编写文档（packages/docs/docs/<name>/）：
  • 在 packages/docs/package.json 的 dependencies 中添加 "@remotion/<name>": "workspace:*"（twoslash 片段需要）。
  • index.mdx：安装标签页、目录、许可证。
  • table-of-contents.tsx：TOCItem 网格，链接到组件/函数页面。
  • 各个组件/函数的 .mdx 页面。
  • 编辑 packages/docs/sidebars.ts：添加分类。
  • 编辑 packages/docs/components/TableOfContents/api.tsx：导入目录并添加区块。
  • 文档编写细节可参考 writing-docs 技能。
• 示例用法：
  • 在 packages/example/package.json 中添加 "@remotion/<name>": "workspace:*"。
  • 创建 packages/example/src/<Name>/index.tsx。
  • 在 packages/example/src/Root.tsx 中注册 <Composition>。
  • 在 packages/example/tsconfig.json 的 references 中添加 {"path": "../<name>"}。
  • 运行 bun i 安装依赖。
• 构建：cd packages/<name> && bun run make。

使用方式

按照技能给出的步骤顺序执行：先创建包目录与文件，再完成 monorepo 注册，然后补充文档与示例，最后运行安装与构建命令。构建命令为 cd packages/<name> && bun run make。

版本与约定

• 版本：使用 packages/core/src/version.ts 中的当前版本。文档版本将 patch 版本加 1，因为它只会随下一个 Remotion 版本发布。
• 内部依赖使用 "workspace:*"。
• 共享外部依赖版本使用 "catalog:"。
• make 脚本为：tsgo && bun --env-file=../.env.bundle bundle.ts。
• 在 package.json 中添加 "type": "module"。
• 在 devDependencies 中添加 "@typescript/native-preview": "catalog:"。
• types/main 指向 dist/index.d.ts 和 dist/index.js（不是 dist/cjs/）。
• 含 React 组件的包需要为 react 和 react-dom 添加 peerDependencies。

适用场景

适用于 Remotion 仓库的维护者或贡献者，在需要向 Remotion monorepo 新增一个包时使用，确保包结构、注册、文档、示例与构建流程保持一致。

限制

该技能面向 Remotion monorepo 内部流程，依赖仓库既有的模板包（如 @remotion/light-leaks）、目录结构与脚本约定。具体版本号、依赖版本等需以仓库当前状态为准。