Merge tag 'v2.0.0-rc.63' into sections-at-the-end

This commit is contained in:
Roberto Fernández 2022-02-04 12:53:55 +01:00
commit 7d58d3e9fd
54 changed files with 5138 additions and 1730 deletions

View File

@ -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': [

View File

@ -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

View File

@ -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
View File

@ -37,3 +37,4 @@ stats.json
yarn.lock
.idea
.vscode
.eslintcache

View File

@ -1,3 +1,47 @@
# [2.0.0-rc.63](https://github.com/Redocly/redoc/compare/v2.0.0-rc.61...v2.0.0-rc.63) (2022-01-27)
### Bug Fixes
* scroll in sidebar ([b5b0d61](https://github.com/Redocly/redoc/commit/b5b0d61b3568ac2a8aaceafa96ffa6d2f86ed323))
# [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)

View File

@ -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));

626
cli/npm-shrinkwrap.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "redoc-cli",
"version": "0.13.1",
"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.58",
"redoc": "2.0.0-rc.62",
"styled-components": "^5.3.0",
"yargs": "^17.0.1"
},

View File

@ -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
View File

@ -23,3 +23,5 @@ declare var reactHotLoaderGlobal: any;
interface Element {
scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
}
type GenericObject = Record<string, any>;

View 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;

View File

@ -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 }}
/>

View File

@ -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(
@ -37,6 +37,7 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
port: 9090,
hot: true,
historyApiFallback: true,
open: true,
},
stats: {
children: true,
@ -45,6 +46,7 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
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: [
'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/),

View File

@ -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:');
});
});

View File

@ -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');
})
});
});

2423
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "redoc",
"version": "2.0.0-rc.59",
"version": "2.0.0-rc.63",
"description": "ReDoc",
"repository": {
"type": "git",
@ -49,30 +49,18 @@
"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",
"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",
"license-check": "license-checker --production --onlyAllow 'MIT;ISC;Apache-2.0;BSD;BSD-2-Clause;BSD-3-Clause;CC-BY-4.0' --summary",
"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",
@ -82,10 +70,9 @@
"@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/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",
@ -100,8 +87,6 @@
"@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",
"conventional-changelog-cli": "^2.0.34",
"copy-webpack-plugin": "^9.0.0",
@ -111,16 +96,18 @@
"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.2",
"pretty-quick": "^3.0.0",
@ -131,10 +118,9 @@
"rimraf": "^3.0.2",
"shelljs": "^0.8.4",
"size-limit": "^7.0.4",
"style-loader": "^2.0.0",
"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",
@ -153,7 +139,6 @@
"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",
@ -163,9 +148,9 @@
"json-pointer": "^0.6.1",
"lunr": "^2.3.9",
"mark.js": "^8.11.1",
"marked": "^0.7.0",
"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",
@ -174,6 +159,7 @@
"react-tabs": "^3.2.2",
"slugify": "~1.4.7",
"stickyfill": "^1.1.1",
"style-loader": "^3.3.1",
"swagger2openapi": "^7.0.6",
"url-template": "^2.0.8"
},

View File

@ -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;

View File

@ -43,7 +43,7 @@ export function Link(props: { to: string; className?: string; children?: any })
if (!store) return;
navigate(store.menu.history, event, props.to);
},
[store],
[store, props.to],
);
if (!store) return null;

View File

