feat: support TypedArray

examples/basic/pages/index.tsx

@@ -46,7 +46,10 @@ const set = new Set([1, 2, 3])
 
 const superLongString = '1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
 
+const arrayBuffer = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8])
+
 const example = {
+  arrayBuffer,
   loopObject,
   loopArray,
   longArray,

src/components/DataTypes/TypedArray.tsx

@@ -0,0 +1,45 @@
+import { Box } from '@mui/material'
+import type React from 'react'
+import { memo, useMemo } from 'react'
+
+import { useTextColor } from '../../hooks/useColor'
+import { useJsonViewerStore } from '../../stores/JsonViewerStore'
+import type { DataItemProps } from '../../type'
+
+const piece = 0x00000004 as const
+
+export type TypedArray = Int8Array | Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Uint8ClampedArray | Float32Array | Float64Array
+export const TypedArrayType: React.FC<DataItemProps<TypedArray>> = memo(
+  (props) => {
+    const keyColor = useTextColor()
+    const borderColor = useJsonViewerStore(store => store.colorspace.base02)
+    const marginLeft = props.inspect ? 0.6 : 0
+    const width = useJsonViewerStore(store => store.indentWidth)
+    const indentWidth = props.inspect ? width - marginLeft : width
+
+    useMemo(() => {
+      const start = 0x00000000
+      const value = props.value
+      const byteLength = value.byteLength
+      const length = value.length
+      const itemLength = value.byteLength / value.length
+      for (let i = 0; i < length; ++i) {
+        const itemValue = value[i]
+        console.log(itemValue)
+      }
+    }, [props.value])
+    return (
+    <Box
+      className='data-typed-array'
+      sx={{
+        display: props.inspect ? 'block' : 'inline-block',
+        pl: props.inspect ? indentWidth - 0.6 : 0,
+        marginLeft,
+        color: keyColor,
+        borderLeft: props.inspect ? `1px solid ${borderColor}` : 'none'
+      }}
+    >
+    </Box>
+    )
+  }
+)

src/stores/typeRegistry.tsx

@@ -13,6 +13,7 @@ import {
   PostObjectType,
   PreObjectType
 } from '../components/DataTypes/Object'
+import { TypedArray, TypedArrayType } from '../components/DataTypes/TypedArray'
 import type { DataType } from '../type'
 import { useJsonViewerStore } from './JsonViewerStore'
 
@@ -149,7 +150,10 @@ registerType<string>(
         const [showRest, setShowRest] = useState(false)
         const collapseStringsAfterLength = useJsonViewerStore(
           store => store.collapseStringsAfterLength)
-        const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength)
+        const value = showRest
+          ? props.value
+          : props.value.slice(0,
+            collapseStringsAfterLength)
         const hasRest = props.value.length > collapseStringsAfterLength
         return (
           <Box
@@ -256,3 +260,10 @@ registerType<bigint>(
     )
   }
 )
+
+registerType<TypedArray>(
+  {
+    is: (value): value is TypedArray => ArrayBuffer.isView(value),
+    Component: TypedArrayType
+  }
+)