SwaggerEditor

SwaggerEditorは、そのビルドインフラとしてフォークされた Create React Appを使用しています。

匿名化された分析

Swagger Editorは、Scarfを使用して匿名化されたインストール分析を収集します。これらの分析は、このライブラリのメンテナーをサポートするのに役立ち、インストール時にのみ実行されます。オプトアウトするには、プロジェクトのpackage.jsonでscarfSettings.enabledフィールドをfalseに設定します。

1
{
2
  // ...
3
  "scarfSettings": {
4
    "enabled": false
5
  }
6
  // ...
7
}

または、npmパッケージをインストールする環境の一部として、環境変数SCARF_ANALYTICSをfalseに設定することもできます。例: SCARF_ANALYTICS=false npm install。

はじめに

前提条件

これらの前提条件は、SwaggerEditorをnpmパッケージとしてインストールする場合と、ローカル開発環境を設定する場合の両方に必要です。

node-gypとPython 3.x
GLIBC >=2.29
emscriptenまたはdockerのインストールが必要です。dockerオプションをお勧めします。

インストール

前提条件がすでにインストールされていると仮定すると、SwaggerEditor npmパッケージはNode.js >= 12.22.0でインストール可能であり、動作します。以下のコマンドを実行することで、npm CLI経由でSwaggerEditorをインストールできます。

1
 $ npm install swagger-editor@alpha

注: swagger-editor@5 npmパッケージを使用するプロジェクトをバンドラーでビルドする際、以下のNode.jsエラーに遭遇する可能性があります: Reached heap limit Allocation failed - JavaScript heap out of memory。これは、バンドルする必要があるコード量が多いためです。このエラーは、Node.jsの最大ヒープ制限を拡張することで解決できます: export NODE_OPTIONS="--max_old_space_size=4096"。

使用方法

アプリケーションでのパッケージの使用

index.js:

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import SwaggerEditor from 'swagger-editor';
4
import 'swagger-editor/swagger-editor.css';
5

6
const url = "https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml";
7

8
const MyApp = () => (
9
  <div>
10
    <h1>SwaggerEditor Integration</h1>
11
    <SwaggerEditor url={url} />
12
  </div>
13
);
14

15
self.MonacoEnvironment = {
16
  /**
17
   * We're building into the dist/ folder. When application starts on
18
   * URL=https://example.com then SwaggerEditor will look for
19
   * `apidom.worker.js` on https://example.com/dist/apidom.worker.js and
20
   * `editor.worker` on https://example.com/dist/editor.worker.js.
21
   */
22
  baseUrl: `${document.baseURI || location.href}dist/`,
23
}
24

25
ReactDOM.render(<MyApp />, document.getElementById('swagger-editor'));

webpack.config.js (webpack@5)

webpack@5がSwaggerEditorを適切にビルドするために必要な依存関係をインストールします。

1
 $ npm i stream-browserify --save-dev
2
 $ npm i https-browserify --save-dev
3
 $ npm i stream-http --save-dev
4
 $ npm i util --save-dev

1
const path = require('path');
2
const webpack = require('webpack');
3

