~ Prevent mutating external objects on nested object state

Author: will-stone

src/2n8.test.tsx

@@ -248,6 +248,42 @@ test('should not mutate external objects', () => {
   expect(externalObj).toStrictEqual({ foo: { bar: 'baz' } })
 })
 
+test('should not mutate external objects in nested object state', () => {
+  const externalObj = { bar: 'baz' }
+
+  class Store extends TwoAndEight {
+    obj = { foo: externalObj }
+
+    loadExternalObj(ext: { bar: string }) {
+      this.obj.foo = ext
+    }
+
+    change() {
+      this.obj.foo.bar = 'moo'
+    }
+
+    reset() {
+      this.$reset()
+    }
+  }
+
+  const store = createStore(new Store())
+  expect(store.getState().obj).toStrictEqual({ foo: { bar: 'baz' } })
+  expect(externalObj).toStrictEqual({ bar: 'baz' })
+  store.getState().change()
+  expect(store.getState().obj).toStrictEqual({ foo: { bar: 'moo' } })
+  expect(externalObj).toStrictEqual({ bar: 'baz' })
+  store.getState().reset()
+  expect(store.getState().obj).toStrictEqual({ foo: { bar: 'baz' } })
+  expect(externalObj).toStrictEqual({ bar: 'baz' })
+  store.getState().loadExternalObj(externalObj)
+  expect(store.getState().obj).toStrictEqual({ foo: { bar: 'baz' } })
+  expect(externalObj).toStrictEqual({ bar: 'baz' })
+  store.getState().change()
+  expect(store.getState().obj).toStrictEqual({ foo: { bar: 'moo' } })
+  expect(externalObj).toStrictEqual({ bar: 'baz' })
+})
+
 test('should compute derived value', () => {
   class Store extends TwoAndEight {
     count = 1

src/2n8.ts

@@ -1,20 +1,41 @@
 import autoBind from 'auto-bind'
-import { cloneDeep, isEqual } from 'es-toolkit'
+import { cloneDeep, isEqual, isPlainObject } from 'es-toolkit'
 
 export type State<Store> = {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   [K in keyof Store as Store[K] extends Function ? never : K]: Store[K]
 }
 
+function createDeepProxy<T extends object>(rootTarget: T) {
+  const proxyHandler = {
+    get(target: T, property: string) {
+      const value = Reflect.get(target, property)
+      // Handle nested objects/arrays recursively
+      if (isPlainObject(value)) {
+        return createDeepProxy(value)
+      }
+
+      return value
+    },
+
+    set(target: T, property: string, value: unknown) {
+      Reflect.set(target, property, cloneDeep(value))
+      return true
+    },
+
+    deleteProperty(target: T, property: string) {
+      Reflect.deleteProperty(target, property)
+      return true
+    },
+  }
+
+  return new Proxy(rootTarget, proxyHandler)
+}
+
 export abstract class TwoAndEight {
   constructor() {
     // Remove any references to set data.
-    const p = new Proxy(this, {
-      set(target, prop, value) {
-        Reflect.set(target, prop, cloneDeep(value))
-        return true
-      },
-    })
+    const p = createDeepProxy(this)
 
     autoBind(p)
 
@@ -119,7 +140,7 @@ export function createStore<Store extends TwoAndEight>(
       }
       // Clone all fields to themselves so that external state isn't mutated.
       else {
-        Reflect.set(store, name, structuredClone(value))
+        Reflect.set(store, name, cloneDeep(value))
       }
     }
   }