fix(overmind): access properties on mutation to trigger derived in devtools

Author: christianalfoni

.prettierrc.json .prettierrc.prettierrc.json renamed to .prettierrc

@@ -45,12 +45,14 @@ export class Derived {
     if (!this.disposeOnMutation) {
       this.disposeOnMutation = proxyStateTree.onMutation(
         (_, paths, flushId) => {
-          if (typeof path.reduce((aggr, key) => aggr && aggr[key], proxyStateTree.sourceState) !== 'function') {
-            this.disposeOnMutation()
+          if (this.isDirty) {
             return
           }
-          
-          if (this.isDirty) {
+
+          // 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
           }
 

packages/node_modules/overmind/src/derived.ts

@@ -384,8 +384,7 @@ export class Overmind<ThisConfig extends IConfiguration>
             func: derived,
             value: derived(eventHub, tree, proxyStateTree, path.split('.'))
           }
-        },
-          
+        },    
         onGetter: devmode
           ? (path, value) => {
               this.eventHub.emitAsync(EventType.GETTER, {
@@ -807,6 +806,25 @@ export class Overmind<ThisConfig extends IConfiguration>
             data,
           })
 
+          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])
+                    }
+                  })
+                }
+              })
+            })
+          }
+          
           // Access the derived async, which will trigger calculation and devtools
           if (eventType === EventType.DERIVED_DIRTY) {
             data.derivedPath

packages/node_modules/overmind/src/index.ts

@@ -350,25 +350,25 @@ export class Proxifier {
           )
 
           value = result.func
-        } else {
-          mutationTree.addMutation(
-            {
-              method: 'set',
-              path: nestedPath,
-              args: [value],
-              hasChangedValue: value !== target[prop],
-              revert: () => {
-                if (existingValue === undefined) {
-                  delete proxy[prop]
-                } else {
-                  proxy[prop] = existingValue
-                }
-              },
-            },
-            objectChangePath
-          )
         }
 
+        mutationTree.addMutation(
+          {
+            method: 'set',
+            path: nestedPath,
+            args: [value],
+            hasChangedValue: value !== target[prop],
+            revert: () => {
+              if (existingValue === undefined) {
+                delete proxy[prop]
+              } else {
+                proxy[prop] = existingValue
+              }
+            },
+          },
+          objectChangePath
+        )
+
         return Reflect.set(target, prop, value)
       },
       deleteProperty(target, prop) {