4
module.exports = {
5
  mode: 'production',
6
  entry: {
7
    app: './index.js',
8
    'apidom.worker': 'swagger-editor/apidom.worker',
9
    'editor.worker': 'swagger-editor/editor.worker',
10
  },
11
  output: {
12
    globalObject: 'self',
13
    filename: '[name].js',
14
    path: path.resolve(__dirname, 'dist')
15
  },
16
  resolve: {
17
    fallback: {
18
      path: false,
19
      fs: false,
20
      http: require.resolve('stream-http'), // required for asyncapi parser
21
      https: require.resolve('https-browserify'), // required for asyncapi parser
22
      stream: require.resolve('stream-browserify'),
23
      util: require.resolve('util'),
24
      url: require.resolve('url'),
25
      zlib: false,
26
    },
27
    alias: {
28
      // This alias make sure we don't pull two different versions of monaco-editor
29
      'monaco-editor': '/node_modules/monaco-editor',
30
      // This alias makes sure we're avoiding a runtime error related to this package
31
      '@stoplight/ordered-object-literal$': '/node_modules/@stoplight/ordered-object-literal/src/index.mjs',
32
    },
33
  },
34
  plugins: [
35
    new webpack.ProvidePlugin({
36
      Buffer: ['buffer', 'Buffer'],
37
    }),
38
  ],
39
  module: {
40
    rules: [
41
      {
42
        test: /\.css$/,
43
        use: ['style-loader', 'css-loader']
44
      },
45
      /**
46
       * The default way in which webpack loads wasm files won’t work in a worker,
47
       * so we will have to disable webpack’s default handling of wasm files and
48
       * then fetch the wasm file by using the file path that we get using file-loader.
49
       *
50
       * Resource: https://pspdfkit.com/blog/2020/webassembly-in-a-web-worker/
51
       *
52
       * Alternatively, WASM file can be bundled directly into JavaScript bundle as data URLs.
53
       * This configuration reduces the complexity of WASM file loading
54
       * but increases the overal bundle size:
55
       *
56
       * {
57
       *   test: /\.wasm$/,
58
       *   type: 'asset/inline',
59
       * }
60
       */
61
      {
62
        test: /\.wasm$/,
63
        loader: 'file-loader',
64
        type: 'javascript/auto', // this disables webpacks default handling of wasm
65
      },
66
    ]
67
  }
68
};

代替の webpack.config.js (webpack@5)

Web Workerのフラグメントはすでにビルドされており、npmディストリビューションパッケージのdist/umd/ディレクトリ内にあります。Web Workerのフラグメントをビルドする複雑さを避けるために、これらのフラグメントを直接使用できます。この設定は、本番環境と開発環境 (webpack-dev-server) の両方で機能し、ビルドプロセスを大幅に短縮します。

copy-webpack-pluginおよびその他の必要な依存関係をインストールします。

1
 $ npm i copy-webpack-plugin --save-dev
2
 $ npm i stream-browserify --save-dev
3
 $ npm i https-browserify --save-dev
4
 $ npm i stream-http --save-dev
5
 $ npm i util --save-dev

1
const path = require('path');
2
const webpack = require('webpack');
3
const CopyWebpackPlugin = require('copy-webpack-plugin');
4

5
module.exports = {
6
  mode: 'production',
7
  entry: {
8
    app: './index.js',
9
  },
10
  output: {
11
    globalObject: 'self',
12
    filename: 'static/js/[name].js',
13
    path: path.resolve(__dirname, 'dist')
14
  },
15
  resolve: {
16
    fallback: {
17
      path: false,
18
      fs: false,
19
      http: require.resolve('stream-http'), // required for asyncapi parser
20
      https: require.resolve('https-browserify'), // required for asyncapi parser
21
      stream: require.resolve('stream-browserify'),
22
      util: require.resolve('util'),
23
      url: require.resolve('url'),
24
      zlib: false,
25
    },
26
    alias: {
27
      // This alias make sure we don't pull two different versions of monaco-editor
28
      'monaco-editor': '/node_modules/monaco-editor',
29
      // This alias makes sure we're avoiding a runtime error related to this package
30
      '@stoplight/ordered-object-literal$': '/node_modules/@stoplight/ordered-object-literal/src/index.mjs',
31
    }
32
  },
33
  plugins: [
34
    new webpack.ProvidePlugin({
35
      Buffer: ['buffer', 'Buffer'],
36
    }),
37
    new CopyWebpackPlugin({
38
      patterns: [
39
        {
40
          from: 'node_modules/swagger-editor/dist/umd/apidom.worker.js',
41
          to: 'static/js',
42
        },
43
        {
44
          from: 'node_modules/swagger-editor/dist/umd/editor.worker.js',
45
          to: 'static/js',
46
        }
47
      ]
48
    }),
49
  ],
50
  module: {
51
    rules: [
52
      {
53
        test: /\.css$/,
54
        use: ['style-loader', 'css-loader']
55
      },
56
    ]
57
  }
58
};

