Merge branch 'master' of github.com:Rebilly/ReDoc

CHANGELOG.md

@@ -1,3 +1,104 @@
+# [2.0.0-rc.8-1](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.8...v2.0.0-rc.8-1) (2019-05-13)
+
+
+### Bug Fixes
+
+* crash with empty servers with redoc-cli ([3d52b39](https://github.com/Rebilly/ReDoc/commit/3d52b39))
+
+
+
+# [2.0.0-rc.8](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.7...v2.0.0-rc.8) (2019-05-13)
+
+
+### Bug Fixes
+
+* fix broken CLI again ([4e12b5d](https://github.com/Rebilly/ReDoc/commit/4e12b5d))
+* fix logo gutter bg ([81896d3](https://github.com/Rebilly/ReDoc/commit/81896d3))
+
+
+
+# [2.0.0-rc.7](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.6...v2.0.0-rc.7) (2019-05-13)
+
+
+### Bug Fixes
+
+* crash in node due to broken URL parsing ([8df2b97](https://github.com/Rebilly/ReDoc/commit/8df2b97))
+
+
+
+# [2.0.0-rc.6](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.5...v2.0.0-rc.6) (2019-05-13)
+
+
+### Bug Fixes
+
+* broken schema talbes with long enums ([3a74b74](https://github.com/Rebilly/ReDoc/commit/3a74b74))
+* deep linking sometimes not working when sent over messengers ([2491d97](https://github.com/Rebilly/ReDoc/commit/2491d97))
+
+
+
+# [2.0.0-rc.5](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.4...v2.0.0-rc.5) (2019-05-13)
+
+
+### Bug Fixes
+
+* change fontFamily for EndpointInfo ([#866](https://github.com/Rebilly/ReDoc/issues/866)) ([851b133](https://github.com/Rebilly/ReDoc/commit/851b133))
+* clean up field values display ([#855](https://github.com/Rebilly/ReDoc/issues/855)) ([5c91590](https://github.com/Rebilly/ReDoc/commit/5c91590))
+* discriminator and oneOf title fix ([a3d7d7a](https://github.com/Rebilly/ReDoc/commit/a3d7d7a))
+* encode x-www-form-urlencoded examples correctly ([65930ad](https://github.com/Rebilly/ReDoc/commit/65930ad)), closes [#870](https://github.com/Rebilly/ReDoc/issues/870)
+* fix redoc-cli broken dependencies ([81a7568](https://github.com/Rebilly/ReDoc/commit/81a7568))
+* IE11 add missing fetch and URL polyfills ([d2ce1bd](https://github.com/Rebilly/ReDoc/commit/d2ce1bd)), closes [#875](https://github.com/Rebilly/ReDoc/issues/875)
+* ignore empty x-tagGroups array ([#869](https://github.com/Rebilly/ReDoc/issues/869)) ([4366a0d](https://github.com/Rebilly/ReDoc/commit/4366a0d))
+* incorrect detected schema title for deeply inherited schemas ([7d7b4e3](https://github.com/Rebilly/ReDoc/commit/7d7b4e3))
+* pluralize arrray of types ([fdcac30](https://github.com/Rebilly/ReDoc/commit/fdcac30))
+* remove huge space after Authentication section ([548fae3](https://github.com/Rebilly/ReDoc/commit/548fae3)), closes [#872](https://github.com/Rebilly/ReDoc/issues/872)
+* remove query string from server URL ([#895](https://github.com/Rebilly/ReDoc/issues/895)) ([64453ff](https://github.com/Rebilly/ReDoc/commit/64453ff))
+* remove tabs top margin ([5c187f3](https://github.com/Rebilly/ReDoc/commit/5c187f3))
+* right panel code samples bg color ([de2aed2](https://github.com/Rebilly/ReDoc/commit/de2aed2))
+* tidy up non-redoc vendor extension presentation ([#847](https://github.com/Rebilly/ReDoc/issues/847)) ([b21cd3d](https://github.com/Rebilly/ReDoc/commit/b21cd3d))
+* update apiKey in to be titleize ([#902](https://github.com/Rebilly/ReDoc/issues/902)) ([35df477](https://github.com/Rebilly/ReDoc/commit/35df477))
+* **cli:** add node-libs-browser to the deps ([6c79901](https://github.com/Rebilly/ReDoc/commit/6c79901)), closes [#850](https://github.com/Rebilly/ReDoc/issues/850)
+
+
+### Features
+
+* add hideSingleRequestSampleTab option ([4550e4d](https://github.com/Rebilly/ReDoc/commit/4550e4d))
+* add lineHeight config for headings ([#894](https://github.com/Rebilly/ReDoc/issues/894)) ([5dd5d6d](https://github.com/Rebilly/ReDoc/commit/5dd5d6d))
+* basic UI labels configuration ([b0e660e](https://github.com/Rebilly/ReDoc/commit/b0e660e)). Can be used for translations later.
+* add logo gutter to the theme ([82c0cb1a](https://github.com/Rebilly/ReDoc/commit/82c0cb1a)).
+
+# [2.0.0-rc.4](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.3...v2.0.0-rc.4) (2019-03-15)
+
+
+### Bug Fixes
+
+* move swagger2openapi to deps because of missing transitive deps ([ed9b878](https://github.com/Rebilly/ReDoc/commit/ed9b878))
+
+
+### Features
+
+* display requestBody description [#833](https://github.com/Rebilly/ReDoc/issues/833) ([#838](https://github.com/Rebilly/ReDoc/issues/838)) ([56ca371](https://github.com/Rebilly/ReDoc/commit/56ca371))
+
+
+# [2.0.0-rc.3](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2019-03-15)
+
+
+### Bug Fixes
+
+* add extra deref step for anyOf/oneOf variants ([d81b631](https://github.com/Rebilly/ReDoc/commit/d81b631)), closes [#810](https://github.com/Rebilly/ReDoc/issues/810)
+* duplicate keys in request samples ([3ce5bff](https://github.com/Rebilly/ReDoc/commit/3ce5bff)), closes [#815](https://github.com/Rebilly/ReDoc/issues/815)
+* escape backslashes in string literals ([#823](https://github.com/Rebilly/ReDoc/issues/823)) ([70faca1](https://github.com/Rebilly/ReDoc/commit/70faca1)), closes [#822](https://github.com/Rebilly/ReDoc/issues/822)
+* escape quotes in string values ([0473165](https://github.com/Rebilly/ReDoc/commit/0473165)), closes [#882](https://github.com/Rebilly/ReDoc/issues/882)
+* pin lunr version in ReDoc ([178ff4c](https://github.com/Rebilly/ReDoc/commit/178ff4c)), closes [#844](https://github.com/Rebilly/ReDoc/issues/844)
+* set last section min-height ([4dd79cd](https://github.com/Rebilly/ReDoc/commit/4dd79cd)), closes [#820](https://github.com/Rebilly/ReDoc/issues/820)
+
+
+### Features
+
+* support externalValue for examples ([2cdfcd2](https://github.com/Rebilly/ReDoc/commit/2cdfcd2)), closes [#551](https://github.com/Rebilly/ReDoc/issues/551) [#840](https://github.com/Rebilly/ReDoc/issues/840)
+* **cli:** Add templateOptions param to pass additional data to custom template ([#792](https://github.com/Rebilly/ReDoc/issues/792)) ([4e8ee03](https://github.com/Rebilly/ReDoc/commit/4e8ee03))
+
+
+
 # [2.0.0-rc.2](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.1...v2.0.0-rc.2) (2019-01-27)
 
 

README.md

@@ -165,7 +165,7 @@ Also you can pass options:
   specUrl="http://rebilly.github.io/RebillyAPI/openapi.json"
   options={{
     nativeScrollbars: true,
-    theme: { colors: { main: '#dd5522' } },
+    theme: { colors: { primary { main: '#dd5522' } } },
   }}
 />
 ```
@@ -185,6 +185,8 @@ You can also specify `onLoaded` callback which will be called each time Redoc ha
 />
 ```
 
+[**IE11 Support Notes**](docs/usage-with-ie11.md)
+
 ## The Docker way
 
 ReDoc is available as pre-built Docker image in official [Docker Hub repository](https://hub.docker.com/r/redocly/redoc/). You may simply pull & run it:

cli/index.ts

@@ -13,7 +13,7 @@ import * as zlib from 'zlib';
 // @ts-ignore
 import { createStore, loadAndBundleSpec, Redoc } from 'redoc';
 
-import {watch} from 'chokidar';
+import { watch } from 'chokidar';
 import { createReadStream, existsSync, readFileSync, ReadStream, writeFileSync } from 'fs';
 import * as mkdirp from 'mkdirp';
 
@@ -25,6 +25,7 @@ interface Options {
   cdn?: boolean;
   output?: string;
   title?: string;
+  port?: number;
   templateFileName?: string;
   templateOptions?: any;
   redocOptions?: any;
@@ -62,16 +63,16 @@ YargsParser.command(
     return yargs;
   },
   async argv => {
-    const config = {
+    const config: Options = {
-      ssr: argv.ssr,
+      ssr: argv.ssr as boolean,
-      watch: argv.watch,
+      watch: argv.watch as boolean,
-      templateFileName: argv.template,
+      templateFileName: argv.template as string,
       templateOptions: argv.templateOptions || {},
       redocOptions: argv.options || {},
     };
 
     try {
-      await serve(argv.port, argv.spec, config);
+      await serve(argv.port as number, argv.spec as string, config);
     } catch (e) {
       handleError(e);
     }
@@ -108,12 +109,12 @@ YargsParser.command(
       return yargs;
     },
     async argv => {
-      const config = {
+      const config: Options = {
         ssr: true,
-        output: argv.o,
+        output: argv.o as string,
-        cdn: argv.cdn,
+        cdn: argv.cdn as boolean,
-        title: argv.title,
+        title: argv.title as string,
-        templateFileName: argv.template,
+        templateFileName: argv.template as string,
         templateOptions: argv.templateOptions || {},
         redocOptions: argv.options || {},
       };
@@ -132,7 +133,8 @@ YargsParser.command(
     type: 'string',
   })
   .options('templateOptions', {
-    describe: 'Additional options that you want pass to template. Use dot notation, e.g. templateOptions.metaDescription',
+    describe:
+      'Additional options that you want pass to template. Use dot notation, e.g. templateOptions.metaDescription',
   })
   .options('options', {
     describe: 'ReDoc options, use dot notation, e.g. options.nativeScrollbars',
@@ -190,7 +192,8 @@ async function serve(port: number, pathToSpec: string, options: Options = {}) {
           log('Updated successfully');
         } catch (e) {
           console.error('Error while updating: ', e.message);
-        }})
+        }
+      })
       .on('error', error => console.error(`Watcher error: ${error}`))
       .on('ready', () => log(`👀  Watching ${pathToSpecDirectory} for changes...`));
   }
@@ -247,13 +250,13 @@ async function getPageHTML(
       ssr
         ? 'hydrate(__redoc_state, container);'
         : `init("spec.json", ${JSON.stringify(redocOptions)}, container)`
-      };
+    };
 
     </script>`,
     redocHead: ssr
       ? (cdn
-      ? '<script src="https://unpkg.com/redoc@next/bundles/redoc.standalone.js"></script>'
+          ? '<script src="https://unpkg.com/redoc@next/bundles/redoc.standalone.js"></script>'
-      : `<script>${redocStandaloneSrc}</script>`) + css
+          : `<script>${redocStandaloneSrc}</script>`) + css
       : '<script src="redoc.standalone.js"></script>',
     title,
     templateOptions,

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redoc-cli",
-  "version": "0.7.1",
+  "version": "0.8.4",
   "description": "ReDoc's Command Line Interface",
   "main": "index.js",
   "bin": "index.js",
@@ -13,10 +13,11 @@
     "isarray": "^2.0.4",
     "mkdirp": "^0.5.1",
     "mobx": "^4.2.0",
-    "react": "^16.6.3",
+    "node-libs-browser": "^2.2.0",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.4",
-    "redoc": "^2.0.0-rc.1",
+    "react-dom": "^16.8.4",
-    "styled-components": "^4.1.1",
+    "redoc": "^2.0.0-rc.8-1",
+    "styled-components": "^4.1.3",
     "tslib": "^1.9.3",
     "yargs": "^12.0.5"
   },

config/docker/README.md

@@ -5,13 +5,13 @@
 Serve remote spec by URL:
 
     docker run -it --rm -p 80:80 \
-      -e SPEC_URL='http://localhost:8000/swagger.yaml' redoc
+      -e SPEC_URL='http://localhost:8000/swagger.yaml' redocly/redoc
 
 Serve local file:
 
     docker run -it --rm -p 80:80 \
-      -v $(PWD)/demo/swagger.yaml:/usr/share/nginx/html/swagger.yaml \
+      -v $(pwd)/demo/swagger.yaml:/usr/share/nginx/html/swagger.yaml \
-      -e SPEC_URL=swagger.yaml redoc
+      -e SPEC_URL=swagger.yaml redocly/redoc
 
 ## Runtime configuration options
 
@@ -23,4 +23,4 @@ Serve local file:
 
 ## Build
 
-    docker build -t redoc .
+    docker build -t redocly/redoc .

custom.d.ts

@@ -18,6 +18,8 @@ declare module '*.css' {
 declare var __REDOC_VERSION__: string;
 declare var __REDOC_REVISION__: string;
 
+declare var reactHotLoaderGlobal: any;
+
 interface Element {
   scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
 }

demo/playground/hmr-playground.tsx

@@ -17,9 +17,12 @@ const renderRoot = (props: RedocProps) =>
   );
 
 const big = window.location.search.indexOf('big') > -1;
-const swagger = window.location.search.indexOf('swagger') > -1; // compatibility mode ?
+const swagger = window.location.search.indexOf('swagger') > -1;
 
-const specUrl = swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml';
+const userUrl = window.location.search.match(/url=(.*)$/);
+
+const specUrl =
+  (userUrl && userUrl[1]) || (swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml');
 
 let store;
 const options: RedocRawOptions = { nativeScrollbars: false, parentElementSelector: '#redoc-container' };

demo/webpack.config.ts

@@ -57,8 +57,8 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
       env.playground
         ? 'playground/hmr-playground.tsx'
         : env.bench
-          ? '../benchmark/index.tsx'
+        ? '../benchmark/index.tsx'
-          : 'index.tsx',
+        : 'index.tsx',
     ),
   ],
   output: {
@@ -77,6 +77,12 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
 
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
+    alias:
+      mode !== 'production'
+        ? {
+            'react-dom': '@hot-loader/react-dom',
+          }
+        : {},
   },
 
   node: {
@@ -88,6 +94,9 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
   externals: {
     esprima: 'esprima',
     'node-fetch': 'null',
+    'node-fetch-h2': 'null',
+    yaml: 'null',
+    'safe-json-stringify': 'null',
   },
 
   module: {
@@ -105,7 +114,6 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
           loader: 'css-loader',
           options: {
             sourceMap: true,
-            minimize: true,
           },
         },
       },
@@ -136,8 +144,8 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
       template: env.playground
         ? 'demo/playground/index.html'
         : env.bench
-          ? 'benchmark/index.html'
+        ? 'benchmark/index.html'
-          : 'demo/index.html',
+        : 'demo/index.html',
     }),
     new ForkTsCheckerWebpackPlugin(),
     ignore(/js-yaml\/dumper\.js$/),

docs/redoc-vendor-extensions.md

@@ -134,13 +134,6 @@ Extends OpenAPI [Tag Object](http://swagger.io/specification/#tagObject)
 | :------------- | :------: | :---------- |
 | x-traitTag     | boolean  | In Swagger two operations can have multiple tags. This property distinguishes between tags that are used to group operations (default) from tags that are used to mark operation with certain trait (`true` value) |
 
-#### x-displayName
-
-| Field Name     |	Type	  | Description |
-| :------------- | :------: | :---------- |
-| x-displayName  | string   | Defines the text that is used for this tag in the menu and in section headings |
-
-
 ###### Usage in Redoc
 Tags that have `x-traitTag` set to `true` are listed in side-menu but don't have any subitems (operations). Tag `description` is rendered as well.
 This is useful for handling out common things like Pagination, Rate-Limits, etc.
@@ -161,6 +154,12 @@ description: Pagination description (can use markdown syntax)
 x-traitTag: true
 ```
 
+#### x-displayName
+
+| Field Name     |	Type	  | Description |
+| :------------- | :------: | :---------- |
+| x-displayName  | string   | Defines the text that is used for this tag in the menu and in section headings |
+
 ### Operation Object vendor extensions
 Extends OpenAPI [Operation Object](http://swagger.io/specification/#operationObject)
 #### x-code-samples

docs/usage-with-ie11.md

@@ -0,0 +1,24 @@
+# Usage With IE11
+
+
+## Standalone package
+
+IE11 is supported by default if you use ReDoc as a standalone package.
+
+## Usage as a React component
+
+If you use ReDoc as a React component you should include the following polyfills in your project:
+
+```js
+import 'core-js/es6/promise';
+import 'core-js/fn/array/find';
+import 'core-js/fn/object/assign';
+import 'core-js/fn/string/ends-with';
+import 'core-js/fn/string/starts-with';
+
+import 'core-js/es6/map';
+import 'core-js/es6/symbol';
+
+import 'unfetch/polyfill/index'; // or any other fetch polyfill
+import 'url-polyfill';
+```

e2e/e2e.html

@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <script src="../bundles/redoc.standalone.js">{}</script>
+    <div id="redoc" />
+  </body>
+</html>;

e2e/index.html

@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <script src="../bundles/redoc.standalone.js">{}</script>
+    <div id="redoc" />
+  </body>
+</html>;

e2e/integration/misc.e2e.ts

@@ -0,0 +1,64 @@
+// tslint:disable:no-implicit-dependencies
+import * as yaml from 'yaml-js';
+
+async function loadSpec(url: string): Promise<any> {
+  const spec = await (await fetch(url)).text();
+  return yaml.load(spec);
+}
+
+function initReDoc(win, spec, options = {}) {
+  (win as any).Redoc.init(spec, options, win.document.getElementById('redoc'));
+}
+
+describe('Servers', () => {
+  beforeEach(() => {
+    cy.visit('e2e/');
+  });
+
+  it('should have valid server', () => {
+    cy.window().then(async win => {
+      const spec = await loadSpec('/demo/openapi.yaml');
+      initReDoc(win, spec, {});
+
+      // TODO add cy-data attributes
+      cy.get('[data-section-id="operation/addPet"]').should(
+        'contain',
+        'http://petstore.swagger.io/v2/pet',
+      );
+
+      cy.get('[data-section-id="operation/addPet"]').should(
+        'contain',
+        'http://petstore.swagger.io/sandbox/pet',
+      );
+    });
+  });
+
+  it('should have valid server for when servers not provided', () => {
+    cy.window().then(async win => {
+      const spec = await loadSpec('/demo/openapi.yaml');
+      delete spec.servers;
+      initReDoc(win, spec, {});
+
+      // TODO add cy-data attributes
+      cy.get('[data-section-id="operation/addPet"]').should(
+        'contain',
+        'http://localhost:' + win.location.port + '/e2e/pet',
+      );
+    });
+  });
+
+  it('should have valid server for when servers not provided at .html pages', () => {
+    cy.visit('e2e/e2e.html');
+    cy.window().then(async win => {
+      const spec = await loadSpec('/demo/openapi.yaml');
+      delete spec.servers;
+      initReDoc(win, spec, {});
+
+      // TODO add cy-data attributes
+      cy.get('[data-section-id="operation/addPet"]').should(
+        'contain',
+        'http://localhost:' + win.location.port + '/e2e/pet',
+      );
+    });
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redoc",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.8-1",
   "description": "ReDoc",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "cy:open": "cypress open",
     "bundle:clean": "rimraf bundles",
     "bundle:standalone": "webpack --env.standalone --mode=production",
-    "bundle:lib": "webpack --mode=production",
+    "bundle:lib": "webpack --mode=production && npm run declarations",
     "bundle": "npm run bundle:clean && npm run bundle:lib && npm run bundle:standalone",
     "declarations": "tsc --emitDeclarationOnly -p tsconfig.lib.json && cp -R src/types typings/",
     "stats": "webpack --env.standalone --json --profile --mode=production > stats.json",
@@ -52,106 +52,109 @@
     "docker:build": "docker build -f config/docker/Dockerfile -t redoc ."
   },
   "devDependencies": {
-    "@babel/core": "7.1.6",
+    "@babel/core": "7.3.4",
-    "@babel/plugin-syntax-decorators": "7.1.0",
+    "@babel/plugin-syntax-decorators": "7.2.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-syntax-jsx": "7.0.0",
+    "@babel/plugin-syntax-jsx": "7.2.0",
-    "@babel/plugin-syntax-typescript": "7.1.5",
+    "@babel/plugin-syntax-typescript": "7.3.3",
-    "@cypress/webpack-preprocessor": "4.0.2",
+    "@cypress/webpack-preprocessor": "4.0.3",
+    "@hot-loader/react-dom": "^16.8.4",
     "@types/chai": "4.1.7",
     "@types/dompurify": "^0.0.32",
-    "@types/enzyme": "^3.1.15",
+    "@types/enzyme": "^3.9.0",
-    "@types/enzyme-to-json": "^1.5.2",
+    "@types/enzyme-to-json": "^1.5.3",
-    "@types/jest": "^23.3.9",
+    "@types/jest": "^24.0.11",
     "@types/json-pointer": "^1.0.30",
-    "@types/lodash": "^4.14.118",
+    "@types/lodash": "^4.14.122",
-    "@types/lunr": "^2.1.6",
+    "@types/lunr": "^2.3.2",
-    "@types/mark.js": "^8.11.1",
+    "@types/mark.js": "^8.11.3",
-    "@types/marked": "^0.6.0",
+    "@types/marked": "^0.6.3",
-    "@types/prismjs": "^1.6.4",
+    "@types/prismjs": "^1.9.1",
-    "@types/prop-types": "^15.5.6",
+    "@types/prop-types": "^15.7.0",
-    "@types/react": "^16.7.7",
+    "@types/react": "^16.8.7",
-    "@types/react-dom": "^16.0.10",
+    "@types/react-dom": "^16.8.2",
     "@types/react-hot-loader": "^4.1.0",
-    "@types/react-tabs": "^2.3.0",
+    "@types/react-tabs": "^2.3.1",
-    "@types/styled-components": "^4.1.1",
+    "@types/styled-components": "^4.1.12",
     "@types/tapable": "1.0.4",
-    "@types/webpack": "^4.4.19",
+    "@types/webpack": "^4.4.25",
-    "@types/webpack-env": "^1.13.0",
+    "@types/webpack-env": "^1.13.9",
-    "@types/yargs": "^12.0.1",
+    "@types/yargs": "^12.0.9",
-    "babel-loader": "8.0.4",
+    "babel-loader": "8.0.5",
-    "babel-plugin-styled-components": "^1.9.0",
+    "babel-plugin-styled-components": "^1.10.0",
     "beautify-benchmark": "^0.2.4",
-    "bundlesize": "^0.17.0",
+    "bundlesize": "^0.17.1",
-    "conventional-changelog-cli": "^2.0.11",
+    "conventional-changelog-cli": "^2.0.12",
-    "copy-webpack-plugin": "^4.6.0",
+    "copy-webpack-plugin": "^5.0.0",
-    "core-js": "^2.5.7",
+    "core-js": "^2.6.5",
-    "coveralls": "^3.0.2",
+    "coveralls": "^3.0.3",
-    "css-loader": "^1.0.1",
+    "css-loader": "^2.1.1",
-    "cypress": "~3.1.2",
+    "cypress": "~3.1.5",
     "deploy-to-gh-pages": "^1.3.6",
-    "enzyme": "^3.7.0",
+    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.7.0",
+    "enzyme-adapter-react-16": "^1.10.0",
-    "enzyme-to-json": "^3.3.4",
+    "enzyme-to-json": "^3.3.5",
-    "fork-ts-checker-webpack-plugin": "0.5.0",
+    "fork-ts-checker-webpack-plugin": "1.0.0",
     "html-webpack-plugin": "^3.1.0",
-    "jest": "^23.6.0",
+    "jest": "^24.3.1",
-    "license-checker": "^24.0.1",
+    "license-checker": "^25.0.1",
     "lodash": "^4.17.11",
     "mobx": "^4.3.1",
-    "prettier": "^1.15.2",
+    "prettier": "^1.16.4",
     "prettier-eslint": "^8.8.2",
-    "puppeteer": "^1.10.0",
+    "puppeteer": "^1.13.0",
     "raf": "^3.4.1",
-    "react": "^16.6.3",
+    "react": "^16.8.4",
-    "react-dom": "^16.6.3",
+    "react-dom": "^16.8.4",
-    "rimraf": "^2.6.2",
+    "rimraf": "^2.6.3",
     "shelljs": "^0.8.3",
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
-    "styled-components": "^4.1.1",
+    "styled-components": "^4.1.3",
-    "swagger2openapi": "^3.2.14",
+    "ts-jest": "24.0.0",
-    "ts-jest": "23.10.5",
+    "ts-loader": "5.3.3",
-    "ts-loader": "5.3.1",
+    "ts-node": "^8.0.3",
-    "ts-node": "^7.0.1",
+    "tslint": "^5.13.1",
-    "tslint": "^5.11.0",
     "tslint-react": "^3.4.0",
-    "typescript": "^3.1.6",
+    "typescript": "^3.3.3333",
-    "webpack": "^4.26.1",
+    "unfetch": "^4.1.0",
-    "webpack-cli": "^3.1.2",
+    "url-polyfill": "^1.1.5",
-    "webpack-dev-server": "^3.1.10",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1",
     "webpack-node-externals": "^1.6.0",
     "workerize-loader": "^1.0.4",
     "yaml-js": "^0.2.3"
   },
   "peerDependencies": {
     "mobx": "^4.2.0 || ^5.0.0",
-    "react": "^16.2.0",
+    "react": "^16.8.4",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.8.4",
     "styled-components": "^4.1.1"
   },
   "dependencies": {
     "classnames": "^2.2.6",
     "decko": "^1.2.0",
-    "dompurify": "^1.0.7",
+    "dompurify": "^1.0.10",
     "eventemitter3": "^3.0.0",
     "json-pointer": "^0.6.0",
-    "json-schema-ref-parser": "^6.0.1",
+    "json-schema-ref-parser": "^6.1.0",
-    "lunr": "^2.3.2",
+    "lunr": "2.3.6",
     "mark.js": "^8.11.1",
-    "marked": "^0.6.0",
+    "marked": "^0.6.1",
-    "memoize-one": "^4.0.0",
+    "memoize-one": "^5.0.0",
-    "mobx-react": "^5.2.5",
+    "mobx-react": "^5.4.3",
     "openapi-sampler": "1.0.0-beta.14",
     "perfect-scrollbar": "^1.4.0",
-    "polished": "^2.0.2",
+    "polished": "^3.0.3",
     "prismjs": "^1.15.0",
-    "prop-types": "^15.6.2",
+    "prop-types": "^15.7.2",
-    "react-dropdown": "^1.6.2",
+    "react-dropdown": "^1.6.4",
-    "react-hot-loader": "^4.3.5",
+    "react-hot-loader": "^4.8.0",
-    "react-tabs": "^2.0.0",
+    "react-tabs": "^3.0.0",
-    "slugify": "^1.3.1",
+    "slugify": "^1.3.4",
     "stickyfill": "^1.1.1",
+    "swagger2openapi": "^5.2.3",
     "tslib": "^1.9.3"
   },
   "bundlesize": [
@@ -161,7 +164,9 @@
     }
   ],
   "jest": {
-    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.ts",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
     "preset": "ts-jest",
     "collectCoverageFrom": [
       "src/**/*.{ts,tsx}"

src/common-elements/fields.ts

@@ -88,6 +88,8 @@ export const ExampleValue = styled(FieldLabel)`
   ${extensionsHook('ExampleValue')};
 `;
 
+export const ExtensionValue = styled(ExampleValue)``;
+
 export const ConstraintItem = styled(FieldLabel)`
   border-radius: 2px;
   ${({ theme }) => `

src/common-elements/headers.ts

@@ -7,14 +7,15 @@ const headerFontSize = {
 };
 
 export const headerCommonMixin = level => css`
-  font-family: ${props => props.theme.typography.headings.fontFamily};
+  font-family: ${({ theme }) => theme.typography.headings.fontFamily};
   font-weight: ${({ theme }) => theme.typography.headings.fontWeight};
   font-size: ${headerFontSize[level]};
+  line-height: ${({ theme }) => theme.typography.headings.lineHeight};
 `;
 
 export const H1 = styled.h1`
   ${headerCommonMixin(1)};
-  color: ${props => props.theme.colors.primary.main};
+  color: ${({ theme }) => theme.colors.primary.main};
 
   ${extensionsHook('H1')};
 `;

src/common-elements/panels.ts

@@ -17,6 +17,14 @@ export const Section = styled.div.attrs(props => ({
 }))<{ underlined?: boolean }>`
   padding: ${props => props.theme.spacing.sectionVertical}px 0;
 
+  &:last-child {
+    min-height: calc(100vh + 1px);
+  }
+
+  & > &:last-child {
+    min-height: initial;
+  }
+
   ${media.lessThan('medium', true)`
     padding: 0;
   `}

src/common-elements/samples.tsx

@@ -1,4 +1,5 @@
 import styled from '../styled-components';
+import { PrismDiv } from './PrismDiv';
 
 export const SampleControls = styled.div`
   opacity: 0.4;
@@ -21,3 +22,12 @@ export const SampleControlsWrap = styled.div`
     opacity: 1;
   }
 `;
+
+export const StyledPre = styled(PrismDiv.withComponent('pre'))`
+  font-family: ${props => props.theme.typography.code.fontFamily};
+  font-size: ${props => props.theme.typography.code.fontSize};
+  overflow-x: auto;
+  margin: 0;
+
+  white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
+`;

src/common-elements/tabs.ts

@@ -16,14 +16,15 @@ export const Tabs = styled(ReactTabs)`
       padding: 5px 10px;
       display: inline-block;
 
-      background-color: ${({ theme }) => darken(0.05, theme.rightPanel.backgroundColor)};
+      background-color: ${({ theme }) => theme.codeSample.backgroundColor};
       border-bottom: 1px solid rgba(0, 0, 0, 0.5);
       cursor: pointer;
       text-align: center;
       outline: none;
       color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.rightPanel.textColor)};
-      margin: 5px;
+      margin: 0
-      border: 1px solid ${({ theme }) => darken(0.1, theme.rightPanel.backgroundColor)};
+        ${({ theme }) => `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`};
+      border: 1px solid ${({ theme }) => darken(0.05, theme.codeSample.backgroundColor)};
       border-radius: 5px;
       min-width: 60px;
       font-size: 0.9em;

src/components/ApiLogo/ApiLogo.tsx

@@ -17,13 +17,11 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
     // Use the english word logo if no alt text is provided
     const altText = logoInfo.altText ? logoInfo.altText : 'logo';
 
-    const logo = (
+    const logo = <LogoImgEl src={logoInfo.url} alt={altText} />;
-      <LogoImgEl
+    return (
-        src={logoInfo.url}
+      <LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}>
-        style={{ backgroundColor: logoInfo.backgroundColor }}
+        {logoHref ? LinkWrap(logoHref)(logo) : logo}
-        alt={altText}
+      </LogoWrap>
-      />
     );
-    return <LogoWrap>{logoHref ? LinkWrap(logoHref)(logo) : logo}</LogoWrap>;
   }
 }

src/components/ApiLogo/styled.elements.tsx

@@ -4,6 +4,7 @@ import styled from '../../styled-components';
 export const LogoImgEl = styled.img`
   max-height: ${props => props.theme.logo.maxHeight};
   max-width: ${props => props.theme.logo.maxWidth};
+  padding: ${props => props.theme.logo.gutter};
   width: 100%;
   display: block;
 `;

src/components/Endpoint/styled.elements.ts

@@ -7,7 +7,7 @@ export const OperationEndpointWrap = styled.div`
 `;
 
 export const ServerRelativeURL = styled.span`
-  font-family: ${props => props.theme.typography.headings.fontFamily};
+  font-family: ${props => props.theme.typography.code.fontFamily};
   margin-left: 10px;
   flex: 1;
   overflow-x: hidden;

src/components/Fields/EnumValues.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ExampleValue, FieldLabel } from '../../common-elements/fields';
 
+import { l } from '../../services/Labels';
+
 export interface EnumValuesProps {
   values: string[];
   type: string;
@@ -16,10 +18,13 @@ export class EnumValues extends React.PureComponent<EnumValuesProps> {
     return (
       <div>
         <FieldLabel>
-          {type === 'array' ? 'Items' : ''} {values.length === 1 ? 'Value' : 'Enum'}:
+          {type === 'array' ? l('enumArray') : ''}{' '}
+          {values.length === 1 ? l('enumSingleValue') : l('enum')}:
         </FieldLabel>
         {values.map((value, idx) => (
-          <ExampleValue key={idx}>{JSON.stringify(value)} </ExampleValue>
+          <React.Fragment key={idx}>
+            <ExampleValue>{JSON.stringify(value)}</ExampleValue>{' '}
+          </React.Fragment>
         ))}
       </div>
     );

src/components/Fields/Extensions.tsx

@@ -1,4 +1,7 @@
 import * as React from 'react';
+
+import { ExtensionValue, FieldLabel } from '../../common-elements/fields';
+
 import styled from '../../styled-components';
 
 import { OptionsContext } from '../OptionsProvider';
@@ -6,14 +9,9 @@ import { OptionsContext } from '../OptionsProvider';
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';
 
 const Extension = styled(StyledMarkdownBlock)`
-  opacity: 0.9;
   margin: 2px 0;
 `;
 
-const ExtensionLable = styled.span`
-  font-style: italic;
-`;
-
 export interface ExtensionsProps {
   extensions: {
     [k: string]: any;
@@ -22,15 +20,18 @@ export interface ExtensionsProps {
 
 export class Extensions extends React.PureComponent<ExtensionsProps> {
   render() {
+    const exts = this.props.extensions;
     return (
       <OptionsContext.Consumer>
         {options => (
           <>
             {options.showExtensions &&
-              Object.keys(this.props.extensions).map(key => (
+              Object.keys(exts).map(key => (
                 <Extension key={key}>
-                  <ExtensionLable>{key}</ExtensionLable>:{' '}
+                  <FieldLabel> {key.substring(2)}: </FieldLabel>{' '}
-                  <code>{JSON.stringify(this.props.extensions[key])}</code>
+                  <ExtensionValue>
+                    {typeof exts[key] === 'string' ? exts[key] : JSON.stringify(exts[key])}
+                  </ExtensionValue>
                 </Extension>
               ))}
           </>

src/components/Fields/FieldDetail.tsx

@@ -14,7 +14,9 @@ export class FieldDetail extends React.PureComponent<FieldDetailProps> {
     return (
       <div>
         <FieldLabel> {this.props.label} </FieldLabel>{' '}
-        <ExampleValue> {JSON.stringify(this.props.value)} </ExampleValue>
+        <ExampleValue>
+          {JSON.stringify(this.props.value)}
+        </ExampleValue>
       </div>
     );
   }

src/components/Fields/FieldDetails.tsx

@@ -19,6 +19,8 @@ import { FieldDetail } from './FieldDetail';
 
 import { Badge } from '../../common-elements/';
 
+import { l } from '../../services/Labels';
+
 export class FieldDetails extends React.PureComponent<FieldProps> {
   render() {
     const { showExamples, field, renderDiscriminatorSwitch } = this.props;
@@ -40,18 +42,18 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
           )}
           {schema.title && <TypeTitle> ({schema.title}) </TypeTitle>}
           <ConstraintsView constraints={schema.constraints} />
-          {schema.nullable && <NullableLabel> Nullable </NullableLabel>}
+          {schema.nullable && <NullableLabel> {l('nullable')} </NullableLabel>}
           {schema.pattern && <PatternLabel>{schema.pattern}</PatternLabel>}
-          {schema.isCircular && <RecursiveLabel> Recursive </RecursiveLabel>}
+          {schema.isCircular && <RecursiveLabel> {l('recursive')} </RecursiveLabel>}
         </div>
         {deprecated && (
           <div>
-            <Badge type="warning"> Deprecated </Badge>
+            <Badge type="warning"> {l('deprecated')} </Badge>
           </div>
         )}
-        <FieldDetail label={'Default:'} value={schema.default} />
+        <FieldDetail label={l('default') + ':'} value={schema.default} />
         {!renderDiscriminatorSwitch && <EnumValues type={schema.type} values={schema.enum} />}{' '}
-        {showExamples && <FieldDetail label={'Example:'} value={example} />}
+        {showExamples && <FieldDetail label={l('example') + ':'} value={example} />}
         {<Extensions extensions={{ ...field.extensions, ...schema.extensions }} />}
         <div>
           <Markdown compact={true} source={description} />

src/components/Parameters/Parameters.tsx

@@ -4,11 +4,12 @@ import { ParametersGroup } from './ParametersGroup';
 
 import { UnderlinedHeader } from '../../common-elements';
 
+import { MediaContentModel } from '../../services';
 import { FieldModel, RequestBodyModel } from '../../services/models';
 import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch';
 import { Schema } from '../Schema';
 
-import { MediaContentModel } from '../../services';
+import { Markdown } from '../Markdown/Markdown';
 
 function safePush(obj, prop, item) {
   if (!obj[prop]) {
@@ -45,13 +46,15 @@ export class Parameters extends React.PureComponent<ParametersProps> {
 
     const bodyContent = body && body.content;
 
+    const bodyDescription = body && body.description;
+
     return (
-      <div>
+      <>
         {paramsPlaces.map(place => (
           <ParametersGroup key={place} place={place} parameters={paramsMap[place]} />
         ))}
-        {bodyContent && <BodyContent content={bodyContent} />}
+        {bodyContent && <BodyContent content={bodyContent} description={bodyDescription} />}
-      </div>
+      </>
     );
   }
 }
@@ -64,12 +67,17 @@ function DropdownWithinHeader(props) {
   );
 }
 
-function BodyContent(props: { content: MediaContentModel }): JSX.Element {
+function BodyContent(props: { content: MediaContentModel; description?: string }): JSX.Element {
-  const { content } = props;
+  const { content, description } = props;
   return (
     <MediaTypesSwitch content={content} renderDropdown={DropdownWithinHeader}>
       {({ schema }) => {
-        return <Schema skipReadOnly={true} key="schema" schema={schema} />;
+        return (
+          <>
+            {description !== undefined && <Markdown source={description} />}
+            <Schema skipReadOnly={true} key="schema" schema={schema} />
+          </>
+        );
       }}
     </MediaTypesSwitch>
   );

src/components/PayloadSamples/Example.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { StyledPre } from '../../common-elements/samples';
+import { ExampleModel } from '../../services/models';
+import { ExampleValue } from './ExampleValue';
+import { useExternalExample } from './exernalExampleHook';
+
+export interface ExampleProps {
+  example: ExampleModel;
+  mimeType: string;
+}
+
+export function Example({ example, mimeType }: ExampleProps) {
+  if (example.value === undefined && example.externalValueUrl) {
+    return <ExternalExample example={example} mimeType={mimeType} />;
+  } else {
+    return <ExampleValue value={example.value} mimeType={mimeType} />;
+  }
+}
+
+export function ExternalExample({ example, mimeType }: ExampleProps) {
+  const value = useExternalExample(example, mimeType);
+
+  if (value === undefined) {
+    return <span>Loading...</span>;
+  }
+
+  if (value instanceof Error) {
+    return (
+      <StyledPre>
+        Error loading external example: <br />
+        <a className={'token string'} href={example.externalValueUrl} target="_blank">
+          {example.externalValueUrl}
+        </a>
+      </StyledPre>
+    );
+  }
+
+  return <ExampleValue value={value} mimeType={mimeType} />;
+}

src/components/PayloadSamples/ExampleValue.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { isJsonLike, langFromMime } from '../../utils/openapi';
+import { JsonViewer } from '../JsonViewer/JsonViewer';
+import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
+
+export interface ExampleValueProps {
+  value: any;
+  mimeType: string;
+}
+
+export function ExampleValue({ value, mimeType }: ExampleValueProps) {
+  if (isJsonLike(mimeType)) {
+    return <JsonViewer data={value} />;
+  } else {
+    if (typeof value === 'object') {
+      // just in case example was cached as json but used as non-json
+      value = JSON.stringify(value, null, 2);
+    }
+    return <SourceCodeWithCopy lang={langFromMime(mimeType)} source={value} />;
+  }
+}

src/components/PayloadSamples/MediaTypeSamples.tsx

@@ -2,11 +2,9 @@ import * as React from 'react';
 
 import { SmallTabs, Tab, TabList, TabPanel } from '../../common-elements';
 import { MediaTypeModel } from '../../services/models';
-import { JsonViewer } from '../JsonViewer/JsonViewer';
-import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
-import { NoSampleLabel } from './styled.elements';
 
-import { isJsonLike, langFromMime } from '../../utils';
+import { Example } from './Example';
+import { NoSampleLabel } from './styled.elements';
 
 export interface PayloadSamplesProps {
   mediaType: MediaTypeModel;
@@ -18,13 +16,6 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps> {
     const mimeType = this.props.mediaType.name;
 
     const noSample = <NoSampleLabel>No sample</NoSampleLabel>;
-    const sampleView = isJsonLike(mimeType)
-      ? sample => <JsonViewer data={sample} />
-      : sample =>
-          (sample !== undefined && (
-            <SourceCodeWithCopy lang={langFromMime(mimeType)} source={sample} />
-          )) ||
-          noSample;
 
     const examplesNames = Object.keys(examples);
     if (examplesNames.length === 0) {
@@ -39,13 +30,19 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps> {
             ))}
           </TabList>
           {examplesNames.map(name => (
-            <TabPanel key={name}>{sampleView(examples[name].value)}</TabPanel>
+            <TabPanel key={name}>
+              <Example example={examples[name]} mimeType={mimeType} />
+            </TabPanel>
           ))}
         </SmallTabs>
       );
     } else {
       const name = examplesNames[0];
-      return <div>{sampleView(examples[name].value)}</div>;
+      return (
+        <div>
+          <Example example={examples[name]} mimeType={mimeType} />
+        </div>
+      );
     }
   }
 }

src/components/PayloadSamples/exernalExampleHook.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from 'react';
+import { ExampleModel } from '../../services/models/Example';
+
+export function useExternalExample(example: ExampleModel, mimeType: string) {
+  const [, setIsLoading] = useState(true); // to trigger component reload
+
+  const value = useRef<any>(undefined);
+  const prevRef = useRef<ExampleModel | undefined>(undefined);
+
+  if (prevRef.current !== example) {
+    value.current = undefined;
+  }
+
+  prevRef.current = example;
+
+  useEffect(
+    () => {
+      const load = async () => {
+        setIsLoading(true);
+        try {
+          value.current = await example.getExternalValue(mimeType);
+        } catch (e) {
+          value.current = e;
+        }
+        setIsLoading(false);
+      };
+
+      load();
+    },
+    [example, mimeType],
+  );
+
+  return value.current;
+}

src/components/RequestSamples/RequestSamples.tsx

@@ -1,10 +1,11 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { OperationModel } from '../../services/models';
+import { OperationModel, RedocNormalizedOptions } from '../../services';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
 
 import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
+import { OptionsContext } from '../OptionsProvider';
 
 export interface RequestSamplesProps {
   operation: OperationModel;
@@ -12,6 +13,8 @@ export interface RequestSamplesProps {
 
 @observer
 export class RequestSamples extends React.Component<RequestSamplesProps> {
+  static contextType = OptionsContext;
+  context: RedocNormalizedOptions;
   operation: OperationModel;
 
   render() {
@@ -21,16 +24,20 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
     const samples = operation.codeSamples;
 
     const hasSamples = hasBodySample || samples.length > 0;
+    const hideTabList =
+      samples.length + (hasBodySample ? 1 : 0) === 1
+        ? this.context.hideSingleRequestSampleTab
+        : false;
     return (
       (hasSamples && (
         <div>
           <RightPanelHeader> Request samples </RightPanelHeader>
 
           <Tabs defaultIndex={0}>
-            <TabList>
+            <TabList hidden={hideTabList}>
               {hasBodySample && <Tab key="payload"> Payload </Tab>}
               {samples.map(sample => (
-                <Tab key={sample.lang}>
+                <Tab key={sample.lang + '_' + (sample.label || '')}>
                   {sample.label !== undefined ? sample.label : sample.lang}
                 </Tab>
               ))}

src/components/Schema/Schema.tsx

@@ -10,6 +10,8 @@ import { ArraySchema } from './ArraySchema';
 import { ObjectSchema } from './ObjectSchema';
 import { OneOfSchema } from './OneOfSchema';
 
+import { l } from '../../services/Labels';
+
 export interface SchemaOptions {
   showTitle?: boolean;
   skipReadOnly?: boolean;
@@ -34,7 +36,7 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
         <div>
           <TypeName>{schema.displayType}</TypeName>
           {schema.title && <TypeTitle> {schema.title} </TypeTitle>}
-          <RecursiveLabel> Recursive </RecursiveLabel>
+          <RecursiveLabel> {l('recursive')} </RecursiveLabel>
         </div>
       );
     }

src/components/SecuritySchemes/SecuritySchemes.tsx

@@ -4,6 +4,7 @@ import { SecuritySchemesModel } from '../../services/models';
 
 import { H2, MiddlePanel, Row, Section, ShareLink } from '../../common-elements';
 import { OpenAPISecurityScheme } from '../../types';
+import { titleize } from '../../utils/helpers';
 import { Markdown } from '../Markdown/Markdown';
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';
 
@@ -84,7 +85,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
                   </tr>
                   {scheme.apiKey ? (
                     <tr>
-                      <th> {scheme.apiKey.in} parameter name:</th>
+                      <th> {titleize(scheme.apiKey.in || '')} parameter name:</th>
                       <td> {scheme.apiKey.name} </td>
                     </tr>
                   ) : scheme.http ? (
@@ -93,13 +94,12 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
                         <th> HTTP Authorization Scheme </th>
                         <td> {scheme.http.scheme} </td>
                       </tr>,
-                      scheme.http.scheme === 'bearer' &&
+                      scheme.http.scheme === 'bearer' && scheme.http.bearerFormat && (
-                        scheme.http.bearerFormat && (
+                        <tr key="bearer">
-                          <tr key="bearer">
+                          <th> Bearer format </th>
-                            <th> Bearer format </th>
+                          <td> "{scheme.http.bearerFormat}" </td>
-                            <td> "{scheme.http.bearerFormat}" </td>
+                        </tr>
-                          </tr>
+                      ),
-                        ),
                     ]
                   ) : scheme.openId ? (
                     <tr>

src/components/SourceCode/SourceCode.tsx

@@ -1,19 +1,8 @@
 import * as React from 'react';
 import { highlight } from '../../utils';
 
-import { SampleControls, SampleControlsWrap } from '../../common-elements';
+import { SampleControls, SampleControlsWrap, StyledPre } from '../../common-elements';
 import { CopyButtonWrapper } from '../../common-elements/CopyButtonWrapper';
-import { PrismDiv } from '../../common-elements/PrismDiv';
-import styled from '../../styled-components';
-
-const StyledPre = styled(PrismDiv.withComponent('pre'))`
-  font-family: ${props => props.theme.typography.code.fontFamily};
-  font-size: ${props => props.theme.typography.code.fontSize};
-  overflow-x: auto;
-  margin: 0;
-
-  white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
-`;
 
 export interface SourceCodeProps {
   source: string;

src/components/index.ts

@@ -8,7 +8,6 @@ export * from './Schema/';
 export * from './SearchBox/SearchBox';
 export * from './Operation/Operation';
 export * from './Loading/Loading';
-export * from './RedocStandalone';
 export * from './JsonViewer';
 export * from './Markdown/Markdown';
 export { StyledMarkdownBlock } from './Markdown/styled.elements';

src/components/testProviders.tsx

@@ -5,7 +5,9 @@ import defaultTheme from '../theme';
 export default class TestThemeProvider extends React.Component {
   render() {
     return (
-      <ThemeProvider theme={defaultTheme}>{React.Children.only(this.props.children)}</ThemeProvider>
+      <ThemeProvider theme={defaultTheme}>
+        {React.Children.only(this.props.children as any)}
+      </ThemeProvider>
     );
   }
 }

src/polyfills.ts

@@ -6,3 +6,6 @@ import 'core-js/fn/string/starts-with';
 
 import 'core-js/es6/map';
 import 'core-js/es6/symbol';
+
+import 'unfetch/polyfill/index';
+import 'url-polyfill';

src/services/HistoryService.ts

@@ -13,7 +13,7 @@ export class HistoryService {
   }
 
   get currentId(): string {
-    return IS_BROWSER ? window.location.hash.substring(1) : '';
+    return IS_BROWSER ? decodeURIComponent(window.location.hash.substring(1)) : '';
   }
 
   linkForId(id: string) {

src/services/Labels.ts

@@ -0,0 +1,37 @@
+export interface LabelsConfig {
+  enum: string;
+  enumSingleValue: string;
+  enumArray: string;
+  default: string;
+  deprecated: string;
+  example: string;
+  nullable: string;
+  recursive: string;
+  arrayOf: string;
+}
+
+export type LabelsConfigRaw = Partial<LabelsConfig>;
+
+const labels: LabelsConfig = {
+  enum: 'Enum',
+  enumSingleValue: 'Value',
+  enumArray: 'Items',
+  default: 'Default',
+  deprecated: 'Deprecated',
+  example: 'Example',
+  nullable: 'Nullable',
+  recursive: 'Recursive',
+  arrayOf: 'Array of ',
+};
+
+export function setRedocLabels(_labels?: LabelsConfigRaw) {
+  Object.assign(labels, _labels);
+}
+
+export function l(key: keyof LabelsConfig, idx?: number): string {
+  const label = labels[key];
+  if (idx !== undefined) {
+    return label[idx];
+  }
+  return label;
+}

src/services/MenuBuilder.ts

@@ -43,7 +43,7 @@ export class MenuBuilder {
     const items: ContentItemModel[] = [];
     const tagsMap = MenuBuilder.getTagsWithOperations(spec);
     items.push(...MenuBuilder.addMarkdownItems(spec.info.description || '', options));
-    if (spec['x-tagGroups']) {
+    if (spec['x-tagGroups'] && spec['x-tagGroups'].length > 0) {
       items.push(
         ...MenuBuilder.getTagGroupsItems(parser, undefined, spec['x-tagGroups'], tagsMap, options),
       );

src/services/OpenAPIParser.ts

@@ -187,6 +187,7 @@ export class OpenAPIParser {
       ...schema,
       allOf: undefined,
       parentRefs: [],
+      title: schema.title || (isNamedDefinition($ref) ? JsonPointer.baseName($ref) : undefined),
     };
 
     // avoid mutating inner objects
@@ -263,11 +264,6 @@ export class OpenAPIParser {
       }
     }
 
-    // name of definition or title on top level
-    if (schema.title === undefined && isNamedDefinition($ref)) {
-      receiver.title = JsonPointer.baseName($ref);
-    }
-
     return receiver;
   }
 

src/services/RedocNormalizedOptions.ts

@@ -2,6 +2,7 @@ import defaultTheme, { ResolvedThemeInterface, resolveTheme, ThemeInterface } fr
 import { querySelector } from '../utils/dom';
 import { isNumeric, mergeObjects } from '../utils/helpers';
 
+import { LabelsConfigRaw, setRedocLabels } from './Labels';
 import { MDXComponentMeta } from './MarkdownRenderer';
 
 export interface RedocRawOptions {
@@ -21,10 +22,13 @@ export interface RedocRawOptions {
   onlyRequiredInSamples?: boolean | string;
   showExtensions?: boolean | string | string[];
   parentElementSelector?: string;
+  hideSingleRequestSampleTab?: boolean | string;
 
   unstable_ignoreMimeParameters?: boolean;
 
   allowedMdComponents?: Dict<MDXComponentMeta>;
+
+  labels?: LabelsConfigRaw;
 }
 
 function argValueToBoolean(val?: string | boolean): boolean {
@@ -137,7 +141,11 @@ export class RedocNormalizedOptions {
   disableSearch: boolean;
   onlyRequiredInSamples: boolean;
   showExtensions: boolean | string[];
+<<<<<<< HEAD
   parentElement: Element | null;
+=======
+  hideSingleRequestSampleTab: boolean;
+>>>>>>> f29a4fe2eee39f7ef018c125d460ee8898856ce4
 
   /* tslint:disable-next-line */
   unstable_ignoreMimeParameters: boolean;
@@ -152,6 +160,9 @@ export class RedocNormalizedOptions {
 
     this.theme.extensionsHook = hook as any;
 
+    // do not support dynamic labels changes. Labels should be configured before
+    setRedocLabels(raw.labels);
+
     this.scrollYOffset = RedocNormalizedOptions.normalizeScrollYOffset(raw.scrollYOffset);
     this.hideHostname = RedocNormalizedOptions.normalizeHideHostname(raw.hideHostname);
     this.expandResponses = RedocNormalizedOptions.normalizeExpandResponses(raw.expandResponses);
@@ -165,7 +176,11 @@ export class RedocNormalizedOptions {
     this.disableSearch = argValueToBoolean(raw.disableSearch);
     this.onlyRequiredInSamples = argValueToBoolean(raw.onlyRequiredInSamples);
     this.showExtensions = RedocNormalizedOptions.normalizeShowExtensions(raw.showExtensions);
+<<<<<<< HEAD
     this.parentElement = RedocNormalizedOptions.normalizeParentElementSelector(raw.parentElementSelector);
+=======
+    this.hideSingleRequestSampleTab = argValueToBoolean(raw.hideSingleRequestSampleTab);
+>>>>>>> f29a4fe2eee39f7ef018c125d460ee8898856ce4
 
     this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);
 

src/services/__tests__/__snapshots__/OpenAPIParser.test.ts.snap

@@ -21,6 +21,7 @@ Object {
               "type": "string",
             },
           },
+          "title": undefined,
         },
         Object {
           "allOf": undefined,
@@ -38,6 +39,7 @@ Object {
               "type": "string",
             },
           },
+          "title": undefined,
         },
       ],
     },
@@ -59,6 +61,7 @@ Object {
               "type": "string",
             },
           },
+          "title": undefined,
         },
         Object {
           "allOf": undefined,
@@ -76,6 +79,7 @@ Object {
               "type": "string",
             },
           },
+          "title": undefined,
         },
       ],
     },

src/services/__tests__/models/Schema.test.ts

@@ -37,7 +37,7 @@ describe('Models', () => {
       parser = new OpenAPIParser(spec, undefined, opts);
       const schema = new SchemaModel(parser, spec.components.schemas.WithArray, '', opts);
       expect(schema.oneOf).toHaveLength(2);
-      expect(schema.displayType).toBe('(Array of string or number) or string');
+      expect(schema.displayType).toBe('(Array of strings or numbers) or string');
     });
   });
 });

src/services/models/Example.ts

@@ -1,14 +1,64 @@
-import { OpenAPIExample, Referenced } from '../../types';
+import { resolve as urlResolve } from 'url';
+
+import { OpenAPIEncoding, OpenAPIExample, Referenced } from '../../types';
+import { isFormUrlEncoded, isJsonLike, urlFormEncodePayload } from '../../utils/openapi';
 import { OpenAPIParser } from '../OpenAPIParser';
 
+const externalExamplesCache: { [url: string]: Promise<any> } = {};
+
 export class ExampleModel {
   value: any;
   summary?: string;
   description?: string;
-  externalValue?: string;
+  externalValueUrl?: string;
 
-  constructor(parser: OpenAPIParser, infoOrRef: Referenced<OpenAPIExample>) {
+  constructor(
-    Object.assign(this, parser.deref(infoOrRef));
+    parser: OpenAPIParser,
+    infoOrRef: Referenced<OpenAPIExample>,
+    public mime: string,
+    encoding?: { [field: string]: OpenAPIEncoding },
+  ) {
+    const example = parser.deref(infoOrRef);
+    this.value = example.value;
+    this.summary = example.summary;
+    this.description = example.description;
+    if (example.externalValue) {
+      this.externalValueUrl = urlResolve(parser.specUrl || '', example.externalValue);
+    }
     parser.exitRef(infoOrRef);
+
+    if (isFormUrlEncoded(mime) && this.value && typeof this.value === 'object') {
+      this.value = urlFormEncodePayload(this.value, encoding);
+    }
+  }
+
+  getExternalValue(mimeType: string): Promise<any> {
+    if (!this.externalValueUrl) {
+      return Promise.resolve(undefined);
+    }
+
+    if (externalExamplesCache[this.externalValueUrl]) {
+      return externalExamplesCache[this.externalValueUrl];
+    }
+
+    externalExamplesCache[this.externalValueUrl] = fetch(this.externalValueUrl).then(res => {
+      return res.text().then(txt => {
+        if (!res.ok) {
+          return Promise.reject(new Error(txt));
+        }
+
+        if (isJsonLike(mimeType)) {
+          try {
+            return JSON.parse(txt);
+          } catch (e) {
+            return txt;
+          }
+        } else {
+          return txt;
+        }
+      });
+    });
+
+    return externalExamplesCache[this.externalValueUrl];
   }
 }

src/services/models/MediaType.ts

@@ -1,6 +1,6 @@
 import * as Sampler from 'openapi-sampler';
 
-import { OpenAPIExample, OpenAPIMediaType } from '../../types';
+import { OpenAPIMediaType } from '../../types';
 import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 import { SchemaModel } from './Schema';
 
@@ -9,7 +9,7 @@ import { OpenAPIParser } from '../OpenAPIParser';
 import { ExampleModel } from './Example';
 
 export class MediaTypeModel {
-  examples?: { [name: string]: OpenAPIExample };
+  examples?: { [name: string]: ExampleModel };
   schema?: SchemaModel;
   name: string;
   isRequestType: boolean;
@@ -30,10 +30,18 @@ export class MediaTypeModel {
     this.schema = info.schema && new SchemaModel(parser, info.schema, '', options);
     this.onlyRequiredInSamples = options.onlyRequiredInSamples;
     if (info.examples !== undefined) {
-      this.examples = mapValues(info.examples, example => new ExampleModel(parser, example));
+      this.examples = mapValues(
+        info.examples,
+        example => new ExampleModel(parser, example, name, info.encoding),
+      );
     } else if (info.example !== undefined) {
       this.examples = {
-        default: new ExampleModel(parser, { value: info.example }),
+        default: new ExampleModel(
+          parser,
+          { value: parser.shalowDeref(info.example) },
+          name,
+          info.encoding,
+        ),
       };
     } else if (isJsonLike(name)) {
       this.generateExample(parser, info);
@@ -49,29 +57,31 @@ export class MediaTypeModel {
     if (this.schema && this.schema.oneOf) {
       this.examples = {};
       for (const subSchema of this.schema.oneOf) {
-        const sample = Sampler.sample(
+        const sample = Sampler.sample(subSchema.rawSchema, samplerOptions, parser.spec);
-          subSchema.rawSchema,
-          samplerOptions,
-          parser.spec,
-        );
 
         if (this.schema.discriminatorProp && typeof sample === 'object' && sample) {
           sample[this.schema.discriminatorProp] = subSchema.title;
         }
 
-        this.examples[subSchema.title] = {
+        this.examples[subSchema.title] = new ExampleModel(
-          value: sample,
+          parser,
-        };
+          {
+            value: sample,
+          },
+          this.name,
+          info.encoding,
+        );
       }
     } else if (this.schema) {
       this.examples = {
-        default: new ExampleModel(parser, {
+        default: new ExampleModel(
-          value: Sampler.sample(
+          parser,
-            info.schema,
+          {
-            samplerOptions,
+            value: Sampler.sample(info.schema, samplerOptions, parser.spec),
-            parser.spec,
+          },
-          ),
+          this.name,
-        }),
+          info.encoding,
+        ),
       };
     }
   }

src/services/models/Schema.ts

@@ -14,10 +14,13 @@ import {
   isNamedDefinition,
   isPrimitiveType,
   JsonPointer,
+  pluralizeType,
   sortByField,
   sortByRequired,
 } from '../../utils/';
 
+import { l } from '../Labels';
+
 // TODO: refactor this model, maybe use getters instead of copying all the values
 export class SchemaModel {
   pointer: string;
@@ -145,9 +148,9 @@ export class SchemaModel {
       this.fields = buildFields(parser, schema, this.pointer, this.options);
     } else if (this.type === 'array' && schema.items) {
       this.items = new SchemaModel(parser, schema.items, this.pointer + '/items', this.options);
-      this.displayType = this.items.displayType;
+      this.displayType = pluralizeType(this.items.displayType);
       this.displayFormat = this.items.format;
-      this.typePrefix = this.items.typePrefix + 'Array of ';
+      this.typePrefix = this.items.typePrefix + l('arrayOf');
       this.title = this.title || this.items.title;
       this.isPrimitive = this.items.isPrimitive;
       if (this.example === undefined && this.items.example !== undefined) {
@@ -161,7 +164,15 @@ export class SchemaModel {
 
   private initOneOf(oneOf: OpenAPISchema[], parser: OpenAPIParser) {
     this.oneOf = oneOf!.map((variant, idx) => {
-      const merged = parser.mergeAllOf(variant, this.pointer + '/oneOf/' + idx);
+      const derefVariant = parser.deref(variant);
+
+      const merged = parser.mergeAllOf(derefVariant, this.pointer + '/oneOf/' + idx);
+
+      // try to infer title
+      const title =
+        isNamedDefinition(variant.$ref) && !merged.title
+          ? JsonPointer.baseName(variant.$ref)
+          : merged.title;
 
       const schema = new SchemaModel(
         parser,
@@ -169,12 +180,14 @@ export class SchemaModel {
         {
           // variant may already have allOf so merge it to not get overwritten
           ...merged,
+          title,
           allOf: [{ ...this.schema, oneOf: undefined, anyOf: undefined }],
         } as OpenAPISchema,
         this.pointer + '/oneOf/' + idx,
         this.options,
       );
 
+      parser.exitRef(variant);
       // each oneOf should be independent so exiting all the parent refs
       // otherwise it will cause false-positive recursive detection
       parser.exitParents(merged);
@@ -210,7 +223,7 @@ export class SchemaModel {
         if (variant.$ref === undefined) {
           continue;
         }
-        const name = JsonPointer.dirName(variant.$ref);
+        const name = JsonPointer.baseName(variant.$ref);
         derived[variant.$ref] = name;
       }
     }

src/theme.ts

@@ -105,6 +105,7 @@ const defaultTheme: ThemeInterface = {
     headings: {
       fontFamily: 'Montserrat, sans-serif',
       fontWeight: '400',
+      lineHeight: '1.6em',
     },
     code: {
       fontSize: '13px',
@@ -139,6 +140,7 @@ const defaultTheme: ThemeInterface = {
   logo: {
     maxHeight: ({ menu }) => menu.width,
     maxWidth: ({ menu }) => menu.width,
+    gutter: '2px',
   },
   rightPanel: {
     backgroundColor: '#263238',
@@ -166,7 +168,7 @@ export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface {
               counter++;
               if (counter > 1000) {
                 throw new Error(
-                  `Theme probably contains cirucal dependency at ${currentPath}: ${val.toString()}`,
+                  `Theme probably contains circular dependency at ${currentPath}: ${val.toString()}`,
                 );
               }
 
@@ -281,6 +283,7 @@ export interface ResolvedThemeInterface {
     headings: {
       fontFamily: string;
       fontWeight: string;
+      lineHeight: string;
     };
 
     links: {
@@ -307,6 +310,7 @@ export interface ResolvedThemeInterface {
   logo: {
     maxHeight: string;
     maxWidth: string;
+    gutter: string;
   };
   rightPanel: {
     backgroundColor: string;

src/utils/__tests__/helpers.test.ts

@@ -1,5 +1,5 @@
 import slugify from 'slugify';
-import { mapWithLast, appendToMdHeading, mergeObjects, safeSlugify } from '../helpers';
+import { appendToMdHeading, mapWithLast, mergeObjects, safeSlugify, titleize } from '../helpers';
 
 describe('Utils', () => {
   describe('helpers', () => {
@@ -68,5 +68,11 @@ describe('Utils', () => {
         expect(mergeObjects({}, obj1, obj2)).toEqual({ a: ['C'], b: ['D'] });
       });
     });
+
+    describe('titleize', () => {
+      test('should return the string with the first letter capitalized', () => {
+        expect(titleize('my title')).toEqual('My title');
+      });
+    });
   });
 });

src/utils/__tests__/openapi.test.ts

@@ -7,6 +7,7 @@ import {
   isPrimitiveType,
   mergeParams,
   normalizeServers,
+  pluralizeType,
 } from '../';
 
 import { OpenAPIParser } from '../../services';
@@ -353,4 +354,27 @@ describe('Utils', () => {
       expect(humanizeConstraints(itemConstraintSchema(1))).toContain('non-empty');
     });
   });
+
+  describe('OpenAPI pluralizeType', () => {
+    it('should pluralize all simple types', () => {
+      expect(pluralizeType('string')).toEqual('strings');
+      expect(pluralizeType('number')).toEqual('numbers');
+      expect(pluralizeType('object')).toEqual('objects');
+      expect(pluralizeType('integer')).toEqual('integers');
+      expect(pluralizeType('boolean')).toEqual('booleans');
+      expect(pluralizeType('array')).toEqual('arrays');
+    });
+
+    it('should pluralize complex dislay types', () => {
+      expect(pluralizeType('object (Pet)')).toEqual('objects (Pet)');
+      expect(pluralizeType('string <email>')).toEqual('strings <email>');
+    });
+
+    it('should pluralize oneOf-ed dislay types', () => {
+      expect(pluralizeType('object or string')).toEqual('objects or strings');
+      expect(pluralizeType('object (Pet) or number <int64>')).toEqual(
+        'objects (Pet) or numbers <int64>',
+      );
+    });
+  });
 });

src/utils/helpers.ts

@@ -147,7 +147,7 @@ export function resolveUrl(url: string, to: string) {
   let res;
   if (to.startsWith('//')) {
     const { protocol: specProtocol } = parse(url);
-    res = `${specProtocol}${to}`;
+    res = `${specProtocol || 'https:'}${to}`;
   } else if (isAbsoluteUrl(to)) {
     res = to;
   } else if (!to.startsWith('/')) {
@@ -163,5 +163,34 @@ export function resolveUrl(url: string, to: string) {
 }
 
 export function getBasePath(serverUrl: string): string {
-  return new URL(serverUrl).pathname;
+  try {
+    return parseURL(serverUrl).pathname;
+  } catch (e) {
+    // when using with redoc-cli serverUrl can be empty resulting in crash
+    return serverUrl;
+  }
+}
+
+export function titleize(text: string) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+export function removeQueryString(serverUrl: string): string {
+  try {
+    const url = parseURL(serverUrl);
+    url.search = '';
+    return url.toString();
+  } catch (e) {
+    // when using with redoc-cli serverUrl can be empty resulting in crash
+    return serverUrl;
+  }
+}
+
+function parseURL(url: string) {
+  if (typeof URL === 'undefined') {
+    // node
+    return new (require('url')).URL(url);
+  } else {
+    return new URL(url);
+  }
 }

src/utils/jsonToHtml.ts

@@ -21,6 +21,10 @@ function htmlEncode(t) {
     : '';
 }
 
+function escapeForStringLiteral(str: string) {
+  return str.replace(/([\\"])/g, '\\$1');
+}
+
 function decorateWithSpan(value, className) {
   return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
 }
@@ -53,11 +57,11 @@ function valueToHTML(value) {
         '<a href="' +
         value +
         '">' +
-        htmlEncode(value) +
+        htmlEncode(escapeForStringLiteral(value)) +
         '</a>' +
         decorateWithSpan('"', 'token string');
     } else {
-      output += decorateWithSpan('"' + value + '"', 'token string');
+      output += decorateWithSpan('"' + escapeForStringLiteral(value) + '"', 'token string');
     }
   } else if (valueType === 'boolean') {
     output += decorateWithSpan(value, 'token boolean');

src/utils/loadAndBundleSpec.ts

@@ -19,7 +19,7 @@ export async function loadAndBundleSpec(specUrlOrObject: object | string): Promi
 export function convertSwagger2OpenAPI(spec: any): Promise<OpenAPISpec> {
   console.warn('[ReDoc Compatibility mode]: Converting OpenAPI 2.0 to OpenAPI 3.0');
   return new Promise<OpenAPISpec>((resolve, reject) =>
-    convertObj(spec, { patch: true, warnOnly: true }, (err, res) => {
+    convertObj(spec, { patch: true, warnOnly: true, text: '{}' }, (err, res) => {
       // TODO: log any warnings
       if (err) {
         return reject(err);

src/utils/openapi.ts

@@ -2,6 +2,7 @@ import { dirname } from 'path';
 
 import { OpenAPIParser } from '../services/OpenAPIParser';
 import {
+  OpenAPIEncoding,
   OpenAPIMediaType,
   OpenAPIOperation,
   OpenAPIParameter,
@@ -10,7 +11,7 @@ import {
   Referenced,
 } from '../types';
 import { IS_BROWSER } from './dom';
-import { isNumeric, resolveUrl } from './helpers';
+import { isNumeric, removeQueryString, resolveUrl, stripTrailingSlash } from './helpers';
 
 function isWildcardStatusCode(statusCode: string | number): statusCode is string {
   return typeof statusCode === 'string' && /\dxx/i.test(statusCode);
@@ -130,6 +131,101 @@ export function isJsonLike(contentType: string): boolean {
   return contentType.search(/json/i) !== -1;
 }
 
+export function isFormUrlEncoded(contentType: string): boolean {
+  return contentType === 'application/x-www-form-urlencoded';
+}
+
+function formEncodeField(fieldVal: any, fieldName: string, explode: boolean): string {
+  if (!fieldVal || !fieldVal.length) {
+    return fieldName + '=';
+  }
+
+  if (Array.isArray(fieldVal)) {
+    if (explode) {
+      return fieldVal.map(val => `${fieldName}=${val}`).join('&');
+    } else {
+      return fieldName + '=' + fieldVal.map(val => val.toString()).join(',');
+    }
+  } else if (typeof fieldVal === 'object') {
+    if (explode) {
+      return Object.keys(fieldVal)
+        .map(k => `${k}=${fieldVal[k]}`)
+        .join('&');
+    } else {
+      return (
+        fieldName +
+        '=' +
+        Object.keys(fieldVal)
+          .map(k => `${k},${fieldVal[k]}`)
+          .join(',')
+      );
+    }
+  } else {
+    return fieldName + '=' + fieldVal.toString();
+  }
+}
+
+function delimitedEncodeField(fieldVal: any, fieldName: string, delimeter: string): string {
+  if (Array.isArray(fieldVal)) {
+    return fieldVal.map(v => v.toString()).join(delimeter);
+  } else if (typeof fieldVal === 'object') {
+    return Object.keys(fieldVal)
+      .map(k => `${k}${delimeter}${fieldVal[k]}`)
+      .join(delimeter);
+  } else {
+    return fieldName + '=' + fieldVal.toString();
+  }
+}
+
+function deepObjectEncodeField(fieldVal: any, fieldName: string): string {
+  if (Array.isArray(fieldVal)) {
+    console.warn('deepObject style cannot be used with array value:' + fieldVal.toString());
+    return '';
+  } else if (typeof fieldVal === 'object') {
+    return Object.keys(fieldVal)
+      .map(k => `${fieldName}[${k}]=${fieldVal[k]}`)
+      .join('&');
+  } else {
+    console.warn('deepObject style cannot be used with non-object value:' + fieldVal.toString());
+    return '';
+  }
+}
+
+/*
+ * Should be used only for url-form-encoded body payloads
+ * To be used for parmaters should be extended with other style values
+ */
+export function urlFormEncodePayload(
+  payload: object,
+  encoding: { [field: string]: OpenAPIEncoding } = {},
+) {
+  if (Array.isArray(payload)) {
+    throw new Error('Payload must have fields: ' + payload.toString());
+  } else {
+    return Object.keys(payload)
+      .map(fieldName => {
+        const fieldVal = payload[fieldName];
+        const { style = 'form', explode = true } = encoding[fieldName] || {};
+        switch (style) {
+          case 'form':
+            return formEncodeField(fieldVal, fieldName, explode);
+            break;
+          case 'spaceDelimited':
+            return delimitedEncodeField(fieldVal, fieldName, '%20');
+          case 'pipeDelimited':
+            return delimitedEncodeField(fieldVal, fieldName, '|');
+          case 'deepObject':
+            return deepObjectEncodeField(fieldVal, fieldName);
+          default:
+            // TODO implement rest of styles for path parameters
+            console.warn('Incorrect or unsupported encoding style: ' + style);
+            return '';
+        }
+      })
+      .join('&');
+  }
+}
+
 export function langFromMime(contentType: string): string {
   if (contentType.search(/xml/i) !== -1) {
     return 'xml';
@@ -271,13 +367,20 @@ export function normalizeServers(
   specUrl: string | undefined,
   servers: OpenAPIServer[],
 ): OpenAPIServer[] {
-  const baseUrl =
+  const getHref = () => {
-    specUrl === undefined ? (IS_BROWSER ? window.location.href : '') : dirname(specUrl);
+    if (!IS_BROWSER) {
+      return '';
+    }
+    const href = window.location.href;
+    return href.endsWith('.html') ? dirname(href) : href;
+  };
+
+  const baseUrl = specUrl === undefined ? removeQueryString(getHref()) : dirname(specUrl);
 
   if (servers.length === 0) {
     return [
       {
-        url: baseUrl,
+        url: stripTrailingSlash(baseUrl),
       },
     ];
   }
@@ -338,3 +441,10 @@ export function extractExtensions(obj: object, showExtensions: string[] | true):
       return acc;
     }, {});
 }
+
+export function pluralizeType(displayType: string): string {
+  return displayType
+    .split(' or ')
+    .map(type => type.replace(/^(string|object|number|integer|array|boolean)( ?.*)/, '$1s$2'))
+    .join(' or ');
+}

typings/styled-patch.d.ts

@@ -18,4 +18,15 @@ declare module 'styled-components' {
       ...interpolations: SimpleInterpolation[]
     ): Keyframes;
   }
+
+  export interface BaseThemedCssFunction<T extends object> {
+    <P extends object>(
+      first:
+        | TemplateStringsArray
+        | CSSObject
+        | InterpolationFunction<ThemedStyledProps<P, T>>
+        | string[],
+      ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
+    ): FlattenInterpolation<ThemedStyledProps<P, T>>;
+  }
 }

webpack.config.ts

@@ -65,13 +65,13 @@ export default (env: { standalone?: boolean } = {}, { mode }) => ({
     ? {
         esprima: 'esprima',
         'node-fetch': 'null',
+        'node-fetch-h2': 'null',
+        yaml: 'null',
+        'safe-json-stringify': 'null',
       }
     : (context, request, callback) => {
         // ignore node-fetch dep of swagger2openapi as it is not used
-        if (/node-fetch$/i.test(request)) {
+        if (/esprima|node-fetch|node-fetch-h2|yaml|safe-json-stringify$/i.test(request)) {
-          return callback(null, 'var undefined');
-        }
-        if (/esprima$/i.test(request)) {
           return callback(null, 'var undefined');
         }
         return nodeExternals(context, request, callback);
@@ -134,7 +134,6 @@ export default (env: { standalone?: boolean } = {}, { mode }) => ({
           loader: 'css-loader',
           options: {
             sourceMap: false,
-            minimize: true,
           },
         },
       },