overview.md 2.9 KB
Newer Older
K
Kyle Shockey 已提交
1 2 3 4
# Plugin system overview

### Prior art

5
Swagger UI leans heavily on concepts and patterns found in React and Redux.
K
Kyle Shockey 已提交
6 7 8

If you aren't already familiar, here's some suggested reading:

K
Kyle Shockey 已提交
9 10
- [React: Quick Start (reactjs.org)](https://reactjs.org/docs/hello-world.html)
- [Redux README (redux.js.org)](http://redux.js.org/)
K
Kyle Shockey 已提交
11 12 13

In the following documentation, we won't take the time to define the fundamentals covered in the resources above.

K
Kyle Shockey 已提交
14 15
> **Note**: Some of the examples in this section contain JSX, which is a syntax extension to JavaScript that is useful for writing React components.
>
K
Kyle Shockey 已提交
16
> If you don't want to set up a build pipeline capable of translating JSX to JavaScript, take a look at [React without JSX (reactjs.org)](https://reactjs.org/docs/react-without-jsx.html). You can use our `system.React` reference to leverage React without needing to pull a copy into your project.
K
Kyle Shockey 已提交
17

K
Kyle Shockey 已提交
18 19
### The System

20
The _system_ is the heart of the Swagger UI application. At runtime, it's a JavaScript object that holds many things:
K
Kyle Shockey 已提交
21 22 23 24 25 26

- React components
- Bound Redux actions and reducers
- Bound Reselect state selectors
- System-wide collection of available components
- Built-in helpers like `getComponent`, `makeMappedContainer`, and `getStore`
K
Kyle Shockey 已提交
27
- References to the React and Immutable.js libraries (`system.React`, `system.Im`)
K
Kyle Shockey 已提交
28 29
- User-defined helper functions

30
The system is built up when Swagger UI is called by iterating through ("compiling") each plugin that Swagger UI has been given, through the `presets` and `plugins` configuration options.
K
Kyle Shockey 已提交
31 32 33

### Presets

34
Presets are arrays of plugins, which are provided to Swagger UI through the `presets` configuration option. All plugins within presets are compiled before any plugins provided via the `plugins` configuration option. Consider the following example:
K
Kyle Shockey 已提交
35 36

```javascript
K
WIP  
Kyle Shockey 已提交
37 38
const MyPreset = [FirstPlugin, SecondPlugin, ThirdPlugin]

K
Kyle Shockey 已提交
39 40
SwaggerUI({
  presets: [
K
WIP  
Kyle Shockey 已提交
41
    MyPreset
K
Kyle Shockey 已提交
42 43 44 45
  ]
})
```

46
By default, Swagger UI includes the internal `ApisPreset`, which contains a set of plugins that provide baseline functionality for Swagger UI. If you specify your own `presets` option, you need to add the ApisPreset manually, like so:
K
Kyle Shockey 已提交
47 48 49 50 51 52 53 54 55

```javascript
SwaggerUI({
  presets: [
    SwaggerUI.presets.apis,
    MyAmazingCustomPreset
  ]
})
```
K
Kyle Shockey 已提交
56

57
The need to provide the `apis` preset when adding other presets is an artifact of Swagger UI's original design, and will likely be removed in the next major version.
K
WIP  
Kyle Shockey 已提交
58

K
Kyle Shockey 已提交
59 60 61 62 63 64
### getComponent

`getComponent` is a helper function injected into every container component, which is used to get references to components provided by the plugin system.

All components should be loaded through `getComponent`, since it allows other plugins to modify the component. It is preferred over a conventional `import` statement.

65
Container components in Swagger UI can be loaded by passing `true` as the second argument to `getComponent`, like so:
K
Kyle Shockey 已提交
66

67
```javascript
K
Kyle Shockey 已提交
68 69 70 71
getComponent("ContainerComponentName", true)
```

This will map the current system as props to the component.