開発

前提条件

前提条件がすでにインストールされていると仮定すると、このリポジトリが動作する最小バージョンはNode.js >=20.3.0およびnpm >=9.6.7ですが、Node.js@20の最新バージョンの使用を推奨します。

セットアップ

nvmを使用している場合、このリポジトリ内で以下のコマンドを実行すると、適切なNode.jsバージョンが自動的に選択されます。

1
 $ nvm use

以下のコマンドを実行して、ローカル開発用にリポジトリを設定します。

1
 $ git clone https://github.com/swagger-api/swagger-editor.git
2
 $ cd swagger-editor
3
 $ git checkout next
4
 $ git submodule init
5
 $ git submodule update
6
 $ npm i
7
 $ npm start

npmスクリプト

Lint

1
 $ npm run lint

ユニットテストと結合テストを実行します

1
 $ npm test

E2E Cypressテストを実行します

開発環境での使用

1
 $ npm run cy:dev

継続的インテグレーション (CI) 環境での使用

1
 $ npm run cy:ci

構築

1
 $ npm run build

このスクリプトは、すべてのSwaggerEditorビルド成果物（app、esm、umd）をビルドします。

ビルド成果物

成果物のビルド後、build/とdist/という2つの新しいディレクトリが作成されます。

build/

1
$ npm run build:app
2
$ npm run build:app:serve

スタンドアロンのSwaggerEditorアプリケーションとそのすべてのアセットをビルドし、https://:3050/で提供します。

dist/esm/

1
$ npm run build:bundle:esm

このバンドルは、SwaggerEditorを独自のアプリケーションでライブラリとして使用し、独自のビルドプロセスを持つサードパーティによる利用に適しています。

dist/umd/

1
$ npm run build:bundle:umd

SwaggerEditor UMDバンドルは、SwaggerEditorシンボルをグローバルオブジェクトにエクスポートします。Reactは外部として定義されてバンドルされています。これにより、消費者は独自のバージョンのReact + ReactDOMを使用し、SwaggerEditorを遅延マウントすることができます。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <meta
7
    name="description"
8
    content="SwaggerEditor"
9
  />
10
  <title>SwaggerEditor</title>
11
  <link rel="stylesheet" href="./swagger-editor.css" />
12
</head>
13
<body>
14
  <div id="swagger-editor"></div>
15
  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
16
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
17
  <script src="./dist/umd/swagger-editor.js"></script>
18
  <script>
19
    const props = {
20
      url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml',
21
    };
22
    const element = React.createElement(SwaggerEditor, props);
23
    const domContainer = document.querySelector('#swagger-editor');
24

25
    ReactDOM.render(element, domContainer);
26
  </script>
27
</body>
28
</html>

npm

SwaggerEditorは、npmjs.comでswagger-editor@5 npmパッケージとしてリリースされています。パッケージは、以下のコマンドを実行することで手動で作成することもできます（設定手順をすでに実行済みと仮定）。

1
 $ npm run build:bundle:esm
2
 $ npm run build:bundle:umd
3
 $ npm pack

パッケージマッピング

SwaggerEditorは、package.jsonファイル内でそのビルド成果物を以下のようにマップします。

1
"unpkg": "./dist/umd/swagger-editor.js",
2
"module": "./dist/esm/swagger-editor.js",
3
"browser": "./dist/esm/swagger-editor.js",
4
"jsnext:main": "./dist/esm/swagger-editor.js",
5
"exports": {
6
  "./package.json": "./package.json",
7
  "./swagger-editor.css": "./dist/swagger-editor.css",
8
  ".": {
9
    "browser": "./dist/esm/swagger-editor.js"
10
  },
11
  "./plugins/*": {
12
    "browser": "./dist/esm/plugins/*/index.js"
13
  },
14
  "./presets/*": {
15
    "browser": "./dist/esm/presets/*/index.js"
16
  },
17
  "./apidom.worker": {
18
    "browser": "./dist/esm/apidom.worker.js"
19
  },
20
  "./editor.worker": {
21
    "browser": "./dist/esm/editor.worker.js"
22
  }
23
}

