fix(overmind): fixes issue with deeply nested derived

Author: christianalfoni

packages/node_modules/overmind/src/derived.test.ts

@@ -133,4 +133,55 @@ describe('Derived', () => {
 
     app.actions.changeFoo()
   })
+  test('should track nested derived correctly', () => {
+    expect.assertions(4)
+    let runCount = 0
+    const changeFoo: Action = ({ state }) => {
+      state.foo = 'bar2'
+      expect(state.upperFoo).toBe('BAR2')
+    }
+
+    const derived: Derive<State, string> = (parent) => parent.foo.toUpperCase()
+
+    const nestedDerived: Derive<State, string> = (parent) =>
+      parent.upperFoo + '!!!'
+
+    const config = {
+      state: {
+        foo: 'bar',
+        nestedDerived,
+        upperFoo: derived,
+      },
+      actions: {
+        changeFoo,
+      },
+    }
+    type Config = typeof config
+    interface Action<Input = void> extends IAction<Config, Input> {}
+    interface Derive<Parent extends IState, Value>
+      extends IDerive<Config, Parent, Value> {}
+
+    const app = new Overmind(config)
+
+    const trackStateTree = app.getTrackStateTree()
+
+    function render() {
+      runCount++
+      if (runCount === 1) {
+        expect(trackStateTree.state.nestedDerived).toBe('BAR!!!')
+      } else {
+        expect(trackStateTree.state.nestedDerived).toBe('BAR2!!!')
+      }
+      trackStateTree.stopTracking()
+      console.log(trackStateTree.pathDependencies)
+    }
+
+    trackStateTree.track(render)
+
+    render()
+
+    app.actions.changeFoo()
+
+    expect(runCount).toBe(2)
+  })
 })

packages/node_modules/overmind/src/derived.ts

@@ -25,7 +25,6 @@ export class Derived {
     if (process.env.NODE_ENV === 'development') {
       boundEvaluate.dispose = () => {
         this.disposeOnMutation()
-        this.trackStateTree.dispose()
       }
     }
 
@@ -44,9 +43,7 @@ export class Derived {
     proxyStateTree: ProxyStateTree<any>,
     path
   ) {
-    if (!this.trackStateTree) {
-      this.trackStateTree = proxyStateTree.getTrackStateTree()
-      this.trackStateTree.shouldTrack = true
+    if (!this.disposeOnMutation) {
       this.disposeOnMutation = proxyStateTree.onMutation(
         (_, paths, flushId) => {
           if (this.isDirty) {
@@ -77,13 +74,6 @@ export class Derived {
       this.isDirty = false
       this.paths = getPaths()
 
-      this.trackStateTree.clearTracking()
-
-      // We add the paths tracked to the derived
-      for (let path of this.paths) {
-        this.trackStateTree.addTrackingPath(path)
-      }
-
       if (process.env.NODE_ENV === 'development') {
         eventHub.emitAsync(EventType.DERIVED, {
           path,
@@ -93,11 +83,16 @@ export class Derived {
         })
         this.updateCount++
       }
-    } else if (tree instanceof TrackStateTree) {
+    }
+
+    if (tree instanceof TrackStateTree) {
       // If we access a cached value we have to make sure that we move
-      // the tracked paths into the tree looking at it
+      // the tracked paths into the tree looking at it, where
+      // addTrackingPath is for initial tree and "trackPathListeners"
+      // is for nested derived
       for (let path of this.paths) {
         tree.addTrackingPath(path)
+        tree.trackPathListeners.forEach((cb) => cb(path))
       }
     }
 

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

@@ -24,10 +24,13 @@ export class TrackStateTree<T extends object> implements ITrackStateTree<T> {
     const listener = (path) => {
       paths.add(path)
     }
-    const index = this.trackPathListeners.push(listener) - 1
+    this.trackPathListeners.push(listener)
 
     return () => {
-      this.trackPathListeners.splice(index, 1)
+      this.trackPathListeners.splice(
+        this.trackPathListeners.indexOf(listener),
+        1
+      )
 
       return paths
     }