プラグインシステムの概要

先行技術

Swagger UIは、ReactとReduxに見られる概念とパターンに大きく依存しています。

まだ慣れていない場合は、以下の参考資料をご覧ください。

以降のドキュメントでは、上記の資料で説明されている基本事項を定義する時間を取りません。

注記: このセクションの例の中には、Reactコンポーネントの作成に役立つJavaScriptの構文拡張であるJSXが含まれているものがあります。

JSXをJavaScriptに変換できるビルドパイプラインをセットアップしたくない場合は、React without JSX (reactjs.org)をご覧ください。プロジェクトにコピーをプルする必要なく、`system.React`リファレンスを使用してReactを活用できます。

システム

システムはSwagger UIアプリケーションの中核です。実行時には、多くのものを保持するJavaScriptオブジェクトです。

Reactコンポーネント
バインドされたReduxアクションとリデューサー
バインドされたReselect状態セレクター
利用可能なコンポーネントのシステム全体の集合
`getComponent`、`makeMappedContainer`、`getStore`などの組み込みヘルパー
ReactとImmutable.jsライブラリへの参照(`system.React`、`system.Im`)
ユーザー定義のヘルパー関数

システムは、`presets`と`plugins`の構成オプションを通じて、Swagger UIが与えられた各プラグインを反復処理（「コンパイル」）することで、Swagger UIが呼び出されたときに構築されます。

プリセット

プリセットはプラグインの配列であり、`presets`構成オプションを通じてSwagger UIに提供されます。`plugins`構成オプションを介して提供されるプラグインの前に、プリセット内のすべてのプラグインがコンパイルされます。次の例を考えてみてください。

const MyPreset = [FirstPlugin, SecondPlugin, ThirdPlugin]

SwaggerUI({
  presets: [
    MyPreset
  ]
})

デフォルトでは、Swagger UIには、Swagger UIの基本機能を提供する一連のプラグインを含む内部`ApisPreset`が含まれています。独自の`presets`オプションを指定する場合は、次のように`ApisPreset`を手動で追加する必要があります。

SwaggerUI({
  presets: [
    SwaggerUI.presets.apis,
    MyAmazingCustomPreset
  ]
})

他のプリセットを追加する際に`apis`プリセットを提供する必要があるのは、Swagger UIの元の設計の名残であり、次のメジャーバージョンで削除される可能性があります。

getComponent

`getComponent`は、プラグインシステムによって提供されるコンポーネントへの参照を取得するために使用される、すべてのコンテナコンポーネントに注入されるヘルパー関数です。

他のプラグインがコンポーネントを変更できるようにするため、すべてのコンポーネントは`getComponent`を介してロードする必要があります。従来の`import`ステートメントよりも優先されます。

Swagger UIのコンテナコンポーネントは、次のように`getComponent`の第2引数に`true`を渡すことでロードできます。

getComponent("ContainerComponentName", true)

これにより、現在のシステムがpropsとしてコンポーネントにマップされます。