Publish fixes for streaming renders (#4446)

compat/test/browser/suspense-hydration.test.js

@@ -97,6 +97,30 @@ describe('suspense hydration', () => {
 		});
 	});
 
+	it('should leave DOM untouched when suspending while hydrating', () => {
+		scratch.innerHTML = '<!-- test --><div>Hello</div>';
+		clearLog();
+
+		const [Lazy, resolve] = createLazy();
+		hydrate(
+			<Suspense>
+				<Lazy />
+			</Suspense>,
+			scratch
+		);
+		rerender(); // Flush rerender queue to mimic what preact will really do
+		expect(scratch.innerHTML).to.equal('<!-- test --><div>Hello</div>');
+		expect(getLog()).to.deep.equal([]);
+		clearLog();
+
+		return resolve(() => <div>Hello</div>).then(() => {
+			rerender();
+			expect(scratch.innerHTML).to.equal('<!-- test --><div>Hello</div>');
+			expect(getLog()).to.deep.equal([]);
+			clearLog();
+		});
+	});
+
 	it('should properly attach event listeners when suspending while hydrating', () => {
 		scratch.innerHTML = '<div>Hello</div><div>World</div>';
 		clearLog();

src/diff/index.js

@@ -273,13 +273,15 @@ export function diff(
 			newVNode._original = null;
 			// if hydrating or creating initial tree, bailout preserves DOM:
 			if (isHydrating || excessDomChildren != null) {
-				newVNode._dom = oldDom;
 				newVNode._flags |= isHydrating
 					? MODE_HYDRATE | MODE_SUSPENDED
 					: MODE_HYDRATE;
+
+				while (oldDom && oldDom.nodeType === 8 && oldDom.nextSibling) {
+					oldDom = oldDom.nextSibling;
+				}
 				excessDomChildren[excessDomChildren.indexOf(oldDom)] = null;
-				// ^ could possibly be simplified to:
-				// excessDomChildren.length = 0;
+				newVNode._dom = oldDom;
 			} else {
 				newVNode._dom = oldVNode._dom;
 				newVNode._children = oldVNode._children;