feat: add expansion depth to json tree (#132)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/silent-beds-create.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-ui': patch
+---
+
+Improvements to the json tree component, now supports expansion length config

.changeset/tricky-cloths-joke.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools': patch
+'@tanstack/devtools-vite': patch
+---
+
+improve open-source by using location origin

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

@@ -3,97 +3,19 @@ import clsx from 'clsx'
 import { css, useStyles } from '../styles/use-styles'
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
 
-export function JsonTree(props: { value: any; copyable?: boolean }) {
-  return <JsonValue isRoot value={props.value} copyable={props.copyable} />
-}
-type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
-
-const CopyButton = (props: { value: unknown }) => {
-  const styles = useStyles()
-  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
-
-  return (
-    <button
-      class={styles().tree.actionButton}
-      title="Copy object to clipboard"
-      aria-label={`${
-        copyState() === 'NoCopy'
-          ? 'Copy object to clipboard'
-          : copyState() === 'SuccessCopy'
-            ? 'Object copied to clipboard'
-            : 'Error copying object to clipboard'
-      }`}
-      onClick={
-        copyState() === 'NoCopy'
-          ? () => {
-              navigator.clipboard
-                .writeText(JSON.stringify(props.value, null, 2))
-                .then(
-                  () => {
-                    setCopyState('SuccessCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                  (err) => {
-                    console.error('Failed to copy: ', err)
-                    setCopyState('ErrorCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                )
-            }
-          : undefined
-      }
-    >
-      <Switch>
-        <Match when={copyState() === 'NoCopy'}>
-          <Copier />
-        </Match>
-        <Match when={copyState() === 'SuccessCopy'}>
-          <CopiedCopier theme={'dark'} />
-        </Match>
-        <Match when={copyState() === 'ErrorCopy'}>
-          <ErrorCopier />
-        </Match>
-      </Switch>
-    </button>
-  )
-}
-
-const Expander = (props: { expanded: boolean }) => {
-  const styles = useStyles()
+export function JsonTree(props: {
+  value: any
+  copyable?: boolean
+  defaultExpansionDepth?: number
+}) {
   return (
-    <span
-      class={clsx(
-        styles().tree.expander,
-        css`
-          transform: rotate(${props.expanded ? 90 : 0}deg);
-        `,
-        props.expanded &&
-          css`
-            & svg {
-              top: -1px;
-            }
-          `,
-      )}
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 12L10 8L6 4"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </span>
+    <JsonValue
+      isRoot
+      value={props.value}
+      copyable={props.copyable}
+      depth={0}
+      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}
+    />
   )
 }
 
@@ -103,8 +25,18 @@ function JsonValue(props: {
   isRoot?: boolean
   isLastKey?: boolean
   copyable?: boolean
+  defaultExpansionDepth: number
+  depth: number
 }) {
-  const { value, keyName, isRoot = false, isLastKey, copyable } = props
+  const {
+    value,
+    keyName,
+    isRoot = false,
+    isLastKey,
+    copyable,
+    defaultExpansionDepth,
+    depth,
+  } = props
   const styles = useStyles()
 
   return (
@@ -137,12 +69,24 @@ function JsonValue(props: {
         }
         if (Array.isArray(value)) {
           return (
-            <ArrayValue copyable={copyable} keyName={keyName} value={value} />
+            <ArrayValue
+              defaultExpansionDepth={defaultExpansionDepth}
+              depth={depth}
+              copyable={copyable}
+              keyName={keyName}
+              value={value}
+            />
           )
         }
         if (typeof value === 'object') {
           return (
-            <ObjectValue copyable={copyable} keyName={keyName} value={value} />
+            <ObjectValue
+              defaultExpansionDepth={defaultExpansionDepth}
+              depth={depth}
+              copyable={copyable}
+              keyName={keyName}
+              value={value}
+            />
           )
         }
         return <span />
@@ -161,16 +105,36 @@ const ArrayValue = ({
   value,
   keyName,
   copyable,
+  defaultExpansionDepth,
+  depth,
 }: {
   value: Array<any>
   copyable?: boolean
   keyName?: string
+  defaultExpansionDepth: number
+  depth: number
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(true)
+  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)
+
+  if (value.length === 0) {
+    return (
+      <span class={styles().tree.expanderContainer}>
+        {keyName && (
+          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+            &quot;{keyName}&quot;:{' '}
+          </span>
+        )}
+        <span class={styles().tree.valueBraces}>[]</span>
+      </span>
+    )
+  }
   return (
     <span class={styles().tree.expanderContainer}>
-      <Expander expanded={expanded()} />
+      <Expander
+        onClick={() => setExpanded(!expanded())}
+        expanded={expanded()}
+      />
       {keyName && (
         <span
           onclick={(e) => {
@@ -195,6 +159,8 @@ const ArrayValue = ({
                   copyable={copyable}
                   value={item}
                   isLastKey={isLastKey}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
                 />
               )
             }}
@@ -222,19 +188,40 @@ const ObjectValue = ({
   value,
   keyName,
   copyable,
+  defaultExpansionDepth,
+  depth,
 }: {
   value: Record<string, any>
   keyName?: string
   copyable?: boolean
+  defaultExpansionDepth: number
+  depth: number
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(true)
+  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)
   const keys = Object.keys(value)
   const lastKeyName = keys[keys.length - 1]
 
+  if (keys.length === 0) {
+    return (
+      <span class={styles().tree.expanderContainer}>
+        {keyName && (
+          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+            &quot;{keyName}&quot;:{' '}
+          </span>
+        )}
+        <span class={styles().tree.valueBraces}>{'{}'}</span>
+      </span>
+    )
+  }
   return (
     <span class={styles().tree.expanderContainer}>
-      {keyName && <Expander expanded={expanded()} />}
+      {keyName && (
+        <Expander
+          onClick={() => setExpanded(!expanded())}
+          expanded={expanded()}
+        />
+      )}
       {keyName && (
         <span
           onClick={(e) => {
@@ -259,6 +246,8 @@ const ObjectValue = ({
                   keyName={k}
                   isLastKey={lastKeyName === k}
                   copyable={copyable}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
                 />
               </>
             )}
@@ -281,3 +270,95 @@ const ObjectValue = ({
     </span>
   )
 }
+
+type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
+
+const CopyButton = (props: { value: unknown }) => {
+  const styles = useStyles()
+  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
+
+  return (
+    <button
+      class={styles().tree.actionButton}
+      title="Copy object to clipboard"
+      aria-label={`${
+        copyState() === 'NoCopy'
+          ? 'Copy object to clipboard'
+          : copyState() === 'SuccessCopy'
+            ? 'Object copied to clipboard'
+            : 'Error copying object to clipboard'
+      }`}
+      onClick={
+        copyState() === 'NoCopy'
+          ? () => {
+              navigator.clipboard
+                .writeText(JSON.stringify(props.value, null, 2))
+                .then(
+                  () => {
+                    setCopyState('SuccessCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                  (err) => {
+                    console.error('Failed to copy: ', err)
+                    setCopyState('ErrorCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                )
+            }
+          : undefined
+      }
+    >
+      <Switch>
+        <Match when={copyState() === 'NoCopy'}>
+          <Copier />
+        </Match>
+        <Match when={copyState() === 'SuccessCopy'}>
+          <CopiedCopier theme={'dark'} />
+        </Match>
+        <Match when={copyState() === 'ErrorCopy'}>
+          <ErrorCopier />
+        </Match>
+      </Switch>
+    </button>
+  )
+}
+
+const Expander = (props: { expanded: boolean; onClick: () => void }) => {
+  const styles = useStyles()
+  return (
+    <span
+      onClick={props.onClick}
+      class={clsx(
+        styles().tree.expander,
+        css`
+          transform: rotate(${props.expanded ? 90 : 0}deg);
+        `,
+        props.expanded &&
+          css`
+            & svg {
+              top: -1px;
+            }
+          `,
+      )}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 12L10 8L6 4"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  )
+}

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

@@ -393,6 +393,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
       `,
       expander: css`
         position: absolute;
+        cursor: pointer;
         left: -16px;
         top: 3px;
         & path {