index.ts

import * as React from 'react'
import App, { ActionsCallback, ReactionsCallback, EventType } from 'overmind'

export * from 'overmind'

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

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

// 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]
>

let nextComponentId = 0

export default class ReactApp<
  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 = <
    Props,
    ConnectedActions = Actions extends {
      [namespace: string]: ActionsCallback<Effects, State>
    }
      ? { [Namespace in keyof Actions]: ReturnType<Actions[Namespace]> }
      : Actions extends ActionsCallback<Effects, State>
        ? ReturnType<Actions>
        : any
  >(
    Component: IReactComponent<Props & TConnect<State, ConnectedActions>>
  ): IReactComponent<
    Omit<
      Props & TConnect<State, ConnectedActions>,
      keyof TConnect<State, ConnectedActions>
    >
  > => {
    const componentId = nextComponentId++
    let componentInstanceId = 0
    const instance = this
    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() {
        if (this.__mutationListener) {
          instance.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
            componentId,
            componentInstanceId: this.props.app.__componentInstanceId,
            name: Component.name || '',
          })

          this.__mutationListener.dispose()
        }
        originalWillUnmount && originalWillUnmount.call(this)
      }
      Component.prototype.render = function() {
        const trackId = instance.trackState()
        const value = originalRender.call(this)
        const paths = instance.clearTrackState(trackId)

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

        return value
      }
    }

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

        if (this.__mutationListener) {
          this.__mutationListener.update(paths)
        } else {
          instance.eventHub.emitAsync(EventType.COMPONENT_ADD, {
            componentId,
            componentInstanceId: this.__componentInstanceId,
            name: Component.name || '',
            paths: Array.from(paths),
          })
          this.__mutationListener = instance.addMutationListener(
            paths,
            (flushId) => {
              instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
                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: instance.state,
            actions: instance.actions,
            reaction: this.__reactionFactory.add,
            __componentInstanceId: this.__componentInstanceId,
          },
        }) as any)
      }
      render() {
        if (isClassComponent) {
          return this.renderClassComponent()
        }

        return this.renderStatelessComponent()
      }
    }
  }
}