feat: support plugin system

Fixes: #9

Author: himself65

examples/basic/pages/index.tsx

@@ -2,6 +2,7 @@ import { TextField } from '@mui/material'
 import {
   applyValue,
   JsonViewer,
+  JsonViewerKeyRenderer,
   JsonViewerOnChange
 } from '@textea/json-viewer'
 import type React from 'react'
@@ -47,6 +48,11 @@ const example = {
   date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)')
 }
 
+const KeyRenderer: JsonViewerKeyRenderer = ({ path }) => {
+  return <del aria-label='I dont like this number'>&quot;{path.slice(-1)}&quot;</del>
+}
+KeyRenderer.when = (props) => props.value === 114.514
+
 const IndexPage: React.FC = () => {
   const [indent, setIndent] = useState(2)
   const [groupArraysAfterLength, setGroupArraysAfterLength] = useState(100)
@@ -93,6 +99,7 @@ const IndexPage: React.FC = () => {
         value={src}
         indentWidth={indent}
         groupArraysAfterLength={groupArraysAfterLength}
+        keyRenderer={KeyRenderer}
         onChange={
           useCallback<JsonViewerOnChange>(
             (path, oldValue, newValue) => {

src/components/DataKeyPair.tsx

@@ -129,7 +129,7 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   }, [Editor, editing, onChange, path, tempValue, value])
 
   const expandable = PreComponent && PostComponent
-
+  const KeyRenderer = useJsonViewerStore(store => store.keyRenderer)
   return (
     <Box className='data-key-pair'
          onMouseEnter={
@@ -155,12 +155,14 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
         }
       >
         {
-          !props.nested && (
-            isNumberKey
-              ? <Box component='span'
-                   style={{ color: numberKeyColor }}>{displayKey}</Box>
-              : <>&quot;{displayKey}&quot;</>
-          )
+          KeyRenderer.when(downstreamProps)
+            ? <KeyRenderer {...downstreamProps}/>
+            : !props.nested && (
+                isNumberKey
+                  ? <Box component='span'
+                     style={{ color: numberKeyColor }}>{displayKey}</Box>
+                  : <>&quot;{displayKey}&quot;</>
+              )
         }
         {
           !props.nested && (
@@ -176,7 +178,7 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
           : (Component)
               ? <Component {...downstreamProps}/>
               : <Box component='span'
-                 className='data-value-fallback'>{`fallback: ${value}`}</Box>
+                   className='data-value-fallback'>{`fallback: ${value}`}</Box>
       }
       {PostComponent && <PostComponent {...downstreamProps}/>}
       {(isHover && expandable && !inspect) && actionIcons}

src/index.tsx

@@ -4,20 +4,28 @@ import {
   ThemeProvider
 } from '@mui/material'
 import type React from 'react'
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { DataKeyPair } from './components/DataKeyPair'
+import {
+  ObjectType,
+  PostObjectType,
+  PreObjectType
+} from './components/DataTypes/Object'
 import {
   createJsonViewerStore,
-  JsonViewerProvider, JsonViewerState, useJsonViewerStore,
+  JsonViewerProvider,
+  JsonViewerState,
+  useJsonViewerStore,
   useJsonViewerStoreApi
 } from './stores/JsonViewerStore'
+import { registerType } from './stores/typeRegistry'
 import type { JsonViewerProps } from './type'
 import { applyValue } from './utils'
 
 export { applyValue }
 
-export type JsonViewerOnChange = <U = unknown>(path: (string | number)[], oldValue: U, newValue: U) => void
+export type JsonViewerOnChange = <U = unknown>(path: (string | number)[], oldValue: U, newValue: U /*, type: ChangeType */) => void
 
 const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
   const api = useJsonViewerStoreApi()
@@ -36,7 +44,8 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
     setIfNotUndefined('defaultInspectDepth', props.defaultInspectDepth)
     setIfNotUndefined('onChange', props.onChange)
     setIfNotUndefined('groupArraysAfterLength', props.groupArraysAfterLength)
-  }, [api, props.defaultInspectDepth, props.groupArraysAfterLength, props.onChange, props.value, setIfNotUndefined])
+    setIfNotUndefined('keyRenderer', props.keyRenderer)
+  }, [api, props.defaultInspectDepth, props.groupArraysAfterLength, props.keyRenderer, props.onChange, props.value, setIfNotUndefined])
 
   const value = useJsonViewerStore(store => store.value)
   const setHover = useJsonViewerStore(store => store.setHover)
@@ -66,6 +75,23 @@ export const JsonViewer: React.FC<JsonViewerProps> = (props) => {
   const theme = useMemo(() => createTheme({
     // todo: inject theme based on base16
   }), [])
+  const onceRef = useRef(true)
+  // DO NOT try to dynamic add value types, that is costly. Trust me.
+  if (onceRef.current) {
+    props.valueTypes?.forEach(type => {
+      registerType(type)
+    })
+    // Always last one, fallback for all data like 'object'
+    registerType<object>(
+      {
+        is: (value): value is object => typeof value === 'object',
+        Component: ObjectType,
+        PreComponent: PreObjectType,
+        PostComponent: PostObjectType
+      }
+    )
+    onceRef.current = false
+  }
   return (
     <ThemeProvider theme={theme}>
       <JsonViewerProvider createStore={createJsonViewerStore}>
@@ -74,3 +100,5 @@ export const JsonViewer: React.FC<JsonViewerProps> = (props) => {
     </ThemeProvider>
   )
 }
+
+export * from './type'

src/stores/JsonViewerStore.ts

@@ -4,6 +4,7 @@ import createContext from 'zustand/context'
 import { combine } from 'zustand/middleware'
 
 import type { JsonViewerOnChange } from '..'
+import type { JsonViewerKeyRenderer } from '../type'
 
 export type ColorNamespace = {
   base00: string
@@ -62,6 +63,9 @@ export const darkNamespace: ColorNamespace = {
   base0F: 'rgba(1, 1, 1, 0.8)'
 }
 
+const DefaultKeyRenderer: JsonViewerKeyRenderer = () => null
+DefaultKeyRenderer.when = () => false
+
 export type JsonViewerState = {
   inspectCache: Record<string, boolean>
   hoverPath: (string | number)[] | null
@@ -72,6 +76,7 @@ export type JsonViewerState = {
   rootName: string
   value: unknown
   onChange: JsonViewerOnChange
+  keyRenderer: JsonViewerKeyRenderer
 }
 
 export type JsonViewerActions = {
@@ -92,7 +97,8 @@ export const createJsonViewerStore = () =>
         colorNamespace: defaultColorNamespace,
         expanded: ['data-viewer-root'],
         value: {},
-        onChange: () => {}
+        onChange: () => {},
+        keyRenderer: DefaultKeyRenderer
       },
       (set, get) => ({
         getInspectCache: (path) => {

src/stores/typeRegistry.tsx

@@ -7,11 +7,6 @@ import {
   FunctionType, PostFunctionType,
   PreFunctionType
 } from '../components/DataTypes/Function'
-import {
-  ObjectType,
-  PostObjectType,
-  PreObjectType
-} from '../components/DataTypes/Object'
 import type { DataType } from '../type'
 import { useJsonViewerStore } from './JsonViewerStore'
 
@@ -199,13 +194,3 @@ registerType<number>(
     )
   }
 )
-
-// fallback for all data like 'object'
-registerType<object>(
-  {
-    is: (value): value is object => typeof value === 'object',
-    Component: ObjectType,
-    PreComponent: PreObjectType,
-    PostComponent: PostObjectType
-  }
-)

src/type.ts

@@ -1,11 +1,13 @@
 import type { Dispatch, SetStateAction } from 'react'
 import type React from 'react'
 
+type Path = (string | number)[]
+
 export interface DataItemProps<ValueType = unknown> {
   inspect: boolean
   setInspect: Dispatch<SetStateAction<boolean>>
   value: ValueType
-  path: (string | number)[]
+  path: Path
 }
 
 export type EditorProps<ValueType = unknown> = {
@@ -21,6 +23,10 @@ export type DataType<ValueType = unknown> = {
   PostComponent?: React.ComponentType<DataItemProps<ValueType>>
 }
 
+export interface JsonViewerKeyRenderer extends React.FC<DataItemProps> {
+  when(props: DataItemProps): boolean
+}
+
 export type JsonViewerProps<T = unknown> = {
   /**
    * any value
@@ -30,13 +36,18 @@ export type JsonViewerProps<T = unknown> = {
    * indent width for nested objects
    */
   indentWidth?: number
+  /**
+   * Customize a key, if `keyRenderer.when` returns `true`.
+   */
+  keyRenderer?: JsonViewerKeyRenderer
+  valueTypes?: DataType<any>[]
   /**
    *
    * @param path path to the target value
    * @param oldValue
    * @param newValue
    */
-  onChange?: <U>(path: (string | number)[], oldValue: U, newValue: U) => void
+  onChange?: <U>(path: Path, oldValue: U, newValue: U) => void
   /**
    * Inspect depth by default.
    * Do not set the number too large, otherwise there will have performance issue