@ -1,10 +1,10 @@
import * as React from 'react';
import PerfectScrollbarType, * as PerfectScrollbarNamespace from 'perfect-scrollbar';
import psStyles from 'perfect-scrollbar/css/perfect-scrollbar.css';
import { OptionsContext } from '../components/OptionsProvider';
import styled, { createGlobalStyle } from '../styled-components';
import { IS_BROWSER } from '../utils';
/*
* perfect scrollbar umd bundle uses exports assignment while module uses default export
@ -14,7 +14,14 @@ import styled, { createGlobalStyle } from '../styled-components';
const PerfectScrollbarConstructor =
PerfectScrollbarNamespace.default || (PerfectScrollbarNamespace as any as PerfectScrollbarType);
const PSStyling = createGlobalStyle`${psStyles && psStyles.toString()}`;
let psStyles = '';
if (IS_BROWSER) {
psStyles = require('perfect-scrollbar/css/perfect-scrollbar.css');
psStyles = (typeof psStyles.toString === 'function' && psStyles.toString()) || '';
psStyles = psStyles === '[object Object]' ? '' : psStyles;
}
const PSStyling = createGlobalStyle`${psStyles}`;
const StyledScrollWrapper = styled.div`
position: relative;
@ -59,7 +66,7 @@ export class PerfectScrollbar extends React.Component<PerfectScrollbarProps> {
return (
<>
<PSStyling />
{psStyles && <PSStyling />}
<StyledScrollWrapper className={`scrollbar-container ${className}`} ref={this.handleRef}>
{children}
</StyledScrollWrapper>

View 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>{` &lt;${schema.displayFormat}&gt; `}</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;
`;

View File

@ -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,7 +55,7 @@ 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) => {

View 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;
`;

View File

@ -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>

View File

@ -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 ? String(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);

View File

@ -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,149 +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>
{' '}
&lt;
{schema.displayFormat}
&gt;{' '}
</TypeFormat>
)}
{schema.contentEncoding && (
<TypeFormat>
{' '}
&lt;
{schema.contentEncoding}
&gt;{' '}
</TypeFormat>
)}
{schema.contentMediaType && (
<TypeFormat>
{' '}
&lt;
{schema.contentMediaType}
&gt;{' '}
</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>
{' '}
&lt;
{schema.displayFormat}
&gt;{' '}
</TypeFormat>
)}
{schema.contentEncoding && (
<TypeFormat>
{' '}
&lt;
{schema.contentEncoding}
&gt;{' '}
</TypeFormat>
)}
{schema.contentMediaType && (
<TypeFormat>
{' '}
&lt;
{schema.contentMediaType}
&gt;{' '}
</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);

View 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>
)}
</>
);
}

View File

@ -79,7 +79,12 @@ export function BodyContent(props: {
return (
<>
{description !== undefined && <Markdown source={description} />}
<Schema skipReadOnly={isRequestType} key="schema" schema={schema} />
<Schema
skipReadOnly={isRequestType}
skipWriteOnly={!isRequestType}
key="schema"
schema={schema}
/>
</>
);
}}

View File

@ -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>
);
});

View File

@ -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 }) => {

View File

@ -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);

View File

@ -11,14 +11,12 @@ 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};
&: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.empty &&

View File

@ -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>
);
}
}
},
);

View File

@ -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,16 +65,16 @@ 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

View File

@ -56,6 +56,7 @@ export function StoreBuilder(props: StoreBuilderProps) {
}
throw e;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [resolvedSpec, specUrl, options]);
React.useEffect(() => {

View File

@ -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');

View File

@ -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);
@ -129,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) {

View File

@ -12,6 +12,7 @@ import {
SECURITY_DEFINITIONS_COMPONENT_NAME,
setSecuritySchemePrefix,
JsonPointer,
alphabeticallyByProp,
} from '../utils';
import { MarkdownRenderer } from './MarkdownRenderer';
import { GroupModel, OperationModel } from './models';
@ -147,9 +148,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,
@ -200,14 +203,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,
@ -226,6 +236,11 @@ export class MenuBuilder {
operation.depth = depth;
res.push(operation);
}
if (options.sortOperationsAlphabetically) {
res.sort(alphabeticallyByProp<OperationModel>('name'));
}
return res;
}

View File

@ -18,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;
@ -35,6 +37,8 @@ export interface RedocRawOptions {
simpleOneOfTypeLabel?: boolean | string;
payloadSampleIdx?: number;
expandSingleSchemaField?: boolean | string;
schemaExpansionLevel?: number | string | 'all';
showObjectSchemaExamples?: boolean | string;
sectionsAtTheEnd?: string | string[];
unstable_ignoreMimeParameters?: boolean;
@ -72,6 +76,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') {
@ -212,6 +222,8 @@ export class RedocNormalizedOptions {
requiredPropsFirst: boolean;
sortPropsAlphabetically: boolean;
sortEnumValuesAlphabetically: boolean;
sortOperationsAlphabetically: boolean;
sortTagsAlphabetically: boolean;
noAutoAuth: boolean;
nativeScrollbars: boolean;
pathInMiddlePanel: boolean;
@ -229,6 +241,8 @@ export class RedocNormalizedOptions {
simpleOneOfTypeLabel: boolean;
payloadSampleIdx: number;
expandSingleSchemaField: boolean;
schemaExpansionLevel: number;
showObjectSchemaExamples: boolean;
sectionsAtTheEnd: string[];
/* tslint:disable-next-line */
@ -272,6 +286,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);
@ -291,6 +307,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.sectionsAtTheEnd = RedocNormalizedOptions.normalizeSectionsAtTheEnd(raw.sectionsAtTheEnd);
this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);

