Some enhancements

README.md

@@ -60,13 +60,14 @@ const Component = () => (
     value={object}
     // just define it
     valueTypes={[
+      {
+        is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
+        Component: (props) => <Image height={50} width={50} src={props.value} alt={props.value}/>,
+      },
+      // or
       createDataType(
-        (value) => typeof value === 'string' &&
-          value.startsWith('https://i.imgur.com'),
-        (props) => {
-          return <Image height={50} width={50} src={props.value}
-                        alt={props.value}/>
-        }
+        (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
+        (props) => <Image height={50} width={50} src={props.value} alt={props.value}/>,
       )
     ]}
   />

src/components/DataKeyPair.tsx

@@ -226,18 +226,20 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
             : null
         }
         {
-          (isRoot && rootName !== false)
-            ? <>&quot;{rootName}&quot;</>
-            : isRoot && rootName === false
-              ? <></>
-              : !isRoot && KeyRenderer.when(downstreamProps)
+          (isRoot
+              ? (
+                  rootName !== false
+                  ? (quotesOnKeys ? <>&quot;{rootName}&quot;</> : <>{rootName}</>)
+                  : null
+              )
+              : KeyRenderer.when(downstreamProps)
                   ? <KeyRenderer {...downstreamProps} />
                   : nestedIndex === undefined && (
                     isNumberKey
-                      ? <Box component='span'
-                         style={{ color: numberKeyColor }}>{key}</Box>
+                      ? <Box component='span' style={{ color: numberKeyColor }}>{key}</Box>
                       : quotesOnKeys ? <>&quot;{key}&quot;</> : <>{key}</>
                   )
+          )
         }
         {
           (

src/components/DataTypes/Object.tsx

@@ -65,7 +65,7 @@ export const PreObjectType: React.FC<DataItemProps<object>> = (props) => {
             <CircularArrowsIcon sx={{
               fontSize: 12,
               color: textColor,
-              mx: sizeOfValue ? 0.5 : 0
+              mx: 0.5,
             }}/>
             {isTrap}
           </>
@@ -123,7 +123,6 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
     if (iterator && !Array.isArray(value)) {
       const elements = []
       if (value instanceof Map) {
-        let _count = 0
         for (const item of value) {
           // fixme: key might be a object, array, or any value for the `Map<any, any>`
           const [k, value] = item
@@ -132,7 +131,6 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
             <DataKeyPair key={key} path={[...props.path, key]} value={value}
                          editable={false}/>
           )
-          _count++
         }
       } else {
         let count = 0

src/hooks/useInspect.ts

@@ -20,29 +20,31 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?:
     store => store.defaultInspectDepth)
   useEffect(() => {
     const inspect = getInspectCache(path, nestedIndex)
-    if (inspect === undefined) {
-      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)
-      }
+    if (inspect !== undefined) {
+      return
+    }
+    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)
     }
   }, [defaultInspectDepth, depth, getInspectCache, isTrap, nestedIndex, path, setInspectCache])
   const [inspect, set] = useState<boolean>(() => {
     const shouldInspect = getInspectCache(path, nestedIndex)
-    if (shouldInspect === undefined) {
-      if (nestedIndex !== undefined) {
-        return false
-      }
-      return isTrap
-        ? false
-        : depth < defaultInspectDepth
+    if (shouldInspect !== undefined) {
+      return shouldInspect
+    }
+    if (nestedIndex !== undefined) {
+      return false
     }
-    return shouldInspect
+    return isTrap
+      ? false
+      : depth < defaultInspectDepth
+
   })
   const setInspect = useCallback<Dispatch<SetStateAction<boolean>>>((apply) => {
     set((oldState) => {

src/stores/typeRegistry.tsx

@@ -52,7 +52,7 @@ export const {
 } = createStore<ReturnType<typeof createTypeRegistryStore>>()
 
 const objectType: DataType<object> = {
-  is: (value): value is object => typeof value === 'object',
+  is: (value) => typeof value === 'object',
   Component: ObjectType,
   PreComponent: PreObjectType,
   PostComponent: PostObjectType
@@ -110,7 +110,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<boolean>(
     {
-      is: (value): value is boolean => typeof value === 'boolean',
+      is: (value) => typeof value === 'boolean',
       ...createEasyType(
         'bool',
         ({ value }) => <>{value ? 'true' : 'false'}</>,
@@ -133,7 +133,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<Date>(
     {
-      is: (value): value is Date => value instanceof Date,
+      is: (value) => value instanceof Date,
       ...createEasyType(
         'date',
         ({ value }) => <>{value.toLocaleTimeString('en-us', displayOptions)}</>,
@@ -146,7 +146,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<null>(
     {
-      is: (value): value is null => value === null,
+      is: (value) => value === null,
       ...createEasyType(
         'null',
         () => {
@@ -171,7 +171,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<undefined>(
     {
-      is: (value): value is undefined => value === undefined,
+      is: (value) => value === undefined,
       ...createEasyType(
         'undefined',
         () => {
@@ -198,7 +198,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<string>(
     {
-      is: (value): value is string => typeof value === 'string',
+      is: (value) => typeof value === 'string',
       ...createEasyType(
         'string',
         (props) => {
@@ -238,7 +238,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<Function>(
     {
-      is: (value): value is Function => typeof value === 'function',
+      is: (value) => typeof value === 'function',
       Component: FunctionType,
       PreComponent: PreFunctionType,
       PostComponent: PostFunctionType
@@ -249,7 +249,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<number>(
     {
-      is: (value): value is number => typeof value === 'number' && isNaN(value),
+      is: (value) => typeof value === 'number' && isNaN(value),
       ...createEasyType(
         'NaN',
         () => {
@@ -276,7 +276,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<number>(
     {
-      is: (value): value is number => typeof value === 'number' &&
+      is: (value) => typeof value === 'number' &&
         !isInt(value),
       ...createEasyType(
         'float',
@@ -291,7 +291,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<number>(
     {
-      is: (value): value is number => typeof value === 'number' && isInt(value),
+      is: (value) => typeof value === 'number' && isInt(value),
       ...createEasyType(
         'int',
         ({ value }) => <>{`${value}`}</>,
@@ -305,7 +305,7 @@ export function predefined (): DataType<any>[] {
 
   registerType<bigint>(
     {
-      is: (value): value is bigint => typeof value === 'bigint',
+      is: (value) => typeof value === 'bigint',
       ...createEasyType(
         'bigint',
         ({ value }) => <>{`${value}n`}</>,

src/type.ts

@@ -25,7 +25,7 @@ export type DataType<ValueType = unknown> = {
   /**
    * Whether the value belongs to the data type
    */
-  is: (value: unknown) => value is ValueType
+  is: (value: unknown) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
   Editor?: React.ComponentType<EditorProps<ValueType>>
   PreComponent?: React.ComponentType<DataItemProps<ValueType>>

src/utils/index.ts

@@ -28,7 +28,7 @@ export function createDataType<ValueType = unknown> (
   is: (value: unknown) => boolean,
   Component: React.ComponentType<DataItemProps<ValueType>>
 ): {
-  is: (value: unknown) => value is ValueType
+  is: (value: unknown) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
 }
 // case 2: you only render with a single component with editor
@@ -37,7 +37,7 @@ export function createDataType<ValueType = unknown> (
   Component: React.ComponentType<DataItemProps<ValueType>>,
   Editor: React.ComponentType<EditorProps<ValueType>>
 ): {
-  is: (value: unknown) => value is ValueType
+  is: (value: unknown) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
   Editor: React.ComponentType<DataItemProps<ValueType>>
 }
@@ -49,7 +49,7 @@ export function createDataType<ValueType = unknown> (
   PreComponent: React.ComponentType<DataItemProps<ValueType>>,
   PostComponent: React.ComponentType<DataItemProps<ValueType>>
 ): {
-  is: (value: unknown) => value is ValueType
+  is: (value: unknown) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
   PreComponent: React.ComponentType<DataItemProps<ValueType>>
   PostComponent: React.ComponentType<DataItemProps<ValueType>>
@@ -62,7 +62,7 @@ export function createDataType<ValueType = unknown> (
   PreComponent: React.ComponentType<DataItemProps<ValueType>>,
   PostComponent: React.ComponentType<DataItemProps<ValueType>>
 ): {
-  is: (value: unknown) => value is ValueType
+  is: (value: unknown) => boolean
   Component: React.ComponentType<DataItemProps<ValueType>>
   Editor: React.ComponentType<DataItemProps<ValueType>>
   PreComponent: React.ComponentType<DataItemProps<ValueType>>

tests/index.test.tsx

@@ -141,7 +141,7 @@ describe('render <JsonViewer/> with multiple instances', () => {
           value={undefined}
           valueTypes={[
             {
-              is: (() => true) as any,
+              is: () => true,
               Component: () => {
                 return <>first viewer</>
               }
@@ -153,7 +153,7 @@ describe('render <JsonViewer/> with multiple instances', () => {
           value={undefined}
           valueTypes={[
             {
-              is: (() => true) as any,
+              is: () => true,
               Component: () => {
                 return <>second viewer</>
               }
@@ -233,7 +233,7 @@ describe('render <JsonViewer/> with props', () => {
     render(<JsonViewer value={undefined} valueTypes={[]}/>)
     render(<JsonViewer value={undefined} valueTypes={[
       {
-        is: (value: unknown): value is string => typeof value === 'string',
+        is: (value) => typeof value === 'string',
         Component: (props) => {
           expectTypeOf(props.value).toMatchTypeOf<unknown>()
           return null