index.ts

import Vue, { ComponentOptions } from 'vue'
import App, { ActionsCallback, ReactionsCallback, EventType } from 'overmind'

export * from 'overmind'

export type TConnect<State = {}, Actions = {}> = {
  app: {
    state: State
    actions: Actions
    reaction: (name: string, stateCb: (state: State) => any, Function) => void
  }
}

type DefaultData<V> = object | ((this: V) => object)
type DefaultProps = Record<string, any>
type DefaultMethods<V> = { [key: string]: (this: V, ...args: any[]) => any }
type DefaultComputed = { [key: string]: any }

let nextComponentId = 0

export default class VueApp<
  State extends object,
  Effects extends object,
  Reactions extends ReactionsCallback<State, any>,
  Actions extends
    | {
        [namespace: string]: ActionsCallback<State, Effects>
      }
    | ActionsCallback<State, Effects>
> extends App<State, Effects, Reactions, Actions> {
  connect = <
    V extends Vue & {
      app: {
        state: State
        actions: ConnectedActions
      }
    },
    Data extends DefaultData<V>,
    Methods extends DefaultMethods<V>,
    Computed extends DefaultComputed,
    PropsDef,
    Props extends DefaultProps,
    ConnectedActions = Actions extends {
      [namespace: string]: ActionsCallback<Effects, State>
    }
      ? { [Namespace in keyof Actions]: ReturnType<Actions[Namespace]> }
      : Actions extends ActionsCallback<Effects, State>
        ? ReturnType<Actions>
        : any
  >(
    componentOptions: ComponentOptions<
      V,
      Data,
      Methods,
      Computed,
      PropsDef,
      Props
    >
  ): ComponentOptions<V, Data, Methods, Computed, PropsDef, Props> => {
    const componentId = nextComponentId++
    let componentInstanceId = 0
    const instance = this
    const beforeMount = componentOptions.beforeMount
    const mounted = componentOptions.mounted
    const beforeDestroy = componentOptions.beforeDestroy

    // When mounting we start tracking paths being
    // used in the proxy-state-tree and attach
    // the state to the component as "store",
    // allowing templates to access it
    componentOptions.beforeMount = function() {
      this.__reactionFactory = instance.createReactionFactory(
        this.name || this.displayName
      )
      this.__componentInstanceId = componentInstanceId++
      this.app = {
        state: instance.state,
        actions: instance.actions,
        reaction: this.__reactionFactory.add,
      }
      this.__trackId = instance.trackState()
      beforeMount && beforeMount.call(this)
    }

    // When mounted we stop tracking paths and
    // subscribe to mutation changes, giving
    // a callback that runs whenever a mutation
    // matches the paths tracked on this component
    componentOptions.mounted = function() {
      const paths = instance.clearTrackState(this.__trackId)
      instance.eventHub.emitAsync(EventType.COMPONENT_ADD, {
        componentId,
        componentInstanceId: this.__componentInstanceId,
        name: componentOptions.name || this.name || '',
        paths: Array.from(paths),
      })
      this.__proxyStateTreeListener = instance.addMutationListener(
        paths,
        (flushId) => {
          instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
            componentId,
            componentInstanceId: this.__componentInstanceId,
            name: componentOptions.name || this.name || '',
            paths: Array.from(paths),
            flushId,
          })
          this.$forceUpdate()
        }
      )
      delete this.__trackId
      const nativeGetter = this._watcher.getter
      this._watcher.getter = () => {
        const trackId = instance.trackState()
        nativeGetter.call(this, this)
        const paths = instance.clearTrackState(trackId)
        this.__proxyStateTreeListener.update(paths)
      }
      mounted && mounted.call(this)
    }

    // When unmounting the component we dispose
    // of our listener
    componentOptions.beforeDestroy = function() {
      instance.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
        componentId,
        componentInstanceId: this.__componentInstanceId,
        name: componentOptions.name || this.name || '',
      })

      this.__proxyStateTreeListener && this.__proxyStateTreeListener.dispose()
      this.__reactionFactory && this.__reactionFactory.dispose()
      beforeDestroy && beforeDestroy.call(this)
    }

    return componentOptions as any
  }
}