From d35c3a5754a97ac514c9f5164f42213be50dcc1c Mon Sep 17 00:00:00 2001
From: Johan Euphrosine <proppy@google.com>
Date: Tue, 28 Jul 2020 02:24:31 +0900
Subject: [PATCH] rapidoc: add RapiSchema component

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

Fixes #253
---
 index.html                     | 24 +++++++++++++++++++--
 src/components/schema-table.js |  4 ----
 src/components/schema-tree.js  |  5 -----
 src/index.js                   |  3 ++-
 src/rapischema.js              | 38 ++++++++++++++++++++++++++++++++++
 5 files changed, 62 insertions(+), 12 deletions(-)
 create mode 100644 src/rapischema.js

diff --git a/index.html b/index.html
index eaf70c04..284dd944 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
+</html>
diff --git a/src/components/schema-table.js b/src/components/schema-table.js
index 1e1c76e3..90da549c 100644
--- a/src/components/schema-table.js
+++ b/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() {
diff --git a/src/components/schema-tree.js b/src/components/schema-tree.js
index 2a207282..07e3d70d 100644
--- a/src/components/schema-tree.js
+++ b/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() {
diff --git a/src/index.js b/src/index.js
index 21c5881e..977ee2f6 100644
--- a/src/index.js
+++ b/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 };
diff --git a/src/rapischema.js b/src/rapischema.js
new file mode 100644
index 00000000..054cdc08
--- /dev/null
+++ b/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);