fix(proxy-state-tree): mutations now trigger after they are performed

BREAKING CHANGE:
mutation events properly trigger after the mutation is performed

Author: christianalfoni

.gitignore

@@ -12,7 +12,7 @@ lib
 .cache
 .DS_Store
 devtoolsDist
-packages/overmind-website
+packages/overmind-website/**/*
 
 # Runtime data
 pids

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

@@ -136,7 +136,6 @@ describe('Derived', () => {
     app.actions.addDerived()
     expect(app.state.upperFoo).toBe('BAR')
     app.actions.changeFoo()
-    
     expect(app.state.upperFoo).toBe('BAR2')
   })
 

packages/node_modules/overmind/src/derived.ts

@@ -45,16 +45,14 @@ export class Derived {
     if (!this.disposeOnMutation) {
       this.disposeOnMutation = proxyStateTree.onMutation(
         (_, paths, flushId) => {
-          if (this.isDirty) {
-            return
-          }
-
-          // We only check this when it is not dirty, as being dirty indicates
-          // that it was just added
           if (typeof path.reduce((aggr, key) => aggr && aggr[key], proxyStateTree.sourceState) !== 'function') {
             this.disposeOnMutation()
             return
           }
+          
+          if (this.isDirty) {
+            return
+          }
 
           for (let mutationPath of paths) {
             if (this.paths.has(mutationPath)) {

packages/node_modules/overmind/src/index.ts

@@ -809,19 +809,17 @@ export class Overmind<ThisConfig extends IConfiguration>
           if (eventType === EventType.MUTATIONS) {
             // We want to trigger property access when setting objects and arrays, as any derived set would
             // then trigger and update the devtools
-            setTimeout(() => {
-              data.mutations.forEach((mutation) => {
-                const value = mutation.path.split('.').reduce((aggr, key) => aggr[key], this.proxyStateTree.state)
-                if (isPlainObject(value)) {
-                  Object.keys(value).forEach((key) => value[key])
-                } else if (Array.isArray(value)) {
-                  value.forEach((item) => {
-                    if (isPlainObject(item)) {
-                      Object.keys(item).forEach((key) => item[key])
-                    }
-                  })
-                }
-              })
+            data.mutations.forEach((mutation) => {
+              const value = mutation.path.split('.').reduce((aggr, key) => aggr[key], this.proxyStateTree.state)
+              if (isPlainObject(value)) {
+                Object.keys(value).forEach((key) => value[key])
+              } else if (Array.isArray(value)) {
+                value.forEach((item) => {
+                  if (isPlainObject(item)) {
+                    Object.keys(item).forEach((key) => item[key])
+                  }
+                })
+              }
             })
           }
 

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

@@ -193,25 +193,30 @@ export class Proxifier {
           return (...args) => {
             const mutationTree = proxifier.getMutationTree()
 
-            mutationTree.addMutation({
-              method,
-              path: path,
-              args: args,
-              hasChangedValue: true,
-              revert: getArrayMutationRevert(method, proxy, args),
-            })
+            let result
+
 
             if (process.env.NODE_ENV === 'production') {
-              return target[prop](...args)
+              result =  target[prop](...args)
             } else {
-              return target[prop](
+              result = target[prop](
                 ...args.map((arg) =>
                   /* @__PURE__ */ proxifier.ensureValueDosntExistInStateTreeElsewhere(
                     arg
                   )
                 )
               )
             }
+
+            mutationTree.addMutation({
+              method,
+              path: path,
+              args: args,
+              hasChangedValue: true,
+              revert: getArrayMutationRevert(method, proxy, args),
+            })
+
+            return result
           }
         }
 
@@ -231,6 +236,7 @@ export class Proxifier {
 
         const mutationTree = proxifier.getMutationTree()
         const existingValue = target[prop]
+        const result = Reflect.set(target, prop, value)
 
         mutationTree.addMutation({
           method: 'set',
@@ -246,7 +252,7 @@ export class Proxifier {
           },
         })
 
-        return Reflect.set(target, prop, value)
+        return result
       },
     })
 
@@ -341,7 +347,6 @@ export class Proxifier {
         const mutationTree = proxifier.getMutationTree()
         const existingValue = target[prop]
 
-        // Adding functions is not considered mutations
         if (typeof value === 'function' && proxifier.tree.master.options.onFunction) {
           const result = proxifier.tree.master.options.onFunction(
             proxifier.getTrackingTree() || proxifier.tree,
@@ -352,12 +357,15 @@ export class Proxifier {
           value = result.func
         }
 
+        const hasChangedValue = value !== target[prop]
+        const result = Reflect.set(target, prop, value)
+
         mutationTree.addMutation(
           {
             method: 'set',
             path: nestedPath,
             args: [value],
-            hasChangedValue: value !== target[prop],
+            hasChangedValue,
             revert: () => {
               if (existingValue === undefined) {
                 delete proxy[prop]
@@ -369,7 +377,7 @@ export class Proxifier {
           objectChangePath
         )
 
-        return Reflect.set(target, prop, value)
+        return result
       },
       deleteProperty(target, prop) {
         const nestedPath = proxifier.concat(path, prop)
@@ -384,6 +392,9 @@ export class Proxifier {
         const mutationTree = proxifier.getMutationTree()
         const existingValue = target[prop]
 
+
+        delete target[prop]
+
         mutationTree.addMutation(
           {
             method: 'unset',
@@ -397,8 +408,6 @@ export class Proxifier {
           objectChangePath
         )
 
-        delete target[prop]
-
         return true
       },
     })