Flatten children array as it is diffed

src/diff/children.js

@@ -24,9 +24,8 @@ import { getDomSibling } from '../component';
  * @param {boolean} isHydrating Whether or not we are in hydration
  */
 export function diffChildren(parentDom, newParentVNode, oldParentVNode, context, isSvg, excessDomChildren, mounts, oldDom, isHydrating) {
-	let childVNode, i, j, oldVNode, newDom, sibDom, firstChildDom, refs;
+	let i, j, oldVNode, newDom, sibDom, firstChildDom, refs;
 
-	let newChildren = newParentVNode._children || toChildArray(newParentVNode.props.children, newParentVNode._children=[], coerceToVNode, true);
 	// This is a compression of oldParentVNode!=null && oldParentVNode != EMPTY_OBJ && oldParentVNode._children || EMPTY_ARR
 	// as EMPTY_OBJ._children should be `undefined`.
 	let oldChildren = (oldParentVNode && oldParentVNode._children) || EMPTY_ARR;
@@ -49,8 +48,8 @@ export function diffChildren(parentDom, newParentVNode, oldParentVNode, context,
 		}
 	}
 
-	for (i=0; i<newChildren.length; i++) {
-		childVNode = newChildren[i] = coerceToVNode(newChildren[i]);
+	i=0;
+	newParentVNode._children = toChildArray(newParentVNode._children, childVNode => {
 
 		if (childVNode!=null) {
 			childVNode._parent = newParentVNode;
@@ -150,7 +149,10 @@ export function diffChildren(parentDom, newParentVNode, oldParentVNode, context,
 				}
 			}
 		}
-	}
+
+		i++;
+		return childVNode;
+	});
 
 	newParentVNode._dom = firstChildDom;
 
@@ -169,27 +171,27 @@ export function diffChildren(parentDom, newParentVNode, oldParentVNode, context,
 }
 
 /**
- * Flatten a virtual nodes children to a single dimensional array
+ * Flatten and loop through the children of a virtual node
  * @param {import('../index').ComponentChildren} children The unflattened
  * children of a virtual node
- * @param {Array<import('../internal').VNode | null>} [flattened] An flat array of children to modify
- * @param {typeof import('../create-element').coerceToVNode} [map] Function that
- * will be applied on each child if the `vnode` is not `null`
- * @param {boolean} [keepHoles] wether to coerce `undefined` to `null` or not.
- * This is needed for Components without children like `<Foo />`.
+ * @param {(vnode: import('../internal').VNode) => import('../internal').VNode} [callback]
+ * A function to invoke for each child before it is added to the flattened list.
+ * @param {import('../internal').VNode[]} [flattened] An flat array of children to modify
+ * @returns {import('../internal').VNode[]}
  */
-export function toChildArray(children, flattened, map, keepHoles) {
+export function toChildArray(children, callback, flattened) {
 	if (flattened == null) flattened = [];
+
 	if (children==null || typeof children === 'boolean') {
-		if (keepHoles) flattened.push(null);
+		if (callback) flattened.push(callback(null));
 	}
 	else if (Array.isArray(children)) {
 		for (let i=0; i < children.length; i++) {
-			toChildArray(children[i], flattened, map, keepHoles);
+			toChildArray(children[i], callback, flattened);
 		}
 	}
 	else {
-		flattened.push(map ? map(children) : children);
+		flattened.push(callback ? callback(coerceToVNode(children)) : children);
 	}
 
 	return flattened;

src/diff/index.js

@@ -1,7 +1,7 @@
 import { EMPTY_OBJ, EMPTY_ARR } from '../constants';
 import { Component, enqueueRender } from '../component';
-import { coerceToVNode, Fragment } from '../create-element';
-import { diffChildren, toChildArray } from './children';
+import { Fragment } from '../create-element';
+import { diffChildren } from './children';
 import { diffProps } from './props';
 import { assign, removeNode } from '../util';
 import options from '../options';
@@ -115,7 +115,7 @@ export function diff(parentDom, newVNode, oldVNode, context, isSvg, excessDomChi
 
 			tmp = c.render(c.props, c.state, c.context);
 			let isTopLevelFragment = tmp != null && tmp.type == Fragment && tmp.key == null;
-			toChildArray(isTopLevelFragment ? tmp.props.children : tmp, newVNode._children=[], coerceToVNode, true);
+			newVNode._children = isTopLevelFragment ? tmp.props.children : tmp;
 
 			if (c.getChildContext!=null) {
 				context = assign(assign({}, context), c.getChildContext());
@@ -239,6 +239,8 @@ function diffElementNodes(dom, newVNode, oldVNode, context, isSvg, excessDomChil
 
 		diffProps(dom, newProps, oldProps, isSvg, isHydrating);
 
+		newVNode._children = newVNode.props.children;
+
 		// If the new vnode didn't have dangerouslySetInnerHTML, diff its children
 		if (!newHtml) {
 			diffChildren(dom, newVNode, oldVNode, context, newVNode.type==='foreignObject' ? false : isSvg, excessDomChildren, mounts, EMPTY_OBJ, isHydrating);