@tanstack/devtools-ui 0.4.0 → 0.4.1

package/dist/esm/components/tree.js

@@ -24,135 +24,155 @@ function JsonTree(props) {
   });
 }
 function JsonValue(props) {
-  const {
-    value,
-    keyName,
-    isRoot = false,
-    isLastKey,
-    copyable,
-    defaultExpansionDepth,
-    depth,
-    collapsePaths,
-    path
-  } = props;
   const styles = useStyles();
   return (() => {
     var _el$ = _tmpl$();
     insert(_el$, (() => {
-      var _c$ = memo(() => !!(keyName && typeof value !== "object" && !Array.isArray(value)));
+      var _c$ = memo(() => !!(props.keyName && typeof props.value !== "object" && !Array.isArray(props.value)));
       return () => _c$() && (() => {
         var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
         _el$5.nextSibling;
-        insert(_el$2, keyName, _el$5);
+        insert(_el$2, () => props.keyName, _el$5);
         effect(() => className(_el$2, styles().tree.valueKey));
         return _el$2;
       })();
     })(), null);
     insert(_el$, () => {
-      if (typeof value === "string") {
+      if (typeof props.value === "string") {
         return (() => {
           var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
           _el$9.nextSibling;
-          insert(_el$6, value, _el$9);
+          insert(_el$6, () => props.value, _el$9);
           effect(() => className(_el$6, styles().tree.valueString));
           return _el$6;
         })();
       }
-      if (typeof value === "number") {
+      if (typeof props.value === "number") {
         return (() => {
           var _el$0 = _tmpl$();
-          insert(_el$0, value);
+          insert(_el$0, () => props.value);
           effect(() => className(_el$0, styles().tree.valueNumber));
           return _el$0;
         })();
       }
-      if (typeof value === "boolean") {
+      if (typeof props.value === "boolean") {
         return (() => {
           var _el$1 = _tmpl$();
-          insert(_el$1, () => String(value));
+          insert(_el$1, () => String(props.value));
           effect(() => className(_el$1, styles().tree.valueBoolean));
           return _el$1;
         })();
       }
-      if (value === null) {
+      if (props.value === null) {
         return (() => {
           var _el$10 = _tmpl$4();
           effect(() => className(_el$10, styles().tree.valueNull));
           return _el$10;
         })();
       }
-      if (value === void 0) {
+      if (props.value === void 0) {
         return (() => {
           var _el$11 = _tmpl$5();
           effect(() => className(_el$11, styles().tree.valueNull));
           return _el$11;
         })();
       }
-      if (typeof value === "function") {
+      if (typeof props.value === "function") {
         return (() => {
           var _el$12 = _tmpl$();
-          insert(_el$12, () => String(value));
+          insert(_el$12, () => String(props.value));
           effect(() => className(_el$12, styles().tree.valueFunction));
           return _el$12;
         })();
       }
-      if (Array.isArray(value)) {
+      if (Array.isArray(props.value)) {
         return createComponent(ArrayValue, {
-          defaultExpansionDepth,
-          depth,
-          copyable,
-          keyName,
-          value,
-          collapsePaths,
-          path
+          get defaultExpansionDepth() {
+            return props.defaultExpansionDepth;
+          },
+          get depth() {
+            return props.depth;
+          },
+          get copyable() {
+            return props.copyable;
+          },
+          get keyName() {
+            return props.keyName;
+          },
+          get value() {
+            return props.value;
+          },
+          get collapsePaths() {
+            return props.collapsePaths;
+          },
+          get path() {
+            return props.path;
+          }
         });
       }
-      if (typeof value === "object") {
+      if (typeof props.value === "object") {
         return createComponent(ObjectValue, {
-          defaultExpansionDepth,
-          depth,
-          copyable,
-          keyName,
-          value,
-          collapsePaths,
-          path
+          get defaultExpansionDepth() {
+            return props.defaultExpansionDepth;
+          },
+          get depth() {
+            return props.depth;
+          },
+          get copyable() {
+            return props.copyable;
+          },
+          get keyName() {
+            return props.keyName;
+          },
+          get value() {
+            return props.value;
+          },
+          get collapsePaths() {
+            return props.collapsePaths;
+          },
+          get path() {
+            return props.path;
+          }
         });
       }
       return _tmpl$();
     }, null);
-    insert(_el$, copyable && (() => {
-      var _el$14 = _tmpl$6();
-      insert(_el$14, createComponent(CopyButton, {
-        value
-      }));
-      effect(() => className(_el$14, clsx(styles().tree.actions, "actions")));
-      return _el$14;
+    insert(_el$, (() => {
+      var _c$2 = memo(() => !!props.copyable);
+      return () => _c$2() && (() => {
+        var _el$14 = _tmpl$6();
+        insert(_el$14, createComponent(CopyButton, {
+          get value() {
+            return props.value;
+          }
+        }));
+        effect(() => className(_el$14, clsx(styles().tree.actions, "actions")));
+        return _el$14;
+      })();
     })(), null);
-    insert(_el$, isLastKey || isRoot ? "" : _tmpl$7(), null);
-    effect(() => className(_el$, styles().tree.valueContainer(isRoot)));
+    insert(_el$, (() => {
+      var _c$3 = memo(() => !!(props.isLastKey || props.isRoot));
+      return () => _c$3() ? "" : _tmpl$7();
+    })(), null);
+    effect(() => className(_el$, styles().tree.valueContainer(props.isRoot ?? false)));
     return _el$;
   })();
 }
-const ArrayValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth,
-  collapsePaths,
-  path
-}) => {
+const ArrayValue = (props) => {
   const styles = useStyles();
-  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth && !collapsePaths?.includes(path));
-  if (value.length === 0) {
+  const [expanded, setExpanded] = createSignal(props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path));
+  if (props.value.length === 0) {
     return (() => {
       var _el$16 = _tmpl$8(), _el$17 = _el$16.firstChild;
-      insert(_el$16, keyName && (() => {
-        var _el$18 = _tmpl$2(), _el$19 = _el$18.firstChild, _el$21 = _el$19.nextSibling;
-        _el$21.nextSibling;
-        insert(_el$18, keyName, _el$21);
-        effect(() => className(_el$18, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$18;
+      insert(_el$16, (() => {
+        var _c$4 = memo(() => !!props.keyName);
+        return () => _c$4() && (() => {
+          var _el$18 = _tmpl$2(), _el$19 = _el$18.firstChild, _el$21 = _el$19.nextSibling;
+          _el$21.nextSibling;
+          insert(_el$18, () => props.keyName, _el$21);
+          effect(() => className(_el$18, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+          return _el$18;
+        })();
       })(), _el$17);
       effect((_p$) => {
         var _v$ = styles().tree.expanderContainer, _v$2 = styles().tree.valueBraces;
@@ -174,25 +194,28 @@ const ArrayValue = ({
         return expanded();
       }
     }), _el$23);
-    insert(_el$22, keyName && (() => {
-      var _el$27 = _tmpl$1(), _el$28 = _el$27.firstChild, _el$33 = _el$28.nextSibling, _el$29 = _el$33.nextSibling, _el$31 = _el$29.nextSibling, _el$32 = _el$31.firstChild;
-      _el$27.$$click = (e) => {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        setExpanded(!expanded());
-      };
-      insert(_el$27, keyName, _el$33);
-      insert(_el$31, () => value.length, _el$32);
-      effect((_p$) => {
-        var _v$6 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$7 = styles().tree.info;
-        _v$6 !== _p$.e && className(_el$27, _p$.e = _v$6);
-        _v$7 !== _p$.t && className(_el$31, _p$.t = _v$7);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
-      });
-      return _el$27;
+    insert(_el$22, (() => {
+      var _c$5 = memo(() => !!props.keyName);
+      return () => _c$5() && (() => {
+        var _el$27 = _tmpl$1(), _el$28 = _el$27.firstChild, _el$33 = _el$28.nextSibling, _el$29 = _el$33.nextSibling, _el$31 = _el$29.nextSibling, _el$32 = _el$31.firstChild;
+        _el$27.$$click = (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          setExpanded(!expanded());
+        };
+        insert(_el$27, () => props.keyName, _el$33);
+        insert(_el$31, () => props.value.length, _el$32);
+        effect((_p$) => {
+          var _v$6 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$7 = styles().tree.info;
+          _v$6 !== _p$.e && className(_el$27, _p$.e = _v$6);
+          _v$7 !== _p$.t && className(_el$31, _p$.t = _v$7);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$27;
+      })();
     })(), _el$23);
     insert(_el$22, createComponent(Show, {
       get when() {
@@ -201,23 +224,33 @@ const ArrayValue = ({
       get children() {
         var _el$24 = _tmpl$();
         insert(_el$24, createComponent(For, {
-          each: value,
+          get each() {
+            return props.value;
+          },
           children: (item, i) => {
-            const isLastKey = i() === value.length - 1;
+            const isLastKey = i() === props.value.length - 1;
             return createComponent(JsonValue, {
-              copyable,
+              get copyable() {
+                return props.copyable;
+              },
               value: item,
               isLastKey,
-              defaultExpansionDepth,
-              depth: depth + 1,
-              collapsePaths,
+              get defaultExpansionDepth() {
+                return props.defaultExpansionDepth;
+              },
+              get depth() {
+                return props.depth + 1;
+              },
+              get collapsePaths() {
+                return props.collapsePaths;
+              },
               get path() {
-                return path ? `${path}[${i()}]` : `[${i()}]`;
+                return memo(() => !!props.path)() ? `${props.path}[${i()}]` : `[${i()}]`;
               }
             });
           }
         }));
-        effect(() => className(_el$24, styles().tree.expandedLine(Boolean(keyName))));
+        effect(() => className(_el$24, styles().tree.expandedLine(Boolean(props.keyName))));
         return _el$24;
       }
     }), _el$26);
@@ -250,28 +283,23 @@ const ArrayValue = ({
     return _el$22;
   })();
 };
-const ObjectValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth,
-  collapsePaths,
-  path
-}) => {
+const ObjectValue = (props) => {
   const styles = useStyles();
-  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth && !collapsePaths?.includes(path));
-  const keys = Object.keys(value);
+  const [expanded, setExpanded] = createSignal(props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path));
+  const keys = Object.keys(props.value);
   const lastKeyName = keys[keys.length - 1];
   if (keys.length === 0) {
     return (() => {
       var _el$34 = _tmpl$10(), _el$35 = _el$34.firstChild;
-      insert(_el$34, keyName && (() => {
-        var _el$36 = _tmpl$2(), _el$37 = _el$36.firstChild, _el$39 = _el$37.nextSibling;
-        _el$39.nextSibling;
-        insert(_el$36, keyName, _el$39);
-        effect(() => className(_el$36, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$36;
+      insert(_el$34, (() => {
+        var _c$6 = memo(() => !!props.keyName);
+        return () => _c$6() && (() => {
+          var _el$36 = _tmpl$2(), _el$37 = _el$36.firstChild, _el$39 = _el$37.nextSibling;
+          _el$39.nextSibling;
+          insert(_el$36, () => props.keyName, _el$39);
+          effect(() => className(_el$36, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+          return _el$36;
+        })();
       })(), _el$35);
       effect((_p$) => {
         var _v$8 = styles().tree.expanderContainer, _v$9 = styles().tree.valueBraces;
@@ -287,31 +315,37 @@ const ObjectValue = ({
   }
   return (() => {
     var _el$40 = _tmpl$11(), _el$41 = _el$40.firstChild, _el$44 = _el$41.nextSibling;
-    insert(_el$40, keyName && createComponent(Expander, {
-      onClick: () => setExpanded(!expanded()),
-      get expanded() {
-        return expanded();
-      }
-    }), _el$41);
-    insert(_el$40, keyName && (() => {
-      var _el$45 = _tmpl$1(), _el$46 = _el$45.firstChild, _el$51 = _el$46.nextSibling, _el$47 = _el$51.nextSibling, _el$49 = _el$47.nextSibling, _el$50 = _el$49.firstChild;
-      _el$45.$$click = (e) => {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        setExpanded(!expanded());
-      };
-      insert(_el$45, keyName, _el$51);
-      insert(_el$49, () => keys.length, _el$50);
-      effect((_p$) => {
-        var _v$11 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$12 = styles().tree.info;
-        _v$11 !== _p$.e && className(_el$45, _p$.e = _v$11);
-        _v$12 !== _p$.t && className(_el$49, _p$.t = _v$12);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
+    insert(_el$40, (() => {
+      var _c$7 = memo(() => !!props.keyName);
+      return () => _c$7() && createComponent(Expander, {
+        onClick: () => setExpanded(!expanded()),
+        get expanded() {
+          return expanded();
+        }
       });
-      return _el$45;
+    })(), _el$41);
+    insert(_el$40, (() => {
+      var _c$8 = memo(() => !!props.keyName);
+      return () => _c$8() && (() => {
+        var _el$45 = _tmpl$1(), _el$46 = _el$45.firstChild, _el$51 = _el$46.nextSibling, _el$47 = _el$51.nextSibling, _el$49 = _el$47.nextSibling, _el$50 = _el$49.firstChild;
+        _el$45.$$click = (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          setExpanded(!expanded());
+        };
+        insert(_el$45, () => props.keyName, _el$51);
+        insert(_el$49, () => keys.length, _el$50);
+        effect((_p$) => {
+          var _v$11 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$12 = styles().tree.info;
+          _v$11 !== _p$.e && className(_el$45, _p$.e = _v$11);
+          _v$12 !== _p$.t && className(_el$49, _p$.t = _v$12);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$45;
+      })();
     })(), _el$41);
     insert(_el$40, createComponent(Show, {
       get when() {
@@ -323,18 +357,28 @@ const ObjectValue = ({
           each: keys,
           children: (k) => createComponent(JsonValue, {
             get value() {
-              return value[k];
+              return props.value[k];
             },
             keyName: k,
             isLastKey: lastKeyName === k,
-            copyable,
-            defaultExpansionDepth,
-            depth: depth + 1,
-            collapsePaths,
-            path: `${path}${path ? "." : ""}${k}`
+            get copyable() {
+              return props.copyable;
+            },
+            get defaultExpansionDepth() {
+              return props.defaultExpansionDepth;
+            },
+            get depth() {
+              return props.depth + 1;
+            },
+            get collapsePaths() {
+              return props.collapsePaths;
+            },
+            get path() {
+              return `${props.path}${props.path ? "." : ""}${k}`;
+            }
           })
         }));
-        effect(() => className(_el$42, styles().tree.expandedLine(Boolean(keyName))));
+        effect(() => className(_el$42, styles().tree.expandedLine(Boolean(props.keyName))));
         return _el$42;
       }
     }), _el$44);

package/dist/esm/components/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\nimport type { CollapsiblePaths } from '../utils/deep-keys'\n\nexport function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {\n  value: TData\n  copyable?: boolean\n  defaultExpansionDepth?: number\n  collapsePaths?: Array<TName>\n}) {\n  return (\n    <JsonValue\n      isRoot\n      value={props.value}\n      copyable={props.copyable}\n      depth={0}\n      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n      path=\"\"\n      collapsePaths={props.collapsePaths}\n    />\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n\n  defaultExpansionDepth: number\n  depth: number\n\n  collapsePaths?: Array<string>\n  path: string\n}) {\n  const {\n    value,\n    keyName,\n    isRoot = false,\n    isLastKey,\n    copyable,\n    defaultExpansionDepth,\n    depth,\n    collapsePaths,\n    path,\n  } = props\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(isRoot)}>\n      {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>\n      )}\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n          )\n        }\n        if (typeof value === 'number') {\n          return <span class={styles().tree.valueNumber}>{value}</span>\n        }\n        if (typeof value === 'boolean') {\n          return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n        }\n        if (value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>{String(value)}</span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return (\n            <ArrayValue\n              defaultExpansionDepth={defaultExpansionDepth}\n              depth={depth}\n              copyable={copyable}\n              keyName={keyName}\n              value={value}\n              collapsePaths={collapsePaths}\n              path={path}\n            />\n          )\n        }\n        if (typeof value === 'object') {\n          return (\n            <ObjectValue\n              defaultExpansionDepth={defaultExpansionDepth}\n              depth={depth}\n              copyable={copyable}\n              keyName={keyName}\n              value={value}\n              collapsePaths={collapsePaths}\n              path={path}\n            />\n          )\n        }\n        return <span />\n      })()}\n      {copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={value} />\n        </div>\n      )}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = ({\n  value,\n  keyName,\n  copyable,\n  defaultExpansionDepth,\n  depth,\n  collapsePaths,\n  path,\n}: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    depth <= defaultExpansionDepth && !collapsePaths?.includes(path),\n  )\n\n  if (value.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>[]</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander\n        onClick={() => setExpanded(!expanded())}\n        expanded={expanded()}\n      />\n\n      {keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{value.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>[</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={value}>\n            {(item, i) => {\n              const isLastKey = i() === value.length - 1\n              return (\n                <JsonValue\n                  copyable={copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                  defaultExpansionDepth={defaultExpansionDepth}\n                  depth={depth + 1}\n                  collapsePaths={collapsePaths}\n                  path={path ? `${path}[${i()}]` : `[${i()}]`}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = ({\n  value,\n  keyName,\n  copyable,\n  defaultExpansionDepth,\n  depth,\n  collapsePaths,\n  path,\n}: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    depth <= defaultExpansionDepth && !collapsePaths?.includes(path),\n  )\n\n  const keys = Object.keys(value)\n  const lastKeyName = keys[keys.length - 1]\n\n  if (keys.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>{'{}'}</span>\n      </span>\n    )\n  }\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {keyName && (\n        <Expander\n          onClick={() => setExpanded(!expanded())}\n          expanded={expanded()}\n        />\n      )}\n\n      {keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={copyable}\n                  defaultExpansionDepth={defaultExpansionDepth}\n                  depth={depth + 1}\n                  collapsePaths={collapsePaths}\n                  path={`${path}${path ? '.' : ''}${k}`}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n  const styles = useStyles()\n  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n  return (\n    <button\n      class={styles().tree.actionButton}\n      title=\"Copy object to clipboard\"\n      aria-label={`${\n        copyState() === 'NoCopy'\n          ? 'Copy object to clipboard'\n          : copyState() === 'SuccessCopy'\n            ? 'Object copied to clipboard'\n            : 'Error copying object to clipboard'\n      }`}\n      onClick={\n        copyState() === 'NoCopy'\n          ? () => {\n              navigator.clipboard\n                .writeText(JSON.stringify(props.value, null, 2))\n                .then(\n                  () => {\n                    setCopyState('SuccessCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                  (err) => {\n                    console.error('Failed to copy: ', err)\n                    setCopyState('ErrorCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                )\n            }\n          : undefined\n      }\n    >\n      <Switch>\n        <Match when={copyState() === 'NoCopy'}>\n          <Copier />\n        </Match>\n        <Match when={copyState() === 'SuccessCopy'}>\n          <CopiedCopier theme={'dark'} />\n        </Match>\n        <Match when={copyState() === 'ErrorCopy'}>\n          <ErrorCopier />\n        </Match>\n      </Switch>\n    </button>\n  )\n}\n\nconst Expander = (props: { expanded: boolean; onClick: () => void }) => {\n  const styles = useStyles()\n  return (\n    <span\n      onClick={props.onClick}\n      class={clsx(\n        styles().tree.expander,\n        css`\n          transform: rotate(${props.expanded ? 90 : 0}deg);\n        `,\n        props.expanded &&\n          css`\n            & svg {\n              top: -1px;\n            }\n          `,\n      )}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 12L10 8L6 4\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","path","collapsePaths","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_el$14","_tmpl$6","CopyButton","clsx","actions","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","includes","length","_el$16","_tmpl$8","_el$17","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","_el$34","_tmpl$10","_el$35","_el$36","_el$37","_el$39","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_el$44","_el$45","_el$46","_el$51","_el$47","_el$49","_el$50","_v$11","_v$12","_el$42","k","_el$43","_v$0","_v$1","_v$10","copyState","setCopyState","_el$52","_tmpl$12","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$13","actionButton","_v$14","_$setAttribute","_el$53","_tmpl$13","expander","css","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\nimport type { CollapsiblePaths } from '../utils/deep-keys'\n\nexport function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {\n  value: TData\n  copyable?: boolean\n  defaultExpansionDepth?: number\n  collapsePaths?: Array<TName>\n}) {\n  return (\n    <JsonValue\n      isRoot\n      value={props.value}\n      copyable={props.copyable}\n      depth={0}\n      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n      path=\"\"\n      collapsePaths={props.collapsePaths}\n    />\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n\n  defaultExpansionDepth: number\n  depth: number\n\n  collapsePaths?: Array<string>\n  path: string\n}) {\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>\n      {props.keyName &&\n        typeof props.value !== 'object' &&\n        !Array.isArray(props.value) && (\n          <span class={styles().tree.valueKey}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n      {(() => {\n        if (typeof props.value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>\n              &quot;{props.value}&quot;\n            </span>\n          )\n        }\n        if (typeof props.value === 'number') {\n          return <span class={styles().tree.valueNumber}>{props.value}</span>\n        }\n        if (typeof props.value === 'boolean') {\n          return (\n            <span class={styles().tree.valueBoolean}>\n              {String(props.value)}\n            </span>\n          )\n        }\n        if (props.value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (props.value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof props.value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>\n              {String(props.value)}\n            </span>\n          )\n        }\n        if (Array.isArray(props.value)) {\n          return (\n            <ArrayValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n            />\n          )\n        }\n        if (typeof props.value === 'object') {\n          return (\n            <ObjectValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n            />\n          )\n        }\n        return <span />\n      })()}\n      {props.copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={props.value} />\n        </div>\n      )}\n      {props.isLastKey || props.isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = (props: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  if (props.value.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>[]</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander\n        onClick={() => setExpanded(!expanded())}\n        expanded={expanded()}\n      />\n\n      {props.keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{props.value.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>[</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={props.value}>\n            {(item, i) => {\n              const isLastKey = i() === props.value.length - 1\n              return (\n                <JsonValue\n                  copyable={props.copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = (props: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  const keys = Object.keys(props.value)\n  const lastKeyName = keys[keys.length - 1]\n\n  if (keys.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>{'{}'}</span>\n      </span>\n    )\n  }\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {props.keyName && (\n        <Expander\n          onClick={() => setExpanded(!expanded())}\n          expanded={expanded()}\n        />\n      )}\n\n      {props.keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={props.value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={props.copyable}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={`${props.path}${props.path ? '.' : ''}${k}`}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n  const styles = useStyles()\n  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n  return (\n    <button\n      class={styles().tree.actionButton}\n      title=\"Copy object to clipboard\"\n      aria-label={`${\n        copyState() === 'NoCopy'\n          ? 'Copy object to clipboard'\n          : copyState() === 'SuccessCopy'\n            ? 'Object copied to clipboard'\n            : 'Error copying object to clipboard'\n      }`}\n      onClick={\n        copyState() === 'NoCopy'\n          ? () => {\n              navigator.clipboard\n                .writeText(JSON.stringify(props.value, null, 2))\n                .then(\n                  () => {\n                    setCopyState('SuccessCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                  (err) => {\n                    console.error('Failed to copy: ', err)\n                    setCopyState('ErrorCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                )\n            }\n          : undefined\n      }\n    >\n      <Switch>\n        <Match when={copyState() === 'NoCopy'}>\n          <Copier />\n        </Match>\n        <Match when={copyState() === 'SuccessCopy'}>\n          <CopiedCopier theme={'dark'} />\n        </Match>\n        <Match when={copyState() === 'ErrorCopy'}>\n          <ErrorCopier />\n        </Match>\n      </Switch>\n    </button>\n  )\n}\n\nconst Expander = (props: { expanded: boolean; onClick: () => void }) => {\n  const styles = useStyles()\n  return (\n    <span\n      onClick={props.onClick}\n      class={clsx(\n        styles().tree.expander,\n        css`\n          transform: rotate(${props.expanded ? 90 : 0}deg);\n        `,\n        props.expanded &&\n          css`\n            & svg {\n              top: -1px;\n            }\n          `,\n      )}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 12L10 8L6 4\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","path","collapsePaths","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","keyName","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_c$2","_el$14","_tmpl$6","CopyButton","clsx","actions","_c$3","isLastKey","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","includes","length","_el$16","_tmpl$8","_el$17","_c$4","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_c$5","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","_el$34","_tmpl$10","_el$35","_c$6","_el$36","_el$37","_el$39","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_el$44","_c$7","_c$8","_el$45","_el$46","_el$51","_el$47","_el$49","_el$50","_v$11","_v$12","_el$42","k","_el$43","_v$0","_v$1","_v$10","copyState","setCopyState","_el$52","_tmpl$12","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$13","actionButton","_v$14","_$setAttribute","_el$53","_tmpl$13","expander","css","_$delegateEvents"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/components/tree.tsx

@@ -36,94 +36,87 @@ function JsonValue(props: {
   collapsePaths?: Array<string>
   path: string
 }) {
-  const {
-    value,
-    keyName,
-    isRoot = false,
-    isLastKey,
-    copyable,
-    defaultExpansionDepth,
-    depth,
-    collapsePaths,
-    path,
-  } = props
   const styles = useStyles()
 
   return (
-    <span class={styles().tree.valueContainer(isRoot)}>
-      {keyName && typeof value !== 'object' && !Array.isArray(value) && (
-        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>
-      )}
+    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>
+      {props.keyName &&
+        typeof props.value !== 'object' &&
+        !Array.isArray(props.value) && (
+          <span class={styles().tree.valueKey}>
+            &quot;{props.keyName}&quot;:{' '}
+          </span>
+        )}
       {(() => {
-        if (typeof value === 'string') {
+        if (typeof props.value === 'string') {
           return (
-            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>
+            <span class={styles().tree.valueString}>
+              &quot;{props.value}&quot;
+            </span>
           )
         }
-        if (typeof value === 'number') {
-          return <span class={styles().tree.valueNumber}>{value}</span>
+        if (typeof props.value === 'number') {
+          return <span class={styles().tree.valueNumber}>{props.value}</span>
         }
-        if (typeof value === 'boolean') {
-          return <span class={styles().tree.valueBoolean}>{String(value)}</span>
+        if (typeof props.value === 'boolean') {
+          return (
+            <span class={styles().tree.valueBoolean}>
+              {String(props.value)}
+            </span>
+          )
         }
-        if (value === null) {
+        if (props.value === null) {
           return <span class={styles().tree.valueNull}>null</span>
         }
-        if (value === undefined) {
+        if (props.value === undefined) {
           return <span class={styles().tree.valueNull}>undefined</span>
         }
-        if (typeof value === 'function') {
+        if (typeof props.value === 'function') {
           return (
-            <span class={styles().tree.valueFunction}>{String(value)}</span>
+            <span class={styles().tree.valueFunction}>
+              {String(props.value)}
+            </span>
           )
         }
-        if (Array.isArray(value)) {
+        if (Array.isArray(props.value)) {
           return (
             <ArrayValue
-              defaultExpansionDepth={defaultExpansionDepth}
-              depth={depth}
-              copyable={copyable}
-              keyName={keyName}
-              value={value}
-              collapsePaths={collapsePaths}
-              path={path}
+              defaultExpansionDepth={props.defaultExpansionDepth}
+              depth={props.depth}
+              copyable={props.copyable}
+              keyName={props.keyName}
+              value={props.value}
+              collapsePaths={props.collapsePaths}
+              path={props.path}
             />
           )
         }
-        if (typeof value === 'object') {
+        if (typeof props.value === 'object') {
           return (
             <ObjectValue
-              defaultExpansionDepth={defaultExpansionDepth}
-              depth={depth}
-              copyable={copyable}
-              keyName={keyName}
-              value={value}
-              collapsePaths={collapsePaths}
-              path={path}
+              defaultExpansionDepth={props.defaultExpansionDepth}
+              depth={props.depth}
+              copyable={props.copyable}
+              keyName={props.keyName}
+              value={props.value}
+              collapsePaths={props.collapsePaths}
+              path={props.path}
             />
           )
         }
         return <span />
       })()}
-      {copyable && (
+      {props.copyable && (
         <div class={clsx(styles().tree.actions, 'actions')}>
-          <CopyButton value={value} />
+          <CopyButton value={props.value} />
         </div>
       )}
-      {isLastKey || isRoot ? '' : <span>,</span>}
+      {props.isLastKey || props.isRoot ? '' : <span>,</span>}
     </span>
   )
 }
 
-const ArrayValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth,
-  collapsePaths,
-  path,
-}: {
+const ArrayValue = (props: {
   value: Array<any>
   copyable?: boolean
   keyName?: string
@@ -135,15 +128,16 @@ const ArrayValue = ({
   const styles = useStyles()
 
   const [expanded, setExpanded] = createSignal(
-    depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
+    props.depth <= props.defaultExpansionDepth &&
+      !props.collapsePaths?.includes(props.path),
   )
 
-  if (value.length === 0) {
+  if (props.value.length === 0) {
     return (
       <span class={styles().tree.expanderContainer}>
-        {keyName && (
+        {props.keyName && (
           <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
-            &quot;{keyName}&quot;:{' '}
+            &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
 
@@ -158,7 +152,7 @@ const ArrayValue = ({
         expanded={expanded()}
       />
 
-      {keyName && (
+      {props.keyName && (
         <span
           onclick={(e) => {
             e.stopPropagation()
@@ -167,27 +161,27 @@ const ArrayValue = ({
           }}
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
-          &quot;{keyName}&quot;:{' '}
-          <span class={styles().tree.info}>{value.length} items</span>
+          &quot;{props.keyName}&quot;:{' '}
+          <span class={styles().tree.info}>{props.value.length} items</span>
         </span>
       )}
 
       <span class={styles().tree.valueBraces}>[</span>
 
       <Show when={expanded()}>
-        <span class={styles().tree.expandedLine(Boolean(keyName))}>
-          <For each={value}>
+        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>
+          <For each={props.value}>
             {(item, i) => {
-              const isLastKey = i() === value.length - 1
+              const isLastKey = i() === props.value.length - 1
               return (
                 <JsonValue
-                  copyable={copyable}
+                  copyable={props.copyable}
                   value={item}
                   isLastKey={isLastKey}
-                  defaultExpansionDepth={defaultExpansionDepth}
-                  depth={depth + 1}
-                  collapsePaths={collapsePaths}
-                  path={path ? `${path}[${i()}]` : `[${i()}]`}
+                  defaultExpansionDepth={props.defaultExpansionDepth}
+                  depth={props.depth + 1}
+                  collapsePaths={props.collapsePaths}
+                  path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}
                 />
               )
             }}
@@ -212,15 +206,7 @@ const ArrayValue = ({
   )
 }
 
-const ObjectValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth,
-  collapsePaths,
-  path,
-}: {
+const ObjectValue = (props: {
   value: Record<string, any>
   keyName?: string
   copyable?: boolean
@@ -232,18 +218,19 @@ const ObjectValue = ({
   const styles = useStyles()
 
   const [expanded, setExpanded] = createSignal(
-    depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
+    props.depth <= props.defaultExpansionDepth &&
+      !props.collapsePaths?.includes(props.path),
   )
 
-  const keys = Object.keys(value)
+  const keys = Object.keys(props.value)
   const lastKeyName = keys[keys.length - 1]
 
   if (keys.length === 0) {
     return (
       <span class={styles().tree.expanderContainer}>
-        {keyName && (
+        {props.keyName && (
           <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
-            &quot;{keyName}&quot;:{' '}
+            &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
 
@@ -254,14 +241,14 @@ const ObjectValue = ({
 
   return (
     <span class={styles().tree.expanderContainer}>
-      {keyName && (
+      {props.keyName && (
         <Expander
           onClick={() => setExpanded(!expanded())}
           expanded={expanded()}
         />
       )}
 
-      {keyName && (
+      {props.keyName && (
         <span
           onClick={(e) => {
             e.stopPropagation()
@@ -270,7 +257,7 @@ const ObjectValue = ({
           }}
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
-          &quot;{keyName}&quot;:{' '}
+          &quot;{props.keyName}&quot;:{' '}
           <span class={styles().tree.info}>{keys.length} items</span>
         </span>
       )}
@@ -278,19 +265,19 @@ const ObjectValue = ({
       <span class={styles().tree.valueBraces}>{'{'}</span>
 
       <Show when={expanded()}>
-        <span class={styles().tree.expandedLine(Boolean(keyName))}>
+        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>
           <For each={keys}>
             {(k) => (
               <>
                 <JsonValue
-                  value={value[k]}
+                  value={props.value[k]}
                   keyName={k}
                   isLastKey={lastKeyName === k}
-                  copyable={copyable}
-                  defaultExpansionDepth={defaultExpansionDepth}
-                  depth={depth + 1}
-                  collapsePaths={collapsePaths}
-                  path={`${path}${path ? '.' : ''}${k}`}
+                  copyable={props.copyable}
+                  defaultExpansionDepth={props.defaultExpansionDepth}
+                  depth={props.depth + 1}
+                  collapsePaths={props.collapsePaths}
+                  path={`${props.path}${props.path ? '.' : ''}${k}`}
                 />
               </>
             )}