From 01fbcfcf72ddb925bd3310a57c33bc514b3d4554 Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Fri, 25 Oct 2024 11:10:55 +0800
Subject: [PATCH 1/7] fix(ssr): handle the data-allow-mismatch component in ssr
---
packages/runtime-core/src/hydration.ts | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index c49db529c38..fb193834f89 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -302,7 +302,9 @@ export function createHydrationFunctions(
getContainerType(container),
optimized,
)
-
+ if (vnode.component!.subTree) {
+ vnode.el = vnode.component!.subTree.el
+ }
// #3787
// if component is async, it may get moved / unmounted before its
// inner component is loaded, so we need to give it a placeholder
From fca2108eba972f058c8e248b1c0da12483f826e4 Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Fri, 25 Oct 2024 11:48:36 +0800
Subject: [PATCH 2/7] chore: update
---
packages/runtime-core/src/hydration.ts | 4 +---
packages/runtime-core/src/renderer.ts | 1 +
2 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index fb193834f89..c49db529c38 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -302,9 +302,7 @@ export function createHydrationFunctions(
getContainerType(container),
optimized,
)
- if (vnode.component!.subTree) {
- vnode.el = vnode.component!.subTree.el
- }
+
// #3787
// if component is async, it may get moved / unmounted before its
// inner component is loaded, so we need to give it a placeholder
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 90cc22f5470..765e10bd388 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1328,6 +1328,7 @@ function baseCreateRenderer(
parentSuspense,
null,
)
+ initialVNode.el = instance.subTree.el
if (__DEV__) {
endMeasure(instance, `hydrate`)
}
From 222eb532fed00cd8a4f7b61960f5969f8ca81772 Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Fri, 25 Oct 2024 13:14:29 +0800
Subject: [PATCH 3/7] chore: update
---
packages/runtime-core/src/renderer.ts | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 765e10bd388..05e3958858d 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1328,7 +1328,10 @@ function baseCreateRenderer(
parentSuspense,
null,
)
- initialVNode.el = instance.subTree.el
+ // when data-allow-mismatch is set, the component vnode's el may be incorrect, so it should be updated
+ if (initialVNode) {
+ initialVNode.el = instance.subTree.el
+ }
if (__DEV__) {
endMeasure(instance, `hydrate`)
}
From 478801f89c1c0e9bf8924fcf1bae404b3a44ff47 Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Fri, 25 Oct 2024 13:47:19 +0800
Subject: [PATCH 4/7] chore: add test case
---
.../runtime-core/__tests__/hydration.spec.ts | 40 +++++++++++++++++++
1 file changed, 40 insertions(+)
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index a1fb8cde33f..45093550bce 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -21,6 +21,7 @@ import {
h,
nextTick,
onMounted,
+ onServerPrefetch,
openBlock,
reactive,
ref,
@@ -518,6 +519,45 @@ describe('SSR hydration', () => {
)
})
+ test('with data-allow-mismatch component when using onServerPrefetch', async () => {
+ const Comp = {
+ template: `
+ Comp2
+ `,
+ }
+ let foo: any
+ const App = {
+ setup() {
+ const flag = ref(true)
+ foo = () => {
+ flag.value = false
+ }
+ onServerPrefetch(() => (flag.value = false))
+ return { flag }
+ },
+ components: {
+ Comp,
+ },
+ template: `
+
+
+
+ `,
+ }
+ // hydrate
+ const container = document.createElement('div')
+ container.innerHTML = await renderToString(h(App))
+ createSSRApp(App).mount(container)
+ expect(container.innerHTML).toBe(
+ 'Comp2
',
+ )
+ foo()
+ await nextTick()
+ expect(container.innerHTML).toBe(
+ '',
+ )
+ })
+
test('Teleport unmount (full integration)', async () => {
const Comp1 = {
template: `
From f8e4e615fa72068ac415db00ee6c46d9f8f82eee Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Fri, 25 Oct 2024 14:19:57 +0800
Subject: [PATCH 5/7] chore: update
---
packages/runtime-core/src/hydration.ts | 4 ++++
packages/runtime-core/src/renderer.ts | 5 +----
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index c49db529c38..a9a4c3f444e 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -716,6 +716,10 @@ export function createHydrationFunctions(
getContainerType(container),
slotScopeIds,
)
+ // the component vnode's el should be updated when a mismatch occurs.
+ if (parentComponent && parentComponent.subTree === vnode) {
+ parentComponent.vnode.el = vnode.el
+ }
return next
}
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 05e3958858d..64d8cbc171a 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1328,10 +1328,7 @@ function baseCreateRenderer(
parentSuspense,
null,
)
- // when data-allow-mismatch is set, the component vnode's el may be incorrect, so it should be updated
- if (initialVNode) {
- initialVNode.el = instance.subTree.el
- }
+
if (__DEV__) {
endMeasure(instance, `hydrate`)
}
From 8c6ed86f35b3ee001fbaa80f176d2696cf7645a6 Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Fri, 25 Oct 2024 14:21:44 +0800
Subject: [PATCH 6/7] chore: update
---
packages/runtime-core/src/renderer.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 64d8cbc171a..90cc22f5470 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1328,7 +1328,6 @@ function baseCreateRenderer(
parentSuspense,
null,
)
-
if (__DEV__) {
endMeasure(instance, `hydrate`)
}
From b238dde7f01be08c07c2b53411cc38d6e0e2fcb5 Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Fri, 25 Oct 2024 14:36:02 +0800
Subject: [PATCH 7/7] chore: update
---
packages/runtime-core/src/hydration.ts | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index a9a4c3f444e..41ae64cd19e 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -41,6 +41,7 @@ import {
import type { TeleportImpl, TeleportVNode } from './components/Teleport'
import { isAsyncWrapper } from './apiAsyncComponent'
import { isReactive } from '@vue/reactivity'
+import { updateHOCHostEl } from './componentRenderUtils'
export type RootHydrateFunction = (
vnode: VNode,
@@ -717,8 +718,9 @@ export function createHydrationFunctions(
slotScopeIds,
)
// the component vnode's el should be updated when a mismatch occurs.
- if (parentComponent && parentComponent.subTree === vnode) {
+ if (parentComponent) {
parentComponent.vnode.el = vnode.el
+ updateHOCHostEl(parentComponent, vnode.el)
}
return next
}