root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(teleport): handle disabled teleport with updateCssVars (#12113) 

close #12112
This commit is contained in:
linzhe 2024-10-11 10:50:36 +08:00 committed by GitHub
parent b4d35349d8
commit 76a8223199
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/runtime-core/src/components/Teleport.ts
View File

@ -147,7 +147,7 @@ export const TeleportImpl = {
} }
if (!disabled) { if (!disabled) {
mount(target, targetAnchor) mount(target, targetAnchor)
updateCssVars(n2) updateCssVars(n2, false)
} }
} else if (__DEV__ && !disabled) { } else if (__DEV__ && !disabled) {
warn( warn(
@ -160,7 +160,7 @@ export const TeleportImpl = {
if (disabled) { if (disabled) {
mount(container, mainAnchor) mount(container, mainAnchor)
updateCssVars(n2) updateCssVars(n2, true)
} }
if (isTeleportDeferred(n2.props)) { if (isTeleportDeferred(n2.props)) {
@ -267,7 +267,7 @@ export const TeleportImpl = {
) )
} }
} }
updateCssVars(n2) updateCssVars(n2, disabled)
} }
}, },
@ -389,12 +389,13 @@ function hydrateTeleport(
querySelector, querySelector,
)) ))
if (target) { if (target) {
const disabled = isTeleportDisabled(vnode.props)
// if multiple teleports rendered to the same target element, we need to // 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 // pick up from where the last teleport finished instead of the first node
const targetNode = const targetNode =
(target as TeleportTargetElement)._lpa || target.firstChild (target as TeleportTargetElement)._lpa || target.firstChild
if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) { if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
if (isTeleportDisabled(vnode.props)) { if (disabled) {
vnode.anchor = hydrateChildren( vnode.anchor = hydrateChildren(
nextSibling(node), nextSibling(node),
vnode, vnode,
@ -446,7 +447,7 @@ function hydrateTeleport(
) )
} }
} }
updateCssVars(vnode) updateCssVars(vnode, disabled)
} }
return vnode.anchor && nextSibling(vnode.anchor as Node) return vnode.anchor && nextSibling(vnode.anchor as Node)
} }
@ -462,13 +463,20 @@ export const Teleport = TeleportImpl as unknown as {
} }
} }
function updateCssVars(vnode: VNode) { function updateCssVars(vnode: VNode, isDisabled: boolean) {
// presence of .ut method indicates owner component uses css vars. // presence of .ut method indicates owner component uses css vars.
// code path here can assume browser environment. // code path here can assume browser environment.
const ctx = vnode.ctx const ctx = vnode.ctx
if (ctx && ctx.ut) { if (ctx && ctx.ut) {
let node = vnode.targetStart let node, anchor
while (node && node !== vnode.targetAnchor) { 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) if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
node = node.nextSibling node = node.nextSibling
} }

1
packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
View File

@ -350,6 +350,7 @@ describe('useCssVars', () => {
expect(() => render(h(App), root)).not.toThrow(TypeError) expect(() => render(h(App), root)).not.toThrow(TypeError)
await nextTick() await nextTick()
expect(target.children.length).toBe(0) expect(target.children.length).toBe(0)
expect(root.children[0].outerHTML.includes('data-v-owner')).toBe(true)
}) })
test('with string style', async () => { test('with string style', async () => {