@tanstack/devtools-ui 0.3.4 → 0.4.0

package/src/components/tree.tsx

@@ -2,98 +2,24 @@ import { For, Match, Show, Switch, createSignal } from 'solid-js'
 import clsx from 'clsx'
 import { css, useStyles } from '../styles/use-styles'
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
+import type { CollapsiblePaths } from '../utils/deep-keys'
 
-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<TData, TName extends CollapsiblePaths<TData>>(props: {
+  value: TData
+  copyable?: boolean
+  defaultExpansionDepth?: number
+  collapsePaths?: Array<TName>
+}) {
   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}
+      path=""
+      collapsePaths={props.collapsePaths}
+    />
   )
 }
 
@@ -103,8 +29,24 @@ function JsonValue(props: {
   isRoot?: boolean
   isLastKey?: boolean
   copyable?: boolean
+
+  defaultExpansionDepth: number
+  depth: number
+
+  collapsePaths?: Array<string>
+  path: string
 }) {
-  const { value, keyName, isRoot = false, isLastKey, copyable } = props
+  const {
+    value,
+    keyName,
+    isRoot = false,
+    isLastKey,
+    copyable,
+    defaultExpansionDepth,
+    depth,
+    collapsePaths,
+    path,
+  } = props
   const styles = useStyles()
 
   return (
@@ -137,12 +79,28 @@ 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}
+              collapsePaths={collapsePaths}
+              path={path}
+            />
           )
         }
         if (typeof value === 'object') {
           return (
-            <ObjectValue copyable={copyable} keyName={keyName} value={value} />
+            <ObjectValue
+              defaultExpansionDepth={defaultExpansionDepth}
+              depth={depth}
+              copyable={copyable}
+              keyName={keyName}
+              value={value}
+              collapsePaths={collapsePaths}
+              path={path}
+            />
           )
         }
         return <span />
@@ -161,16 +119,45 @@ const ArrayValue = ({
   value,
   keyName,
   copyable,
+  defaultExpansionDepth,
+  depth,
+  collapsePaths,
+  path,
 }: {
   value: Array<any>
   copyable?: boolean
   keyName?: string
+  defaultExpansionDepth: number
+  depth: number
+  collapsePaths?: Array<string>
+  path: string
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(true)
+
+  const [expanded, setExpanded] = createSignal(
+    depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
+  )
+
+  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) => {
@@ -184,7 +171,9 @@ const ArrayValue = ({
           <span class={styles().tree.info}>{value.length} items</span>
         </span>
       )}
+
       <span class={styles().tree.valueBraces}>[</span>
+
       <Show when={expanded()}>
         <span class={styles().tree.expandedLine(Boolean(keyName))}>
           <For each={value}>
@@ -195,12 +184,17 @@ const ArrayValue = ({
                   copyable={copyable}
                   value={item}
                   isLastKey={isLastKey}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
+                  collapsePaths={collapsePaths}
+                  path={path ? `${path}[${i()}]` : `[${i()}]`}
                 />
               )
             }}
           </For>
         </span>
       </Show>
+
       <Show when={!expanded()}>
         <span
           onClick={(e) => {
@@ -222,19 +216,51 @@ const ObjectValue = ({
   value,
   keyName,
   copyable,
+  defaultExpansionDepth,
+  depth,
+  collapsePaths,
+  path,
 }: {
   value: Record<string, any>
   keyName?: string
   copyable?: boolean
+  defaultExpansionDepth: number
+  depth: number
+  collapsePaths?: Array<string>
+  path: string
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(true)
+
+  const [expanded, setExpanded] = createSignal(
+    depth <= defaultExpansionDepth && !collapsePaths?.includes(path),
+  )
+
   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) => {
@@ -248,7 +274,9 @@ const ObjectValue = ({
           <span class={styles().tree.info}>{keys.length} items</span>
         </span>
       )}
+
       <span class={styles().tree.valueBraces}>{'{'}</span>
+
       <Show when={expanded()}>
         <span class={styles().tree.expandedLine(Boolean(keyName))}>
           <For each={keys}>
@@ -259,12 +287,17 @@ const ObjectValue = ({
                   keyName={k}
                   isLastKey={lastKeyName === k}
                   copyable={copyable}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
+                  collapsePaths={collapsePaths}
+                  path={`${path}${path ? '.' : ''}${k}`}
                 />
               </>
             )}
           </For>
         </span>
       </Show>
+
       <Show when={!expanded()}>
         <span
           onClick={(e) => {
@@ -277,7 +310,100 @@ const ObjectValue = ({
           {`...`}
         </span>
       </Show>
+
       <span class={styles().tree.valueBraces}>{'}'}</span>
     </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>
+  )
+}

package/src/styles/use-styles.ts

@@ -59,6 +59,8 @@ const stylesFactory = (theme: Theme = 'dark') => {
 
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
+  const wrapperSize = 320
+
   return {
     logo: css`
       cursor: pointer;
@@ -78,7 +80,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
 
     selectWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -129,7 +131,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
     `,
     inputWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -152,6 +154,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
     `,
     input: css`
       appearance: none;
+      box-sizing: border-box;
       width: 100%;
       padding: 0.75rem;
       border-radius: 0.5rem;
@@ -393,6 +396,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
       `,
       expander: css`
         position: absolute;
+        cursor: pointer;
         left: -16px;
         top: 3px;
         & path {

package/src/utils/deep-keys.ts

@@ -0,0 +1,18 @@
+type CollapsibleKeys<T, TPrefix extends string = ''> =
+  T extends ReadonlyArray<infer U>
+    ?
+        | (TPrefix extends '' ? '' : TPrefix)
+        | CollapsibleKeys<U, `${TPrefix}[${number}]`>
+    : T extends object
+      ?
+          | (TPrefix extends '' ? '' : TPrefix)
+          | {
+              [K in Extract<keyof T, string>]: CollapsibleKeys<
+                T[K],
+                TPrefix extends '' ? `${K}` : `${TPrefix}.${K}`
+              >
+            }[Extract<keyof T, string>]
+      : never
+
+export type CollapsiblePaths<T> =
+  CollapsibleKeys<T> extends string ? CollapsibleKeys<T> : never