// 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) } }