mirror of
https://github.com/Redocly/redoc.git
synced 2025-09-25 13:36:40 +03:00
Merge branch 'Redocly:master' into master
This commit is contained in:
Depickere Sven
GitHub
commit
f43a030283
|
|
@ -17,7 +17,7 @@ module.exports = {
|
|||
version: 'detect',
|
||||
},
|
||||
},
|
||||
plugins: ['@typescript-eslint', 'import'],
|
||||
plugins: ['react', 'react-hooks', '@typescript-eslint', 'import'],
|
||||
rules: {
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
|
|
@ -31,6 +31,8 @@ module.exports = {
|
|||
'@typescript-eslint/no-var-requires': 'off',
|
||||
|
||||
'react/prop-types': 'off',
|
||||
'react-hooks/rules-of-hooks': 'error',
|
||||
'react-hooks/exhaustive-deps': 'warn',
|
||||
|
||||
'import/no-extraneous-dependencies': 'error',
|
||||
'import/no-internal-modules': [
|
||||
|
|
|
|||
69
.github/workflows/publish-cli.yml
vendored
69
.github/workflows/publish-cli.yml
vendored
|
|
@ -5,53 +5,52 @@ on:
|
|||
branches:
|
||||
- master
|
||||
|
||||
|
||||
jobs:
|
||||
bundle:
|
||||
needs: [ check-version-cli ]
|
||||
needs: [check-version-cli]
|
||||
if: needs.check-version-cli.outputs.changed == 'true'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
|
||||
key: npm-${{ hashFiles('package-lock.json') }}
|
||||
restore-keys: |
|
||||
npm-${{ hashFiles('package-lock.json') }}
|
||||
npm-
|
||||
- run: npm ci
|
||||
- run: npm run bundle
|
||||
- name: Store bundle artifact
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: bundles-cli
|
||||
path: bundles
|
||||
retention-days: 1
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
|
||||
key: npm-${{ hashFiles('package-lock.json') }}
|
||||
restore-keys: |
|
||||
npm-${{ hashFiles('package-lock.json') }}
|
||||
npm-
|
||||
- run: npm ci
|
||||
- run: npm run bundle
|
||||
- name: Store bundle artifact
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: bundles-cli
|
||||
path: bundles
|
||||
retention-days: 1
|
||||
unit-tests:
|
||||
needs: [ check-version-cli ]
|
||||
needs: [check-version-cli]
|
||||
if: needs.check-version-cli.outputs.changed == 'true'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- run: npm ci
|
||||
- run: npm test
|
||||
- uses: actions/checkout@v1
|
||||
- run: npm ci
|
||||
- run: npm test
|
||||
e2e-tests:
|
||||
needs: [ bundle ]
|
||||
needs: [bundle]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- run: npm ci
|
||||
- name: Download bundled artifact
|
||||
uses: actions/download-artifact@v2
|
||||
with:
|
||||
name: bundles-cli
|
||||
path: bundles
|
||||
- run: npm run e2e
|
||||
- uses: actions/checkout@v1
|
||||
- run: npm ci
|
||||
- name: Download bundled artifact
|
||||
uses: actions/download-artifact@v2
|
||||
with:
|
||||
name: bundles-cli
|
||||
path: bundles
|
||||
- run: npm run e2e
|
||||
bundle-cli:
|
||||
needs: [ check-version-cli ]
|
||||
needs: [check-version-cli]
|
||||
if: needs.check-version-cli.outputs.changed == 'true'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
|
@ -99,7 +98,7 @@ jobs:
|
|||
steps:
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: "14.x"
|
||||
node-version: '14.x'
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
- uses: actions/checkout@v2
|
||||
- name: Download cli bundled artifact
|
||||
|
|
|
|||
60
.github/workflows/publish.yml
vendored
60
.github/workflows/publish.yml
vendored
|
|
@ -9,42 +9,42 @@ jobs:
|
|||
bundle:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
|
||||
key: npm-${{ hashFiles('package-lock.json') }}
|
||||
restore-keys: |
|
||||
npm-${{ hashFiles('package-lock.json') }}
|
||||
npm-
|
||||
- run: npm ci
|
||||
- run: npm run bundle
|
||||
- name: Store bundle artifact
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: bundles
|
||||
path: bundles
|
||||
retention-days: 1
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
- name: Cache node modules
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
|
||||
key: npm-${{ hashFiles('package-lock.json') }}
|
||||
restore-keys: |
|
||||
npm-${{ hashFiles('package-lock.json') }}
|
||||
npm-
|
||||
- run: npm ci
|
||||
- run: npm run bundle
|
||||
- name: Store bundle artifact
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: bundles
|
||||
path: bundles
|
||||
retention-days: 1
|
||||
unit-tests:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- run: npm ci
|
||||
- run: npm test
|
||||
- uses: actions/checkout@v1
|
||||
- run: npm ci
|
||||
- run: npm test
|
||||
e2e-tests:
|
||||
needs: [bundle]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- run: npm ci
|
||||
- name: Download bundled artifact
|
||||
uses: actions/download-artifact@v2
|
||||
with:
|
||||
name: bundles
|
||||
path: bundles
|
||||
- run: npm run e2e
|
||||
- uses: actions/checkout@v1
|
||||
- run: npm ci
|
||||
- name: Download bundled artifact
|
||||
uses: actions/download-artifact@v2
|
||||
with:
|
||||
name: bundles
|
||||
path: bundles
|
||||
- run: npm run e2e
|
||||
# disable this for now
|
||||
# deploy-demo:
|
||||
# needs: [bundle, unit-tests, e2e-tests]
|
||||
|
|
@ -76,7 +76,7 @@ jobs:
|
|||
steps:
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: "14.x"
|
||||
node-version: '14.x'
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
- uses: actions/checkout@v2
|
||||
- name: Download bundled artifacts
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -37,3 +37,4 @@ stats.json
|
|||
yarn.lock
|
||||
.idea
|
||||
.vscode
|
||||
.eslintcache
|
||||
|
|
|
|||
4
.husky/pre-commit
Executable file
4
.husky/pre-commit
Executable file
|
|
@ -0,0 +1,4 @@
|
|||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npm run pre-commit
|
||||
1
.prettierignore
Normal file
1
.prettierignore
Normal file
|
|
@ -0,0 +1 @@
|
|||
*.md
|
||||
61
CHANGELOG.md
61
CHANGELOG.md
|
|
@ -1,3 +1,64 @@
|
|||
# [2.0.0-rc.62](https://github.com/Redocly/redoc/compare/v2.0.0-rc.61...v2.0.0-rc.62) (2022-01-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix field expand does not work ([#1875](https://github.com/Redocly/redoc/issues/1875))
|
||||
|
||||
|
||||
# [2.0.0-rc.61](https://github.com/Redocly/redoc/compare/v2.0.0-rc.60...v2.0.0-rc.61) (2022-01-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix crash in redoc-cli after migrating to esbuild ([#1872](https://github.com/Redocly/redoc/issues/1872))
|
||||
|
||||
# [2.0.0-rc.60](https://github.com/Redocly/redoc/compare/v2.0.0-rc.59...v2.0.0-rc.60) (2022-01-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add schema expansion level ([#1868](https://github.com/Redocly/redoc/issues/1868)) ([250d53a](https://github.com/Redocly/redoc/commit/250d53a59fb4bf881875ba466c5a7f3b55d80007))
|
||||
* attachHeadingsDescriptions match headings incorrectly ([#1845](https://github.com/Redocly/redoc/issues/1845)) ([ea8573d](https://github.com/Redocly/redoc/commit/ea8573dbd78439be50aa2b38f1c83658c16783e3))
|
||||
* definition name util ([#1865](https://github.com/Redocly/redoc/issues/1865)) ([95a7347](https://github.com/Redocly/redoc/commit/95a734793158d4749e98ee4a7e90e70713a04ced))
|
||||
* No maxLength label is displayed for arrays of items [#1701](https://github.com/Redocly/redoc/issues/1701) ([#1765](https://github.com/Redocly/redoc/issues/1765)) ([6c7685e](https://github.com/Redocly/redoc/commit/6c7685e5fa04314328a445d7077600692c49489c))
|
||||
* Response objects couldn't open ([#1867](https://github.com/Redocly/redoc/issues/1867)) ([18f943d](https://github.com/Redocly/redoc/commit/18f943d2b5668f1552d212dee1c3a2ed59054095))
|
||||
* writeOnly params displaying in webhook ([#1866](https://github.com/Redocly/redoc/issues/1866)) ([5694913](https://github.com/Redocly/redoc/commit/5694913e71f0e8c3a5d9393f1b4ae92534127841))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **#1251:** Add file selector to demo application ([#1859](https://github.com/Redocly/redoc/issues/1859)) ([b74dcde](https://github.com/Redocly/redoc/commit/b74dcde42b45ebe5ae617f1ec3cfea2ea1aff922)), closes [#1251](https://github.com/Redocly/redoc/issues/1251) [#1251](https://github.com/Redocly/redoc/issues/1251) [#1251](https://github.com/Redocly/redoc/issues/1251)
|
||||
* redoc-cli add host option ([#1598](https://github.com/Redocly/redoc/issues/1598)) ([fb104e6](https://github.com/Redocly/redoc/commit/fb104e696618b0b81439da134887830a0f2439ea))
|
||||
* support examples in object schema ([#1832](https://github.com/Redocly/redoc/issues/1832)) ([c986f0e](https://github.com/Redocly/redoc/commit/c986f0ef1a38bc1e61cae70830d84de03b684b89))
|
||||
|
||||
|
||||
|
||||
# [2.0.0-rc.59](https://github.com/Redocly/redoc/compare/v2.0.0-rc.58...v2.0.0-rc.59) (2021-12-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix scroll in example dropdown ([#1803](https://github.com/Redocly/redoc/issues/1803)) ([bc2d9a7](https://github.com/Redocly/redoc/commit/bc2d9a7d9cd530274483fecd136db290a5b46ff7))
|
||||
* x-examples for request body param does not display [#1743](https://github.com/Redocly/redoc/issues/1743) ([#1826](https://github.com/Redocly/redoc/issues/1826)) ([aaa3b32](https://github.com/Redocly/redoc/commit/aaa3b3280c8422d450e8849ae02135dde199d6d5))
|
||||
|
||||
### Features
|
||||
|
||||
* add option sideNavStyle ([#1805](https://github.com/Redocly/redoc/pull/1805)) ([2e4663b](https://github.com/Redocly/redoc/commit/2e4663b3b7022f25d3dc808afbcb3b3ad9483c41))
|
||||
|
||||
|
||||
# [2.0.0-rc.58](https://github.com/Redocly/redoc/compare/v2.0.0-rc.57...v2.0.0-rc.58) (2021-11-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add browser build for webpack 5 ([#1796](https://github.com/Redocly/redoc/issues/1796)) ([0e43ad3](https://github.com/Redocly/redoc/commit/0e43ad3102cfba8c4b30e59500ad4efc53f01c2d))
|
||||
* Default boolean property value not rendered [#1779](https://github.com/Redocly/redoc/issues/1779) ([#1781](https://github.com/Redocly/redoc/issues/1781)) ([734080c](https://github.com/Redocly/redoc/commit/734080c35471d16f87004f7f9a51dcdeee1278a6))
|
||||
* exclusiveMin/Max shows incorect range ([#1799](https://github.com/Redocly/redoc/issues/1799)) ([b604bd8](https://github.com/Redocly/redoc/commit/b604bd8da874f07e9e9f8b193ad10117a5f5059c))
|
||||
* mobile view in docker image ([#1795](https://github.com/Redocly/redoc/issues/1795)) ([ad652b9](https://github.com/Redocly/redoc/commit/ad652b9c7fbcd84a6e83397272de64e57213fe9a))
|
||||
|
||||
|
||||
|
||||
# [2.0.0-rc.57](https://github.com/Redocly/redoc/compare/v2.0.0-rc.56...v2.0.0-rc.57) (2021-10-11)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
# Generate interactive API documentation from OpenAPI definitions
|
||||
|
||||
[](https://travis-ci.com/Redocly/redoc) [](https://coveralls.io/github/Redocly/redoc?branch=master) [](https://david-dm.org/Redocly/redoc) [](https://david-dm.org/Redocly/redoc#info=devDependencies) [](https://www.npmjs.com/package/redoc) [](https://github.com/Redocly/redoc/blob/master/LICENSE)
|
||||
[](https://travis-ci.com/Redocly/redoc) [](https://coveralls.io/github/Redocly/redoc?branch=master) [](https://www.npmjs.com/package/redoc) [](https://github.com/Redocly/redoc/blob/master/LICENSE)
|
||||
|
||||
[](https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js) [](https://www.npmjs.com/package/redoc) [](https://www.jsdelivr.com/package/npm/redoc) [](https://hub.docker.com/r/redocly/redoc/)
|
||||
</div>
|
||||
|
|
@ -183,6 +183,7 @@ IE support for Redoc.
|
|||
For more information on Redoc's commmand-line interface, refer to
|
||||
[**Using the Redoc CLI**](https://redoc.ly/docs/redoc/quickstart/cli/).
|
||||
|
||||
|
||||
## Configuration
|
||||
|
||||
### Security Definition location
|
||||
|
|
@ -239,6 +240,9 @@ You can use all of the following options with the standalone version of the <red
|
|||
* `payloadSampleIdx` - if set, payload sample will be inserted at this index or last. Indexes start from 0.
|
||||
* `theme` - ReDoc theme. For details check [theme docs](#redoc-theme-object).
|
||||
* `untrustedSpec` - if set, the spec is considered untrusted and all HTML/markdown is sanitized to prevent XSS. **Disabled by default** for performance reasons. **Enable this option if you work with untrusted user data!**
|
||||
* `sideNavStyle` - can be specified in various ways:
|
||||
* **summary-only**: displays a summary in the sidebar navigation item. (**default**)
|
||||
* **path-only**: displays a path in the sidebar navigation item.
|
||||
|
||||
### `<redoc>` theme object
|
||||
* `spacing`
|
||||
|
|
|
|||
12
cli/index.ts
12
cli/index.ts
|
|
@ -61,6 +61,12 @@ YargsParser.command(
|
|||
type: 'boolean',
|
||||
});
|
||||
|
||||
yargs.option('h', {
|
||||
alias: 'host',
|
||||
type: 'string',
|
||||
default: '127.0.0.1',
|
||||
});
|
||||
|
||||
yargs.option('p', {
|
||||
alias: 'port',
|
||||
type: 'number',
|
||||
|
|
@ -93,7 +99,7 @@ YargsParser.command(
|
|||
};
|
||||
|
||||
try {
|
||||
await serve(argv.port as number, argv.spec as string, config);
|
||||
await serve(argv.host as string, argv.port as number, argv.spec as string, config);
|
||||
} catch (e) {
|
||||
handleError(e);
|
||||
}
|
||||
|
|
@ -167,7 +173,7 @@ YargsParser.command(
|
|||
describe: 'ReDoc options, use dot notation, e.g. options.nativeScrollbars',
|
||||
}).argv;
|
||||
|
||||
async function serve(port: number, pathToSpec: string, options: Options = {}) {
|
||||
async function serve(host: string, port: number, pathToSpec: string, options: Options = {}) {
|
||||
let spec = await loadAndBundleSpec(isURL(pathToSpec) ? pathToSpec : resolve(pathToSpec));
|
||||
let pageHTML = await getPageHTML(spec, pathToSpec, options);
|
||||
const server = createServer((request, response) => {
|
||||
|
|
@ -201,7 +207,7 @@ async function serve(port: number, pathToSpec: string, options: Options = {}) {
|
|||
|
||||
console.log();
|
||||
|
||||
server.listen(port, () => console.log(`Server started: http://127.0.0.1:${port}`));
|
||||
server.listen(port, host, () => console.log(`Server started: http://${host}:${port}`));
|
||||
|
||||
if (options.watch && existsSync(pathToSpec)) {
|
||||
const pathToSpecDirectory = resolve(dirname(pathToSpec));
|
||||
|
|
|
|||
178
cli/npm-shrinkwrap.json
generated
178
cli/npm-shrinkwrap.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "redoc-cli",
|
||||
"version": "0.13.0",
|
||||
"version": "0.13.6",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "redoc-cli",
|
||||
"version": "0.13.0",
|
||||
"version": "0.13.6",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chokidar": "^3.5.1",
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
"node-libs-browser": "^2.2.1",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"redoc": "2.0.0-rc.57",
|
||||
"redoc": "2.0.0-rc.61",
|
||||
"styled-components": "^5.3.0",
|
||||
"yargs": "^17.0.1"
|
||||
},
|
||||
|
|
@ -267,9 +267,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
|
||||
"integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA=="
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
|
||||
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
|
||||
},
|
||||
"node_modules/@types/mkdirp": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -406,6 +406,14 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"node_modules/big.js": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
|
|
@ -834,6 +842,14 @@
|
|||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
|
||||
},
|
||||
"node_modules/emojis-list": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/es6-promise": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
|
||||
|
|
@ -921,9 +937,7 @@
|
|||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"os": ["darwin"],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
|
|
@ -1126,6 +1140,20 @@
|
|||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
|
||||
"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
|
||||
},
|
||||
"node_modules/isomorphic-style-loader": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/isomorphic-style-loader/-/isomorphic-style-loader-5.3.2.tgz",
|
||||
"integrity": "sha512-5mwHrN2xK5zsKBxSUYF7iDhoU9Kpcpfgn0lFOP0SKk3aKwkl26zi6kh+KDrekjlLzNbYsFnn8o1yWaB3OflVXQ==",
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/js-levenshtein": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
|
||||
|
|
@ -1175,6 +1203,30 @@
|
|||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
|
||||
},
|
||||
"node_modules/json5": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
|
||||
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
|
||||
"dependencies": {
|
||||
"minimist": "^1.2.0"
|
||||
},
|
||||
"bin": {
|
||||
"json5": "lib/cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/loader-utils": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
|
||||
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
|
||||
"dependencies": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
|
|
@ -1207,14 +1259,14 @@
|
|||
"integrity": "sha1-GA8fnr74sOY45BZq1S24eb6y/8U="
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz",
|
||||
"integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==",
|
||||
"version": "4.0.10",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.0.10.tgz",
|
||||
"integrity": "sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==",
|
||||
"bin": {
|
||||
"marked": "bin/marked"
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/md5.js": {
|
||||
|
|
@ -1227,11 +1279,6 @@
|
|||
"safe-buffer": "^5.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"node_modules/miller-rabin": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
|
||||
|
|
@ -1489,9 +1536,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/openapi-sampler": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/openapi-sampler/-/openapi-sampler-1.0.1.tgz",
|
||||
"integrity": "sha512-qBjxkSLJV183zTTs4fgxtU/iWSLUUu2aH2+5ddWkNhV7p8CSe/mnAgoLkEbMfHtel6yr9NF+vjUWqfM+iiwORQ==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/openapi-sampler/-/openapi-sampler-1.1.1.tgz",
|
||||
"integrity": "sha512-WAFsl5SPYuhQwaMTDFOcKhnEY1G1rmamrMiPmJdqwfl1lr81g63/befcsN9BNi0w5/R0L+hfcUj13PANEBeLgg==",
|
||||
"dependencies": {
|
||||
"@types/json-schema": "^7.0.7",
|
||||
"json-pointer": "^0.6.1"
|
||||
|
|
@ -1747,24 +1794,23 @@
|
|||
}
|
||||
},
|
||||
"node_modules/redoc": {
|
||||
"version": "2.0.0-rc.57",
|
||||
"resolved": "https://registry.npmjs.org/redoc/-/redoc-2.0.0-rc.57.tgz",
|
||||
"integrity": "sha512-f8XIqvZF1agphq6xmOU9jTDVNDFHJt3MzDq1lUgZojb/7YY4eqLyDi6er/yCWYkY9DuB+v2jHCOn5UUbMuKAfg==",
|
||||
"version": "2.0.0-rc.61",
|
||||
"resolved": "https://registry.npmjs.org/redoc/-/redoc-2.0.0-rc.61.tgz",
|
||||
"integrity": "sha512-fZLz8JI8zAHiYcRUHbiq6R7sRlR6EgMXrFdpD9GE0Fmp5laScEC2XOQjsPp0uYQgzvhKQSOg/7WyVrZ6GHualQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.14.0",
|
||||
"@redocly/openapi-core": "^1.0.0-beta.54",
|
||||
"@redocly/react-dropdown-aria": "^2.0.11",
|
||||
"classnames": "^2.3.1",
|
||||
"decko": "^1.2.0",
|
||||
"dompurify": "^2.2.8",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"isomorphic-style-loader": "^5.3.2",
|
||||
"json-pointer": "^0.6.1",
|
||||
"lunr": "^2.3.9",
|
||||
"mark.js": "^8.11.1",
|
||||
"marked": "^0.7.0",
|
||||
"memoize-one": "^5.2.1",
|
||||
"marked": "^4.0.10",
|
||||
"mobx-react": "^7.2.0",
|
||||
"openapi-sampler": "^1.0.1",
|
||||
"openapi-sampler": "^1.1.1",
|
||||
"path-browserify": "^1.0.1",
|
||||
"perfect-scrollbar": "^1.5.1",
|
||||
"polished": "^4.1.3",
|
||||
|
|
@ -2512,9 +2558,9 @@
|
|||
}
|
||||
},
|
||||
"@types/json-schema": {
|
||||
"version": "7.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
|
||||
"integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA=="
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
|
||||
"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
|
||||
},
|
||||
"@types/mkdirp": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -2629,6 +2675,11 @@
|
|||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
|
||||
},
|
||||
"big.js": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
|
|
@ -3024,6 +3075,11 @@
|
|||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
|
||||
},
|
||||
"emojis-list": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
|
||||
},
|
||||
"es6-promise": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
|
||||
|
|
@ -3239,6 +3295,16 @@
|
|||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
|
||||
"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
|
||||
},
|
||||
"isomorphic-style-loader": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/isomorphic-style-loader/-/isomorphic-style-loader-5.3.2.tgz",
|
||||
"integrity": "sha512-5mwHrN2xK5zsKBxSUYF7iDhoU9Kpcpfgn0lFOP0SKk3aKwkl26zi6kh+KDrekjlLzNbYsFnn8o1yWaB3OflVXQ==",
|
||||
"requires": {
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"js-levenshtein": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
|
||||
|
|
@ -3276,6 +3342,24 @@
|
|||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
|
||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
|
||||
},
|
||||
"json5": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
|
||||
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
|
||||
"requires": {
|
||||
"minimist": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
|
||||
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
|
|
@ -3305,9 +3389,9 @@
|
|||
"integrity": "sha1-GA8fnr74sOY45BZq1S24eb6y/8U="
|
||||
},
|
||||
"marked": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz",
|
||||
"integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg=="
|
||||
"version": "4.0.10",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-4.0.10.tgz",
|
||||
"integrity": "sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw=="
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -3319,11 +3403,6 @@
|
|||
"safe-buffer": "^5.1.2"
|
||||
}
|
||||
},
|
||||
"memoize-one": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"miller-rabin": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
|
||||
|
|
@ -3509,9 +3588,9 @@
|
|||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
|
||||
},
|
||||
"openapi-sampler": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/openapi-sampler/-/openapi-sampler-1.0.1.tgz",
|
||||
"integrity": "sha512-qBjxkSLJV183zTTs4fgxtU/iWSLUUu2aH2+5ddWkNhV7p8CSe/mnAgoLkEbMfHtel6yr9NF+vjUWqfM+iiwORQ==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/openapi-sampler/-/openapi-sampler-1.1.1.tgz",
|
||||
"integrity": "sha512-WAFsl5SPYuhQwaMTDFOcKhnEY1G1rmamrMiPmJdqwfl1lr81g63/befcsN9BNi0w5/R0L+hfcUj13PANEBeLgg==",
|
||||
"requires": {
|
||||
"@types/json-schema": "^7.0.7",
|
||||
"json-pointer": "^0.6.1"
|
||||
|
|
@ -3740,24 +3819,23 @@
|
|||
}
|
||||
},
|
||||
"redoc": {
|
||||
"version": "2.0.0-rc.57",
|
||||
"resolved": "https://registry.npmjs.org/redoc/-/redoc-2.0.0-rc.57.tgz",
|
||||
"integrity": "sha512-f8XIqvZF1agphq6xmOU9jTDVNDFHJt3MzDq1lUgZojb/7YY4eqLyDi6er/yCWYkY9DuB+v2jHCOn5UUbMuKAfg==",
|
||||
"version": "2.0.0-rc.61",
|
||||
"resolved": "https://registry.npmjs.org/redoc/-/redoc-2.0.0-rc.61.tgz",
|
||||
"integrity": "sha512-fZLz8JI8zAHiYcRUHbiq6R7sRlR6EgMXrFdpD9GE0Fmp5laScEC2XOQjsPp0uYQgzvhKQSOg/7WyVrZ6GHualQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.14.0",
|
||||
"@redocly/openapi-core": "^1.0.0-beta.54",
|
||||
"@redocly/react-dropdown-aria": "^2.0.11",
|
||||
"classnames": "^2.3.1",
|
||||
"decko": "^1.2.0",
|
||||
"dompurify": "^2.2.8",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"isomorphic-style-loader": "^5.3.2",
|
||||
"json-pointer": "^0.6.1",
|
||||
"lunr": "^2.3.9",
|
||||
"mark.js": "^8.11.1",
|
||||
"marked": "^0.7.0",
|
||||
"memoize-one": "^5.2.1",
|
||||
"marked": "^4.0.10",
|
||||
"mobx-react": "^7.2.0",
|
||||
"openapi-sampler": "^1.0.1",
|
||||
"openapi-sampler": "^1.1.1",
|
||||
"path-browserify": "^1.0.1",
|
||||
"perfect-scrollbar": "^1.5.1",
|
||||
"polished": "^4.1.3",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "redoc-cli",
|
||||
"version": "0.13.0",
|
||||
"version": "0.13.6",
|
||||
"description": "ReDoc's Command Line Interface",
|
||||
"main": "index.js",
|
||||
"bin": "index.js",
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
"node-libs-browser": "^2.2.1",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"redoc": "2.0.0-rc.57",
|
||||
"redoc": "2.0.0-rc.62",
|
||||
"styled-components": "^5.3.0",
|
||||
"yargs": "^17.0.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>%PAGE_TITLE%</title>
|
||||
<link rel="icon" href="%PAGE_FAVICON%" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>%PAGE_TITLE%</title>
|
||||
<link rel="icon" href="%PAGE_FAVICON%">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
redoc {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<redoc spec-url="%SPEC_URL%" %REDOC_OPTIONS%></redoc>
|
||||
<script src="redoc.standalone.js"></script>
|
||||
</body>
|
||||
redoc {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<redoc spec-url="%SPEC_URL%" %REDOC_OPTIONS%></redoc>
|
||||
<script src="redoc.standalone.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,46 +1,5 @@
|
|||
import * as webpack from 'webpack';
|
||||
|
||||
export function getBabelLoader({useBuiltIns, hot}: {useBuiltIns: boolean, hot?: boolean}) {
|
||||
return {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
babelrc: false,
|
||||
sourceType: 'unambiguous',
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
useBuiltIns: useBuiltIns ? 'usage' : false,
|
||||
corejs: 3,
|
||||
exclude: ['transform-typeof-symbol'],
|
||||
targets: 'defaults',
|
||||
modules: false,
|
||||
},
|
||||
],
|
||||
['@babel/preset-react', { development: false, runtime: 'classic' }],
|
||||
'@babel/preset-typescript',
|
||||
],
|
||||
plugins: [
|
||||
['@babel/plugin-proposal-decorators', { legacy: true }],
|
||||
['@babel/plugin-proposal-class-properties', { loose: false }],
|
||||
[
|
||||
'@babel/plugin-transform-runtime',
|
||||
{
|
||||
corejs: false,
|
||||
helpers: true,
|
||||
// eslint-disable-next-line import/no-internal-modules
|
||||
version: require('@babel/runtime/package.json').version,
|
||||
regenerator: true,
|
||||
},
|
||||
],
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||
hot ? 'react-hot-loader/babel' : undefined,
|
||||
].filter(Boolean)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function webpackIgnore(regexp) {
|
||||
return new webpack.NormalModuleReplacementPlugin(regexp, require.resolve('lodash/noop.js'));
|
||||
return new webpack.NormalModuleReplacementPlugin(regexp, require.resolve('lodash.noop'));
|
||||
}
|
||||
|
|
|
|||
2
custom.d.ts
vendored
2
custom.d.ts
vendored
|
|
@ -23,3 +23,5 @@ declare var reactHotLoaderGlobal: any;
|
|||
interface Element {
|
||||
scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
|
||||
}
|
||||
|
||||
type GenericObject = Record<string, any>;
|
||||
|
|
|
|||
52
demo/components/FileInput.tsx
Normal file
52
demo/components/FileInput.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import * as yaml from 'js-yaml';
|
||||
import * as React from 'react';
|
||||
import { ChangeEvent, RefObject, useRef } from 'react';
|
||||
import styled from '../../src/styled-components';
|
||||
|
||||
const Button = styled.button`
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 2px 10px;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 16px;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
white-space: nowrap;
|
||||
@media (max-width: 699px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
function FileInput(props: { onUpload }) {
|
||||
const hiddenFileInput: RefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleClick = () => {
|
||||
if (hiddenFileInput && hiddenFileInput.current) {
|
||||
hiddenFileInput.current.click();
|
||||
}
|
||||
};
|
||||
|
||||
const uploadFile = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = (event.target as HTMLInputElement).files![0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
props.onUpload(yaml.load(reader.result));
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<span>
|
||||
<Button onClick={handleClick}>Upload a file</Button>
|
||||
<input type="file" style={{ display: 'none' }} onChange={uploadFile} ref={hiddenFileInput} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default FileInput;
|
||||
|
|
@ -4,6 +4,7 @@ import styled from 'styled-components';
|
|||
import { resolve as urlResolve } from 'url';
|
||||
import { RedocStandalone } from '../src';
|
||||
import ComboBox from './ComboBox';
|
||||
import FileInput from './components/FileInput';
|
||||
|
||||
const DEFAULT_SPEC = 'openapi.yaml';
|
||||
const NEW_VERSION_SPEC = 'openapi-3-1.yaml';
|
||||
|
|
@ -22,7 +23,7 @@ const demos = [
|
|||
|
||||
class DemoApp extends React.Component<
|
||||
{},
|
||||
{ specUrl: string; dropdownOpen: boolean; cors: boolean }
|
||||
{ spec: object | undefined; specUrl: string; dropdownOpen: boolean; cors: boolean }
|
||||
> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -40,15 +41,24 @@ class DemoApp extends React.Component<
|
|||
}
|
||||
|
||||
this.state = {
|
||||
spec: undefined,
|
||||
specUrl: url,
|
||||
dropdownOpen: false,
|
||||
cors,
|
||||
};
|
||||
}
|
||||
|
||||
handleUploadFile = (spec: object) => {
|
||||
this.setState({
|
||||
spec,
|
||||
specUrl: '',
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (url: string) => {
|
||||
if (url === NEW_VERSION_SPEC) {
|
||||
this.setState({ cors: false })
|
||||
this.setState({ cors: false });
|
||||
0;
|
||||
}
|
||||
this.setState({
|
||||
specUrl: url,
|
||||
|
|
@ -90,6 +100,7 @@ class DemoApp extends React.Component<
|
|||
/>
|
||||
</a>
|
||||
<ControlsContainer>
|
||||
<FileInput onUpload={this.handleUploadFile} />
|
||||
<ComboBox
|
||||
placeholder={'URL to a spec to try'}
|
||||
options={demos}
|
||||
|
|
@ -110,6 +121,7 @@ class DemoApp extends React.Component<
|
|||
/>
|
||||
</Heading>
|
||||
<RedocStandalone
|
||||
spec={this.state.spec}
|
||||
specUrl={proxiedUrl}
|
||||
options={{ scrollYOffset: 'nav', untrustedSpec: true }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
|||
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { resolve } from 'path';
|
||||
import * as webpack from 'webpack';
|
||||
import { getBabelLoader, webpackIgnore } from '../config/webpack-utils';
|
||||
import { webpackIgnore } from '../config/webpack-utils';
|
||||
|
||||
const VERSION = JSON.stringify(require('../package.json').version);
|
||||
const REVISION = JSON.stringify(
|
||||
|
|
@ -33,18 +33,20 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
|
|||
},
|
||||
|
||||
devServer: {
|
||||
contentBase: __dirname,
|
||||
watchContentBase: true,
|
||||
static: __dirname,
|
||||
port: 9090,
|
||||
disableHostCheck: true,
|
||||
stats: 'minimal',
|
||||
hot: true,
|
||||
historyApiFallback: true,
|
||||
open: true,
|
||||
},
|
||||
stats: {
|
||||
children: true,
|
||||
},
|
||||
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.json'],
|
||||
fallback: {
|
||||
path: require.resolve('path-browserify'),
|
||||
buffer: require.resolve('buffer'),
|
||||
http: false,
|
||||
fs: false,
|
||||
os: false,
|
||||
|
|
@ -71,33 +73,28 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
|
|||
rules: [
|
||||
{ test: [/\.eot$/, /\.gif$/, /\.woff$/, /\.svg$/, /\.ttf$/], use: 'null-loader' },
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: [getBabelLoader({useBuiltIns: true, hot: true} )],
|
||||
exclude: {
|
||||
and: [/node_modules/],
|
||||
not: {
|
||||
or: [
|
||||
/swagger2openapi/,
|
||||
/reftools/,
|
||||
/openapi-sampler/,
|
||||
/mobx/,
|
||||
/oas-resolver/,
|
||||
/oas-kit-common/,
|
||||
/oas-schema-walker/,
|
||||
/\@redocly\/openapi-core/,
|
||||
/colorette/,
|
||||
],
|
||||
},
|
||||
test: /\.(tsx?|[cm]?js)$/,
|
||||
loader: 'esbuild-loader',
|
||||
options: {
|
||||
loader: 'tsx',
|
||||
target: 'es2015',
|
||||
tsconfigRaw: require('../tsconfig.json'),
|
||||
},
|
||||
exclude: [/node_modules/],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
use: [
|
||||
'isomorphic-style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'esbuild-loader',
|
||||
options: {
|
||||
loader: 'css',
|
||||
minify: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -118,6 +115,9 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
|
|||
? 'benchmark/index.html'
|
||||
: 'demo/index.html',
|
||||
}),
|
||||
new webpack.ProvidePlugin({
|
||||
Buffer: ['buffer', 'Buffer'],
|
||||
}),
|
||||
new ForkTsCheckerWebpackPlugin({ logger: { infrastructure: 'silent', issues: 'console' } }),
|
||||
webpackIgnore(/js-yaml\/dumper\.js$/),
|
||||
webpackIgnore(/json-schema-ref-parser\/lib\/dereference\.js/),
|
||||
|
|
|
|||
114
docs/deployment/cli.md
Normal file
114
docs/deployment/cli.md
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
---
|
||||
title: Using the Redoc CLI
|
||||
redirectFrom:
|
||||
- /docs/quickstart/cli/
|
||||
---
|
||||
|
||||
# Using the Redoc CLI
|
||||
|
||||
With Redoc's command-line interface you can bundle your OpenAPI definition and API documentation
|
||||
(made with Redoc) into a zero-dependency HTML file and locally render your
|
||||
OpenAPI definition with Redoc.
|
||||
|
||||
## Step 1 - Install Redoc CLI
|
||||
|
||||
You can install the `redoc-cli` package globally using one of the following package managers:
|
||||
|
||||
- [npm](https://docs.npmjs.com/about-npm)
|
||||
- [yarn](https://classic.yarnpkg.com/en/docs/getting-started)
|
||||
|
||||
Or you can install `redoc-cli` using [npx](https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/).
|
||||
|
||||
### Install Redoc CLI with yarn
|
||||
|
||||
To install the `redoc-cli` package globally with yarn:
|
||||
|
||||
```bash
|
||||
yarn global add redoc-cli
|
||||
```
|
||||
|
||||
### Install Redoc with npm
|
||||
|
||||
To install the `redoc-cli` package globally with npm:
|
||||
|
||||
```bash
|
||||
npm i -g redoc-cli
|
||||
```
|
||||
|
||||
### Install with `npx`
|
||||
|
||||
To install the `redoc-cli` package locally with `npx`, navigate to your project
|
||||
directory in your terminal, then use the following command:
|
||||
|
||||
```bash
|
||||
npx redoc-cli
|
||||
```
|
||||
|
||||
## Step 2 - Use the CLI
|
||||
|
||||
### Redoc CLI commands
|
||||
|
||||
The CLI includes the following commands:
|
||||
|
||||
- **`redoc-cli serve [spec]`:** Starts a local server with Redoc. You must include the required parameter, spec, which is
|
||||
a reference to an OpenAPI definition. Options include:
|
||||
- `--ssr`: Implements a server-side rendering model.
|
||||
- `--watch`: Automatically reloads the server while you edit your OpenAPI definition.
|
||||
- `--options`: Customizes your output using [Redoc options](https://redoc.ly/docs/api-reference-docs/configuration/).
|
||||
To add nested options, use dot notation.
|
||||
- **`redoc-cli bundle [spec]`:** Bundles `spec` and Redoc into a zero-dependency HTML file. Options include:
|
||||
- `-t` or `--template`: Uses custom [Handlebars](https://handlebarsjs.com/) templates to render your OpenAPI definition.
|
||||
- `--templateOptions`: Adds template options you want to pass to your
|
||||
custom Handlebars template. To add options, use dot notation.
|
||||
- **`--help`:** Prints help text for the Redoc CLI commands and options.
|
||||
- **`--version`:** Prints the version of the `redoc-cli` package you have installed.
|
||||
|
||||
### Redoc CLI examples
|
||||
|
||||
#### Bundle
|
||||
|
||||
Bundle with the main color changed to `orange`:
|
||||
|
||||
```bash
|
||||
redoc-cli bundle openapi.yaml --options.theme.colors.primary.main=orange
|
||||
```
|
||||
|
||||
Bundle using a custom Handlebars template and add custom `templateOptions`:
|
||||
|
||||
```bash
|
||||
redoc-cli bundle http://petstore.swagger.io/v2/swagger.json -t custom.hbs --templateOptions.metaDescription "Page meta description"
|
||||
```
|
||||
|
||||
Sample Handlebars template:
|
||||
|
||||
```handlebars
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8" />
|
||||
<title>{{title}}</title>
|
||||
<!-- needed for adaptive design -->
|
||||
<meta description="{{{templateOptions.metaDescription}}}">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
{{{redocHead}}}
|
||||
{{#unless disableGoogleFont}}<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">{{/unless}}
|
||||
</head>
|
||||
<body>
|
||||
{{{redocHTML}}}
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Serve
|
||||
|
||||
Serve with the `nativeScrollbars` option set to `true`:
|
||||
|
||||
```bash
|
||||
redoc-cli serve openapi/dist.yaml --options.nativeScrollbars
|
||||
```
|
||||
41
docs/deployment/docker.md
Normal file
41
docs/deployment/docker.md
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
title: Using the Redoc Docker image
|
||||
redirectFrom:
|
||||
- /docs/quickstart/docker/
|
||||
---
|
||||
|
||||
# Using the Redoc Docker image
|
||||
|
||||
Redoc is available as a pre-built Docker image in [Docker Hub](https://hub.docker.com/r/redocly/redoc/).
|
||||
|
||||
If you have [Docker](https://docs.docker.com/get-docker/) installed, pull the image with the following command:
|
||||
|
||||
```docker
|
||||
docker pull redocly/redoc
|
||||
```
|
||||
|
||||
Then run the image with the following command:
|
||||
|
||||
```docker
|
||||
docker run -p 8080:80 redocly/redoc
|
||||
```
|
||||
|
||||
The preview starts on port 8080, based on the port used in the command,
|
||||
and can be accessed at `http://localhost:8080`.
|
||||
To exit the preview, use `control+C`.
|
||||
|
||||
By default Redoc starts with a demo Swagger Petstore OpenAPI definition located at
|
||||
http://petstore.swagger.io/v2/swagger.json. You can update this URL using
|
||||
the environment variable `SPEC_URL`.
|
||||
|
||||
For example:
|
||||
|
||||
```bash
|
||||
docker run -p 8080:80 -e SPEC_URL=https://api.example.com/openapi.json redocly/redoc
|
||||
```
|
||||
|
||||
## Using a Dockerfile
|
||||
|
||||
You can also create a Dockerfile with some predefined environment variables. Check out
|
||||
a sample [Dockerfile](https://github.com/Redocly/redoc/blob/master/config/docker/Dockerfile)
|
||||
in our code repo.
|
||||
123
docs/deployment/html.md
Normal file
123
docs/deployment/html.md
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
title: Using the Redoc HTML element
|
||||
redirectFrom:
|
||||
- /docs/quickstart/html/
|
||||
---
|
||||
|
||||
# Using the Redoc HTML element
|
||||
|
||||
## Step 1 - Install Redoc
|
||||
|
||||
You can install Redoc using one of the following package managers:
|
||||
|
||||
- [npm](https://docs.npmjs.com/about-npm)
|
||||
- [yarn](https://classic.yarnpkg.com/en/docs/getting-started)
|
||||
|
||||
:::attention Initialize your package manager
|
||||
If you do not have a `package.json` file in your project directory,
|
||||
you need to add one by initializing npm or yarn in your project. Use the command `npm init` for npm,
|
||||
or `yarn init` for yarn. These initialization commands will lead you through the process
|
||||
of creating a `package.json` file in your project.
|
||||
|
||||
For more information, see
|
||||
[Creating a package.json file](https://docs.npmjs.com/creating-a-package-json-file)
|
||||
in the npm documentation or [Yarn init](https://classic.yarnpkg.com/en/docs/cli/init/)
|
||||
in the yarn documentation.
|
||||
:::
|
||||
|
||||
### Install Redoc with yarn
|
||||
|
||||
After navigating to your project directory in your terminal, use the following command:
|
||||
|
||||
```bash
|
||||
yarn add redoc
|
||||
```
|
||||
|
||||
### Install Redoc with npm
|
||||
|
||||
After navigating to your project directory in your terminal, use the following command:
|
||||
|
||||
```bash
|
||||
npm i redoc
|
||||
```
|
||||
|
||||
## Step 2 - Reference the Redoc script
|
||||
|
||||
You can reference the Redoc script using either a link to the files hosted on a CDN
|
||||
or the files located in your `node modules` folder.
|
||||
|
||||
### CDN link
|
||||
|
||||
To reference the Redoc script with a CDN link:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"> </script>
|
||||
```
|
||||
|
||||
### Node modules link
|
||||
|
||||
To reference the Redoc script with a node modules link:
|
||||
|
||||
```html
|
||||
<script src="node_modules/redoc/bundles/redoc.standalone.js"> </script>
|
||||
```
|
||||
|
||||
## Step 3 - Add the <redoc> element
|
||||
|
||||
You can add the <redoc> element to your HTML page and reference your OpenAPI
|
||||
definition using the `spec-url` attribute, or you can initialize Redoc using
|
||||
a globally exposed Redoc object.
|
||||
|
||||
### Using the `spec-url` attribute
|
||||
|
||||
To add the <redoc> element with the `spec-url` attribute:
|
||||
|
||||
```html
|
||||
<redoc spec-url="url/to/your/spec"></redoc>
|
||||
```
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<redoc spec-url="http://petstore.swagger.io/v2/swagger.json"></redoc>
|
||||
```
|
||||
|
||||
You can also use a local file (JSON or YAML) in your project, for instance:
|
||||
|
||||
```html
|
||||
<redoc spec-url="dist.json"></redoc>
|
||||
```
|
||||
|
||||
### Using a Redoc object
|
||||
|
||||
To add the <redoc> element with a globally exposed Redoc object:
|
||||
|
||||
```js
|
||||
Redoc.init(specOrSpecUrl, options, element, callback)
|
||||
```
|
||||
- `specOrSpecUrl`: Either a JSON object with the OpenAPI definition or a URL to the
|
||||
definition in JSON or YAML format.
|
||||
- `options`: See [options object](https://redoc.ly/docs/api-reference-docs/configuration/) reference.
|
||||
- `element`: DOM element Redoc will be inserted into.
|
||||
- `callback`(optional): Callback to be called after Redoc has been fully rendered.
|
||||
It is also called on errors with `error` as the first argument.
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<script>
|
||||
Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
|
||||
scrollYOffset: 50
|
||||
}, document.getElementById('redoc-container'))
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also use a local file (JSON or YAML) in your project, for instance:
|
||||
|
||||
```html
|
||||
<script>
|
||||
Redoc.init('dist.yaml', {
|
||||
scrollYOffset: 50
|
||||
}, document.getElementById('redoc-container'))
|
||||
</script>
|
||||
```
|
||||
112
docs/deployment/intro.md
Normal file
112
docs/deployment/intro.md
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
---
|
||||
title: Redoc deployment guide
|
||||
redirectFrom:
|
||||
- /docs/quickstart/intro/
|
||||
---
|
||||
|
||||
# Redoc deployment guide
|
||||
|
||||
Redoc offers multiple options for rendering your OpenAPI definition.
|
||||
You should select the option that best fits your needs.
|
||||
|
||||
The following options are supported:
|
||||
|
||||
- **[Live demo](https://redocly.github.io/redoc/):**
|
||||
The live demo offers a fast way to see how your OpenAPI will render with Redoc.
|
||||
A version of the Swagger Petstore API is displayed by default. To test it with your own OpenAPI definition, enter the URL for your
|
||||
definition and select **TRY IT**.
|
||||
- **[HTML element](./html.md):**
|
||||
Using the HTML element works well for typical website deployments.
|
||||
- **[React component](./react.md):**
|
||||
Using the React component is an option for users with a React-based application.
|
||||
- **[Docker image](./docker.md):**
|
||||
Using the Docker image works in a container-based deployment.
|
||||
- **[CLI](./cli.md):**
|
||||
Using the CLI is an option for users who prefer to use a command-line interface.
|
||||
|
||||
## Before you start
|
||||
|
||||
### OpenAPI definition
|
||||
|
||||
You will need an OpenAPI definition. For testing purposes, you can use one of the following sample OpenAPI definitions:
|
||||
|
||||
- OpenAPI 3.0
|
||||
- [Rebilly Users OpenAPI Definition](https://raw.githubusercontent.com/Rebilly/api-definitions/main/openapi/users.yaml)
|
||||
- [Swagger Petstore Sample OpenAPI Definition](https://petstore3.swagger.io/api/v3/openapi.json)
|
||||
- OpenAPI 2.0
|
||||
- [Thingful OpenAPI Definition](https://raw.githubusercontent.com/thingful/openapi-spec/master/spec/swagger.yaml)
|
||||
- [Fitbit Plus OpenAPI Definition](https://raw.githubusercontent.com/TwineHealth/TwineDeveloperDocs/master/spec/swagger.yaml)
|
||||
|
||||
:::info OpenAPI specification
|
||||
For more information on the OpenAPI specification, refer to the [Learning OpenAPI 3](https://redoc.ly/docs/resources/learning-openapi/)
|
||||
section in the documentation.
|
||||
:::
|
||||
|
||||
### Running Redoc locally
|
||||
|
||||
If you want to view your Redoc output locally, you can simulate an HTTP server.
|
||||
|
||||
#### Using Redocly OpenAPI CLI
|
||||
|
||||
Redocly OpenAPI CLI is an open source command-line tool that includes a command
|
||||
for simulating an HTTP server to provide a preview of your OpenAPI definition locally.
|
||||
|
||||
If you have [OpenAPI CLI](https://redoc.ly/docs/cli/#installation-and-usage) installed, `cd` into your
|
||||
project directory and run the following command:
|
||||
|
||||
```bash
|
||||
openapi preview-docs openapi.yaml
|
||||
```
|
||||
|
||||
Replace `openapi.yaml` in the example command with the file path to your OpenAPI definition.
|
||||
|
||||
By default, without providing a port, the preview starts on port 8080, and can be accessed at `http://localhost:8080`.
|
||||
To exit the preview, use `control+C`.
|
||||
|
||||
You can alter the port if you are using 8080 already, for example:
|
||||
|
||||
```bash
|
||||
openapi preview-docs -p 8888 openapi.yaml
|
||||
```
|
||||
|
||||
Replace `openapi.yaml` in the example command with the file path to your OpenAPI definition.
|
||||
|
||||
For more information about the `preview-docs` command, refer to
|
||||
[OpenAPI CLI commands](https://redoc.ly/docs/cli/commands/preview-docs/#preview-docs) in the OpenAPI CLI documentation.
|
||||
|
||||
#### Using Python
|
||||
|
||||
If you have [Python 3](https://www.python.org/downloads/) installed, `cd` into your
|
||||
project directory and run the following command:
|
||||
|
||||
```python
|
||||
python3 -m http.server
|
||||
```
|
||||
|
||||
If you have [Python 2](https://www.python.org/downloads/) installed, `cd` into your
|
||||
project directory and run the following command:
|
||||
|
||||
```python
|
||||
python -m SimpleHTTPServer 8000
|
||||
```
|
||||
|
||||
The output after entering the command provides the local URL where the preview can be accessed.
|
||||
To exit the preview, use `control-C`.
|
||||
|
||||
#### Using Node.js
|
||||
|
||||
If you have [Node.js](https://nodejs.org/en/download/) installed, install `http-server`
|
||||
using the following npm command:
|
||||
|
||||
```bash
|
||||
npm install -g http-server
|
||||
```
|
||||
|
||||
Then, `cd` into your project directory and run the following command:
|
||||
|
||||
```node
|
||||
http-server
|
||||
```
|
||||
|
||||
The output after entering the command provides the local URL where the preview can be accessed.
|
||||
To exit the preview, use `control-C`.
|
||||
80
docs/deployment/react.md
Normal file
80
docs/deployment/react.md
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
title: Using the Redoc React component
|
||||
redirectFrom:
|
||||
- /docs/quickstart/react/
|
||||
---
|
||||
|
||||
# Using the Redoc React component
|
||||
|
||||
## Before you start
|
||||
|
||||
Install the following dependencies required by Redoc if you do not already have them installed:
|
||||
|
||||
- `react`
|
||||
- `react-dom`
|
||||
- `mobx`
|
||||
- `styled-components`
|
||||
- `core-js`
|
||||
|
||||
If you have npm installed, you can install these dependencies using the following command:
|
||||
|
||||
```js
|
||||
npm i react react-dom mobx styled-components core-js
|
||||
```
|
||||
|
||||
## Step 1 - Import the `RedocStandalone` component
|
||||
|
||||
```js
|
||||
import { RedocStandalone } from 'redoc';
|
||||
```
|
||||
|
||||
## Step 2 - Use the component
|
||||
|
||||
You can either link to your OpenAPI definition with a URL, using the following format:
|
||||
|
||||
```react
|
||||
<RedocStandalone specUrl="url/to/your/spec"/>
|
||||
```
|
||||
|
||||
Or you can pass your OpenAPI definition as an object, using the following format:
|
||||
|
||||
```js
|
||||
<RedocStandalone spec={/* spec as an object */}/>
|
||||
```
|
||||
|
||||
## Optional - Pass options
|
||||
|
||||
Options can be passed into the RedocStandalone component to alter how it renders.
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
<RedocStandalone
|
||||
specUrl="http://petstore.swagger.io/v2/swagger.json"
|
||||
options={{
|
||||
nativeScrollbars: true,
|
||||
theme: { colors: { primary: { main: '#dd5522' } } },
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
For more information on configuration options, refer to the
|
||||
[Configuration options for Reference docs](https://redoc.ly/docs/api-reference-docs/configuration/)
|
||||
section of the documentation. Options available for Redoc are noted,
|
||||
"Supported in Redoc CE".
|
||||
|
||||
## Optional - Specify `onLoaded` callback
|
||||
|
||||
You can also specify the `onLoaded` callback, which is called each time Redoc
|
||||
is fully rendered or when an error occurs (with an error as the first argument).
|
||||
|
||||
```js
|
||||
<RedocStandalone
|
||||
specUrl="http://petstore.swagger.io/v2/swagger.json"
|
||||
onLoaded={error => {
|
||||
if (!error) {
|
||||
console.log('Yay!');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
```
|
||||
53
docs/quickstart.md
Normal file
53
docs/quickstart.md
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
title: Redoc quickstart guide
|
||||
---
|
||||
|
||||
# Redoc quickstart guide
|
||||
|
||||
To render your OpenAPI definition using Redoc, use the following HTML code sample and
|
||||
replace the `spec-url` attribute with the URL or local file address to your definition.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Redoc</title>
|
||||
<!-- needed for adaptive design -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!--
|
||||
Redoc doesn't change outer page styles
|
||||
-->
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
Redoc element with link to your OpenAPI definition
|
||||
-->
|
||||
<redoc spec-url="http://petstore.swagger.io/v2/swagger.json"></redoc>
|
||||
<!--
|
||||
Link to Redoc JavaScript on CDN for rendering standalone element
|
||||
-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
:::attention Running Redoc locally requires an HTTP server
|
||||
Loading local OpenAPI definitions is impossible without running a web server because of issues with
|
||||
[same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) and
|
||||
other security reasons. Refer to [Running Redoc locally](./deployment/intro.md#running-redoc-locally) for
|
||||
more information.
|
||||
:::
|
||||
|
||||
For a more detailed explanation with step-by-step instructions and additional options for using Redoc, refer to the [Redoc deployment guide](./deployment/intro.md).
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
redoc:
|
||||
- group: Quickstart
|
||||
expanded: false
|
||||
page: redoc/quickstart/intro.md
|
||||
pages:
|
||||
- label: HTML element
|
||||
page: redoc/quickstart/html.md
|
||||
- label: React component
|
||||
page: redoc/quickstart/react.md
|
||||
- label: Docker image
|
||||
page: redoc/quickstart/docker.md
|
||||
- label: Command-line interface
|
||||
page: redoc/quickstart/cli.md
|
||||
|
|
@ -4,9 +4,7 @@ describe('Menu', () => {
|
|||
});
|
||||
|
||||
it('should have valid items count', () => {
|
||||
cy.get('.menu-content')
|
||||
.find('li')
|
||||
.should('have.length', 34);
|
||||
cy.get('.menu-content').find('li').should('have.length', 34);
|
||||
});
|
||||
|
||||
it('should sync active menu items while scroll', () => {
|
||||
|
|
@ -35,9 +33,7 @@ describe('Menu', () => {
|
|||
.should('have.text', 'Add a new pet to the store')
|
||||
.should('be.visible');
|
||||
|
||||
cy.contains('h1', 'Swagger Petstore')
|
||||
.scrollIntoView()
|
||||
.wait(100)
|
||||
cy.contains('h1', 'Swagger Petstore').scrollIntoView().wait(100);
|
||||
|
||||
cy.contains('h1', 'Introduction')
|
||||
.scrollIntoView()
|
||||
|
|
@ -59,10 +55,25 @@ describe('Menu', () => {
|
|||
it('should deactivate tag when other is activated', () => {
|
||||
const petItem = () => cy.contains('[role=menuitem].-depth1', 'pet');
|
||||
|
||||
petItem()
|
||||
.click({ force: true })
|
||||
.should('have.class', 'active');
|
||||
petItem().click({ force: true }).should('have.class', 'active');
|
||||
cy.contains('[role=menuitem].-depth1', 'store').click({ force: true });
|
||||
petItem().should('not.have.class', 'active');
|
||||
});
|
||||
|
||||
it('should be able to open a response object to see more details', () => {
|
||||
cy.contains('h2', 'Find pet by ID')
|
||||
.scrollIntoView()
|
||||
.wait(100)
|
||||
.parent()
|
||||
.find('div h3')
|
||||
.should('have.text', 'Responses')
|
||||
.parent()
|
||||
.find('div:first button')
|
||||
.click()
|
||||
.should('have.attr', 'aria-expanded', 'true')
|
||||
.parent()
|
||||
.find('div h5')
|
||||
.then($h5 => $h5[0].firstChild!.nodeValue!.trim())
|
||||
.should('eq', 'Response Schema:');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ describe('Search', () => {
|
|||
|
||||
it('should show proper message when no search results are found', () => {
|
||||
getSearchResults().should('not.exist');
|
||||
getSearchInput().type('xzss', {force: true});
|
||||
getSearchInput().type('xzss', { force: true });
|
||||
getSearchResults().should('exist').should('contain', 'No results found');
|
||||
})
|
||||
});
|
||||
});
|
||||
|
|
|
|||
9373
package-lock.json
generated
9373
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
64
package.json
64
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "redoc",
|
||||
"version": "2.0.0-rc.57",
|
||||
"version": "2.0.0-rc.62",
|
||||
"description": "ReDoc",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
"React.js"
|
||||
],
|
||||
"main": "bundles/redoc.lib.js",
|
||||
"browser": "bundles/redoc.browser.lib.js",
|
||||
"types": "typings/index.d.ts",
|
||||
"scripts": {
|
||||
"start": "webpack serve --mode=development --env playground --hot --config demo/webpack.config.ts",
|
||||
|
|
@ -36,18 +37,19 @@
|
|||
"unit": "jest --coverage",
|
||||
"e2e": "cypress run",
|
||||
"e2e-ci": "cypress run --record",
|
||||
"bundlesize": "bundlesize",
|
||||
"bundlesize": "size-limit",
|
||||
"ts-check": "tsc --noEmit --skipLibCheck",
|
||||
"cy:open": "cypress open",
|
||||
"bundle:clean": "rimraf bundles",
|
||||
"bundle:standalone": "webpack --env production --env standalone --mode=production",
|
||||
"bundle:lib": "webpack --mode=production && npm run declarations",
|
||||
"bundle": "npm run bundle:clean && npm run bundle:lib && npm run bundle:standalone",
|
||||
"bundle:browser": "webpack --env production --env browser --mode=production",
|
||||
"bundle": "npm run bundle:clean && npm run bundle:lib && npm run bundle:browser && npm run bundle:standalone",
|
||||
"declarations": "tsc --emitDeclarationOnly -p tsconfig.lib.json && cp -R src/types typings/",
|
||||
"stats": "webpack --env production --env standalone --json --profile --mode=production > stats.json",
|
||||
"prettier": "prettier --write \"cli/index.ts\" \"src/**/*.{ts,tsx}\"",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
|
||||
"lint": "eslint 'src/**/*.{js,ts,tsx}'",
|
||||
"lint": "eslint 'src/**/*.{js,ts,tsx}' --cache",
|
||||
"benchmark": "node ./benchmark/benchmark.js",
|
||||
"start:demo": "webpack serve --hot --config demo/webpack.config.ts --mode=development",
|
||||
"compile:cli": "tsc custom.d.ts cli/index.ts --target es6 --module commonjs --types yargs",
|
||||
|
|
@ -55,34 +57,24 @@
|
|||
"build:demo": "webpack --mode=production --config demo/webpack.config.ts",
|
||||
"deploy:demo": "aws s3 sync demo/dist s3://production-redoc-demo --acl=public-read",
|
||||
"license-check": "license-checker --production --onlyAllow 'MIT;ISC;Apache-2.0;BSD;BSD-2-Clause;BSD-3-Clause' --summary",
|
||||
"docker:build": "docker build -f config/docker/Dockerfile -t redoc ."
|
||||
"docker:build": "docker build -f config/docker/Dockerfile -t redoc .",
|
||||
"prepare": "husky install",
|
||||
"pre-commit": "pretty-quick --staged && npm run lint"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.14.3",
|
||||
"@babel/plugin-proposal-class-properties": "^7.13.0",
|
||||
"@babel/plugin-proposal-decorators": "^7.14.2",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.14.4",
|
||||
"@babel/plugin-syntax-decorators": "^7.12.13",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-syntax-jsx": "^7.10.4",
|
||||
"@babel/plugin-syntax-typescript": "^7.10.4",
|
||||
"@babel/plugin-transform-runtime": "^7.14.3",
|
||||
"@babel/preset-env": "^7.14.4",
|
||||
"@babel/preset-react": "^7.13.13",
|
||||
"@babel/preset-typescript": "^7.13.0",
|
||||
"@cypress/webpack-preprocessor": "^5.9.0",
|
||||
"@hot-loader/react-dom": "^17.0.1",
|
||||
"@size-limit/preset-app": "^7.0.4",
|
||||
"@types/chai": "^4.2.18",
|
||||
"@types/dompurify": "^2.2.2",
|
||||
"@types/enzyme": "^3.10.5",
|
||||
"@types/enzyme-to-json": "^1.5.3",
|
||||
"@types/jest": "^26.0.23",
|
||||
"@types/json-pointer": "^1.0.30",
|
||||
"@types/lodash": "^4.14.170",
|
||||
"@types/lunr": "^2.3.3",
|
||||
"@types/node": "^15.6.1",
|
||||
"@types/mark.js": "^8.11.5",
|
||||
"@types/marked": "^1.1.0",
|
||||
"@types/marked": "^4.0.1",
|
||||
"@types/node": "^15.6.1",
|
||||
"@types/prismjs": "^1.16.5",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/react": "^17.0.8",
|
||||
|
|
@ -96,10 +88,7 @@
|
|||
"@typescript-eslint/eslint-plugin": "^4.26.0",
|
||||
"@typescript-eslint/parser": "^4.26.0",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
|
||||
"babel-loader": "^8.2.2",
|
||||
"babel-plugin-styled-components": "^1.12.0",
|
||||
"beautify-benchmark": "^0.2.4",
|
||||
"bundlesize": "^0.18.1",
|
||||
"conventional-changelog-cli": "^2.0.34",
|
||||
"copy-webpack-plugin": "^9.0.0",
|
||||
"core-js": "^3.13.1",
|
||||
|
|
@ -108,34 +97,38 @@
|
|||
"cypress": "^7.4.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.2",
|
||||
"esbuild-loader": "^2.18.0",
|
||||
"eslint": "^7.27.0",
|
||||
"eslint-plugin-import": "^2.23.4",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"eslint-plugin-react": "^7.25.1",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"fork-ts-checker-webpack-plugin": "^6.2.10",
|
||||
"html-webpack-plugin": "^5.3.1",
|
||||
"husky": "^7.0.0",
|
||||
"jest": "^27.0.3",
|
||||
"js-yaml": "^4.1.0",
|
||||
"license-checker": "^25.0.1",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash.noop": "^3.0.1",
|
||||
"mobx": "^6.3.2",
|
||||
"prettier": "^2.3.0",
|
||||
"prettier": "^2.3.2",
|
||||
"pretty-quick": "^3.0.0",
|
||||
"raf": "^3.4.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-hot-loader": "^4.13.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"shelljs": "^0.8.4",
|
||||
"style-loader": "^2.0.0",
|
||||
"size-limit": "^7.0.4",
|
||||
"styled-components": "^5.3.0",
|
||||
"ts-jest": "^27.0.2",
|
||||
"ts-loader": "^8.0.1",
|
||||
"ts-loader": "^9.2.6",
|
||||
"ts-node": "^10.0.0",
|
||||
"typescript": "~4.1.0",
|
||||
"unfetch": "^4.2.0",
|
||||
"url-polyfill": "^1.1.12",
|
||||
"webpack": "^5.38.1",
|
||||
"webpack-cli": "^4.7.2",
|
||||
"webpack-dev-server": "^3.11.2",
|
||||
"webpack-dev-server": "^4.6.0",
|
||||
"webpack-node-externals": "^3.0.0",
|
||||
"workerize-loader": "github:redocly/workerize-loader#webpack-5-dist"
|
||||
},
|
||||
|
|
@ -147,20 +140,19 @@
|
|||
"styled-components": "^4.1.1 || ^5.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.14.0",
|
||||
"@redocly/openapi-core": "^1.0.0-beta.54",
|
||||
"@redocly/react-dropdown-aria": "^2.0.11",
|
||||
"classnames": "^2.3.1",
|
||||
"decko": "^1.2.0",
|
||||
"dompurify": "^2.2.8",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"isomorphic-style-loader": "^5.3.2",
|
||||
"json-pointer": "^0.6.1",
|
||||
"lunr": "^2.3.9",
|
||||
"mark.js": "^8.11.1",
|
||||
"marked": "^0.7.0",
|
||||
"memoize-one": "^5.2.1",
|
||||
"marked": "^4.0.10",
|
||||
"mobx-react": "^7.2.0",
|
||||
"openapi-sampler": "^1.0.1",
|
||||
"openapi-sampler": "^1.1.1",
|
||||
"path-browserify": "^1.0.1",
|
||||
"perfect-scrollbar": "^1.5.1",
|
||||
"polished": "^4.1.3",
|
||||
|
|
@ -172,10 +164,10 @@
|
|||
"swagger2openapi": "^7.0.6",
|
||||
"url-template": "^2.0.8"
|
||||
},
|
||||
"bundlesize": [
|
||||
"size-limit": [
|
||||
{
|
||||
"path": "./bundles/redoc.standalone.js",
|
||||
"maxSize": "350 kB"
|
||||
"limit": "350 kB"
|
||||
}
|
||||
],
|
||||
"jest": {
|
||||
|
|
@ -208,6 +200,6 @@
|
|||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 100,
|
||||
"parser": "typescript"
|
||||
"arrowParens": "avoid"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,16 +28,16 @@ export const StyledDropdown = styled(Dropdown)`
|
|||
width: auto;
|
||||
background: white;
|
||||
color: #263238;
|
||||
font-family: ${(props) => props.theme.typography.headings.fontFamily};
|
||||
font-family: ${props => props.theme.typography.headings.fontFamily};
|
||||
font-size: 0.929em;
|
||||
line-height: 1.5em;
|
||||
cursor: pointer;
|
||||
transition: border 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
border: 1px solid ${(props) => props.theme.colors.primary.main};
|
||||
color: ${(props) => props.theme.colors.primary.main};
|
||||
box-shadow: 0px 0px 0px 1px ${(props) => props.theme.colors.primary.main};
|
||||
border: 1px solid ${props => props.theme.colors.primary.main};
|
||||
color: ${props => props.theme.colors.primary.main};
|
||||
box-shadow: 0px 0px 0px 1px ${props => props.theme.colors.primary.main};
|
||||
}
|
||||
.dropdown-selector {
|
||||
display: inline-flex;
|
||||
|
|
@ -48,7 +48,7 @@ export const StyledDropdown = styled(Dropdown)`
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
.dropdown-selector-value {
|
||||
font-family: ${(props) => props.theme.typography.headings.fontFamily};
|
||||
font-family: ${props => props.theme.typography.headings.fontFamily};
|
||||
position: relative;
|
||||
font-size: 0.929em;
|
||||
width: 100%;
|
||||
|
|
@ -63,7 +63,7 @@ export const StyledDropdown = styled(Dropdown)`
|
|||
right: 3px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-color: ${(props) => props.theme.colors.primary.main} transparent transparent;
|
||||
border-color: ${props => props.theme.colors.primary.main} transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 0.35em 0.35em 0;
|
||||
width: 0;
|
||||
|
|
@ -128,8 +128,8 @@ export const SimpleDropdown = styled(StyledDropdown)`
|
|||
border: none;
|
||||
box-shadow: none;
|
||||
.dropdown-selector-value {
|
||||
color: ${(props) => props.theme.colors.primary.main};
|
||||
text-shadow: 0px 0px 0px ${(props) => props.theme.colors.primary.main};
|
||||
color: ${props => props.theme.colors.primary.main};
|
||||
text-shadow: 0px 0px 0px ${props => props.theme.colors.primary.main};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export const PropertyNameCell = styled(PropertyCell)`
|
|||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
font-family: ${(props) => props.theme.typography.code.fontFamily};
|
||||
font-family: ${props => props.theme.typography.code.fontFamily};
|
||||
|
||||
&.deprecated {
|
||||
${deprecatedCss};
|
||||
|
|
@ -80,7 +80,7 @@ export const PropertyNameCell = styled(PropertyCell)`
|
|||
export const PropertyDetailsCell = styled.td`
|
||||
border-bottom: 1px solid #9fb4be;
|
||||
padding: 10px 0;
|
||||
width: ${(props) => props.theme.schema.defaultDetailsWidth};
|
||||
width: ${props => props.theme.schema.defaultDetailsWidth};
|
||||
box-sizing: border-box;
|
||||
|
||||
tr.expanded & {
|
||||
|
|
@ -90,7 +90,7 @@ export const PropertyDetailsCell = styled.td`
|
|||
${media.lessThan('small')`
|
||||
padding: 0 20px;
|
||||
border-bottom: none;
|
||||
border-left: 1px solid ${(props) => props.theme.schema.linesColor};
|
||||
border-left: 1px solid ${props => props.theme.schema.linesColor};
|
||||
|
||||
tr.last > & {
|
||||
border-left: none;
|
||||
|
|
|
|||
|
|
@ -96,7 +96,6 @@ export const ConstraintItem = styled(FieldLabel)`
|
|||
margin: 0 ${theme.spacing.unit}px;
|
||||
padding: 0 ${theme.spacing.unit}px;
|
||||
border: 1px solid ${transparentize(0.9, theme.colors.primary.main)};
|
||||
font-family: ${theme.typography.code.fontFamily};
|
||||
}`};
|
||||
& + & {
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import styled, { css } from '../styled-components';
|
|||
import { HistoryService } from '../services';
|
||||
|
||||
// tslint:disable-next-line
|
||||
export const linkifyMixin = (className) => css`
|
||||
export const linkifyMixin = className => css`
|
||||
${className} {
|
||||
cursor: pointer;
|
||||
margin-left: -20px;
|
||||
|
|
@ -33,17 +33,17 @@ export const linkifyMixin = (className) => css`
|
|||
}
|
||||
`;
|
||||
|
||||
const isModifiedEvent = (event) =>
|
||||
const isModifiedEvent = event =>
|
||||
!!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
|
||||
|
||||
export function Link(props: { to: string; className?: string; children?: any }) {
|
||||
const store = React.useContext(StoreContext);
|
||||
const clickHandler = React.useCallback(
|
||||
(event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
(event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
if (!store) return;
|
||||
navigate(store.menu.history, event, props.to);
|
||||
},
|
||||
[store],
|
||||
[store, props.to],
|
||||
);
|
||||
|
||||
if (!store) return null;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import styled, { createGlobalStyle } from '../styled-components';
|
|||
* That's why the following ugly fix is required
|
||||
*/
|
||||
const PerfectScrollbarConstructor =
|
||||
PerfectScrollbarNamespace.default || ((PerfectScrollbarNamespace as any) as PerfectScrollbarType);
|
||||
PerfectScrollbarNamespace.default || (PerfectScrollbarNamespace as any as PerfectScrollbarType);
|
||||
|
||||
const PSStyling = createGlobalStyle`${psStyles && psStyles.toString()}`;
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,12 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
|
|||
const license =
|
||||
(info.license && (
|
||||
<InfoSpan>
|
||||
License: {info.license.identifier ? info.license.identifier : (<a href={info.license.url}>{info.license.name}</a>)}
|
||||
License:{' '}
|
||||
{info.license.identifier ? (
|
||||
info.license.identifier
|
||||
) : (
|
||||
<a href={info.license.url}>{info.license.name}</a>
|
||||
)}
|
||||
</InfoSpan>
|
||||
)) ||
|
||||
null;
|
||||
|
|
@ -101,8 +106,8 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
|
|||
)) ||
|
||||
null}
|
||||
</StyledMarkdownBlock>
|
||||
<Markdown source={store.spec.info.summary} data-role="redoc-summary"/>
|
||||
<Markdown source={store.spec.info.description} data-role="redoc-description"/>
|
||||
<Markdown source={store.spec.info.summary} data-role="redoc-summary" />
|
||||
<Markdown source={store.spec.info.description} data-role="redoc-description" />
|
||||
{externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
|
||||
</MiddlePanel>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -48,10 +48,10 @@ const CallbackTitleWrapper = styled.button`
|
|||
`;
|
||||
|
||||
const CallbackName = styled.span<{ deprecated?: boolean }>`
|
||||
text-decoration: ${(props) => (props.deprecated ? 'line-through' : 'none')};
|
||||
text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')};
|
||||
margin-right: 8px;
|
||||
`;
|
||||
|
||||
const OperationBadgeStyled = styled(OperationBadge)`
|
||||
margin: 0px 5px 0px 0px;
|
||||
margin: 0 5px 0 0;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boole
|
|||
(props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
|
||||
|
||||
.${ServerRelativeURL} {
|
||||
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}
|
||||
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')};
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
|
||||
|
|
|
|||
25
src/components/Fields/ArrayItemDetails.tsx
Normal file
25
src/components/Fields/ArrayItemDetails.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from 'react';
|
||||
import { TypeFormat, TypePrefix } from '../../common-elements/fields';
|
||||
import { ConstraintsView } from './FieldContstraints';
|
||||
import { Pattern } from './Pattern';
|
||||
import { SchemaModel } from '../../services';
|
||||
import styled from '../../styled-components';
|
||||
|
||||
export function ArrayItemDetails({ schema }: { schema: SchemaModel }) {
|
||||
if (!schema || (schema.type === 'string' && !schema.constraints.length)) return null;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
[ items
|
||||
{schema.displayFormat && <TypeFormat>{` <${schema.displayFormat}> `}</TypeFormat>}
|
||||
<ConstraintsView constraints={schema.constraints} />
|
||||
<Pattern schema={schema} />
|
||||
{schema.items && <ArrayItemDetails schema={schema.items} />} ]
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
const Wrapper = styled(TypePrefix)`
|
||||
margin: 0 5px;
|
||||
vertical-align: text-top;
|
||||
`;
|
||||
|
|
@ -8,7 +8,7 @@ import { RedocRawOptions } from '../../services/RedocNormalizedOptions';
|
|||
|
||||
export interface EnumValuesProps {
|
||||
values: string[];
|
||||
type: string | string[];
|
||||
isArrayType: boolean;
|
||||
}
|
||||
|
||||
export interface EnumValuesState {
|
||||
|
|
@ -27,7 +27,7 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
|
|||
}
|
||||
|
||||
render() {
|
||||
const { values, type } = this.props;
|
||||
const { values, isArrayType } = this.props;
|
||||
const { collapsed } = this.state;
|
||||
|
||||
// TODO: provide context interface in more elegant way
|
||||
|
|
@ -55,11 +55,11 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
|
|||
return (
|
||||
<div>
|
||||
<FieldLabel>
|
||||
{type === 'array' ? l('enumArray') : ''}{' '}
|
||||
{isArrayType ? l('enumArray') : ''}{' '}
|
||||
{values.length === 1 ? l('enumSingleValue') : l('enum')}:
|
||||
</FieldLabel>{' '}
|
||||
{displayedItems.map((value, idx) => {
|
||||
const exampleValue = enumSkipQuotes ? value : JSON.stringify(value);
|
||||
const exampleValue = enumSkipQuotes ? String(value) : JSON.stringify(value);
|
||||
return (
|
||||
<React.Fragment key={idx}>
|
||||
<ExampleValue>{exampleValue}</ExampleValue>{' '}
|
||||
|
|
|
|||
36
src/components/Fields/Examples.tsx
Normal file
36
src/components/Fields/Examples.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { FieldLabel, ExampleValue } from '../../common-elements/fields';
|
||||
import { getSerializedValue } from '../../utils';
|
||||
|
||||
import { l } from '../../services/Labels';
|
||||
import { FieldModel } from '../../services';
|
||||
import styled from '../../styled-components';
|
||||
|
||||
export function Examples({ field }: { field: FieldModel }) {
|
||||
if (!field.examples) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FieldLabel> {l('examples')}: </FieldLabel>
|
||||
<ExamplesList>
|
||||
{Object.values(field.examples).map((example, idx) => {
|
||||
return (
|
||||
<li key={idx}>
|
||||
<ExampleValue>{getSerializedValue(field, example.value)}</ExampleValue> -{' '}
|
||||
{example.summary || example.description}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ExamplesList>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const ExamplesList = styled.ul`
|
||||
margin-top: 1em;
|
||||
padding-left: 0;
|
||||
list-style-position: inside;
|
||||
`;
|
||||
|
|
@ -32,7 +32,7 @@ export interface FieldProps extends SchemaOptions {
|
|||
export class Field extends React.Component<FieldProps> {
|
||||
toggle = () => {
|
||||
if (this.props.field.expanded === undefined && this.props.expandByDefault) {
|
||||
this.props.field.expanded = false;
|
||||
this.props.field.collapse();
|
||||
} else {
|
||||
this.props.field.toggle();
|
||||
}
|
||||
|
|
@ -94,6 +94,7 @@ export class Field extends React.Component<FieldProps> {
|
|||
skipReadOnly={this.props.skipReadOnly}
|
||||
skipWriteOnly={this.props.skipWriteOnly}
|
||||
showTitle={this.props.showTitle}
|
||||
level={this.props.level}
|
||||
/>
|
||||
</InnerPropertiesWrap>
|
||||
</PropertyCellWithInner>
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@ export interface FieldDetailProps {
|
|||
raw?: boolean;
|
||||
}
|
||||
|
||||
export class FieldDetail extends React.PureComponent<FieldDetailProps> {
|
||||
render() {
|
||||
if (this.props.value === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const value = this.props.raw ? this.props.value : JSON.stringify(this.props.value);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FieldLabel> {this.props.label} </FieldLabel> <ExampleValue>{value}</ExampleValue>
|
||||
</div>
|
||||
);
|
||||
function FieldDetailComponent({ value, label, raw }: FieldDetailProps) {
|
||||
if (value === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const stringifyValue = raw ? String(value) : JSON.stringify(value);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FieldLabel> {label} </FieldLabel> <ExampleValue>{stringifyValue}</ExampleValue>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const FieldDetail = React.memo<FieldDetailProps>(FieldDetailComponent);
|
||||
|
|
|
|||
|
|
@ -1,22 +1,19 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import {
|
||||
PatternLabel,
|
||||
RecursiveLabel,
|
||||
TypeFormat,
|
||||
TypeName,
|
||||
TypePrefix,
|
||||
TypeTitle,
|
||||
ToggleButton,
|
||||
FieldLabel,
|
||||
ExampleValue,
|
||||
} from '../../common-elements/fields';
|
||||
import { serializeParameterValue } from '../../utils/openapi';
|
||||
import { getSerializedValue } from '../../utils';
|
||||
import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
|
||||
import { Markdown } from '../Markdown/Markdown';
|
||||
import { EnumValues } from './EnumValues';
|
||||
import { Extensions } from './Extensions';
|
||||
import { FieldProps } from './Field';
|
||||
import { Examples } from './Examples';
|
||||
import { ConstraintsView } from './FieldContstraints';
|
||||
import { FieldDetail } from './FieldDetail';
|
||||
|
||||
|
|
@ -24,145 +21,92 @@ import { Badge } from '../../common-elements/';
|
|||
|
||||
import { l } from '../../services/Labels';
|
||||
import { OptionsContext } from '../OptionsProvider';
|
||||
import { FieldModel } from '../../services/models/Field';
|
||||
import styled from '../../styled-components';
|
||||
import { Pattern } from './Pattern';
|
||||
import { ArrayItemDetails } from './ArrayItemDetails';
|
||||
|
||||
const MAX_PATTERN_LENGTH = 45;
|
||||
function FieldDetailsComponent(props: FieldProps) {
|
||||
const { enumSkipQuotes, hideSchemaTitles } = React.useContext(OptionsContext);
|
||||
|
||||
export class FieldDetails extends React.PureComponent<FieldProps, { patternShown: boolean }> {
|
||||
state = {
|
||||
patternShown: false,
|
||||
};
|
||||
const { showExamples, field, renderDiscriminatorSwitch } = props;
|
||||
const { schema, description, deprecated, extensions, in: _in, const: _const } = field;
|
||||
const isArrayType = schema.type === 'array';
|
||||
|
||||
static contextType = OptionsContext;
|
||||
const rawDefault = enumSkipQuotes || _in === 'header'; // having quotes around header field default values is confusing and inappropriate
|
||||
|
||||
togglePattern = () => {
|
||||
this.setState({
|
||||
patternShown: !this.state.patternShown,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { showExamples, field, renderDiscriminatorSwitch } = this.props;
|
||||
const { patternShown } = this.state;
|
||||
const { enumSkipQuotes, hideSchemaTitles, hideSchemaPattern } = this.context;
|
||||
|
||||
const { schema, description, example, deprecated, examples } = field;
|
||||
|
||||
const rawDefault = !!enumSkipQuotes || field.in === 'header'; // having quotes around header field default values is confusing and inappropriate
|
||||
|
||||
let renderedExamples: JSX.Element | null = null;
|
||||
|
||||
if (showExamples && (example !== undefined || examples !== undefined)) {
|
||||
if (examples !== undefined) {
|
||||
renderedExamples = <Examples field={field} />;
|
||||
const renderedExamples = React.useMemo<JSX.Element | null>(() => {
|
||||
if (showExamples && (field.example !== undefined || field.examples !== undefined)) {
|
||||
if (field.examples !== undefined) {
|
||||
return <Examples field={field} />;
|
||||
} else {
|
||||
const label = l('example') + ':';
|
||||
const raw = !!field.in;
|
||||
renderedExamples = <FieldDetail label={label} value={getSerializedValue(field, field.example)} raw={raw} />;
|
||||
return (
|
||||
<FieldDetail
|
||||
label={l('example') + ':'}
|
||||
value={getSerializedValue(field, field.example)}
|
||||
raw={Boolean(field.in)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<TypePrefix>{schema.typePrefix}</TypePrefix>
|
||||
<TypeName>{schema.displayType}</TypeName>
|
||||
{schema.displayFormat && (
|
||||
<TypeFormat>
|
||||
{' '}
|
||||
<
|
||||
{schema.displayFormat}
|
||||
>{' '}
|
||||
</TypeFormat>
|
||||
)}
|
||||
{schema.contentEncoding && (
|
||||
<TypeFormat>
|
||||
{' '}<
|
||||
{schema.contentEncoding}
|
||||
>{' '}
|
||||
</TypeFormat>
|
||||
)}
|
||||
{schema.contentMediaType && (
|
||||
<TypeFormat>
|
||||
{' '}<
|
||||
{schema.contentMediaType}
|
||||
>{' '}
|
||||
</TypeFormat>
|
||||
)}
|
||||
{schema.title && !hideSchemaTitles && <TypeTitle> ({schema.title}) </TypeTitle>}
|
||||
<ConstraintsView constraints={schema.constraints} />
|
||||
{schema.pattern && !hideSchemaPattern && (
|
||||
<>
|
||||
<PatternLabel>
|
||||
{patternShown || schema.pattern.length < MAX_PATTERN_LENGTH
|
||||
? schema.pattern
|
||||
: `${schema.pattern.substr(0, MAX_PATTERN_LENGTH)}...`}
|
||||
</PatternLabel>
|
||||
{schema.pattern.length > MAX_PATTERN_LENGTH && (
|
||||
<ToggleButton onClick={this.togglePattern}>
|
||||
{patternShown ? 'Hide pattern' : 'Show pattern'}
|
||||
</ToggleButton>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{schema.isCircular && <RecursiveLabel> {l('recursive')} </RecursiveLabel>}
|
||||
</div>
|
||||
{deprecated && (
|
||||
<div>
|
||||
<Badge type="warning"> {l('deprecated')} </Badge>
|
||||
</div>
|
||||
)}
|
||||
<FieldDetail raw={rawDefault} label={l('default') + ':'} value={schema.default} />
|
||||
{!renderDiscriminatorSwitch && <EnumValues type={schema.type} values={schema.enum} />}{' '}
|
||||
{renderedExamples}
|
||||
{<Extensions extensions={{ ...field.extensions, ...schema.extensions }} />}
|
||||
<div>
|
||||
<Markdown compact={true} source={description} />
|
||||
</div>
|
||||
{schema.externalDocs && (
|
||||
<ExternalDocumentation externalDocs={schema.externalDocs} compact={true} />
|
||||
)}
|
||||
{(renderDiscriminatorSwitch && renderDiscriminatorSwitch(this.props)) || null}
|
||||
{field.const && (<FieldDetail label={l('const') + ':'} value={field.const} />) || null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function Examples({ field }: { field: FieldModel }) {
|
||||
if (!field.examples) {
|
||||
return null;
|
||||
}
|
||||
}, [field, showExamples]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FieldLabel> {l('examples')}: </FieldLabel>
|
||||
<ExamplesList>
|
||||
{Object.values(field.examples).map((example, idx) => {
|
||||
return (
|
||||
<li key={idx}>
|
||||
<ExampleValue>{getSerializedValue(field, example.value)}</ExampleValue> - {example.summary || example.description}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ExamplesList>
|
||||
</>
|
||||
<div>
|
||||
<div>
|
||||
<TypePrefix>{schema.typePrefix}</TypePrefix>
|
||||
<TypeName>{schema.displayType}</TypeName>
|
||||
{schema.displayFormat && (
|
||||
<TypeFormat>
|
||||
{' '}
|
||||
<
|
||||
{schema.displayFormat}
|
||||
>{' '}
|
||||
</TypeFormat>
|
||||
)}
|
||||
{schema.contentEncoding && (
|
||||
<TypeFormat>
|
||||
{' '}
|
||||
<
|
||||
{schema.contentEncoding}
|
||||
>{' '}
|
||||
</TypeFormat>
|
||||
)}
|
||||
{schema.contentMediaType && (
|
||||
<TypeFormat>
|
||||
{' '}
|
||||
<
|
||||
{schema.contentMediaType}
|
||||
>{' '}
|
||||
</TypeFormat>
|
||||
)}
|
||||
{schema.title && !hideSchemaTitles && <TypeTitle> ({schema.title}) </TypeTitle>}
|
||||
<ConstraintsView constraints={schema.constraints} />
|
||||
<Pattern schema={schema} />
|
||||
{schema.isCircular && <RecursiveLabel> {l('recursive')} </RecursiveLabel>}
|
||||
{isArrayType && schema.items && <ArrayItemDetails schema={schema.items} />}
|
||||
</div>
|
||||
{deprecated && (
|
||||
<div>
|
||||
<Badge type="warning"> {l('deprecated')} </Badge>
|
||||
</div>
|
||||
)}
|
||||
<FieldDetail raw={rawDefault} label={l('default') + ':'} value={schema.default} />
|
||||
{!renderDiscriminatorSwitch && (
|
||||
<EnumValues isArrayType={isArrayType} values={schema.enum} />
|
||||
)}{' '}
|
||||
{renderedExamples}
|
||||
<Extensions extensions={{ ...extensions, ...schema.extensions }} />
|
||||
<div>
|
||||
<Markdown compact={true} source={description} />
|
||||
</div>
|
||||
{schema.externalDocs && (
|
||||
<ExternalDocumentation externalDocs={schema.externalDocs} compact={true} />
|
||||
)}
|
||||
{(renderDiscriminatorSwitch && renderDiscriminatorSwitch(props)) || null}
|
||||
{(_const && <FieldDetail label={l('const') + ':'} value={_const} />) || null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getSerializedValue(field: FieldModel, example: any) {
|
||||
if (field.in) {
|
||||
// decode for better readability in examples: see https://github.com/Redocly/redoc/issues/1138
|
||||
return decodeURIComponent(serializeParameterValue(field, example));
|
||||
} else {
|
||||
return example;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const ExamplesList = styled.ul`
|
||||
margin-top: 1em;
|
||||
padding-left: 0;
|
||||
list-style-position: inside;
|
||||
`;
|
||||
export const FieldDetails = React.memo<FieldProps>(FieldDetailsComponent);
|
||||
|
|
|
|||
33
src/components/Fields/Pattern.tsx
Normal file
33
src/components/Fields/Pattern.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import * as React from 'react';
|
||||
import { PatternLabel, ToggleButton } from '../../common-elements/fields';
|
||||
import { OptionsContext } from '../OptionsProvider';
|
||||
import { SchemaModel } from '../../services';
|
||||
|
||||
const MAX_PATTERN_LENGTH = 45;
|
||||
|
||||
export function Pattern(props: { schema: SchemaModel }) {
|
||||
const pattern = props.schema.pattern;
|
||||
const { hideSchemaPattern } = React.useContext(OptionsContext);
|
||||
const [isPatternShown, setIsPatternShown] = React.useState(false);
|
||||
const togglePattern = React.useCallback(
|
||||
() => setIsPatternShown(!isPatternShown),
|
||||
[isPatternShown],
|
||||
);
|
||||
|
||||
if (!pattern || hideSchemaPattern) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PatternLabel>
|
||||
{isPatternShown || pattern.length < MAX_PATTERN_LENGTH
|
||||
? pattern
|
||||
: `${pattern.substr(0, MAX_PATTERN_LENGTH)}...`}
|
||||
</PatternLabel>
|
||||
{pattern.length > MAX_PATTERN_LENGTH && (
|
||||
<ToggleButton onClick={togglePattern}>
|
||||
{isPatternShown ? 'Hide pattern' : 'Show pattern'}
|
||||
</ToggleButton>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -34,11 +34,11 @@ class Json extends React.PureComponent<JsonProps> {
|
|||
<button onClick={this.collapseAll}> Collapse all </button>
|
||||
</SampleControls>
|
||||
<OptionsContext.Consumer>
|
||||
{(options) => (
|
||||
{options => (
|
||||
<PrismDiv
|
||||
className={this.props.className}
|
||||
// tslint:disable-next-line
|
||||
ref={(node) => (this.node = node!)}
|
||||
ref={node => (this.node = node!)}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ export const jsonStyles = css`
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
font-family: ${(props) => props.theme.typography.code.fontFamily};
|
||||
font-size: ${(props) => props.theme.typography.code.fontSize};
|
||||
font-family: ${props => props.theme.typography.code.fontFamily};
|
||||
font-size: ${props => props.theme.typography.code.fontSize};
|
||||
|
||||
white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
|
||||
contain: content;
|
||||
|
|
@ -51,8 +51,8 @@ export const jsonStyles = css`
|
|||
background-color: transparent;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
font-family: ${(props) => props.theme.typography.code.fontFamily};
|
||||
font-size: ${(props) => props.theme.typography.code.fontSize};
|
||||
font-family: ${props => props.theme.typography.code.fontFamily};
|
||||
font-size: ${props => props.theme.typography.code.fontSize};
|
||||
padding-right: 6px;
|
||||
padding-left: 6px;
|
||||
padding-top: 0;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ export const StyledMarkdownBlock = styled(
|
|||
{ compact?: boolean; inline?: boolean }
|
||||
>,
|
||||
)`
|
||||
|
||||
font-family: ${props => props.theme.typography.fontFamily};
|
||||
font-weight: ${props => props.theme.typography.fontWeightRegular};
|
||||
line-height: ${props => props.theme.typography.lineHeight};
|
||||
|
|
@ -81,7 +80,7 @@ export const StyledMarkdownBlock = styled(
|
|||
|
||||
pre {
|
||||
font-family: ${props => props.theme.typography.code.fontFamily};
|
||||
white-space:${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
|
||||
white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
|
||||
background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
|
||||
color: white;
|
||||
padding: ${props => props.theme.spacing.unit * 4}px;
|
||||
|
|
@ -121,7 +120,8 @@ export const StyledMarkdownBlock = styled(
|
|||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,12 +18,6 @@ import { ResponsesList } from '../Responses/ResponsesList';
|
|||
import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
|
||||
import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
|
||||
|
||||
const OperationRow = styled(Row)`
|
||||
backface-visibility: hidden;
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const Description = styled.div`
|
||||
margin-bottom: ${({ theme }) => theme.spacing.unit * 6}px;
|
||||
`;
|
||||
|
|
@ -42,8 +36,8 @@ export class Operation extends React.Component<OperationProps> {
|
|||
|
||||
return (
|
||||
<OptionsContext.Consumer>
|
||||
{(options) => (
|
||||
<OperationRow>
|
||||
{options => (
|
||||
<Row>
|
||||
<MiddlePanel>
|
||||
<H2>
|
||||
<ShareLink to={operation.id} />
|
||||
|
|
@ -71,7 +65,7 @@ export class Operation extends React.Component<OperationProps> {
|
|||
<ResponseSamples operation={operation} />
|
||||
<CallbackSamples callbacks={operation.callbacks} />
|
||||
</DarkRightPanel>
|
||||
</OperationRow>
|
||||
</Row>
|
||||
)}
|
||||
</OptionsContext.Consumer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -67,7 +67,10 @@ function DropdownWithinHeader(props) {
|
|||
);
|
||||
}
|
||||
|
||||
export function BodyContent(props: { content: MediaContentModel; description?: string }): JSX.Element {
|
||||
export function BodyContent(props: {
|
||||
content: MediaContentModel;
|
||||
description?: string;
|
||||
}): JSX.Element {
|
||||
const { content, description } = props;
|
||||
const { isRequestType } = content;
|
||||
return (
|
||||
|
|
@ -76,7 +79,12 @@ export function BodyContent(props: { content: MediaContentModel; description?: s
|
|||
return (
|
||||
<>
|
||||
{description !== undefined && <Markdown source={description} />}
|
||||
<Schema skipReadOnly={isRequestType} key="schema" schema={schema} />
|
||||
<Schema
|
||||
skipReadOnly={isRequestType}
|
||||
skipWriteOnly={!isRequestType}
|
||||
key="schema"
|
||||
schema={schema}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { argValueToBoolean, RedocNormalizedOptions, RedocRawOptions } from '../services/RedocNormalizedOptions';
|
||||
import {
|
||||
argValueToBoolean,
|
||||
RedocNormalizedOptions,
|
||||
RedocRawOptions,
|
||||
} from '../services/RedocNormalizedOptions';
|
||||
import { ErrorBoundary } from './ErrorBoundary';
|
||||
import { Loading } from './Loading/Loading';
|
||||
import { Redoc } from './Redoc/Redoc';
|
||||
|
|
@ -32,4 +36,4 @@ export const RedocStandalone = function (props: RedocStandaloneProps) {
|
|||
</StoreBuilder>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,39 +1,47 @@
|
|||
import { observer } from 'mobx-react';
|
||||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import { ResponseModel } from '../../services/models';
|
||||
import type { ResponseModel, MediaTypeModel } from '../../services/models';
|
||||
import { ResponseDetails } from './ResponseDetails';
|
||||
import { ResponseDetailsWrap, StyledResponseTitle } from './styled.elements';
|
||||
|
||||
@observer
|
||||
export class ResponseView extends React.Component<{ response: ResponseModel }> {
|
||||
toggle = () => {
|
||||
this.props.response.toggle();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { headers, type, summary, description, code, expanded, content } = this.props.response;
|
||||
const mimes =
|
||||
content === undefined ? [] : content.mediaTypes.filter(mime => mime.schema !== undefined);
|
||||
|
||||
const empty = headers.length === 0 && mimes.length === 0 && !description;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<StyledResponseTitle
|
||||
onClick={this.toggle}
|
||||
type={type}
|
||||
empty={empty}
|
||||
title={summary || ''}
|
||||
code={code}
|
||||
opened={expanded}
|
||||
/>
|
||||
{expanded && !empty && (
|
||||
<ResponseDetailsWrap>
|
||||
<ResponseDetails response={this.props.response} />
|
||||
</ResponseDetailsWrap>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export interface ResponseViewProps {
|
||||
response: ResponseModel;
|
||||
}
|
||||
|
||||
export const ResponseView = observer(({ response }: ResponseViewProps): React.ReactElement => {
|
||||
const { extensions, headers, type, summary, description, code, expanded, content } = response;
|
||||
|
||||
const mimes = React.useMemo<MediaTypeModel[]>(
|
||||
() =>
|
||||
content === undefined ? [] : content.mediaTypes.filter(mime => mime.schema !== undefined),
|
||||
[content],
|
||||
);
|
||||
|
||||
const empty = React.useMemo<boolean>(
|
||||
() =>
|
||||
(!extensions || Object.keys(extensions).length === 0) &&
|
||||
headers.length === 0 &&
|
||||
mimes.length === 0 &&
|
||||
!description,
|
||||
[extensions, headers, mimes, description],
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<StyledResponseTitle
|
||||
onClick={() => response.toggle()}
|
||||
type={type}
|
||||
empty={empty}
|
||||
title={summary || ''}
|
||||
code={code}
|
||||
opened={expanded}
|
||||
/>
|
||||
{expanded && !empty && (
|
||||
<ResponseDetailsWrap>
|
||||
<ResponseDetails response={response} />
|
||||
</ResponseDetailsWrap>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,15 +7,17 @@ import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel';
|
|||
import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch';
|
||||
import { Schema } from '../Schema';
|
||||
|
||||
import { Extensions } from '../Fields/Extensions';
|
||||
import { Markdown } from '../Markdown/Markdown';
|
||||
import { ResponseHeaders } from './ResponseHeaders';
|
||||
|
||||
export class ResponseDetails extends React.PureComponent<{ response: ResponseModel }> {
|
||||
render() {
|
||||
const { description, headers, content } = this.props.response;
|
||||
const { description, extensions, headers, content } = this.props.response;
|
||||
return (
|
||||
<>
|
||||
{description && <Markdown source={description} />}
|
||||
<Extensions extensions={extensions} />
|
||||
<ResponseHeaders headers={headers} />
|
||||
<MediaTypesSwitch content={content} renderDropdown={this.renderDropdown}>
|
||||
{({ schema }) => {
|
||||
|
|
|
|||
|
|
@ -14,27 +14,34 @@ export interface ResponseTitleProps {
|
|||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export class ResponseTitle extends React.PureComponent<ResponseTitleProps> {
|
||||
render() {
|
||||
const { title, type, empty, code, opened, className, onClick } = this.props;
|
||||
return (
|
||||
<button
|
||||
className={className}
|
||||
onClick={(!empty && onClick) || undefined}
|
||||
aria-expanded={opened}
|
||||
disabled={empty}
|
||||
>
|
||||
{!empty && (
|
||||
<ShelfIcon
|
||||
size={'1.5em'}
|
||||
color={type}
|
||||
direction={opened ? 'down' : 'right'}
|
||||
float={'left'}
|
||||
/>
|
||||
)}
|
||||
<Code>{code} </Code>
|
||||
<Markdown compact={true} inline={true} source={title} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
function ResponseTitleComponent({
|
||||
title,
|
||||
type,
|
||||
empty,
|
||||
code,
|
||||
opened,
|
||||
className,
|
||||
onClick,
|
||||
}: ResponseTitleProps): React.ReactElement {
|
||||
return (
|
||||
<button
|
||||
className={className}
|
||||
onClick={(!empty && onClick) || undefined}
|
||||
aria-expanded={opened}
|
||||
disabled={empty}
|
||||
>
|
||||
{!empty && (
|
||||
<ShelfIcon
|
||||
size={'1.5em'}
|
||||
color={type}
|
||||
direction={opened ? 'down' : 'right'}
|
||||
float={'left'}
|
||||
/>
|
||||
)}
|
||||
<Code>{code} </Code>
|
||||
<Markdown compact={true} inline={true} source={title} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export const ResponseTitle = React.memo<ResponseTitleProps>(ResponseTitleComponent);
|
||||
|
|
|
|||
|
|
@ -11,16 +11,14 @@ export const StyledResponseTitle = styled(ResponseTitle)`
|
|||
border-radius: 2px;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.5em;
|
||||
background-color: #f2f2f2;
|
||||
cursor: pointer;
|
||||
|
||||
color: ${(props) => props.theme.colors.responses[props.type].color};
|
||||
background-color: ${(props) => props.theme.colors.responses[props.type].backgroundColor};
|
||||
color: ${props => props.theme.colors.responses[props.type].color};
|
||||
background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
|
||||
&:focus {
|
||||
outline: auto;
|
||||
outline-color: ${(props) => props.theme.colors.responses[props.type].color};
|
||||
outline: auto ${props => props.theme.colors.responses[props.type].color};
|
||||
}
|
||||
${(props) =>
|
||||
${props =>
|
||||
(props.empty &&
|
||||
`
|
||||
cursor: default;
|
||||
|
|
|
|||
|
|
@ -16,14 +16,17 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
|
|||
const schema = this.props.schema;
|
||||
const itemsSchema = schema.items;
|
||||
|
||||
const minMaxItems = schema.minItems === undefined && schema.maxItems === undefined ?
|
||||
'' :
|
||||
`(${humanizeConstraints(schema)})`;
|
||||
const minMaxItems =
|
||||
schema.minItems === undefined && schema.maxItems === undefined
|
||||
? ''
|
||||
: `(${humanizeConstraints(schema)})`;
|
||||
|
||||
if (schema.displayType && !itemsSchema && !minMaxItems.length) {
|
||||
return (<div>
|
||||
<TypeName>{schema.displayType}</TypeName>
|
||||
</div>);
|
||||
return (
|
||||
<div>
|
||||
<TypeName>{schema.displayType}</TypeName>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -18,37 +18,38 @@ export interface ObjectSchemaProps extends SchemaProps {
|
|||
};
|
||||
}
|
||||
|
||||
@observer
|
||||
export class ObjectSchema extends React.Component<ObjectSchemaProps> {
|
||||
static contextType = OptionsContext;
|
||||
export const ObjectSchema = observer(
|
||||
({
|
||||
schema: { fields = [], title },
|
||||
showTitle,
|
||||
discriminator,
|
||||
skipReadOnly,
|
||||
skipWriteOnly,
|
||||
level,
|
||||
}: ObjectSchemaProps) => {
|
||||
const { expandSingleSchemaField, showObjectSchemaExamples, schemaExpansionLevel } =
|
||||
React.useContext(OptionsContext);
|
||||
|
||||
get parentSchema() {
|
||||
return this.props.discriminator!.parentSchema;
|
||||
}
|
||||
const filteredFields = React.useMemo(
|
||||
() =>
|
||||
skipReadOnly || skipWriteOnly
|
||||
? fields.filter(
|
||||
item =>
|
||||
!(
|
||||
(skipReadOnly && item.schema.readOnly) ||
|
||||
(skipWriteOnly && item.schema.writeOnly)
|
||||
),
|
||||
)
|
||||
: fields,
|
||||
[skipReadOnly, skipWriteOnly, fields],
|
||||
);
|
||||
|
||||
render() {
|
||||
const {
|
||||
schema: { fields = [] },
|
||||
showTitle,
|
||||
discriminator,
|
||||
} = this.props;
|
||||
|
||||
const needFilter = this.props.skipReadOnly || this.props.skipWriteOnly;
|
||||
|
||||
const filteredFields = needFilter
|
||||
? fields.filter(item => {
|
||||
return !(
|
||||
(this.props.skipReadOnly && item.schema.readOnly) ||
|
||||
(this.props.skipWriteOnly && item.schema.writeOnly)
|
||||
);
|
||||
})
|
||||
: fields;
|
||||
|
||||
const expandByDefault = this.context.expandSingleSchemaField && filteredFields.length === 1;
|
||||
const expandByDefault =
|
||||
(expandSingleSchemaField && filteredFields.length === 1) || schemaExpansionLevel >= level!;
|
||||
|
||||
return (
|
||||
<PropertiesTable>
|
||||
{showTitle && <PropertiesTableCaption>{this.props.schema.title}</PropertiesTableCaption>}
|
||||
{showTitle && <PropertiesTableCaption>{title}</PropertiesTableCaption>}
|
||||
<tbody>
|
||||
{mapWithLast(filteredFields, (field, isLast) => {
|
||||
return (
|
||||
|
|
@ -58,26 +59,26 @@ export class ObjectSchema extends React.Component<ObjectSchemaProps> {
|
|||
field={field}
|
||||
expandByDefault={expandByDefault}
|
||||
renderDiscriminatorSwitch={
|
||||
(discriminator &&
|
||||
discriminator.fieldName === field.name &&
|
||||
(() => (
|
||||
<DiscriminatorDropdown
|
||||
parent={this.parentSchema}
|
||||
enumValues={field.schema.enum}
|
||||
/>
|
||||
))) ||
|
||||
undefined
|
||||
discriminator?.fieldName === field.name
|
||||
? () => (
|
||||
<DiscriminatorDropdown
|
||||
parent={discriminator!.parentSchema}
|
||||
enumValues={field.schema.enum}
|
||||
/>
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
className={field.expanded ? 'expanded' : undefined}
|
||||
showExamples={false}
|
||||
skipReadOnly={this.props.skipReadOnly}
|
||||
skipWriteOnly={this.props.skipWriteOnly}
|
||||
showTitle={this.props.showTitle}
|
||||
showExamples={showObjectSchemaExamples}
|
||||
skipReadOnly={skipReadOnly}
|
||||
skipWriteOnly={skipWriteOnly}
|
||||
showTitle={showTitle}
|
||||
level={level}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</PropertiesTable>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export interface SchemaOptions {
|
|||
showTitle?: boolean;
|
||||
skipReadOnly?: boolean;
|
||||
skipWriteOnly?: boolean;
|
||||
level?: number;
|
||||
}
|
||||
|
||||
export interface SchemaProps extends SchemaOptions {
|
||||
|
|
@ -25,7 +26,9 @@ export interface SchemaProps extends SchemaOptions {
|
|||
@observer
|
||||
export class Schema extends React.Component<Partial<SchemaProps>> {
|
||||
render() {
|
||||
const { schema } = this.props;
|
||||
const { schema, ...rest } = this.props;
|
||||
const level = (rest.level || 0) + 1;
|
||||
|
||||
if (!schema) {
|
||||
return <em> Schema not provided </em>;
|
||||
}
|
||||
|
|
@ -50,7 +53,9 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
|
|||
}
|
||||
return (
|
||||
<ObjectSchema
|
||||
{...{ ...this.props, schema: oneOf![schema.activeOneOf] }}
|
||||
{...rest}
|
||||
level={level}
|
||||
schema={oneOf![schema.activeOneOf]}
|
||||
discriminator={{
|
||||
fieldName: discriminatorProp,
|
||||
parentSchema: schema,
|
||||
|
|
@ -60,20 +65,20 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
|
|||
}
|
||||
|
||||
if (oneOf !== undefined) {
|
||||
return <OneOfSchema schema={schema} {...this.props} />;
|
||||
return <OneOfSchema schema={schema} {...rest} />;
|
||||
}
|
||||
|
||||
const types = Array.isArray(type) ? type : [type];
|
||||
if (types.includes('object')) {
|
||||
if (schema.fields?.length) {
|
||||
return <ObjectSchema {...(this.props as any)} />;
|
||||
return <ObjectSchema {...(this.props as any)} level={level} />;
|
||||
}
|
||||
} else if (types.includes('array')) {
|
||||
return <ArraySchema {...(this.props as any)} />;
|
||||
return <ArraySchema {...(this.props as any)} level={level} />;
|
||||
}
|
||||
|
||||
// TODO: maybe adjust FieldDetails to accept schema
|
||||
const field = ({
|
||||
const field = {
|
||||
schema,
|
||||
name: '',
|
||||
required: false,
|
||||
|
|
@ -82,7 +87,7 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
|
|||
deprecated: false,
|
||||
toggle: () => null,
|
||||
expanded: false,
|
||||
} as any) as FieldModel; // cast needed for hot-loader to not fail
|
||||
} as any as FieldModel; // cast needed for hot-loader to not fail
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
|
|||
setResults(results: SearchResult[], term: string) {
|
||||
this.setState({
|
||||
results,
|
||||
noResults: results.length === 0
|
||||
noResults: results.length === 0,
|
||||
});
|
||||
this.props.marker.mark(term);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import { SecurityRequirementModel } from '../../services/models/SecurityRequirem
|
|||
import { linksCss } from '../Markdown/styled.elements';
|
||||
|
||||
const ScopeName = styled.code`
|
||||
font-size: ${(props) => props.theme.typography.code.fontSize};
|
||||
font-family: ${(props) => props.theme.typography.code.fontFamily};
|
||||
font-size: ${props => props.theme.typography.code.fontSize};
|
||||
font-family: ${props => props.theme.typography.code.fontFamily};
|
||||
border: 1px solid ${({ theme }) => theme.colors.border.dark};
|
||||
margin: 0 3px;
|
||||
padding: 0.2em;
|
||||
|
|
@ -67,12 +67,12 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
|
|||
return (
|
||||
<SecurityRequirementOrWrap>
|
||||
{security.schemes.length ? (
|
||||
security.schemes.map((scheme) => {
|
||||
security.schemes.map(scheme => {
|
||||
return (
|
||||
<SecurityRequirementAndWrap key={scheme.id}>
|
||||
<Link to={scheme.sectionId}>{scheme.id}</Link>
|
||||
{scheme.scopes.length > 0 && ' ('}
|
||||
{scheme.scopes.map((scope) => (
|
||||
{scheme.scopes.map(scope => (
|
||||
<ScopeName key={scope}>{scope}</ScopeName>
|
||||
))}
|
||||
{scheme.scopes.length > 0 && ') '}
|
||||
|
|
@ -92,7 +92,7 @@ const AuthHeaderColumn = styled.div`
|
|||
`;
|
||||
|
||||
const SecuritiesColumn = styled.div`
|
||||
width: ${(props) => props.theme.schema.defaultDetailsWidth};
|
||||
width: ${props => props.theme.schema.defaultDetailsWidth};
|
||||
${media.lessThan('small')`
|
||||
margin-top: 10px;
|
||||
`}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { shortenHTTPVerb } from '../../utils/openapi';
|
|||
import { MenuItems } from './MenuItems';
|
||||
import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
|
||||
import { l } from '../../services/Labels';
|
||||
import { scrollIntoViewIfNeeded } from '../../utils';
|
||||
|
||||
export interface MenuItemProps {
|
||||
item: IMenuItem;
|
||||
|
|
@ -33,7 +34,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
|
|||
|
||||
scrollIntoViewIfActive() {
|
||||
if (this.props.item.active && this.ref.current) {
|
||||
this.ref.current.scrollIntoViewIfNeeded();
|
||||
scrollIntoViewIfNeeded(this.ref.current);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,8 +46,8 @@ export class MenuItem extends React.Component<MenuItemProps> {
|
|||
<OperationMenuItemContent {...this.props} item={item as OperationModel} />
|
||||
) : (
|
||||
<MenuItemLabel depth={item.depth} active={item.active} type={item.type} ref={this.ref}>
|
||||
<MenuItemTitle title={item.name}>
|
||||
{item.name}
|
||||
<MenuItemTitle title={item.sidebarLabel}>
|
||||
{item.sidebarLabel}
|
||||
{this.props.children}
|
||||
</MenuItemTitle>
|
||||
{(item.depth > 0 && item.items.length > 0 && (
|
||||
|
|
@ -77,7 +78,7 @@ export class OperationMenuItemContent extends React.Component<OperationMenuItemC
|
|||
|
||||
componentDidUpdate() {
|
||||
if (this.props.item.active && this.ref.current) {
|
||||
this.ref.current.scrollIntoViewIfNeeded();
|
||||
scrollIntoViewIfNeeded(this.ref.current);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -96,7 +97,7 @@ export class OperationMenuItemContent extends React.Component<OperationMenuItemC
|
|||
<OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
|
||||
)}
|
||||
<MenuItemTitle width="calc(100% - 38px)">
|
||||
{item.name}
|
||||
{item.sidebarLabel}
|
||||
{this.props.children}
|
||||
</MenuItemTitle>
|
||||
</MenuItemLabel>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
|
|||
if (item && item.active && this.context.menuToggle) {
|
||||
return item.expanded ? item.collapse() : item.expand();
|
||||
}
|
||||
|
||||
this.props.menu.activateAndScroll(item, true);
|
||||
setTimeout(() => {
|
||||
if (this._updateScroll) {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const { Provider, Consumer } = StoreContext;
|
|||
export { Provider as StoreProvider, Consumer as StoreConsumer, StoreContext };
|
||||
|
||||
export function StoreBuilder(props: StoreBuilderProps) {
|
||||
const {spec, specUrl, options, onLoaded, children } = props;
|
||||
const { spec, specUrl, options, onLoaded, children } = props;
|
||||
|
||||
const [resolvedSpec, setResolvedSpec] = React.useState<any>(null);
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ export function StoreBuilder(props: StoreBuilderProps) {
|
|||
setResolvedSpec(resolved);
|
||||
}
|
||||
load();
|
||||
}, [spec, specUrl])
|
||||
}, [spec, specUrl]);
|
||||
|
||||
const store = React.useMemo(() => {
|
||||
if (!resolvedSpec) return null;
|
||||
|
|
@ -56,13 +56,14 @@ export function StoreBuilder(props: StoreBuilderProps) {
|
|||
}
|
||||
throw e;
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [resolvedSpec, specUrl, options]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (store && onLoaded) {
|
||||
onLoaded();
|
||||
}
|
||||
}, [store, onLoaded])
|
||||
}, [store, onLoaded]);
|
||||
|
||||
return children({
|
||||
loading: !store,
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ describe('Components', () => {
|
|||
options,
|
||||
);
|
||||
const schemaViewElement = shallow(<Schema schema={schema} />).getElement();
|
||||
expect(schemaViewElement.type).toEqual(ObjectSchema);
|
||||
expect(schemaViewElement).toMatchSnapshot();
|
||||
expect(schemaViewElement.props.discriminator).toBeDefined();
|
||||
expect(schemaViewElement.props.discriminator.parentSchema).toBeDefined();
|
||||
expect(schemaViewElement.props.discriminator.fieldName).toEqual('type');
|
||||
|
|
|
|||
|
|
@ -10,14 +10,15 @@ const options = new RedocNormalizedOptions({});
|
|||
describe('Components', () => {
|
||||
describe('SecurityRequirement', () => {
|
||||
describe('SecurityRequirement', () => {
|
||||
it('should render \'None\' when empty object in security open api', () => {
|
||||
const parser = new OpenAPIParser({ openapi: '3.0', info: { title: 'test', version: '0' }, paths: {} },
|
||||
it("should render 'None' when empty object in security open api", () => {
|
||||
const parser = new OpenAPIParser(
|
||||
{ openapi: '3.0', info: { title: 'test', version: '0' }, paths: {} },
|
||||
undefined,
|
||||
options,
|
||||
);
|
||||
const securityRequirement = new SecurityRequirementModel({}, parser);
|
||||
const securityElement = shallow(
|
||||
<SecurityRequirement key={1} security={securityRequirement} />
|
||||
<SecurityRequirement key={1} security={securityRequirement} />,
|
||||
).getElement();
|
||||
expect(securityElement.props.children.type.target).toEqual('span');
|
||||
expect(securityElement.props.children.props.children).toEqual('None');
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,4 +1,5 @@
|
|||
import * as marked from 'marked';
|
||||
import * as React from 'react';
|
||||
import { marked } from 'marked';
|
||||
|
||||
import { highlight, safeSlugify, unescapeHTMLChars } from '../utils';
|
||||
import { AppStore } from './AppStore';
|
||||
|
|
@ -56,10 +57,12 @@ export class MarkdownRenderer {
|
|||
headings: MarkdownHeading[] = [];
|
||||
currentTopHeading: MarkdownHeading;
|
||||
|
||||
public parser: marked.Parser; // required initialization, `parser` is used by `marked.Renderer` instance under the hood
|
||||
private headingEnhanceRenderer: marked.Renderer;
|
||||
private originalHeadingRule: typeof marked.Renderer.prototype.heading;
|
||||
|
||||
constructor(public options?: RedocNormalizedOptions) {
|
||||
this.parser = new marked.Parser();
|
||||
this.headingEnhanceRenderer = new marked.Renderer();
|
||||
this.originalHeadingRule = this.headingEnhanceRenderer.heading.bind(
|
||||
this.headingEnhanceRenderer,
|
||||
|
|
@ -98,7 +101,7 @@ export class MarkdownRenderer {
|
|||
|
||||
attachHeadingsDescriptions(rawText: string) {
|
||||
const buildRegexp = (heading: MarkdownHeading) => {
|
||||
return new RegExp(`##?\\s+${heading.name.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}`);
|
||||
return new RegExp(`##?\\s+${heading.name.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}\s*\n`);
|
||||
};
|
||||
|
||||
const flatHeadings = this.flattenHeadings(this.headings);
|
||||
|
|
@ -121,10 +124,7 @@ export class MarkdownRenderer {
|
|||
prevRegexp = regexp;
|
||||
prevPos = currentPos;
|
||||
}
|
||||
prevHeading.description = rawText
|
||||
.substring(prevPos)
|
||||
.replace(prevRegexp, '')
|
||||
.trim();
|
||||
prevHeading.description = rawText.substring(prevPos).replace(prevRegexp, '').trim();
|
||||
}
|
||||
|
||||
headingRule = (
|
||||
|
|
@ -132,7 +132,7 @@ export class MarkdownRenderer {
|
|||
level: 1 | 2 | 3 | 4 | 5 | 6,
|
||||
raw: string,
|
||||
slugger: marked.Slugger,
|
||||
) => {
|
||||
): string => {
|
||||
if (level === 1) {
|
||||
this.currentTopHeading = this.saveHeading(text, level);
|
||||
} else if (level === 2) {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {
|
|||
SECURITY_DEFINITIONS_COMPONENT_NAME,
|
||||
setSecuritySchemePrefix,
|
||||
JsonPointer,
|
||||
alphabeticallyByProp,
|
||||
} from '../utils';
|
||||
import { MarkdownRenderer } from './MarkdownRenderer';
|
||||
import { GroupModel, OperationModel } from './models';
|
||||
|
|
@ -130,9 +131,11 @@ export class MenuBuilder {
|
|||
|
||||
/**
|
||||
* Returns array of OperationsGroup items for the tags of the group or for all tags
|
||||
* @param parser
|
||||
* @param tagsMap tags info returned from `getTagsWithOperations`
|
||||
* @param parent parent item
|
||||
* @param group group which this tag belongs to. if not provided gets all tags
|
||||
* @param options normalized options
|
||||
*/
|
||||
static getTagsItems(
|
||||
parser: OpenAPIParser,
|
||||
|
|
@ -183,14 +186,21 @@ export class MenuBuilder {
|
|||
|
||||
res.push(item);
|
||||
}
|
||||
|
||||
if (options.sortTagsAlphabetically) {
|
||||
res.sort(alphabeticallyByProp<GroupModel | OperationModel>('name'));
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns array of Operation items for the tag
|
||||
* @param parser
|
||||
* @param parent parent OperationsGroup
|
||||
* @param tag tag info returned from `getTagsWithOperations`
|
||||
* @param depth items depth
|
||||
* @param options - normalized options
|
||||
*/
|
||||
static getOperationsItems(
|
||||
parser: OpenAPIParser,
|
||||
|
|
@ -209,6 +219,11 @@ export class MenuBuilder {
|
|||
operation.depth = depth;
|
||||
res.push(operation);
|
||||
}
|
||||
|
||||
if (options.sortOperationsAlphabetically) {
|
||||
res.sort(alphabeticallyByProp<OperationModel>('name'));
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
|
|
@ -226,7 +241,7 @@ export class MenuBuilder {
|
|||
getTags(parser, webhooks, true);
|
||||
}
|
||||
|
||||
if (spec.paths){
|
||||
if (spec.paths) {
|
||||
getTags(parser, spec.paths);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export interface IMenuItem {
|
|||
id: string;
|
||||
absoluteIdx?: number;
|
||||
name: string;
|
||||
sidebarLabel: string;
|
||||
description?: string;
|
||||
depth: number;
|
||||
active: boolean;
|
||||
|
|
|
|||
|
|
@ -193,7 +193,10 @@ export class OpenAPIParser {
|
|||
if (keys.length === 0) {
|
||||
return resolved;
|
||||
}
|
||||
if (mergeAsAllOf && keys.some((k) => k !== 'description' && k !== 'title' && k !== 'externalDocs')) {
|
||||
if (
|
||||
mergeAsAllOf &&
|
||||
keys.some(k => k !== 'description' && k !== 'title' && k !== 'externalDocs')
|
||||
) {
|
||||
return {
|
||||
allOf: [rest, resolved],
|
||||
};
|
||||
|
|
@ -244,7 +247,7 @@ export class OpenAPIParser {
|
|||
}
|
||||
|
||||
const allOfSchemas = schema.allOf
|
||||
.map((subSchema) => {
|
||||
.map(subSchema => {
|
||||
if (subSchema && subSchema.$ref && used$Refs.has(subSchema.$ref)) {
|
||||
return undefined;
|
||||
}
|
||||
|
|
@ -258,7 +261,7 @@ export class OpenAPIParser {
|
|||
schema: subMerged,
|
||||
};
|
||||
})
|
||||
.filter((child) => child !== undefined) as Array<{
|
||||
.filter(child => child !== undefined) as Array<{
|
||||
$ref: string | undefined;
|
||||
schema: MergedOpenAPISchema;
|
||||
}>;
|
||||
|
|
@ -337,7 +340,7 @@ export class OpenAPIParser {
|
|||
const def = this.deref(schemas[defName]);
|
||||
if (
|
||||
def.allOf !== undefined &&
|
||||
def.allOf.find((obj) => obj.$ref !== undefined && $refs.indexOf(obj.$ref) > -1)
|
||||
def.allOf.find(obj => obj.$ref !== undefined && $refs.indexOf(obj.$ref) > -1)
|
||||
) {
|
||||
res['#/components/schemas/' + defName] = [def['x-discriminator-value'] || defName];
|
||||
}
|
||||
|
|
@ -363,7 +366,7 @@ export class OpenAPIParser {
|
|||
const beforeAllOf = allOf.slice(0, i);
|
||||
const afterAllOf = allOf.slice(i + 1);
|
||||
return {
|
||||
oneOf: sub.oneOf.map((part) => {
|
||||
oneOf: sub.oneOf.map(part => {
|
||||
const merged = this.mergeAllOf({
|
||||
allOf: [...beforeAllOf, part, ...afterAllOf],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,6 +5,11 @@ import { isNumeric, mergeObjects } from '../utils/helpers';
|
|||
import { LabelsConfigRaw, setRedocLabels } from './Labels';
|
||||
import { MDXComponentMeta } from './MarkdownRenderer';
|
||||
|
||||
export enum SideNavStyleEnum {
|
||||
SummaryOnly = 'summary-only',
|
||||
PathOnly = 'path-only',
|
||||
}
|
||||
|
||||
export interface RedocRawOptions {
|
||||
theme?: ThemeInterface;
|
||||
scrollYOffset?: number | string | (() => number);
|
||||
|
|
@ -13,6 +18,8 @@ export interface RedocRawOptions {
|
|||
requiredPropsFirst?: boolean | string;
|
||||
sortPropsAlphabetically?: boolean | string;
|
||||
sortEnumValuesAlphabetically?: boolean | string;
|
||||
sortOperationsAlphabetically?: boolean | string;
|
||||
sortTagsAlphabetically?: boolean | string;
|
||||
noAutoAuth?: boolean | string;
|
||||
nativeScrollbars?: boolean | string;
|
||||
pathInMiddlePanel?: boolean | string;
|
||||
|
|
@ -22,6 +29,7 @@ export interface RedocRawOptions {
|
|||
disableSearch?: boolean | string;
|
||||
onlyRequiredInSamples?: boolean | string;
|
||||
showExtensions?: boolean | string | string[];
|
||||
sideNavStyle?: SideNavStyleEnum;
|
||||
hideSingleRequestSampleTab?: boolean | string;
|
||||
menuToggle?: boolean | string;
|
||||
jsonSampleExpandLevel?: number | string | 'all';
|
||||
|
|
@ -29,6 +37,8 @@ export interface RedocRawOptions {
|
|||
simpleOneOfTypeLabel?: boolean | string;
|
||||
payloadSampleIdx?: number;
|
||||
expandSingleSchemaField?: boolean | string;
|
||||
schemaExpansionLevel?: number | string | 'all';
|
||||
showObjectSchemaExamples?: boolean | string;
|
||||
|
||||
unstable_ignoreMimeParameters?: boolean;
|
||||
|
||||
|
|
@ -65,6 +75,12 @@ function argValueToNumber(value: number | string | undefined): number | undefine
|
|||
}
|
||||
}
|
||||
|
||||
function argValueToExpandLevel(value?: number | string | undefined, defaultValue = 0): number {
|
||||
if (value === 'all') return Infinity;
|
||||
|
||||
return argValueToNumber(value) || defaultValue;
|
||||
}
|
||||
|
||||
export class RedocNormalizedOptions {
|
||||
static normalizeExpandResponses(value: RedocRawOptions['expandResponses']) {
|
||||
if (value === 'all') {
|
||||
|
|
@ -72,7 +88,7 @@ export class RedocNormalizedOptions {
|
|||
}
|
||||
if (typeof value === 'string') {
|
||||
const res = {};
|
||||
value.split(',').forEach((code) => {
|
||||
value.split(',').forEach(code => {
|
||||
res[code.trim()] = true;
|
||||
});
|
||||
return res;
|
||||
|
|
@ -138,7 +154,23 @@ export class RedocNormalizedOptions {
|
|||
case 'false':
|
||||
return false;
|
||||
default:
|
||||
return value.split(',').map((ext) => ext.trim());
|
||||
return value.split(',').map(ext => ext.trim());
|
||||
}
|
||||
}
|
||||
|
||||
static normalizeSideNavStyle(value: RedocRawOptions['sideNavStyle']): SideNavStyleEnum {
|
||||
const defaultValue = SideNavStyleEnum.SummaryOnly;
|
||||
if (typeof value !== 'string') {
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
switch (value) {
|
||||
case defaultValue:
|
||||
return value;
|
||||
case SideNavStyleEnum.PathOnly:
|
||||
return SideNavStyleEnum.PathOnly;
|
||||
default:
|
||||
return defaultValue;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,6 +213,8 @@ export class RedocNormalizedOptions {
|
|||
requiredPropsFirst: boolean;
|
||||
sortPropsAlphabetically: boolean;
|
||||
sortEnumValuesAlphabetically: boolean;
|
||||
sortOperationsAlphabetically: boolean;
|
||||
sortTagsAlphabetically: boolean;
|
||||
noAutoAuth: boolean;
|
||||
nativeScrollbars: boolean;
|
||||
pathInMiddlePanel: boolean;
|
||||
|
|
@ -189,6 +223,7 @@ export class RedocNormalizedOptions {
|
|||
disableSearch: boolean;
|
||||
onlyRequiredInSamples: boolean;
|
||||
showExtensions: boolean | string[];
|
||||
sideNavStyle: SideNavStyleEnum;
|
||||
hideSingleRequestSampleTab: boolean;
|
||||
menuToggle: boolean;
|
||||
jsonSampleExpandLevel: number;
|
||||
|
|
@ -197,6 +232,8 @@ export class RedocNormalizedOptions {
|
|||
simpleOneOfTypeLabel: boolean;
|
||||
payloadSampleIdx: number;
|
||||
expandSingleSchemaField: boolean;
|
||||
schemaExpansionLevel: number;
|
||||
showObjectSchemaExamples: boolean;
|
||||
|
||||
/* tslint:disable-next-line */
|
||||
unstable_ignoreMimeParameters: boolean;
|
||||
|
|
@ -239,6 +276,8 @@ export class RedocNormalizedOptions {
|
|||
this.requiredPropsFirst = argValueToBoolean(raw.requiredPropsFirst);
|
||||
this.sortPropsAlphabetically = argValueToBoolean(raw.sortPropsAlphabetically);
|
||||
this.sortEnumValuesAlphabetically = argValueToBoolean(raw.sortEnumValuesAlphabetically);
|
||||
this.sortOperationsAlphabetically = argValueToBoolean(raw.sortOperationsAlphabetically);
|
||||
this.sortTagsAlphabetically = argValueToBoolean(raw.sortTagsAlphabetically);
|
||||
this.noAutoAuth = argValueToBoolean(raw.noAutoAuth);
|
||||
this.nativeScrollbars = argValueToBoolean(raw.nativeScrollbars);
|
||||
this.pathInMiddlePanel = argValueToBoolean(raw.pathInMiddlePanel);
|
||||
|
|
@ -247,6 +286,7 @@ export class RedocNormalizedOptions {
|
|||
this.disableSearch = argValueToBoolean(raw.disableSearch);
|
||||
this.onlyRequiredInSamples = argValueToBoolean(raw.onlyRequiredInSamples);
|
||||
this.showExtensions = RedocNormalizedOptions.normalizeShowExtensions(raw.showExtensions);
|
||||
this.sideNavStyle = RedocNormalizedOptions.normalizeSideNavStyle(raw.sideNavStyle);
|
||||
this.hideSingleRequestSampleTab = argValueToBoolean(raw.hideSingleRequestSampleTab);
|
||||
this.menuToggle = argValueToBoolean(raw.menuToggle, true);
|
||||
this.jsonSampleExpandLevel = RedocNormalizedOptions.normalizeJsonSampleExpandLevel(
|
||||
|
|
@ -257,6 +297,8 @@ export class RedocNormalizedOptions {
|
|||
this.simpleOneOfTypeLabel = argValueToBoolean(raw.simpleOneOfTypeLabel);
|
||||
this.payloadSampleIdx = RedocNormalizedOptions.normalizePayloadSampleIdx(raw.payloadSampleIdx);
|
||||
this.expandSingleSchemaField = argValueToBoolean(raw.expandSingleSchemaField);
|
||||
this.schemaExpansionLevel = argValueToExpandLevel(raw.schemaExpansionLevel);
|
||||
this.showObjectSchemaExamples = argValueToBoolean(raw.showObjectSchemaExamples);
|
||||
|
||||
this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);
|
||||
|
||||
|
|
@ -266,7 +308,7 @@ export class RedocNormalizedOptions {
|
|||
this.maxDisplayedEnumValues = argValueToNumber(raw.maxDisplayedEnumValues);
|
||||
const ignoreNamedSchemas = Array.isArray(raw.ignoreNamedSchemas)
|
||||
? raw.ignoreNamedSchemas
|
||||
: raw.ignoreNamedSchemas?.split(',').map((s) => s.trim());
|
||||
: raw.ignoreNamedSchemas?.split(',').map(s => s.trim());
|
||||
this.ignoreNamedSchemas = new Set(ignoreNamedSchemas);
|
||||
this.hideSchemaPattern = argValueToBoolean(raw.hideSchemaPattern);
|
||||
this.generatedPayloadSamplesMaxDepth =
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export class SearchStore<T> {
|
|||
|
||||
fromExternalJS(path?: string, exportName?: string) {
|
||||
if (path && exportName) {
|
||||
this.searchWorker.fromExternalJS(path, exportName)
|
||||
this.searchWorker.fromExternalJS(path, exportName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,5 @@
|
|||
import * as lunr from 'lunr';
|
||||
|
||||
try {
|
||||
// tslint:disable-next-line
|
||||
require('core-js/es/promise'); // bundle into worker
|
||||
} catch (_) {
|
||||
// nope
|
||||
}
|
||||
|
||||
/* just for better typings */
|
||||
export default class Worker {
|
||||
add: typeof add = add;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,10 @@ export class SpecStore {
|
|||
this.externalDocs = this.parser.spec.externalDocs;
|
||||
this.contentItems = MenuBuilder.buildStructure(this.parser, this.options);
|
||||
this.securitySchemes = new SecuritySchemesModel(this.parser);
|
||||
const webhookPath: Referenced<OpenAPIPath> = {...this.parser?.spec?.['x-webhooks'], ...this.parser?.spec.webhooks};
|
||||
const webhookPath: Referenced<OpenAPIPath> = {
|
||||
...this.parser?.spec?.['x-webhooks'],
|
||||
...this.parser?.spec.webhooks,
|
||||
};
|
||||
this.webhooks = new WebhookModel(this.parser, options, webhookPath);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,5 @@ describe('Models', () => {
|
|||
|
||||
expect(parser.shallowDeref(schemaOrRef)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -54,8 +54,8 @@ describe('Models', () => {
|
|||
license: {
|
||||
name: 'MIT',
|
||||
identifier: 'MIT',
|
||||
url: 'https://opensource.org/licenses/MIT'
|
||||
}
|
||||
url: 'https://opensource.org/licenses/MIT',
|
||||
},
|
||||
},
|
||||
} as any;
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ describe('Models', () => {
|
|||
expect(contentItems[0].id).toEqual('tag/pet');
|
||||
expect(contentItems[0].name).toEqual('pet');
|
||||
expect(contentItems[0].type).toEqual('tag');
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -20,24 +20,38 @@ describe('Models', () => {
|
|||
});
|
||||
|
||||
test('should calculate response type based on code', () => {
|
||||
let resp = new ResponseModel({...props, code: '200' });
|
||||
let resp = new ResponseModel({ ...props, code: '200' });
|
||||
expect(resp.type).toEqual('success');
|
||||
resp = new ResponseModel({...props, code: '120' });
|
||||
resp = new ResponseModel({ ...props, code: '120' });
|
||||
expect(resp.type).toEqual('info');
|
||||
resp = new ResponseModel({...props, code: '301' });
|
||||
resp = new ResponseModel({ ...props, code: '301' });
|
||||
expect(resp.type).toEqual('redirect');
|
||||
resp = new ResponseModel({...props, code: '400' });
|
||||
resp = new ResponseModel({ ...props, code: '400' });
|
||||
expect(resp.type).toEqual('error');
|
||||
});
|
||||
|
||||
test('default should be successful by default', () => {
|
||||
const resp = new ResponseModel({...props, code: 'default' });
|
||||
const resp = new ResponseModel({ ...props, code: 'default' });
|
||||
expect(resp.type).toEqual('success');
|
||||
});
|
||||
|
||||
test('default should be error if defaultAsError is true', () => {
|
||||
const resp = new ResponseModel({...props, code: 'default', defaultAsError: true });
|
||||
const resp = new ResponseModel({ ...props, code: 'default', defaultAsError: true });
|
||||
expect(resp.type).toEqual('error');
|
||||
});
|
||||
|
||||
test('ensure extensions are shown if showExtensions is true', () => {
|
||||
const options = new RedocNormalizedOptions({ showExtensions: true });
|
||||
const resp = new ResponseModel({
|
||||
parser,
|
||||
code: 'default',
|
||||
defaultAsError: true,
|
||||
infoOrRef: { 'x-example': { a: 1 } },
|
||||
options,
|
||||
isEvent: true,
|
||||
});
|
||||
expect(Object.keys(resp.extensions).length).toEqual(1);
|
||||
expect(resp.extensions['x-example']).toEqual({ a: 1 });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const DEFAULT_SERIALIZATION: Record<
|
|||
*/
|
||||
export class FieldModel {
|
||||
@observable
|
||||
expanded: boolean | undefined = false;
|
||||
expanded: boolean | undefined = undefined;
|
||||
|
||||
schema: SchemaModel;
|
||||
name: string;
|
||||
|
|
@ -120,4 +120,14 @@ export class FieldModel {
|
|||
toggle() {
|
||||
this.expanded = !this.expanded;
|
||||
}
|
||||
|
||||
@action
|
||||
collapse(): void {
|
||||
this.expanded = false;
|
||||
}
|
||||
|
||||
@action
|
||||
expand(): void {
|
||||
this.expanded = true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export class GroupModel implements IMenuItem {
|
|||
id: string;
|
||||
absoluteIdx?: number;
|
||||
name: string;
|
||||
sidebarLabel: string;
|
||||
description?: string;
|
||||
type: MenuItemGroupType;
|
||||
|
||||
|
|
@ -43,6 +44,8 @@ export class GroupModel implements IMenuItem {
|
|||
this.name = tagOrGroup['x-displayName'] || tagOrGroup.name;
|
||||
this.level = (tagOrGroup as MarkdownHeading).level || 1;
|
||||
|
||||
this.sidebarLabel = this.name;
|
||||
|
||||
// remove sections from markdown, same as in ApiInfo
|
||||
this.description = tagOrGroup.description || '';
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import { FieldModel } from './Field';
|
|||
import { MediaContentModel } from './MediaContent';
|
||||
import { RequestBodyModel } from './RequestBody';
|
||||
import { ResponseModel } from './Response';
|
||||
import { SideNavStyleEnum } from '../RedocNormalizedOptions';
|
||||
|
||||
export interface XPayloadSample {
|
||||
lang: 'payload';
|
||||
|
|
@ -49,6 +50,7 @@ export class OperationModel implements IMenuItem {
|
|||
id: string;
|
||||
absoluteIdx?: number;
|
||||
name: string;
|
||||
sidebarLabel: string;
|
||||
description?: string;
|
||||
type = 'operation' as const;
|
||||
|
||||
|
|
@ -104,11 +106,13 @@ export class OperationModel implements IMenuItem {
|
|||
|
||||
this.name = getOperationSummary(operationSpec);
|
||||
|
||||
this.sidebarLabel = options.sideNavStyle === SideNavStyleEnum.PathOnly ? this.path : this.name;
|
||||
|
||||
if (this.isCallback) {
|
||||
// NOTE: Callbacks by default should not inherit the specification's global `security` definition.
|
||||
// Can be defined individually per-callback in the specification. Defaults to none.
|
||||
this.security = (operationSpec.security || []).map(
|
||||
(security) => new SecurityRequirementModel(security, parser),
|
||||
security => new SecurityRequirementModel(security, parser),
|
||||
);
|
||||
|
||||
// TODO: update getting pathInfo for overriding servers on path level
|
||||
|
|
@ -122,7 +126,7 @@ export class OperationModel implements IMenuItem {
|
|||
: this.pointer;
|
||||
|
||||
this.security = (operationSpec.security || parser.spec.security || []).map(
|
||||
(security) => new SecurityRequirementModel(security, parser),
|
||||
security => new SecurityRequirementModel(security, parser),
|
||||
);
|
||||
|
||||
this.servers = normalizeServers(
|
||||
|
|
@ -173,7 +177,8 @@ export class OperationModel implements IMenuItem {
|
|||
@memoize
|
||||
get requestBody() {
|
||||
return (
|
||||
this.operationSpec.requestBody && new RequestBodyModel({
|
||||
this.operationSpec.requestBody &&
|
||||
new RequestBodyModel({
|
||||
parser: this.parser,
|
||||
infoOrRef: this.operationSpec.requestBody,
|
||||
options: this.options,
|
||||
|
|
@ -218,7 +223,7 @@ export class OperationModel implements IMenuItem {
|
|||
this.operationSpec.pathParameters,
|
||||
this.operationSpec.parameters,
|
||||
// TODO: fix pointer
|
||||
).map((paramOrRef) => new FieldModel(this.parser, paramOrRef, this.pointer, this.options));
|
||||
).map(paramOrRef => new FieldModel(this.parser, paramOrRef, this.pointer, this.options));
|
||||
|
||||
if (this.options.sortPropsAlphabetically) {
|
||||
return sortByField(_parameters, 'name');
|
||||
|
|
@ -234,7 +239,7 @@ export class OperationModel implements IMenuItem {
|
|||
get responses() {
|
||||
let hasSuccessResponses = false;
|
||||
return Object.keys(this.operationSpec.responses || [])
|
||||
.filter((code) => {
|
||||
.filter(code => {
|
||||
if (code === 'default') {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -245,7 +250,7 @@ export class OperationModel implements IMenuItem {
|
|||
|
||||
return isStatusCode(code);
|
||||
}) // filter out other props (e.g. x-props)
|
||||
.map((code) => {
|
||||
.map(code => {
|
||||
return new ResponseModel({
|
||||
parser: this.parser,
|
||||
code,
|
||||
|
|
@ -259,7 +264,7 @@ export class OperationModel implements IMenuItem {
|
|||
|
||||
@memoize
|
||||
get callbacks() {
|
||||
return Object.keys(this.operationSpec.callbacks || []).map((callbackEventName) => {
|
||||
return Object.keys(this.operationSpec.callbacks || []).map(callbackEventName => {
|
||||
return new CallbackModel(
|
||||
this.parser,
|
||||
callbackEventName,
|
||||
|
|
|
|||
|
|
@ -3,28 +3,30 @@ import { OpenAPIRequestBody, Referenced } from '../../types';
|
|||
import { OpenAPIParser } from '../OpenAPIParser';
|
||||
import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
|
||||
import { MediaContentModel } from './MediaContent';
|
||||
import { getContentWithLegacyExamples } from '../../utils';
|
||||
|
||||
type RequestBodyProps = {
|
||||
parser: OpenAPIParser;
|
||||
infoOrRef: Referenced<OpenAPIRequestBody>;
|
||||
options: RedocNormalizedOptions;
|
||||
isEvent: boolean;
|
||||
}
|
||||
};
|
||||
|
||||
export class RequestBodyModel {
|
||||
description: string;
|
||||
required: boolean;
|
||||
content?: MediaContentModel;
|
||||
|
||||
constructor(props: RequestBodyProps) {
|
||||
const { parser, infoOrRef, options, isEvent } = props;
|
||||
const isRequest = isEvent ? false : true;
|
||||
constructor({ parser, infoOrRef, options, isEvent }: RequestBodyProps) {
|
||||
const isRequest = !isEvent;
|
||||
const info = parser.deref(infoOrRef);
|
||||
this.description = info.description || '';
|
||||
this.required = !!info.required;
|
||||
parser.exitRef(infoOrRef);
|
||||
if (info.content !== undefined) {
|
||||
this.content = new MediaContentModel(parser, info.content, isRequest, options);
|
||||
|
||||
const mediaContent = getContentWithLegacyExamples(info);
|
||||
if (mediaContent !== undefined) {
|
||||
this.content = new MediaContentModel(parser, mediaContent, isRequest, options);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@ import { action, observable, makeObservable } from 'mobx';
|
|||
|
||||
import { OpenAPIResponse, Referenced } from '../../types';
|
||||
|
||||
import { getStatusCodeType } from '../../utils';
|
||||
import { getStatusCodeType, extractExtensions } from '../../utils';
|
||||
import { OpenAPIParser } from '../OpenAPIParser';
|
||||
import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
|
||||
import { FieldModel } from './Field';
|
||||
import { MediaContentModel } from './MediaContent';
|
||||
|
||||
type ResponseProps = {
|
||||
parser: OpenAPIParser,
|
||||
code: string,
|
||||
defaultAsError: boolean,
|
||||
infoOrRef: Referenced<OpenAPIResponse>,
|
||||
options: RedocNormalizedOptions,
|
||||
isEvent: boolean,
|
||||
}
|
||||
parser: OpenAPIParser;
|
||||
code: string;
|
||||
defaultAsError: boolean;
|
||||
infoOrRef: Referenced<OpenAPIResponse>;
|
||||
options: RedocNormalizedOptions;
|
||||
isEvent: boolean;
|
||||
};
|
||||
|
||||
export class ResponseModel {
|
||||
@observable
|
||||
|
|
@ -27,10 +27,16 @@ export class ResponseModel {
|
|||
description: string;
|
||||
type: string;
|
||||
headers: FieldModel[] = [];
|
||||
extensions: Record<string, any>;
|
||||
|
||||
constructor(props: ResponseProps) {
|
||||
const { parser, code, defaultAsError, infoOrRef, options, isEvent } = props;
|
||||
const isRequest = isEvent ? true : false;
|
||||
constructor({
|
||||
parser,
|
||||
code,
|
||||
defaultAsError,
|
||||
infoOrRef,
|
||||
options,
|
||||
isEvent: isRequest,
|
||||
}: ResponseProps) {
|
||||
makeObservable(this);
|
||||
|
||||
this.expanded = options.expandResponses === 'all' || options.expandResponses[code];
|
||||
|
|
@ -59,6 +65,10 @@ export class ResponseModel {
|
|||
return new FieldModel(parser, { ...header, name }, '', options);
|
||||
});
|
||||
}
|
||||
|
||||
if (options.showExtensions) {
|
||||
this.extensions = extractExtensions(info, options.showExtensions);
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
|
|
|
|||
|
|
@ -134,7 +134,10 @@ export class SchemaModel {
|
|||
this.maxItems = schema.maxItems;
|
||||
|
||||
if (!!schema.nullable || schema['x-nullable']) {
|
||||
if (Array.isArray(this.type) && !this.type.some((value) => value === null || value === 'null')) {
|
||||
if (
|
||||
Array.isArray(this.type) &&
|
||||
!this.type.some(value => value === null || value === 'null')
|
||||
) {
|
||||
this.type = [...this.type, 'null'];
|
||||
} else if (!Array.isArray(this.type) && (this.type !== null || this.type !== 'null')) {
|
||||
this.type = [this.type, 'null'];
|
||||
|
|
@ -142,7 +145,7 @@ export class SchemaModel {
|
|||
}
|
||||
|
||||
this.displayType = Array.isArray(this.type)
|
||||
? this.type.map(item => item === null ? 'null' : item).join(' or ')
|
||||
? this.type.map(item => (item === null ? 'null' : item)).join(' or ')
|
||||
: this.type;
|
||||
|
||||
if (this.isCircular) {
|
||||
|
|
@ -155,7 +158,7 @@ export class SchemaModel {
|
|||
} else if (
|
||||
isChild &&
|
||||
Array.isArray(schema.oneOf) &&
|
||||
schema.oneOf.find((s) => s.$ref === this.pointer)
|
||||
schema.oneOf.find(s => s.$ref === this.pointer)
|
||||
) {
|
||||
// we hit allOf of the schema with the parent discriminator
|
||||
delete schema.oneOf;
|
||||
|
|
@ -195,8 +198,7 @@ export class SchemaModel {
|
|||
}
|
||||
if (Array.isArray(this.type)) {
|
||||
const filteredType = this.type.filter(item => item !== 'array');
|
||||
if (filteredType.length)
|
||||
this.displayType += ` or ${filteredType.join(' or ')}`;
|
||||
if (filteredType.length) this.displayType += ` or ${filteredType.join(' or ')}`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -215,7 +217,7 @@ export class SchemaModel {
|
|||
const title =
|
||||
isNamedDefinition(variant.$ref) && !merged.title
|
||||
? JsonPointer.baseName(variant.$ref)
|
||||
: `${(merged.title || '')}${(merged.const && JSON.stringify(merged.const)) || ''}`;
|
||||
: `${merged.title || ''}${(merged.const && JSON.stringify(merged.const)) || ''}`;
|
||||
|
||||
const schema = new SchemaModel(
|
||||
parser,
|
||||
|
|
@ -243,7 +245,7 @@ export class SchemaModel {
|
|||
this.displayType = types.join(' or ');
|
||||
} else {
|
||||
this.displayType = this.oneOf
|
||||
.map((schema) => {
|
||||
.map(schema => {
|
||||
let name =
|
||||
schema.typePrefix +
|
||||
(schema.title ? `${schema.title} (${schema.displayType})` : schema.displayType);
|
||||
|
|
@ -364,7 +366,7 @@ function buildFields(
|
|||
const props = schema.properties || {};
|
||||
const additionalProps = schema.additionalProperties;
|
||||
const defaults = schema.default;
|
||||
let fields = Object.keys(props || []).map((fieldName) => {
|
||||
let fields = Object.keys(props || []).map(fieldName => {
|
||||
let field = props[fieldName];
|
||||
|
||||
if (!field) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { hydrate as hydrateComponent, render } from 'react-dom';
|
||||
import { configure } from "mobx"
|
||||
import { configure } from 'mobx';
|
||||
|
||||
import { Redoc, RedocStandalone } from './components/';
|
||||
import { AppStore, StoreState } from './services/AppStore';
|
||||
|
|
@ -8,8 +8,8 @@ import { debugTime, debugTimeEnd } from './utils/debug';
|
|||
import { querySelector } from './utils/dom';
|
||||
|
||||
configure({
|
||||
useProxies: 'ifavailable'
|
||||
})
|
||||
useProxies: 'ifavailable',
|
||||
});
|
||||
|
||||
export { Redoc, AppStore } from '.';
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const media = {
|
|||
lessThan(breakpoint, print?: boolean, extra?: string) {
|
||||
return (...args) => css`
|
||||
@media ${print ? 'print, ' : ''} screen and (max-width: ${props =>
|
||||
props.theme.breakpoints[breakpoint]})${extra || ''} {
|
||||
props.theme.breakpoints[breakpoint]}) ${extra || ''} {
|
||||
${(css as any)(...args)};
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -186,17 +186,20 @@ export interface OpenAPIRequestBody {
|
|||
description?: string;
|
||||
required?: boolean;
|
||||
content: { [mime: string]: OpenAPIMediaType };
|
||||
|
||||
'x-examples'?: { [mime: string]: { [name: string]: Referenced<OpenAPIExample> } };
|
||||
'x-example'?: { [mime: string]: any };
|
||||
}
|
||||
|
||||
export interface OpenAPIResponses {
|
||||
[code: string]: OpenAPIResponse;
|
||||
[code: string]: Referenced<OpenAPIResponse>;
|
||||
}
|
||||
|
||||
export interface OpenAPIResponse {
|
||||
description?: string;
|
||||
export interface OpenAPIResponse
|
||||
extends Pick<OpenAPIRequestBody, 'description' | 'x-examples' | 'x-example'> {
|
||||
headers?: { [name: string]: Referenced<OpenAPIHeader> };
|
||||
content?: { [mime: string]: OpenAPIMediaType };
|
||||
links?: { [name: string]: Referenced<OpenAPILink> };
|
||||
content?: { [mime: string]: OpenAPIMediaType };
|
||||
}
|
||||
|
||||
export interface OpenAPILink {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ describe('#loadAndBundleSpec', () => {
|
|||
});
|
||||
|
||||
it('should load And Bundle Spec demo/openapi-3-1.yaml', async () => {
|
||||
const spec = yaml.load(readFileSync(resolve(__dirname, '../../../demo/openapi-3-1.yaml'), 'utf-8'));
|
||||
const spec = yaml.load(
|
||||
readFileSync(resolve(__dirname, '../../../demo/openapi-3-1.yaml'), 'utf-8'),
|
||||
);
|
||||
const bundledSpec = await loadAndBundleSpec(spec);
|
||||
expect(bundledSpec).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
|||
50
src/utils/__tests__/object.test.ts
Normal file
50
src/utils/__tests__/object.test.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { objectHas, objectSet } from '../object';
|
||||
|
||||
describe('object utils', () => {
|
||||
let obj;
|
||||
|
||||
beforeEach(() => {
|
||||
obj = {
|
||||
a: {
|
||||
b: {
|
||||
c: {
|
||||
d: 'd',
|
||||
},
|
||||
c1: 'c1',
|
||||
},
|
||||
b1: 'b1',
|
||||
},
|
||||
a1: 'a1',
|
||||
};
|
||||
});
|
||||
|
||||
describe('objectHas function', () => {
|
||||
it('should check if the obj has path as string', () => {
|
||||
expect(objectHas(obj, 'a.b.c')).toBeTruthy();
|
||||
expect(objectHas(obj, 'a.b.c1')).toBeTruthy();
|
||||
expect(objectHas(obj, 'a.b.c.d')).toBeTruthy();
|
||||
expect(objectHas(obj, 'a.b.c1.d')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should check if the obj has path as array', () => {
|
||||
expect(objectHas(obj, ['a', 'b', 'c'])).toBeTruthy();
|
||||
expect(objectHas(obj, ['a', 'b', 'c1'])).toBeTruthy();
|
||||
expect(objectHas(obj, ['a', 'b', 'c', 'd'])).toBeTruthy();
|
||||
expect(objectHas(obj, ['a', 'b', 'c1', 'd'])).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('objectSet function', () => {
|
||||
it('should set value by path as string', () => {
|
||||
expect(objectHas(obj, 'a.b.c1.d')).toBeFalsy();
|
||||
objectSet(obj, 'a.b.c1', { d: 'd' });
|
||||
expect(objectHas(obj, 'a.b.c1.d')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should set value by path as array', () => {
|
||||
expect(objectHas(obj, ['a', 'b', 'c1', 'd'])).toBeFalsy();
|
||||
objectSet(obj, ['a', 'b', 'c1'], { d: 'd' });
|
||||
expect(objectHas(obj, ['a', 'b', 'c1', 'd'])).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -10,10 +10,18 @@ import {
|
|||
pluralizeType,
|
||||
serializeParameterValue,
|
||||
sortByRequired,
|
||||
humanizeNumberRange,
|
||||
getContentWithLegacyExamples,
|
||||
getDefinitionName,
|
||||
} from '../';
|
||||
|
||||
import { FieldModel, OpenAPIParser, RedocNormalizedOptions } from '../../services';
|
||||
import { OpenAPIParameter, OpenAPIParameterLocation, OpenAPIParameterStyle } from '../../types';
|
||||
import {
|
||||
OpenAPIMediaType,
|
||||
OpenAPIParameter,
|
||||
OpenAPIParameterLocation,
|
||||
OpenAPIParameterStyle,
|
||||
} from '../../types';
|
||||
import { expandDefaultServerVariables } from '../openapi';
|
||||
|
||||
describe('Utils', () => {
|
||||
|
|
@ -103,7 +111,7 @@ describe('Utils', () => {
|
|||
|
||||
it('Should return pathName if no summary, operationId, description', () => {
|
||||
const operation = {
|
||||
pathName: '/sandbox/test'
|
||||
pathName: '/sandbox/test',
|
||||
};
|
||||
expect(getOperationSummary(operation as any)).toBe('/sandbox/test');
|
||||
});
|
||||
|
|
@ -174,7 +182,7 @@ describe('Utils', () => {
|
|||
expect(isPrimitiveType(schema)).toEqual(false);
|
||||
});
|
||||
|
||||
it('should return true for array contains object and schema hasn\'t properties', () => {
|
||||
it("should return true for array contains object and schema hasn't properties", () => {
|
||||
const schema = {
|
||||
type: ['object', 'string'],
|
||||
};
|
||||
|
|
@ -231,10 +239,10 @@ describe('Utils', () => {
|
|||
const schema = {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'string'
|
||||
},
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
};
|
||||
expect(isPrimitiveType(schema)).toEqual(true);
|
||||
|
|
@ -410,12 +418,82 @@ describe('Utils', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('openapi humanizeNumberRange', () => {
|
||||
it('should return `>=` when only minimum value present or exclusiveMinimum = false', () => {
|
||||
const expected = '>= 0';
|
||||
expect(humanizeNumberRange({ minimum: 0 })).toEqual(expected);
|
||||
expect(humanizeNumberRange({ minimum: 0, exclusiveMinimum: false })).toEqual(expected);
|
||||
});
|
||||
|
||||
it('should return `>` when minimum value present and exclusiveMinimum set to true', () => {
|
||||
expect(humanizeNumberRange({ minimum: 0, exclusiveMinimum: true })).toEqual('> 0');
|
||||
});
|
||||
|
||||
it('should return `<=` when only maximum value present or exclusiveMinimum = false', () => {
|
||||
const expected = '<= 10';
|
||||
expect(humanizeNumberRange({ maximum: 10 })).toEqual(expected);
|
||||
expect(humanizeNumberRange({ maximum: 10, exclusiveMaximum: false })).toEqual(expected);
|
||||
});
|
||||
|
||||
it('should return `<` when maximum value present and exclusiveMaximum set to true', () => {
|
||||
expect(humanizeNumberRange({ maximum: 10, exclusiveMaximum: true })).toEqual('< 10');
|
||||
});
|
||||
|
||||
it('should return correct range for minimum and maximum values and with different exclusive set', () => {
|
||||
expect(humanizeNumberRange({ minimum: 0, maximum: 10 })).toEqual('[ 0 .. 10 ]');
|
||||
expect(
|
||||
humanizeNumberRange({
|
||||
minimum: 0,
|
||||
exclusiveMinimum: true,
|
||||
maximum: 10,
|
||||
exclusiveMaximum: true,
|
||||
}),
|
||||
).toEqual('( 0 .. 10 )');
|
||||
expect(
|
||||
humanizeNumberRange({
|
||||
minimum: 0,
|
||||
maximum: 10,
|
||||
exclusiveMaximum: true,
|
||||
}),
|
||||
).toEqual('[ 0 .. 10 )');
|
||||
expect(
|
||||
humanizeNumberRange({
|
||||
minimum: 0,
|
||||
exclusiveMinimum: true,
|
||||
maximum: 10,
|
||||
}),
|
||||
).toEqual('( 0 .. 10 ]');
|
||||
});
|
||||
|
||||
it('should return correct range exclusive values only', () => {
|
||||
expect(humanizeNumberRange({ exclusiveMinimum: 0 })).toEqual('> 0');
|
||||
expect(humanizeNumberRange({ exclusiveMaximum: 10 })).toEqual('< 10');
|
||||
expect(humanizeNumberRange({ exclusiveMinimum: 0, exclusiveMaximum: 10 })).toEqual(
|
||||
'( 0 .. 10 )',
|
||||
);
|
||||
});
|
||||
|
||||
it('should return correct min value', () => {
|
||||
expect(humanizeNumberRange({ minimum: 5, exclusiveMinimum: 10 })).toEqual('> 5');
|
||||
expect(humanizeNumberRange({ minimum: -5, exclusiveMinimum: -10 })).toEqual('> -10');
|
||||
});
|
||||
|
||||
it('should return correct max value', () => {
|
||||
expect(humanizeNumberRange({ maximum: 10, exclusiveMaximum: 15 })).toEqual('< 15');
|
||||
expect(humanizeNumberRange({ maximum: -10, exclusiveMaximum: -15 })).toEqual('< -10');
|
||||
});
|
||||
|
||||
it('should return undefined', () => {
|
||||
expect(humanizeNumberRange({})).toEqual(undefined);
|
||||
});
|
||||
});
|
||||
|
||||
describe('openapi humanizeConstraints', () => {
|
||||
const itemConstraintSchema = (
|
||||
min?: number,
|
||||
max?: number,
|
||||
multipleOf?: number,
|
||||
uniqueItems?: boolean
|
||||
uniqueItems?: boolean,
|
||||
) => ({ type: 'array', minItems: min, maxItems: max, multipleOf, uniqueItems });
|
||||
|
||||
it('should not have a humanized constraint without schema constraints', () => {
|
||||
|
|
@ -455,9 +533,9 @@ describe('Utils', () => {
|
|||
});
|
||||
|
||||
it('should have a humanized constraint when uniqueItems is set', () => {
|
||||
expect(humanizeConstraints(itemConstraintSchema(undefined, undefined, undefined, true))).toContain(
|
||||
'unique',
|
||||
);
|
||||
expect(
|
||||
humanizeConstraints(itemConstraintSchema(undefined, undefined, undefined, true)),
|
||||
).toContain('unique');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -1090,4 +1168,116 @@ describe('Utils', () => {
|
|||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('OpenAPI getContentWithLegacyExamples', () => {
|
||||
it('should return undefined if no x-examples/x-example and no content', () => {
|
||||
expect(getContentWithLegacyExamples({})).toBeUndefined();
|
||||
});
|
||||
|
||||
it('should return unmodified object if no x-examples or x-example', () => {
|
||||
const info = {
|
||||
content: {
|
||||
'application/json': {},
|
||||
},
|
||||
};
|
||||
|
||||
const content = getContentWithLegacyExamples(info);
|
||||
expect(content).toStrictEqual(info.content);
|
||||
});
|
||||
|
||||
it('should create a new content object if no content and x-examples', () => {
|
||||
const info = {
|
||||
'x-examples': {
|
||||
'application/json': {
|
||||
name: {
|
||||
value: 'test',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const content = getContentWithLegacyExamples(info);
|
||||
expect(content).toEqual({
|
||||
'application/json': {
|
||||
examples: {
|
||||
name: {
|
||||
value: 'test',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should create a new content object if no content and x-example', () => {
|
||||
const info = {
|
||||
'x-example': {
|
||||
'application/json': 'test',
|
||||
},
|
||||
};
|
||||
|
||||
const content = getContentWithLegacyExamples(info);
|
||||
expect(content).toEqual({
|
||||
'application/json': { example: 'test' },
|
||||
});
|
||||
});
|
||||
|
||||
it('should return copy of content with injected x-example', () => {
|
||||
const info = {
|
||||
'x-example': {
|
||||
'application/json': 'test',
|
||||
},
|
||||
content: {
|
||||
'application/json': {
|
||||
schema: { type: 'string' },
|
||||
},
|
||||
'text/plain': { schema: { type: 'string' } },
|
||||
},
|
||||
};
|
||||
|
||||
const content = getContentWithLegacyExamples(info) as { [mime: string]: OpenAPIMediaType };
|
||||
expect(content).toEqual({
|
||||
'application/json': { schema: { type: 'string' }, example: 'test' },
|
||||
'text/plain': { schema: { type: 'string' } },
|
||||
});
|
||||
expect(content).not.toStrictEqual(info.content);
|
||||
expect(content['application/json']).not.toStrictEqual(info.content['application/json']);
|
||||
expect(content['text/plain']).toStrictEqual(info.content['text/plain']);
|
||||
});
|
||||
|
||||
it('should prefer x-examples over x-example', () => {
|
||||
const info = {
|
||||
'x-example': {
|
||||
'application/json': 'test',
|
||||
},
|
||||
'x-examples': {
|
||||
'application/json': { name: { value: 'test' } },
|
||||
},
|
||||
content: {
|
||||
'application/json': {
|
||||
schema: { type: 'string' },
|
||||
},
|
||||
'text/plain': { schema: { type: 'string' } },
|
||||
},
|
||||
};
|
||||
|
||||
const content = getContentWithLegacyExamples(info) as { [mime: string]: OpenAPIMediaType };
|
||||
expect(content).toEqual({
|
||||
'application/json': { schema: { type: 'string' }, examples: { name: { value: 'test' } } },
|
||||
'text/plain': { schema: { type: 'string' } },
|
||||
});
|
||||
expect(content).not.toStrictEqual(info.content);
|
||||
expect(content['application/json']).not.toStrictEqual(info.content['application/json']);
|
||||
expect(content['text/plain']).toStrictEqual(info.content['text/plain']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getDefinitionName', () => {
|
||||
test('should return the name if pointer match regex', () => {
|
||||
expect(getDefinitionName('#/components/schemas/Call')).toEqual('Call');
|
||||
});
|
||||
test("should return the `undefined` if pointer not match regex or it's absent", () => {
|
||||
expect(getDefinitionName('#/test/path/Call')).toBeUndefined();
|
||||
expect(getDefinitionName()).toBeUndefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ function throttle(func, wait) {
|
|||
context = args = null;
|
||||
}
|
||||
};
|
||||
return function() {
|
||||
return function () {
|
||||
const now = new Date().getTime();
|
||||
const remaining = wait - (now - previous);
|
||||
context = this;
|
||||
|
|
|
|||
|
|
@ -24,52 +24,54 @@ export function html2Str(html: string): string {
|
|||
.join(' ');
|
||||
}
|
||||
|
||||
// scrollIntoViewIfNeeded polyfill
|
||||
// Alternate scrollIntoViewIfNeeded implementation.
|
||||
// Used in all cases, since it seems Chrome's implementation is buggy
|
||||
// when "Experimental Web Platform Features" is enabled (at least of version 96).
|
||||
// See #1714, #1742
|
||||
|
||||
if (typeof Element !== 'undefined' && !(Element as any).prototype.scrollIntoViewIfNeeded) {
|
||||
(Element as any).prototype.scrollIntoViewIfNeeded = function(centerIfNeeded) {
|
||||
centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
|
||||
export function scrollIntoViewIfNeeded(el: HTMLElement, centerIfNeeded = true) {
|
||||
const parent = el.parentNode as HTMLElement | null;
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
const parentComputedStyle = window.getComputedStyle(parent, undefined);
|
||||
const parentBorderTopWidth = parseInt(
|
||||
parentComputedStyle.getPropertyValue('border-top-width'),
|
||||
10,
|
||||
);
|
||||
const parentBorderLeftWidth = parseInt(
|
||||
parentComputedStyle.getPropertyValue('border-left-width'),
|
||||
10,
|
||||
);
|
||||
const overTop = el.offsetTop - parent.offsetTop < parent.scrollTop;
|
||||
const overBottom =
|
||||
el.offsetTop - parent.offsetTop + el.clientHeight - parentBorderTopWidth >
|
||||
parent.scrollTop + parent.clientHeight;
|
||||
const overLeft = el.offsetLeft - parent.offsetLeft < parent.scrollLeft;
|
||||
const overRight =
|
||||
el.offsetLeft - parent.offsetLeft + el.clientWidth - parentBorderLeftWidth >
|
||||
parent.scrollLeft + parent.clientWidth;
|
||||
const alignWithTop = overTop && !overBottom;
|
||||
|
||||
const parent = this.parentNode;
|
||||
const parentComputedStyle = window.getComputedStyle(parent, undefined);
|
||||
const parentBorderTopWidth = parseInt(
|
||||
parentComputedStyle.getPropertyValue('border-top-width'),
|
||||
10,
|
||||
);
|
||||
const parentBorderLeftWidth = parseInt(
|
||||
parentComputedStyle.getPropertyValue('border-left-width'),
|
||||
10,
|
||||
);
|
||||
const overTop = this.offsetTop - parent.offsetTop < parent.scrollTop;
|
||||
const overBottom =
|
||||
this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth >
|
||||
parent.scrollTop + parent.clientHeight;
|
||||
const overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft;
|
||||
const overRight =
|
||||
this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth >
|
||||
parent.scrollLeft + parent.clientWidth;
|
||||
const alignWithTop = overTop && !overBottom;
|
||||
if ((overTop || overBottom) && centerIfNeeded) {
|
||||
parent.scrollTop =
|
||||
el.offsetTop -
|
||||
parent.offsetTop -
|
||||
parent.clientHeight / 2 -
|
||||
parentBorderTopWidth +
|
||||
el.clientHeight / 2;
|
||||
}
|
||||
|
||||
if ((overTop || overBottom) && centerIfNeeded) {
|
||||
parent.scrollTop =
|
||||
this.offsetTop -
|
||||
parent.offsetTop -
|
||||
parent.clientHeight / 2 -
|
||||
parentBorderTopWidth +
|
||||
this.clientHeight / 2;
|
||||
}
|
||||
if ((overLeft || overRight) && centerIfNeeded) {
|
||||
parent.scrollLeft =
|
||||
el.offsetLeft -
|
||||
parent.offsetLeft -
|
||||
parent.clientWidth / 2 -
|
||||
parentBorderLeftWidth +
|
||||
el.clientWidth / 2;
|
||||
}
|
||||
|
||||
if ((overLeft || overRight) && centerIfNeeded) {
|
||||
parent.scrollLeft =
|
||||
this.offsetLeft -
|
||||
parent.offsetLeft -
|
||||
parent.clientWidth / 2 -
|
||||
parentBorderLeftWidth +
|
||||
this.clientWidth / 2;
|
||||
}
|
||||
|
||||
if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
|
||||
this.scrollIntoView(alignWithTop);
|
||||
}
|
||||
};
|
||||
if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
|
||||
el.scrollIntoView(alignWithTop);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export function flattenByProp<T extends object, P extends keyof T>(
|
|||
for (const item of items) {
|
||||
res.push(item);
|
||||
if (item[prop]) {
|
||||
iterate((item[prop] as any) as T[]);
|
||||
iterate(item[prop] as any as T[]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,3 +8,4 @@ export * from './dom';
|
|||
export * from './decorators';
|
||||
export * from './debug';
|
||||
export * from './memoize';
|
||||
export * from './sort';
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ export async function loadAndBundleSpec(specUrlOrObject: object | string): Promi
|
|||
const config = new Config({});
|
||||
const bundleOpts = {
|
||||
config,
|
||||
base: IS_BROWSER ? window.location.href : process.cwd()
|
||||
}
|
||||
base: IS_BROWSER ? window.location.href : process.cwd(),
|
||||
};
|
||||
|
||||
if (IS_BROWSER) {
|
||||
config.resolve.http.customFetch = global.fetch;
|
||||
|
|
@ -24,13 +24,15 @@ export async function loadAndBundleSpec(specUrlOrObject: object | string): Promi
|
|||
if (typeof specUrlOrObject === 'object' && specUrlOrObject !== null) {
|
||||
bundleOpts['doc'] = {
|
||||
source: { absoluteRef: '' } as Source,
|
||||
parsed: specUrlOrObject
|
||||
} as Document
|
||||
parsed: specUrlOrObject,
|
||||
} as Document;
|
||||
} else {
|
||||
bundleOpts['ref'] = specUrlOrObject;
|
||||
}
|
||||
|
||||
const { bundle: { parsed } } = await bundle(bundleOpts);
|
||||
const {
|
||||
bundle: { parsed },
|
||||
} = await bundle(bundleOpts);
|
||||
return parsed.swagger !== undefined ? convertSwagger2OpenAPI(parsed) : parsed;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const SENTINEL = {};
|
|||
|
||||
export function memoize<T>(target: any, name: string, descriptor: TypedPropertyDescriptor<T>) {
|
||||
if (typeof descriptor.value === 'function') {
|
||||
return (_memoizeMethod(target, name, descriptor) as any) as TypedPropertyDescriptor<T>;
|
||||
return _memoizeMethod(target, name, descriptor) as any as TypedPropertyDescriptor<T>;
|
||||
} else if (typeof descriptor.get === 'function') {
|
||||
return _memoizeGetter(target, name, descriptor) as TypedPropertyDescriptor<T>;
|
||||
} else {
|
||||
|
|
|
|||
28
src/utils/object.ts
Normal file
28
src/utils/object.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
export function objectHas(object: GenericObject, path: string | Array<string>): boolean {
|
||||
let _path = <Array<string>>path;
|
||||
|
||||
if (typeof path === 'string') {
|
||||
_path = path.split('.');
|
||||
}
|
||||
|
||||
return _path.every((key: string) => {
|
||||
if (typeof object != 'object' || object === null || !(key in object)) return false;
|
||||
object = object[key];
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
export function objectSet(object: GenericObject, path: string | Array<string>, value: any): void {
|
||||
let _path = <Array<string>>path;
|
||||
|
||||
if (typeof path === 'string') {
|
||||
_path = path.split('.');
|
||||
}
|
||||
const limit = _path.length - 1;
|
||||
for (let i = 0; i < limit; ++i) {
|
||||
const key = _path[i];
|
||||
object = object[key] ?? (object[key] = {});
|
||||
}
|
||||
const key = _path[limit];
|
||||
object[key] = value;
|
||||
}
|
||||
|
|
@ -9,6 +9,8 @@ import {
|
|||
OpenAPIMediaType,
|
||||
OpenAPIParameter,
|
||||
OpenAPIParameterStyle,
|
||||
OpenAPIRequestBody,
|
||||
OpenAPIResponse,
|
||||
OpenAPISchema,
|
||||
OpenAPIServer,
|
||||
Referenced,
|
||||
|
|
@ -113,7 +115,10 @@ export function detectType(schema: OpenAPISchema): string {
|
|||
return 'any';
|
||||
}
|
||||
|
||||
export function isPrimitiveType(schema: OpenAPISchema, type: string | string[] | undefined = schema.type) {
|
||||
export function isPrimitiveType(
|
||||
schema: OpenAPISchema,
|
||||
type: string | string[] | undefined = schema.type,
|
||||
) {
|
||||
if (schema.oneOf !== undefined || schema.anyOf !== undefined) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -122,9 +127,10 @@ export function isPrimitiveType(schema: OpenAPISchema, type: string | string[] |
|
|||
const isArray = Array.isArray(type);
|
||||
|
||||
if (type === 'object' || (isArray && type?.includes('object'))) {
|
||||
isPrimitive = schema.properties !== undefined
|
||||
? Object.keys(schema.properties).length === 0
|
||||
: schema.additionalProperties === undefined;
|
||||
isPrimitive =
|
||||
schema.properties !== undefined
|
||||
? Object.keys(schema.properties).length === 0
|
||||
: schema.additionalProperties === undefined;
|
||||
}
|
||||
|
||||
if (schema.items !== undefined && (type === 'array' || (isArray && type?.includes('array')))) {
|
||||
|
|
@ -362,6 +368,15 @@ export function serializeParameterValue(
|
|||
}
|
||||
}
|
||||
|
||||
export function getSerializedValue(field: FieldModel, example: any) {
|
||||
if (field.in) {
|
||||
// decode for better readability in examples: see https://github.com/Redocly/redoc/issues/1138
|
||||
return decodeURIComponent(serializeParameterValue(field, example));
|
||||
} else {
|
||||
return example;
|
||||
}
|
||||
}
|
||||
|
||||
export function langFromMime(contentType: string): string {
|
||||
if (contentType.search(/xml/i) !== -1) {
|
||||
return 'xml';
|
||||
|
|
@ -369,14 +384,15 @@ export function langFromMime(contentType: string): string {
|
|||
return 'clike';
|
||||
}
|
||||
|
||||
const DEFINITION_NAME_REGEX = /^#\/components\/(schemas|pathItems)\/([^/]+)$/;
|
||||
|
||||
export function isNamedDefinition(pointer?: string): boolean {
|
||||
return /^#\/components\/(schemas|pathItems)\/[^\/]+$/.test(pointer || '');
|
||||
return DEFINITION_NAME_REGEX.test(pointer || '');
|
||||
}
|
||||
|
||||
export function getDefinitionName(pointer?: string): string | undefined {
|
||||
if (!pointer) return undefined;
|
||||
const match = pointer.match(/^#\/components\/(schemas|pathItems)\/([^\/]+)$/);
|
||||
return match === null ? undefined : match[1]
|
||||
const [name] = pointer?.match(DEFINITION_NAME_REGEX)?.reverse() || [];
|
||||
return name;
|
||||
}
|
||||
|
||||
function humanizeMultipleOfConstraint(multipleOf: number | undefined): string | undefined {
|
||||
|
|
@ -415,6 +431,29 @@ function humanizeRangeConstraint(
|
|||
return stringRange;
|
||||
}
|
||||
|
||||
export function humanizeNumberRange(schema: OpenAPISchema): string | undefined {
|
||||
const minimum =
|
||||
typeof schema.exclusiveMinimum === 'number'
|
||||
? Math.min(schema.exclusiveMinimum, schema.minimum ?? Infinity)
|
||||
: schema.minimum;
|
||||
const maximum =
|
||||
typeof schema.exclusiveMaximum === 'number'
|
||||
? Math.max(schema.exclusiveMaximum, schema.maximum ?? -Infinity)
|
||||
: schema.maximum;
|
||||
const exclusiveMinimum = typeof schema.exclusiveMinimum === 'number' || schema.exclusiveMinimum;
|
||||
const exclusiveMaximum = typeof schema.exclusiveMaximum === 'number' || schema.exclusiveMaximum;
|
||||
|
||||
if (minimum !== undefined && maximum !== undefined) {
|
||||
return `${exclusiveMinimum ? '( ' : '[ '}${minimum} .. ${maximum}${
|
||||
exclusiveMaximum ? ' )' : ' ]'
|
||||
}`;
|
||||
} else if (maximum !== undefined) {
|
||||
return `${exclusiveMaximum ? '< ' : '<= '}${maximum}`;
|
||||
} else if (minimum !== undefined) {
|
||||
return `${exclusiveMinimum ? '> ' : '>= '}${minimum}`;
|
||||
}
|
||||
}
|
||||
|
||||
export function humanizeConstraints(schema: OpenAPISchema): string[] {
|
||||
const res: string[] = [];
|
||||
|
||||
|
|
@ -433,33 +472,7 @@ export function humanizeConstraints(schema: OpenAPISchema): string[] {
|
|||
res.push(multipleOfConstraint);
|
||||
}
|
||||
|
||||
let numberRange;
|
||||
if (schema.minimum !== undefined && schema.maximum !== undefined) {
|
||||
numberRange = schema.exclusiveMinimum ? '( ' : '[ ';
|
||||
numberRange += schema.minimum;
|
||||
numberRange += ' .. ';
|
||||
numberRange += schema.maximum;
|
||||
numberRange += schema.exclusiveMaximum ? ' )' : ' ]';
|
||||
} else if (schema.maximum !== undefined) {
|
||||
numberRange = schema.exclusiveMaximum ? '< ' : '<= ';
|
||||
numberRange += schema.maximum;
|
||||
} else if (schema.minimum !== undefined) {
|
||||
numberRange = schema.exclusiveMinimum ? '> ' : '>= ';
|
||||
numberRange += schema.minimum;
|
||||
}
|
||||
|
||||
if (typeof schema.exclusiveMinimum === 'number' || typeof schema.exclusiveMaximum === 'number') {
|
||||
let minimum = 0;
|
||||
let maximum = 0;
|
||||
if (schema.minimum) minimum = schema.minimum;
|
||||
if (typeof schema.exclusiveMinimum === 'number') minimum = minimum <= schema.exclusiveMinimum ? minimum : schema.exclusiveMinimum;
|
||||
|
||||
if (schema.maximum) maximum = schema.maximum;
|
||||
if (typeof schema.exclusiveMaximum === 'number') maximum = maximum > schema.exclusiveMaximum ? maximum : schema.exclusiveMaximum;
|
||||
|
||||
numberRange = `[${minimum} .. ${maximum}]`
|
||||
}
|
||||
|
||||
const numberRange = humanizeNumberRange(schema);
|
||||
if (numberRange !== undefined) {
|
||||
res.push(numberRange);
|
||||
}
|
||||
|
|
@ -589,10 +602,10 @@ export function setSecuritySchemePrefix(prefix: string) {
|
|||
}
|
||||
|
||||
export const shortenHTTPVerb = verb =>
|
||||
({
|
||||
delete: 'del',
|
||||
options: 'opts',
|
||||
}[verb] || verb);
|
||||
({
|
||||
delete: 'del',
|
||||
options: 'opts',
|
||||
}[verb] || verb);
|
||||
|
||||
export function isRedocExtension(key: string): boolean {
|
||||
const redocExtensions = {
|
||||
|
|
@ -637,3 +650,33 @@ export function pluralizeType(displayType: string): string {
|
|||
.map(type => type.replace(/^(string|object|number|integer|array|boolean)s?( ?.*)/, '$1s$2'))
|
||||
.join(' or ');
|
||||
}
|
||||
|
||||
export function getContentWithLegacyExamples(
|
||||
info: OpenAPIRequestBody | OpenAPIResponse,
|
||||
): { [mime: string]: OpenAPIMediaType } | undefined {
|
||||
let mediaContent = info.content;
|
||||
const xExamples = info['x-examples']; // converted from OAS2 body param
|
||||
const xExample = info['x-example']; // converted from OAS2 body param
|
||||
|
||||
if (xExamples) {
|
||||
mediaContent = { ...mediaContent };
|
||||
for (const mime of Object.keys(xExamples)) {
|
||||
const examples = xExamples[mime];
|
||||
mediaContent[mime] = {
|
||||
...mediaContent[mime],
|
||||
examples,
|
||||
};
|
||||
}
|
||||
} else if (xExample) {
|
||||
mediaContent = { ...mediaContent };
|
||||
for (const mime of Object.keys(xExample)) {
|
||||
const example = xExample[mime];
|
||||
mediaContent[mime] = {
|
||||
...mediaContent[mime],
|
||||
example,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return mediaContent;
|
||||
}
|
||||
|
|
|
|||
21
src/utils/sort.ts
Normal file
21
src/utils/sort.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* Function that returns a comparator for sorting objects by some specific key alphabetically.
|
||||
*
|
||||
* @param {String} property key of the object to sort, if starts from `-` - reverse
|
||||
*/
|
||||
export function alphabeticallyByProp<T>(property: string): (a: T, b: T) => number {
|
||||
let sortOrder = 1;
|
||||
|
||||
if (property[0] === '-') {
|
||||
sortOrder = -1;
|
||||
property = property.substr(1);
|
||||
}
|
||||
|
||||
return (a: T, b: T) => {
|
||||
if (sortOrder == -1) {
|
||||
return b[property].localeCompare(a[property]);
|
||||
} else {
|
||||
return a[property].localeCompare(b[property]);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
/* tslint:disable:no-implicit-dependencies */
|
||||
|
||||
import { has, set } from 'lodash';
|
||||
import { objectHas, objectSet } from './object';
|
||||
|
||||
function traverseComponent(root, fn) {
|
||||
if (!root) {
|
||||
|
|
@ -20,8 +18,8 @@ export function filterPropsDeep<T extends object>(component: T, paths: string[])
|
|||
traverseComponent(component, comp => {
|
||||
if (comp.props) {
|
||||
for (const path of paths) {
|
||||
if (has(comp.props, path)) {
|
||||
set(comp.props, path, '<<<filtered>>>');
|
||||
if (objectHas(comp.props, path)) {
|
||||
objectSet(comp.props, path, '<<<filtered>>>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,27 +13,12 @@
|
|||
"importHelpers": true,
|
||||
"outDir": "lib",
|
||||
"pretty": true,
|
||||
"lib": [
|
||||
"es2015",
|
||||
"es2016",
|
||||
"es2017",
|
||||
"dom",
|
||||
"WebWorker.ImportScripts"
|
||||
],
|
||||
"lib": ["es2015", "es2016", "es2017", "dom", "WebWorker.ImportScripts"],
|
||||
"jsx": "react",
|
||||
"types": [
|
||||
"webpack",
|
||||
"webpack-env",
|
||||
"jest"
|
||||
]
|
||||
"types": ["webpack", "webpack-env", "jest"]
|
||||
},
|
||||
"compileOnSave": false,
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
".tmp",
|
||||
"lib",
|
||||
"e2e/**"
|
||||
],
|
||||
"exclude": ["node_modules", ".tmp", "lib", "e2e/**"],
|
||||
"include": [
|
||||
"cli/index.ts",
|
||||
"./custom.d.ts",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
||||
import * as webpack from 'webpack';
|
||||
import * as path from 'path';
|
||||
import { getBabelLoader, webpackIgnore } from './config/webpack-utils';
|
||||
import { webpackIgnore } from './config/webpack-utils';
|
||||
|
||||
const nodeExternals = require('webpack-node-externals')({
|
||||
// bundle in modules that need transpiling + non-js (e.g. css)
|
||||
|
|
@ -32,10 +32,14 @@ const BANNER = `ReDoc - OpenAPI/Swagger-generated API Reference Documentation
|
|||
Version: ${VERSION}
|
||||
Repo: https://github.com/Redocly/redoc`;
|
||||
|
||||
export default (env: { standalone?: boolean } = {}) => ({
|
||||
export default (env: { standalone?: boolean; browser?: boolean } = {}) => ({
|
||||
entry: env.standalone ? ['./src/polyfills.ts', './src/standalone.tsx'] : './src/index.ts',
|
||||
output: {
|
||||
filename: env.standalone ? 'redoc.standalone.js' : 'redoc.lib.js',
|
||||
filename: env.standalone
|
||||
? 'redoc.standalone.js'
|
||||
: env.browser
|
||||
? 'redoc.browser.lib.js'
|
||||
: 'redoc.lib.js',
|
||||
path: path.join(__dirname, '/bundles'),
|
||||
library: 'Redoc',
|
||||
libraryTarget: 'umd',
|
||||
|
|
@ -46,14 +50,15 @@ export default (env: { standalone?: boolean } = {}) => ({
|
|||
extensions: ['.ts', '.tsx', '.js', '.mjs', '.json'],
|
||||
fallback: {
|
||||
path: require.resolve('path-browserify'),
|
||||
buffer: require.resolve('buffer'),
|
||||
http: false,
|
||||
fs: false,
|
||||
os: false,
|
||||
}
|
||||
fs: path.resolve(__dirname, 'src/empty.js'),
|
||||
os: path.resolve(__dirname, 'src/empty.js'),
|
||||
tty: path.resolve(__dirname, 'src/empty.js'),
|
||||
},
|
||||
},
|
||||
performance: false,
|
||||
// target: 'node',
|
||||
externalsPresets: env.standalone ? {} : { node: true },
|
||||
externalsPresets: env.standalone || env.browser ? {} : { node: true },
|
||||
externals: env.standalone
|
||||
? {
|
||||
esprima: 'null',
|
||||
|
|
@ -74,32 +79,27 @@ export default (env: { standalone?: boolean } = {}) => ({
|
|||
rules: [
|
||||
{
|
||||
test: /\.(tsx?|[cm]?js)$/,
|
||||
use: [getBabelLoader({useBuiltIns: !!env.standalone})],
|
||||
exclude: {
|
||||
and: [/node_modules/],
|
||||
not: {
|
||||
or: [
|
||||
/swagger2openapi/,
|
||||
/reftools/,
|
||||
/openapi-sampler/,
|
||||
/mobx/,
|
||||
/oas-resolver/,
|
||||
/oas-kit-common/,
|
||||
/oas-schema-walker/,
|
||||
/\@redocly\/openapi-core/,
|
||||
/colorette/,
|
||||
],
|
||||
},
|
||||
loader: 'esbuild-loader',
|
||||
options: {
|
||||
loader: 'tsx',
|
||||
target: 'es2015',
|
||||
tsconfigRaw: require('./tsconfig.json'),
|
||||
},
|
||||
exclude: [/node_modules/],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: false,
|
||||
use: [
|
||||
'isomorphic-style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'esbuild-loader',
|
||||
options: {
|
||||
loader: 'css',
|
||||
minify: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -113,6 +113,9 @@ export default (env: { standalone?: boolean } = {}) => ({
|
|||
}),
|
||||
new ForkTsCheckerWebpackPlugin({ logger: { infrastructure: 'silent', issues: 'console' } }),
|
||||
new webpack.BannerPlugin(BANNER),
|
||||
new webpack.ProvidePlugin({
|
||||
Buffer: ['buffer', 'Buffer'],
|
||||
}),
|
||||
webpackIgnore(/js-yaml\/dumper\.js$/),
|
||||
env.standalone ? webpackIgnore(/^\.\/SearchWorker\.worker$/) : undefined,
|
||||
].filter(Boolean),
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user