Wire up json rendering.

Author: Templarian

src/pg/json/json.ts

@@ -2,35 +2,50 @@ import { Component, Prop, Part } from '@pictogrammers/element';
 
 import PgJsonArray from '../jsonArray/jsonArray';
 import PgJsonObject from '../jsonObject/jsonObject';
-import PgJsonString from '../jsonString/jsonString';
 
 import template from './json.html';
 import style from './json.css';
 
 function unwrapObject(obj: any) {
-  return {
-    type: PgJsonObject,
-    items: Object.keys(obj).map((key) => {
+  return Object.keys(obj).map((key) => {
+    if (Array.isArray(obj[key])) {
       return {
         key,
-        value: obj[key],
-        type: PgJsonString,
-      }
-    })
-  };
+        value: unwrapArray(obj[key]),
+      };
+    }
+    if (typeof obj[key] === 'object') {
+      return {
+        key,
+        value: unwrapObject(obj[key]),
+      };
+    }
+    return {
+      key,
+      value: obj[key],
+    };
+  });
 }
 
 function unwrapArray(items: any) {
-  return {
-    type: PgJsonArray,
-    items: items.map((item) => {
-      if (Array.isArray(item)) {
-        return unwrapArray(item);
-      } else {
-        return unwrapObject(item);
-      }
-    })
-  };
+  return items.map((item, i) => {
+    if (Array.isArray(item)) {
+      return {
+        key: i.toString(),
+        value: unwrapArray(item),
+      };
+    }
+    if (typeof item === 'object') {
+      return {
+        key: i.toString(),
+        value: unwrapObject(item),
+      };
+    }
+    return {
+      key: i.toString(),
+      value: item,
+    }
+  });
 }
 
 @Component({
@@ -49,11 +64,11 @@ export default class PgJson extends HTMLElement {
     if (changes.value && this.value !== null) {
       if (typeof this.value === 'object') {
         const $object = document.createElement('pg-json-object') as PgJsonObject;
-        $object.items = unwrapObject(this.value).items;
+        $object.value = unwrapObject(this.value);
         this.$container.appendChild($object);
       } else if (Array.isArray(this.value)) {
         const $array = document.createElement('pg-json-array') as PgJsonArray;
-        $array.items = unwrapArray(this.value).items;
+        $array.value = unwrapArray(this.value);
         this.$container.appendChild($array);
       }
     }

src/pg/jsonArray/jsonArray.ts

@@ -1,21 +1,46 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
 
-import template from './json.html';
-import style from './json.css';
+import PgJsonObject from '../jsonArray/jsonArray';
+import PgJsonString from '../jsonString/jsonString';
+import PgJsonBoolean from '../jsonBoolean/jsonBoolean';
+import PgJsonNumber from '../jsonNumber/jsonNumber';
 
-const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+import template from './jsonArray.html';
+import style from './jsonArray.css';
 
 @Component({
   selector: 'pg-json-array',
   style,
   template,
 })
 export default class PgJsonArray extends HTMLElement {
-  @Prop() items: any[] = [];
+  @Prop() key: string = '';
+  @Prop() value: any[] = [];
+  @Prop() expanded: boolean = false;
 
   @Part() $items: HTMLElement;
 
-  render(changes) {
-
+  connectedCallback() {
+    forEach({
+      container: this.$items,
+      items: this.value,
+      type: (item) => {
+        if (Array.isArray(item.value)) {
+          return PgJsonArray;
+        }
+        if (typeof item.value === 'object') {
+          return PgJsonObject;
+        }
+        if (typeof item.value === 'string') {
+          return PgJsonString;
+        }
+        if (typeof item.value === 'boolean') {
+          return PgJsonBoolean;
+        }
+        if (typeof item.value === 'number') {
+          return PgJsonNumber;
+        }
+      },
+    });
   }
 }

src/pg/jsonBoolean/README.md

@@ -0,0 +1,3 @@
+# `PgJsonBoolean`
+
+The `PgJsonBoolean` is used in `pg-json`.

src/pg/jsonBoolean/jsonBoolean.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-flex;
+}

src/pg/jsonBoolean/jsonBoolean.html

@@ -0,0 +1,5 @@
+<div part="key"></div>
+<div part="seperator">:</div>
+<div part="container">
+  <div part="value"></div>
+</div>

src/pg/jsonBoolean/jsonBoolean.ts

@@ -0,0 +1,26 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './jsonBoolean.html';
+import style from './jsonBoolean.css';
+
+@Component({
+  selector: 'pg-json-boolean',
+  style,
+  template,
+})
+export default class PgJsonBoolean extends HTMLElement {
+  @Prop() key: string = '';
+  @Prop() value: boolean = false;
+
+  @Part() $key: HTMLDivElement;
+  @Part() $value: HTMLDivElement;
+
+  render(changes) {
+    if (changes.key) {
+      this.$key.textContent = this.key;
+    }
+    if (changes.value) {
+      this.$value.textContent = this.value ? 'true' : 'false';
+    }
+  }
+}

src/pg/jsonNumber/README.md

@@ -0,0 +1,3 @@
+# `<pg-json>`
+
+The `PgJsonArray` is used in `pg-json`.

src/pg/jsonNumber/jsonNumber.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-flex;
+}

src/pg/jsonNumber/jsonNumber.html

@@ -0,0 +1,7 @@
+<div part="key"></div>
+<div part="seperator">:</div>
+<div part="container">
+  <part>&quot;</part>
+  <div part="value"></div>
+  <part>&quot;</part>
+</div>

src/pg/jsonNumber/jsonNumber.ts

@@ -0,0 +1,26 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './jsonNumber.html';
+import style from './jsonNumber.css';
+
+@Component({
+  selector: 'pg-json-number',
+  style,
+  template,
+})
+export default class PgJsonNumber extends HTMLElement {
+  @Prop() key: string = '';
+  @Prop() value: number = 0;
+
+  @Part() $key: HTMLDivElement;
+  @Part() $value: HTMLDivElement;
+
+  render(changes) {
+    if (changes.key) {
+      this.$key.textContent = this.key;
+    }
+    if (changes.value) {
+      this.$value.textContent = `${this.value}`;
+    }
+  }
+}