@_1602/json-viewer - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/json-viewer.es.js

 const K = `:host{--expand-bullet-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><path d="M10.5 6.65 4.9 2.8v7.7" fill="black"/></svg>');--font-size: 11px;--font-family: monospace;--font-weight: 400;--background-color: #fff;--color: rgb(31, 31, 31);--expand-bullet-color: black;--expand-bullet-width: 14px;--expand-bullet-height: 14px;--key-color: rgb(142, 0, 75);--number-value-color: rgb(8, 66, 160);--bool-value-color: rgb(8, 66, 160);--null-value-color: rgba(31, 31, 31, .38);--string-value-color: rgb(220, 54, 46);--focused-node-background: #eee;--hovered-node-background: #eee}@media (prefers-color-scheme: dark){:host{--background-color: #242424;--color: rgba(255, 255, 255, .87);--expand-bullet-color: white;--key-color: #7cacf8ff;--number-value-color: #9980ff;--bool-value-color: #9980ff;--null-value-color: #e3e3e361;--string-value-color: #5cd5fb;--focused-node-background: #3d3d3d;--hovered-node-background: #3d3d3d}}.json-tree{font-family:var(--jv-font-family, var(--font-family));font-size:var(--jv-font-size, var(--font-size));font-weight:var(--jv-font-weight, var(--font-weight));line-height:1.5;background-color:var(--jv-background-color, var(--background-color));color:var(--jv-color, var(--color));overflow:auto;color-scheme:light dark}.json-tree ol{list-style-type:none;padding-left:12px;display:none}.json-tree li:not(.parent):before{background-color:transparent}.json-tree li:before{content:"  ";mask-image:var(--jv-expand-bullet-mask-image, var(--expand-bullet-mask-image));background-color:var(--jv-expand-bullet-color, var(--expand-bullet-color));width:var(--jv-expand-bullet-width, var(--expand-bullet-width));height:var(--jv-expand-bullet-height, var(--expand-bullet-height));transition:transform .2s;margin-right:2px}.json-tree ol.expanded{display:block}.json-tree li.expanded:before{transform:rotate(90deg)}.json-tree li{text-overflow:ellipsis;white-space:nowrap;position:relative;display:flex;align-items:center;min-height:16px;cursor:default}.json-tree :focus{outline:none}.key-name{color:var(--jv-key-color, var(--key-color))}.delim{white-space:pre;flex-shrink:0}.string-value{color:var(--jv-string-value-color, var(--string-value-color))}.num-value{color:var(--jv-number-value-color, var(--number-value-color))}.bool-value{color:var(--jv-bool-value-color, var(--bool-value-color))}.null-value{color:var(--jv-null-value-color, var(--null-value-color))}.selected:focus .key-value-pair{background:var(--jv-focused-node-background, var(--focused-node-background))}.json-tree li .fill{position:absolute;inset:0;background:var(--jv-hovered-node-background, var(--hovered-node-background));display:none;margin-left:-9000px;z-index:-1}.json-tree li:hover .fill{display:block}`;