View File

@ -39,5 +39,19 @@ describe('Models', () => {
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 });
});
});
});

View File

@ -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;
}
}

View File

@ -17,8 +17,7 @@ export class RequestBodyModel {
required: boolean;
content?: MediaContentModel;
constructor(props: RequestBodyProps) {
const { parser, infoOrRef, options, isEvent } = props;
constructor({ parser, infoOrRef, options, isEvent }: RequestBodyProps) {
const isRequest = !isEvent;
const info = parser.deref(infoOrRef);
this.description = info.description || '';

View File

@ -2,7 +2,7 @@ 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';
@ -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

View File

@ -192,7 +192,7 @@ export interface OpenAPIRequestBody {
}
export interface OpenAPIResponses {
[code: string]: OpenAPIResponse;
[code: string]: Referenced<OpenAPIResponse>;
}
export interface OpenAPIResponse

View 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();
});
});
});

View File

@ -12,6 +12,7 @@ import {
sortByRequired,
humanizeNumberRange,
getContentWithLegacyExamples,
getDefinitionName,
} from '../';
import { FieldModel, OpenAPIParser, RedocNormalizedOptions } from '../../services';
@ -1269,4 +1270,14 @@ describe('Utils', () => {
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();
});
});
});

View File

@ -8,3 +8,4 @@ export * from './dom';
export * from './decorators';
export * from './debug';
export * from './memoize';
export * from './sort';

28
src/utils/object.ts Normal file
View 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;
}

View File

@ -368,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';
@ -375,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 {

21
src/utils/sort.ts Normal file
View 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]);
}
};
}

View File

@ -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>>>');
}
}
}

View File

@ -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",

View File

@ -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, browser?: 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' : env.browser ? 'redoc.browser.lib.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,11 +50,12 @@ export default (env: { standalone?: boolean, browser?: boolean } = {}) => ({
extensions: ['.ts', '.tsx', '.js', '.mjs', '.json'],
fallback: {
path: require.resolve('path-browserify'),
buffer: require.resolve('buffer'),
http: false,
fs: path.resolve(__dirname, 'src/empty.js'),
os: path.resolve(__dirname, 'src/empty.js'),
tty: path.resolve(__dirname, 'src/empty.js'),
}
},
},
performance: false,
externalsPresets: env.standalone || env.browser ? {} : { node: true },
@ -74,32 +79,27 @@ export default (env: { standalone?: boolean, browser?: 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: [
'style-loader',
'css-loader',
{
loader: 'esbuild-loader',
options: {
loader: 'css',
minify: true,
},
},
},
],
},
],
},
@ -113,6 +113,9 @@ export default (env: { standalone?: boolean, browser?: 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),