@_1602/json-viewer - npm Package Compare versions

Comparing version 0.0.13 to 0.1.0

dist/json-viewer.es.js

@@ -151,3 +151,3 @@ 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}`;
     const o = r.getAttribute("json-path");
-    t.selectedPath = o || "/", t.focusedNode = o;
+    t.selectedPath = o || "/", t.focusedNode = o || "/";
   }
@@ -162,3 +162,3 @@ function v({
     const g = typeof r == "object" && r !== null && Object.keys(r).length > 0;
-    let f = !!t.expandedNodes[o || "/"], k = f, A = t.selectedPath === o || t.focusedNode === o;
+    let f = !!t.expandedNodes[o || "/"], k = f, A = t.selectedPath === (o || "/") || t.focusedNode === (o || "/");
     const c = a(
@@ -183,3 +183,3 @@ "li",
     A && (n = c), c.addEventListener("blur", () => {
-      t.focusedNode === o && (t.focusedNode = null);
+      t.focusedNode === (o || "/") && (t.focusedNode = null);
     }), c.addEventListener("copy", (u) => {
@@ -186,0 +186,0 @@ u.clipboardData && u.clipboardData.setData(

dist/json-viewer.umd.js

@@ -1,1 +0,1 @@
-(function(w){typeof define=="function"&&define.amd?define(w):w()})(function(){"use strict";const w=`: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 s(t,e,n){const l=document.createElement(t);return e&&Object.entries(e).forEach(([i,a])=>{a!==""&&y(l,i,a)}),n&&n.forEach(i=>{i&&l.appendChild(i)}),l}function d(t){return document.createTextNode(t)}function L(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 j(t){if(!t)return null;const e=t.nextElementSibling;if(!e)return j(t.parentElement);if(e.tagName==="LI")return t.nextElementSibling;if(e.tagName==="OL"){const n=e.firstElementChild;return n?.tagName==="LI"&&n.checkVisibility()?n:j(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 E=100,V="aria-selected",P="aria-expanded";function T(t,e){let n=null;const l=s("div",{class:"json-tree"},[s("style",{},[d(w)]),s("ol",{class:"expanded",role:"tree"},v({value:t.value,path:""}))]);l.addEventListener("keydown",i);function i(r){if(r.altKey||r.metaKey||r.ctrlKey)return;const o=l.querySelector(":scope li.selected");if(!o){a(l.firstElementChild?.firstElementChild);return}const x=o.ariaExpanded;switch(r.code){case"ArrowLeft":if(r.preventDefault(),x)return L(o);o.parentElement&&a(o.parentElement.previousElementSibling);break;case"ArrowRight":if(r.preventDefault(),x)return a(j(o));L(o);break;case"ArrowDown":case"KeyJ":r.preventDefault(),a(j(o));break;case"ArrowUp":case"KeyK":r.preventDefault(),a(N(o));break}}function a(r){r&&r.getAttribute("json-path")!==null&&(h(r),r.focus(),r instanceof HTMLElement&&(D(r)||r.scrollIntoView({block:"center"})))}return[l,a];function h(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 v({value:r,path:o,k:x,skipPreview:J,displayIndexOffset:B=0}){const g=typeof r=="object"&&r!==null&&Object.keys(r).length>0;let f=!!t.expandedNodes[o||"/"],A=f,I=t.selectedPath===o||t.focusedNode===o;const c=s("li",{role:"treeitem","json-path":o||"/",class:R(),tabindex:I?"0":"","aria-expanded":g&&f?"true":""},[s("span",{class:"key-value-pair"},J&&x?[d(x)]:H(r,x)),s("div",{class:"fill"})]);I&&(n=c),c.addEventListener("blur",()=>{t.focusedNode===o&&(t.focusedNode=null)}),c.addEventListener("copy",u=>{u.clipboardData&&u.clipboardData.setData("text/plain",JSON.stringify(r,null,2)),u.preventDefault()});function O(){let u=[];if(g)if(Array.isArray(r)&&r.length>E){const m=[];for(let p=0;p<r.length;p+=E){const _=`[${p} … ${Math.min(r.length-1,p+E-1)}]`;m.push(v({k:_,displayIndexOffset:p,skipPreview:!0,value:r.slice(p,p+E),path:o+"/"+p}))}u=m.flat()}else u=Object.entries(r).map(([m,p])=>(Array.isArray(r)&&(m=(parseInt(m,10)+B).toString()),v({k:m,value:p,path:o+"/"+m}))).flat();return u.length?s("ol",{role:"group",class:$()},u):null}let b=null;return g&&f&&A&&(b=O()),c.addEventListener("click",()=>{g&&(f=!f,t.expandedNodes[o||"/"]=f,e()),g&&f&&!A&&(b=O(),c.parentNode.insertBefore(b,c.nextElementSibling),A=!0),b&&(b.className=$()),c.className=R(),h(c),c.tabIndex=0,c.focus(),g&&(f?y(c,P,"true"):S(c,P))}),b?[c,b]:[c];function R(){const u=[];return g&&u.push("parent"),f&&u.push("expanded"),(o===t.focusedNode||o===t.selectedPath)&&u.push("selected"),u.join(" ")}function $(){return f?"expanded":""}}}function H(t,e){const n=(()=>{switch(typeof t){case"string":return s("span",{class:"string-value"},[d(`"${t}"`)]);case"number":return s("span",{class:"num-value"},[d(t.toString())]);case"boolean":return s("span",{class:"bool-value"},[d(t?"true":"false")]);case"object":return t===null?s("span",{class:"null-value"},[d("null")]):Array.isArray(t)?s("span",{},[d(k(t))]):s("span",{},[d(k(t))]);default:return s("span",{},[d("invalid json value")])}})();return e=e===""?'""':e,[e?[s("span",{class:"key-name"},[d(e)]),s("span",{class:"delim"},[d(": ")])]:[],[n]].flat()}const C=new Map;function k(t,e=2){if(e!==2)return i();const n=C.get(t);if(n)return n;const l=i();return C.set(t,l),l;function i(){switch(typeof t){case"object":{if(Array.isArray(t)){if(e===0)return"[…]";const v=t.length;return`[${t.slice(0,2).map(r=>k(r,e-1)).join(", ")}${v>2?",…":""}]`}if(t===null)return"null";if(e===0)return"{…}";const a=Object.entries(t),h=a.length;return`{${a.slice(0,2).map(([v,r])=>`${v||'""'}: ${k(r,e-1)}`).join(", ")}${h>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(i){return this.appRoot.innerText=i}const[n,l]=T(this.jsonViewerState,()=>{const i={expanded:this.jsonViewerState.expandedNodes};this.emit("expanded-change",i)});if(this.shadowRoot.replaceChild(n,this.shadowRoot.firstElementChild),e){const i=n.querySelector(`:scope li[json-path="${e}"]`);i&&l(i)}}expandAll(){this.setExpandedAll(!0)}collapseAll(){this.setExpandedAll(!1)}setExpandedAll(e){const n={};l(this.jsonViewerState.value),this.expanded=n;function l(i,a=""){typeof i=="object"&&i!==null&&(n[a||"/"]=e,Object.keys(i).forEach(h=>l(i[h],a+"/"+h)))}}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)});
+(function(w){typeof define=="function"&&define.amd?define(w):w()})(function(){"use strict";const w=`: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 s(t,e,n){const l=document.createElement(t);return e&&Object.entries(e).forEach(([i,a])=>{a!==""&&y(l,i,a)}),n&&n.forEach(i=>{i&&l.appendChild(i)}),l}function d(t){return document.createTextNode(t)}function L(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 j(t){if(!t)return null;const e=t.nextElementSibling;if(!e)return j(t.parentElement);if(e.tagName==="LI")return t.nextElementSibling;if(e.tagName==="OL"){const n=e.firstElementChild;return n?.tagName==="LI"&&n.checkVisibility()?n:j(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 E=100,V="aria-selected",P="aria-expanded";function T(t,e){let n=null;const l=s("div",{class:"json-tree"},[s("style",{},[d(w)]),s("ol",{class:"expanded",role:"tree"},v({value:t.value,path:""}))]);l.addEventListener("keydown",i);function i(r){if(r.altKey||r.metaKey||r.ctrlKey)return;const o=l.querySelector(":scope li.selected");if(!o){a(l.firstElementChild?.firstElementChild);return}const x=o.ariaExpanded;switch(r.code){case"ArrowLeft":if(r.preventDefault(),x)return L(o);o.parentElement&&a(o.parentElement.previousElementSibling);break;case"ArrowRight":if(r.preventDefault(),x)return a(j(o));L(o);break;case"ArrowDown":case"KeyJ":r.preventDefault(),a(j(o));break;case"ArrowUp":case"KeyK":r.preventDefault(),a(N(o));break}}function a(r){r&&r.getAttribute("json-path")!==null&&(h(r),r.focus(),r instanceof HTMLElement&&(D(r)||r.scrollIntoView({block:"center"})))}return[l,a];function h(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 v({value:r,path:o,k:x,skipPreview:J,displayIndexOffset:B=0}){const g=typeof r=="object"&&r!==null&&Object.keys(r).length>0;let f=!!t.expandedNodes[o||"/"],A=f,I=t.selectedPath===(o||"/")||t.focusedNode===(o||"/");const c=s("li",{role:"treeitem","json-path":o||"/",class:R(),tabindex:I?"0":"","aria-expanded":g&&f?"true":""},[s("span",{class:"key-value-pair"},J&&x?[d(x)]:H(r,x)),s("div",{class:"fill"})]);I&&(n=c),c.addEventListener("blur",()=>{t.focusedNode===(o||"/")&&(t.focusedNode=null)}),c.addEventListener("copy",u=>{u.clipboardData&&u.clipboardData.setData("text/plain",JSON.stringify(r,null,2)),u.preventDefault()});function O(){let u=[];if(g)if(Array.isArray(r)&&r.length>E){const m=[];for(let p=0;p<r.length;p+=E){const _=`[${p} … ${Math.min(r.length-1,p+E-1)}]`;m.push(v({k:_,displayIndexOffset:p,skipPreview:!0,value:r.slice(p,p+E),path:o+"/"+p}))}u=m.flat()}else u=Object.entries(r).map(([m,p])=>(Array.isArray(r)&&(m=(parseInt(m,10)+B).toString()),v({k:m,value:p,path:o+"/"+m}))).flat();return u.length?s("ol",{role:"group",class:$()},u):null}let b=null;return g&&f&&A&&(b=O()),c.addEventListener("click",()=>{g&&(f=!f,t.expandedNodes[o||"/"]=f,e()),g&&f&&!A&&(b=O(),c.parentNode.insertBefore(b,c.nextElementSibling),A=!0),b&&(b.className=$()),c.className=R(),h(c),c.tabIndex=0,c.focus(),g&&(f?y(c,P,"true"):S(c,P))}),b?[c,b]:[c];function R(){const u=[];return g&&u.push("parent"),f&&u.push("expanded"),(o===t.focusedNode||o===t.selectedPath)&&u.push("selected"),u.join(" ")}function $(){return f?"expanded":""}}}function H(t,e){const n=(()=>{switch(typeof t){case"string":return s("span",{class:"string-value"},[d(`"${t}"`)]);case"number":return s("span",{class:"num-value"},[d(t.toString())]);case"boolean":return s("span",{class:"bool-value"},[d(t?"true":"false")]);case"object":return t===null?s("span",{class:"null-value"},[d("null")]):Array.isArray(t)?s("span",{},[d(k(t))]):s("span",{},[d(k(t))]);default:return s("span",{},[d("invalid json value")])}})();return e=e===""?'""':e,[e?[s("span",{class:"key-name"},[d(e)]),s("span",{class:"delim"},[d(": ")])]:[],[n]].flat()}const C=new Map;function k(t,e=2){if(e!==2)return i();const n=C.get(t);if(n)return n;const l=i();return C.set(t,l),l;function i(){switch(typeof t){case"object":{if(Array.isArray(t)){if(e===0)return"[…]";const v=t.length;return`[${t.slice(0,2).map(r=>k(r,e-1)).join(", ")}${v>2?",…":""}]`}if(t===null)return"null";if(e===0)return"{…}";const a=Object.entries(t),h=a.length;return`{${a.slice(0,2).map(([v,r])=>`${v||'""'}: ${k(r,e-1)}`).join(", ")}${h>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(i){return this.appRoot.innerText=i}const[n,l]=T(this.jsonViewerState,()=>{const i={expanded:this.jsonViewerState.expandedNodes};this.emit("expanded-change",i)});if(this.shadowRoot.replaceChild(n,this.shadowRoot.firstElementChild),e){const i=n.querySelector(`:scope li[json-path="${e}"]`);i&&l(i)}}expandAll(){this.setExpandedAll(!0)}collapseAll(){this.setExpandedAll(!1)}setExpandedAll(e){const n={};l(this.jsonViewerState.value),this.expanded=n;function l(i,a=""){typeof i=="object"&&i!==null&&(n[a||"/"]=e,Object.keys(i).forEach(h=>l(i[h],a+"/"+h)))}}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.13",
+  "version": "0.1.0",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "dist/json-viewer.es.js",

No alert changes

Improved metrics

Total package byte prevSize

27871

increased by0.21%

No dependency changes