index.ts

import App, { EventType, Configuration, TConfig } from 'overmind'

export * from 'overmind'

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

let nextComponentId = 0

export default class VueApp<
  Config extends Configuration,
  EvalConfig extends TConfig<Config>
> extends App<Config, EvalConfig> {
  connect = () => {
    const componentId = nextComponentId++
    let componentInstanceId = 0
    const instance = this

    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
      )

      target.prototype.ngOnInit = function() {
        this.app = {
          state: instance.state,
          actions: instance.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 = 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() {
        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),
          })
        }
        if (targetNgAfterViewChecked) {
          targetNgAfterViewChecked.apply(target)
        }
      }

      let targetNgOnDestroy = target.prototype.ngOnDestroy

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

      return target
    }
  }
}