Begin diff with next DOM sibling in forceUpdate (#1689)

Begin diff with next DOM sibling in forceUpdate

src/component.js

@@ -69,7 +69,7 @@ Component.prototype.forceUpdate = function(callback) {
 		const force = callback!==false;
 
 		let mounts = [];
-		diff(parentDom, vnode, assign({}, vnode), this._context, parentDom.ownerSVGElement!==undefined, null, mounts, force, dom);
+		diff(parentDom, vnode, assign({}, vnode), this._context, parentDom.ownerSVGElement!==undefined, null, mounts, force, dom == null ? getDomSibling(vnode) : dom);
 		commitRoot(mounts, vnode);
 	}
 	if (callback) callback();
@@ -87,6 +87,37 @@ Component.prototype.forceUpdate = function(callback) {
  */
 Component.prototype.render = Fragment;
 
+/**
+ * @param {import('./internal').VNode} vnode
+ * @param {number | null} [childIndex]
+ */
+export function getDomSibling(vnode, childIndex) {
+	if (childIndex == null) {
+		// Use childIndex==null as a signal to resume the search from the vnode's sibling
+		return vnode._parent
+			? getDomSibling(vnode._parent, vnode._parent._children.indexOf(vnode) + 1)
+			: null;
+	}
+
+	let sibling;
+	for (; childIndex < vnode._children.length; childIndex++) {
+		sibling = vnode._children[childIndex];
+
+		if (sibling != null) {
+			return typeof sibling.type !== 'function'
+				? sibling._dom
+				: getDomSibling(sibling, 0);
+		}
+	}
+
+	// If we get here, we have not found a DOM node in this vnode's children.
+	// We must resume from this vnode's sibling (in it's parent _children array)
+	// Only climb up and search the parent if we aren't searching through a DOM
+	// VNode (meaning we reached the DOM parent of the original vnode that began
+	// the search)
+	return typeof vnode.type === 'function' ? getDomSibling(vnode) : null;
+}
+
 /**
  * The render queue
  * @type {Array<import('./internal').Component>}

test/_util/dom.js

@@ -10,6 +10,12 @@ export const span = contents => `<span>${contents}</span>`;
  */
 export const div = contents => `<div>${contents}</div>`;
 
+/**
+ * A helper to generate innerHTML validation strings containing sections
+ * @param {string | number} contents The contents of the section, as a string
+ */
+export const section = contents => `<section>${contents}</section>`;
+
 /**
  * A helper to generate innerHTML validation strings containing uls
  * @param {string | number} contents The contents of the ul, as a string