refactor: use group-items (#44)

package.json

@@ -60,6 +60,7 @@
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.6",
     "copy-to-clipboard": "^3.3.2",
+    "group-items": "^2.2.0",
     "zustand": "^4.1.1"
   },
   "lint-staged": {

src/components/DataTypes/Object.tsx

@@ -1,4 +1,5 @@
 import { Box } from '@mui/material'
+import { group } from 'group-items'
 import React, { useMemo, useState } from 'react'
 
 import { useTextColor } from '../../hooks/useColor'
@@ -171,15 +172,10 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
         }
         return elements
       }
-      const elements = value.reduce<unknown[][]>((array, value, index) => {
-        const target = Math.floor(index / groupArraysAfterLength)
-        if (array[target]) {
-          array[target].push(value)
-        } else {
-          array[target] = [value]
-        }
-        return array
-      }, [])
+
+      const elements: unknown[][] = group<unknown>(value)
+        .by((_, index) => Math.floor(index / groupArraysAfterLength))
+        .asArrays()
 
       return elements.map((list, index) => {
         const path = [...props.path]

tests/index.test.tsx

@@ -36,6 +36,7 @@ describe('render <JsonViewer/>', () => {
 
   it('render array', () => {
     render(<JsonViewer value={[1, '2', 3.0, Infinity]}/>)
+    render(<JsonViewer value={new Array(1e5).fill(1)}/>)
   })
 
   it('render Set', () => {

yarn.lock

@@ -1707,6 +1707,7 @@ __metadata:
     "@types/web": ^0.0.73
     "@vitest/coverage-c8": ^0.23.4
     copy-to-clipboard: ^3.3.2
+    group-items: ^2.2.0
     husky: ^8.0.1
     jsdom: ^20.0.0
     lint-staged: ^13.0.3
@@ -3057,6 +3058,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-eql@npm:^4.0.0":
+  version: 4.1.1
+  resolution: "deep-eql@npm:4.1.1"
+  dependencies:
+    type-detect: ^4.0.0
+  checksum: e14ec4065a38d89e48dee9c79c43c45c48bb0932e2be01898874517892ea15e20619d9c570019d6086ed74ea5557cc03ba4fab11878d20922d548221979b8d94
+  languageName: node
+  linkType: hard
+
 "deep-is@npm:^0.1.3, deep-is@npm:~0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -4526,6 +4536,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"group-items@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "group-items@npm:2.2.0"
+  dependencies:
+    deep-eql: ^4.0.0
+  checksum: 920d4b231712205cf169631053414b3e870c481f7042d14d79f601f21d29dc720686f8a3f1e65bc019ffaf9dd9c4e83f4a5520cdcb009eb29bb980052874d8db
+  languageName: node
+  linkType: hard
+
 "gtoken@npm:^6.1.0":
   version: 6.1.2
   resolution: "gtoken@npm:6.1.2"