chore(overmind-components): more refactoring

Author: christianalfoni

package-lock.json

@@ -0,0 +1,186 @@
+import { EventType } from 'overmind'
+import { h } from 'snabbdom/h'
+import { VNode, VNodeData } from 'snabbdom/vnode'
+
+import { getApp, getName, patch } from './utils'
+
+const SELF = 'self'
+
+function copyVNode(source: VNode, target: VNode): void {
+  target.elm = source.elm
+
+  target.data = source.data
+  target.children = source.children
+  target.text = source.text
+  target.elm = source.elm
+}
+
+let nextId = 0
+let nextComponentId = {}
+let nextComponentInstanceId = {}
+
+function init(componentVNode: VNode): void {
+  try {
+    const component = (componentVNode.data as VNodeData).component
+    const name = component.name
+    const tree = component.tree
+    let currentNode = componentVNode
+
+    function createComponentVNode(newState) {
+      return (component.fn as any)(component.props, {
+        changeState: update,
+        state:
+          typeof newState === 'undefined'
+            ? (currentNode.data as VNodeData).component.state
+            : newState,
+        store: tree.state,
+        actions: getApp().actions,
+      })
+    }
+
+    function update(newState?) {
+      tree.track(onFlush)
+      try {
+        currentNode.elm = componentVNode.elm
+        const newNode = createComponentVNode(newState)
+        newNode.elm = componentVNode.elm
+        currentNode = patch(currentNode, newNode)
+        currentNode.elm = componentVNode.elm
+      } catch (error) {
+        console.log(name, error.message, currentNode)
+      }
+      ;(currentNode.data as any).component = (componentVNode.data as any).component
+      copyVNode(currentNode, componentVNode)
+      tree.stopTracking()
+    }
+
+    function onFlush(_, __, flushId) {
+      update()
+
+      getApp().eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+        componentId: (currentNode.data as any).component.componentId,
+        componentInstanceId: (currentNode.data as any).component
+          .componentInstanceId,
+        name,
+        flushId,
+        paths: Array.from(tree.pathDependencies) as any,
+      })
+    }
+    tree.track(onFlush)
+    currentNode = createComponentVNode(undefined)
+    ;(currentNode.data as any).component = (componentVNode.data as any).component
+
+    if (currentNode.sel !== SELF) {
+      throw new Error(
+        `You are not returning a <self /> element from the component ${name} `
+      )
+    }
+    tree.stopTracking()
+    copyVNode(currentNode, componentVNode)
+
+    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 {
+  try {
+    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: newComponent.changeState,
+      state: newComponent.state,
+      store: newComponent.tree.state,
+      actions: getApp().actions,
+    }
+
+    if (
+      oldComponent.fn !== newComponent.fn ||
+      oldPropsKeys.length !== propsKeys.length
+    ) {
+      copyVNode((newComponent.fn as any)(props, overmind), vnode)
+      return
+    }
+
+    const keys = new Set<string>([...oldPropsKeys, ...propsKeys])
+
+    for (let key of keys) {
+      if (oldProps[key] !== props[key]) {
+        copyVNode((newComponent.fn as any)(props, overmind), vnode)
+        return
+      }
+    }
+
+    copyVNode(oldVnode, vnode)
+  } catch (error) {
+    console.log(error.message)
+  }
+}
+
+function postpatch(prevNode, nextNode) {
+  try {
+    nextNode.data.component = prevNode.data.component
+  } catch (error) {
+    console.log(error.message)
+  }
+}
+
+function destroy(node) {
+  try {
+    getApp().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,
+      state: undefined,
+      changeState: null,
+      props: {
+        ...props,
+        children: children.length ? children : null,
+      },
+      tree: getApp().proxyStateTree.getTrackStateTree(),
+    },
+  })
+}

packages/node_modules/overmind-components/src/component.ts

@@ -0,0 +1,17 @@
+import { VALUE } from 'proxy-state-tree'
+import h from 'snabbdom/h'
+
+import { component } from './component'
+import { SELF, getName, normalizeAttrs } from './utils'
+
+export const createElement = (tag, attrs, ...children) => {
+  if (typeof tag === 'function') {
+    return component(tag, attrs, children)
+  }
+
+  return h(
+    tag,
+    normalizeAttrs(tag, attrs),
+    children.reduce((aggr, item) => aggr.concat(item), [])
+  )
+}