import { ATTR_KEY } from '../constants'; import { isString, isFunction } from '../util'; import { isSameNodeType, isNamedNode } from './index'; import { isFunctionalComponent, buildFunctionalComponent } from './functional-component'; import { buildComponentFromVNode } from './component'; import { setAccessor } from '../dom/index'; import { createNode, collectNode } from '../dom/recycler'; import { unmountComponent } from './component'; import options from '../options'; /** Diff recursion count, used to track the end of the diff cycle. */ export const mounts = []; /** Diff recursion count, used to track the end of the diff cycle. */ export let diffLevel = 0; let isSvgMode = false; export function flushMounts() { let c; while ((c=mounts.pop())) { if (options.afterMount) options.afterMount(c); if (c.componentDidMount) c.componentDidMount(); } } /** Apply differences in a given vnode (and it's deep children) to a real DOM Node. * @param {Element} [dom=null] A DOM node to mutate into the shape of the `vnode` * @param {VNode} vnode A VNode (with descendants forming a tree) representing the desired DOM structure * @returns {Element} dom The created/mutated element * @private */ export function diff(dom, vnode, context, mountAll, parent, componentRoot) { if (!diffLevel++) isSvgMode = parent instanceof SVGElement; let ret = idiff(dom, vnode, context, mountAll); if (parent && ret.parentNode!==parent) parent.appendChild(ret); if (!--diffLevel && !componentRoot) flushMounts(); return ret; } function idiff(dom, vnode, context, mountAll) { let originalAttributes = vnode && vnode.attributes; while (isFunctionalComponent(vnode)) { vnode = buildFunctionalComponent(vnode, context); } if (vnode==null) vnode = ''; if (isString(vnode)) { if (dom) { if (dom instanceof Text && dom.parentNode) { if (dom.nodeValue!=vnode) { dom.nodeValue = vnode; } return dom; } recollectNodeTree(dom); } return document.createTextNode(vnode); } if (isFunction(vnode.nodeName)) { return buildComponentFromVNode(dom, vnode, context, mountAll); } let out = dom, nodeName = vnode.nodeName, prevSvgMode = isSvgMode, vchildren = vnode.children; if (!isString(nodeName)) { nodeName = String(nodeName); } isSvgMode = nodeName==='svg' ? true : nodeName==='foreignObject' ? false : isSvgMode; if (!dom) { out = createNode(nodeName, isSvgMode); } else if (!isNamedNode(dom, nodeName)) { out = createNode(nodeName, isSvgMode); // move children into the replacement node while (dom.firstChild) out.appendChild(dom.firstChild); // reclaim element nodes recollectNodeTree(dom); } // fast-path for elements containing a single TextNode: if (vchildren && vchildren.length===1 && typeof vchildren[0]==='string' && out.childNodes.length===1 && out.firstChild instanceof Text) { if (out.firstChild.nodeValue!=vchildren[0]) { out.firstChild.nodeValue = vchildren[0]; } } else if (vchildren && vchildren.length || out.firstChild) { innerDiffNode(out, vchildren, context, mountAll); } let props = out[ATTR_KEY]; if (!props) { out[ATTR_KEY] = props = {}; for (let a=out.attributes, i=a.length; i--; ) props[a[i].name] = a[i].value; } diffAttributes(out, vnode.attributes, props); if (originalAttributes && typeof originalAttributes.ref==='function') { (props.ref = originalAttributes.ref)(out); } isSvgMode = prevSvgMode; return out; } /** Apply child and attribute changes between a VNode and a DOM Node to the DOM. */ function innerDiffNode(dom, vchildren, context, mountAll) { let originalChildren = dom.childNodes, children = [], keyed = {}, keyedLen = 0, min = 0, len = originalChildren.length, childrenLen = 0, vlen = vchildren && vchildren.length, j, c, vchild, child; if (len) { for (let i=0; i