add-new-package

新しい Remotion パッケージを追加する

手順

1. packages/<name>/ を作成し、次のファイルを用意します。

   • package.json — @remotion/light-leaks をテンプレートとしてコピーし、名前、説明、ホームページ、依存関係を更新します
   • tsconfig.json — ../tsconfig.settings.json を継承し、emitDeclarationOnly: true、outDir: "dist"、module: "es2020"、moduleResolution: "bundler"、target: "ES2022" を指定して、ネイティブの TypeScript コンパイラーを使用します
   • src/index.ts — エクスポート
   • bundle.ts — React、Remotion、remotion/no-react、react/jsx-runtime、react/jsx-dev-runtime、react-dom を外部化する Bun ビルドスクリプト
   • eslint.config.mjs — React を使用する場合は remotionFlatConfig({react: true})、それ以外の場合は {react: false} を使用します
   • .npmignore — @remotion/light-leaks からコピーします
   • README.md — パッケージ名、説明、インストールコマンド、ドキュメントへのリンク

2. モノレポに登録します。

   • tsconfig.json（ルート）— 参照に {"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 に追加します

ドキュメントの作成方法については、writing-docs スキルを参照してください。

3. ドキュメント（packages/docs/docs/<name>/）：

   • packages/docs/package.json の依存関係に "@remotion/<name>": "workspace:*" を追加します（twoslash スニペットで必要です）
   • index.mdx — インストール用タブ、目次、ライセンス
   • table-of-contents.tsx — コンポーネントや関数のページにリンクする TOCItem グリッド
   • コンポーネントや関数ごとの .mdx ページ
   • packages/docs/sidebars.ts を編集し、カテゴリーを追加します
   • packages/docs/components/TableOfContents/api.tsx を編集し、目次をインポートしてセクションを追加します

4. 使用例：

   • packages/example/package.json に "@remotion/<name>": "workspace:*" を追加します
   • packages/example/src/<Name>/index.tsx を作成します
   • packages/example/src/Root.tsx に <Composition> を登録します
   • packages/example/tsconfig.json の参照に {"path": "../<name>"} を追加します

5. bun i を実行して依存関係をインストールします

6. ビルド： cd packages/<name> && bun run make

バージョン

packages/core/src/version.ts の現在のバージョンを使用します。
ドキュメントのバージョンは、次の Remotion リリースでのみ公開されるため、パッチバージョンを 1 つ上げます。

パターン

• 内部依存関係には "workspace:*" を使用します
• 共有する外部依存関係のバージョンには "catalog:" を使用します
• make スクリプトは tsc && bun --env-file=../.env.bundle bundle.ts です
• package.json に "type": "module" を追加します
• devDependencies に "typescript": "catalog:" を追加します。これにより、パッケージのビルドで使用するネイティブの TypeScript コンパイラーがインストールされます
• types/main は dist/cjs/ ではなく、dist/index.d.ts と dist/index.js を指定します
• React コンポーネントを含むパッケージには、react と react-dom の peerDependencies が必要です