feat: add json tree

Author: AlemTuzlak

.changeset/thin-cougars-fly.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/react-devtools': minor
+'@tanstack/solid-devtools': minor
+'@tanstack/devtools-ui': minor
+---
+
+Added json tree to devtools-ui and adjusted the width for the plugin renderers

packages/devtools-ui/src/components/tree.tsx

@@ -0,0 +1,75 @@
+import { For } from "solid-js";
+import { useStyles } from "../styles/use-styles";
+
+export function JsonTree(props: { value: any }){
+  return <JsonValue isRoot value={props.value} />
+}
+
+export function JsonValue(props: { value: any; keyName?: string, isRoot?: boolean  }) {
+  const { value, keyName, isRoot = false } = props;
+  const styles = useStyles();
+
+  if (typeof value === 'string') {
+    return <span class={styles().tree.valueContainer(isRoot)}>
+      <span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
+        <span class={styles().tree.valueString}>&quot;{value}&quot;</span></span>
+      <span>,</span>
+    </span>;
+  }
+  if (typeof value === 'number') {
+    return <span class={styles().tree.valueContainer(isRoot)}>
+      <span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
+        <span class={styles().tree.valueNumber}>{value}</span></span>
+      <span>,</span>
+    </span>;
+  }
+  if (typeof value === 'boolean') {
+    return <span class={styles().tree.valueContainer(isRoot)}>
+      <span>
+        {keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
+        <span class={styles().tree.valueBoolean}>{String(value)}</span>
+      </span>
+      <span>,</span>
+    </span>;
+  }
+  if (value === null) {
+    return <span class={styles().tree.valueContainer(isRoot)}>
+      <span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
+        <span class={styles().tree.valueNull}>null</span></span>
+      <span>,</span>
+    </span>;
+  }
+  if (value === undefined) {
+    return <span class={styles().tree.valueContainer(isRoot)}>
+      <span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
+        <span class={styles().tree.valueNull}>undefined</span></span>
+      <span>,</span>
+    </span>;
+  }
+  if (Array.isArray(value)) {
+    return <span class={styles().tree.valueContainer(isRoot)}>
+      <span>{keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
+        <span class={styles().tree.valueBraces}>[</span>
+        <For each={value}>{(item) => <>
+          <JsonValue value={item} />
+        </>}
+        </For>
+        <span class={styles().tree.valueBraces}>]</span></span>
+      <span>,</span>
+    </span>;
+  }
+  if (typeof value === 'object') {
+    const keys = Object.keys(value);
+    return <span class={styles().tree.valueContainer(isRoot)}>
+      <span> {keyName && <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>}
+        <span class={styles().tree.valueBraces}>{'{'}</span>
+        <For each={keys}>{(k,) => <>
+          <JsonValue value={value[k]} keyName={k} />
+        </>}
+        </For>
+        <span class={styles().tree.valueBraces}>{'}'}</span></span>
+
+    </span>;
+  }
+  return <span />;
+}

packages/devtools-ui/src/index.ts

@@ -2,3 +2,4 @@ export { Checkbox } from './components/checkbox'
 export { Input } from './components/input'
 export { Select } from './components/select'
 export { TanStackLogo } from './components/logo'
+export { JsonTree } from './components/tree'

packages/devtools-ui/src/styles/use-styles.ts

@@ -186,6 +186,31 @@ const stylesFactory = () => {
       font-size: 0.8rem;
       line-height: 1.3;
     `,
+    tree: {
+      valueString: css`
+      color: ${colors.green[400]};
+    `,
+      valueNumber: css`
+      color: ${colors.yellow[400]};
+    `,
+      valueBoolean: css`
+      color: ${colors.pink[400]};
+    `,
+      valueNull: css`
+      color: ${colors.gray[400]};
+      font-style: italic;
+    `,
+      valueKey: css`
+      color: ${colors.blue[300]};
+    `,
+      valueBraces: css`
+      color: ${colors.gray[500]};
+    `,
+      valueContainer: (isRoot: boolean) => css`
+      display: block;
+      margin-left: ${isRoot ? '0' : '1rem'};
+    `
+    }
   }
 }
 

packages/react-devtools/src/devtools.tsx

@@ -153,7 +153,7 @@ export const TanstackDevtools = ({
 
   return (
     <>
-      <div ref={devToolRef} />
+      <div style={{height: "100%"}} ref={devToolRef} />
       {pluginContainer && PluginComponent
         ? createPortal(<>{PluginComponent}</>, pluginContainer)
         : null}

packages/solid-devtools/src/devtools.tsx

@@ -126,5 +126,5 @@ export const TanstackDevtools = ({
       })
     }
   })
-  return <div ref={devToolRef} />
+  return <div style={{height: '100%'}} ref={devToolRef} />
 }