index.ts

import OvermindApp, { BaseApp, EventType } from 'overmind'
import * as React from 'react'

export type IReactComponent<P = any> =
  | React.StatelessComponent<P>
  | React.ComponentClass<P>
  | React.ClassicComponentClass<P>

// Diff / Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766
type Omit<T, K extends keyof T> = Pick<
  T,
  ({ [P in keyof T]: P } &
    { [P in K]: never } & { [x: string]: never; [x: number]: never })[keyof T]
>

export type TConnect<App extends BaseApp> = {
  app: {
    state: App['state']
    actions: App['actions']
    reaction: (
      name: string,
      stateCb: (state: App['state']) => any,
      Function
    ) => void
  }
}

let nextComponentId = 0

export default <App extends OvermindApp<any>>(app: App) => {
  return <Props>(
    Component: IReactComponent<Props & TConnect<App>>
  ): IReactComponent<Omit<Props & TConnect<App>, keyof TConnect<App>>> => {
    let componentInstanceId = 0
    const isClassComponent =
      Component.prototype && typeof Component.prototype.render === 'function'

    if (isClassComponent) {
      const originalRender = Component.prototype.render
      const originalWillUnmount = Component.prototype.componentWillUnmount

      Component.prototype.componentWillUnmount = function() {
        this.__isUnmounting = true
        if (this.__mutationListener) {
          app.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
            componentId: this.__componentId,
            componentInstanceId: this.props.app.__componentInstanceId,
            name: Component.name || '',
          })

          this.__mutationListener.dispose()
        }
        originalWillUnmount && originalWillUnmount.call(this)
      }
      Component.prototype.render = function() {
        if (typeof this.__componentId === 'undefined') {
          this.__componentId = nextComponentId++
        }
        const trackId = app.trackState()
        const value = originalRender.call(this)
        const paths = app.clearTrackState(trackId)

        if (this.__mutationListener) {
          this.__mutationListener.update(paths)
          app.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
            componentId: this.__componentId,
            componentInstanceId: this.props.app.__componentInstanceId,
            name: Component.name || '',
            paths: Array.from(paths),
          })
        } else {
          app.eventHub.emitAsync(EventType.COMPONENT_ADD, {
            componentId: this.__componentId,
            componentInstanceId: this.props.app.__componentInstanceId,
            name: Component.name || '',
            paths: Array.from(paths),
          })
          this.__mutationListener = app.addMutationListener(
            paths,
            (flushId) => {
              if (this.__isUnmounting) {
                return
              }
              app.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
                componentId: this.__componentId,
                componentInstanceId: this.props.app.__componentInstanceId,
                name: Component.name || '',
                paths: Array.from(paths),
                flushId,
              })
              this.forceUpdate()
            }
          )
        }

        return value
      }
    }

    const klass = class extends React.PureComponent<
      Omit<Props & TConnect<App>, keyof TConnect<App>>
    > {
      __mutationListener: any
      __isUnmounting: boolean
      __componentId: number
      __componentInstanceId = componentInstanceId++
      __reactionFactory = app.createReactionFactory(
        Component.name || Component.displayName
      )
      componentWillUnmount() {
        this.__isUnmounting = true
        if (this.__mutationListener) {
          app.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
            componentId: this.__componentId,
            componentInstanceId: this.__componentInstanceId,
            name: Component.name || '',
          })
          this.__mutationListener.dispose()
        }
        this.__reactionFactory.dispose()
      }
      renderStatelessComponent() {
        const trackId = app.trackState()
        const value = (Component as any)(
          Object.assign({}, this.props, {
            app: {
              state: app.state,
              actions: app.actions,
              reaction: this.__reactionFactory.add,
              __componentInstanceId: this.__componentInstanceId,
            },
          }),
          this.context
        )
        const paths = app.clearTrackState(trackId)

        if (this.__mutationListener) {
          this.__mutationListener.update(paths)
          app.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
            componentId: this.__componentId,
            componentInstanceId: this.__componentInstanceId,
            name: Component.name || '',
            paths: Array.from(paths),
          })
        } else {
          app.eventHub.emitAsync(EventType.COMPONENT_ADD, {
            componentId: this.__componentId,
            componentInstanceId: this.__componentInstanceId,
            name: Component.name || '',
            paths: Array.from(paths),
          })
          this.__mutationListener = app.addMutationListener(
            paths,
            (flushId) => {
              if (this.__isUnmounting) {
                return
              }
              app.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
                componentId: this.__componentId,
                componentInstanceId: this.__componentInstanceId,
                name: Component.name || '',
                paths: Array.from(paths),
                flushId,
              })
              this.forceUpdate()
            }
          )
        }

        return value
      }
      renderClassComponent() {
        return React.createElement(Component, Object.assign({}, this.props, {
          app: {
            state: app.state,
            actions: app.actions,
            reaction: this.__reactionFactory.add,
            __componentInstanceId: this.__componentInstanceId,
          },
        }) as any)
      }
      render() {
        if (isClassComponent) {
          return this.renderClassComponent()
        }

        if (typeof this.__componentId === 'undefined') {
          this.__componentId = nextComponentId++
        }

        return this.renderStatelessComponent()
      }
    }

    Object.defineProperties(klass, {
      name: { value: Component.displayName || Component.name || '' },
    })
    return klass
  }
}