fix: improve copy on BigInt / Map / Set

Author: pionxzh

src/hooks/useCopyToClipboard.ts

@@ -3,7 +3,7 @@ import { useCallback, useRef, useState } from 'react'
 
 import { useJsonViewerStore } from '../stores/JsonViewerStore'
 import type { JsonViewerOnCopy } from '../type'
-import { circularStringify } from '../utils'
+import { safeStringify } from '../utils'
 
 /**
  * useClipboard hook accepts one argument options in which copied status timeout duration is defined (defaults to 2000). Hook returns object with properties:
@@ -52,7 +52,7 @@ export function useClipboard ({ timeout = 2000 } = {}) {
           }]`, error)
       }
     } else {
-      const valueToCopy = circularStringify(
+      const valueToCopy = safeStringify(
         typeof value === 'function' ? value.toString() : value,
         '  '
       )

src/utils/index.ts

@@ -151,22 +151,51 @@ export function segmentArray<T> (arr: T[], size: number): T[][] {
   return result
 }
 
-// https://stackoverflow.com/a/72457899
-export function circularStringify (obj: any, space?: string | number) {
+export function safeStringify (obj: any, space?: string | number) {
   const seenValues = []
 
-  function circularReplacer (key: string | number, value: any) {
+  function replacer (key: string | number, value: any) {
+    // https://github.com/GoogleChromeLabs/jsbi/issues/30
+    if (typeof value === 'bigint') return value.toString()
+
+    // Map and Set are not supported by JSON.stringify
+    if (value instanceof Map) {
+      if ('toJSON' in value && typeof value.toJSON === 'function') return value.toJSON()
+      if (value.size === 0) return {}
+
+      if (seenValues.includes(value)) return '[Circular]'
+      seenValues.push(value)
+
+      const entries = Array.from(value.entries())
+      if (entries.every(([key]) => typeof key === 'string' || typeof key === 'number')) {
+        return Object.fromEntries(entries)
+      }
+
+      // if keys are not string or number, we can't convert to object
+      // fallback to default behavior
+      return {}
+    }
+    if (value instanceof Set) {
+      if ('toJSON' in value && typeof value.toJSON === 'function') return value.toJSON()
+
+      if (seenValues.includes(value)) return '[Circular]'
+      seenValues.push(value)
+
+      return Array.from(value.values())
+    }
+
+    // https://stackoverflow.com/a/72457899
     if (typeof value === 'object' && value !== null && Object.keys(value).length) {
       const stackSize = seenValues.length
       if (stackSize) {
         // clean up expired references
-        for (let n = stackSize - 1; seenValues[n][key] !== value; --n) { seenValues.pop() }
+        for (let n = stackSize - 1; n >= 0 && seenValues[n][key] !== value; --n) { seenValues.pop() }
         if (seenValues.includes(value)) return '[Circular]'
       }
       seenValues.push(value)
     }
     return value
   }
 
-  return JSON.stringify(obj, circularReplacer, space)
+  return JSON.stringify(obj, replacer, space)
 }

tests/util.test.tsx

@@ -4,7 +4,7 @@ import { describe, expect, test } from 'vitest'
 
 import type { DataItemProps, Path } from '../src'
 import { applyValue, createDataType, isCycleReference } from '../src'
-import { circularStringify, segmentArray } from '../src/utils'
+import { safeStringify, segmentArray } from '../src/utils'
 
 describe('function applyValue', () => {
   const patches: any[] = [{}, undefined, 1, '2', 3n, 0.4]
@@ -239,7 +239,7 @@ describe('function segmentArray', () => {
 describe('function circularStringify', () => {
   test('should works as JSON.stringify', () => {
     const obj = { foo: 1, bar: 2 }
-    expect(circularStringify(obj)).to.eq(JSON.stringify(obj))
+    expect(safeStringify(obj)).to.eq(JSON.stringify(obj))
   })
 
   test('should works with circular reference in object', () => {
@@ -251,14 +251,14 @@ describe('function circularStringify', () => {
       }
     }
     obj.bar.bar = obj.bar
-    expect(circularStringify(obj)).to.eq('{"foo":1,"bar":{"foo":2,"bar":"[Circular]"}}')
+    expect(safeStringify(obj)).to.eq('{"foo":1,"bar":{"foo":2,"bar":"[Circular]"}}')
   })
 
   test('should works with circular reference in array', () => {
     const array = [1, 2, 3, 4, 5]
     // @ts-expect-error ignore
     array[2] = array
-    expect(circularStringify(array)).to.eq('[1,2,"[Circular]",4,5]')
+    expect(safeStringify(array)).to.eq('[1,2,"[Circular]",4,5]')
   })
 
   test('should works with complex circular object', () => {
@@ -278,6 +278,34 @@ describe('function circularStringify', () => {
     obj.a.b.e = obj.e
     // @ts-expect-error ignore
     obj.e.g = obj.a.b
-    expect(circularStringify(obj)).to.eq('{"a":{"b":{"c":1,"d":2,"e":{"f":3,"g":"[Circular]"}}},"e":{"f":3,"g":"[Circular]"}}')
+    expect(safeStringify(obj)).to.eq('{"a":{"b":{"c":1,"d":2,"e":{"f":3,"g":"[Circular]"}}},"e":{"f":3,"g":"[Circular]"}}')
+  })
+
+  test('should works with ES6 Map', () => {
+    const map = new Map()
+    map.set('foo', 1)
+    map.set('bar', 2)
+    expect(safeStringify(map)).to.eq('{"foo":1,"bar":2}')
+  })
+
+  test('should works with ES6 Set', () => {
+    const set = new Set()
+    set.add(1)
+    set.add(2)
+    expect(safeStringify(set)).to.eq('[1,2]')
+  })
+
+  test('should works with ES6 Map with circular reference', () => {
+    const map = new Map()
+    map.set('foo', 1)
+    map.set('bar', map)
+    expect(safeStringify(map)).to.eq('{"foo":1,"bar":"[Circular]"}')
+  })
+
+  test('should works with ES6 Set with circular reference', () => {
+    const set = new Set()
+    set.add(1)
+    set.add(set)
+    expect(safeStringify(set)).to.eq('[1,"[Circular]"]')
   })
 })