support for array examples, include default values in UI and minor style changes

Author: mrin9

README.md

@@ -36,7 +36,7 @@ Custom Eelement for Open-API spec viewing
   - Use it inside another framework (react, vue, angular, lit-element)
   - Use JavaScript to change its attributes, and it will react to those changes
   - Style the element with standard css (change padding, position, border, margin )
-- Lightweight and fast (under 125 KB gzipped)
+- Lightweight and fast
 - Load local json spec from the disk
 - Supported on Chrome, FireFox and Safari. (Not yet tested on Edge)
 
@@ -49,7 +49,6 @@ Custom Eelement for Open-API spec viewing
 
 
 ## Build Process
-We recommend `yarn` over `npm` as we use yarn [resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) to keep the bundle size smaller. As of this writing this feature is not supported in npm natively 
 ```bash
 # Clone / Download the project then
 yarn install
@@ -60,4 +59,6 @@ yarn build
 
 # for developement use yarn serve (this will start an webserver at port 8080, then navigate to localhost:8080) 
 yarn serve
-```
+```
+
+## Contribution

dist/rapidoc-min.js

@@ -123,6 +123,16 @@ components:
           description: Categories this pet belongs to
           allOf:
             - $ref: '#/components/schemas/Category'
+        DependentIds:
+          type: array
+          description: IDs of Dependents .
+          items:
+            type: integer
+          example:
+            - 278
+            - 279
+            - 280
+            - 281
         name:
           description: Name of the person
           type: string

dist/rapidoc-min.js.gz

@@ -1,6 +1,6 @@
 {
   "name": "rapidoc",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "RapiDoc - Open API spec viewer with built in console",
   "author": "Mrinmoy Majumdar <[email protected]>",
   "repository": {
@@ -25,8 +25,8 @@
     "openapi themes",
     "swagger themes"
   ],
-  "main": "rapidoc.js",
-  "module": "rapidoc.js",
+  "main": ".src/rapidoc.js",
+  "module": ".src/rapidoc.js",
   "dependencies": {
     "json-refs": "^3.0.13",
     "lit-element": "2.2.1",
@@ -41,16 +41,16 @@
     "lint-fix" : "./node_modules/eslint/bin/eslint.js --fix ./src/**"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
     "babel-loader": "^8.0.6",
     "babel-plugin-template-html-minifier": "^3.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "compression-webpack-plugin": "^3.0.0",
     "css-loader": "^3.2.0",
-    "eslint": "^6.4.0",
+    "eslint": "^6.5.1",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-loader": "^3.0.0",
+    "eslint-loader": "^3.0.2",
     "eslint-import-resolver-webpack":"^0.11.1",
     "eslint-plugin-import": "^2.18.2",
     "file-loader": "^4.2.0",
@@ -60,9 +60,9 @@
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
-    "webpack": "^4.40.2",
-    "webpack-bundle-analyzer": "^3.5.0",
+    "webpack": "^4.41.0",
+    "webpack-bundle-analyzer": "^3.5.2",
     "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.1"
+    "webpack-dev-server": "^3.8.2"
   }
 }

dist/report.html

@@ -7,7 +7,7 @@ import InputStyles from '@/styles/input-styles';
 import FontStyles from '@/styles/font-styles';
 import CommonStyles from '@/styles/common-styles';
 import {
-  schemaToModel, getTypeInfo, generateExample,
+  schemaInObjectNotation, getTypeInfo, generateExample,
 } from '@/utils/common-utils';
 import '@/components/json-tree';
 import '@/components/schema-tree';
@@ -224,6 +224,7 @@ export default class ApiRequest extends LitElement {
         </td>
         <td>
           <div class="param-constraint">
+            ${paramSchema.default ? html`<span style="font-weight:bold">Default: </span>${paramSchema.default}<br/>` : ''}
             ${paramSchema.constrain ? html`${paramSchema.constrain}<br/>` : ''}
             ${paramSchema.allowedValues ? html`${paramSchema.allowedValues}` : ''}
           </div>
@@ -300,9 +301,9 @@ export default class ApiRequest extends LitElement {
           return;
         }
         if (mimeReq.includes('json')) {
-          reqSchemaTree.json = schemaToModel(mimeReqObj.schema, {});
+          reqSchemaTree.json = schemaInObjectNotation(mimeReqObj.schema, {});
         } else if (mimeReq.includes('xml')) {
-          reqSchemaTree.xml = schemaToModel(mimeReqObj.schema, {});
+          reqSchemaTree.xml = schemaInObjectNotation(mimeReqObj.schema, {});
         }
         reqExample = generateExample(
           mimeReqObj.schema ? mimeReqObj.schema.examples : '',
@@ -318,8 +319,8 @@ export default class ApiRequest extends LitElement {
             spellcheck = "false"
             data-ptype = "${mimeReq}" 
             style="resize:vertical;display:${shortMimeTypes[mimeReq] === 'json' ? 'block' : 'none'}; "
-          >${reqExample[0].exampleValue}
-          </textarea>`;
+          >${reqExample[0].exampleValue}</textarea>
+        `;
       } else if (mimeReq.includes('form') || mimeReq.includes('multipart-form')) {
         isFormDataPresent = true;
         for (const fieldName in mimeReqObj.schema.properties) {
@@ -486,9 +487,7 @@ export default class ApiRequest extends LitElement {
                   <button class="m-btn" @click="${this.downloadResponseBlob}">DOWNLOAD</button>
                 </div>`
               : html`
-                <textarea class="mono" spellcheck="false" style="resize:vertical;min-height:180px; padding:16px;">
-                  ${this.responseText}
-                </textarea>
+                <textarea class="mono" spellcheck="false" style="resize:vertical;min-height:180px; padding:16px;">${this.responseText}</textarea>
               `
             }
           </div>

docs/rapidoc-min.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit-element';
 import marked from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import { schemaToModel, generateExample } from '@/utils/common-utils';
+import { schemaInObjectNotation, generateExample } from '@/utils/common-utils';
 import FontStyles from '@/styles/font-styles';
 import FlexStyles from '@/styles/flex-styles';
 import TableStyles from '@/styles/table-styles';
@@ -107,7 +107,7 @@ export default class ApiResponse extends LitElement {
         const mimeRespObj = this.responses[statusCode].content[mimeResp];
 
         // Generate Schema
-        const schemaTree = schemaToModel(mimeRespObj.schema, {});
+        const schemaTree = schemaInObjectNotation(mimeRespObj.schema, {});
 
         // Generate Example
         const respExample = generateExample(

docs/specs/data-types.yaml

@@ -57,11 +57,11 @@ export default class JsonTree extends LitElement {
         <div class="inside-bracket">
         ${Object.keys(data).map((key) => html`<div class="item"> ${detailType === 'pure_object' ? html`${key}:` : ''}${this.generateTree(data[key])}</div>`)}
         </div>
-      <div class="right-bracket">${detailType === 'array' ? ']' : '}'}</div>
+      <div class="right-bracket">${detailType === 'array' ? '],' : '},'}</div>
       `;
     }
 
-    return typeof data === 'string' ? html`<span class="${typeof data}">"${data}"</span>` : html`<span class="${typeof data}">${data}</span>`;
+    return typeof data === 'string' ? html`<span class="${typeof data}">"${data}"</span>,` : html`<span class="${typeof data}">${data}</span>,`;
   }
   /* eslint-enable indent */