feat: expose defineEasyType for easier customization

Author: pionxzh

src/components/DataTypes/Boolean.tsx

@@ -1,7 +1,7 @@
 
-import { createEasyType } from './createEasyType'
+import { defineEasyType } from './defineEasyType'
 
-export const booleanType = createEasyType<boolean>({
+export const booleanType = defineEasyType<boolean>({
   is: (value) => typeof value === 'boolean',
   type: 'bool',
   colorKey: 'base0E',

src/components/DataTypes/Date.tsx

@@ -1,5 +1,5 @@
 
-import { createEasyType } from './createEasyType'
+import { defineEasyType } from './defineEasyType'
 
 const displayOptions: Intl.DateTimeFormatOptions = {
   weekday: 'short',
@@ -10,7 +10,7 @@ const displayOptions: Intl.DateTimeFormatOptions = {
   minute: '2-digit'
 }
 
-export const dateType = createEasyType<Date>({
+export const dateType = defineEasyType<Date>({
   is: (value) => value instanceof Date,
   type: 'date',
   colorKey: 'base0D',

src/components/DataTypes/Null.tsx

@@ -1,9 +1,9 @@
 import { Box } from '@mui/material'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
-import { createEasyType } from './createEasyType'
+import { defineEasyType } from './defineEasyType'
 
-export const nullType = createEasyType<null>({
+export const nullType = defineEasyType<null>({
   is: (value) => value === null,
   type: 'null',
   colorKey: 'base08',

src/components/DataTypes/Number.tsx

@@ -1,11 +1,11 @@
 import { Box } from '@mui/material'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
-import { createEasyType } from './createEasyType'
+import { defineEasyType } from './defineEasyType'
 
 const isInt = (n: number) => n % 1 === 0
 
-export const nanType = createEasyType<number>({
+export const nanType = defineEasyType<number>({
   is: (value) => typeof value === 'number' && isNaN(value),
   type: 'NaN',
   colorKey: 'base08',
@@ -31,7 +31,7 @@ export const nanType = createEasyType<number>({
   }
 })
 
-export const floatType = createEasyType<number>({
+export const floatType = defineEasyType<number>({
   is: (value) => typeof value === 'number' && !isInt(value) && !isNaN(value),
   type: 'float',
   colorKey: 'base0B',
@@ -40,7 +40,7 @@ export const floatType = createEasyType<number>({
   Renderer: ({ value }) => <>{value}</>
 })
 
-export const intType = createEasyType<number>({
+export const intType = defineEasyType<number>({
   is: (value) => typeof value === 'number' && isInt(value),
   type: 'int',
   colorKey: 'base0F',
@@ -50,7 +50,7 @@ export const intType = createEasyType<number>({
   Renderer: ({ value }) => <>{value}</>
 })
 
-export const bigIntType = createEasyType<bigint>({
+export const bigIntType = defineEasyType<bigint>({
   is: (value) => typeof value === 'bigint',
   type: 'bigint',
   colorKey: 'base0F',

src/components/DataTypes/String.tsx

@@ -2,9 +2,9 @@ import { Box } from '@mui/material'
 import { useState } from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
-import { createEasyType } from './createEasyType'
+import { defineEasyType } from './defineEasyType'
 
-export const stringType = createEasyType<string>({
+export const stringType = defineEasyType<string>({
   is: (value) => typeof value === 'string',
   type: 'string',
   colorKey: 'base09',

src/components/DataTypes/Undefined.tsx

@@ -1,9 +1,9 @@
 import { Box } from '@mui/material'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
-import { createEasyType } from './createEasyType'
+import { defineEasyType } from './defineEasyType'
 
-export const undefinedType = createEasyType<undefined>({
+export const undefinedType = defineEasyType<undefined>({
   is: (value) => value === undefined,
   type: 'undefined',
   colorKey: 'base05',

src/components/DataTypes/createEasyType.tsx renamed to src/components/DataTypes/defineEasyType.tsx

@@ -8,13 +8,24 @@ import type { DataItemProps, DataType, EditorProps } from '../../type'
 import { DataTypeLabel } from '../DataTypeLabel'
 import { DataBox } from '../mui/DataBox'
 
-type EasyTypeConfig<Value> = Pick<DataType<Value>, 'is' | 'serialize' | 'deserialize'> & {
+export type EasyTypeConfig<Value> = Pick<DataType<Value>, 'is' | 'serialize' | 'deserialize'> & {
   type: string
   colorKey: keyof Colorspace
   displayTypeLabel?: boolean
-  Renderer: ComponentType<Pick<DataItemProps<Value>, 'value'>>
+  Renderer: ComponentType<DataItemProps<Value>>
 }
-export function createEasyType<Value> ({
+/**
+ * Enhanced version of `defineDataType` that creates a `DataType` with editor and a optional type label.
+ * It will take care of the color and all the necessary props.
+ *
+ * *All of the built-in data types are defined with this function.*
+ *
+ * @param config.type The type name.
+ * @param config.colorKey The color key in the colorspace. ('base00' - 'base0F')
+ * @param config.displayTypeLabel Whether to display the type label.
+ * @param config.Renderer The component to render the value.
+ */
+export function defineEasyType<Value> ({
   is,
   serialize,
   deserialize,
@@ -33,7 +44,13 @@ export function createEasyType<Value> ({
       <DataBox onClick={() => onSelect?.(props.path, props.value)} sx={{ color }}>
         {(displayTypeLabel && storeDisplayDataTypes) && <DataTypeLabel dataType={type} />}
         <DataBox className={`${type}-value`}>
-          <Render value={props.value} />
+          <Render
+            path={props.path}
+            inspect={props.inspect}
+            setInspect={props.setInspect}
+            value={props.value}
+            prevValue={props.prevValue}
+          />
         </DataBox>
       </DataBox>
     )

src/components/DataTypes/index.ts

@@ -1,5 +1,6 @@
 export { booleanType } from './Boolean'
 export { dateType } from './Date'
+export { defineEasyType, type EasyTypeConfig } from './defineEasyType'
 export { functionType } from './Function'
 export { nullType } from './Null'
 export { bigIntType, floatType, intType, nanType } from './Number'

src/utils/index.ts

@@ -142,6 +142,9 @@ export function createDataType<ValueType = unknown> (
   }
 }
 
+/**
+ * Define custom data types for any data structure
+ */
 export function defineDataType<ValueType = unknown> ({
   is,
   serialize,