fix: ignore rootName when its false (#57)

Author: himself65

package.json

@@ -88,6 +88,7 @@
     "@types/react-dom": "^18.0.6",
     "@types/web": "^0.0.73",
     "@vitest/coverage-c8": "^0.23.4",
+    "@vitest/ui": "^0.23.4",
     "husky": "^8.0.1",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",

src/components/DataKeyPair.tsx

@@ -188,6 +188,7 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   }), [inspect, path, setInspect, value])
   return (
     <Box className='data-key-pair'
+         data-testid={'data-key-pair' + path.join('.')}
          onMouseEnter={
            useCallback(() => setHover(path, nestedIndex),
              [setHover, path, nestedIndex])
@@ -226,17 +227,19 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
         {
           (isRoot && rootName !== false)
             ? <>&quot;{rootName}&quot;</>
-            : !isRoot && KeyRenderer.when(downstreamProps)
-                ? <KeyRenderer {...downstreamProps} />
-                : nestedIndex === undefined && (
-                  isNumberKey
-                    ? <Box component='span'
-                       style={{ color: numberKeyColor }}>{key}</Box>
-                    : quotesOnKeys ? <>&quot;{key}&quot;</> : <>{key}</>
-                )
+            : isRoot && rootName === false
+              ? <></>
+              : !isRoot && KeyRenderer.when(downstreamProps)
+                  ? <KeyRenderer {...downstreamProps} />
+                  : nestedIndex === undefined && (
+                    isNumberKey
+                      ? <Box component='span'
+                         style={{ color: numberKeyColor }}>{key}</Box>
+                      : quotesOnKeys ? <>&quot;{key}&quot;</> : <>{key}</>
+                  )
         }
         {
-          nestedIndex === undefined && (
+          (nestedIndex === undefined && isRoot && rootName !== false) && (
             <DataBox sx={{ mx: 0.5 }}>:</DataBox>
           )
         }

src/index.tsx

@@ -50,6 +50,7 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
   useSetIfNotUndefinedEffect('keyRenderer', props.keyRenderer)
   useSetIfNotUndefinedEffect('maxDisplayLength', props.maxDisplayLength)
   useSetIfNotUndefinedEffect('enableClipboard', props.enableClipboard)
+  useSetIfNotUndefinedEffect('rootName', props.rootName)
   useEffect(() => {
     if (props.theme === 'light') {
       api.setState({

tests/index.test.tsx

@@ -1,6 +1,6 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
-import { describe, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 import { JsonViewer } from '../src'
 
@@ -146,4 +146,9 @@ describe('render <JsonViewer/> with props', () => {
       render(<JsonViewer value={full} objectSortKeys={objectSortKeys}/>)
     })
   })
+
+  it('render with rootName false', async () => {
+    render(<JsonViewer value={undefined} rootName={false}/>)
+    expect((await screen.findByTestId('data-key-pair')).innerText).toEqual(undefined)
+  })
 })

yarn.lock

@@ -1277,6 +1277,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polka/url@npm:^1.0.0-next.20":
+  version: 1.0.0-next.21
+  resolution: "@polka/url@npm:1.0.0-next.21"
+  checksum: c7654046d38984257dd639eab3dc770d1b0340916097b2fac03ce5d23506ada684e05574a69b255c32ea6a144a957c8cd84264159b545fca031c772289d88788
+  languageName: node
+  linkType: hard
+
 "@popperjs/core@npm:^2.11.6":
   version: 2.11.6
   resolution: "@popperjs/core@npm:2.11.6"
@@ -1719,6 +1726,7 @@ __metadata:
     "@types/react-dom": ^18.0.6
     "@types/web": ^0.0.73
     "@vitest/coverage-c8": ^0.23.4
+    "@vitest/ui": ^0.23.4
     copy-to-clipboard: ^3.3.2
     group-items: ^2.2.0
     husky: ^8.0.1
@@ -2138,6 +2146,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/ui@npm:^0.23.4":
+  version: 0.23.4
+  resolution: "@vitest/ui@npm:0.23.4"
+  dependencies:
+    sirv: ^2.0.2
+  checksum: 52ccb6dda1da49d34e4fb18128cb25a7b02f5e39f1d0865a1dd723a386bb615dd7002ecc883a42ea7fbae1999af297f12c1e3de52804989808c332b4fa6e4bbd
+  languageName: node
+  linkType: hard
+
 "JSONStream@npm:^1.0.4":
   version: 1.3.5
   resolution: "JSONStream@npm:1.3.5"
@@ -5859,6 +5876,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mrmime@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "mrmime@npm:1.0.1"
+  checksum: cc979da44bbbffebaa8eaf7a45117e851f2d4cb46a3ada6ceb78130466a04c15a0de9a9ce1c8b8ba6f6e1b8618866b1352992bf1757d241c0ddca558b9f28a77
+  languageName: node
+  linkType: hard
+
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"
@@ -7095,6 +7119,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sirv@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "sirv@npm:2.0.2"
+  dependencies:
+    "@polka/url": ^1.0.0-next.20
+    mrmime: ^1.0.0
+    totalist: ^3.0.0
+  checksum: 6982f8ecee9392d246d7eeea8144e50334fe1b46a4fa942995a844ea88c2d518b17cce781bb09926c9a5692a7002a207d18dfd67af2aa538a15e733dc2042298
+  languageName: node
+  linkType: hard
+
 "slash@npm:^3.0.0":
   version: 3.0.0
   resolution: "slash@npm:3.0.0"
@@ -7564,6 +7599,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"totalist@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "totalist@npm:3.0.0"
+  checksum: ec499bddfc73d5b6c73f8ff68afd7bed286705797f928a11177fee5d1ee80e9052ffcb434638437702e16864bd5490f437a54f79bfea9564e875d34ed3254bca
+  languageName: node
+  linkType: hard
+
 "tough-cookie@npm:^4.0.0":
   version: 4.1.2
   resolution: "tough-cookie@npm:4.1.2"