vue3-yuanma/packages/runtime-core/src/createRenderer.ts

// TODO:
// - component
// - lifecycle
// - app context
// - svg
// - refs
// - hydration
// - warning context
// - parent chain
// - reused nodes (warning)

import {
  Text,
  Fragment,
  Empty,
  createVNode,
  VNode,
  VNodeChildren
} from './h.js'
import { TEXT, CLASS, STYLE, PROPS, KEYED, UNKEYED } from './patchFlags'

const emptyArr: any[] = []
const emptyObj: { [key: string]: any } = {}

function isSameType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

export type HostNode = any

export interface RendererOptions {
  patchProp(
    el: HostNode,
    key: string,
    value: any,
    oldValue: any,
    isSVG: boolean,
    prevChildren?: VNode[],
    unmountChildren?: (children: VNode[]) => void
  ): void
  insert(el: HostNode, parent: HostNode, anchor?: HostNode): void
  remove(el: HostNode): void
  createElement(type: string): HostNode
  createText(text: string): HostNode
  createComment(text: string): HostNode
  setText(node: HostNode, text: string): void
  setElementText(node: HostNode, text: string): void
  nextSibling(node: HostNode): HostNode | null
}

export function createRenderer(options: RendererOptions) {
  const {
    insert,
    remove,
    patchProp: hostPatchProp,
    createElement: hostCreateElement,
    createText: hostCreateText,
    createComment: hostCreateComment,
    setText: hostSetText,
    setElementText: hostSetElementText,
    nextSibling: hostNextSibling
  } = options

  function patch(
    n1: VNode | null, // null means this is a mount
    n2: VNode,
    container: HostNode,
    anchor?: HostNode,
    optimized?: boolean
  ) {
    // patching & not same type, unmount old tree
    if (n1 != null && !isSameType(n1, n2)) {
      anchor = hostNextSibling(n1.anchor || n1.el)
      unmount(n1, true)
      n1 = null
    }

    const { type } = n2
    if (type === Text) {
      processText(n1, n2, container, anchor)
    } else if (type === Empty) {
      processEmptyNode(n1, n2, container, anchor)
    } else if (type === Fragment) {
      processFragment(n1, n2, container, anchor, optimized)
    } else if (typeof type === 'function') {
      // TODO Component
    } else {
      processElement(n1, n2, container, anchor, optimized)
    }
  }

  function processText(
    n1: VNode | null,
    n2: VNode,
    container: HostNode,
    anchor?: HostNode
  ) {
    if (n1 == null) {
      insert((n2.el = hostCreateText(n2.children as string)), container, anchor)
    } else {
      const el = (n2.el = n1.el)
      if (n2.children !== n1.children) {
        hostSetText(el, n2.children as string)
      }
    }
  }

  function processEmptyNode(
    n1: VNode | null,
    n2: VNode,
    container: HostNode,
    anchor?: HostNode
  ) {
    if (n1 == null) {
      insert((n2.el = hostCreateComment('')), container, anchor)
    } else {
      n2.el = n1.el
    }
  }

  function processElement(
    n1: VNode | null,
    n2: VNode,
    container: HostNode,
    anchor?: HostNode,
    optimized?: boolean
  ) {
    // mount
    if (n1 == null) {
      mountElement(n2, container, anchor)
    } else {
      patchElement(n1, n2, optimized)
    }
  }

  function mountElement(vnode: VNode, container: HostNode, anchor?: HostNode) {
    const el = (vnode.el = hostCreateElement(vnode.type as string))
    if (vnode.props != null) {
      for (const key in vnode.props) {
        hostPatchProp(el, key, vnode.props[key], null, false)
      }
    }
    if (typeof vnode.children === 'string') {
      hostSetElementText(el, vnode.children)
    } else if (vnode.children != null) {
      mountChildren(vnode.children, el)
    }
    insert(el, container, anchor)
  }

  function mountChildren(
    children: VNodeChildren,
    container: HostNode,
    anchor?: HostNode,
    start: number = 0
  ) {
    for (let i = start; i < children.length; i++) {
      const child = (children[i] = normalizeChild(children[i]))
      patch(null, child, container, anchor)
    }
  }

  function normalizeChild(child: any): VNode {
    if (child == null) {
      // empty placeholder
      return createVNode(Empty)
    } else if (Array.isArray(child)) {
      // fragment
      return createVNode(Fragment, null, child)
    } else if (typeof child === 'object') {
      // already vnode
      return child as VNode
    } else {
      // primitive types
      return createVNode(Text, null, child + '')
    }
  }

  function patchElement(n1: VNode, n2: VNode, optimized?: boolean) {
    const el = (n2.el = n1.el)
    const { patchFlag, dynamicChildren } = n2
    const oldProps = (n1 && n1.props) || emptyObj
    const newProps = n2.props || emptyObj

    if (patchFlag != null) {
      // the presence of a patchFlag means this element's render code was
      // generated by the compiler and can take the fast path.
      // in this path old node and new node are guaranteed to have the same shape
      // (i.e. at the exact same position in the source template)

      // class
      // this flag is matched when the element has dynamic class bindings.
      if (patchFlag & CLASS) {
        // TODO handle full class API, potentially optimize at compilation stage?
        if (oldProps.class !== newProps.class) {
          hostPatchProp(el, 'class', newProps.class, null, false)
        }
      }

      // style
      // this flag is matched when the element has dynamic style bindings
      // TODO separate static and dynamic styles?
      if (patchFlag & STYLE) {
        hostPatchProp(el, 'style', newProps.style, oldProps.style, false)
      }

      // props
      // This flag is matched when the element has dynamic prop/attr bindings
      // other than class and style. The keys of dynamic prop/attrs are saved for
      // faster iteration.
      // Note dynamic keys like :[foo]="bar" will cause this optimization to
      // bail out and go through a full diff because we need to unset the old key
      if (patchFlag & PROPS) {
        // if the flag is present then dynamicProps must be non-null
        const propsToUpdate = n2.dynamicProps as string[]
        for (let i = 0; i < propsToUpdate.length; i++) {
          const key = propsToUpdate[i]
          const prev = oldProps[key]
          const next = newProps[key]
          if (prev !== next) {
            hostPatchProp(
              el,
              key,
              next,
              prev,
              false,
              n1.children as VNode[],
              unmountChildren
            )
          }
        }
      }

      // text
      // This flag is matched when the element has only dynamic text children.
      // this flag is terminal (i.e. skips children diffing).
      if (patchFlag & TEXT) {
        if (n1.children !== n2.children) {
          hostSetElementText(el, n2.children as string)
        }
        return // terminal
      }
    } else if (!optimized) {
      // unoptimized, full diff
      patchProps(el, n2, oldProps, newProps)
    }

    if (dynamicChildren != null) {
      // children fast path
      const olddynamicChildren = n1.dynamicChildren as VNode[]
      for (let i = 0; i < dynamicChildren.length; i++) {
        patch(olddynamicChildren[i], dynamicChildren[i], el, null, true)
      }
    } else if (!optimized) {
      // full diff
      patchChildren(n1, n2, el)
    }
  }

  function patchProps(
    el: HostNode,
    vnode: VNode,
    oldProps: any,
    newProps: any
  ) {
    if (oldProps !== newProps) {
      for (const key in newProps) {
        const next = newProps[key]
        const prev = oldProps[key]
        if (next !== prev) {
          hostPatchProp(
            el,
            key,
            next,
            prev,
            false,
            vnode.children as VNode[],
            unmountChildren
          )
        }
      }
      if (oldProps !== emptyObj) {
        for (const key in oldProps) {
          if (!(key in newProps)) {
            hostPatchProp(
              el,
              key,
              null,
              null,
              false,
              vnode.children as VNode[],
              unmountChildren
            )
          }
        }
      }
    }
  }

  function processFragment(
    n1: VNode | null,
    n2: VNode,
    container: HostNode,
    anchor?: HostNode,
    optimized?: boolean
  ) {
    const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateComment(''))
    const fragmentEndAnchor = (n2.anchor = n1
      ? n1.anchor
      : hostCreateComment(''))
    if (n1 == null) {
      insert(fragmentStartAnchor, container, anchor)
      insert(fragmentEndAnchor, container, anchor)
      // a fragment can only have array children
      mountChildren(n2.children as VNodeChildren, container, fragmentEndAnchor)
    } else {
      patchChildren(n1, n2, container, fragmentEndAnchor, optimized)
    }
  }

  function patchChildren(
    n1: VNode | null,
    n2: VNode,
    container: HostNode,
    anchor?: HostNode,
    optimized?: boolean
  ) {
    const c1 = n1 && n1.children
    const c2 = n2.children

    // fast path
    const { patchFlag } = n2
    if (patchFlag != null) {
      if (patchFlag & KEYED) {
        // this could be either fully-keyed or mixed (some keyed some not)
        // presence of patchFlag means children are guaranteed to be arrays
        patchKeyedChildren(
          c1 as VNode[],
          c2 as VNodeChildren,
          container,
          anchor,
          optimized
        )
        return
      } else if (patchFlag & UNKEYED) {
        // unkeyed
        patchUnkeyedChildren(
          c1 as VNode[],
          c2 as VNodeChildren,
          container,
          anchor,
          optimized
        )
        return
      }
    }

    if (typeof c2 === 'string') {
      // text children fast path
      if (Array.isArray(c1)) {
        unmountChildren(c1 as VNode[])
      }
      hostSetElementText(container, c2)
    } else {
      if (typeof c1 === 'string') {
        hostSetElementText(container, '')
        if (c2 != null) {
          mountChildren(c2, container, anchor)
        }
      } else if (Array.isArray(c1)) {
        if (Array.isArray(c2)) {
          // two arrays, cannot assume anything, do full diff
          patchKeyedChildren(c1 as VNode[], c2, container, anchor, optimized)
        } else {
          // c2 is null in this case
          unmountChildren(c1 as VNode[], true)
        }
      }
    }
  }

  function patchUnkeyedChildren(
    c1: VNode[],
    c2: VNodeChildren,
    container: HostNode,
    anchor?: HostNode,
    optimized?: boolean
  ) {
    c1 = c1 || emptyArr
    c2 = c2 || emptyArr
    const oldLength = c1.length
    const newLength = c2.length
    const commonLength = Math.min(oldLength, newLength)
    let i
    for (i = 0; i < commonLength; i++) {
      const nextChild = (c2[i] = normalizeChild(c2[i]))
      patch(c1[i], nextChild, container, null, optimized)
    }
    if (oldLength > newLength) {
      // remove old
      unmountChildren(c1, true, commonLength)
    } else {
      // mount new
      mountChildren(c2, container, anchor, commonLength)
    }
  }

  // can be all-keyed or mixed
  function patchKeyedChildren(
    c1: VNode[],
    c2: VNodeChildren,
    container: HostNode,
    anchor?: HostNode,
    optimized?: boolean
  ) {
    let i = 0
    let e1 = c1.length - 1
    let e2 = c2.length - 1

    // 1. sync from start
    // (a b) c
    // (a b) d e
    while (i <= e1 && i <= e2) {
      const n1 = c1[i]
      const n2 = (c2[i] = normalizeChild(c2[i]))
      if (isSameType(n1, n2)) {
        patch(n1, n2, container, anchor, optimized)
      } else {
        break
      }
      i++
    }

    // 2. sync from end
    // a (b c)
    // d e (b c)
    while (i <= e1 && i <= e2) {
      const n1 = c1[e1]
      const n2 = (c2[e2] = normalizeChild(c2[e2]))
      if (isSameType(n1, n2)) {
        patch(n1, n2, container, anchor, optimized)
      } else {
        break
      }
      e1--
      e2--
    }

    // 3. common sequence + mount
    // (a b)
    // (a b) c
    // i = 2, e1 = 1, e2 = 2
    // (a b)
    // c (a b)
    // i = 0, e1 = -1, e2 = 0
    if (i > e1) {
      if (i <= e2) {
        const nextPos = e2 + 1
        const nextAnchor =
          nextPos < c2.length ? (c2[nextPos] as VNode).el : anchor
        while (i <= e2) {
          patch(null, (c2[i] = normalizeChild(c2[i])), container, nextAnchor)
          i++
        }
      }
    }

    // 4. common sequence + unmount
    // (a b) c
    // (a b)
    // i = 2, e1 = 2, e2 = 1
    // a (b c)
    // (b c)
    // i = 0, e1 = 0, e2 = -1
    else if (i > e2) {
      while (i <= e1) {
        unmount(c1[i], true)
        i++
      }
    }

    // 5. inner diff
    //  - build key:index map
    //  - loop through old and try to patch / remove
    //  - if moved: apply minimal move w/ levenshtein distance
    //  - no move: mount and insert new ones
    else {
    }
  }

  function unmount(vnode: VNode, doRemove?: boolean) {
    const shouldRemoveChildren = vnode.type === Fragment && doRemove
    if (vnode.dynamicChildren != null) {
      unmountChildren(vnode.dynamicChildren, shouldRemoveChildren)
    } else if (Array.isArray(vnode.children)) {
      unmountChildren(vnode.children as VNode[], shouldRemoveChildren)
    }
    if (doRemove) {
      remove(vnode.el)
      if (vnode.anchor != null) remove(vnode.anchor)
    }
  }

  function unmountChildren(
    children: VNode[],
    doRemove?: boolean,
    start: number = 0
  ) {
    for (let i = start; i < children.length; i++) {
      unmount(children[i], doRemove)
    }
  }

  return function render(vnode: VNode, dom: HostNode): VNode {
    patch(dom._vnode, vnode, dom)
    return (dom._vnode = vnode)
  }
}