fix(hydration): Suspender returns Fragment with multiple DOM-nodes

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

@@ -139,6 +139,75 @@ describe('suspense hydration', () => {
 		});
 	});
 
+	it('Should hydrate a fragment with multiple children correctly', () => {
+		scratch.innerHTML = '<div>Hello</div><div>World!</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('<div>Hello</div><div>World!</div>');
+		expect(getLog()).to.deep.equal([]);
+		clearLog();
+
+		return resolve(() => (
+			<>
+				<div>Hello</div>
+				<div>World!</div>
+			</>
+		)).then(() => {
+			rerender();
+			expect(scratch.innerHTML).to.equal('<div>Hello</div><div>World!</div>');
+			expect(getLog()).to.deep.equal([]);
+
+			clearLog();
+		});
+	});
+
+	// This is an expected fail case, we should encourage folks to not have adjacent
+	// nodes of the same type, or return a single wrapping dom node from a lazy boundary.
+	it.skip('Should hydrate a fragment with multiple children and an adjacent node correctly', () => {
+		scratch.innerHTML = '<div>Hello</div><div>World!</div><div>Baz</div>';
+		clearLog();
+
+		const [Lazy, resolve] = createLazy();
+		hydrate(
+			<>
+				<Suspense>
+					<Lazy />
+				</Suspense>
+				<div>Baz</div>
+			</>,
+			scratch
+		);
+		rerender(); // Flush rerender queue to mimic what preact will really do
+		expect(scratch.innerHTML).to.equal(
+			'<div>Hello</div><div>World!</div><div>Baz</div>'
+		);
+		expect(getLog()).to.deep.equal([]);
+		clearLog();
+
+		return resolve(() => (
+			<>
+				<div>Hello</div>
+				<div>World!</div>
+			</>
+		)).then(() => {
+			rerender();
+			expect(scratch.innerHTML).to.equal(
+				'<div>Hello</div><div>World!</div><div>Baz</div>'
+			);
+			expect(getLog()).to.deep.equal([]);
+
+			clearLog();
+		});
+	});
+
 	it('should allow siblings to update around suspense boundary', () => {
 		scratch.innerHTML = '<div>Count: 0</div><div>Hello</div>';
 		clearLog();

jsx-runtime/src/index.js

@@ -59,6 +59,7 @@ function createVNode(type, props, key, isStaticChildren, __source, __self) {
 		_nextDom: undefined,
 		_component: null,
 		constructor: undefined,
+		_excess: null,
 		_original: --vnodeId,
 		_index: -1,
 		_flags: 0,

mangle.json

@@ -27,6 +27,7 @@
     "props": {
       "$_listeners": "l",
       "$_cleanup": "__c",
+      "$_excess": "__x",
       "$__hooks": "__H",
       "$_list": "__",
       "$_pendingEffects": "__h",

src/create-element.js

@@ -62,6 +62,7 @@ export function createVNode(type, props, key, ref, original) {
 		props,
 		key,
 		ref,
+		_excess: null,
 		_children: null,
 		_parent: null,
 		_depth: 0,

src/diff/index.js

@@ -53,7 +53,7 @@ export function diff(
 	if (oldVNode._flags & MODE_SUSPENDED) {
 		isHydrating = !!(oldVNode._flags & MODE_HYDRATE);
 		oldDom = newVNode._dom = oldVNode._dom;
-		excessDomChildren = [oldDom];
+		excessDomChildren = oldVNode._excess;
 	}
 
 	if ((tmp = options._diff)) tmp(newVNode);
@@ -277,6 +277,7 @@ export function diff(
 				newVNode._flags |= isHydrating
 					? MODE_HYDRATE | MODE_SUSPENDED
 					: MODE_HYDRATE;
+				newVNode._excess = [...excessDomChildren];
 				excessDomChildren[excessDomChildren.indexOf(oldDom)] = null;
 				// ^ could possibly be simplified to:
 				// excessDomChildren.length = 0;

src/internal.d.ts

@@ -141,6 +141,7 @@ declare global {
 		_children: Array<VNode<any>> | null;
 		_parent: VNode | null;
 		_depth: number | null;
+		_excess: Array<any> | null;
 		/**
 		 * The [first (for Fragments)] DOM child of a VNode
 		 */