feat(overmind): make components, derived and computed pass flushId to devtools

Author: christianalfoni

packages/node_modules/overmind/src/computed.ts

@@ -57,22 +57,32 @@ export class Computed {
         if (cache.proxyStateTreeListener) {
           cache.proxyStateTreeListener.update(cache.paths)
         } else {
+          eventHub.emit('computed', {
+            path,
+            paths: Array.from(cache.paths),
+            updateCount: cache.updateCount,
+            value: cache.value,
+            limit: this.cacheLimit,
+            cacheKeysCount: this.cacheKeys.length,
+            cacheKeyIndex: this.cacheKeys.indexOf(config),
+          })
           cache.proxyStateTreeListener = proxyStateTree.addMutationListener(
             cache.paths,
-            () => {
+            (flushId) => {
+              eventHub.emit('computed', {
+                path,
+                paths: Array.from(cache.paths),
+                updateCount: cache.updateCount,
+                value: cache.value,
+                limit: this.cacheLimit,
+                cacheKeysCount: this.cacheKeys.length,
+                cacheKeyIndex: this.cacheKeys.indexOf(config),
+                flushId,
+              })
               cache.isDirty = true
             }
           )
         }
-        eventHub.emit('computed', {
-          path,
-          paths: Array.from(cache.paths),
-          updateCount: cache.updateCount,
-          value: cache.value,
-          limit: this.cacheLimit,
-          cacheKeysCount: this.cacheKeys.length,
-          cacheKeyIndex: this.cacheKeys.indexOf(config),
-        })
         cache.updateCount++
 
         // Tracks the paths for the consumer of this derived value

packages/node_modules/overmind/src/derived.ts

@@ -30,19 +30,26 @@ class Derived {
       if (this.proxyStateTreeListener) {
         this.proxyStateTreeListener.update(this.paths)
       } else {
+        eventHub.emit('derived', {
+          path,
+          paths: Array.from(this.paths),
+          updateCount: this.updateCount,
+          value: this.value,
+        })
         this.proxyStateTreeListener = proxyStateTree.addMutationListener(
           this.paths,
-          () => {
+          (flushId) => {
+            eventHub.emit('derived', {
+              path,
+              paths: Array.from(this.paths),
+              updateCount: this.updateCount,
+              value: this.value,
+              flushId,
+            })
             this.isDirty = true
           }
         )
       }
-      eventHub.emit('derived', {
-        path,
-        paths: Array.from(this.paths),
-        updateCount: this.updateCount,
-        value: this.value,
-      })
       this.updateCount++
     }
 

packages/node_modules/overmind/src/index.ts

@@ -25,6 +25,7 @@ export interface Events {
     paths: string[]
     updateCount: number
     value: any
+    flushId?: number
   }
   computed: {
     path: string
@@ -34,6 +35,7 @@ export interface Events {
     limit: number
     cacheKeysCount: number
     cacheKeyIndex: number
+    flushId?: number
   }
   'reaction:add': {
     path: string
@@ -151,24 +153,35 @@ export default class App<
 
     /*
       Identify when the state tree should flush out changes
+
+      TODO:
+        - How should I know when an operator is connected to a flushId?
+        - Pass in operatorId on :async and set flushId directly?
+        - Store operatorId on the flush and check?
     */
-    actionChain.on('operator:async', () => {
+    actionChain.on('operator:async', (data) => {
+      const flushData = proxyStateTree.flush()
       if (this.devtools) {
         this.devtools.send({
           type: 'flush',
-          data: { mutations: proxyStateTree.mutations },
+          data: {
+            ...data,
+            ...flushData,
+          },
         })
       }
-      proxyStateTree.flush()
     })
-    actionChain.on('action:end', () => {
+    actionChain.on('action:end', (data) => {
+      const flushData = proxyStateTree.flush()
       if (this.devtools) {
         this.devtools.send({
           type: 'flush',
-          data: { mutations: proxyStateTree.mutations },
+          data: {
+            ...data,
+            ...flushData,
+          },
         })
       }
-      proxyStateTree.flush()
     })
 
     /*
@@ -197,7 +210,10 @@ export default class App<
     actionChain.on('action:start', (data) =>
       devtools.send({
         type: 'action:start',
-        data,
+        data: {
+          ...data,
+          value: safeValue(data.value),
+        },
       })
     )
     actionChain.on('operator:start', (data) =>
@@ -307,24 +323,39 @@ export default class App<
     }
   }
   private getActions(configuration, action) {
-    return typeof configuration.actions === 'function'
-      ? (configuration.actions as ActionsCallback<Providers, State>)(
-          action as IAction<State, Providers & { state: State }>
-        )
-      : (Object.keys(configuration.actions || {}).reduce(
-          (aggr, namespace) =>
-            Object.assign(
-              aggr,
-              configuration.actions[namespace]
-                ? {
-                    [namespace]: configuration.actions[namespace](
-                      action as IAction<State, Providers & { state: State }>
-                    ),
-                  }
-                : {}
-            ),
-          {}
-        ) as any)
+    const actions =
+      typeof configuration.actions === 'function'
+        ? (configuration.actions as ActionsCallback<Providers, State>)(
+            action as IAction<State, Providers & { state: State }>
+          )
+        : (Object.keys(configuration.actions || {}).reduce(
+            (aggr, namespace) =>
+              Object.assign(
+                aggr,
+                configuration.actions[namespace]
+                  ? {
+                      [namespace]: configuration.actions[namespace](
+                        action as IAction<State, Providers & { state: State }>
+                      ),
+                    }
+                  : {}
+              ),
+            {}
+          ) as any)
+
+    if (this.devtools) {
+      Object.keys(actions).forEach((key) => {
+        if (typeof configuration.actions === 'function') {
+          actions[key].displayName = key
+        } else {
+          Object.keys(actions[key]).forEach((subKey) => {
+            actions[key][subKey].displayName = key + '.' + subKey
+          })
+        }
+      })
+    }
+
+    return actions
   }
   trackState() {
     return this.proxyStateTree.startPathsTracking()

packages/node_modules/overmind/src/views/react.ts

@@ -100,9 +100,35 @@ export default class ReactApp<
         if (this.__mutationListener) {
           this.__mutationListener.update(paths)
         } else {
-          this.__mutationListener = instance.addMutationListener(paths, () => {
-            this.forceUpdate()
-          })
+          if (instance.devtools) {
+            instance.devtools.send({
+              type: 'component:add',
+              data: {
+                componentId,
+                componentInstanceId: this.props.app.__componentInstanceId,
+                name: Component.name || '',
+                paths: Array.from(paths),
+              },
+            })
+          }
+          this.__mutationListener = instance.addMutationListener(
+            paths,
+            (flushId) => {
+              if (instance.devtools) {
+                instance.devtools.send({
+                  type: 'component:update',
+                  data: {
+                    componentId,
+                    componentInstanceId: this.props.app.__componentInstanceId,
+                    name: Component.name || '',
+                    paths: Array.from(paths),
+                    flushId,
+                  },
+                })
+              }
+              this.forceUpdate()
+            }
+          )
         }
 
         return value
@@ -152,26 +178,38 @@ export default class ReactApp<
         )
         const paths = instance.clearTrackState(trackId)
 
-        if (instance.devtools) {
-          instance.devtools.send({
-            type: this.__mutationListener
-              ? 'component:update'
-              : 'component:add',
-            data: {
-              componentId,
-              componentInstanceId: this.__componentInstanceId,
-              name: Component.name || '',
-              paths: Array.from(paths),
-            },
-          })
-        }
-
         if (this.__mutationListener) {
           this.__mutationListener.update(paths)
         } else {
-          this.__mutationListener = instance.addMutationListener(paths, () => {
-            this.forceUpdate()
-          })
+          if (instance.devtools) {
+            instance.devtools.send({
+              type: 'component:add',
+              data: {
+                componentId,
+                componentInstanceId: this.__componentInstanceId,
+                name: Component.name || '',
+                paths: Array.from(paths),
+              },
+            })
+          }
+          this.__mutationListener = instance.addMutationListener(
+            paths,
+            (flushId) => {
+              if (instance.devtools) {
+                instance.devtools.send({
+                  type: 'component:update',
+                  data: {
+                    componentId,
+                    componentInstanceId: this.__componentInstanceId,
+                    name: Component.name || '',
+                    paths: Array.from(paths),
+                    flushId,
+                  },
+                })
+              }
+              this.forceUpdate()
+            }
+          )
         }
 
         return value