fix(runtime-core): update code

packages/runtime-core/src/component.ts

@@ -468,7 +468,9 @@ export interface ComponentInternalInstance {
    */
   ut?: (vars?: Record<string, string>) => void
   /**
-   *
+   * Stores the element's `data-v-owner` attribute value before the element `unmount`,
+   * it is set to the element by the `updateCssVars` function,
+   * and will be set to the element attribute again when the element is updated
    * @internal
    */
   utOwner?: number

packages/runtime-core/src/components/KeepAlive.ts

@@ -44,7 +44,6 @@ import { ComponentRenderContext } from '../componentPublicInstance'
 import { devtoolsComponentAdded } from '../devtools'
 import { isAsyncWrapper } from '../apiAsyncComponent'
 import { isSuspense } from './Suspense'
-import { setTeleportOwnerAttr } from '@vue/runtime-core'
 
 type MatchPattern = string | RegExp | (string | RegExp)[]
 
@@ -180,7 +179,6 @@ const KeepAliveImpl: ComponentOptions = {
     function unmount(vnode: VNode) {
       // reset the shapeFlag so it can be properly unmounted
       resetShapeFlag(vnode)
-      setTeleportOwnerAttr(vnode, instance)
       _unmount(vnode, instance, parentSuspense, true)
     }
 

packages/runtime-core/src/components/Suspense.ts

@@ -29,7 +29,6 @@ import {
   assertNumber
 } from '../warning'
 import { handleError, ErrorCodes } from '../errorHandling'
-import { setTeleportOwnerAttr } from '@vue/runtime-core'
 
 export interface SuspenseProps {
   onResolve?: () => void
@@ -491,7 +490,6 @@ function createSuspenseBoundary(
           // if the fallback tree was mounted, it may have been moved
           // as part of a parent suspense. get the latest anchor for insertion
           anchor = next(activeBranch)
-          setTeleportOwnerAttr(activeBranch, parentComponent)
           unmount(activeBranch, parentComponent, suspense, true)
         }
         if (!delayEnter) {

packages/runtime-core/src/components/Teleport.ts

@@ -25,8 +25,13 @@ export const teleportUTMap: Record<
 > = {}
 
 export const isTeleport = (type: any): boolean => type.__isTeleport
-
-export const setTeleportOwnerAttr = (
+/**
+ * Before the element is unloaded, if it contains
+ * the attribute `data-v-owner` from teleport injection,
+ * then store it on the parent component instance
+ * @private
+ */
+export const cacheTeleportOwnerAttr = (
   n1: VNode,
   parentComponent: ComponentInternalInstance | null
 ) => {
@@ -40,6 +45,47 @@ export const setTeleportOwnerAttr = (
     parentComponent.utOwner = el.getAttribute('data-v-owner')
   }
 }
+/**
+ * If the element's parent component attribute `utOwner` has a value,
+ * it means that the element has been marked by teleport
+ * as `data-v-owner` before the element is updated,
+ * then the element needs to be reset before mounting
+ * @private
+ */
+export const setTeleportOwnerAttrToEl = (
+  props: (VNodeProps & { [key: string]: any }) | null,
+  parentComponent: ComponentInternalInstance | null
+) => {
+  const dataVOwner = parentComponent ? parentComponent.utOwner : null
+  if (dataVOwner) {
+    if (!props) {
+      props = {}
+    }
+    props['data-v-owner'] = dataVOwner
+  }
+  return props
+}
+/**
+ * In the fast path, sometimes element updates will not re-update `teleport`
+ * E.g
+ * <teleport to="body">
+ *     <Comp>
+ *        <div class="text" v-if="showThing">
+ *         test
+ *       </div>
+ *     </Comp>
+ *   </teleport>
+ * so here you need to execute `instance.ut` according to `utOwner`
+ * @private
+ */
+export const updateTeleportsCssVarsFast = (
+  parentComponent: ComponentInternalInstance | null
+) => {
+  const dataVOwner = parentComponent ? parentComponent.utOwner : null
+  if (dataVOwner && teleportUTMap[dataVOwner as number]) {
+    teleportUTMap[dataVOwner as number]!()
+  }
+}
 
 const isTeleportDisabled = (props: VNode['props']): boolean =>
   props && (props.disabled || props.disabled === '')

packages/runtime-core/src/index.ts

@@ -92,7 +92,7 @@ export {
   Teleport,
   TeleportProps,
   teleportUTMap,
-  setTeleportOwnerAttr
+  cacheTeleportOwnerAttr
 } from './components/Teleport'
 export { Suspense, SuspenseProps } from './components/Suspense'
 export { KeepAlive, KeepAliveProps } from './components/KeepAlive'

packages/runtime-core/src/renderer.ts

@@ -57,10 +57,11 @@ import {
   SuspenseImpl
 } from './components/Suspense'
 import {
-  setTeleportOwnerAttr,
+  cacheTeleportOwnerAttr,
   TeleportImpl,
   TeleportVNode,
-  teleportUTMap
+  setTeleportOwnerAttrToEl,
+  updateTeleportsCssVarsFast
 } from './components/Teleport'
 import { isKeepAlive, KeepAliveContext } from './components/KeepAlive'
 import { registerHMR, unregisterHMR, isHmrUpdating } from './hmr'
@@ -372,7 +373,7 @@ function baseCreateRenderer(
 
     // patching & not same type, unmount old tree
     if (n1 && !isSameVNodeType(n1, n2)) {
-      setTeleportOwnerAttr(n1, parentComponent)
+      cacheTeleportOwnerAttr(n1, parentComponent)
       anchor = getNextHostNode(n1)
       unmount(n1, parentComponent, parentSuspense, true)
       n1 = null
@@ -624,14 +625,8 @@ function baseCreateRenderer(
     let el: RendererElement
     let vnodeHook: VNodeHook | undefined | null
     const { type, shapeFlag, transition, dirs } = vnode
-    let props = vnode.props
-    const dataVOwner = parentComponent ? parentComponent.utOwner : null
-    if (dataVOwner) {
-      if (!props) {
-        props = {}
-      }
-      props['data-v-owner'] = dataVOwner
-    }
+    let props = setTeleportOwnerAttrToEl(vnode.props, parentComponent)
+
     el = vnode.el = hostCreateElement(
       vnode.type as string,
       isSVG,
@@ -719,9 +714,7 @@ function baseCreateRenderer(
     }
     hostInsert(el, container, anchor)
 
-    if (dataVOwner && teleportUTMap[dataVOwner as number]) {
-      teleportUTMap[dataVOwner as number]!()
-    }
+    updateTeleportsCssVarsFast(parentComponent)
 
     if (
       (vnodeHook = props && props.onVnodeMounted) ||
@@ -1870,7 +1863,7 @@ function baseCreateRenderer(
     // i = 0, e1 = 0, e2 = -1
     else if (i > e2) {
       while (i <= e1) {
-        setTeleportOwnerAttr(c1[i], parentComponent)
+        cacheTeleportOwnerAttr(c1[i], parentComponent)
         unmount(c1[i], parentComponent, parentSuspense, true)
         i++
       }
@@ -1921,7 +1914,7 @@ function baseCreateRenderer(
       for (i = s1; i <= e1; i++) {
         const prevChild = c1[i]
         if (patched >= toBePatched) {
-          setTeleportOwnerAttr(prevChild, parentComponent)
+          cacheTeleportOwnerAttr(prevChild, parentComponent)
           // all new children have been patched so this can only be a removal
           unmount(prevChild, parentComponent, parentSuspense, true)
           continue
@@ -1942,7 +1935,7 @@ function baseCreateRenderer(
           }
         }
         if (newIndex === undefined) {
-          setTeleportOwnerAttr(prevChild, parentComponent)
+          cacheTeleportOwnerAttr(prevChild, parentComponent)
           unmount(prevChild, parentComponent, parentSuspense, true)
         } else {
           newIndexToOldIndexMap[newIndex - s2] = i + 1
@@ -2267,7 +2260,7 @@ function baseCreateRenderer(
     if (update) {
       // so that scheduler will no longer invoke it
       update.active = false
-      setTeleportOwnerAttr(subTree, instance)
+      cacheTeleportOwnerAttr(subTree, instance)
       unmount(subTree, instance, parentSuspense, doRemove)
     }
     // unmounted hook
@@ -2319,7 +2312,7 @@ function baseCreateRenderer(
     start = 0
   ) => {
     for (let i = start; i < children.length; i++) {
-      setTeleportOwnerAttr(children[i], parentComponent)
+      cacheTeleportOwnerAttr(children[i], parentComponent)
       unmount(children[i], parentComponent, parentSuspense, doRemove, optimized)
     }
   }