# 機能設計書 88-デフォルトエクスポート

## 概要

本ドキュメントは、Decap CMSのデフォルトエクスポートパッケージ（`decap-cms-default-exports`）の機能設計について記述する。本パッケージは、カスタムウィジェット開発者がDecap CMSの標準依存ライブラリ（React、Emotion、Immutable、Lodash等）にアクセスできるようにするための共有エクスポートパッケージである。

### 本機能の処理概要

**業務上の目的・背景**：Decap CMSはカスタムウィジェットの登録をサポートしており、サードパーティの開発者が独自のウィジェットを作成してCMSに追加できる。しかし、カスタムウィジェットがCMS内部で使用しているReact、Emotion、Immutable等のライブラリと異なるバージョンを使用すると、互換性の問題が発生する。本パッケージは、CMSが使用している正確なバージョンのライブラリをエクスポートすることで、カスタムウィジェットがCMSと同一のライブラリインスタンスを使用できるようにする。

**機能の利用シーン**：カスタムウィジェット開発時に、`decap-cms-default-exports`からReact、styled components（Emotion）、Immutable等をインポートすることで、CMSとの互換性を保証する。CDN配布のscriptタグ環境では、グローバル変数としてこれらのライブラリにアクセスできる。

**主要な処理内容**：
1. `@emotion/react`からのCSS-in-JS関連ユーティリティのエクスポート（css、jsx、Global、keyframes等）
2. `@emotion/styled`のスタイルドコンポーネントのエクスポート
3. `immutable`ライブラリのエクスポート
4. `react-immutable-proptypes`のエクスポート
5. `lodash`のエクスポート
6. `prop-types`のエクスポート
7. `react`と`react-dom`のエクスポート
8. `uuid`のエクスポート

**関連システム・外部連携**：各ライブラリパッケージ（@emotion/react、@emotion/styled、immutable、lodash等）

**権限による制御**：権限制御はない。

## 関連画面

本パッケージは直接UIを持たないが、カスタムウィジェットの実装を通じてエントリ編集画面に影響する。

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 6 | エントリ編集画面 | 参照画面 | カスタムウィジェットがデフォルトエクスポートを使用 |

## 機能種別

パッケージング / ライブラリエクスポート

## 入力仕様

### 入力パラメータ

本パッケージは入力パラメータを持たない。ライブラリの再エクスポートのみを行う。

### 入力データソース

各依存ライブラリパッケージ

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| EmotionCore | object | @emotion/reactの主要エクスポート（css、jsx、Global、keyframes、ClassNames等） |
| EmotionStyled | function | @emotion/styledのstyledファクトリ関数 |
| Immutable | object | immutableライブラリ全体 |
| ImmutablePropTypes | object | react-immutable-proptypesのPropTypes定義 |
| Lodash | object | lodashライブラリ全体 |
| PropTypes | object | prop-typesライブラリ全体 |
| React | object | reactライブラリ全体 |
| ReactDOM | object | react-domライブラリ全体 |
| UUId | object | uuidライブラリ全体 |

### 出力先

カスタムウィジェット実装コード、CDN環境のグローバルスコープ

## 処理フロー

### 処理シーケンス

```
1. ライブラリインポート
   ├─ @emotion/react → EmotionCore
   ├─ @emotion/styled → EmotionStyled
   ├─ immutable → Immutable
   ├─ react-immutable-proptypes → ImmutablePropTypes
   ├─ lodash → Lodash
   ├─ prop-types → PropTypes
   ├─ react → React
   ├─ react-dom → ReactDOM
   └─ uuid → UUId

2. DecapCmsDefaultExportsオブジェクトとしてエクスポート
```

### フローチャート

```mermaid
flowchart TD
    A[パッケージ読み込み] --> B[各ライブラリインポート]
    B --> C[EmotionCoreオブジェクト構築]
    C --> D[DecapCmsDefaultExportsオブジェクト構築]
    D --> E[名前付きエクスポート]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-88-01 | バージョン一致保証 | カスタムウィジェットが使用するライブラリバージョンをCMS本体と一致させる | カスタムウィジェット開発時 |
| BR-88-02 | EmotionCore構成 | EmotionCoreは@emotion/reactからcss、withEmotionCache、CacheProvider、ThemeContext、jsx、Global、keyframes、ClassNamesを含む | パッケージエクスポート時 |

### 計算ロジック

該当なし（ライブラリの再エクスポートのみ）

## データベース操作仕様

該当なし

### 操作別データベース影響一覧

なし

## エラー処理

### エラーケース一覧

本パッケージは明示的なエラーハンドリングを行わない。

### リトライ仕様

該当なし

## トランザクション仕様

該当なし

## パフォーマンス要件

- tree-shakingが効かないため、全ライブラリがバンドルに含まれる
- CDN配布時のバンドルサイズに注意

## セキュリティ考慮事項

- エクスポートされるライブラリのセキュリティは各ライブラリ自体に依存
- サードパーティのカスタムウィジェットが悪意のあるコードを含む可能性があるため、ウィジェットの信頼性の確認が必要

## 備考

- EmotionCoreの@emotion/reactはCSS-in-JSライブラリで、スタイルドコンポーネントの基盤
- react-immutable-proptypesはReactのPropTypesをImmutable.jsのデータ構造に対応させたライブラリ
- uuidはRFC4122準拠のUUID生成ライブラリ

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.js | `packages/decap-cms-default-exports/src/index.js` | 全エクスポート構造 |

**主要処理フロー**:
1. **1-19行目**: 各ライブラリのインポート
2. **21-30行目**: EmotionCoreオブジェクトの構築（css、withEmotionCache、CacheProvider、ThemeContext、jsx、Global、keyframes、ClassNames）
3. **31-41行目**: DecapCmsDefaultExportsオブジェクトの構築と名前付きエクスポート

**読解のコツ**: 本ファイルはライブラリの再エクスポートのみを行うシンプルな構造。EmotionCoreオブジェクトは@emotion/reactの主要エクスポートをまとめたもの。

### プログラム呼び出し階層図

```
decap-cms-default-exports/src/index.js
    |
    +-- @emotion/react → EmotionCore
    |      +-- css, withEmotionCache, CacheProvider
    |      +-- ThemeContext, jsx, Global, keyframes, ClassNames
    |
    +-- @emotion/styled → EmotionStyled
    +-- immutable → Immutable
    +-- react-immutable-proptypes → ImmutablePropTypes
    +-- lodash → Lodash
    +-- prop-types → PropTypes
    +-- react → React
    +-- react-dom → ReactDOM
    +-- uuid → UUId
    |
    +-- DecapCmsDefaultExports（統合エクスポート）
```

### データフロー図

```
[入力]                         [処理]                      [出力]

@emotion/react ────────▶ index.js ──────────────▶ DecapCmsDefaultExports
@emotion/styled ───────▶   |                      {EmotionCore,
immutable ─────────────▶   +-- ライブラリ集約       EmotionStyled,
lodash ────────────────▶                           Immutable, ...}
react ─────────────────▶
react-dom ─────────────▶
prop-types ────────────▶
uuid ──────────────────▶
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.js | `packages/decap-cms-default-exports/src/index.js` | ソース | ライブラリの再エクスポート |