これらのフィールドの詳細については、webpack mainFields documentationまたはNode.js Modules: Packages documentationを参照してください。

ドキュメンテーション

古いバージョンのReactの使用

[!重要] 古いバージョンとは、具体的にReact >=17 <18を指します。

デフォルトでは、swagger-editor@5 npmパッケージには、最新バージョンのReact@18が同梱されています。swagger-editor@5 npmパッケージを古いバージョンのReactで使用することも可能です。

私のアプリケーションがswagger-editor@5 npmパッケージと統合されており、React@17.0.2を使用しているとします。

npm

swagger-editor@5 npmパッケージに私のReactバージョンを使用するよう要求するには、npm overridesを使用する必要があります。

1
{
2
  "dependencies": {
3
    "react": "=17.0.2",
4
    "react-dom": "=17.0.2"
5
  },
6
  "overrides": {
7
    "swagger-editor": {
8
      "react": "$react",
9
      "react": "$react-dom",
10
      "react-redux": "^8"
11
    }
12
  }
13
}

[!注] ReactとReactDOMのオーバーライドは、依存関係への参照として定義されます。react-redux@9はReact >= 18のみをサポートしているため、react-redux@8を使用する必要があります。

yarn

swagger-editor@5 npmパッケージに私の特定のReactバージョンを使用するよう要求するには、yarn resolutionsを使用する必要があります。

1
{
2
  "dependencies": {
3
    "react": "17.0.2",
4
    "react-dom": "17.0.2"
5
  },
6
  "resolutions": {
7
    "swagger-editor/react": "17.0.2",
8
    "swagger-editor/react-dom": "17.0.2",
9
    "swagger-editor/react-redux": "^8"
10
  }
11
}

[!注] ReactとReactDOMの解決は、依存関係への参照として定義できません。残念ながら、yarnはnpmのように$reactや$react-domのようなエイリアスをサポートしていません。正確なバージョンを指定する必要があります。

カスタマイズ

プラグポイント

環境変数

SwaggerEditorが起動時にロードするローカルのJSON/YAMLファイルまたはリモートURLを指定するために、環境変数を使用することができます。これらの環境変数は、ビルド時にビルド成果物に組み込まれます。

現在利用可能な環境変数

変数名	説明
`REACT_APP_DEFINITION_FILE`	ローカルファイルパスを指定します。指定されたファイルは`/public/static`ディレクトリにも存在する必要があります。
`REACT_APP_DEFINITION_URL`	リモートURLを指定します。この環境変数は現在、`REACT_APP_SWAGGER_FILE`よりも優先されます。
`REACT_APP_VERSION`	このアプリのバージョンを指定します。バージョンは`package.json`ファイルから読み取られます。

環境変数のサンプル値は.envファイルで見つけることができます。環境変数の使用に関する詳細については、Create React AppのドキュメントのAdding Custom Environment Variablesセクションを参照してください。

SwaggerUIでのプレビュープラグインの使用

SwaggerEditorには、エディターで作成されている定義をレンダリングする役割を担う多数のプレビュープラグインが付属しています。これらのプラグインには、以下が含まれます。

EditorPreviewAsyncAPIPlugin - AsyncAPI仕様レンダリングサポート
EditorPreviewAPIDesignSystemsPlugin - API設計システムレンダリングサポート

少し調整するだけで、これらのプラグインをSwaggerUIで使用して、AsyncAPIまたはAPI設計システムの定義をSwaggerUIでレンダリングする機能を提供できます。

1
import SwaggerUI from 'swagger-ui';
2
import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';
3
import 'swagger-editor/swagger-editor.css';
4
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
5
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
6
import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
7
import SwaggerUIAdapterPlugin from 'swagger-editor/plugins/swagger-ui-adapter';
8

