diff --git a/src/component.js b/src/component.js index 287f3233f4..8af897bf29 100644 --- a/src/component.js +++ b/src/component.js @@ -140,7 +140,7 @@ function renderComponent(component) { oldVNode._flags & MODE_HYDRATE ? [oldDom] : null, commitQueue, oldDom == null ? getDomSibling(oldVNode) : oldDom, - !!(oldVNode._flags & MODE_HYDRATE), + { _: !!(oldVNode._flags & MODE_HYDRATE) }, refQueue ); diff --git a/src/diff/children.js b/src/diff/children.js index ba2730478c..8971dccbf5 100644 --- a/src/diff/children.js +++ b/src/diff/children.js @@ -23,7 +23,7 @@ import { getDomSibling } from '../component'; * elements should be placed around. Likely `null` on first render (except when * hydrating). Can be a sibling DOM element when diffing Fragments that have * siblings. In most cases, it starts out as `oldChildren[0]._dom`. - * @param {boolean} isHydrating Whether or not we are in hydration + * @param {{_: boolean}} isHydratingRef Whether or not we are in hydration * @param {any[]} refQueue an array of elements needed to invoke refs */ export function diffChildren( @@ -36,7 +36,7 @@ export function diffChildren( excessDomChildren, commitQueue, oldDom, - isHydrating, + isHydratingRef, refQueue ) { let i, @@ -85,7 +85,7 @@ export function diffChildren( excessDomChildren, commitQueue, oldDom, - isHydrating, + isHydratingRef, refQueue ); diff --git a/src/diff/index.js b/src/diff/index.js index 287f94344d..7188631160 100644 --- a/src/diff/index.js +++ b/src/diff/index.js @@ -26,7 +26,7 @@ import options from '../options'; * elements should be placed around. Likely `null` on first render (except when * hydrating). Can be a sibling DOM element when diffing Fragments that have * siblings. In most cases, it starts out as `oldChildren[0]._dom`. - * @param {boolean} isHydrating Whether or not we are in hydration + * @param {{_:boolean}} isHydratingRef Whether or not we are in hydration * @param {any[]} refQueue an array of elements needed to invoke refs */ export function diff( @@ -38,9 +38,10 @@ export function diff( excessDomChildren, commitQueue, oldDom, - isHydrating, + isHydratingRef, refQueue ) { + let isHydrating = isHydratingRef._; /** @type {any} */ let tmp, newType = newVNode.type; @@ -253,7 +254,7 @@ export function diff( excessDomChildren, commitQueue, oldDom, - isHydrating, + isHydratingRef, refQueue ); @@ -303,7 +304,7 @@ export function diff( namespace, excessDomChildren, commitQueue, - isHydrating, + isHydratingRef, refQueue ); } @@ -351,7 +352,7 @@ export function commitRoot(commitQueue, root, refQueue) { * @param {Array} excessDomChildren * @param {Array} commitQueue List of components which have callbacks * to invoke in commitRoot - * @param {boolean} isHydrating Whether or not we are in hydration + * @param {{_: boolean}} isHydratingRef Whether or not we are in hydration * @param {any[]} refQueue an array of elements needed to invoke refs * @returns {PreactElement} */ @@ -363,9 +364,11 @@ function diffElementNodes( namespace, excessDomChildren, commitQueue, - isHydrating, + isHydratingRef, refQueue ) { + let isHydrating = isHydratingRef._; + let oldProps = oldVNode.props; let newProps = newVNode.props; let nodeType = /** @type {string} */ (newVNode.type); @@ -422,7 +425,7 @@ function diffElementNodes( if (isHydrating) { if (options._hydrationMismatch) options._hydrationMismatch(newVNode, excessDomChildren); - isHydrating = false; + isHydratingRef._ = isHydrating = false; } // we created a new parent, so none of the previously attached children can be reused: excessDomChildren = null; @@ -516,7 +519,7 @@ function diffElementNodes( excessDomChildren ? excessDomChildren[0] : oldVNode._children && getDomSibling(oldVNode, 0), - isHydrating, + isHydratingRef, refQueue ); diff --git a/src/render.js b/src/render.js index e0fec45424..27d6517fb5 100644 --- a/src/render.js +++ b/src/render.js @@ -55,7 +55,7 @@ export function render(vnode, parentDom, replaceNode) { : oldVNode ? oldVNode._dom : parentDom.firstChild, - isHydrating, + { _: isHydrating }, refQueue ); diff --git a/test/browser/hydrate.test.js b/test/browser/hydrate.test.js index 4603e0cdf9..814a5d681d 100644 --- a/test/browser/hydrate.test.js +++ b/test/browser/hydrate.test.js @@ -238,6 +238,22 @@ describe('hydrate()', () => { expect(scratch.innerHTML).to.equal('
bar
'); }); + it('should bail for adjacent trees', () => { + scratch.innerHTML = '
Hello world
'; + hydrate( +
+ + Foo + +
Hello world
+
, + scratch + ); + expect(scratch.innerHTML).to.equal( + '
Foo
Hello world
' + ); + }); + it('should correctly hydrate with Fragments', () => { const html = ul([li('1'), li('2'), li('3'), li('4')]);