index.ts

import Vue, { ComponentOptions } from 'vue'
import OvermindApp, { EventType } from 'overmind'

export type TConnect<App extends OvermindApp<any, 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 <App extends OvermindApp<any, any>>(app: App) => <
  V extends Vue & App,
  Data extends DefaultData<V>,
  Methods extends DefaultMethods<V>,
  Computed extends DefaultComputed,
  PropsDef,
  Props extends DefaultProps
>(
  componentOptions: ComponentOptions<
    V,
    Data,
    Methods,
    Computed,
    PropsDef,
    Props
  >
): ComponentOptions<V, Data, Methods, Computed, PropsDef, Props> => {
  const componentId = nextComponentId++
  let componentInstanceId = 0
  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 = app.createReactionFactory(
      this.name || this.displayName
    )
    this.__componentInstanceId = componentInstanceId++
    this.app = {
      state: app.state,
      actions: app.actions,
      reaction: this.__reactionFactory.add,
    }
    this.__trackId = app.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 = app.clearTrackState(
      this.__trackId,
      mounted && mounted.bind(this)
    )
    app.eventHub.emitAsync(EventType.COMPONENT_ADD, {
      componentId,
      componentInstanceId: this.__componentInstanceId,
      name: componentOptions.name || this.name || '',
      paths: Array.from(paths),
    })
    this.__proxyStateTreeListener = app.addMutationListener(
      paths,
      (flushId) => {
        app.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 = app.trackState()
      nativeGetter.call(this, this)
      const paths = app.clearTrackState(trackId)
      this.__proxyStateTreeListener.update(paths)
      app.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
        componentId,
        componentInstanceId: this.__componentInstanceId,
        name: componentOptions.name || this.name || '',
        paths: Array.from(paths),
      })
    }
  }

  // When unmounting the component we dispose
  // of our listener
  componentOptions.beforeDestroy = function() {
    app.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
}

/*
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 app = 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 = app.createReactionFactory(
        this.name || this.displayName
      )
      this.__componentInstanceId = componentInstanceId++
      this.app = {
        state: app.state,
        actions: app.actions,
        reaction: this.__reactionFactory.add,
      }
      this.__trackId = app.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 = app.clearTrackState(
        this.__trackId,
        mounted && mounted.bind(this)
      )
      app.eventHub.emitAsync(EventType.COMPONENT_ADD, {
        componentId,
        componentInstanceId: this.__componentInstanceId,
        name: componentOptions.name || this.name || '',
        paths: Array.from(paths),
      })
      this.__proxyStateTreeListener = app.addMutationListener(
        paths,
        (flushId) => {
          app.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 = app.trackState()
        nativeGetter.call(this, this)
        const paths = app.clearTrackState(trackId)
        this.__proxyStateTreeListener.update(paths)
        app.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
          componentId,
          componentInstanceId: this.__componentInstanceId,
          name: componentOptions.name || this.name || '',
          paths: Array.from(paths),
        })
      }
    }

    // When unmounting the component we dispose
    // of our listener
    componentOptions.beforeDestroy = function() {
      app.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
  }
}
*/