9
SwaggerUI({
10
  url: 'https://petstore.swagger.io/v2/swagger.json',
11
  dom_id: '#swagger-ui',
12
  presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset],
13
  plugins: [
14
    EditorContentTypePlugin,
15
    EditorPreviewAsyncAPIPlugin,
16
    EditorPreviewAPIDesignSystemsPlugin,
17
    SwaggerUIAdapterPlugin,
18
    SwaggerUI.plugins.DownloadUrl,
19
  ],
20
});

ここでの鍵は、SwaggerEditorプラグインをSwaggerUIで直接使用できるように適合させるSwaggerUIAdapterプラグインです。

スタンドアロンモード

SwaggerUIのスタンドアロンモードもサポートされています。スタンドアロンモードでは、定義のURLを提供できる入力フィールドを持つTopBarが表示され、その定義は後続でSwaggerUIによって読み込まれます。

1
import SwaggerUI from 'swagger-ui';
2
import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset';
3
import 'swagger-ui/dist/swagger-ui.css';
4
import 'swagger-editor/swagger-editor.css';
5
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
6
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
7
import EditorPreviewAPIDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
8
import SwaggerUIAdapterPlugin from 'swagger-editor/plugins/swagger-ui-adapter';
9

10
SwaggerUI({
11
  url: 'https://petstore.swagger.io/v2/swagger.json',
12
  dom_id: '#swagger-ui',
13
  presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset],
14
  plugins: [
15
    EditorContentTypePlugin,
16
    EditorPreviewAsyncAPIPlugin,
17
    EditorPreviewAPIDesignSystemsPlugin,
18
    SwaggerUIAdapterPlugin,
19
    SwaggerUI.plugins.DownloadUrl,
20
  ],
21
  layout: 'StandaloneLayout',
22
});

unpkg.com経由でのプレビュープラグインの利用

unpkg.com経由でビルド不要な方法でプレビュープラグインを利用し、スタンドアロンの複数仕様対応版SwaggerUIを作成することが可能です。

1
<!DOCTYPE html>
2
<html >
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1" />
6
    <meta name="theme-color" content="#000000" />
7
    <meta name="description" content="SwaggerUIMultifold" />
8
    <link rel="stylesheet" href="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/swagger-editor.css" />
9
  </head>
10
  <body style="margin:0; padding:0;">
11
    <section id="swagger-ui"></section>
12

13
    <script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js"></script>
14
    <script src="//unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-standalone-preset.js"></script>
15
    <script>
16
      ui = SwaggerUIBundle({});
17
      // expose SwaggerUI React globally for SwaggerEditor to use
18
      window.React = ui.React;
19
    </script>
20
    <script src="//unpkg.com/swagger-editor@5.0.0-alpha.86/dist/umd/swagger-editor.js"></script>
21
    <script>
22
      SwaggerUIBundle({
23
        url: 'https://petstore3.swagger.io/api/v3/openapi.json',
24
        dom_id: '#swagger-ui',
25
        presets: [
26
          SwaggerUIBundle.presets.apis,
27
          SwaggerUIStandalonePreset,
28
        ],
29
        plugins: [
30
          SwaggerEditor.plugins.EditorContentType,
31
          SwaggerEditor.plugins.EditorPreviewAsyncAPI,
32
          SwaggerEditor.plugins.EditorPreviewApiDesignSystems,
33
          SwaggerEditor.plugins.SwaggerUIAdapter,
34
          SwaggerUIBundle.plugins.DownloadUrl,
35
        ],
36
        layout: 'StandaloneLayout',
37
      });
38
    </script>
39
  </body>
40
</html>

カスタマイズされたSwaggerEditorバージョンの作成

SwaggerEditorは、swagger-ui-reactとともに使用される多数のSwaggerUIプラグインにすぎません。カスタマイズされたSwaggerEditorは、個々のプラグインをswagger-uiまたはswagger-ui-reactと組み合わせて作成できます。

プラグイン

利用可能なプラグインのリスト

