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 targetNgAfterViewChecked = target.prototype.ngAfterViewChecked
      const reactionFactory = instance.createReactionFactory(
        target.constructor.name
      )
      let currentTrackId
      let listener

      target.prototype.ngOnInit = function() {
        this.app = {
          state: instance.state,
          actions: instance.actions,
          reaction: reactionFactory.add,
        }
        this.__componentInstanceId = componentInstanceId++

        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.ngDoCheck = function() {
        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, {
            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)
        }
      }

      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 || '',
        })
        listener.dispose()
      }

      return target
    }
  }
}