index.ts

import { EventType, Overmind, TApp, Configuration } from 'overmind'

// @ts-ignore
import { NgZone } from '@angular/core'
import { IMutation } from 'proxy-state-tree'

export type TConnect<Config extends Configuration> = {
  state: TApp<Config>['state']
  actions: TApp<Config>['actions']
  addMutationListener: (cb: (mutation: IMutation) => void) => () => void
}

let nextComponentId = 0

export const createConnect = <A extends Overmind<any>>(overmind: A) => () => {
  const componentId = nextComponentId++
  let componentInstanceId = 0

  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

    target.prototype.ngOnInit = function() {
      const ngZ = new NgZone({ enableLongStackTrace: false })

      this.__tree = (overmind as any).proxyStateTree.getTrackStateTree()
      this.__currentFlushId = 0
      this.overmind = {
        state: this.__tree.state,
        actions: overmind.actions,
        addMutationListener: overmind.addMutationListener,
      }
      this.__shouldUpdatePaths = false
      this.__componentInstanceId = componentInstanceId++
      this.__onUpdate = (mutations, paths, flushId) => {
        this.__currentFlushId = flushId

        if (this.cdr) {
          this.cdr.markForCheck()
        }
        ngZ.run(() => {})
      }

      if (targetNgOnInit) {
        targetNgOnInit.call(this)
      }

      if (
        !this.cdr &&
        (!target['__annotations__'][0] ||
          target['__annotations__'][0].changeDetection === 0)
      ) {
        throw new Error(
          'overmind-angular ERROR: You have to inject the ChangeDetectionRef as "cdr" on the component. In the constructor, add argument: "private cdr: ChangeDetectorRef" '
        )
      }
    }

    target.prototype.ngAfterContentInit = function() {
      this.__tree.track(this.__onUpdate)

      if (targetNgAfterContentInit) {
        targetNgAfterContentInit.call(this)
      }
    }

    target.prototype.ngAfterViewInit = function() {
      overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
        componentId,
        componentInstanceId: this.__componentInstanceId,
        name: this.constructor.name || '',
        paths: Array.from(this.__tree.pathDependencies) as any,
      })

      if (targetNgAfterViewInit) {
        targetNgAfterViewInit.call(this)
      }
    }

    target.prototype.ngDoCheck = function() {
      if (this.__shouldUpdatePaths) {
        this.__tree.track(this.__onUpdate)
      }
      if (targetNgDoCheck) {
        targetNgDoCheck.call(this)
      }
    }

    target.prototype.ngAfterViewChecked = function() {
      if (this.__shouldUpdatePaths) {
        this.__shouldUpdatePaths = false
        overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
          componentId,
          componentInstanceId: this.__componentInstanceId,
          name: this.constructor.name || '',
          paths: Array.from(this.__tree.pathDependencies) as any,
          flushId: this.__currentFlushId,
        })
      }
      if (targetNgAfterViewChecked) {
        targetNgAfterViewChecked.call(this)
      }
    }

    let targetNgOnDestroy = target.prototype.ngOnDestroy

    target.prototype.ngOnDestroy = function() {
      overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
        componentId,
        componentInstanceId: this.__componentInstanceId,
        name: this.constructor.name || '',
      })
      const anyOvermind = overmind as any
      anyOvermind.proxyStateTree.disposeTree(this.__tree)

      if (targetNgOnDestroy) {
        targetNgOnDestroy.call(this)
      }
    }

    return target
  }
}