fix(proxy-state-tree): detect object add and removal of key as change to the object

Author: christianalfoni

packages/node_modules/proxy-state-tree/src/index.test.ts

@@ -160,7 +160,7 @@ describe('ARRAYS', () => {
       }).toThrow()
     })
     test('should correctly keep track of changing indexes', () => {
-      expect.assertions(3)
+      expect.assertions(4)
       let listener
       let iterations = 0
       const tree = new ProxyStateTree({
@@ -209,6 +209,7 @@ describe('ARRAYS', () => {
       state.items.unshift({
         title: 'foo',
       })
+      const currentProxy = state.items[0]
       tree.clearMutationTracking()
       tree.flush()
       tree.startMutationTracking()
@@ -219,8 +220,10 @@ describe('ARRAYS', () => {
       tree.flush()
       tree.startMutationTracking()
       state.items[1].title = 'wapah'
+      const newProxy = state.items[1]
       tree.clearMutationTracking()
       tree.flush()
+      expect(currentProxy).not.toBe(newProxy)
     })
   })
 
@@ -522,6 +525,54 @@ describe('ITERATIONS', () => {
     const paths = tree.clearPathsTracking(trackId)
     expect(paths).toEqual(new Set(['items', 'items.foo', 'items.bar']))
   })
+  test('should track new and deleted props on objects', () => {
+    let runCount = 0
+    let mutationListener
+    expect.assertions(3)
+    const tree = new ProxyStateTree({
+      items: {},
+    })
+    const state = tree.get()
+    function update() {
+      const trackId = tree.startPathsTracking()
+      Object.keys(state.items).forEach((key) => {
+        state.items[key] // eslint-disable-line
+      })
+      const paths = tree.clearPathsTracking(trackId)
+
+      if (mutationListener) {
+        mutationListener.update(paths)
+      } else {
+        mutationListener = tree.addMutationListener(paths, update)
+      }
+
+      if (runCount === 1) {
+        expect(paths).toEqual(new Set(['items', 'items.foo']))
+      }
+      if (runCount === 2) {
+        expect(paths).toEqual(new Set(['items', 'items.foo', 'items.bar']))
+      }
+      if (runCount === 3) {
+        expect(paths).toEqual(new Set(['items', 'items.bar']))
+      }
+
+      runCount++
+    }
+
+    update()
+    tree.startMutationTracking()
+    state.items.foo = 'bar'
+    tree.clearMutationTracking()
+    tree.flush()
+    tree.startMutationTracking()
+    state.items.bar = 'baz'
+    tree.clearMutationTracking()
+    tree.flush()
+    tree.startMutationTracking()
+    delete state.items.foo
+    tree.clearMutationTracking()
+    tree.flush()
+  })
   test('should react to array mutation methods', () => {
     let reactionCount = 0
     const tree = new ProxyStateTree({

packages/node_modules/proxy-state-tree/src/index.ts

@@ -14,10 +14,10 @@ class ProxyStateTree {
   state: object
   options: Options
   pathDependencies: object
+  objectChanges: Set<string>
   mutations: Mutation[]
   currentMutations: Mutation[]
   paths: Set<string>[]
-  dirtyPaths: Set<string>
   status: STATUS
   proxy: any
   constructor(state: object, options: Options = { devmode: true }) {
@@ -27,7 +27,7 @@ class ProxyStateTree {
     this.mutations = []
     this.currentMutations = []
     this.paths = []
-    this.dirtyPaths = new Set()
+    this.objectChanges = new Set()
     this.status = STATUS.IDLE
     this.proxy = proxify(this, state)
   }
@@ -50,9 +50,10 @@ class ProxyStateTree {
         }
       }
     }
-    for (let dirtyPath in this.dirtyPaths) {
-      if (this.pathDependencies[dirtyPath]) {
-        for (let callback of this.pathDependencies[dirtyPath]) {
+
+    for (let objectChange of this.objectChanges) {
+      if (this.pathDependencies[objectChange]) {
+        for (let callback of this.pathDependencies[objectChange]) {
           if (!pathCallbacksCalled.has(callback)) {
             pathCallbacksCalled.add(callback)
             callback()
@@ -62,7 +63,7 @@ class ProxyStateTree {
     }
     pathCallbacksCalled.clear()
     this.mutations.length = 0
-    this.dirtyPaths.clear()
+    this.objectChanges.clear()
 
     return mutations
   }

packages/node_modules/proxy-state-tree/src/proxify.ts

@@ -121,6 +121,10 @@ function createObjectProxy(tree, value, path) {
         )
       }
       if (shouldTrackMutations(tree, nestedPath)) {
+        if (!(prop in target)) {
+          tree.objectChanges.add(path)
+        }
+
         tree.currentMutations.push({
           method: 'set',
           path: nestedPath,
@@ -139,6 +143,10 @@ function createObjectProxy(tree, value, path) {
         )
       }
       if (shouldTrackMutations(tree, nestedPath)) {
+        if (!(prop in target)) {
+          tree.objectChanges.add(path)
+        }
+
         tree.currentMutations.push({
           method: 'unset',
           path: nestedPath,