fix(overmind-angular): fix tracking updated paths, also notify devtools for all views

Author: christianalfoni

packages/node_modules/overmind-angular/src/index.ts

@@ -28,12 +28,12 @@ export default class VueApp<
     return function(target: any) {
       const targetNgOnInit = target.prototype.ngOnInit
       const targetNgDoCheck = target.prototype.ngDoCheck
+      const targetNgAfterContentInit = target.prototype.ngAfterContentInit
+      const targetNgAfterViewInit = target.prototype.ngAfterViewInit
       const targetNgAfterViewChecked = target.prototype.ngAfterViewChecked
       const reactionFactory = instance.createReactionFactory(
         target.constructor.name
       )
-      let currentTrackId
-      let listener
 
       target.prototype.ngOnInit = function() {
         this.app = {
@@ -42,6 +42,9 @@ export default class VueApp<
           reaction: reactionFactory.add,
         }
         this.__componentInstanceId = componentInstanceId++
+        this.__shouldUpdatePaths = false
+        this.__currentTrackId = null
+        this.__listener = null
 
         if (targetNgOnInit) {
           targetNgOnInit.apply(target)
@@ -58,36 +61,58 @@ export default class VueApp<
         }
       }
 
-      target.prototype.ngDoCheck = function() {
-        currentTrackId = instance.trackState()
+      target.prototype.ngAfterContentInit = function() {
+        this.__currentTrackId = instance.trackState()
+
+        if (targetNgAfterContentInit) {
+          targetNgAfterContentInit.apply(target)
+        }
+      }
 
+      target.prototype.ngAfterViewInit = function() {
+        const paths = instance.clearTrackState(this.__currentTrackId)
+        instance.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+          componentId,
+          componentInstanceId: this.__componentInstanceId,
+          name: this.constructor.name || '',
+          paths: Array.from(paths),
+        })
+        this.__listener = instance.addMutationListener(paths, (flushId) => {
+          this.cdr && this.cdr.markForCheck()
+          this.__shouldUpdatePaths = true
+          instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+            componentId,
+            componentInstanceId: this.__componentInstanceId,
+            name: this.constructor.name || '',
+            paths: Array.from(paths),
+            flushId,
+          })
+        })
+        if (targetNgAfterViewInit) {
+          targetNgAfterViewInit.apply(target)
+        }
+      }
+
+      target.prototype.ngDoCheck = function() {
+        if (this.__shouldUpdatePaths) {
+          this.__currentTrackId = instance.trackState()
+        }
         if (targetNgDoCheck) {
           targetNgDoCheck.apply(target)
         }
       }
 
       target.prototype.ngAfterViewChecked = function() {
-        const paths = instance.clearTrackState(currentTrackId)
-
-        if (listener) {
-          listener.update(paths)
-        } else {
-          instance.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+        if (this.__shouldUpdatePaths) {
+          const paths = instance.clearTrackState(this.__currentTrackId)
+          this.__listener.update(paths)
+          this.__shouldUpdatePaths = false
+          instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
             componentId,
             componentInstanceId: this.__componentInstanceId,
             name: this.constructor.name || '',
             paths: Array.from(paths),
           })
-          listener = instance.addMutationListener(paths, (flushId) => {
-            this.cdr && this.cdr.detectChanges()
-            instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
-              componentId,
-              componentInstanceId: this.__componentInstanceId,
-              name: this.constructor.name || '',
-              paths: Array.from(paths),
-              flushId,
-            })
-          })
         }
         if (targetNgAfterViewChecked) {
           targetNgAfterViewChecked.apply(target)
@@ -105,7 +130,8 @@ export default class VueApp<
           componentInstanceId: this.__componentInstanceId,
           name: this.constructor.name || '',
         })
-        listener.dispose()
+        this.__listener.dispose()
+        this.__reactionFactory.dispose()
       }
 
       return target

packages/node_modules/overmind-devtools/src/app/mutations.ts

@@ -148,16 +148,19 @@ export const performMutationsByMessageType: Mutate<Message> = (
         }`
 
         state.apps[message.port].components[id].paths = clientMessage.data.paths
-        state.apps[message.port].components[id].updateCount++
 
-        ensureFlushExists(
-          state.apps[message.port].flushes,
-          clientMessage.data.flushId
-        )
+        if (clientMessage.data.flushId) {
+          state.apps[message.port].components[id].updateCount++
 
-        state.apps[message.port].flushes[
-          clientMessage.data.flushId
-        ].components.push(id)
+          ensureFlushExists(
+            state.apps[message.port].flushes,
+            clientMessage.data.flushId
+          )
+
+          state.apps[message.port].flushes[
+            clientMessage.data.flushId
+          ].components.push(id)
+        }
         break
       }
       case 'component:remove': {

packages/node_modules/overmind-react/src/index.ts

@@ -106,6 +106,12 @@ export default class ReactApp<
 
         if (this.__mutationListener) {
           this.__mutationListener.update(paths)
+          instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+            componentId: this.__componentId,
+            componentInstanceId: this.props.app.__componentInstanceId,
+            name: Component.name || '',
+            paths: Array.from(paths),
+          })
         } else {
           instance.eventHub.emitAsync(EventType.COMPONENT_ADD, {
             componentId: this.__componentId,
@@ -184,6 +190,12 @@ export default class ReactApp<
 
         if (this.__mutationListener) {
           this.__mutationListener.update(paths)
+          instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+            componentId: this.__componentId,
+            componentInstanceId: this.__componentInstanceId,
+            name: Component.name || '',
+            paths: Array.from(paths),
+          })
         } else {
           instance.eventHub.emitAsync(EventType.COMPONENT_ADD, {
             componentId: this.__componentId,

packages/node_modules/overmind-vue/src/index.ts

@@ -123,6 +123,12 @@ export default class VueApp<
         nativeGetter.call(this, this)
         const paths = instance.clearTrackState(trackId)
         this.__proxyStateTreeListener.update(paths)
+        instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+          componentId,
+          componentInstanceId: this.__componentInstanceId,
+          name: componentOptions.name || this.name || '',
+          paths: Array.from(paths),
+        })
       }
       mounted && mounted.call(this)
     }

packages/node_modules/overmind/src/index.ts

@@ -305,7 +305,7 @@ export interface Events {
     componentInstanceId: number
     name: string
     paths: string[]
-    flushId: number
+    flushId?: number
   }
   [EventType.COMPONENT_REMOVE]: {
     componentId: number