From 30c5f89409cda50e36f96bd2bb9c0919752b63b5 Mon Sep 17 00:00:00 2001 From: daiwei Date: Mon, 2 Sep 2024 09:43:08 +0800 Subject: [PATCH 1/3] fix(hydration): handle text nodes with 0 during hydration --- packages/runtime-core/__tests__/hydration.spec.ts | 6 +++--- packages/runtime-core/src/hydration.ts | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index 142a171f7cf..a2ea72638f9 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -152,10 +152,10 @@ describe('SSR hydration', () => { // #7285 test('element with multiple continuous text vnodes', async () => { // should no mismatch warning - const { container } = mountWithHydration('
fooo
', () => - h('div', ['fo', createTextVNode('o'), 'o']), + const { container } = mountWithHydration('
foo0o
', () => + h('div', ['fo', createTextVNode('o'), 0, 'o']), ) - expect(container.textContent).toBe('fooo') + expect(container.textContent).toBe('foo0o') }) test('element with elements children', async () => { diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index 8060f9475b7..b167c74dad2 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -554,8 +554,7 @@ export function createHydrationFunctions( // JSX-compiled fns, but on the client the browser parses only 1 text // node. // look ahead for next possible text vnode - let next = children[i + 1] - if (next && (next = normalizeVNode(next)).type === Text) { + if (normalizeVNode(children[i + 1]).type === Text) { // create an extra TextNode on the client for the next vnode to // adopt insert( From f60d504003149c79a52fbd63291c76e38962a103 Mon Sep 17 00:00:00 2001 From: daiwei Date: Mon, 2 Sep 2024 09:54:19 +0800 Subject: [PATCH 2/3] chore: improve --- packages/runtime-core/src/hydration.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index b167c74dad2..1f90196e3a8 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -549,7 +549,7 @@ export function createHydrationFunctions( : (children[i] = normalizeVNode(children[i])) const isText = vnode.type === Text if (node) { - if (isText && !optimized) { + if (isText && !optimized && i + 1 < l) { // #7285 possible consecutive text vnodes from manual render fns or // JSX-compiled fns, but on the client the browser parses only 1 text // node. From e1498672c6c168fcc1434fcf1e246e39cb2f74ad Mon Sep 17 00:00:00 2001 From: daiwei Date: Mon, 2 Sep 2024 09:59:32 +0800 Subject: [PATCH 3/3] chore: improve --- packages/runtime-core/src/hydration.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index 1f90196e3a8..15a460f99b4 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -549,12 +549,12 @@ export function createHydrationFunctions( : (children[i] = normalizeVNode(children[i])) const isText = vnode.type === Text if (node) { - if (isText && !optimized && i + 1 < l) { + if (isText && !optimized) { // #7285 possible consecutive text vnodes from manual render fns or // JSX-compiled fns, but on the client the browser parses only 1 text // node. // look ahead for next possible text vnode - if (normalizeVNode(children[i + 1]).type === Text) { + if (i + 1 < l && normalizeVNode(children[i + 1]).type === Text) { // create an extra TextNode on the client for the next vnode to // adopt insert(