fixed tslint errors

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 = 'intent.json';
-//specUrl = 'swagger.yaml';
+
-specUrl = 'petstore.json';
+// specUrl = 'swagger.yaml';
+// specUrl = 'petstore.json';
 
 let store;
 const options: RedocRawOptions = { nativeScrollbars: false };

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": {

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

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

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

src/common-elements/toggle.tsx

@@ -8,4 +8,4 @@ export const Toggle = styled.input`
   background: papayawhip;
   border: none;
   border-radius: 3px;
-`;
+`;

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<ConsoleEditorProps> {
 
-  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<ConsoleEditorProps> {
       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<ConsoleEditorProps> {
       }
     }
 
-
     /*
     let body = {};
     if(mimeContent.mediaTypes && mimeContent.mediaTypes.length>0){

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<ConsoleViewerProps, ConsoleViewerState> {
-  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);
+    // var valid = window && window.ajv.validate({ $ref: `specs.json${ref}` }, value);
-    //console.log(JSON.stringify(window.ajv.errors));
+    // console.log(JSON.stringify(window.ajv.errors));
-    //if (!valid) {
+    // 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<ConsoleViewerProps, ConsoleVi
     const result = await this.invoke(endpoint, value);
     console.log('Result: ' + JSON.stringify(result));
     this.setState({
-      result
+      result,
     });
 
   };
@@ -72,7 +77,7 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
         url = url + '?' + qs.stringify(body || '');
       }
 
-      var myHeaders = new Headers();
+      const myHeaders = new Headers();
       myHeaders.append('Content-Type', 'application/json');
 
       const request = new Request(url, {
@@ -80,41 +85,39 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
         credentials: 'include',
         redirect: 'manual',
         headers: myHeaders,
-        body: (body) ? JSON.stringify(body) : undefined
+        body: (body) ? JSON.stringify(body) : undefined,
       });
 
       const result = await fetch(request);
 
-      const contentType = result.headers.get("content-type");
+      const contentType = result.headers.get('content-type');
-      if (contentType && contentType.indexOf("application/json") !== -1) {
+      if (contentType && contentType.indexOf('application/json') !== -1) {
         // successful cross-domain connect/ability
         const resp = await result.json();
 
         return { json: resp, statusCode: result.status, _fetchRes: result };
-      }
+      } else if (result.status === 200 && contentType && contentType.indexOf('text/plain') !== -1) {
-      else if (result.status === 200 && contentType && contentType.indexOf("text/plain") !== -1) {
         const resp = await result.text();
         return { resp, _fetchRes: result };
-      }
+      } else {
-      else {
         if (result && result.type && result.type === 'opaqueredirect') {
           return {
             json: {
               endpoint,
-              error_code: "RECEIVED_LOGIN_REDIRECT",
+              error_code: 'RECEIVED_LOGIN_REDIRECT',
-              details: "Your session expired. Please refresh the page.",
+              details: 'Your session expired. Please refresh the page.',
-              severity: "error"
+              severity: 'error',
-            }
+            },
-          }
+          };
         }
 
         return {
           json: {
             endpoint,
-            error_code: "INVALID_SERVER_RESPONSE",
+            error_code: 'INVALID_SERVER_RESPONSE',
-            details: "Either server not authenticated or error on server",
+            details: 'Either server not authenticated or error on server',
-            severity: "error"
+            severity: 'error',
-          }
+          },
         };
       }
     } catch (error) {
@@ -123,7 +126,6 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
 
   }
 
-
   render() {
     const { operation } = this.props;
     const requestBodyContent = operation.requestBody && operation.requestBody.content && operation.requestBody.content;
@@ -137,7 +139,8 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
         {hasBodySample && (
           <ConsoleEditor
             mediaTypes={mediaTypes}
-            ref={(editor: ConsoleEditor) => (this.consoleEditor = editor)} />
+            ref={(editor: ConsoleEditor) => (this.consoleEditor = editor)}
+          />
         )}
         {false && samples.map(sample => (
           <SourceCodeWithCopy lang={sample.lang} source={sample.source} />
@@ -146,7 +149,7 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
           <SendButton onClick={this.onClickSend} >Send Request</SendButton>
         </ConsoleActionsRow>
         {result &&
-          <SourceCodeWithCopy lang='json' source={JSON.stringify(result, null, 2)} />
+          <SourceCodeWithCopy lang="json" source={JSON.stringify(result, null, 2)} />
         }
       </div>
     );
@@ -160,15 +163,16 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
     if (!mediaTypes.length) {
       return null;
     }
-    let schema = {};
+    const schema: Schema = {
-    for (let mediaType of mediaTypes) {
+    };
+    for (const mediaType of mediaTypes) {
       if (mediaType.name.indexOf('json') > -1) {
         if (mediaType.schema) {
-          //schema = mediaType.schema;
+          // schema = mediaType.schema;
-          schema = mediaType.schema && mediaType.schema.rawSchema;
+          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;
       }

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<OperationProps, OperationState> {
     };
   }
 
-  onTry = (e) => {
+  onTry = e => {
     this.setState({
-      executeMode: e.target.checked
+      executeMode: e.target.checked,
     });
     console.log(e.target.checked + ' ' + this.props.operation);
   };

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

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;

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<OpenAPISpec> {
   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;
 

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

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"