index.ts

import OvermindApp, { BaseApp, EventType } from 'overmind'

export type TConnect<App extends BaseApp> = {
  app: {
    state: App['state']
    actions: App['actions']
    reaction: (
      name: string,
      stateCb: (state: App['state']) => any,
      Function
    ) => void
  }
}

let nextComponentId = 0

export default <App extends OvermindApp<any>>(app: App) => () => {
  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
    const reactionFactory = app.createReactionFactory(target.constructor.name)

    target.prototype.ngOnInit = function() {
      this.app = {
        state: app.state,
        actions: app.actions,
        reaction: reactionFactory.add,
      }
      this.__componentInstanceId = componentInstanceId++
      this.__shouldUpdatePaths = false
      this.__currentTrackId = null
      this.__listener = null

      if (targetNgOnInit) {
        targetNgOnInit.apply(target)
      }

      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.__currentTrackId = app.trackState()

      if (targetNgAfterContentInit) {
        targetNgAfterContentInit.apply(target)
      }
    }

    target.prototype.ngAfterViewInit = function() {
      const paths = app.clearTrackState(this.__currentTrackId)
      app.eventHub.emitAsync(EventType.COMPONENT_ADD, {
        componentId,
        componentInstanceId: this.__componentInstanceId,
        name: this.constructor.name || '',
        paths: Array.from(paths),
      })
      this.__listener = app.addMutationListener(paths, (flushId) => {
        this.cdr && this.cdr.markForCheck()
        this.__shouldUpdatePaths = true
        app.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 = app.trackState()
      }
      if (targetNgDoCheck) {
        targetNgDoCheck.apply(target)
      }
    }

    target.prototype.ngAfterViewChecked = function() {
      if (this.__shouldUpdatePaths) {
        const paths = app.clearTrackState(this.__currentTrackId)
        this.__listener.update(paths)
        this.__shouldUpdatePaths = false
        app.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
          componentId,
          componentInstanceId: this.__componentInstanceId,
          name: this.constructor.name || '',
          paths: Array.from(paths),
        })
      }
      if (targetNgAfterViewChecked) {
        targetNgAfterViewChecked.apply(target)
      }
    }

    let targetNgOnDestroy = target.prototype.ngOnDestroy

    target.prototype.ngOnDestroy = function() {
      if (targetNgOnDestroy) {
        targetNgOnDestroy.apply(target)
      }
      app.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
        componentId,
        componentInstanceId: this.__componentInstanceId,
        name: this.constructor.name || '',
      })
      this.__listener.dispose()
      this.__reactionFactory.dispose()
    }

    return target
  }
}