diff --git a/compat/test/browser/suspense-hydration.test.js b/compat/test/browser/suspense-hydration.test.js index 9143903238..b1ed754ba1 100644 --- a/compat/test/browser/suspense-hydration.test.js +++ b/compat/test/browser/suspense-hydration.test.js @@ -139,6 +139,36 @@ describe('suspense hydration', () => { }); }); + it('Should hydrate a fragment with multiple children correctly', () => { + scratch.innerHTML = '
Hello
World!
'; + clearLog(); + + const [Lazy, resolve] = createLazy(); + hydrate( + + + , + scratch + ); + rerender(); // Flush rerender queue to mimic what preact will really do + expect(scratch.innerHTML).to.equal('
Hello
World!
'); + expect(getLog()).to.deep.equal([]); + clearLog(); + + return resolve(() => ( + <> +
Hello
+
World!
+ + )).then(() => { + rerender(); + expect(scratch.innerHTML).to.equal('
Hello
World!
'); + expect(getLog()).to.deep.equal([]); + + clearLog(); + }); + }); + it('should allow siblings to update around suspense boundary', () => { scratch.innerHTML = '
Count: 0
Hello
'; clearLog(); diff --git a/src/diff/index.js b/src/diff/index.js index 3e4b17bd62..35a9b7c6d2 100644 --- a/src/diff/index.js +++ b/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;