@miman/json-schema-viewer-react 1.2.2 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +8 -8
- package/dist/index.js +5 -9
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -402,30 +402,30 @@
|
|
|
402
402
|
margin-bottom: 8px;
|
|
403
403
|
color: var(--text-color);
|
|
404
404
|
}
|
|
405
|
-
`}const k="json-schema-viewer-styles";function M(){if(typeof document>"u"||document.getElementById(k))return;const e=document.createElement("style");e.id=k,e.textContent=q(),document.head.appendChild(e)}function O(e){const t=Math.max(e.lastIndexOf("/"),e.lastIndexOf("\\"));return t>=0?e.slice(t+1):e}function h(e){if(!e||typeof e!="object")return!1;for(const t in e){if(!Object.prototype.hasOwnProperty.call(e,t))continue;const a=e[t];if(t==="$ref"&&typeof a=="string"&&a.includes(".json")||h(a))return!0}return!1}function v(e,t,a){if(!e||!e.$ref)return e||{};const s=e.$ref,d=a||{};let n=null,i=!1;if(s.includes(".json#/")){const[r,l]=s.split("#"),c=O(r),
|
|
405
|
+
`}const k="json-schema-viewer-styles";function M(){if(typeof document>"u"||document.getElementById(k))return;const e=document.createElement("style");e.id=k,e.textContent=q(),document.head.appendChild(e)}function O(e){const t=Math.max(e.lastIndexOf("/"),e.lastIndexOf("\\"));return t>=0?e.slice(t+1):e}function h(e){if(!e||typeof e!="object")return!1;for(const t in e){if(!Object.prototype.hasOwnProperty.call(e,t))continue;const a=e[t];if(t==="$ref"&&typeof a=="string"&&a.includes(".json")||h(a))return!0}return!1}function v(e,t,a){if(!e||!e.$ref)return e||{};const s=e.$ref,d=a||{};let n=null,i=!1;if(s.includes(".json#/")){const[r,l]=s.split("#"),c=O(r),f=d[c];if(!f)return{$ref:s,__isMissing:!0};let m=f;const o=(l||"").split("/").slice(1);for(const u of o)if(m&&typeof m=="object"&&u in m)m=m[u];else return{$ref:s,__isMissing:!0};n=m,i=!0}else if(s.includes(".json")){const r=O(s.split("#")[0]);if(n=d[r],!n)return{$ref:s,__isMissing:!0};i=!0}else if(s.startsWith("#/")){let r=t;const l=s.split("/").slice(1);for(const c of l)if(r&&typeof r=="object"&&c in r)r=r[c];else return{$ref:s,__isMissing:!0};n=r}if(n&&i){const r={...n};return Object.defineProperty(r,"__isImported",{value:!0,enumerable:!1}),r}return n||e}function w(e){return e?e.__isMissing?"missing":e.$ref?"ref":e.type?Array.isArray(e.type)?e.type.join(" | "):e.type:e.enum?"enum":e.oneOf?"oneOf":e.anyOf?"anyOf":e.allOf?"allOf":e.properties?"object":e.items?"array":"any":"any"}function C(e){return e?!!(e.properties||e.items||e.oneOf||e.anyOf||e.allOf||e.description||e.enum||e.default!==void 0||e.example!==void 0||e.format||e.pattern||e.minimum!==void 0||e.maximum!==void 0||e.minLength!==void 0||e.maxLength!==void 0):!1}function g(e,t,a,s){if(!e)return null;if(e.$ref){if(s.has(e.$ref))return"...";s.add(e.$ref);const n=v(e,t,a),i=g(n,t,a,s);return s.delete(e.$ref),i}if(e.example!==void 0)return e.example;if(e.default!==void 0)return e.default;if(e.enum&&e.enum.length>0)return e.enum[0];if(e.const!==void 0)return e.const;if(e.oneOf&&e.oneOf.length>0)return g(e.oneOf[0],t,a,s);if(e.anyOf&&e.anyOf.length>0)return g(e.anyOf[0],t,a,s);if(e.allOf&&e.allOf.length>0){let n={};for(const i of e.allOf){const r=v(i,t,a);if(r.properties){const l=g(r,t,a,s);n={...n,...l}}}return n}const d=Array.isArray(e.type)?e.type[0]:e.type;switch(d){case"object":{if(e.properties){const n={};for(const[i,r]of Object.entries(e.properties))n[i]=g(r,t,a,s);return n}return{}}case"array":return e.items?[g(e.items,t,a,s)]:[];case"string":return e.format==="date-time"?new Date().toISOString():e.format==="date"?new Date().toISOString().split("T")[0]:e.format==="time"?"12:00:00":e.format==="email"?"user@example.com":e.format==="uri"||e.format==="url"?"https://example.com":e.format==="uuid"?"550e8400-e29b-41d4-a716-446655440000":e.minLength?"x".repeat(e.minLength):"string";case"number":case"integer":return e.minimum!==void 0?e.minimum:e.maximum!==void 0?e.maximum:0;case"boolean":return!0;case"null":return null;default:{if(e.properties){const n={};for(const[i,r]of Object.entries(e.properties))n[i]=g(r,t,a,s);return n}return e.items?[g(e.items,t,a,s)]:null}}}function L(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\\"])*")(\s*:)?/g,t=>{let a="json-string";return/:$/.test(t)&&(a="json-key"),'<span class="'+a+'">'+t+"</span>"}).replace(/\b(true|false)\b/g,'<span class="json-boolean">$1</span>').replace(/\bnull\b/g,'<span class="json-null">null</span>').replace(/\b(-?\d+(\.\d+)?([eE][+-]?\d+)?)\b/g,'<span class="json-number">$1</span>')}function p(e){if(typeof e!="string")return String(e??"");const t=document.createElement("div");return t.textContent=e,t.innerHTML}function S(e,t){const a=t.schema,s=t.bundle??{},d=t.importedFileNames??[],n=t.missingFileNames??[];if(e.innerHTML="",e.classList.add("schema-container"),!a){const o=document.createElement("div");o.className="loading",o.textContent="Loading schema...",e.appendChild(o);return}const i=document.createElement("div");i.className="schema-header";const r=a.title||"JSON Schema",l=a.description||"",c=a.$schema||"",f=a.$id||"";if(i.innerHTML=`
|
|
406
406
|
<div class="schema-title">${p(r)}</div>
|
|
407
407
|
${l?`<div class="schema-description">${p(l)}</div>`:""}
|
|
408
408
|
<div class="schema-meta">
|
|
409
409
|
${c?`<div class="schema-meta-item"><span class="schema-meta-label">Schema:</span><span class="schema-meta-value">${p(c)}</span></div>`:""}
|
|
410
|
-
${
|
|
410
|
+
${f?`<div class="schema-meta-item"><span class="schema-meta-label">ID:</span><span class="schema-meta-value">${p(f)}</span></div>`:""}
|
|
411
411
|
</div>
|
|
412
412
|
${a.type?`<div class="root-type-badge type-${p(a.type)}">${p(a.type)}</div>`:""}
|
|
413
|
-
`,e.appendChild(i),a.properties){const o=document.createElement("div");o.innerHTML='<div class="section-title">Properties</div>';const
|
|
413
|
+
`,e.appendChild(i),a.properties){const o=document.createElement("div");o.innerHTML='<div class="section-title">Properties</div>';const u=a.required||[];E(o,a.properties,u,a,s),e.appendChild(o)}const m=a.definitions||a.$defs||{};if(Object.keys(m).length>0){const o=document.createElement("div");o.className="definitions-section",o.innerHTML='<div class="section-title">Definitions</div>';for(const[u,b]of Object.entries(m)){const x=z(String(u),b,a,s);o.appendChild(x)}e.appendChild(o)}if(d.length>0){const o=document.createElement("h2");o.className="section-title",o.textContent="Imported files",e.appendChild(o);const u=document.createElement("div");u.className="imported-files-container";const b=document.createElement("ul");d.forEach(x=>{const y=document.createElement("li");if(y.textContent=x,n.includes(x)){const $=document.createElement("span");$.className="missing-badge",$.textContent="file not found",y.appendChild(document.createTextNode(" ")),y.appendChild($)}b.appendChild(y)}),u.appendChild(b),e.appendChild(u)}}function E(e,t,a,s,d){for(const[n,i]of Object.entries(t)){const r=a.includes(n),l=I(n,i,r,s,d);e.appendChild(l)}}function I(e,t,a,s,d){const n=document.createElement("div");n.className="schema-object";const i=v(t,s,d),r=w(i),l=C(i),c=i.description||"",f=i.__isImported||h(t),m=i.__isMissing,o=document.createElement("div");if(o.className="schema-object-header",o.innerHTML=`
|
|
414
414
|
${l?'<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>':'<div style="width: 24px;"></div>'}
|
|
415
415
|
<span class="property-name">${p(e)}</span>
|
|
416
416
|
<span class="property-type type-${p(r)}">${r==="missing"?"file not found":p(r)}</span>
|
|
417
417
|
${a?'<span class="required-badge">required</span>':""}
|
|
418
|
-
${
|
|
418
|
+
${f?'<span class="imported-badge">imported</span>':""}
|
|
419
419
|
${m?'<span class="missing-badge">file not found</span>':""}
|
|
420
420
|
${c?`<span class="property-description">${p(c)}</span>`:""}
|
|
421
|
-
`,l&&o.addEventListener("click",()=>{const
|
|
421
|
+
`,l&&o.addEventListener("click",()=>{const u=n.querySelector(".schema-object-content"),b=o.querySelector(".expand-icon");u?.classList.toggle("expanded"),b?.classList.toggle("expanded")}),n.appendChild(o),l&&!m){const u=document.createElement("div");u.className="schema-object-content",T(u,i,s,d),n.appendChild(u)}return n}function T(e,t,a,s){if(!(t.properties||t.items||t.oneOf||t.anyOf||t.allOf)){N(e,t,a,s);return}let n="schema";const i=document.createElement("div");i.className="view-toggle",i.innerHTML=`
|
|
422
422
|
<button class="view-toggle-btn" data-view="example">Example Value</button>
|
|
423
423
|
<button class="view-toggle-btn active" data-view="schema">Schema</button>
|
|
424
|
-
`;const r=document.createElement("div");r.className="property-content-area";const l=()=>{if(r.innerHTML="",i.querySelectorAll(".view-toggle-btn").forEach(c=>{c.classList.toggle("active",c.dataset.view===n)}),n==="example"){const c=document.createElement("div");c.className="object-example-view";const
|
|
424
|
+
`;const r=document.createElement("div");r.className="property-content-area";const l=()=>{if(r.innerHTML="",i.querySelectorAll(".view-toggle-btn").forEach(c=>{c.classList.toggle("active",c.dataset.view===n)}),n==="example"){const c=document.createElement("div");c.className="object-example-view";const f=g(t,a,s,new Set),m=L(JSON.stringify(f,null,2));c.innerHTML=`<pre>${m}</pre>`,r.appendChild(c)}else N(r,t,a,s)};i.addEventListener("click",c=>{const f=c.target?.closest(".view-toggle-btn");f&&f.dataset.view&&f.dataset.view!==n&&(n=f.dataset.view,l())}),e.appendChild(i),e.appendChild(r),l()}function N(e,t,a,s){const d=document.createElement("div");d.className="property-details";let n="";if(t.description&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Description:</span><span class="property-detail-value">${p(t.description)}</span></div>`),t.default!==void 0&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Default:</span><span class="property-detail-value">${p(JSON.stringify(t.default))}</span></div>`),t.example!==void 0&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Example:</span><span class="property-detail-value">${p(JSON.stringify(t.example))}</span></div>`),t.format&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Format:</span><span class="property-detail-value">${p(t.format)}</span></div>`),t.pattern&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Pattern:</span><span class="property-detail-value">${p(t.pattern)}</span></div>`),t.minimum!==void 0&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Minimum:</span><span class="property-detail-value">${String(t.minimum)}</span></div>`),t.maximum!==void 0&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Maximum:</span><span class="property-detail-value">${String(t.maximum)}</span></div>`),t.minLength!==void 0&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Min Length:</span><span class="property-detail-value">${String(t.minLength)}</span></div>`),t.maxLength!==void 0&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Max Length:</span><span class="property-detail-value">${String(t.maxLength)}</span></div>`),t.minItems!==void 0&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Min Items:</span><span class="property-detail-value">${String(t.minItems)}</span></div>`),t.maxItems!==void 0&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Max Items:</span><span class="property-detail-value">${String(t.maxItems)}</span></div>`),t.enum&&(n+=`<div class="property-detail-row"><span class="property-detail-label">Enum Values:</span><span class="property-detail-value"><div class="enum-values">${t.enum.map(i=>`<span class="enum-value">${p(JSON.stringify(i))}</span>`).join("")}</div></span></div>`),n&&(d.innerHTML=n,e.appendChild(d)),t.properties){const i=document.createElement("div");i.className="nested-properties";const r=t.required||[];E(i,t.properties,r,a,s),e.appendChild(i)}if(t.items){const i=document.createElement("div");i.className="array-items-label",i.textContent="Array Items:",e.appendChild(i);const r=v(t.items,a,s);if(r.properties){const l=document.createElement("div");l.className="nested-properties";const c=r.required||[];E(l,r.properties,c,a,s),e.appendChild(l)}else{const l=w(r),c=document.createElement("div");c.innerHTML=`<span class="property-type type-${p(l)}">${p(l)}</span>`,r.description&&(c.innerHTML+=` <span class="property-description">${p(r.description)}</span>`),e.appendChild(c)}}["oneOf","anyOf","allOf"].forEach(i=>{if(t[i]){const r=document.createElement("div");r.className="array-items-label",r.textContent=i+":",e.appendChild(r),t[i].forEach((l,c)=>{const f=v(l,a,s),m=I(`Option ${c+1}`,f,!1,a,s);e.appendChild(m)})}})}function z(e,t,a,s){const d=document.createElement("div");d.className="schema-object",d.id=`def-${e}`;const n=v(t,a,s),i=w(n),r=C(n),l=n.description||"",c=n.__isImported||h(t),f=n.__isMissing,m=document.createElement("div");if(m.className="schema-object-header",m.innerHTML=`
|
|
425
425
|
${r?'<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>':'<div style="width: 24px;"></div>'}
|
|
426
426
|
<span class="property-name">${p(e)}</span>
|
|
427
427
|
<span class="property-type type-${p(i)}">${i==="missing"?"file not found":p(i)}</span>
|
|
428
428
|
${c?'<span class="imported-badge">imported</span>':""}
|
|
429
|
-
${
|
|
429
|
+
${f?'<span class="missing-badge">file not found</span>':""}
|
|
430
430
|
${l?`<span class="property-description">${p(l)}</span>`:""}
|
|
431
|
-
`,r&&m.addEventListener("click",()=>{const o=d.querySelector(".schema-object-content"),
|
|
431
|
+
`,r&&m.addEventListener("click",()=>{const o=d.querySelector(".schema-object-content"),u=m.querySelector(".expand-icon");o?.classList.toggle("expanded"),u?.classList.toggle("expanded")}),d.appendChild(m),r&&!f){const o=document.createElement("div");o.className="schema-object-content",T(o,n,a,s),d.appendChild(o)}return d}function H(e){const t=j.useRef(null),a=j.useMemo(()=>({schema:e.schema,bundle:e.bundle??{},importedFileNames:e.importedFileNames??[],missingFileNames:e.missingFileNames??[]}),[e.schema,e.bundle,e.importedFileNames,e.missingFileNames]);return j.useEffect(()=>{M(),t.current&&S(t.current,a)},[a]),_.jsx("div",{ref:t,className:e.className})}exports.SchemaViewer=H;exports.ensureSchemaViewerStyles=M;exports.escapeHtml=p;exports.generateExampleValue=g;exports.getType=w;exports.hasNestedContent=C;exports.hasRemoteRef=h;exports.renderSchemaInto=S;exports.resolveRef=v;exports.syntaxHighlightJson=L;
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as M } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as I, useMemo as S, useEffect as
|
|
3
|
-
function
|
|
2
|
+
import { useRef as I, useMemo as S, useEffect as _ } from "react";
|
|
3
|
+
function T() {
|
|
4
4
|
return `
|
|
5
5
|
.schema-container {
|
|
6
6
|
--bg-color: #1e1e1e;
|
|
@@ -411,7 +411,7 @@ const E = "json-schema-viewer-styles";
|
|
|
411
411
|
function z() {
|
|
412
412
|
if (typeof document > "u" || document.getElementById(E)) return;
|
|
413
413
|
const e = document.createElement("style");
|
|
414
|
-
e.id = E, e.textContent =
|
|
414
|
+
e.id = E, e.textContent = T(), document.head.appendChild(e);
|
|
415
415
|
}
|
|
416
416
|
function C(e) {
|
|
417
417
|
const t = Math.max(e.lastIndexOf("/"), e.lastIndexOf("\\"));
|
|
@@ -714,12 +714,8 @@ function V(e) {
|
|
|
714
714
|
}),
|
|
715
715
|
[e.schema, e.bundle, e.importedFileNames, e.missingFileNames]
|
|
716
716
|
);
|
|
717
|
-
return
|
|
718
|
-
|
|
719
|
-
const s = setTimeout(() => {
|
|
720
|
-
t.current && H(t.current, a);
|
|
721
|
-
}, 0);
|
|
722
|
-
return () => clearTimeout(s);
|
|
717
|
+
return _(() => {
|
|
718
|
+
z(), t.current && H(t.current, a);
|
|
723
719
|
}, [a]), /* @__PURE__ */ M("div", { ref: t, className: e.className });
|
|
724
720
|
}
|
|
725
721
|
export {
|