dialogs
dropdown-menu
dropzone
editor-content-fixtures
editor-content-origin
editor-content-persistence
editor-content-read-only
editor-content-type
editor-monaco
editor-monaco-language-apidom
editor-preview
editor-preview-api-design-systems
editor-preview-asyncapi
editor-preview-swagger-ui
editor-safe-render
editor-textarea
layout
modals
splash-screen
swagger-ui-adapter
top-bar
versions

個々のプラグインは以下の方法でインポートできます

1
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
2
import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';

プリセット

プラグインに加えて、プリセットも利用できます。プリセットは、複合機能を提供するために連携するように設計されたプラグインのコレクションです。

利用可能なプリセットのリスト

textarea
monaco

個々のプリセットは、以下の方法でインポートできます。

1
import TextareaPreset from 'swagger-editor/presets/textarea';
2
import MonacoPreset from 'swagger-editor/presets/monaco';

注: プリセットがSwaggerUIにどのように渡されるかを理解するには、SwaggerUIのプラグポイントのドキュメントを参照してください。

swagger-uiとの構成

1
import SwaggerUI from 'swagger-ui';
2
import 'swagger-ui/dist/swagger-ui.css';
3
import ModalsPlugin from 'swagger-editor/plugins/modals';
4
import DialogsPlugin from 'swagger-editor/plugins/dialogs';
5
import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';
6
import DropzonePlugin from 'swagger-editor/plugins/dropzone';
7
import VersionsPlugin from 'swagger-editor/plugins/versions';
8
import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';
9
import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';
10
import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';
11
import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';
12
import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';
13
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
14
import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';
15
import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';
16
import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';
17
import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';
18
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
19
import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
20
import TopBarPlugin from 'swagger-editor/plugins/top-bar';
21
import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';
22
import LayoutPlugin from 'swagger-editor/plugins/layout';
23
import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';
24

25
SwaggerUI({
26
  url: 'https://petstore.swagger.io/v2/swagger.json',
27
  dom_id: '#swagger-editor',
28
  plugins: [
29
    ModalsPlugin,
30
    DialogsPlugin,
31
    DropdownMenuPlugin,
32
    DropzonePlugin,
33
    VersionsPlugin,
34
    EditorTextareaPlugin,
35
    EditorMonacoPlugin,
36
    EditorMonacoLanguageApiDOMPlugin,
37
    EditorContentReadOnlyPlugin,
38
    EditorContentOriginPlugin,
39
    EditorContentTypePlugin,
40
    EditorContentPersistencePlugin,
41
    EditorContentFixturesPlugin,
42
    EditorPreviewPlugin,
43
    EditorPreviewSwaggerUIPlugin,
44
    EditorPreviewAsyncAPIPlugin,
45
    EditorPreviewApiDesignSystemsPlugin,
46
    TopBarPlugin,
47
    SplashScreenPlugin,
48
    LayoutPlugin,
49
    EditorSafeRenderPlugin,
50
  ],
51
  layout: 'StandaloneLayout',
52
});

