rapidoc: add RapiSchema component

Act as a wrapper for schema-table and schema-tree to render inline
JSON schemas

Fixes rapi-doc#253

index.html

@@ -37,7 +37,7 @@
 <!--     
   nav-bg-image = "https://i.pinimg.com/564x/a9/df/68/a9df68a2d651daee11599e998df393cb.jpg"
 -->
-  <rapi-doc 
+<!--  <rapi-doc 
     id = "thedoc" 
     spec-url="./specs/temp.yaml"
     allow-server-selection = "false"
@@ -50,7 +50,27 @@
     render-style = 'read'
     default-schema-tab = "model"
   > </rapi-doc>
+  -->
 
+      <schema-table>
+      <pre>
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://example.com/product.schema.json",
+  "title": "Product",
+  "description": "A product from Acme's catalog",
+  "type": "object",
+  "properties": {
+    "productId": {
+      "description": "The unique identifier for a product",
+      "type": "integer"
+    }
+  },
+  "required": [ "productId" ]
+}
+      </pre>
+    </schema-table>
+
 <!-- 
   <rapi-doc id = "thedoc" ></rapi-doc>
   <script>
@@ -111,4 +131,4 @@
 -->
 </body>
 
-</html>
+</html>

src/components/schema-table.js

@@ -3,7 +3,6 @@ import marked from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import FontStyles from '@/styles/font-styles';
 import SchemaStyles from '@/styles/schema-styles';
-import { schemaInObjectNotation } from '@/utils/schema-utils';
 
 export default class SchemaTable extends LitElement {
   static get properties() {
@@ -18,9 +17,6 @@ export default class SchemaTable extends LitElement {
     super.connectedCallback();
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true false'.includes(this.schemaDescriptionExpanded)) { this.schemaDescriptionExpanded = 'false'; }
-    if (!this.data) {
-      this.data = schemaInObjectNotation(JSON.parse(this.querySelector('pre').textContent), {});
-    }
   }
 
   static get styles() {

src/components/schema-tree.js

@@ -4,7 +4,6 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import FontStyles from '@/styles/font-styles';
 import SchemaStyles from '@/styles/schema-styles';
 import BorderStyles from '@/styles/border-styles';
-import { schemaInObjectNotation } from '@/utils/schema-utils';
 
 export default class SchemaTree extends LitElement {
   static get properties() {
@@ -18,10 +17,6 @@ export default class SchemaTree extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
-    if (!this.schemaDescriptionExpanded || !'true false'.includes(this.schemaDescriptionExpanded)) { this.schemaDescriptionExpanded = 'false'; }
-    if (!this.data) {
-      this.data = schemaInObjectNotation(JSON.parse(this.querySelector('pre').textContent), {});
-    }
   }
 
   static get styles() {

src/index.js

@@ -1,6 +1,7 @@
 import '@/styles/css/main.css';
 import RapiDoc from '@/rapidoc.js';
+import RapiSchema from '@/rapischema.js';
 import OAuthReceiver from '@/oauth-receiver.js';
 
 export default { RapiDoc };
-export { OAuthReceiver };
+export { OAuthReceiver, RapiSchema };

src/rapischema.js

@@ -0,0 +1,38 @@
+import { LitElement, html } from 'lit-element';
+import { schemaInObjectNotation } from '@/utils/schema-utils';
+
+export default class RapiSchema extends LitElement {
+  static get properties() {
+    return {
+      schemaStyle: { type: String, attribute: 'schema-style' },
+      schemaData: { type: Object },
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.schemaStyle || !'tree, table,'.includes(`${this.schemaStyle},`)) { this.schemaStyle = 'tree'; }
+  }
+
+  handleSlotChange(e) {
+    const assignedElements = e.target.assignedElements();
+    if (assignedElements.length > 0) {
+      const schema = assignedElements[0].textContent;
+      this.schemaData = schemaInObjectNotation(JSON.parse(schema), {});
+    }
+  }
+
+  render() {
+    if (!this.schemaData) {
+      return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+    if (this.schemaStyle === 'tree') {
+      return html`<schema-tree .data='${this.schemaData}'></schema-tree>`;
+    }
+    if (this.schemaStyle === 'table') {
+      return html`<schema-table .data='${this.schemaData}'></schema-table>`;
+    }
+  }
+}
+
+customElements.define('rapi-schema', RapiSchema);