Method renderNode

lib/json-viewer.bundle.js:51–51

(t,i="")

     * Copyright 2018 Google LLC
     * SPDX-License-Identifier: BSD-3-Clause
     */const lt=(t=>(...i)=>({_$litDirective$:t,values:i}))(class extends rt{constructor(t){var i;if(super(t),t.type!==ot||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(t,[i]){var e,s;if(void 0===this.nt){this.nt=new Set,void 0!==t.strings&&(this.st=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!(null===(e=this.st)||void 0===e?void 0:e.has(t))&&this.nt.add(t);return this.render(i)}const n=t.element.classList;this.nt.forEach((t=>{t in i||(n.remove(t),this.nt.delete(t))}));for(const t in i){const e=!!i[t];e===this.nt.has(t)||(null===(s=this.st)||void 0===s?void 0:s.has(t))||(e?(n.add(t),this.nt.add(t)):(n.remove(t),this.nt.delete(t)))}return T}});function ht(t){return null===t?"null":Array.isArray(t)?"array":t.constructor.name.toLowerCase()}function ct(t){return t!==Object(t)}function at(t){return!!t&&!!t.nodeType}function ut(t){return ct(t)||at(t)}function*dt(t){const i=[[t,"",[]]];for(;i.length;){const[t,e,s]=i.shift();if(e&&(yield[t,e,s]),!ct(t))for(const[n,o]of Object.entries(t))i.push([o,`${e}${e?".":""}${n}`,[...s,e]])}}const vt={fromAttribute:t=>t&&t.trim()?JSON.parse(t):void 0,toAttribute:t=>JSON.stringify(t)},ft=t=>void 0!==t,pt=(t,i)=>i instanceof RegExp?!!t.match(i):function(t,i){const e=t.split("."),s=i.split("."),n=t=>"*"===t,o=t=>"**"===t;let r=0,l=0;for(;r<e.length;){const t=s[l];if(t===e[r]||n(t))l++,r++;else{if(!o(t))return!1;l++,r=e.length-(s.length-l)}}return l===s.length}(t,i),bt=(t,i)=>(e,s)=>{const n={};if(t)for(const[,e,o]of dt(s.data))pt(e,t)&&(n[e]=i,o.forEach((t=>n[t]=i)));return{expanded:n}},gt=t=>()=>({highlight:t}),yt=((t,...i)=>{const e=1===t.length?t[0]:i.reduce(((i,e,s)=>i+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(e)+t[s+1]),t[0]);return new r(e,t,n)})`:host{--background-color:#2a2f3a;--color:#f8f8f2;--string-color:#a3eea0;--number-color:#d19a66;--boolean-color:#4ba7ef;--null-color:#df9cf3;--property-color:#6fb3d2;--preview-color:rgba(222,175,143,0.9);--highlight-color:#7b0000;--font-family:monaco,Consolas,'Lucida Console',monospace;--font-size:1rem;--indent-size:1.5em;--indentguide-size:1px;--indentguide-style:solid;--indentguide-color:#333;--indentguide-color-active:#666;--indentguide:var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);--indentguide-active:var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);display:block;background-color:var(--background-color);color:var(--color);font-family:var(--font-family);font-size:var(--font-size)}.preview{color:var(--preview-color)}.null{color:var(--null-color)}.key{color:var(--property-color);display:inline-block}.collapsable:before{display:inline-block;color:var(--color);font-size:.8em;content:'▶';line-height:1em;width:1em;height:1em;text-align:center;transition:transform 195ms ease-out;transform:rotate(90deg);color:var(--property-color)}.collapsable.collapsableCollapsed:before{transform:rotate(0)}.collapsable{cursor:pointer;user-select:none}.string{color:var(--string-color)}.number{color:var(--number-color)}.boolean{color:var(--boolean-color)}ul{padding:0;clear:both}ul,li{list-style:none;position:relative}li ul>li{position:relative;margin-left:var(--indent-size);padding-left:0}ul ul:before{content:'';border-left:var(--indentguide);position:absolute;left:calc(0.5em - var(--indentguide-size));top:.3em;bottom:.3em}ul ul:hover:before{border-left:var(--indentguide-active)}mark{background-color:var(--highlight-color)}`;class mt extends tt{constructor(){super(...arguments),this.state={expanded:{},filtered:{},highlight:null},this.handlePropertyClick=t=>i=>{i.preventDefault(),this.setState(((t,i)=>e=>({expanded:Object.assign(Object.assign({},e.expanded),{[t]:ft(i)?!!i:!e.expanded[t]})}))(t))}}setState(t){return i(this,void 0,void 0,(function*(){const i=this.state;this.state=Object.assign(Object.assign({},i),t(i,this))}))}connectedCallback(){this.hasAttribute("data")||ft(this.data)||this.setAttribute("data",this.innerText),super.connectedCallback()}expand(t){this.setState(bt(t,!0))}expandAll(){this.setState(bt("**",!0))}collapseAll(){this.setState(bt("**",!1))}collapse(t){this.setState(bt(t,!1))}*search(t){for(const[i,e]of dt(this.data))ut(i)&&String(i).includes(t)&&(this.expand(e),this.updateComplete.then((()=>{const t=this.shadowRoot.querySelector(`[data-path="${e}"]`);t.scrollIntoView({behavior:"smooth",inline:"center",block:"center"}),t.focus()})),this.setState(gt(e)),yield{value:i,path:e});this.setState(gt(null))}filter(t){var i;this.setState((i=t,(t,e)=>{const s={};if(i)for(const[,t,n]of dt(e.data))pt(t,i)?(s[t]=!1,n.forEach((t=>s[t]=!1))):s[t]=!0;return{filtered:s}}))}resetFilter(){this.setState((()=>({filtered:{}})))}renderObject(t,i){return R`<ul part="object">${Object.keys(t).map((e=>{const s=t[e],n=i?`${i}.${e}`:e,o=ut(s);return R`<li part="property" data-path="${n}" .hidden="${this.state.filtered[n]}"><span part="key" class="${lt({key:e,collapsable:!o,collapsableCollapsed:!this.state.expanded[n]})}" @click="${o?null:this.handlePropertyClick(n)}">${e}: </span>${this.renderNode(s,n)}</li>`}))}</ul>`}renderNode(t,i=""){const e=ut(t);return!i||this.state.expanded[i]||e?e?this.renderPrimitive(t,i):this.renderObject(t,i):this.renderNodePreview(t)}renderNodePreview(t){return R`<span part="preview" class="preview">${function(t,{nodeCount:i=3,maxLength:e=15}={}){const s=Array.isArray(t),n=Object.keys(t),o=n.slice(0,i),r=[],l=t=>{switch(ht(t)){case"object":return 0===Object.keys(t).length?"{ }":"{ ... }";case"array":return 0===t.length?"[ ]":"[ ... ]";case"string":return`"${t.substring(0,e)}${t.length>e?"...":""}"`;default:return String(t)}},h=[];for(const i of o){const e=[],n=t[i];s||e.push(`${i}: `),e.push(l(n)),h.push(e.join(""))}n.length>i&&h.push("..."),r.push(h.join(", "));const c=r.join("");return s?`[ ${c} ]`:`{ ${c} }`}(t)}</span>`}renderPrimitive(t,i){const e=this.state.highlight,s=ht(t),n=at(t)?t:R`<span part="primitive primitive-${s}" tabindex="0" class="${ht(t)}">${JSON.stringify(t)}</span>`;return i===e?R`<mark part="highlight">${n}</mark>`:n}render(){const t=this.data;return ft(t)?this.renderNode(t):null}}mt.styles=[yt],t([st({converter:vt,type:Object})],mt.prototype,"data",void 0),t([function(t){return st({...t,state:!0})}()],mt.prototype,"state",void 0),customElements.define("json-viewer",mt)}();
//# sourceMappingURL=json-viewer.bundle.js.map