changed deepClone back to original and added deepProxy (#1169)

* changed deepClone back to original and added deepProxy

* added a memo cache in deep proxy to protect aqgainst cyclic references

* format

* added tests and fixed inner Map/Set bug

* fixed import in test file

* added documentation for deepProxy

* modified name of deepProxy to unstable_deepProxy

* forgot one

* format

* Update docs/how-tos/how-to-reset-state.mdx

---------

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>

Author: overthemike

docs/api/utils/proxyMap.mdx

@@ -61,6 +61,23 @@ state.set(key, 'value')
 state.get(key) //undefined
 ```
 
+## `isProxyMap`
+
+If you want to check if an object is a proxyMap, you can use the `isProxyMap` function.
+
+```js
+import { proxy, ref } from 'valtio'
+import { proxyMap, isProxyMap } from 'valtio/utils'
+
+const state = proxy({
+  nativeMap: ref(new Map(/*...*/)),
+  proxyMap: proxyMap(),
+})
+
+isProxyMap(state.nativeMap) // false
+isProxyMap(state.proxyMap) // true
+```
+
 ## Codesandbox demo
 
 https://codesandbox.io/s/github/pmndrs/valtio/tree/main/examples/todo-with-proxyMap

docs/api/utils/proxySet.mdx

@@ -53,3 +53,20 @@ const state = proxy({
   set: proxySet(),
 })
 ```
+
+## `isProxySet`
+
+If you want to check if an object is a proxyMap, you can use the `isProxySet` function.
+
+```js
+import { proxy, ref } from 'valtio'
+import { proxySet, isProxySet } from 'valtio/utils'
+
+const state = proxy({
+  nativeSet: ref(new Set(/*...*/)),
+  proxySet: proxySet(),
+})
+
+isProxySet(state.nativeSet) // false
+isProxySet(state.proxySet) // true
+```

docs/api/utils/unstable_deepProxy.mdx

@@ -0,0 +1,31 @@
+---
+title: 'unstable_deepProxy'
+section: 'API'
+subSection: 'Utils'
+description: ''
+---
+
+# `unstable_deepProxy`
+
+You can use this utility to recursively go through an object and proxy all proxiable objects with the exception of anything marked with `ref()`. `Map`s will become `proxyMap`s and `Set`s will become `proxySet`s.
+
+```js
+import {
+  unstable_deepProxy as deepProxy,
+  isProxyMap,
+  isProxySet,
+} from 'valtio/utils'
+
+const obj = {
+  mySet: new Set(),
+  myMap: new Map(),
+  sub: {
+    foo: 'bar',
+  },
+}
+
+const clonedProxy = deepProxy(obj)
+
+console.log(isProxyMap(clonedProxy.myMap)) // true
+console.log(isProxySet(clonedProxy.mySet)) // true
+```

docs/how-tos/how-to-reset-state.mdx

@@ -50,3 +50,5 @@ Using `structuredClone()`
 In 2022, there was a new global function added called `structuredClone` that is widely available in most modern browsers. You can use `structuredClone` in the same way as `deepClone` above, however `deepClone` is preferred as it will be aware of any `ref`s in your state.
 
 </blockquote>
+
+> Note: deepClone will convert proxyMap and proxySet back to plain objects. If you have an object that has these within its tree, consider using `unstable_deepProxy` instead.

src/vanilla/utils.ts

@@ -2,5 +2,6 @@ export { subscribeKey } from './utils/subscribeKey.ts'
 export { watch } from './utils/watch.ts'
 export { devtools } from './utils/devtools.ts'
 export { deepClone } from './utils/deepClone.ts'
-export { proxySet } from './utils/proxySet.ts'
-export { proxyMap } from './utils/proxyMap.ts'
+export { unstable_deepProxy } from './utils/deepProxy.ts'
+export { proxySet, isProxySet } from './utils/proxySet.ts'
+export { proxyMap, isProxyMap } from './utils/proxyMap.ts'

src/vanilla/utils/deepClone.ts

@@ -1,6 +1,4 @@
 import { unstable_getInternalStates } from '../../vanilla.ts'
-import { isProxyMap, proxyMap } from './proxyMap.ts'
-import { isProxySet, proxySet } from './proxySet.ts'
 
 const isObject = (x: unknown): x is object =>
   typeof x === 'object' && x !== null
@@ -29,16 +27,6 @@ export function deepClone<T>(
     return obj
   }
 
-  if (isProxySet(obj)) {
-    return proxySet([...(obj as unknown as Iterable<unknown>)]) as unknown as T
-  }
-
-  if (isProxyMap(obj)) {
-    return proxyMap([
-      ...(obj as unknown as Map<unknown, unknown>).entries(),
-    ]) as unknown as T
-  }
-
   const baseObject: T = Array.isArray(obj)
     ? []
     : Object.create(Object.getPrototypeOf(obj))

src/vanilla/utils/deepProxy.ts

@@ -0,0 +1,79 @@
+import { proxy, unstable_getInternalStates } from '../../vanilla.ts'
+import { isProxyMap, proxyMap } from './proxyMap.ts'
+import { isProxySet, proxySet } from './proxySet.ts'
+
+const isObject = (x: unknown): x is object =>
+  typeof x === 'object' && x !== null
+
+let defaultRefSet: WeakSet<object> | undefined
+const getDefaultRefSet = (): WeakSet<object> => {
+  if (!defaultRefSet) {
+    defaultRefSet = unstable_getInternalStates().refSet
+  }
+  return defaultRefSet
+}
+
+const cloneContainer = <T extends object>(src: T): T => {
+  return (
+    Array.isArray(src) ? [] : Object.create(Object.getPrototypeOf(src))
+  ) as T
+}
+
+/**
+ * Deeply proxies an input while normalizing Maps/Sets into proxyMap/proxySet.
+ * - Values in refSet or primitives are returned as-is.
+ * - Map/proxyMap and Set/proxySet are re-instantiated by passing their existing iterables directly.
+ * - Arrays/objects are rebuilt recursively and wrapped with proxy().
+ */
+export function unstable_deepProxy<T>(
+  obj: T,
+  getRefSet: () => WeakSet<object> = getDefaultRefSet,
+): T {
+  const memo = new WeakMap<object, unknown>()
+
+  const visit = (value: unknown) => {
+    if (!isObject(value) || getRefSet().has(value)) return value
+
+    // Normalize Sets: deep-visit each element before wrapping
+    if (value instanceof Set || isProxySet(value as object)) {
+      const input = value as Iterable<unknown>
+      const items: unknown[] = []
+      for (const el of input) {
+        items.push(visit(el))
+      }
+      return proxySet(items)
+    }
+
+    // Normalize Maps: deep-visit keys and values before wrapping
+    if (value instanceof Map || isProxyMap(value as object)) {
+      const input = value as Iterable<[unknown, unknown]>
+      const entries: [unknown, unknown][] = []
+      for (const [k, v] of input) {
+        entries.push([visit(k), visit(v)])
+      }
+      return proxyMap(entries)
+    }
+
+    const hit = memo.get(value)
+
+    if (hit) return hit
+
+    const target = cloneContainer(value)
+    memo.set(value, target)
+
+    for (const key of Reflect.ownKeys(value)) {
+      const desc = Reflect.getOwnPropertyDescriptor(value, key)
+      if (!desc) continue // type guard to make sure we can access metadata
+      if ('value' in desc) {
+        const next = visit((value as Record<PropertyKey, unknown>)[key])
+        Object.defineProperty(target, key, { ...desc, value: next })
+      } else {
+        Object.defineProperty(target, key, desc)
+      }
+    }
+
+    return proxy(target)
+  }
+
+  return visit(obj) as T
+}

tests/deepClone.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { proxy } from 'valtio'
-import { deepClone, proxyMap, proxySet } from 'valtio/utils'
+import { deepClone } from 'valtio/utils'
 
 describe('deepClone', () => {
   // Basic data types
@@ -54,147 +54,4 @@ describe('deepClone', () => {
     expect(cloned).toEqual(original)
     expect(cloned).not.toBe(original)
   })
-
-  // ProxySet tests
-  it('should properly clone a proxySet', () => {
-    const original = proxySet<number>([1, 2, 3])
-    const cloned = deepClone(original)
-
-    // Check if values are the same
-    expect([...cloned]).toEqual([...original])
-
-    // Check if it's a different instance
-    expect(cloned).not.toBe(original)
-
-    // Check if it's still a proxySet (by checking methods)
-    expect(typeof cloned.add).toBe('function')
-    expect(typeof cloned.delete).toBe('function')
-    expect(typeof cloned.clear).toBe('function')
-    expect(typeof cloned[Symbol.iterator]).toBe('function')
-    expect(Object.prototype.toString.call(cloned)).toBe('[object Set]')
-  })
-
-  it('should maintain proxySet reactivity', () => {
-    const state = proxy({
-      count: 0,
-      set: proxySet<number>([1, 2, 3]),
-    })
-
-    const cloned = deepClone(state)
-
-    // Add a new item to the cloned set
-    cloned.set.add(4)
-
-    // Verify the item was added
-    expect([...cloned.set]).toContain(4)
-
-    // Verify it's still a reactive proxySet (we can check by seeing if add method throws an error)
-    expect(() => cloned.set.add(5)).not.toThrow()
-  })
-
-  // ProxyMap tests
-  it('should properly clone a proxyMap', () => {
-    const original = proxyMap<string, number>([
-      ['a', 1],
-      ['b', 2],
-      ['c', 3],
-    ])
-    const cloned = deepClone(original)
-
-    // Check if values are the same
-    expect([...cloned.entries()]).toEqual([...original.entries()])
-
-    // Check if it's a different instance
-    expect(cloned).not.toBe(original)
-
-    // Check if it's still a proxyMap (by checking methods)
-    expect(typeof cloned.set).toBe('function')
-    expect(typeof cloned.get).toBe('function')
-    expect(typeof cloned.delete).toBe('function')
-    expect(typeof cloned.clear).toBe('function')
-    expect(typeof cloned.entries).toBe('function')
-    expect(Object.prototype.toString.call(cloned)).toBe('[object Map]')
-  })
-
-  it('should maintain proxyMap reactivity', () => {
-    const state = proxy({
-      count: 0,
-      map: proxyMap<string, number>([
-        ['a', 1],
-        ['b', 2],
-      ]),
-    })
-
-    const cloned = deepClone(state)
-
-    // Set a new entry in the cloned map
-    cloned.map.set('c', 3)
-
-    // Verify the entry was added
-    expect(cloned.map.get('c')).toBe(3)
-
-    // Verify it's still a reactive proxyMap (we can check by seeing if set method throws an error)
-    expect(() => cloned.map.set('d', 4)).not.toThrow()
-  })
-
-  // Complex object with both proxySet and proxyMap
-  it('should handle complex objects with both proxySet and proxyMap', () => {
-    const original = proxy({
-      name: 'test',
-      count: 42,
-      set: proxySet<number>([1, 2, 3]),
-      map: proxyMap<string, any>([
-        ['a', 1],
-        ['b', { nested: true }],
-        ['c', proxySet<string>(['x', 'y', 'z'])],
-      ]),
-      nested: {
-        anotherSet: proxySet<string>(['a', 'b', 'c']),
-      },
-    })
-
-    const cloned = deepClone(original)
-
-    // Check basic properties
-    expect(cloned.name).toBe('test')
-    expect(cloned.count).toBe(42)
-
-    // Check proxySet
-    expect([...cloned.set]).toEqual([1, 2, 3])
-
-    // Check proxyMap
-    expect(cloned.map.get('a')).toBe(1)
-    expect(cloned.map.get('b')).toEqual({ nested: true })
-
-    // Check nested proxySet inside proxyMap
-    const nestedSet = cloned.map.get('c')
-    expect([...nestedSet]).toEqual(['x', 'y', 'z'])
-    expect(typeof nestedSet.add).toBe('function')
-
-    // Check nested object with proxySet
-    expect([...cloned.nested.anotherSet]).toEqual(['a', 'b', 'c'])
-
-    // Verify reactivity is maintained
-    expect(() => cloned.set.add(4)).not.toThrow()
-    expect(() => cloned.map.set('d', 4)).not.toThrow()
-    expect(() => cloned.map.get('c').add('w')).not.toThrow()
-    expect(() => cloned.nested.anotherSet.add('d')).not.toThrow()
-  })
-
-  // Edge cases
-  it('should handle empty proxySet and proxyMap', () => {
-    const original = proxy({
-      emptySet: proxySet<number>(),
-      emptyMap: proxyMap<string, number>(),
-    })
-
-    const cloned = deepClone(original)
-
-    expect(cloned.emptySet.size).toBe(0)
-    expect(cloned.emptyMap.size).toBe(0)
-
-    // Verify they're still proxy collections
-    expect(() => cloned.emptySet.add(1)).not.toThrow()
-    expect(() => cloned.emptyMap.set('a', 1)).not.toThrow()
-  })
 })