mantine-json-view - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

./dist/index.umd.js

@@ -1,1 +0,1 @@
-(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.index={},c["react/jsx-runtime"],c.React,c["@mantine/core"]))})(this,function(c,n,i,s){"use strict";const f=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function a({sx:e,...r}){const{theme:t}=i.useContext(f);return n.jsx(s.Text,{...r,sx:{...e,fontFamily:t==null?void 0:t.fontFamily}})}const T=s.createStyles((e,{literal:r,theme:t})=>{const{key:o,literals:l={}}=(t==null?void 0:t.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:l[r.type]}}});function m(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function x({literal:e}){const{clipboardComponent:r,theme:t}=i.useContext(f),{classes:o}=T({literal:e,theme:t}),l=i.useMemo(()=>m(e),[e]);return n.jsxs(s.Flex,{className:o.root,children:[n.jsxs(a,{fz:"md",children:[n.jsxs("span",{className:o.key,children:['"',e.key,'":']})," ",n.jsx("span",{className:o.value,children:l})]}),r!==void 0&&n.jsx(r,{value:l})]})}const h={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function u({object:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:h.root,children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:'"object": {'}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"}"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(y,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(x,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:h.closeBracket,children:"}"})]})}function y({array:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2},children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:'"array": ['}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"]"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(y,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(x,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:{textAlign:"center",width:"100%"},children:"]"})]})}function g(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function F(e){try{const r=JSON.parse(e);if(Array.isArray(r))return w(r);if(g(r))return C(r);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function C(e){return{type:"object",children:Object.entries(e).map(([r,t])=>b(r,t))}}function w(e){return{type:"array",children:Object.entries(e).map(([r,t])=>b(r,t))}}function b(e,r){if(g(r))return C(r);if(Array.isArray(r))return w(r);if(typeof r=="boolean")return{type:"boolean",key:e,value:r};if(typeof r=="number")return{type:"number",key:e,value:r};if(typeof r=="string")return{type:"string",key:e,value:r};if(r===void 0)return{type:"undefined",key:e,value:r};if(r===null)return{type:"null",key:e,value:r};throw new Error(`Unable to parse value: ${r}`)}const A={parse:F};function j(e){return{ast:i.useMemo(()=>A.parse(e),[e]),json:e}}function S({collapseComponent:e,clipboardComponent:r,json:t,theme:o}){const{ast:l}=j(t);return n.jsx(f.Provider,{value:{collapseComponent:e,clipboardComponent:r,theme:o},children:l.type==="object"?n.jsx(u,{object:l}):n.jsx(y,{array:l})})}c.JsonView=S,c.useJsonParser=j,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.index={},c["react/jsx-runtime"],c.React,c["@mantine/core"]))})(this,function(c,n,i,s){"use strict";const f=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function a({sx:e,...r}){const{theme:t}=i.useContext(f);return n.jsx(s.Text,{...r,sx:{...e,fontFamily:t==null?void 0:t.fontFamily}})}const T=s.createStyles((e,{literal:r,theme:t})=>{const{key:o,literals:l={}}=(t==null?void 0:t.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:l[r.type]}}});function m(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function y({literal:e}){const{clipboardComponent:r,theme:t}=i.useContext(f),{classes:o}=T({literal:e,theme:t}),l=i.useMemo(()=>m(e),[e]);return n.jsxs(s.Flex,{className:o.root,children:[n.jsxs(a,{fz:"md",children:[n.jsxs("span",{className:o.key,children:['"',e.key,'":']})," ",n.jsx("span",{className:o.value,children:l})]}),r!==void 0&&n.jsx(r,{value:l})]})}const h={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function u({object:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:h.root,children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:`"${e.key||"object"}": {`}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"}"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(x,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(y,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:h.closeBracket,children:"}"})]})}function x({array:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2},children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:`"${e.key||"array"}": [`}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"]"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(x,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(y,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:{textAlign:"center",width:"100%"},children:"]"})]})}function g(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function F(e){try{const r=JSON.parse(e);if(Array.isArray(r))return w("",r);if(g(r))return C("",r);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function C(e,r){return{children:Object.entries(r).map(([t,o])=>b(t,o)),key:e,type:"object"}}function w(e,r){return{children:Object.entries(r).map(([t,o])=>b(t,o)),key:e,type:"array"}}function b(e,r){if(g(r))return C(e,r);if(Array.isArray(r))return w(e,r);if(typeof r=="boolean")return{type:"boolean",key:e,value:r};if(typeof r=="number")return{type:"number",key:e,value:r};if(typeof r=="string")return{type:"string",key:e,value:r};if(r===void 0)return{type:"undefined",key:e,value:r};if(r===null)return{type:"null",key:e,value:r};throw new Error(`Unable to parse value: ${r}`)}const A={parse:F};function j(e){const r=i.useMemo(()=>A.parse(e),[e]);return console.log(r),{ast:r,json:e}}function S({collapseComponent:e,clipboardComponent:r,json:t,theme:o}){const{ast:l}=j(t);return n.jsx(f.Provider,{value:{collapseComponent:e,clipboardComponent:r,theme:o},children:l.type==="object"?n.jsx(u,{object:l}):n.jsx(x,{array:l})})}c.JsonView=S,c.useJsonParser=j,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

dist/index.es.js

 import { jsx as n, jsxs as i } from "react/jsx-runtime";
-import { createContext as A, useContext as u, useMemo as h, useState as g } from "react";
-import { Text as T, createStyles as z, Flex as s } from "@mantine/core";
-const p = A({
+import { createContext as T, useContext as u, useMemo as y, useState as g } from "react";
+import { Text as j, createStyles as z, Flex as s } from "@mantine/core";
+const p = T({
   collapseComponent: void 0,
@@ -12,3 +12,3 @@ clipboardComponent: void 0,
   return /* @__PURE__ */ n(
-    T,
+    j,
     {
@@ -52,3 +52,3 @@ ...r,
 function x({ literal: e }) {
-  const { clipboardComponent: r, theme: t } = u(p), { classes: o } = J({ literal: e, theme: t }), c = h(() => S(e), [e]);
+  const { clipboardComponent: r, theme: t } = u(p), { classes: o } = J({ literal: e, theme: t }), c = y(() => S(e), [e]);
   return /* @__PURE__ */ i(s, { className: o.root, children: [
@@ -67,3 +67,3 @@ /* @__PURE__ */ i(a, { fz: "md", children: [
 }
-const y = {
+const h = {
   closeBracket: {
@@ -81,3 +81,3 @@ textAlign: "center",
   const { collapseComponent: r, theme: t } = u(p), [o, c] = g(!1);
-  return /* @__PURE__ */ i(s, { sx: y.root, children: [
+  return /* @__PURE__ */ i(s, { sx: h.root, children: [
     /* @__PURE__ */ i(s, { align: "center", direction: "column", gap: 4, children: [
@@ -104,3 +104,3 @@ r !== void 0 && /* @__PURE__ */ n(
       /* @__PURE__ */ i(s, { align: "center", gap: "xs", children: [
-        /* @__PURE__ */ n(a, { fz: "md", children: '"object": {' }),
+        /* @__PURE__ */ n(a, { fz: "md", children: `"${e.key || "object"}": {` }),
         /* @__PURE__ */ n(a, { c: "dimmed", fz: "xs", children: e.children.length === 1 ? "1 item" : `${e.children.length} items` }),
@@ -120,3 +120,3 @@ o && /* @__PURE__ */ n(a, { fz: "md", children: "}" })
     ] }),
-    !o && /* @__PURE__ */ n(a, { fz: "md", sx: y.closeBracket, children: "}" })
+    !o && /* @__PURE__ */ n(a, { fz: "md", sx: h.closeBracket, children: "}" })
   ] });
@@ -156,3 +156,3 @@ }
           /* @__PURE__ */ i(s, { align: "center", gap: "xs", children: [
-            /* @__PURE__ */ n(a, { fz: "md", children: '"array": [' }),
+            /* @__PURE__ */ n(a, { fz: "md", children: `"${e.key || "array"}": [` }),
             /* @__PURE__ */ n(a, { c: "dimmed", fz: "xs", children: e.children.length === 1 ? "1 item" : `${e.children.length} items` }),
@@ -190,9 +190,9 @@ o && /* @__PURE__ */ n(a, { fz: "md", children: "]" })
 }
-function k(e) {
+function $(e) {
   try {
     const r = JSON.parse(e);
     if (Array.isArray(r))
-      return b(r);
+      return b("", r);
     if (C(r))
-      return w(r);
+      return w("", r);
     throw new Error("Invalid json");
@@ -203,23 +203,25 @@ } catch {
 }
-function w(e) {
+function w(e, r) {
   return {
-    type: "object",
-    children: Object.entries(e).map(
-      ([r, t]) => j(r, t)
-    )
+    children: Object.entries(r).map(
+      ([t, o]) => A(t, o)
+    ),
+    key: e,
+    type: "object"
   };
 }
-function b(e) {
+function b(e, r) {
   return {
-    type: "array",
-    children: Object.entries(e).map(
-      ([r, t]) => j(r, t)
-    )
+    children: Object.entries(r).map(
+      ([t, o]) => A(t, o)
+    ),
+    key: e,
+    type: "array"
   };
 }
-function j(e, r) {
+function A(e, r) {
   if (C(r))
-    return w(r);
+    return w(e, r);
   if (Array.isArray(r))
-    return b(r);
+    return b(e, r);
   if (typeof r == "boolean")
@@ -257,8 +259,9 @@ return {
 }
-const $ = {
-  parse: k
+const k = {
+  parse: $
 };
 function E(e) {
-  return {
-    ast: h(() => $.parse(e), [e]),
+  const r = y(() => k.parse(e), [e]);
+  return console.log(r), {
+    ast: r,
     json: e
@@ -265,0 +268,0 @@ };

dist/index.umd.js

@@ -1,1 +0,1 @@
-(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.index={},c["react/jsx-runtime"],c.React,c["@mantine/core"]))})(this,function(c,n,i,s){"use strict";const f=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function a({sx:e,...r}){const{theme:t}=i.useContext(f);return n.jsx(s.Text,{...r,sx:{...e,fontFamily:t==null?void 0:t.fontFamily}})}const T=s.createStyles((e,{literal:r,theme:t})=>{const{key:o,literals:l={}}=(t==null?void 0:t.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:l[r.type]}}});function m(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function x({literal:e}){const{clipboardComponent:r,theme:t}=i.useContext(f),{classes:o}=T({literal:e,theme:t}),l=i.useMemo(()=>m(e),[e]);return n.jsxs(s.Flex,{className:o.root,children:[n.jsxs(a,{fz:"md",children:[n.jsxs("span",{className:o.key,children:['"',e.key,'":']})," ",n.jsx("span",{className:o.value,children:l})]}),r!==void 0&&n.jsx(r,{value:l})]})}const h={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function u({object:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:h.root,children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:'"object": {'}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"}"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(y,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(x,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:h.closeBracket,children:"}"})]})}function y({array:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2},children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:'"array": ['}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"]"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(y,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(x,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:{textAlign:"center",width:"100%"},children:"]"})]})}function g(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function F(e){try{const r=JSON.parse(e);if(Array.isArray(r))return w(r);if(g(r))return C(r);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function C(e){return{type:"object",children:Object.entries(e).map(([r,t])=>b(r,t))}}function w(e){return{type:"array",children:Object.entries(e).map(([r,t])=>b(r,t))}}function b(e,r){if(g(r))return C(r);if(Array.isArray(r))return w(r);if(typeof r=="boolean")return{type:"boolean",key:e,value:r};if(typeof r=="number")return{type:"number",key:e,value:r};if(typeof r=="string")return{type:"string",key:e,value:r};if(r===void 0)return{type:"undefined",key:e,value:r};if(r===null)return{type:"null",key:e,value:r};throw new Error(`Unable to parse value: ${r}`)}const A={parse:F};function j(e){return{ast:i.useMemo(()=>A.parse(e),[e]),json:e}}function S({collapseComponent:e,clipboardComponent:r,json:t,theme:o}){const{ast:l}=j(t);return n.jsx(f.Provider,{value:{collapseComponent:e,clipboardComponent:r,theme:o},children:l.type==="object"?n.jsx(u,{object:l}):n.jsx(y,{array:l})})}c.JsonView=S,c.useJsonParser=j,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.index={},c["react/jsx-runtime"],c.React,c["@mantine/core"]))})(this,function(c,n,i,s){"use strict";const f=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function a({sx:e,...r}){const{theme:t}=i.useContext(f);return n.jsx(s.Text,{...r,sx:{...e,fontFamily:t==null?void 0:t.fontFamily}})}const T=s.createStyles((e,{literal:r,theme:t})=>{const{key:o,literals:l={}}=(t==null?void 0:t.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:l[r.type]}}});function m(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function y({literal:e}){const{clipboardComponent:r,theme:t}=i.useContext(f),{classes:o}=T({literal:e,theme:t}),l=i.useMemo(()=>m(e),[e]);return n.jsxs(s.Flex,{className:o.root,children:[n.jsxs(a,{fz:"md",children:[n.jsxs("span",{className:o.key,children:['"',e.key,'":']})," ",n.jsx("span",{className:o.value,children:l})]}),r!==void 0&&n.jsx(r,{value:l})]})}const h={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function u({object:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:h.root,children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:`"${e.key||"object"}": {`}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"}"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(x,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(y,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:h.closeBracket,children:"}"})]})}function x({array:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2},children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:`"${e.key||"array"}": [`}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"]"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(x,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(y,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:{textAlign:"center",width:"100%"},children:"]"})]})}function g(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function F(e){try{const r=JSON.parse(e);if(Array.isArray(r))return w("",r);if(g(r))return C("",r);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function C(e,r){return{children:Object.entries(r).map(([t,o])=>b(t,o)),key:e,type:"object"}}function w(e,r){return{children:Object.entries(r).map(([t,o])=>b(t,o)),key:e,type:"array"}}function b(e,r){if(g(r))return C(e,r);if(Array.isArray(r))return w(e,r);if(typeof r=="boolean")return{type:"boolean",key:e,value:r};if(typeof r=="number")return{type:"number",key:e,value:r};if(typeof r=="string")return{type:"string",key:e,value:r};if(r===void 0)return{type:"undefined",key:e,value:r};if(r===null)return{type:"null",key:e,value:r};throw new Error(`Unable to parse value: ${r}`)}const A={parse:F};function j(e){const r=i.useMemo(()=>A.parse(e),[e]);return console.log(r),{ast:r,json:e}}function S({collapseComponent:e,clipboardComponent:r,json:t,theme:o}){const{ast:l}=j(t);return n.jsx(f.Provider,{value:{collapseComponent:e,clipboardComponent:r,theme:o},children:l.type==="object"?n.jsx(u,{object:l}):n.jsx(x,{array:l})})}c.JsonView=S,c.useJsonParser=j,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

dist/types/json.d.ts

 export type JsonAST = JsonArray | JsonObject;
 export interface JsonArray {
     children: Array<JsonArray | JsonObject | JsonLiteralValue>;
+    key: string;
     type: 'array';
@@ -8,2 +9,3 @@ }
     children: Array<JsonArray | JsonObject | JsonLiteralValue>;
+    key: string;
     type: 'object';
@@ -10,0 +12,0 @@ }

package.json

 {
   "name": "mantine-json-view",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "engines": {
@@ -5,0 +5,0 @@ "node": "18",

README.md

@@ -53,2 +53,2 @@ # Mantine JSON View
 
-![Example Json View](static/images/readme-example.png 'Example Json View')
+<img src="https://raw.githubusercontent.com/matthewwolfe/mantine-json-view/main/static/images/readme-example.png" width="360px" />

No alert changes

Improved metrics

Total package byte prevSize

23379

increased by1.5%

Lines of code

451

increased by1.58%

No dependency changes