-function i(t, e, n) {
+function a(t, e, n) {
   const l = document.createElement(t);
-  return e && Object.entries(e).forEach(([a, u]) => {
-    y(l, a, u);
-  }), n && n.forEach((a) => {
-    a && l.appendChild(a);
+  return e && Object.entries(e).forEach(([i, u]) => {
+    u !== "" && y(l, i, u);
+  }), n && n.forEach((i) => {
+    i && l.appendChild(i);
   }), l;
@@ -13,5 +13,21 @@ }
 }
-function A(t) {
+function C(t) {
   const e = document.createEvent("MouseEvent");
-  e.initMouseEvent("click", !0, !0, window, 0, 0, 0, 0, 0, !1, !1, !1, !1, 0, null), t.dispatchEvent(e);
+  e.initMouseEvent(
+    "click",
+    !0,
+    !0,
+    window,
+    0,
+    0,
+    0,
+    0,
+    0,
+    !1,
+    !1,
+    !1,
+    !1,
+    0,
+    null
+  ), t.dispatchEvent(e);
 }
@@ -82,14 +98,18 @@ function j(t) {
 }
-const w = 100, C = "aria-selected", I = "aria-expanded";
+const w = 100, I = "aria-selected", R = "aria-expanded";
 function J(t, e) {
   let n = null;
-  const l = i("div", { class: "json-tree" }, [
-    i("style", {}, [d(K)]),
-    i("ol", {
-      class: "expanded",
-      role: "tree"
-    }, h({ value: t.value, path: "" }))
+  const l = a("div", { class: "json-tree" }, [
+    a("style", {}, [d(K)]),
+    a(
+      "ol",
+      {
+        class: "expanded",
+        role: "tree"
+      },
+      h({ value: t.value, path: "" })
+    )
   ]);
-  l.addEventListener("keydown", a);
-  function a(r) {
+  l.addEventListener("keydown", i);
+  function i(r) {
     if (r.altKey || r.metaKey || r.ctrlKey)
@@ -102,13 +122,15 @@ return;
     }
-    const b = o.ariaExpanded;
+    const m = o.ariaExpanded;
     switch (r.code) {
       case "ArrowLeft":
-        if (r.preventDefault(), b)
-          return A(o);
-        u(o.parentElement?.previousElementSibling);
+        if (r.preventDefault(), m)
+          return C(o);
+        o.parentElement && u(
+          o.parentElement.previousElementSibling
+        );
         break;
       case "ArrowRight":
-        if (r.preventDefault(), b)
+        if (r.preventDefault(), m)
           return u(j(o));
-        A(o);
+        C(o);
         break;
@@ -130,5 +152,5 @@ case "ArrowDown":
   function x(r) {
-    n && (n.classList.remove("selected"), N(n, C), N(n, "tabindex")), n = r, n.classList.add("selected"), y(n, "tabindex", "1"), y(n, C, "true");
+    n && (n.classList.remove("selected"), N(n, I), N(n, "tabindex")), n = r, n.classList.add("selected"), y(n, "tabindex", "0"), y(n, I, "true");
     const o = r.getAttribute("json-path");
-    t.selectedPath = o || "", t.focusedNode = o;
+    t.selectedPath = o || "/", t.focusedNode = o;
   }
@@ -138,56 +160,76 @@ function h({
     path: o,
-    k: b,
-    skipPreview: O,
-    displayIndexOffset: $ = 0
+    k: m,
+    skipPreview: $,
+    displayIndexOffset: D = 0
   }) {
-    const m = typeof r == "object" && r !== null && Object.keys(r).length > 0;
-    let f = !!t.expandedNodes[o], E = f, D = t.selectedPath === o || t.focusedNode === o;
-    const s = i("li", {
-      role: "treeitem",
-      "json-path": o,
-      class: P(),
-      tabindex: D ? "1" : "",
-      "aria-expanded": m && f ? "true" : ""
-    }, [
-      i("span", { class: "key-value-pair" }, O && b ? [d(b)] : B(r, b)),
-      i("div", { class: "fill" })
-    ]);
-    s.addEventListener("blur", () => {
+    const v = typeof r == "object" && r !== null && Object.keys(r).length > 0;
+    let f = !!t.expandedNodes[o || "/"], k = f, L = t.selectedPath === o || t.focusedNode === o;
+    const s = a(
+      "li",
+      {
+        role: "treeitem",
+        "json-path": o || "/",
+        class: V(),
+        tabindex: L ? "0" : "",
+        "aria-expanded": v && f ? "true" : ""
+      },
+      [
+        a(
+          "span",
+          { class: "key-value-pair" },
+          $ && m ? [d(m)] : B(r, m)
+        ),
+        a("div", { class: "fill" })
+      ]
+    );
+    L && (n = s), s.addEventListener("blur", () => {
       t.focusedNode === o && (t.focusedNode = null);
     }), s.addEventListener("copy", (c) => {
-      c.clipboardData && c.clipboardData.setData("text/plain", JSON.stringify(r, null, 2)), c.preventDefault();
+      c.clipboardData && c.clipboardData.setData(
+        "text/plain",
+        JSON.stringify(r, null, 2)
+      ), c.preventDefault();
     });
-    function L() {
+    function P() {
       let c = [];
-      if (m)
+      if (v)
         if (Array.isArray(r) && r.length > w) {
-          const g = [];
+          const b = [];
           for (let p = 0; p < r.length; p += w) {
             const M = `[${p} … ${Math.min(r.length - 1, p + w - 1)}]`;
-            g.push(h({
-              k: M,
-              displayIndexOffset: p,
-              skipPreview: !0,
-              value: r.slice(p, p + w),
-              path: o + "/" + p
-            }));
+            b.push(
+              h({
+                k: M,
+                displayIndexOffset: p,
+                skipPreview: !0,
+                value: r.slice(p, p + w),
+                path: o + "/" + p
+              })
+            );
           }
-          c = g.flat();
+          c = b.flat();
         } else
-          c = Object.entries(r).map(([g, p]) => (Array.isArray(r) && (g = (parseInt(g, 10) + $).toString()), h({
-            k: g,
+          c = Object.entries(r).map(([b, p]) => (Array.isArray(r) && (b = (parseInt(b, 10) + D).toString()), h({
+            k: b,
             value: p,
-            path: o + "/" + g
+            path: o + "/" + b
           }))).flat();
-      return c.length ? i("ol", { role: "group", class: V() }, c) : null;
+      return c.length ? a(
+        "ol",
+        { role: "group", class: A() },
+        c
+      ) : null;
     }
-    let v = null;
-    return m && f && E && (v = L()), s.addEventListener("click", () => {
-      f = !f, t.expandedNodes[o] = f, e(), m && f && !E && (v = L(), s.parentNode.insertBefore(v, s.nextElementSibling), E = !0), v && (v.className = V()), s.className = P(), x(s), s.tabIndex = 1, s.focus(), m && (f ? y(s, I, "true") : N(s, I));
-    }), v ? [s, v] : [s];
-    function P() {
+    let g = null;
+    return v && f && k && (g = P()), s.addEventListener("click", () => {
+      v && (f = !f, t.expandedNodes[o || "/"] = f, e()), v && f && !k && (g = P(), s.parentNode.insertBefore(
+        g,
+        s.nextElementSibling
+      ), k = !0), g && (g.className = A()), s.className = V(), x(s), s.tabIndex = 0, s.focus(), v && (f ? y(s, R, "true") : N(s, R));
+    }), g ? [s, g] : [s];
+    function V() {
       const c = [];
-      return m && c.push("parent"), f && c.push("expanded"), (o === t.focusedNode || o === t.selectedPath) && c.push("selected"), c.join(" ");
+      return v && c.push("parent"), f && c.push("expanded"), (o === t.focusedNode || o === t.selectedPath) && c.push("selected"), c.join(" ");
     }
-    function V() {
+    function A() {
       return f ? "expanded" : "";
@@ -201,28 +243,37 @@ }
       case "string":
-        return i("span", { class: "string-value" }, [d(`"${t}"`)]);
+        return a("span", { class: "string-value" }, [
+          d(`"${t}"`)
+        ]);
       case "number":
-        return i("span", { class: "num-value" }, [d(t.toString())]);
+        return a("span", { class: "num-value" }, [
+          d(t.toString())
+        ]);
       case "boolean":
-        return i("span", { class: "bool-value" }, [d(t ? "true" : "false")]);
+        return a("span", { class: "bool-value" }, [
+          d(t ? "true" : "false")
+        ]);
       case "object":
-        return t === null ? i("span", { class: "null-value" }, [d("null")]) : Array.isArray(t) ? i("span", {}, [d(k(t))]) : i("span", {}, [d(k(t))]);
+        return t === null ? a("span", { class: "null-value" }, [d("null")]) : Array.isArray(t) ? a("span", {}, [d(E(t))]) : a("span", {}, [d(E(t))]);
       default:
-        return i("span", {}, [d("invalid json value")]);
+        return a("span", {}, [d("invalid json value")]);
     }
   })();
-  return [
-    e ? [i("span", { class: "key-name" }, [d(e)]), i("span", { class: "delim" }, [d(": ")])] : [],
+  return e = e === "" ? '""' : e, [
+    e ? [
+      a("span", { class: "key-name" }, [d(e)]),
+      a("span", { class: "delim" }, [d(": ")])
+    ] : [],
     [n]
   ].flat();
 }
-const R = /* @__PURE__ */ new Map();
-function k(t, e = 2) {
+const O = /* @__PURE__ */ new Map();
+function E(t, e = 2) {
   if (e !== 2)
-    return a();
-  const n = R.get(t);
+    return i();
+  const n = O.get(t);
   if (n)
     return n;
-  const l = a();
-  return R.set(t, l), l;
-  function a() {
+  const l = i();
+  return O.set(t, l), l;
+  function i() {
     switch (typeof t) {
@@ -234,3 +285,3 @@ case "object": {
           const h = t.length;
-          return `[${t.slice(0, 2).map((r) => k(r, e - 1)).join(", ")}${h > 2 ? ",…" : ""}]`;
+          return `[${t.slice(0, 2).map((r) => E(r, e - 1)).join(", ")}${h > 2 ? ",…" : ""}]`;
         }
@@ -242,3 +293,5 @@ if (t === null)
         const u = Object.entries(t), x = u.length;
-        return `{${u.slice(0, 2).map(([h, r]) => `${h}: ${k(r, e - 1)}`).join(", ")}${x > 2 ? ",…" : ""}}`;
+        return `{${u.slice(0, 2).map(
+          ([h, r]) => `${h || '""'}: ${E(r, e - 1)}`
+        ).join(", ")}${x > 2 ? ",…" : ""}}`;
       }
@@ -281,11 +334,16 @@ case "string":
       this.jsonViewerState.value = JSON.parse(this.valueProp);
-    } catch (a) {
-      return this.appRoot.innerText = a;
+    } catch (i) {
+      return this.appRoot.innerText = i;
     }
     const [n, l] = J(this.jsonViewerState, () => {
-      this.emit("expanded-change", { expanded: this.jsonViewerState.expandedNodes });
+      const i = {
+        expanded: this.jsonViewerState.expandedNodes
+      };
+      this.emit("expanded-change", i);
     });
     if (this.shadowRoot.replaceChild(n, this.shadowRoot.firstElementChild), e) {
-      const a = n.querySelector(`:scope li[json-path="${e}"]`);
-      a && l(a);
+      const i = n.querySelector(
+        `:scope li[json-path="${e}"]`
+      );
+      i && l(i);
     }
@@ -292,0 +350,0 @@ }

dist/json-viewer.umd.js

@@ -1,1 +0,1 @@
-(function(x){typeof define=="function"&&define.amd?define(x):x()})(function(){"use strict";const x=`:host{--expand-bullet-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><path d="M10.5 6.65 4.9 2.8v7.7" fill="black"/></svg>');--font-size: 11px;--font-family: monospace;--font-weight: 400;--background-color: #fff;--color: rgb(31, 31, 31);--expand-bullet-color: black;--expand-bullet-width: 14px;--expand-bullet-height: 14px;--key-color: rgb(142, 0, 75);--number-value-color: rgb(8, 66, 160);--bool-value-color: rgb(8, 66, 160);--null-value-color: rgba(31, 31, 31, .38);--string-value-color: rgb(220, 54, 46);--focused-node-background: #eee;--hovered-node-background: #eee}@media (prefers-color-scheme: dark){:host{--background-color: #242424;--color: rgba(255, 255, 255, .87);--expand-bullet-color: white;--key-color: #7cacf8ff;--number-value-color: #9980ff;--bool-value-color: #9980ff;--null-value-color: #e3e3e361;--string-value-color: #5cd5fb;--focused-node-background: #3d3d3d;--hovered-node-background: #3d3d3d}}.json-tree{font-family:var(--jv-font-family, var(--font-family));font-size:var(--jv-font-size, var(--font-size));font-weight:var(--jv-font-weight, var(--font-weight));line-height:1.5;background-color:var(--jv-background-color, var(--background-color));color:var(--jv-color, var(--color));overflow:auto;color-scheme:light dark}.json-tree ol{list-style-type:none;padding-left:12px;display:none}.json-tree li:not(.parent):before{background-color:transparent}.json-tree li:before{content:"  ";mask-image:var(--jv-expand-bullet-mask-image, var(--expand-bullet-mask-image));background-color:var(--jv-expand-bullet-color, var(--expand-bullet-color));width:var(--jv-expand-bullet-width, var(--expand-bullet-width));height:var(--jv-expand-bullet-height, var(--expand-bullet-height));transition:transform .2s;margin-right:2px}.json-tree ol.expanded{display:block}.json-tree li.expanded:before{transform:rotate(90deg)}.json-tree li{text-overflow:ellipsis;white-space:nowrap;position:relative;display:flex;align-items:center;min-height:16px;cursor:default}.json-tree :focus{outline:none}.key-name{color:var(--jv-key-color, var(--key-color))}.delim{white-space:pre;flex-shrink:0}.string-value{color:var(--jv-string-value-color, var(--string-value-color))}.num-value{color:var(--jv-number-value-color, var(--number-value-color))}.bool-value{color:var(--jv-bool-value-color, var(--bool-value-color))}.null-value{color:var(--jv-null-value-color, var(--null-value-color))}.selected:focus .key-value-pair{background:var(--jv-focused-node-background, var(--focused-node-background))}.json-tree li .fill{position:absolute;inset:0;background:var(--jv-hovered-node-background, var(--hovered-node-background));display:none;margin-left:-9000px;z-index:-1}.json-tree li:hover .fill{display:block}`;function i(t,e,n){const l=document.createElement(t);return e&&Object.entries(e).forEach(([a,d])=>{y(l,a,d)}),n&&n.forEach(a=>{a&&l.appendChild(a)}),l}function u(t){return document.createTextNode(t)}function P(t){const e=document.createEvent("MouseEvent");e.initMouseEvent("click",!0,!0,window,0,0,0,0,0,!1,!1,!1,!1,0,null),t.dispatchEvent(e)}function w(t){if(!t)return null;const e=t.nextElementSibling;if(!e)return w(t.parentElement);if(e.tagName==="LI")return t.nextElementSibling;if(e.tagName==="OL"){const n=e.firstElementChild;return n?.tagName==="LI"&&n.checkVisibility()?n:w(e)}return null}function N(t){if(!t)return null;const e=t.previousElementSibling;if(!e)return N(t.parentElement);if(e.tagName==="LI")return e;if(e.tagName==="OL"){if(e.checkVisibility()){let{lastElementChild:n}=e;for(;n?.tagName==="OL"&&n.checkVisibility();)n=n.lastElementChild;if(n&&n.tagName==="OL"&&n.previousElementSibling?.tagName==="LI")return n.previousElementSibling;if(n&&n.tagName==="LI")return n}return N(e)}return null}function $(t){const e=t.getBoundingClientRect(),n=M(t);return n?e.top>=0&&e.left>=0&&e.bottom<=n.clientHeight:!0}const D=t=>{if(!(t instanceof HTMLElement||t instanceof SVGElement))return!1;const e=getComputedStyle(t);return["overflow","overflow-x","overflow-y"].some(n=>{const l=e.getPropertyValue(n);return l==="auto"||l==="scroll"})};function M(t){let e=t.parentElement;for(;e;){if(D(e))return e;e=e.parentElement}return document.scrollingElement||document.documentElement}function S(t,e){t.removeAttribute(e)}function y(t,e,n){t.setAttribute(e,n)}const j=100,V="aria-selected",A="aria-expanded";function K(t,e){let n=null;const l=i("div",{class:"json-tree"},[i("style",{},[u(x)]),i("ol",{class:"expanded",role:"tree"},h({value:t.value,path:""}))]);l.addEventListener("keydown",a);function a(r){if(r.altKey||r.metaKey||r.ctrlKey)return;const o=l.querySelector(":scope li.selected");if(!o){d(l.firstElementChild?.firstElementChild);return}const b=o.ariaExpanded;switch(r.code){case"ArrowLeft":if(r.preventDefault(),b)return P(o);d(o.parentElement?.previousElementSibling);break;case"ArrowRight":if(r.preventDefault(),b)return d(w(o));P(o);break;case"ArrowDown":case"KeyJ":r.preventDefault(),d(w(o));break;case"ArrowUp":case"KeyK":r.preventDefault(),d(N(o));break}}function d(r){r&&r.getAttribute("json-path")!==null&&(E(r),r.focus(),r instanceof HTMLElement&&($(r)||r.scrollIntoView({block:"center"})))}return[l,d];function E(r){n&&(n.classList.remove("selected"),S(n,V),S(n,"tabindex")),n=r,n.classList.add("selected"),y(n,"tabindex","1"),y(n,V,"true");const o=r.getAttribute("json-path");t.selectedPath=o||"",t.focusedNode=o}function h({value:r,path:o,k:b,skipPreview:z,displayIndexOffset:J=0}){const m=typeof r=="object"&&r!==null&&Object.keys(r).length>0;let f=!!t.expandedNodes[o],L=f,B=t.selectedPath===o||t.focusedNode===o;const s=i("li",{role:"treeitem","json-path":o,class:R(),tabindex:B?"1":"","aria-expanded":m&&f?"true":""},[i("span",{class:"key-value-pair"},z&&b?[u(b)]:T(r,b)),i("div",{class:"fill"})]);s.addEventListener("blur",()=>{t.focusedNode===o&&(t.focusedNode=null)}),s.addEventListener("copy",c=>{c.clipboardData&&c.clipboardData.setData("text/plain",JSON.stringify(r,null,2)),c.preventDefault()});function I(){let c=[];if(m)if(Array.isArray(r)&&r.length>j){const g=[];for(let p=0;p<r.length;p+=j){const _=`[${p} … ${Math.min(r.length-1,p+j-1)}]`;g.push(h({k:_,displayIndexOffset:p,skipPreview:!0,value:r.slice(p,p+j),path:o+"/"+p}))}c=g.flat()}else c=Object.entries(r).map(([g,p])=>(Array.isArray(r)&&(g=(parseInt(g,10)+J).toString()),h({k:g,value:p,path:o+"/"+g}))).flat();return c.length?i("ol",{role:"group",class:O()},c):null}let v=null;return m&&f&&L&&(v=I()),s.addEventListener("click",()=>{f=!f,t.expandedNodes[o]=f,e(),m&&f&&!L&&(v=I(),s.parentNode.insertBefore(v,s.nextElementSibling),L=!0),v&&(v.className=O()),s.className=R(),E(s),s.tabIndex=1,s.focus(),m&&(f?y(s,A,"true"):S(s,A))}),v?[s,v]:[s];function R(){const c=[];return m&&c.push("parent"),f&&c.push("expanded"),(o===t.focusedNode||o===t.selectedPath)&&c.push("selected"),c.join(" ")}function O(){return f?"expanded":""}}}function T(t,e){const n=(()=>{switch(typeof t){case"string":return i("span",{class:"string-value"},[u(`"${t}"`)]);case"number":return i("span",{class:"num-value"},[u(t.toString())]);case"boolean":return i("span",{class:"bool-value"},[u(t?"true":"false")]);case"object":return t===null?i("span",{class:"null-value"},[u("null")]):Array.isArray(t)?i("span",{},[u(k(t))]):i("span",{},[u(k(t))]);default:return i("span",{},[u("invalid json value")])}})();return[e?[i("span",{class:"key-name"},[u(e)]),i("span",{class:"delim"},[u(": ")])]:[],[n]].flat()}const C=new Map;function k(t,e=2){if(e!==2)return a();const n=C.get(t);if(n)return n;const l=a();return C.set(t,l),l;function a(){switch(typeof t){case"object":{if(Array.isArray(t)){if(e===0)return"[…]";const h=t.length;return`[${t.slice(0,2).map(r=>k(r,e-1)).join(", ")}${h>2?",…":""}]`}if(t===null)return"null";if(e===0)return"{…}";const d=Object.entries(t),E=d.length;return`{${d.slice(0,2).map(([h,r])=>`${h}: ${k(r,e-1)}`).join(", ")}${E>2?",…":""}}`}case"string":return`"${t.substring(0,100)}"`;default:return t.toString()}}}class H extends HTMLElement{valueProp;jsonViewerState;appRoot;constructor(){super(),this.attachShadow({mode:"open"}),this.valueProp="",this.jsonViewerState={expandedNodes:{},focusedNode:null,value:null,selectedPath:""},this.appRoot=document.createElement("div"),this.shadowRoot.appendChild(this.appRoot)}connectedCallback(){if(this.valueProp=this.getAttribute("value")||this.textContent||"",typeof this.valueProp!="string")return this.appRoot.innerText=`json-viewer expects value to be string, got ${typeof this.valueProp}`;const e=this.getAttribute("expanded");if(typeof e=="string")try{this.jsonViewerState.expandedNodes=JSON.parse(e)}catch{}this.render()}render(){if(!this.valueProp)return;const{focusedNode:e}=this.jsonViewerState;try{this.jsonViewerState.value=JSON.parse(this.valueProp)}catch(a){return this.appRoot.innerText=a}const[n,l]=K(this.jsonViewerState,()=>{this.emit("expanded-change",{expanded:this.jsonViewerState.expandedNodes})});if(this.shadowRoot.replaceChild(n,this.shadowRoot.firstElementChild),e){const a=n.querySelector(`:scope li[json-path="${e}"]`);a&&l(a)}}get value(){return this.valueProp}set value(e){if(this.valueProp!==e&&(this.valueProp=e,e!=="")){if(typeof e!="string"){this.appRoot.innerText=`json-viewer expects value to be string, got ${typeof e}`;return}this.render()}}get expanded(){return this.jsonViewerState.expandedNodes}set expanded(e){this.jsonViewerState.expandedNodes!==e&&(this.jsonViewerState.expandedNodes=e,this.render())}emit(e,n={}){let l=new CustomEvent(`json-viewer:${e}`,{bubbles:!0,cancelable:!0,detail:n});return this.dispatchEvent(l)}}customElements.define("json-viewer",H)});
+(function(x){typeof define=="function"&&define.amd?define(x):x()})(function(){"use strict";const x=`:host{--expand-bullet-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><path d="M10.5 6.65 4.9 2.8v7.7" fill="black"/></svg>');--font-size: 11px;--font-family: monospace;--font-weight: 400;--background-color: #fff;--color: rgb(31, 31, 31);--expand-bullet-color: black;--expand-bullet-width: 14px;--expand-bullet-height: 14px;--key-color: rgb(142, 0, 75);--number-value-color: rgb(8, 66, 160);--bool-value-color: rgb(8, 66, 160);--null-value-color: rgba(31, 31, 31, .38);--string-value-color: rgb(220, 54, 46);--focused-node-background: #eee;--hovered-node-background: #eee}@media (prefers-color-scheme: dark){:host{--background-color: #242424;--color: rgba(255, 255, 255, .87);--expand-bullet-color: white;--key-color: #7cacf8ff;--number-value-color: #9980ff;--bool-value-color: #9980ff;--null-value-color: #e3e3e361;--string-value-color: #5cd5fb;--focused-node-background: #3d3d3d;--hovered-node-background: #3d3d3d}}.json-tree{font-family:var(--jv-font-family, var(--font-family));font-size:var(--jv-font-size, var(--font-size));font-weight:var(--jv-font-weight, var(--font-weight));line-height:1.5;background-color:var(--jv-background-color, var(--background-color));color:var(--jv-color, var(--color));overflow:auto;color-scheme:light dark}.json-tree ol{list-style-type:none;padding-left:12px;display:none}.json-tree li:not(.parent):before{background-color:transparent}.json-tree li:before{content:"  ";mask-image:var(--jv-expand-bullet-mask-image, var(--expand-bullet-mask-image));background-color:var(--jv-expand-bullet-color, var(--expand-bullet-color));width:var(--jv-expand-bullet-width, var(--expand-bullet-width));height:var(--jv-expand-bullet-height, var(--expand-bullet-height));transition:transform .2s;margin-right:2px}.json-tree ol.expanded{display:block}.json-tree li.expanded:before{transform:rotate(90deg)}.json-tree li{text-overflow:ellipsis;white-space:nowrap;position:relative;display:flex;align-items:center;min-height:16px;cursor:default}.json-tree :focus{outline:none}.key-name{color:var(--jv-key-color, var(--key-color))}.delim{white-space:pre;flex-shrink:0}.string-value{color:var(--jv-string-value-color, var(--string-value-color))}.num-value{color:var(--jv-number-value-color, var(--number-value-color))}.bool-value{color:var(--jv-bool-value-color, var(--bool-value-color))}.null-value{color:var(--jv-null-value-color, var(--null-value-color))}.selected:focus .key-value-pair{background:var(--jv-focused-node-background, var(--focused-node-background))}.json-tree li .fill{position:absolute;inset:0;background:var(--jv-hovered-node-background, var(--hovered-node-background));display:none;margin-left:-9000px;z-index:-1}.json-tree li:hover .fill{display:block}`;function i(t,e,n){const l=document.createElement(t);return e&&Object.entries(e).forEach(([a,u])=>{u!==""&&y(l,a,u)}),n&&n.forEach(a=>{a&&l.appendChild(a)}),l}function d(t){return document.createTextNode(t)}function P(t){const e=document.createEvent("MouseEvent");e.initMouseEvent("click",!0,!0,window,0,0,0,0,0,!1,!1,!1,!1,0,null),t.dispatchEvent(e)}function w(t){if(!t)return null;const e=t.nextElementSibling;if(!e)return w(t.parentElement);if(e.tagName==="LI")return t.nextElementSibling;if(e.tagName==="OL"){const n=e.firstElementChild;return n?.tagName==="LI"&&n.checkVisibility()?n:w(e)}return null}function N(t){if(!t)return null;const e=t.previousElementSibling;if(!e)return N(t.parentElement);if(e.tagName==="LI")return e;if(e.tagName==="OL"){if(e.checkVisibility()){let{lastElementChild:n}=e;for(;n?.tagName==="OL"&&n.checkVisibility();)n=n.lastElementChild;if(n&&n.tagName==="OL"&&n.previousElementSibling?.tagName==="LI")return n.previousElementSibling;if(n&&n.tagName==="LI")return n}return N(e)}return null}function D(t){const e=t.getBoundingClientRect(),n=K(t);return n?e.top>=0&&e.left>=0&&e.bottom<=n.clientHeight:!0}const M=t=>{if(!(t instanceof HTMLElement||t instanceof SVGElement))return!1;const e=getComputedStyle(t);return["overflow","overflow-x","overflow-y"].some(n=>{const l=e.getPropertyValue(n);return l==="auto"||l==="scroll"})};function K(t){let e=t.parentElement;for(;e;){if(M(e))return e;e=e.parentElement}return document.scrollingElement||document.documentElement}function S(t,e){t.removeAttribute(e)}function y(t,e,n){t.setAttribute(e,n)}const j=100,V="aria-selected",A="aria-expanded";function T(t,e){let n=null;const l=i("div",{class:"json-tree"},[i("style",{},[d(x)]),i("ol",{class:"expanded",role:"tree"},h({value:t.value,path:""}))]);l.addEventListener("keydown",a);function a(r){if(r.altKey||r.metaKey||r.ctrlKey)return;const o=l.querySelector(":scope li.selected");if(!o){u(l.firstElementChild?.firstElementChild);return}const m=o.ariaExpanded;switch(r.code){case"ArrowLeft":if(r.preventDefault(),m)return P(o);o.parentElement&&u(o.parentElement.previousElementSibling);break;case"ArrowRight":if(r.preventDefault(),m)return u(w(o));P(o);break;case"ArrowDown":case"KeyJ":r.preventDefault(),u(w(o));break;case"ArrowUp":case"KeyK":r.preventDefault(),u(N(o));break}}function u(r){r&&r.getAttribute("json-path")!==null&&(k(r),r.focus(),r instanceof HTMLElement&&(D(r)||r.scrollIntoView({block:"center"})))}return[l,u];function k(r){n&&(n.classList.remove("selected"),S(n,V),S(n,"tabindex")),n=r,n.classList.add("selected"),y(n,"tabindex","0"),y(n,V,"true");const o=r.getAttribute("json-path");t.selectedPath=o||"/",t.focusedNode=o}function h({value:r,path:o,k:m,skipPreview:J,displayIndexOffset:B=0}){const v=typeof r=="object"&&r!==null&&Object.keys(r).length>0;let f=!!t.expandedNodes[o||"/"],L=f,I=t.selectedPath===o||t.focusedNode===o;const s=i("li",{role:"treeitem","json-path":o||"/",class:O(),tabindex:I?"0":"","aria-expanded":v&&f?"true":""},[i("span",{class:"key-value-pair"},J&&m?[d(m)]:H(r,m)),i("div",{class:"fill"})]);I&&(n=s),s.addEventListener("blur",()=>{t.focusedNode===o&&(t.focusedNode=null)}),s.addEventListener("copy",c=>{c.clipboardData&&c.clipboardData.setData("text/plain",JSON.stringify(r,null,2)),c.preventDefault()});function R(){let c=[];if(v)if(Array.isArray(r)&&r.length>j){const b=[];for(let p=0;p<r.length;p+=j){const _=`[${p} … ${Math.min(r.length-1,p+j-1)}]`;b.push(h({k:_,displayIndexOffset:p,skipPreview:!0,value:r.slice(p,p+j),path:o+"/"+p}))}c=b.flat()}else c=Object.entries(r).map(([b,p])=>(Array.isArray(r)&&(b=(parseInt(b,10)+B).toString()),h({k:b,value:p,path:o+"/"+b}))).flat();return c.length?i("ol",{role:"group",class:$()},c):null}let g=null;return v&&f&&L&&(g=R()),s.addEventListener("click",()=>{v&&(f=!f,t.expandedNodes[o||"/"]=f,e()),v&&f&&!L&&(g=R(),s.parentNode.insertBefore(g,s.nextElementSibling),L=!0),g&&(g.className=$()),s.className=O(),k(s),s.tabIndex=0,s.focus(),v&&(f?y(s,A,"true"):S(s,A))}),g?[s,g]:[s];function O(){const c=[];return v&&c.push("parent"),f&&c.push("expanded"),(o===t.focusedNode||o===t.selectedPath)&&c.push("selected"),c.join(" ")}function $(){return f?"expanded":""}}}function H(t,e){const n=(()=>{switch(typeof t){case"string":return i("span",{class:"string-value"},[d(`"${t}"`)]);case"number":return i("span",{class:"num-value"},[d(t.toString())]);case"boolean":return i("span",{class:"bool-value"},[d(t?"true":"false")]);case"object":return t===null?i("span",{class:"null-value"},[d("null")]):Array.isArray(t)?i("span",{},[d(E(t))]):i("span",{},[d(E(t))]);default:return i("span",{},[d("invalid json value")])}})();return e=e===""?'""':e,[e?[i("span",{class:"key-name"},[d(e)]),i("span",{class:"delim"},[d(": ")])]:[],[n]].flat()}const C=new Map;function E(t,e=2){if(e!==2)return a();const n=C.get(t);if(n)return n;const l=a();return C.set(t,l),l;function a(){switch(typeof t){case"object":{if(Array.isArray(t)){if(e===0)return"[…]";const h=t.length;return`[${t.slice(0,2).map(r=>E(r,e-1)).join(", ")}${h>2?",…":""}]`}if(t===null)return"null";if(e===0)return"{…}";const u=Object.entries(t),k=u.length;return`{${u.slice(0,2).map(([h,r])=>`${h||'""'}: ${E(r,e-1)}`).join(", ")}${k>2?",…":""}}`}case"string":return`"${t.substring(0,100)}"`;default:return t.toString()}}}class z extends HTMLElement{valueProp;jsonViewerState;appRoot;constructor(){super(),this.attachShadow({mode:"open"}),this.valueProp="",this.jsonViewerState={expandedNodes:{},focusedNode:null,value:null,selectedPath:""},this.appRoot=document.createElement("div"),this.shadowRoot.appendChild(this.appRoot)}connectedCallback(){if(this.valueProp=this.getAttribute("value")||this.textContent||"",typeof this.valueProp!="string")return this.appRoot.innerText=`json-viewer expects value to be string, got ${typeof this.valueProp}`;const e=this.getAttribute("expanded");if(typeof e=="string")try{this.jsonViewerState.expandedNodes=JSON.parse(e)}catch{}this.render()}render(){if(!this.valueProp)return;const{focusedNode:e}=this.jsonViewerState;try{this.jsonViewerState.value=JSON.parse(this.valueProp)}catch(a){return this.appRoot.innerText=a}const[n,l]=T(this.jsonViewerState,()=>{const a={expanded:this.jsonViewerState.expandedNodes};this.emit("expanded-change",a)});if(this.shadowRoot.replaceChild(n,this.shadowRoot.firstElementChild),e){const a=n.querySelector(`:scope li[json-path="${e}"]`);a&&l(a)}}get value(){return this.valueProp}set value(e){if(this.valueProp!==e&&(this.valueProp=e,e!=="")){if(typeof e!="string"){this.appRoot.innerText=`json-viewer expects value to be string, got ${typeof e}`;return}this.render()}}get expanded(){return this.jsonViewerState.expandedNodes}set expanded(e){this.jsonViewerState.expandedNodes!==e&&(this.jsonViewerState.expandedNodes=e,this.render())}emit(e,n={}){let l=new CustomEvent(`json-viewer:${e}`,{bubbles:!0,cancelable:!0,detail:n});return this.dispatchEvent(l)}}customElements.define("json-viewer",z)});

package.json

 {
   "name": "@_1602/json-viewer",
   "private": false,
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
@@ -15,5 +15,18 @@ "main": "dist/json-viewer.es.js",
     "preversion": "npm run build",
-    "postversion": "git push origin $(git rev-parse --abbrev-ref HEAD) --tags && npm publish"
+    "postversion": "git push origin $(git rev-parse --abbrev-ref HEAD) --tags && npm publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.4.0",
+    "@storybook/addon-a11y": "^8.1.3",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/addon-interactions": "^8.1.3",
+    "@storybook/addon-links": "^8.1.3",
+    "@storybook/blocks": "^8.1.3",
+    "@storybook/test": "^8.1.3",
+    "@storybook/web-components": "^8.1.3",
+    "@storybook/web-components-vite": "^8.1.3",
+    "lit": "^3.1.3",
+    "storybook": "^8.1.3",
     "typescript": "^5.2.2",
@@ -20,0 +33,0 @@ "vite": "^5.2.0"

No alert changes

Improved metrics

Total package byte prevSize

27053

increased by4.48%

Lines of code

422

increased by15.93%

Worsened metrics

Dev dependency count

13

increased by550%

No dependency changes