From 53fe2d7d8fa147e75d638e48c7824bd22faaeff0 Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 10 Jan 2023 09:13:58 +0800 Subject: [PATCH 1/4] fix(hydration): should force hydrate props with .prop & ^attr modifiers --- .../runtime-core/__tests__/hydration.spec.ts | 24 +++++++++++++++++++ packages/runtime-core/src/hydration.ts | 5 +++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index d8832305185..2583ea3a9d1 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -935,6 +935,30 @@ describe('SSR hydration', () => { expect((container.firstChild!.firstChild as any)._value).toBe(true) }) + test('force hydrate prop with `.prop` modifiers', () => { + const { container } = mountWithHydration( + '', + () => + h('input', { + type: 'checkbox', + '.indeterminate': true + }) + ) + expect((container.firstChild! as any).indeterminate).toBe(true) + }) + + test('force hydrate attr with `.attr` modifiers', () => { + const { container } = mountWithHydration( + '', + () => + h('input', { + type: 'checkbox', + '^x': 1 + }) + ) + expect((container.firstChild! as any).getAttribute('x')).toBe('1') + }) + // #5728 test('empty text node in slot', () => { const Comp = { diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index 2170a9192cf..6888e158686 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -327,7 +327,10 @@ export function createHydrationFunctions( for (const key in props) { if ( (forcePatchValue && key.endsWith('value')) || - (isOn(key) && !isReservedProp(key)) + (isOn(key) && !isReservedProp(key)) || + // support .prop & .attr modifiers + key[0] === '.' || + key[0] === '^' ) { patchProp( el, From 56d7309d55d0693877a9b5dff6f371166344fdb7 Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 10 Jan 2023 09:55:14 +0800 Subject: [PATCH 2/4] fix: test case --- packages/runtime-core/__tests__/hydration.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index 2583ea3a9d1..5c09816e4b7 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -947,9 +947,9 @@ describe('SSR hydration', () => { expect((container.firstChild! as any).indeterminate).toBe(true) }) - test('force hydrate attr with `.attr` modifiers', () => { + test('force hydrate prop with `^attr` modifiers', () => { const { container } = mountWithHydration( - '', + '', () => h('input', { type: 'checkbox', From ca14802edc2c66cf2cffc3b65720b8e4cad231c6 Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 10 Jan 2023 13:06:40 +0800 Subject: [PATCH 3/4] fix: test case --- packages/runtime-core/__tests__/hydration.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index 5c09816e4b7..bd61a05bc8a 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -947,9 +947,9 @@ describe('SSR hydration', () => { expect((container.firstChild! as any).indeterminate).toBe(true) }) - test('force hydrate prop with `^attr` modifiers', () => { + test('force hydrate prop with `.attr` modifiers', () => { const { container } = mountWithHydration( - '', + '', () => h('input', { type: 'checkbox', From 72fb005a2bc1816fe09b8f389deaa7dbb60cadd2 Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 10 Jan 2023 13:07:41 +0800 Subject: [PATCH 4/4] fix: test case --- packages/runtime-core/__tests__/hydration.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index bd61a05bc8a..e29ab70008e 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -935,7 +935,7 @@ describe('SSR hydration', () => { expect((container.firstChild!.firstChild as any)._value).toBe(true) }) - test('force hydrate prop with `.prop` modifiers', () => { + test('force hydrate prop with `.prop` modifier', () => { const { container } = mountWithHydration( '', () => @@ -947,7 +947,7 @@ describe('SSR hydration', () => { expect((container.firstChild! as any).indeterminate).toBe(true) }) - test('force hydrate prop with `.attr` modifiers', () => { + test('force hydrate prop with `.attr` modifier', () => { const { container } = mountWithHydration( '', () =>