index.ts

import Vue, { ComponentOptions } from 'vue'
import App, {
  ActionCallback,
  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
  }
}

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<
  Config extends Configuration,
  EvalConfig extends TConfig<Config>
> extends App<Config, EvalConfig> {
  connect = <
    V extends Vue & {
      app: {
        state: EvalConfig['state']
        actions: ConnectedActions
      }
    },
    Data extends DefaultData<V>,
    Methods extends DefaultMethods<V>,
    Computed extends DefaultComputed,
    PropsDef,
    Props extends DefaultProps,
    ConnectedActions = {
      [T in keyof EvalConfig['actions']]: EvalConfig['actions'][T] extends ActionCallback<
        EvalConfig
      >
        ? ReturnType<EvalConfig['actions'][T]>
        : {
            [P in keyof EvalConfig['actions'][T]]: EvalConfig['actions'][T][P] extends ActionCallback<
              EvalConfig
            >
              ? ReturnType<EvalConfig['actions'][T][P]>
              : undefined
          }
    }
  >(
    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
  }
}