First version

Author: georges-gomes

README.md

@@ -1 +1,10 @@
-# json-element
+[![edit-in-webcomponents.dev](https://webcomponents.dev/assets/ext/edit_in_wcd.svg)](https://webcomponents.dev/edit/VXr2i1M8U1s4He9bOdII)
+# `<json-element>`
+
+# Credits
+
+Inspired by [svelte-json-tree](https://github.com/tanhauhau/svelte-json-tree)
+
+Challenged by [@passle\_](https://twitter.com/passle_) "Can you do it with 0 dependencies?!" 💪
+
+> Created with [webcomponents.dev](https://webcomponents.dev)

src/index.js

@@ -0,0 +1,179 @@
+export default class JSONElement extends HTMLElement {
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    this.value = {};
+  }
+
+  static get styles() {
+    return `
+      :host {
+        font-family: monospace;
+      }
+
+      details > div {
+        padding-left: 15px;
+      }
+
+      .key {
+        color: purple;
+      }
+
+      .value {
+        color: green;
+      }
+
+      .less {
+        color: grey;
+      }
+
+    `;
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+    <style>
+      ${JSONElement.styles}
+    </style>
+    ${this.renderNode(undefined, this.value)}`;
+  }
+
+  //
+  // Main Renders
+  //
+
+  renderNode(key, obj) {
+    const type = JSONElement.objType(obj);
+    switch (type) {
+      case "Object":
+      case "Array":
+        return this.renderParent(type, key, obj);
+      default:
+        return this.renderKeyValue(key, this.renderValue(type, obj));
+    }
+  }
+
+  renderValue(type, value) {
+    switch (type) {
+      case "Boolean":
+        return `${value ? "true" : "false"}`;
+      case "String":
+        return `"${value}"`;
+      case "Number":
+        return `${value}`;
+      case "Date":
+        return `${value.toISOString()}`;
+      case "Null":
+        return "null";
+      case "Undefined":
+        return "undefined";
+      case "Function":
+      case "Symbol":
+        return `${value.toString()}`;
+      default:
+        return `###unsupported yet###`;
+    }
+  }
+
+  renderParent(type, key, value) {
+    const summary = `<summary>${this.renderSummaryObject(
+      type,
+      key,
+      value
+    )}</summary>`;
+
+    let details = "";
+    const keys = Reflect.ownKeys(value);
+    keys.forEach(key => {
+      details += this.renderNode(key, value[key]);
+    });
+
+    return `<details>${summary}<div>${details}</div></details>`;
+  }
+
+  renderKeyValue(key, value) {
+    return `<div>${this.renderSpanKey(key)}${this.renderSpanValue(
+      value
+    )}</div>`;
+  }
+
+  renderSpanKey(key) {
+    return key ? `<span class="key">${key}: </span>` : "";
+  }
+
+  renderSpanValue(value) {
+    return value ? `<span class="value">${value}</span>` : "";
+  }
+
+  renderSpanLessImportant(value) {
+    return value ? `<span class="less">${value}</span>` : "";
+  }
+
+  //
+  // Summary renders
+  //
+
+  renderSummaryObject(type, key, value) {
+    const frontkey = this.renderSpanKey(key);
+
+    let openSummary = "";
+    let closeSummary = "";
+
+    switch (type) {
+      case "Object":
+        openSummary = "Object: {";
+        closeSummary = "}";
+        break;
+      case "Array":
+        openSummary = "Array: [";
+        closeSummary = "]";
+        break;
+    }
+
+    const keys = Reflect.ownKeys(value);
+
+    const content = keys.reduce((accu, key, index) => {
+      if (index > 5) return accu;
+      if (index == 5) return accu + ` ${this.renderSpanLessImportant("...")}`;
+      // less than 5 items show in summary
+      const child = value[key];
+      return (
+        accu + ` ${this.renderSpanKey(key)}${this.renderSummaryValue(child)}`
+      );
+    }, "");
+
+    return `${frontkey}${openSummary} ${content} ${closeSummary}`;
+  }
+
+  renderSummaryValue(value) {
+    const type = JSONElement.objType(value);
+    switch (type) {
+      case "Object":
+        return this.renderSpanLessImportant("{...}");
+      case "Array":
+        return this.renderSpanLessImportant("[...]");
+      default:
+        return this.renderSpanValue(this.renderValue(type, value));
+    }
+  }
+
+  //
+  // Tools
+  //
+
+  static objType(obj) {
+    const type = Object.prototype.toString.call(obj).slice(8, -1);
+    if (type === "Object") {
+      if (typeof obj[Symbol.iterator] === "function") {
+        return "Iterable";
+      }
+      return obj.constructor.name;
+    }
+
+    return type;
+  }
+}

src/index.spec.js

@@ -0,0 +1,17 @@
+// BDD-Style Testing (powered by https://mochajs.org/)
+//
+// Import your stories
+// import * as stories from "./index.stories.js";
+//
+// Use any renderer for you stories
+// import { fixture } from "@open-wc/testing-helpers";
+//
+// Use any assert library
+import chai from "chai/chai.js";
+const expect = chai.expect;
+
+describe("Dummy test", function() {
+  it("should be always true", function() {
+    expect(true).to.be.true;
+  });
+});

src/index.stories.js

@@ -0,0 +1,22 @@
+import { html } from "lit-html";
+
+const value = {
+  array: [1, 2, 3],
+  bool: true,
+  date: new Date(),
+  object: {
+    foo: "bar"
+  },
+  symbol: Symbol("foo"),
+  nested: [
+    {
+      a: [1, "2", null, undefined]
+    }
+  ]
+};
+
+console.log(value);
+
+export const story1 = () => html`
+  <custom-element .value=${value}> </custom-element>
+`;