feat(overmind-components): properly handle update of children

Author: christianalfoni

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

@@ -6,77 +6,74 @@ 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 {
+function copyToComponent(vnode: VNode, thunk: VNode, component) {
+  ;(vnode.data as VNodeData).fn = (thunk.data as VNodeData).fn
+  thunk.children = vnode.children
+  thunk.text = vnode.text
+  thunk.elm = vnode.elm
+
+  thunk.data = {
+    ...vnode.data,
+    hook: {
+      ...(vnode.data as any).hook,
+      prepatch,
+      postpatch,
+      destroy,
+    },
+    component,
+  }
+
+  component.currentNode = thunk
+}
+
+function init(componentNode: VNode): void {
   try {
-    const component = (componentVNode.data as VNodeData).component
+    const component = (componentNode.data as VNodeData).component
     const name = component.name
-    const tree = component.tree
-    let currentNode = componentVNode
-
-    const 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,
+    const tree = (component.tree = getApp().proxyStateTree.getTrackStateTree())
+
+    component.currentNode = componentNode
+
+    const update = (flushId?) => {
+      patch(component.currentNode, {
+        ...component.currentNode,
+        flushId: flushId,
       })
     }
 
-    const 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()
-    }
+    const createSelfNode = () => {
+      const node = (component.fn as any)(component.props, {
+        changeState: (newState) => {
+          component.state = newState
+          update()
+        },
+        state: component.state,
+        appState: tree.state,
+        actions: getApp().actions,
+        reaction: getApp().reaction,
+      })
 
-    const onFlush = (_, __, flushId) => {
-      update()
+      if (node.sel !== SELF) {
+        throw new Error(
+          `You are not returning a <self /> element from the component ${name} `
+        )
+      }
 
-      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,
-      })
+      return node
     }
-    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} `
-      )
+    component.onFlush = (_, __, flushId) => {
+      component.currentFlushId = flushId
+      update(flushId)
     }
+    tree.track(component.onFlush)
+    const newNode = createSelfNode()
     tree.stopTracking()
-    copyVNode(currentNode, componentVNode)
+
+    copyToComponent(newNode, componentNode, component)
 
     if (!(name in nextComponentId)) {
       nextComponentId[name] = nextId++
@@ -107,54 +104,71 @@ function init(componentVNode: VNode): void {
 }
 
 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,
-    }
+  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,
+  }
 
-    if (
-      oldComponent.fn !== newComponent.fn ||
-      oldPropsKeys.length !== propsKeys.length
-    ) {
-      copyVNode((newComponent.fn as any)(props, overmind), vnode)
-      return
-    }
+  oldVnode.children = oldComponent.currentNode.children
 
-    const keys = new Set<string>([...oldPropsKeys, ...propsKeys])
+  if (
+    (vnode as any).flushId ||
+    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))
 
-    for (let key of keys) {
-      if (oldProps[key] !== props[key]) {
-        copyVNode((newComponent.fn as any)(props, overmind), vnode)
-        return
-      }
-    }
+    return
+  }
 
-    copyVNode(oldVnode, vnode)
-  } catch (error) {
-    console.log(error.message)
+  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(prevNode, nextNode) {
+function postpatch(_, nextNode) {
   try {
-    nextNode.data.component = prevNode.data.component
+    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 {
-    getApp().disposeTree(node.data.component.tree)
+    getApp().proxyStateTree.disposeTree(node.data.component.tree)
   } catch (error) {
     console.log(error.message)
   }
@@ -174,13 +188,10 @@ export const component = (component, props, children) => {
     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/createElement.ts

@@ -1,16 +1,12 @@
 import h from 'snabbdom/h'
 
 import { component } from './component'
-import { SELF, getName, normalizeAttrs } from './utils'
+import { flatten, 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), [])
-  )
+  return h(tag, normalizeAttrs(tag, attrs), flatten(children))
 }

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

@@ -13,37 +13,40 @@ export interface IComponent<
     overmind: {
       state: State
       changeState: (newState: State) => void
-      store: Overmind<Config>['state']
+      appState: Overmind<Config>['state']
       actions: Overmind<Config>['actions']
       effects: Overmind<Config>['effects']
+      reaction: Overmind<Config>['reaction']
     }
   ): any
 }
 
+export type Child<P = any> =
+  | {
+      [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K]
+        ? K
+        : never
+    }[keyof JSX.IntrinsicElements]
+  | IComponent<any, any, any>
+  | null
+  | string
+
 declare global {
   // @ts-ignore
   namespace JSX {
     interface IntrinsicElements {
       self: React.DetailedHTMLProps<
-        React.HtmlHTMLAttributes<HTMLHtmlElement> & {
-          state?: any
-          onMount?: (el: HTMLElement) => void | (() => void)
-        },
+        React.HtmlHTMLAttributes<HTMLHtmlElement>,
         HTMLHtmlElement
       >
     }
   }
 }
 
 declare module 'react' {
-  interface HTMLAttributes<T>
-    extends React.AriaAttributes,
-      React.DOMAttributes<T> {
-    onInsert?: (el: HTMLElement) => void
-    onUpdate?: (el: HTMLElement) => void
-    onDestroy?: (el: HTMLElement) => void
-    onEnter?: (el: HTMLElement) => void
-    onLeave?: (el: HTMLElement) => void
+  interface HTMLAttributes<T> extends React.DOMAttributes<T> {
+    onMount?: (el: HTMLElement) => void | (() => void)
+    onEnter?: (el: HTMLElement) => void | (() => void)
     class?: {
       [key: string]: boolean
     }