diff --git a/demo/playground/hmr-playground.tsx b/demo/playground/hmr-playground.tsx index 25384bfc..40398cde 100644 --- a/demo/playground/hmr-playground.tsx +++ b/demo/playground/hmr-playground.tsx @@ -8,7 +8,7 @@ import { AppStore } from '../../src/services/AppStore'; import { RedocRawOptions } from '../../src/services/RedocNormalizedOptions'; import { loadAndBundleSpec } from '../../src/utils/loadAndBundleSpec'; -const Ajv = require('ajv'); +// const Ajv = require('ajv'); const renderRoot = (props: RedocProps) => render( @@ -22,9 +22,10 @@ const big = window.location.search.indexOf('big') > -1; const swagger = window.location.search.indexOf('swagger') > -1; // compatibility mode ? let specUrl = swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml'; -//specUrl = 'intent.json'; -//specUrl = 'swagger.yaml'; -specUrl = 'petstore.json'; +specUrl = 'intent.json'; + +// specUrl = 'swagger.yaml'; +// specUrl = 'petstore.json'; let store; const options: RedocRawOptions = { nativeScrollbars: false }; diff --git a/package.json b/package.json index 7bf96ebe..87b88e87 100644 --- a/package.json +++ b/package.json @@ -67,8 +67,8 @@ "@types/marked": "^0.3.0", "@types/prismjs": "^1.6.4", "@types/promise": "^7.1.30", - "@types/qs": "^6.5.1", "@types/prop-types": "^15.5.3", + "@types/qs": "^6.5.1", "@types/react": "^16.0.41", "@types/react-dom": "^16.0.0", "@types/react-hot-loader": "^4.1.0", @@ -77,12 +77,9 @@ "@types/webpack-env": "^1.13.0", "@types/whatwg-fetch": "^0.0.33", "@types/yargs": "^11.0.0", - "ajv": "^6.4.0", - "ajv-errors": "^1.0.0", "babel-loader": "8.0.0-beta.2", "babel-plugin-styled-components": "^1.5.1", "beautify-benchmark": "^0.2.4", - "brace": "^0.11.1", "bundlesize": "^0.17.0", "conventional-changelog-cli": "^2.0.0", "copy-webpack-plugin": "^4.5.1", @@ -96,7 +93,6 @@ "enzyme-to-json": "^3.3.4", "fork-ts-checker-webpack-plugin": "^0.4.1", "html-webpack-plugin": "^3.1.0", - "react-ace": "^6.0.0", "jest": "^23.0.1", "license-checker": "^20.0.0", "lodash": "^4.17.10", @@ -130,6 +126,9 @@ "dependencies": { "@types/chai": "4.1.3", "@types/tapable": "1.0.2", + "ajv": "^6.4.0", + "ajv-errors": "^1.0.0", + "brace": "^0.11.1", "classnames": "^2.2.5", "decko": "^1.2.0", "dompurify": "^1.0.2", @@ -146,6 +145,8 @@ "polished": "^1.9.2", "prismjs": "^1.12.2", "prop-types": "^15.6.0", + "qs": "^6.5.2", + "react-ace": "^6.0.0", "react-dropdown": "^1.3.0", "react-hot-loader": "^4.0.0", "react-tabs": "^2.0.0", @@ -161,7 +162,7 @@ }, "bundlesize": [{ "path": "./bundles/redoc.standalone.js", - "maxSize": "300 kB" + "maxSize": "750 kB" }], "jest": { "transform": { diff --git a/src/common-elements/buttons.ts b/src/common-elements/buttons.ts index 1fdf7bed..c6a7650a 100644 --- a/src/common-elements/buttons.ts +++ b/src/common-elements/buttons.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import styled, { ResolvedThemeInterface, StyledComponentClass } from '../styled-components'; - export const Button = styled.button` background: #248fb2; border-radius: 0px; @@ -13,4 +12,4 @@ export const Button = styled.button` export const SendButton = Button.extend` background: #B0045E; -`; \ No newline at end of file +`; diff --git a/src/common-elements/input.tsx b/src/common-elements/input.tsx index 0633d7c9..088307e1 100644 --- a/src/common-elements/input.tsx +++ b/src/common-elements/input.tsx @@ -6,4 +6,4 @@ export const TextField = styled.input` margin: 0.5em; border: 1px solid rgba(38,50,56,0.5); border-radius: 3px; -`; \ No newline at end of file +`; diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts index e73b459e..02783d2a 100644 --- a/src/common-elements/panels.ts +++ b/src/common-elements/panels.ts @@ -5,7 +5,7 @@ export const MiddlePanel = styled.div` width: calc(100% - ${props => props.theme.rightPanel.width}); padding: ${props => props.theme.spacingUnit * 2}px; - ${media.lessThan('medium') ` + ${media.lessThan('medium')` width: 100%; `}; `; @@ -16,7 +16,7 @@ export const RightPanel = styled.div` background-color: ${props => props.theme.rightPanel.backgroundColor}; padding: ${props => props.theme.spacingUnit * 2}px; - ${media.lessThan('medium') ` + ${media.lessThan('medium')` width: 100%; `}; `; @@ -26,7 +26,7 @@ export const DarkRightPanel = RightPanel.extend` `; export const EmptyDarkRightPanel = DarkRightPanel.extend` - ${media.lessThan('medium') ` + ${media.lessThan('medium')` padding: 0 `}; `; @@ -35,7 +35,7 @@ export const Row = styled.div` display: flex; width: 100%; - ${media.lessThan('medium') ` + ${media.lessThan('medium')` flex-direction: column; `}; `; @@ -49,4 +49,3 @@ export const FlexLayout = styled.div` export const ConsoleActionsRow = FlexLayout.extend` padding: 5px 0px; `; - diff --git a/src/common-elements/toggle.tsx b/src/common-elements/toggle.tsx index cd09b4a4..4332f5a1 100644 --- a/src/common-elements/toggle.tsx +++ b/src/common-elements/toggle.tsx @@ -8,4 +8,4 @@ export const Toggle = styled.input` background: papayawhip; border: none; border-radius: 3px; -`; \ No newline at end of file +`; diff --git a/src/components/Console/ConsoleEditor.tsx b/src/components/Console/ConsoleEditor.tsx index e12ded51..fb801eb2 100644 --- a/src/components/Console/ConsoleEditor.tsx +++ b/src/components/Console/ConsoleEditor.tsx @@ -3,12 +3,11 @@ import * as React from 'react'; import AceEditor from 'react-ace'; -import 'brace/mode/json'; import 'brace/mode/curly'; +import 'brace/mode/json'; import 'brace/theme/github'; import 'brace/theme/monokai'; - import { MediaTypeModel } from '../../services/models'; import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch'; @@ -18,19 +17,19 @@ import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel'; import { InvertedSimpleDropdown, MimeLabel } from '../PayloadSamples/styled.elements'; export interface ConsoleEditorProps { - mediaTypes: MediaTypeModel[] + mediaTypes: MediaTypeModel[]; } @observer export class ConsoleEditor extends React.Component { - public editor: any; + editor: any; /* get aceEditor(): AceEditor { return this._aceEditor; } - + set aceEditor(aceEditor: AceEditor) { if (aceEditor) { this.aceEditor = this.aceEditor @@ -48,7 +47,7 @@ export class ConsoleEditor extends React.Component { return null; } let sample = {}; - for (let mediaType of mediaTypes) { + for (const mediaType of mediaTypes) { if (mediaType.name.indexOf('json') > -1) { if (mediaType.examples) { sample = mediaType.examples && mediaType.examples.default && mediaType.examples.default.value; @@ -57,7 +56,6 @@ export class ConsoleEditor extends React.Component { } } - /* let body = {}; if(mimeContent.mediaTypes && mimeContent.mediaTypes.length>0){ diff --git a/src/components/Console/ConsoleViewer.tsx b/src/components/Console/ConsoleViewer.tsx index 771b598d..161d3a4d 100644 --- a/src/components/Console/ConsoleViewer.tsx +++ b/src/components/Console/ConsoleViewer.tsx @@ -1,15 +1,15 @@ import { observer } from 'mobx-react'; import * as React from 'react'; -import { OperationModel } from '../../services/models'; -import { PayloadSamples } from '../PayloadSamples/PayloadSamples'; -import { SourceCodeWithCopy } from '../SourceCode/SourceCode'; import { SendButton } from '../../common-elements/buttons'; import { ConsoleActionsRow } from '../../common-elements/panels'; +import { OperationModel } from '../../services/models'; +import { OpenAPISchema } from '../../types'; +import { PayloadSamples } from '../PayloadSamples/PayloadSamples'; +import { SourceCodeWithCopy } from '../SourceCode/SourceCode'; import { ConsoleEditor } from './ConsoleEditor'; const qs = require('qs'); - export interface ConsoleViewerProps { operation: OperationModel; } @@ -18,39 +18,44 @@ export interface ConsoleViewerState { result: any; } +export interface Schema { + _$ref?: any; + rawSchema?: OpenAPISchema; +} + @observer export class ConsoleViewer extends React.Component { - private consoleEditor: ConsoleEditor; operation: OperationModel; visited = new Set(); + private consoleEditor: ConsoleEditor; constructor(props) { super(props); this.state = { - result: null + result: null, }; } onClickSend = async () => { const ace = this.consoleEditor && this.consoleEditor.editor; - //const value = ace && ace.editor && + // const value = ace && ace.editor && const schema = this.getSchema(); const { operation } = this.props; - //console.log('Schema: ' + JSON.stringify(schema, null, 2)); + // console.log('Schema: ' + JSON.stringify(schema, null, 2)); let value = ace && ace.editor.getValue(); - const ref = schema && schema['_$ref']; + const ref = schema && schema._$ref; - //var valid = window && window.ajv.validate({ $ref: `specs.json${ref}` }, value); - //console.log(JSON.stringify(window.ajv.errors)); - //if (!valid) { + // var valid = window && window.ajv.validate({ $ref: `specs.json${ref}` }, value); + // console.log(JSON.stringify(window.ajv.errors)); + // if (!valid) { // console.warn('INVALID REQUEST!'); - //} + // } const endpoint = { method: operation.httpVerb, - path: operation.servers[0].url + operation.path - } + path: operation.servers[0].url + operation.path, + }; console.log('Value: ' + value); if (value) { value = JSON.parse(value); @@ -59,7 +64,7 @@ export class ConsoleViewer extends React.Component (this.consoleEditor = editor)} /> + ref={(editor: ConsoleEditor) => (this.consoleEditor = editor)} + /> )} {false && samples.map(sample => ( @@ -146,7 +149,7 @@ export class ConsoleViewer extends React.ComponentSend Request {result && - + } ); @@ -160,15 +163,16 @@ export class ConsoleViewer extends React.Component -1) { if (mediaType.schema) { - //schema = mediaType.schema; - schema = mediaType.schema && mediaType.schema.rawSchema; + // schema = mediaType.schema; + schema.rawSchema = mediaType.schema && mediaType.schema.rawSchema; console.log('rawSchema : ' + JSON.stringify(schema)); console.log('schema : ' + JSON.stringify(mediaType.schema.schema)); - schema['_$ref'] = mediaType.schema && mediaType.schema['_$ref'] + schema._$ref = mediaType.schema && mediaType.schema._$ref; } break; } diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index 47c5ba00..3cd96b1c 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -9,13 +9,13 @@ import { Badge, DarkRightPanel, H2, MiddlePanel, Row, Toggle } from '../../commo import { OptionsContext } from '../OptionsProvider'; import { ShareLink } from '../../common-elements/linkify'; +import { ConsoleViewer } from '../Console/ConsoleViewer'; import { Endpoint } from '../Endpoint/Endpoint'; import { Markdown } from '../Markdown/Markdown'; import { Parameters } from '../Parameters/Parameters'; import { RequestSamples } from '../RequestSamples/RequestSamples'; import { ResponsesList } from '../Responses/ResponsesList'; import { ResponseSamples } from '../ResponseSamples/ResponseSamples'; -import { ConsoleViewer } from '../Console/ConsoleViewer'; import { OperationModel as OperationType } from '../../services/models'; @@ -54,9 +54,9 @@ export class Operation extends React.Component { }; } - onTry = (e) => { + onTry = e => { this.setState({ - executeMode: e.target.checked + executeMode: e.target.checked, }); console.log(e.target.checked + ' ' + this.props.operation); }; diff --git a/src/components/SourceCode/SourceCode.tsx b/src/components/SourceCode/SourceCode.tsx index 7f226152..3d4e1e30 100644 --- a/src/components/SourceCode/SourceCode.tsx +++ b/src/components/SourceCode/SourceCode.tsx @@ -4,7 +4,7 @@ import { highlight } from '../../utils'; import { SampleControls, SampleControlsWrap } from '../../common-elements'; import { CopyButtonWrapper } from '../../common-elements/CopyButtonWrapper'; -//${props => props.theme.responsePanel}; +// ${props => props.theme.responsePanel}; const StyledPre = styled.pre` font-family: ${props => props.theme.code.fontFamily}; font-size: ${props => props.theme.code.fontSize}; diff --git a/src/theme.ts b/src/theme.ts index 6785370e..913999fc 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -70,7 +70,7 @@ const defaultTheme: ThemeInterface = { width: '40%', }, styledPre: { - maxHeight: '500px' + maxHeight: '500px', }, }; @@ -181,7 +181,7 @@ export interface ResolvedThemeInterface { }; styledPre: { maxHeight: string; - } + }; } export type primitive = string | number | boolean | undefined | null; diff --git a/src/utils/loadAndBundleSpec.ts b/src/utils/loadAndBundleSpec.ts index 8b50124a..cbecbb7f 100644 --- a/src/utils/loadAndBundleSpec.ts +++ b/src/utils/loadAndBundleSpec.ts @@ -1,11 +1,10 @@ import * as JsonSchemaRefParser from 'json-schema-ref-parser'; import { convertObj } from 'swagger2openapi'; import { OpenAPISpec } from '../types'; -import { cloneDeep } from 'lodash'; export async function loadAndBundleSpec(specUrlOrObject: object | string): Promise { const parser = new JsonSchemaRefParser(); - let spec = await parser.bundle(specUrlOrObject, { + const spec = await parser.bundle(specUrlOrObject, { resolve: { http: { withCredentials: false } }, } as object); @@ -15,10 +14,11 @@ export async function loadAndBundleSpec(specUrlOrObject: object | string): Promi } // we can derefrence the schema here for future use. + // import { cloneDeep } from 'lodash'; // const derefrencedSpec = await parser.dereference(cloneDeep(spec)); - //const derefed = await parser.dereference(v2Specs, { + // const derefed = await parser.dereference(v2Specs, { // resolve: { http: { withCredentials: false } }, - //} as object); + // } as object); return v2Specs; diff --git a/tslint.json b/tslint.json index 9c980dcb..feec7e40 100644 --- a/tslint.json +++ b/tslint.json @@ -17,7 +17,7 @@ "quotemark": [true, "single", "avoid-template", "jsx-double"], "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"], "arrow-parens": [true, "ban-single-arg-parens"], - "no-submodule-imports": [true, "prismjs", "perfect-scrollbar", "react-dom", "core-js"], + "no-submodule-imports": [true, "prismjs", "perfect-scrollbar", "react-dom", "core-js", "brace"], "object-literal-key-quotes": [true, "as-needed"], "no-unused-expression": [true, "allow-tagged-template"], "semicolon": [true, "always", "ignore-bound-class-methods"], diff --git a/yarn.lock b/yarn.lock index d4c80a7b..7c15df74 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8133,14 +8133,14 @@ qs@6.5.1: version "6.5.1" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8" +qs@^6.5.2, qs@~6.5.1: + version "6.5.2" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" + qs@~6.4.0: version "6.4.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" -qs@~6.5.1: - version "6.5.2" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" - query-string@^4.1.0: version "4.3.4" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"