fix(proxy-state-tree): invalidate proxies when path has changed

Author: christianalfoni

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

@@ -159,6 +159,69 @@ describe('ARRAYS', () => {
         tree.clearPathsTracking(trackIdA)
       }).toThrow()
     })
+    test('should correctly keep track of changing indexes', () => {
+      expect.assertions(3)
+      let listener
+      let iterations = 0
+      const tree = new ProxyStateTree({
+        items: [],
+      })
+      const state = tree.get()
+
+      function trackPaths() {
+        const trackId = tree.startPathsTracking()
+        state.items.map((item) => item.title)
+        const paths = tree.clearPathsTracking(trackId)
+
+        if (iterations === 1) {
+          expect(Array.from(paths)).toEqual([
+            'items',
+            'items.0',
+            'items.0.title',
+          ])
+        } else if (iterations === 2) {
+          expect(Array.from(paths)).toEqual([
+            'items',
+            'items.0',
+            'items.0.title',
+            'items.1',
+            'items.1.title',
+          ])
+        } else if (iterations === 3) {
+          expect(Array.from(paths)).toEqual([
+            'items',
+            'items.0',
+            'items.0.title',
+            'items.1',
+            'items.1.title',
+          ])
+        }
+
+        if (!listener) {
+          tree.addMutationListener(paths, trackPaths)
+        }
+
+        iterations++
+      }
+
+      trackPaths()
+      tree.startMutationTracking()
+      state.items.unshift({
+        title: 'foo',
+      })
+      tree.clearMutationTracking()
+      tree.flush()
+      tree.startMutationTracking()
+      state.items.unshift({
+        title: 'bar',
+      })
+      tree.clearMutationTracking()
+      tree.flush()
+      tree.startMutationTracking()
+      state.items[1].title = 'wapah'
+      tree.clearMutationTracking()
+      tree.flush()
+    })
   })
 
   describe('MUTATIONS', () => {

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

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

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

@@ -1,6 +1,8 @@
 const isPlainObject = require('is-plain-object')
 
 export const IS_PROXY = Symbol('IS_PROXY')
+export const PATH = Symbol('PATH')
+export const VALUE = Symbol('VALUE')
 
 export enum STATUS {
   IDLE = 'IDLE',
@@ -31,6 +33,8 @@ function createArrayProxy(tree, value, path) {
   return new Proxy(value, {
     get(target, prop) {
       if (prop === IS_PROXY) return true
+      if (prop === PATH) return path
+      if (prop === VALUE) return value
 
       if (
         prop === 'length' ||
@@ -42,7 +46,6 @@ function createArrayProxy(tree, value, path) {
       }
 
       const nestedPath = concat(path, prop)
-
       if (tree.status === STATUS.TRACKING_PATHS) {
         tree.paths[tree.paths.length - 1].add(nestedPath)
       }
@@ -92,21 +95,22 @@ function createObjectProxy(tree, value, path) {
   return new Proxy(value, {
     get(target, prop) {
       if (prop === IS_PROXY) return true
+      if (prop === PATH) return path
+      if (prop === VALUE) return value
 
       if (typeof prop === 'symbol') return target[prop]
 
-      const value = target[prop]
+      const targetValue = target[prop]
       const nestedPath = concat(path, prop)
-
       if (tree.status === STATUS.TRACKING_PATHS) {
         tree.paths[tree.paths.length - 1].add(nestedPath)
       }
 
-      if (typeof value === 'function') {
-        return value(tree, nestedPath)
+      if (typeof targetValue === 'function') {
+        return targetValue(tree, nestedPath)
       }
 
-      return (target[prop] = proxify(tree, value, nestedPath))
+      return (target[prop] = proxify(tree, targetValue, nestedPath))
     },
     set(target, prop, value) {
       const nestedPath = concat(path, prop)
@@ -151,7 +155,9 @@ function createObjectProxy(tree, value, path) {
 
 function proxify(tree, value, path?) {
   if (value) {
-    if (value[IS_PROXY]) {
+    if (value[IS_PROXY] && value[PATH] !== path) {
+      return proxify(tree, value[VALUE], path)
+    } else if (value[IS_PROXY]) {
       return value
     } else if (Array.isArray(value)) {
       return createArrayProxy(tree, value, path)