component.ts

import { EventType } from 'overmind'
import { h } from 'snabbdom/h'
import { VNode, VNodeData } from 'snabbdom/vnode'

import { getApp, getName, patch } from './utils'

const SELF = 'self'

let nextId = 0
let nextComponentId = {}
let nextComponentInstanceId = {}

function copyToComponent(vnode: VNode, cnode: VNode, component) {
  ;(vnode.data as VNodeData).fn = (cnode.data as VNodeData).fn
  cnode.text = vnode.text
  cnode.elm = vnode.elm
  cnode.children = vnode.children

  cnode.data = {
    ...vnode.data,
    on: {
      ...(vnode.data as any).on,
    },
    hook: {
      ...(vnode.data as any).hook,
      prepatch,
      postpatch,
      destroy,
    },
    component,
  }

  component.currentNode = cnode
}

function init(componentNode: VNode): void {
  try {
    const component = (componentNode.data as VNodeData).component
    const name = component.name
    const tree = (component.tree = getApp().proxyStateTree.getTrackStateTree())

    component.state = component.fn.getInitialState
      ? component.fn.getInitialState(component.props)
      : {}
    component.currentNode = componentNode
    component.changeState = (newState) => {
      Object.assign(component.state, newState)
      patch(component.currentNode, {
        ...component.currentNode,
        forceUpdate: true,
      })
    }

    const createSelfNode = () => {
      const node = (component.fn as any)(component.props, {
        changeState: component.changeState,
        state: component.state,
        appState: tree.state,
        actions: getApp().actions,
        reaction: getApp().reaction,
      })

      if (node.sel !== SELF) {
        throw new Error(
          `You are not returning a <self /> element from the component ${name} `
        )
      }

      return node
    }
    component.onFlush = (_, __, flushId) => {
      patch(component.currentNode, {
        ...component.currentNode,
        flushId: flushId,
      })
    }
    tree.track(component.onFlush)
    const newNode = createSelfNode()
    tree.stopTracking()

    copyToComponent(newNode, componentNode, component)

    if (!(name in nextComponentId)) {
      nextComponentId[name] = nextId++
    }
    if (!(name in nextComponentInstanceId)) {
      nextComponentInstanceId[name] = 0
    }

    nextComponentInstanceId[name] = nextId++

    const componentId = nextComponentId
    const componentInstanceId = nextComponentInstanceId[name]

    Object.assign(component, {
      componentId,
      componentInstanceId,
    })

    getApp().eventHub.emitAsync(EventType.COMPONENT_ADD, {
      componentId,
      componentInstanceId,
      name,
      paths: Array.from(tree.pathDependencies) as any,
    })
  } catch (error) {
    console.log(error.message)
  }
}

function prepatch(oldVnode: VNode, vnode: VNode): void {
  const oldComponent = (oldVnode.data as VNodeData).component || {}
  const newComponent = (vnode.data as VNodeData).component || {}
  const oldProps = oldComponent.props || {}
  const props = newComponent.props || {}
  const oldPropsKeys = Object.keys(oldProps)
  const propsKeys = Object.keys(props)
  const overmind = {
    changeState: oldComponent.changeState,
    state: oldComponent.state,
    appState: oldComponent.tree.state,
    actions: getApp().actions,
    reaction: getApp().reaction,
  }

  oldVnode.children = oldComponent.currentNode.children

  if ((vnode as any).flushId || (vnode as any).forceUpdate) {
    oldComponent.tree.track(oldComponent.onFlush)
    const newNode = (newComponent.fn as any)(props, overmind)
    oldComponent.tree.stopTracking()

    copyToComponent(newNode, vnode, Object.assign(oldComponent, newComponent))
    return
  }

  if (
    oldComponent.fn !== newComponent.fn ||
    oldPropsKeys.length !== propsKeys.length
  ) {
    oldComponent.tree.track(oldComponent.onFlush)
    const newNode = (newComponent.fn as any)(props, overmind)
    oldComponent.tree.stopTracking()
    copyToComponent(newNode, vnode, Object.assign(oldComponent, newComponent))

    return
  }

  const keys = new Set<string>([...oldPropsKeys, ...propsKeys])

  for (let key of keys) {
    if (oldProps[key] !== props[key]) {
      oldComponent.tree.track(oldComponent.onFlush)
      const newNode = (newComponent.fn as any)(props, overmind)
      oldComponent.tree.stopTracking()
      copyToComponent(newNode, vnode, Object.assign(oldComponent, newComponent))
      return
    }
  }

  copyToComponent(oldVnode, vnode, Object.assign(oldComponent, newComponent))
}

function postpatch(_, nextNode) {
  try {
    const component = nextNode.data.component
    if (nextNode.flushId) {
      getApp().eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
        componentId: component.componentId,
        componentInstanceId: component.componentInstanceId,
        name: component.name,
        flushId: component.flushId,
        paths: Array.from(component.tree.pathDependencies) as any,
      })
    }
  } catch (error) {
    console.log(error.message)
  }
}

function destroy(node) {
  try {
    node.children = node.data.component.currentNode.children
    getApp().proxyStateTree.disposeTree(node.data.component.tree)
  } catch (error) {
    console.log(error.message)
  }
}

export const component = (component, props, children) => {
  const name = getName(component.name)

  return h(name, {
    key: props ? props.key : undefined,
    hook: {
      init,
      prepatch,
      postpatch,
      destroy,
    },
    component: {
      fn: component,
      name,
      props: {
        ...props,
        children: children.length ? children : null,
      },
    },
  })
}