feat: support default inspect state with defaultInspectControl

Author: pionxzh

docs/pages/apis.mdx

@@ -17,6 +17,7 @@
 | `enableClipboard`            | `boolean`                                                                                               | `true`    | Whether enable clipboard feature.                                                                                                                                                    |
 | `editable`                   | `boolean` \|<br />`(path, currentValue) => boolean`                                                     | `false`   | Whether enable edit feature. Provide a function to customize this behavior by returning a boolean based on the value and path.                                                       |
 | `defaultInspectDepth`        | `number`                                                                                                | 5         | Default inspect depth for nested objects.<br /><br />_\* If the number is set too large, it could result in performance issues._                                                     |
+| `defaultInspectControl`      | `(path, currentValue) => boolean`                                                                       | -         | Whether expand or collapse a field by default. Using this will override `defaultInspectDepth`.                                                                                       |
 | `maxDisplayLength`           | `number`                                                                                                | 30        | Hide items after reaching the count.<br />`Array` and `Object` will be affected.<br /><br />_\* If the number is set too large, it could result in performance issues._              |
 | `groupArraysAfterLength`     | `number`                                                                                                | 100       | Group arrays after reaching the count.<br />Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets.                                |
 | `collapseStringsAfterLength` | `number`                                                                                                | 50        | Cut off the string after reaching the count. Collapsed strings are followed by an ellipsis.<br /><br />String content can be expanded and collapsed by clicking on the string value. |

src/components/DataTypes/Object.tsx