swagger-ui-reactとの構成

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import SwaggerUI from 'swagger-ui-react';
4
import 'swagger-ui-react/swagger-ui.css';
5
import ModalsPlugin from 'swagger-editor/plugins/modals';
6
import DialogsPlugin from 'swagger-editor/plugins/dialogs';
7
import DropdownMenuPlugin from 'swagger-editor/plugins/dropdown-menu';
8
import DropzonePlugin from 'swagger-editor/plugins/dropzone';
9
import VersionsPlugin from 'swagger-editor/plugins/versions';
10
import EditorTextareaPlugin from 'swagger-editor/plugins/editor-textarea';
11
import EditorMonacoPlugin from 'swagger-editor/plugins/editor-monaco';
12
import EditorMonacoLanguageApiDOMPlugin from 'swagger-editor/plugins/editor-monaco-language-apidom';
13
import EditorContentReadOnlyPlugin from 'swagger-editor/plugins/editor-content-read-only';
14
import EditorContentOriginPlugin from 'swagger-editor/plugins/editor-content-origin';
15
import EditorContentTypePlugin from 'swagger-editor/plugins/editor-content-type';
16
import EditorContentPersistencePlugin from 'swagger-editor/plugins/editor-content-persistence';
17
import EditorContentFixturesPlugin from 'swagger-editor/plugins/editor-content-fixtures';
18
import EditorPreviewPlugin from 'swagger-editor/plugins/editor-preview';
19
import EditorPreviewSwaggerUIPlugin from 'swagger-editor/plugins/editor-preview-swagger-ui';
20
import EditorPreviewAsyncAPIPlugin from 'swagger-editor/plugins/editor-preview-asyncapi';
21
import EditorPreviewApiDesignSystemsPlugin from 'swagger-editor/plugins/editor-preview-api-design-systems';
22
import TopBarPlugin from 'swagger-editor/plugins/top-bar';
23
import SplashScreenPlugin from 'swagger-editor/plugins/splash-screen';
24
import LayoutPlugin from 'swagger-editor/plugins/layout';
25
import EditorSafeRenderPlugin from 'swagger-editor/plugins/editor-safe-render';
26

27
const SwaggerEditor = () => {
28
  return (
29
    <SwaggerUI
30
      url={url}
31
      plugins={[
32
        ModalsPlugin,
33
        DialogsPlugin,
34
        DropdownMenuPlugin,
35
        DropzonePlugin,
36
        VersionsPlugin,
37
        EditorTextareaPlugin,
38
        EditorMonacoPlugin,
39
        EditorMonacoLanguageApiDOMPlugin,
40
        EditorContentReadOnlyPlugin,
41
        EditorContentOriginPlugin,
42
        EditorContentTypePlugin,
43
        EditorContentPersistencePlugin,
44
        EditorContentFixturesPlugin,
45
        EditorPreviewPlugin,
46
        EditorPreviewSwaggerUIPlugin,
47
        EditorPreviewAsyncAPIPlugin,
48
        EditorPreviewApiDesignSystemsPlugin,
49
        TopBarPlugin,
50
        SplashScreenPlugin,
51
        LayoutPlugin,
52
        EditorSafeRenderPlugin,
53
      ]}
54
      layout="StandaloneLayout"
55
    />
56
  );
57
};
58

59
ReactDOM.render(<SwaggerEditor />, document.getElementById('swagger-editor'));

Docker

事前ビルドされたDockerHubイメージ

SwaggerEditorは、docker.swagger.ioでホストされている事前ビルド済みのDockerイメージとして利用可能です。

1
$ docker pull docker.swagger.io/swaggerapi/swagger-editor:next-v5
2
$ docker run -d -p 8080:80 docker.swagger.io/swaggerapi/swagger-editor:next-v5

ローカルでのビルド

特権イメージ:

1
 $ npm run build:app
2
 $ docker build . -t swaggerapi/swagger-editor:next-v5
3
 $ docker run -d -p 8080:80 swaggerapi/swagger-editor:next-v5

次に、ブラウザでhttps://:8080/を開きます。

非特権イメージ:

1
 $ npm run build:app
2
 $ docker build . -f Dockerfile.unprivileged -t swaggerapi/swagger-editor:next-v5-unprivileged
3
 $ docker run -d -p 8080:8080 swaggerapi/swagger-editor:next-v5-unprivileged

次に、ブラウザでhttps://:8080/を開きます。

SwaggerEditorでは現在、カスタム環境変数はサポートされていません。

ライセンス

SwaggerEditorはApache 2.0ライセンスでライセンスされています。SwaggerEditorには、追加の法的通知と情報を含む明示的なNOTICEファイルが付属しています。

このプロジェクトは、ソフトウェアプロジェクトの著作権とライセンスを宣言するための標準化された方法を定義するREUSE仕様を使用しています。

ソフトウェア部品表 (SBOM)

ソフトウェア部品表は、このリポジトリの依存関係グラフで確認できます。Export SBOMボタンをクリックすると、SBOMをSPDX形式でダウンロードできます。