📦

Remotionコード分析 — BundleシステムとWebpack/esbuild統合

bundle()がReactコンポーネントをレンダリング可能なHTMLに変換する過程をソースコードで追跡

Remotionのレンダリングはバンドリングから始まります。ReactコンポーネントがブラウザでHTMLとして実行可能になるまでの過程をソースコードで追跡します。

リポジトリ構造

packages/
├── bundler/              # Webpackベースバンドラー
│   ├── src/
│   │   ├── bundle.ts           # bundle()エントリポイント
│   │   ├── webpack-config.ts    # Webpack設定生成
│   │   └── index-html.ts        # HTMLテンプレート生成
├── core/                 # コアランタイム
│   ├── src/
│   │   ├── Composition.tsx      # <Composition>コンポーネント
│   │   ├── CompositionManager.tsx  # 登録されたCompositionの管理
│   │   └── register-root.ts     # registerRoot()エントリ
├── renderer/             # ローカルレンダラー
└── lambda/               # AWS Lambdaレンダリング

核心はwebpackConfiguration()が生成するWebpack設定です。TypeScriptのトランスパイルにesbuild-loaderを使用し、Webpackのバンドリング能力 + esbuildの高速トランスパイルのハイブリッド戦略です。

生成されたindex.htmlがHeadless Chromeにロードされ、main.bundle.jsが実行されるとReactが#remotion-rootにマウントされます。すべての<Composition>がCompositionManagerに登録され、レンダラーがwindow.getCompositions()で何をレンダリングするか決定します。