Feat/add json tree to UI

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