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

先行技術

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`設定オプションを通じて提供されるどのプラグインよりも前にコンパイルされます。次の例を考えてみましょう

1
const MyPreset = [FirstPlugin, SecondPlugin, ThirdPlugin]
2

3
SwaggerUI({
4
  presets: [
5
    MyPreset
6
  ]
7
})

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

1
SwaggerUI({
2
  presets: [
3
    SwaggerUI.presets.apis,
4
    MyAmazingCustomPreset
5
  ]
6
})

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

getComponent

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

すべてのコンポーネントは`getComponent`を通じてロードされるべきです。これは、他のプラグインがコンポーネントを変更することを可能にするためです。従来の`import`ステートメントよりも推奨されます。

Swagger UIのコンテナコンポーネントは、`getComponent`の2番目の引数として`true`を渡すことでロードできます。例:

1
getComponent("ContainerComponentName", true)

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