From cb958b23603d15c773d1989d81d6a5c97bddbc83 Mon Sep 17 00:00:00 2001 From: linzhe141 Date: Tue, 17 Sep 2024 21:56:19 +0800 Subject: [PATCH 01/10] fix(runtime-core): regular comment nodes should not use hydrateOnVisible --- .../runtime-core/src/hydrationStrategies.ts | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/runtime-core/src/hydrationStrategies.ts b/packages/runtime-core/src/hydrationStrategies.ts index 51200fc1c34..f000cc4fb60 100644 --- a/packages/runtime-core/src/hydrationStrategies.ts +++ b/packages/runtime-core/src/hydrationStrategies.ts @@ -86,21 +86,23 @@ export const hydrateOnInteraction: HydrationStrategyFactory< } export function forEachElement(node: Node, cb: (el: Element) => void): void { - // fragment - if (isComment(node) && node.data === '[') { - let depth = 1 - let next = node.nextSibling - while (next) { - if (next.nodeType === DOMNodeTypes.ELEMENT) { - cb(next as Element) - } else if (isComment(next)) { - if (next.data === ']') { - if (--depth === 0) break - } else if (next.data === '[') { - depth++ + if (isComment(node)) { + // fragment + if (node.data === '[') { + let depth = 1 + let next = node.nextSibling + while (next) { + if (next.nodeType === DOMNodeTypes.ELEMENT) { + cb(next as Element) + } else if (isComment(next)) { + if (next.data === ']') { + if (--depth === 0) break + } else if (next.data === '[') { + depth++ + } } + next = next.nextSibling } - next = next.nextSibling } } else { cb(node as Element) From 91038c9900e221a79917fca755e04b173d4cc370 Mon Sep 17 00:00:00 2001 From: linzhe141 Date: Tue, 17 Sep 2024 22:36:27 +0800 Subject: [PATCH 02/10] chore: update for ci --- packages/runtime-core/src/hydrationStrategies.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/runtime-core/src/hydrationStrategies.ts b/packages/runtime-core/src/hydrationStrategies.ts index f000cc4fb60..60136f0064d 100644 --- a/packages/runtime-core/src/hydrationStrategies.ts +++ b/packages/runtime-core/src/hydrationStrategies.ts @@ -86,6 +86,7 @@ export const hydrateOnInteraction: HydrationStrategyFactory< } export function forEachElement(node: Node, cb: (el: Element) => void): void { + // #11952 if (isComment(node)) { // fragment if (node.data === '[') { From 4c65193d47114dca71e04326462c4020d8177a83 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Wed, 18 Sep 2024 10:11:12 +0800 Subject: [PATCH 03/10] chore: update test --- .../e2e/hydration-strat-visible.html | 35 +++++++++++++++++-- .../__tests__/e2e/hydrationStrategies.spec.ts | 10 ++++++ 2 files changed, 42 insertions(+), 3 deletions(-) diff --git a/packages/vue/__tests__/e2e/hydration-strat-visible.html b/packages/vue/__tests__/e2e/hydration-strat-visible.html index 7b3b5ddf35d..f917ab545c5 100644 --- a/packages/vue/__tests__/e2e/hydration-strat-visible.html +++ b/packages/vue/__tests__/e2e/hydration-strat-visible.html @@ -11,12 +11,17 @@ diff --git a/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts index 58e3784ba7f..bb6e4740cba 100644 --- a/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts +++ b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts @@ -7,6 +7,7 @@ declare const window: Window & { isRootMounted: boolean teardownCalled?: boolean show: Ref + propsShow: Ref } describe('async component hydration strategies', () => { @@ -65,6 +66,15 @@ describe('async component hydration strategies', () => { await assertHydrationSuccess() }) + test('visible (root v-if)', async () => { + await goToCase('visible', '?v-if') + await page().waitForFunction(() => window.isRootMounted) + expect(await page().evaluate(() => window.isHydrated)).toBe(false) + await page().evaluate(() => { + window.propsShow.value = true + }) + await assertHydrationSuccess() + }) test('media query', async () => { await goToCase('media') await page().waitForFunction(() => window.isRootMounted) From fb575087f93a1bb1469d6dd1296dc9e5a884eaa9 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Wed, 18 Sep 2024 14:05:30 +0800 Subject: [PATCH 04/10] chore: update --- .../runtime-core/src/hydrationStrategies.ts | 31 +++++++++---------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/runtime-core/src/hydrationStrategies.ts b/packages/runtime-core/src/hydrationStrategies.ts index 60136f0064d..ebaed349acf 100644 --- a/packages/runtime-core/src/hydrationStrategies.ts +++ b/packages/runtime-core/src/hydrationStrategies.ts @@ -37,7 +37,7 @@ export const hydrateOnVisible: HydrationStrategyFactory< break } }, opts) - forEach(el => ob.observe(el)) + forEach(el => el instanceof Element && ob.observe(el)) return () => ob.disconnect() } @@ -86,24 +86,21 @@ export const hydrateOnInteraction: HydrationStrategyFactory< } export function forEachElement(node: Node, cb: (el: Element) => void): void { - // #11952 - if (isComment(node)) { - // fragment - if (node.data === '[') { - let depth = 1 - let next = node.nextSibling - while (next) { - if (next.nodeType === DOMNodeTypes.ELEMENT) { - cb(next as Element) - } else if (isComment(next)) { - if (next.data === ']') { - if (--depth === 0) break - } else if (next.data === '[') { - depth++ - } + // fragment + if (isComment(node) && node.data === '[') { + let depth = 1 + let next = node.nextSibling + while (next) { + if (next.nodeType === DOMNodeTypes.ELEMENT) { + cb(next as Element) + } else if (isComment(next)) { + if (next.data === ']') { + if (--depth === 0) break + } else if (next.data === '[') { + depth++ } - next = next.nextSibling } + next = next.nextSibling } } else { cb(node as Element) From 9d74f9c9df1dabd429fa70c6b4e7ead0d648cbf3 Mon Sep 17 00:00:00 2001 From: linzhe Date: Wed, 18 Sep 2024 20:14:40 +0800 Subject: [PATCH 05/10] chore: update test --- .../e2e/hydration-strat-visible.html | 20 +++---------------- .../__tests__/e2e/hydrationStrategies.spec.ts | 12 ++++++----- 2 files changed, 10 insertions(+), 22 deletions(-) diff --git a/packages/vue/__tests__/e2e/hydration-strat-visible.html b/packages/vue/__tests__/e2e/hydration-strat-visible.html index f917ab545c5..cd8aa6bef18 100644 --- a/packages/vue/__tests__/e2e/hydration-strat-visible.html +++ b/packages/vue/__tests__/e2e/hydration-strat-visible.html @@ -55,21 +55,9 @@ }, } const CompWithRootVIf = { - props: ['show'], setup(props) { - const count = ref(0) - onMounted(() => { - console.log('hydrated') - window.isHydrated = true - }) - return () => { - const button = h( - 'button', - { onClick: () => count.value++ }, - count.value, - ) - return props.show ? button : createCommentVNode('v-if', true) - } + //
+ return createCommentVNode('v-if', true) }, } @@ -85,9 +73,7 @@ onMounted(() => { window.isRootMounted = true }) - return isVIf - ? () => h(AsyncComp, { show: window.propsShow.value }) - : () => h(AsyncComp) + return () => h(AsyncComp) }, }).mount('#app') diff --git a/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts index bb6e4740cba..98ab15da2db 100644 --- a/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts +++ b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts @@ -66,15 +66,17 @@ describe('async component hydration strategies', () => { await assertHydrationSuccess() }) - test('visible (root v-if)', async () => { + test('visible (root v-if) should not throw error', async () => { + const spy = vi.fn() + const currentPage = page() + currentPage.on('pageerror', spy) await goToCase('visible', '?v-if') await page().waitForFunction(() => window.isRootMounted) expect(await page().evaluate(() => window.isHydrated)).toBe(false) - await page().evaluate(() => { - window.propsShow.value = true - }) - await assertHydrationSuccess() + expect(spy).toBeCalledTimes(0) + currentPage.off('pageerror', spy) }) + test('media query', async () => { await goToCase('media') await page().waitForFunction(() => window.isRootMounted) From 54618ea8c25e6406091c72d6b79fb4109f06fc2b Mon Sep 17 00:00:00 2001 From: linzhe Date: Wed, 18 Sep 2024 20:26:39 +0800 Subject: [PATCH 06/10] chore: update --- packages/vue/__tests__/e2e/hydration-strat-visible.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue/__tests__/e2e/hydration-strat-visible.html b/packages/vue/__tests__/e2e/hydration-strat-visible.html index cd8aa6bef18..d01f4e44003 100644 --- a/packages/vue/__tests__/e2e/hydration-strat-visible.html +++ b/packages/vue/__tests__/e2e/hydration-strat-visible.html @@ -57,7 +57,7 @@ const CompWithRootVIf = { setup(props) { //
- return createCommentVNode('v-if', true) + return () => createCommentVNode('v-if', true) }, } From ce7ead77ced5103bb0ac15bf854889f35d0080eb Mon Sep 17 00:00:00 2001 From: linzhe Date: Wed, 18 Sep 2024 20:30:46 +0800 Subject: [PATCH 07/10] chore: update --- packages/vue/__tests__/e2e/hydration-strat-visible.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/vue/__tests__/e2e/hydration-strat-visible.html b/packages/vue/__tests__/e2e/hydration-strat-visible.html index d01f4e44003..3c2ecb26c8f 100644 --- a/packages/vue/__tests__/e2e/hydration-strat-visible.html +++ b/packages/vue/__tests__/e2e/hydration-strat-visible.html @@ -21,7 +21,6 @@ } window.isHydrated = false - const { createSSRApp, defineAsyncComponent, @@ -31,7 +30,6 @@ hydrateOnVisible, createCommentVNode, } = Vue - window.propsShow = ref(false) const Comp = { setup() { @@ -55,7 +53,7 @@ }, } const CompWithRootVIf = { - setup(props) { + setup() { //
return () => createCommentVNode('v-if', true) }, From 7a634eacef535b479487f1effa1c22ed923ee93b Mon Sep 17 00:00:00 2001 From: linzhe Date: Wed, 18 Sep 2024 20:31:56 +0800 Subject: [PATCH 08/10] chore: update --- packages/vue/__tests__/e2e/hydrationStrategies.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts index 98ab15da2db..69934d9591e 100644 --- a/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts +++ b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts @@ -7,7 +7,6 @@ declare const window: Window & { isRootMounted: boolean teardownCalled?: boolean show: Ref - propsShow: Ref } describe('async component hydration strategies', () => { From f7dc3eda1d2378b4c7caf6cab648f142b61d9e0f Mon Sep 17 00:00:00 2001 From: daiwei Date: Thu, 19 Sep 2024 09:11:50 +0800 Subject: [PATCH 09/10] test: simplify test cases --- .../e2e/hydration-strat-visible.html | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/vue/__tests__/e2e/hydration-strat-visible.html b/packages/vue/__tests__/e2e/hydration-strat-visible.html index 3c2ecb26c8f..c5ff04a1c66 100644 --- a/packages/vue/__tests__/e2e/hydration-strat-visible.html +++ b/packages/vue/__tests__/e2e/hydration-strat-visible.html @@ -15,8 +15,7 @@ if (isFragment) { document.getElementById('app').innerHTML = `onetwo` - } - if (isVIf) { + } else if (isVIf) { document.getElementById('app').innerHTML = `` } @@ -44,7 +43,9 @@ { onClick: () => count.value++ }, count.value, ) - if (isFragment) { + if(isVIf){ + return createCommentVNode('v-if', true) + } else if (isFragment) { return [[h('span', 'one')], button, h('span', 'two')] } else { return button @@ -52,18 +53,10 @@ } }, } - const CompWithRootVIf = { - setup() { - //
- return () => createCommentVNode('v-if', true) - }, - } const AsyncComp = defineAsyncComponent({ - loader: () => Promise.resolve(isVIf ? CompWithRootVIf : Comp), - hydrate: isVIf - ? hydrateOnVisible() - : hydrateOnVisible({ rootMargin: rootMargin + 'px' }), + loader: () => Promise.resolve(Comp), + hydrate: hydrateOnVisible({ rootMargin: rootMargin + 'px' }), }) createSSRApp({ From 751922693b36bf9adef804d8d934b961fca92aad Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 19 Sep 2024 01:15:35 +0000 Subject: [PATCH 10/10] [autofix.ci] apply automated fixes --- packages/vue/__tests__/e2e/hydration-strat-visible.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue/__tests__/e2e/hydration-strat-visible.html b/packages/vue/__tests__/e2e/hydration-strat-visible.html index c5ff04a1c66..489222f8606 100644 --- a/packages/vue/__tests__/e2e/hydration-strat-visible.html +++ b/packages/vue/__tests__/e2e/hydration-strat-visible.html @@ -43,7 +43,7 @@ { onClick: () => count.value++ }, count.value, ) - if(isVIf){ + if (isVIf) { return createCommentVNode('v-if', true) } else if (isFragment) { return [[h('span', 'one')], button, h('span', 'two')]