Merge pull request cerebral#115 from cerebral/derivedFix

fix(overmind): make sure derived also updates on object changes

Author: christianalfoni

packages/node_modules/overmind/src/derived.ts

@@ -23,13 +23,20 @@ export default class Derived {
       this.paths = proxyStateTree.clearPathsTracking(trackId)
       if (!this.proxyStateTreeListener) {
         this.proxyStateTreeListener = proxyStateTree.addMutationListener(
-          (mutation, flushId) => {
-            if (this.paths.has(mutation.path)) {
-              eventHub.emitAsync(EventType.DERIVED_DIRTY, {
-                path,
-                flushId,
-              })
-              this.isDirty = true
+          (_, paths, flushId) => {
+            if (this.isDirty) {
+              return
+            }
+
+            for (let path of paths) {
+              if (this.paths.has(path)) {
+                eventHub.emitAsync(EventType.DERIVED_DIRTY, {
+                  path,
+                  flushId,
+                })
+                this.isDirty = true
+                return
+              }
             }
           }
         )

packages/node_modules/proxy-state-tree/README.md

@@ -165,13 +165,15 @@ const tree = new ProxyStateTree({
 })
 const state = tree.get()
 
-const listener = tree.addMutationListener((mutation) => {
+const listener = tree.addMutationListener((mutation, paths, flushId) => {
   /*
-    {
+    mutation: {
       method: "set",
       path: "foo",
       args: ["bar2"] 
     }
+    paths: Set(["foo"])
+    flushId: 1
   */
 })
 
@@ -181,6 +183,8 @@ tree.clearMutationTracking()
 listener.dispose()
 ```
 
+It is important here to check the **paths** argument for a list of all paths possibly changed. Reason is that a single mutation might cause changes to multiple paths.
+
 ## Dynamic state values
 
 If you insert a function into the state tree it will be called when accessed. The function is passed the **proxy-state-tree** instance and the path of where the function lives in the tree.

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

@@ -69,13 +69,14 @@ describe('TRACKING', () => {
     state.foo
     tree.clearPathsTracking(trackId)
 
-    tree.addMutationListener((mutation, flushId) => {
+    tree.addMutationListener((mutation, paths, flushId) => {
       reactionCount++
       expect(mutation).toEqual({
         method: 'set',
         path: 'foo',
         args: ['bar2'],
       })
+      expect(paths).toEqual(new Set(['foo']))
       expect(flushId).toBe(1)
     })
     tree.startMutationTracking()

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

@@ -12,6 +12,12 @@ export type Mutation = {
   args: any[]
 }
 
+export type MutationCallback = (
+  mutation: Mutation,
+  paths: Set<string>,
+  flushId: number
+) => void
+
 let hasWarnedFlushWhileTracking = false
 
 class ProxyStateTree {
@@ -24,7 +30,7 @@ class ProxyStateTree {
   private status: Set<STATUS> = new Set()
   private currentFlushId: number = 0
   private completedTrackingCallbacks = []
-  private mutationCallbacks = []
+  private mutationCallbacks: MutationCallback[] = []
   private proxy: any
   constructor(private state: object, private options: Options = {}) {
     if (!isPlainObject(state)) {
@@ -41,8 +47,10 @@ class ProxyStateTree {
   }
   private addMutation(mutation: Mutation) {
     this.currentMutations.push(mutation)
+    const paths = new Set([...this.objectChanges, mutation.path])
+
     for (let cb of this.mutationCallbacks) {
-      cb(mutation, this.currentFlushId + 1)
+      cb(mutation, paths, this.currentFlushId + 1)
     }
   }
   get() {
@@ -145,7 +153,7 @@ class ProxyStateTree {
 
     return pathSet
   }
-  addMutationListener(cb: (mutation: Mutation, flushId: number) => void) {
+  addMutationListener(cb: MutationCallback) {
     const index = this.mutationCallbacks.push(cb) - 1
 
     return () => {