index.ts

import { Overmind, EventType } from 'overmind'
import { BehaviorSubject, Observable } from 'rxjs'
import { map } from 'rxjs/operators'
import { IS_PROXY } from 'proxy-state-tree'

class ServiceBase {}

// @ts-ignore
const IS_PRODUCTION = process.env.NODE_ENV === 'production'

let nextComponentId = 0

const Track = (Component) => {
  const componentId = nextComponentId++
  let componentInstanceId = 0

  function findService(target) {
    return Object.keys(target).find((key) => target[key] instanceof ServiceBase)
  }

  if (!IS_PRODUCTION) {
    const targetNgOnInit = Component.prototype.ngOnInit
    Component.prototype.ngOnInit = function() {
      if (
        !Component['__annotations__'][0] ||
        Component['__annotations__'][0].changeDetection !== 0
      ) {
        throw new Error(
          'OVERMIND: You have to add ChangeDetectionStrategy.OnPush on component ' +
            Component.name
        )
      }
      targetNgOnInit && targetNgOnInit.call(this)
    }
    const targetNgAfterViewInit = Component.prototype.ngAfterViewInit
    Component.prototype.ngAfterViewInit = function() {
      const service = this[findService(this)]

      if (!service) {
        throw new Error(
          'OVERMIND - You have not added the Overmind service to component ' +
            Component.name
        )
      }

      service.addComponent({
        componentId,
        componentInstanceId: componentInstanceId++,
        name: Component.name,
      })

      targetNgAfterViewInit && targetNgAfterViewInit.call(this)
    }
  }

  const targetNgOnChanges = Component.prototype.ngOnChanges
  Component.prototype.ngOnChanges = function(changes) {
    const service = this[findService(this)]

    for (let key in changes) {
      if (changes[key].currentValue[IS_PROXY]) {
        this[key] = service.tree.master.rescope(
          changes[key].currentValue,
          service.tree
        )
      }
    }
    targetNgOnChanges && targetNgOnChanges.call(this, changes)
  }
}

interface IService<App extends Overmind<any>> {
  new (): {
    actions: App['actions']
    effects: App['effects']
    addMutationListener: App['addMutationListener']
    select<T>(expr: (state: App['state']) => T): Observable<T>
    select(): Observable<App['state']>
  }
  Track
}

export function createService<App extends Overmind<any>>(
  overmind: App
): IService<App> {
  return class Service extends ServiceBase {
    static Track = Track
    private tree: any
    private state$: Observable<any>
    private subject: BehaviorSubject<any>
    private overmind: App
    private componentDetails: any
    actions: App['actions']
    effects: App['effects']
    addMutationListener: App['addMutationListener']
    constructor() {
      super()
      this.tree = (overmind as any).proxyStateTree.getTrackStateTreeWithProxifier()
      this.subject = new BehaviorSubject(this.tree.state)
      this.state$ = this.subject.asObservable()
      this.overmind = overmind

      this.actions = this.overmind.actions
      this.addMutationListener = this.overmind.addMutationListener

      this.tree.track(this.onUpdate)

      if (!IS_PRODUCTION) {
        ;(window['__zone_symbol__setTimeout'] || setTimeout)(() => {
          if (!this.componentDetails) {
            throw new Error(
              'OVERMIND - You have added a service without adding the Track decorator'
            )
          }
        })
      }
    }
    private addComponent(componentDetails) {
      if (this.componentDetails) {
        throw new Error(
          'OVERMIND - This service is already instantiated, you have to provide it as well with providers: [OvermindService] on ' +
            this.componentDetails.name
        )
      }
      this.componentDetails = componentDetails
      this.overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
        componentId: componentDetails.componentId,
        componentInstanceId: componentDetails.componentInstanceId,
        name: componentDetails.name,
        paths: Array.from(this.tree.pathDependencies) as any,
      })
    }
    private onUpdate = (mutations, paths, flushId) => {
      this.tree.track(this.onUpdate)
      this.subject.next(this.tree.state)
      if (this.componentDetails) {
        ;(window['__zone_symbol__setTimeout'] || setTimeout)(() => {
          this.overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
            componentId: this.componentDetails.componentId,
            componentInstanceId: this.componentDetails.componentInstanceId,
            name: this.componentDetails.name,
            paths: Array.from(this.tree.pathDependencies) as any,
            flushId,
          })
        })
      }
    }
    private ngOnDestroy() {
      ;(this.overmind as any).proxyStateTree.disposeTree(this.tree)
      if (this.componentDetails) {
        this.overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
          componentId: this.componentDetails.componentId,
          componentInstanceId: this.componentDetails.componentInstanceId,
          name: this.componentDetails.name,
        })
      }
    }
    select<T>(expr: (state: App['state']) => T): Observable<T>
    select(): Observable<App['state']>
    select() {
      const args = arguments
      return this.state$.pipe(
        map((value) => (args[0] ? args[0](value) : value))
      )
    }
  }
}