refactor(overmind): clean up events and fire them async

Author: christianalfoni

packages/node_modules/overmind/src/Action.ts

@@ -68,7 +68,7 @@ export default class Action<
       this.proxyStateTree.startMutationTracking()
       cb(effects.state, value)
       const mutations = this.proxyStateTree.clearMutationTracking()
-      this.getActionChain().emit('mutations', {
+      this.getActionChain().emitAsync('mutations', {
         mutations,
         ...effects.__execution,
       })

packages/node_modules/overmind/src/computed.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from 'betsy'
 import ProxyStateTree from 'proxy-state-tree'
-import { Events } from './'
+import { Events, EventType } from './'
 
 type ComputedOptions = {
   cacheLimit?: number
@@ -60,7 +60,7 @@ export class Computed {
           cache.proxyStateTreeListener = proxyStateTree.addMutationListener(
             cache.paths,
             (flushId) => {
-              eventHub.emit('computed:dirty', {
+              eventHub.emitAsync(EventType.COMPUTED_DIRTY, {
                 path,
                 flushId,
               })
@@ -75,14 +75,15 @@ export class Computed {
           proxyStateTree.addTrackingPath(path)
         }
 
-        eventHub.emit('computed', {
+        eventHub.emitAsync(EventType.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: Array.from(this.cache.values()).map((cache) => ({
+            value: cache.value,
+            updateCount: cache.updateCount,
+            paths: Array.from(cache.paths),
+          })),
         })
 
         return cache.value

packages/node_modules/overmind/src/derived.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from 'betsy'
 import ProxyStateTree from 'proxy-state-tree'
-import { Events } from './'
+import { Events, EventType } from './'
 
 class Derived {
   isDirty: boolean
@@ -33,15 +33,15 @@ class Derived {
         this.proxyStateTreeListener = proxyStateTree.addMutationListener(
           this.paths,
           (flushId) => {
-            eventHub.emit('derived:dirty', {
+            eventHub.emitAsync(EventType.DERIVED_DIRTY, {
               path,
               flushId,
             })
             this.isDirty = true
           }
         )
       }
-      eventHub.emit('derived', {
+      eventHub.emitAsync(EventType.DERIVED, {
         path,
         paths: Array.from(this.paths),
         updateCount: this.updateCount,

packages/node_modules/overmind/src/index.ts

@@ -19,45 +19,79 @@ type Options = {
   devtools?: string
 }
 
+type CacheMessage = {
+  value: any
+  paths: string[]
+  updateCount: number
+}
+
+export enum EventType {
+  DERIVED = 'derived',
+  DERIVED_DIRTY = 'derived:dirty',
+  COMPUTED = 'computed',
+  COMPUTED_DIRTY = 'computed:dirty',
+  REACTION_ADD = 'reaction:add',
+  REACTION_UPDATE = 'reaction:update',
+  REACTION_REMOVE = 'reaction:remove',
+  COMPONENT_ADD = 'component:add',
+  COMPONENT_UPDATE = 'component:update',
+  COMPONENT_REMOVE = 'component:remove',
+}
+
 export interface Events {
-  derived: {
+  [EventType.DERIVED]: {
     path: string
     paths: string[]
     updateCount: number
     value: any
   }
-  'derived:dirty': {
+  [EventType.DERIVED_DIRTY]: {
     path: string
     flushId: number
   }
-  computed: {
+  [EventType.COMPUTED]: {
     path: string
-    paths: string[]
     updateCount: number
-    value: any
+    cache: CacheMessage[]
     limit: number
-    cacheKeysCount: number
-    cacheKeyIndex: number
   }
-  'computed:dirty': {
+  [EventType.COMPUTED_DIRTY]: {
     path: string
     flushId: number
   }
-  'reaction:add': {
+  [EventType.REACTION_ADD]: {
     path: string
     statePath: string
     updateCount: number
   }
-  'reaction:update': {
+  [EventType.REACTION_UPDATE]: {
     path: string
     statePath: string
     updateCount: number
   }
-  'reaction:remove': {
+  [EventType.REACTION_REMOVE]: {
     path: string
     statePath: string
     updateCount: number
   }
+  [EventType.COMPONENT_ADD]: {
+    componentId: number
+    componentInstanceId: number
+    name: string
+    paths: string[]
+  }
+  [EventType.COMPONENT_UPDATE]: {
+    componentId: number
+    componentInstanceId: number
+    name: string
+    paths: string[]
+    flushId: number
+  }
+  [EventType.COMPONENT_REMOVE]: {
+    componentId: number
+    componentInstanceId: number
+    name: string
+  }
 }
 
 export type ActionsCallback<Effects, State> = (
@@ -94,7 +128,7 @@ export default class App<
       }
 > {
   private proxyStateTree: ProxyStateTree
-  private eventHub: EventEmitter<Events>
+  eventHub: EventEmitter<Events>
   devtools: Devtools
   actions: Actions extends ActionsCallback<Effects, State>
     ? ReturnType<Actions>
@@ -207,12 +241,6 @@ export default class App<
         // To use for communication from devtools app
       }
     )
-    devtools.send({
-      type: 'init',
-      data: {
-        state: proxyStateTree.get(),
-      },
-    })
     actionChain.on('action:start', (data) =>
       devtools.send({
         type: 'action:start',
@@ -255,48 +283,22 @@ export default class App<
         data,
       })
     )
-    eventHub.on('derived', (data) =>
-      devtools.send({
-        type: 'derived',
-        data,
-      })
-    )
-    eventHub.on('derived:dirty', (data) =>
-      devtools.send({
-        type: 'derived:dirty',
-        data,
-      })
-    )
-    eventHub.on('computed', (data) =>
-      devtools.send({
-        type: 'computed',
-        data,
-      })
-    )
-    eventHub.on('computed:dirty', (data) =>
-      devtools.send({
-        type: 'computed:dirty',
-        data,
-      })
-    )
-    eventHub.on('reaction:add', (data) =>
-      devtools.send({
-        type: 'reaction:add',
-        data,
-      })
-    )
-    eventHub.on('reaction:update', (data) =>
-      devtools.send({
-        type: 'reaction:update',
-        data,
-      })
-    )
-    eventHub.on('reaction:remove', (data) =>
-      devtools.send({
-        type: 'reaction:remove',
-        data,
-      })
-    )
+    for (let type in EventType) {
+      eventHub.on(EventType[type], (data) =>
+        devtools.send({
+          type: EventType[type],
+          data,
+        })
+      )
+    }
+    // This message is always the first as it is passed synchronously, all other
+    // events are emitted async
+    devtools.send({
+      type: 'init',
+      data: {
+        state: proxyStateTree.get(),
+      },
+    })
     this.devtools = devtools
   }
   private initializeReactions(configuration, eventHub, proxyStateTree, action) {

packages/node_modules/overmind/src/reaction.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from 'betsy'
 import ProxyStateTree from 'proxy-state-tree'
-import { Events } from './'
+import { Events, EventType } from './'
 import { INoValueAction } from './Action'
 
 export type ReactionConfig<State, Providers> = (
@@ -38,7 +38,7 @@ class Reaction<State, Providers> {
         for (let mutationIndex in mutations) {
           const mutation = mutations[mutationIndex]
           if (mutation.path.indexOf(this.statePath) === 0) {
-            this.eventHub.emit('reaction:update', {
+            this.eventHub.emitAsync(EventType.REACTION_UPDATE, {
               path: this.path,
               statePath: this.statePath,
               updateCount: ++this.updateCount,
@@ -49,14 +49,14 @@ class Reaction<State, Providers> {
       }
     )
 
-    this.eventHub.emit('reaction:add', {
+    this.eventHub.emitAsync(EventType.REACTION_ADD, {
       path: this.path,
       statePath: this.statePath,
       updateCount: this.updateCount,
     })
   }
   destroy() {
-    this.eventHub.emit('reaction:remove', {
+    this.eventHub.emitAsync(EventType.REACTION_REMOVE, {
       path: this.path,
       statePath: this.statePath,
       updateCount: this.updateCount,