refactor: remove dep group-items (#193)

* refactor: remove dep `group-items`

* fix: add test

Author: pionxzh

package.json

@@ -63,7 +63,6 @@
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.11.4",
     "copy-to-clipboard": "^3.3.3",
-    "group-items": "^2.2.0",
     "zustand": "^4.1.5"
   },
   "lint-staged": {

rollup.config.ts

@@ -32,7 +32,6 @@ const external = [
   'zustand',
   'zustand/context',
   'zustand/middleware',
-  'group-items',
   'react',
   'react/jsx-runtime',
   'react-dom',

src/components/DataTypes/Object.tsx

@@ -1,12 +1,11 @@
 import { Box } from '@mui/material'
-import { group } from 'group-items'
 import React, { useMemo, useState } from 'react'
 
 import { useTextColor } from '../../hooks/useColor'
 import { useIsCycleReference } from '../../hooks/useIsCycleReference'
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
 import type { DataItemProps } from '../../type'
-import { getValueSize } from '../../utils'
+import { getValueSize, segmentArray } from '../../utils'
 import { DataKeyPair } from '../DataKeyPair'
 import { CircularArrowsIcon } from '../Icons'
 import { DataBox } from '../mui/DataBox'
@@ -176,9 +175,7 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
         return elements
       }
 
-      const elements: unknown[][] = group<unknown>(value)
-        .by((_, index) => Math.floor(index / groupArraysAfterLength))
-        .asArrays()
+      const elements: unknown[][] = segmentArray(value, groupArraysAfterLength)
 
       return elements.map((list, index) => {
         const path = [...props.path]

src/utils/index.ts

@@ -140,3 +140,13 @@ export function getValueSize (value: any): number {
   }
   return 1
 }
+
+export function segmentArray<T> (arr: T[], size: number): T[][] {
+  const result: T[][] = []
+  let index = 0
+  while (index < arr.length) {
+    result.push(arr.slice(index, index + size))
+    index += size
+  }
+  return result
+}

tests/util.test.tsx

@@ -4,6 +4,7 @@ import { describe, expect, test } from 'vitest'
 
 import type { DataItemProps } from '../src'
 import { applyValue, createDataType, isCycleReference } from '../src'
+import { segmentArray } from '../src/utils'
 
 describe('function applyValue', () => {
   const patches: any[] = [{}, undefined, 1, '2', 3n, 0.4]
@@ -204,3 +205,40 @@ describe('function createDataType', () => {
     expect(dataType.PostComponent).toBeTypeOf('function')
   })
 })
+
+describe('function segmentArray', () => {
+  test('case 1', () => {
+    const array = [1, 2, 3, 4, 5]
+    const result = segmentArray(array, 2)
+    expect(result).to.deep.eq([
+      [1, 2],
+      [3, 4],
+      [5]
+    ])
+  })
+
+  test('case 2', () => {
+    const array = [1, 2, 3, 4, 5]
+    const result = segmentArray(array, 3)
+    expect(result).to.deep.eq([
+      [1, 2, 3],
+      [4, 5]
+    ])
+  })
+
+  test('case 3', () => {
+    const array = [1, 2, 3, 4, 5]
+    const result = segmentArray(array, 5)
+    expect(result).to.deep.eq([
+      [1, 2, 3, 4, 5]
+    ])
+  })
+
+  test('case 4', () => {
+    const array = [1, 2, 3, 4, 5]
+    const result = segmentArray(array, 6)
+    expect(result).to.deep.eq([
+      [1, 2, 3, 4, 5]
+    ])
+  })
+})

yarn.lock

@@ -1832,7 +1832,6 @@ __metadata:
     eslint-plugin-simple-import-sort: ^9.0.0
     eslint-plugin-unused-imports: ^2.0.0
     expect-type: ^0.15.0
-    group-items: ^2.2.0
     husky: ^8.0.3
     jsdom: ^21.0.0
     lint-staged: ^13.1.0
@@ -3420,15 +3419,6 @@ __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-eql@npm:^4.1.2":
   version: 4.1.3
   resolution: "deep-eql@npm:4.1.3"
@@ -5012,15 +5002,6 @@ __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
-
 "hard-rejection@npm:^2.1.0":
   version: 2.1.0
   resolution: "hard-rejection@npm:2.1.0"