@@ -203,11 +203,10 @@ const ObjectType: FC<DataItemProps<object>> = (props) => {
       const prevElements = Array.isArray(props.prevValue) ? segmentArray(props.prevValue, groupArraysAfterLength) : undefined
 
       return elements.map((list, index) => {
-        const path = [...props.path]
         return (
           <DataKeyPair
             key={index}
-            path={path}
+            path={props.path}
             value={list}
             nestedIndex={index}
             prevValue={prevElements?.[index]}

src/hooks/useInspect.ts

@@ -8,9 +8,7 @@ import {
   useState
 } from 'react'
 
-import {
-  useJsonViewerStore
-} from '../stores/JsonViewerStore'
+import { useJsonViewerStore } from '../stores/JsonViewerStore'
 import { useIsCycleReference } from './useIsCycleReference'
 
 export function useInspect (path: (string | number)[], value: any, nestedIndex?: number) {
@@ -19,21 +17,28 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?:
   const getInspectCache = useJsonViewerStore(store => store.getInspectCache)
   const setInspectCache = useJsonViewerStore(store => store.setInspectCache)
   const defaultInspectDepth = useJsonViewerStore(store => store.defaultInspectDepth)
+  const defaultInspectControl = useJsonViewerStore(store => store.defaultInspectControl)
   useEffect(() => {
     const inspect = getInspectCache(path, nestedIndex)
     if (inspect !== undefined) {
       return
     }
+
+    // item with nestedIndex should not be inspected
     if (nestedIndex !== undefined) {
       setInspectCache(path, false, nestedIndex)
-    } else {
-      // do not inspect when it is a cycle reference, otherwise there will have a loop
-      const inspect = isTrap
-        ? false
-        : depth < defaultInspectDepth
-      setInspectCache(path, inspect)
+      return
     }
-  }, [defaultInspectDepth, depth, getInspectCache, isTrap, nestedIndex, path, setInspectCache])
+
+    // do not inspect when it is a cycle reference, otherwise there will have a loop
+    const shouldInspect = isTrap
+      ? false
+      : typeof defaultInspectControl === 'function'
+        ? defaultInspectControl(path, value)
+        : depth < defaultInspectDepth
+    setInspectCache(path, shouldInspect)
+  }, [defaultInspectDepth, defaultInspectControl, depth, getInspectCache, isTrap, nestedIndex, path, value, setInspectCache])
+
   const [inspect, set] = useState<boolean>(() => {
     const shouldInspect = getInspectCache(path, nestedIndex)
     if (shouldInspect !== undefined) {
@@ -44,7 +49,9 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?:
     }
     return isTrap
       ? false
-      : depth < defaultInspectDepth
+      : typeof defaultInspectControl === 'function'
+        ? defaultInspectControl(path, value)
+        : depth < defaultInspectDepth
   })
   const setInspect = useCallback<Dispatch<SetStateAction<boolean>>>((apply) => {
     set((oldState) => {

src/index.tsx

@@ -100,6 +100,7 @@ const JsonViewerInner: FC<JsonViewerProps> = (props) => {
 
   const value = useJsonViewerStore(store => store.value)
   const prevValue = useJsonViewerStore(store => store.prevValue)
+  const emptyPath = useMemo(() => [], [])
   const setHover = useJsonViewerStore(store => store.setHover)
   const onMouseLeave = useCallback(() => setHover(null), [setHover])
   return (
@@ -118,7 +119,7 @@ const JsonViewerInner: FC<JsonViewerProps> = (props) => {
       <DataKeyPair
         value={value}
         prevValue={prevValue}
-        path={useMemo(() => [], [])}
+        path={emptyPath}
       />
     </Paper>
   )

src/stores/JsonViewerStore.ts

@@ -26,6 +26,7 @@ export type JsonViewerState<T = unknown> = {
   highlightUpdates: boolean
   maxDisplayLength: number
   defaultInspectDepth: number
+  defaultInspectControl?: (path: Path, value: unknown) => boolean
   collapseStringsAfterLength: number
   objectSortKeys: boolean | ((a: string, b: string) => number)
   quotesOnKeys: boolean
@@ -42,8 +43,7 @@ export type JsonViewerState<T = unknown> = {
   displaySize: boolean | ((path: Path, value: unknown) => boolean)
 
   getInspectCache: (path: Path, nestedIndex?: number) => boolean
-  setInspectCache: (
-    path: Path, action: SetStateAction<boolean>, nestedIndex?: number) => void
+  setInspectCache: (path: Path, action: SetStateAction<boolean>, nestedIndex?: number) => void
   setHover: (path: Path | null, nestedIndex?: number) => void
 }
 
@@ -66,6 +66,7 @@ export const createJsonViewerStore = <T = unknown> (props: JsonViewerProps<T>) =
     keyRenderer: props.keyRenderer ?? DefaultKeyRenderer,
     editable: props.editable ?? false,
     defaultInspectDepth: props.defaultInspectDepth ?? 5,
+    defaultInspectControl: props.defaultInspectControl ?? undefined,
     objectSortKeys: props.objectSortKeys ?? false,
     quotesOnKeys: props.quotesOnKeys ?? true,
     displayDataTypes: props.displayDataTypes ?? true,
@@ -79,15 +80,13 @@ export const createJsonViewerStore = <T = unknown> (props: JsonViewerProps<T>) =
 
     getInspectCache: (path, nestedIndex) => {
       const target = nestedIndex !== undefined
-        ? path.join('.') +
-            `[${nestedIndex}]nt`
+        ? path.join('.') + `[${nestedIndex}]nt`
         : path.join('.')
       return get().inspectCache[target]
     },
     setInspectCache: (path, action, nestedIndex) => {
       const target = nestedIndex !== undefined
-        ? path.join('.') +
-            `[${nestedIndex}]nt`
+        ? path.join('.') + `[${nestedIndex}]nt`
         : path.join('.')
       set(state => ({
         inspectCache: {

src/type.ts

@@ -175,6 +175,12 @@ export type JsonViewerProps<T = unknown> = {
    * @default 5
    */
   defaultInspectDepth?: number
+  /**
+   * Default inspect control for nested objects.
+   *
+   * Provide a function to customize which fields should be expanded by default.
+   */
+  defaultInspectControl?: (path: Path, value: unknown) => boolean
   /**
    * Hide items after reaching the count.
    * `Array` and `Object` will be affected.

tests/index.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { expectTypeOf } from 'expect-type'
 import { describe, expect, it } from 'vitest'
 
+import type { Path } from '../src'
 import { defineDataType, JsonViewer } from '../src'
 
 function aPlusB (a: number, b: number) {
@@ -245,6 +246,34 @@ describe('render <JsonViewer/> with props', () => {
     })
   })
 
+  it('render with defaultInspectControl', async () => {
+    const defaultInspectControl = (path: Path, _data: unknown) => {
+      if (path.length === 0) return true
+      return path.at(-1)?.toString().endsWith('On')
+    }
+    const data = {
+      foo: {
+        bar: 'bar'
+      },
+      fooOn: {
+        barOn: 'barOn'
+      }
+    }
+    const { container } = render(
+      <>
+        <JsonViewer
+          value={data}
+          rootName={false}
+          displaySize={false}
+          displayDataTypes={false}
+          defaultInspectControl={defaultInspectControl}
+        />
+      </>
+    )
+    expect(container.children.length).eq(1)
+    expect(container.children.item(0)!.textContent).eq('{"foo":{…}"fooOn":{"barOn":"barOn"}}')
+  })
+
   it('render with dataTypes', async () => {
     render(<JsonViewer value={undefined} valueTypes={[]} />)
     render(