feat: add helper function createDataType

README.md

@@ -44,7 +44,7 @@ const Component = () => (<JsonViewer value={object}/>)
 ### Customizable data type
 
 ```tsx
-import JsonViewer from '@textea/json-viewer'
+import { JsonViewer, createDataType } from '@textea/json-viewer'
 
 const object = {
   // what if I want to inspect a image?
@@ -56,14 +56,14 @@ const Component = () => (
     value={object}
     // just define it
     valueTypes={[
-      {
-        is: (value) =>
-          typeof value === 'string' &&
+      createDataType(
+        (value) => typeof value === 'string' &&
           value.startsWith('https://i.imgur.com'),
-        Component: (props) => {
-          return <img height="50px" src={props.value} alt={props.value}/>;
-        },
-      },
+        (props) => {
+          return <Image height={50} width={50} src={props.value}
+                        alt={props.value}/>
+        }
+      )
     ]}
   />
 )
@@ -128,10 +128,10 @@ const Component = () => (
 
 - [X] 100% TypeScript
 - [X] Customizable
-  - [X] `keyRenderer` for customize key renderer
-  - [X] `valueTypes` for customize any value types you want
-  - [X] `light | dark | base16` Theme support
-  - [ ] custom metadata
+    - [X] `keyRenderer` for customize key renderer
+    - [X] `valueTypes` for customize any value types you want
+    - [X] `light | dark | base16` Theme support
+    - [ ] custom metadata
 - [X] Support `Next.js` SSR
 - [X] `onChange` props allow users to edit value
 - [X] Inspect `object`, `Array`, primitive type, even `Map` and `Set` by default.

examples/basic/pages/index.tsx

@@ -8,6 +8,7 @@ import {
 } from '@mui/material'
 import {
   applyValue,
+  createDataType,
   JsonViewer,
   JsonViewerKeyRenderer,
   JsonViewerOnChange,
@@ -179,14 +180,14 @@ const IndexPage: React.FC = () => {
         groupArraysAfterLength={groupArraysAfterLength}
         keyRenderer={KeyRenderer}
         valueTypes={[
-          {
-            is: (value): value is string => typeof value === 'string' &&
+          createDataType(
+            (value) => typeof value === 'string' &&
               value.startsWith('https://i.imgur.com'),
-            Component: (props) => {
+            (props) => {
               return <Image height={50} width={50} src={props.value}
                             alt={props.value}/>
             }
-          }
+          )
         ]}
         onChange={
           useCallback<JsonViewerOnChange>(

package.json

@@ -89,6 +89,7 @@
     "@types/web": "^0.0.73",
     "@vitest/coverage-c8": "^0.23.4",
     "@vitest/ui": "^0.23.4",
+    "expect-type": "^0.14.2",
     "husky": "^8.0.1",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",

src/index.tsx

@@ -16,9 +16,9 @@ import {
 import { registerType } from './stores/typeRegistry'
 import { darkColorspace, lightColorspace } from './theme/base16'
 import type { JsonViewerProps } from './type'
-import { applyValue } from './utils'
+import { applyValue, createDataType, isCycleReference } from './utils'
 
-export { applyValue }
+export { applyValue, createDataType, isCycleReference }
 
 /**
  * @internal

src/type.ts

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

src/utils/index.ts

@@ -1,3 +1,7 @@
+import type React from 'react'
+
+import type { DataItemProps, EditorProps } from '../type'
+
 export const applyValue = (obj: any, path: (string | number)[], value: any) => {
   if (typeof obj !== 'object' || obj === null) {
     return value
@@ -16,7 +20,70 @@ export const applyValue = (obj: any, path: (string | number)[], value: any) => {
   return obj
 }
 
-export const isCycleReference = (root: any, path: (string | number)[], value: unknown): false | string => {
+// case 1: you only render with a single component
+export function createDataType<ValueType = unknown> (
+  is: (value: unknown) => boolean,
+  Component: React.ComponentType<DataItemProps<ValueType>>
+): {
+  is: (value: unknown) => value is ValueType
+  Component: React.ComponentType<DataItemProps<ValueType>>
+}
+// case 2: you only render with a single component with editor
+export function createDataType<ValueType = unknown> (
+  is: (value: unknown) => boolean,
+  Component: React.ComponentType<DataItemProps<ValueType>>,
+  Editor: React.ComponentType<EditorProps<ValueType>>
+): {
+  is: (value: unknown) => value is ValueType
+  Component: React.ComponentType<DataItemProps<ValueType>>
+  Editor: React.ComponentType<DataItemProps<ValueType>>
+}
+// case 3: you only render with a component with pre and post.
+export function createDataType<ValueType = unknown> (
+  is: (value: unknown) => boolean,
+  Component: React.ComponentType<DataItemProps<ValueType>>,
+  Editor: undefined,
+  PreComponent: React.ComponentType<DataItemProps<ValueType>>,
+  PostComponent: React.ComponentType<DataItemProps<ValueType>>
+): {
+  is: (value: unknown) => value is ValueType
+  Component: React.ComponentType<DataItemProps<ValueType>>
+  PreComponent: React.ComponentType<DataItemProps<ValueType>>
+  PostComponent: React.ComponentType<DataItemProps<ValueType>>
+}
+// case 4: need all of these
+export function createDataType<ValueType = unknown> (
+  is: (value: unknown) => boolean,
+  Component: React.ComponentType<DataItemProps<ValueType>>,
+  Editor: React.ComponentType<EditorProps<ValueType>>,
+  PreComponent: React.ComponentType<DataItemProps<ValueType>>,
+  PostComponent: React.ComponentType<DataItemProps<ValueType>>
+): {
+  is: (value: unknown) => value is ValueType
+  Component: React.ComponentType<DataItemProps<ValueType>>
+  Editor: React.ComponentType<DataItemProps<ValueType>>
+  PreComponent: React.ComponentType<DataItemProps<ValueType>>
+  PostComponent: React.ComponentType<DataItemProps<ValueType>>
+}
+
+export function createDataType<ValueType = unknown> (
+  is: (value: unknown) => boolean,
+  Component: React.ComponentType<DataItemProps<ValueType>>,
+  Editor?: React.ComponentType<EditorProps<ValueType>> | undefined,
+  PreComponent?: React.ComponentType<DataItemProps<ValueType>> | undefined,
+  PostComponent?: React.ComponentType<DataItemProps<ValueType>> | undefined
+): any {
+  return {
+    is,
+    Component,
+    Editor,
+    PreComponent,
+    PostComponent
+  }
+}
+
+export const isCycleReference = (
+  root: any, path: (string | number)[], value: unknown): false | string => {
   if (root === null || value === null) {
     return false
   }

tests/index.test.tsx

@@ -1,8 +1,9 @@
 import { render, screen } from '@testing-library/react'
+import { expectTypeOf } from 'expect-type'
 import React from 'react'
 import { describe, expect, it } from 'vitest'
 
-import { JsonViewer } from '../src'
+import { createDataType, JsonViewer } from '../src'
 
 function aPlusB (a: number, b: number) {
   return a + b
@@ -141,14 +142,38 @@ describe('render <JsonViewer/> with props', () => {
   })
 
   it('render with objectSortKeys', () => {
-    const selection = [true, false, (a: string, b: string) => a.localeCompare(b)]
+    const selection = [
+      true,
+      false,
+      (a: string, b: string) => a.localeCompare(b)]
     selection.forEach(objectSortKeys => {
       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)
+    expect((await screen.findByTestId('data-key-pair')).innerText)
+      .toEqual(undefined)
+  })
+
+  it('render with dataTypes', async () => {
+    render(<JsonViewer value={undefined} valueTypes={[]}/>)
+    render(<JsonViewer value={undefined} valueTypes={[
+      {
+        is: (value: unknown): value is string => typeof value === 'string',
+        Component: (props) => {
+          expectTypeOf(props.value).toMatchTypeOf<unknown>()
+          return null
+        }
+      },
+      createDataType<string>(
+        (value) => typeof value === 'string',
+        (props) => {
+          expectTypeOf(props.value).toMatchTypeOf<string>()
+          return null
+        }
+      )
+    ]}/>)
   })
 })

tests/util.test.tsx

@@ -0,0 +1,130 @@
+import { expectTypeOf } from 'expect-type'
+import type React from 'react'
+import { describe, expect, test } from 'vitest'
+
+import type { DataItemProps } from '../src'
+import { createDataType } from '../src/utils'
+
+describe('function createDataType', () => {
+  test('case 1', () => {
+    const dataType = createDataType<string>(
+      (value) => {
+        expectTypeOf(value).toBeUnknown()
+        return true
+      },
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      }
+    )
+    expectTypeOf(dataType).toEqualTypeOf<{
+      is:(value: unknown) => value is string
+      Component: React.ComponentType<DataItemProps<string>>
+    }>()
+    const someValue: unknown = null
+    expectTypeOf(dataType.is).returns.toBeBoolean()
+    if (dataType.is(someValue)) {
+      expectTypeOf(someValue).toMatchTypeOf<string>()
+    } else {
+      expectTypeOf(someValue).not.toMatchTypeOf<string>()
+      expectTypeOf(someValue).toMatchTypeOf<unknown>()
+    }
+    expect(dataType.is).toBeTypeOf('function')
+    expect(dataType.Component).toBeTypeOf('function')
+  })
+  test('case 2', () => {
+    const dataType = createDataType<string>(
+      (value) => {
+        expectTypeOf(value).toBeUnknown()
+        return true
+      },
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      },
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      }
+    )
+    expectTypeOf(dataType).toEqualTypeOf<{
+      is:(value: unknown) => value is string
+      Component: React.ComponentType<DataItemProps<string>>
+      Editor: React.ComponentType<DataItemProps<string>>
+    }>()
+    expectTypeOf(dataType.is).returns.toBeBoolean()
+    expect(dataType.is).toBeTypeOf('function')
+    expect(dataType.Component).toBeTypeOf('function')
+    expect(dataType.Editor).toBeTypeOf('function')
+  })
+  test('case 3', () => {
+    const dataType = createDataType<string>(
+      (value) => {
+        expectTypeOf(value).toBeUnknown()
+        return true
+      },
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      },
+      undefined,
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      },
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      }
+    )
+    expectTypeOf(dataType).toEqualTypeOf<{
+      is:(value: unknown) => value is string
+      Component: React.ComponentType<DataItemProps<string>>
+      PreComponent: React.ComponentType<DataItemProps<string>>
+      PostComponent: React.ComponentType<DataItemProps<string>>
+    }>()
+    expectTypeOf(dataType.is).returns.toBeBoolean()
+    expect(dataType.is).toBeTypeOf('function')
+    expect(dataType.Component).toBeTypeOf('function')
+    expect(dataType.PreComponent).toBeTypeOf('function')
+    expect(dataType.PostComponent).toBeTypeOf('function')
+  })
+
+  test('case 4', () => {
+    const dataType = createDataType<string>(
+      (value) => {
+        expectTypeOf(value).toBeUnknown()
+        return true
+      },
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      },
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      },
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      },
+      (props) => {
+        expectTypeOf(props.value).toBeString()
+        return null
+      }
+    )
+    expectTypeOf(dataType).toEqualTypeOf<{
+      is:(value: unknown) => value is string
+      Component: React.ComponentType<DataItemProps<string>>
+      Editor: React.ComponentType<DataItemProps<string>>
+      PreComponent: React.ComponentType<DataItemProps<string>>
+      PostComponent: React.ComponentType<DataItemProps<string>>
+    }>()
+    expectTypeOf(dataType.is).returns.toBeBoolean()
+    expect(dataType.is).toBeTypeOf('function')
+    expect(dataType.Component).toBeTypeOf('function')
+    expect(dataType.Editor).toBeTypeOf('function')
+    expect(dataType.PreComponent).toBeTypeOf('function')
+    expect(dataType.PostComponent).toBeTypeOf('function')
+  })
+})

yarn.lock

@@ -1728,6 +1728,7 @@ __metadata:
     "@vitest/coverage-c8": ^0.23.4
     "@vitest/ui": ^0.23.4
     copy-to-clipboard: ^3.3.2
+    expect-type: ^0.14.2
     group-items: ^2.2.0
     husky: ^8.0.1
     jsdom: ^20.0.0
@@ -4064,6 +4065,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expect-type@npm:^0.14.2":
+  version: 0.14.2
+  resolution: "expect-type@npm:0.14.2"
+  checksum: b8dba1f67d6562d203359d5f5e7ee9c2066c091a7bf3c8744858cbe801fb6becab760961fa206ad5bfd2c532b2a01f835f8f1a4f86f2ad8e6881c0930b48aca5
+  languageName: node
+  linkType: hard
+
 "extend@npm:^3.0.2":
   version: 3.0.2
   resolution: "extend@npm:3.0.2"