@miman/json-schema-viewer-react 1.2.0 → 1.2.2
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 +17 -20
- package/dist/index.js +18 -17
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),j=require("react");function q(){return`
|
|
2
|
-
|
|
2
|
+
.schema-container {
|
|
3
3
|
--bg-color: #1e1e1e;
|
|
4
4
|
--text-color: #d4d4d4;
|
|
5
5
|
--border-color: #3c3c3c;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
@media (prefers-color-scheme: light) {
|
|
22
|
-
|
|
22
|
+
.schema-container {
|
|
23
23
|
--bg-color: #ffffff;
|
|
24
24
|
--text-color: #333333;
|
|
25
25
|
--border-color: #e0e0e0;
|
|
@@ -39,24 +39,21 @@
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
margin: 0;
|
|
45
|
-
padding: 0;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
body {
|
|
42
|
+
.schema-container {
|
|
43
|
+
max-width: 1200px;
|
|
44
|
+
margin: 0 auto;
|
|
49
45
|
font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif);
|
|
50
46
|
font-size: 13px;
|
|
51
47
|
line-height: 1.5;
|
|
52
48
|
color: var(--text-color);
|
|
53
49
|
background-color: var(--bg-color);
|
|
54
50
|
padding: 16px;
|
|
51
|
+
box-sizing: border-box;
|
|
52
|
+
text-align: left;
|
|
55
53
|
}
|
|
56
54
|
|
|
57
|
-
.schema-container {
|
|
58
|
-
|
|
59
|
-
margin: 0 auto;
|
|
55
|
+
.schema-container * {
|
|
56
|
+
box-sizing: border-box;
|
|
60
57
|
}
|
|
61
58
|
|
|
62
59
|
.schema-header {
|
|
@@ -405,30 +402,30 @@
|
|
|
405
402
|
margin-bottom: 8px;
|
|
406
403
|
color: var(--text-color);
|
|
407
404
|
}
|
|
408
|
-
`}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),u=d[c];if(!u)return{$ref:s,__isMissing:!0};let m=u;const o=(l||"").split("/").slice(1);for(const f of o)if(m&&typeof m=="object"&&f in m)m=m[f];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||"",u=a.$id||"";if(i.innerHTML=`
|
|
409
406
|
<div class="schema-title">${p(r)}</div>
|
|
410
407
|
${l?`<div class="schema-description">${p(l)}</div>`:""}
|
|
411
408
|
<div class="schema-meta">
|
|
412
409
|
${c?`<div class="schema-meta-item"><span class="schema-meta-label">Schema:</span><span class="schema-meta-value">${p(c)}</span></div>`:""}
|
|
413
|
-
${
|
|
410
|
+
${u?`<div class="schema-meta-item"><span class="schema-meta-label">ID:</span><span class="schema-meta-value">${p(u)}</span></div>`:""}
|
|
414
411
|
</div>
|
|
415
412
|
${a.type?`<div class="root-type-badge type-${p(a.type)}">${p(a.type)}</div>`:""}
|
|
416
|
-
`,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 f=a.required||[];E(o,a.properties,f,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[f,b]of Object.entries(m)){const x=z(String(f),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 f=document.createElement("div");f.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)}),f.appendChild(b),e.appendChild(f)}}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||"",u=i.__isImported||h(t),m=i.__isMissing,o=document.createElement("div");if(o.className="schema-object-header",o.innerHTML=`
|
|
417
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>'}
|
|
418
415
|
<span class="property-name">${p(e)}</span>
|
|
419
416
|
<span class="property-type type-${p(r)}">${r==="missing"?"file not found":p(r)}</span>
|
|
420
417
|
${a?'<span class="required-badge">required</span>':""}
|
|
421
|
-
${
|
|
418
|
+
${u?'<span class="imported-badge">imported</span>':""}
|
|
422
419
|
${m?'<span class="missing-badge">file not found</span>':""}
|
|
423
420
|
${c?`<span class="property-description">${p(c)}</span>`:""}
|
|
424
|
-
`,l&&o.addEventListener("click",()=>{const
|
|
421
|
+
`,l&&o.addEventListener("click",()=>{const f=n.querySelector(".schema-object-content"),b=o.querySelector(".expand-icon");f?.classList.toggle("expanded"),b?.classList.toggle("expanded")}),n.appendChild(o),l&&!m){const f=document.createElement("div");f.className="schema-object-content",T(f,i,s,d),n.appendChild(f)}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=`
|
|
425
422
|
<button class="view-toggle-btn" data-view="example">Example Value</button>
|
|
426
423
|
<button class="view-toggle-btn active" data-view="schema">Schema</button>
|
|
427
|
-
`;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 u=g(t,a,s,new Set),m=L(JSON.stringify(u,null,2));c.innerHTML=`<pre>${m}</pre>`,r.appendChild(c)}else N(r,t,a,s)};i.addEventListener("click",c=>{const u=c.target?.closest(".view-toggle-btn");u&&u.dataset.view&&u.dataset.view!==n&&(n=u.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 u=v(l,a,s),m=I(`Option ${c+1}`,u,!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),u=n.__isMissing,m=document.createElement("div");if(m.className="schema-object-header",m.innerHTML=`
|
|
428
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>'}
|
|
429
426
|
<span class="property-name">${p(e)}</span>
|
|
430
427
|
<span class="property-type type-${p(i)}">${i==="missing"?"file not found":p(i)}</span>
|
|
431
428
|
${c?'<span class="imported-badge">imported</span>':""}
|
|
432
|
-
${
|
|
429
|
+
${u?'<span class="missing-badge">file not found</span>':""}
|
|
433
430
|
${l?`<span class="property-description">${p(l)}</span>`:""}
|
|
434
|
-
`,r&&m.addEventListener("click",()=>{const o=d.querySelector(".schema-object-content"),
|
|
431
|
+
`,r&&m.addEventListener("click",()=>{const o=d.querySelector(".schema-object-content"),f=m.querySelector(".expand-icon");o?.classList.toggle("expanded"),f?.classList.toggle("expanded")}),d.appendChild(m),r&&!u){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(()=>{if(M(),!t.current)return;const s=setTimeout(()=>{t.current&&S(t.current,a)},0);return()=>clearTimeout(s)},[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,8 +1,8 @@
|
|
|
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 T } from "react";
|
|
3
|
+
function _() {
|
|
4
4
|
return `
|
|
5
|
-
|
|
5
|
+
.schema-container {
|
|
6
6
|
--bg-color: #1e1e1e;
|
|
7
7
|
--text-color: #d4d4d4;
|
|
8
8
|
--border-color: #3c3c3c;
|
|
@@ -22,7 +22,7 @@ function T() {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
@media (prefers-color-scheme: light) {
|
|
25
|
-
|
|
25
|
+
.schema-container {
|
|
26
26
|
--bg-color: #ffffff;
|
|
27
27
|
--text-color: #333333;
|
|
28
28
|
--border-color: #e0e0e0;
|
|
@@ -42,24 +42,21 @@ function T() {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
margin: 0;
|
|
48
|
-
padding: 0;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
body {
|
|
45
|
+
.schema-container {
|
|
46
|
+
max-width: 1200px;
|
|
47
|
+
margin: 0 auto;
|
|
52
48
|
font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif);
|
|
53
49
|
font-size: 13px;
|
|
54
50
|
line-height: 1.5;
|
|
55
51
|
color: var(--text-color);
|
|
56
52
|
background-color: var(--bg-color);
|
|
57
53
|
padding: 16px;
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
text-align: left;
|
|
58
56
|
}
|
|
59
57
|
|
|
60
|
-
.schema-container {
|
|
61
|
-
|
|
62
|
-
margin: 0 auto;
|
|
58
|
+
.schema-container * {
|
|
59
|
+
box-sizing: border-box;
|
|
63
60
|
}
|
|
64
61
|
|
|
65
62
|
.schema-header {
|
|
@@ -414,7 +411,7 @@ const E = "json-schema-viewer-styles";
|
|
|
414
411
|
function z() {
|
|
415
412
|
if (typeof document > "u" || document.getElementById(E)) return;
|
|
416
413
|
const e = document.createElement("style");
|
|
417
|
-
e.id = E, e.textContent =
|
|
414
|
+
e.id = E, e.textContent = _(), document.head.appendChild(e);
|
|
418
415
|
}
|
|
419
416
|
function C(e) {
|
|
420
417
|
const t = Math.max(e.lastIndexOf("/"), e.lastIndexOf("\\"));
|
|
@@ -717,8 +714,12 @@ function V(e) {
|
|
|
717
714
|
}),
|
|
718
715
|
[e.schema, e.bundle, e.importedFileNames, e.missingFileNames]
|
|
719
716
|
);
|
|
720
|
-
return
|
|
721
|
-
z(), t.current
|
|
717
|
+
return T(() => {
|
|
718
|
+
if (z(), !t.current) return;
|
|
719
|
+
const s = setTimeout(() => {
|
|
720
|
+
t.current && H(t.current, a);
|
|
721
|
+
}, 0);
|
|
722
|
+
return () => clearTimeout(s);
|
|
722
723
|
}, [a]), /* @__PURE__ */ M("div", { ref: t, className: e.className });
|
|
723
724
|
}
|
|
724
725
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@miman/json-schema-viewer-react",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "React component for visualizing JSON Schema files",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"dist"
|
|
21
21
|
],
|
|
22
22
|
"peerDependencies": {
|
|
23
|
-
"react": "^18.0.0
|
|
24
|
-
"react-dom": "^18.0.0
|
|
23
|
+
"react": "^18.0.0",
|
|
24
|
+
"react-dom": "^18.0.0"
|
|
25
25
|
},
|
|
26
26
|
"repository": {
|
|
27
27
|
"type": "git",
|