From cdbb748515a305b77b9ea7e49b58411ae998c00c Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Sat, 5 Oct 2024 09:49:41 +0800
Subject: [PATCH 1/5] fix(runtime-core): handle disabled teleport with
updateCssVars
---
packages/runtime-core/src/components/Teleport.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index d268322cb12..5319d0f1c9a 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -467,7 +467,7 @@ function updateCssVars(vnode: VNode) {
// code path here can assume browser environment.
const ctx = vnode.ctx
if (ctx && ctx.ut) {
- let node = vnode.targetStart
+ let node = vnode.targetStart || (vnode.children as VNode[])[0].el!
while (node && node !== vnode.targetAnchor) {
if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
node = node.nextSibling
From 52b4a7f3d835c985f5586a98d874fc9fa82810dd Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Sat, 5 Oct 2024 10:08:06 +0800
Subject: [PATCH 2/5] chore: update test
---
packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
index 06b3e714132..732ece53725 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -350,6 +350,7 @@ describe('useCssVars', () => {
expect(() => render(h(App), root)).not.toThrow(TypeError)
await nextTick()
expect(target.children.length).toBe(0)
+ expect(root.children[0].outerHTML).toBe('')
})
test('with string style', async () => {
From 03af83197ecb649da308982acebf45b7c9336eaa Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Sat, 5 Oct 2024 10:16:26 +0800
Subject: [PATCH 3/5] chore: update test
---
packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
index 732ece53725..c4df0873140 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -350,7 +350,7 @@ describe('useCssVars', () => {
expect(() => render(h(App), root)).not.toThrow(TypeError)
await nextTick()
expect(target.children.length).toBe(0)
- expect(root.children[0].outerHTML).toBe('')
+ expect(root.children[0].outerHTML.includes('data-v-owner')).toBe(true)
})
test('with string style', async () => {
From 2f3321e33671396b84465a2aba3d1b3f9738315b Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Sat, 5 Oct 2024 12:25:05 +0800
Subject: [PATCH 4/5] chore: update
---
packages/runtime-core/src/components/Teleport.ts | 12 ++++++++++--
1 file changed, 10 insertions(+), 2 deletions(-)
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index 5319d0f1c9a..7fb91df86f5 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -463,12 +463,20 @@ export const Teleport = TeleportImpl as unknown as {
}
function updateCssVars(vnode: VNode) {
+ const isDisabled = isTeleportDisabled(vnode.props)
// presence of .ut method indicates owner component uses css vars.
// code path here can assume browser environment.
const ctx = vnode.ctx
if (ctx && ctx.ut) {
- let node = vnode.targetStart || (vnode.children as VNode[])[0].el!
- while (node && node !== vnode.targetAnchor) {
+ let node, anchor
+ if (isDisabled) {
+ node = vnode.el
+ anchor = vnode.anchor
+ } else {
+ node = vnode.targetStart
+ anchor = vnode.targetAnchor
+ }
+ while (node && node !== anchor) {
if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
node = node.nextSibling
}
From 719b0f0cee67613ad39444a04da1db4ffbb62f0f Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Sat, 5 Oct 2024 12:54:57 +0800
Subject: [PATCH 5/5] chore: update
---
packages/runtime-core/src/components/Teleport.ts | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index 7fb91df86f5..5def1b2d721 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -147,7 +147,7 @@ export const TeleportImpl = {
}
if (!disabled) {
mount(target, targetAnchor)
- updateCssVars(n2)
+ updateCssVars(n2, false)
}
} else if (__DEV__ && !disabled) {
warn(
@@ -160,7 +160,7 @@ export const TeleportImpl = {
if (disabled) {
mount(container, mainAnchor)
- updateCssVars(n2)
+ updateCssVars(n2, true)
}
if (isTeleportDeferred(n2.props)) {
@@ -267,7 +267,7 @@ export const TeleportImpl = {
)
}
}
- updateCssVars(n2)
+ updateCssVars(n2, disabled)
}
},
@@ -389,12 +389,13 @@ function hydrateTeleport(
querySelector,
))
if (target) {
+ const disabled = isTeleportDisabled(vnode.props)
// if multiple teleports rendered to the same target element, we need to
// pick up from where the last teleport finished instead of the first node
const targetNode =
(target as TeleportTargetElement)._lpa || target.firstChild
if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
- if (isTeleportDisabled(vnode.props)) {
+ if (disabled) {
vnode.anchor = hydrateChildren(
nextSibling(node),
vnode,
@@ -446,7 +447,7 @@ function hydrateTeleport(
)
}
}
- updateCssVars(vnode)
+ updateCssVars(vnode, disabled)
}
return vnode.anchor && nextSibling(vnode.anchor as Node)
}
@@ -462,8 +463,7 @@ export const Teleport = TeleportImpl as unknown as {
}
}
-function updateCssVars(vnode: VNode) {
- const isDisabled = isTeleportDisabled(vnode.props)
+function updateCssVars(vnode: VNode, isDisabled: boolean) {
// presence of .ut method indicates owner component uses css vars.
// code path here can assume browser environment.
const ctx = vnode.ctx