Package not found. Please check the package name and try again.
@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",
|