fix(runtime-core): use correct container for patch Teleport inside …

packages/compiler-core/src/transforms/transformElement.ts

@@ -35,7 +35,8 @@ import {
   MERGE_PROPS,
   TO_HANDLERS,
   TELEPORT,
-  KEEP_ALIVE
+  KEEP_ALIVE,
+  SUSPENSE
 } from '../runtimeHelpers'
 import {
   getInnerRange,
@@ -89,6 +90,8 @@ export const transformElement: NodeTransform = (node, context) => {
     let shouldUseBlock =
       // dynamic component may resolve to plain elements
       isDynamicComponent ||
+      vnodeTag === TELEPORT ||
+      vnodeTag === SUSPENSE ||
       (!isComponent &&
         // <svg> and <foreignObject> must be forced into blocks so that block
         // updates inside get proper isSVG flag at runtime. (#639, #643)

packages/runtime-core/__tests__/components/Teleport.spec.ts

@@ -6,9 +6,11 @@ import {
   Teleport,
   Text,
   ref,
-  nextTick
+  nextTick,
+  markRaw
 } from '@vue/runtime-test'
 import { createVNode, Fragment } from '../../src/vnode'
+import { compile } from 'vue'
 
 describe('renderer: teleport', () => {
   test('should work', () => {
@@ -299,4 +301,49 @@ describe('renderer: teleport', () => {
     )
     expect(serializeInner(target)).toBe('')
   })
+
+  test('should work with block tree', async () => {
+    const target = nodeOps.createElement('div')
+    const root = nodeOps.createElement('div')
+    const disabled = ref(false)
+
+    const App = {
+      setup() {
+        return {
+          target: markRaw(target),
+          disabled
+        }
+      },
+      render: compile(`
+      <teleport :to="target" :disabled="disabled">
+        <div>teleported</div><span>{{ disabled }}</span>
+      </teleport>
+      <div>root</div>
+      `)
+    }
+    render(h(App), root)
+    expect(serializeInner(root)).toMatchInlineSnapshot(
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+    )
+    expect(serializeInner(target)).toMatchInlineSnapshot(
+      `"<div>teleported</div><span>false</span>"`
+    )
+
+    disabled.value = true
+    await nextTick()
+    expect(serializeInner(root)).toMatchInlineSnapshot(
+      `"<!--teleport start--><div>teleported</div><span>true</span><!--teleport end--><div>root</div>"`
+    )
+    expect(serializeInner(target)).toBe(``)
+
+    // toggle back
+    disabled.value = false
+    await nextTick()
+    expect(serializeInner(root)).toMatchInlineSnapshot(
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+    )
+    expect(serializeInner(target)).toMatchInlineSnapshot(
+      `"<div>teleported</div><span>false</span>"`
+    )
+  })
 })

packages/runtime-core/src/component.ts

@@ -601,8 +601,6 @@ function finishComponentSetup(
       if (__DEV__) {
         endMeasure(instance, `compile`)
       }
-      // mark the function as runtime compiled
-      ;(Component.render as InternalRenderFunction)._rc = true
     }
 
     instance.render = (Component.render || NOOP) as InternalRenderFunction

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

@@ -139,6 +139,13 @@ export const TeleportImpl = {
           parentSuspense,
           isSVG
         )
+        if (n2.patchFlag > 0 && n2.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+          const oldChildren = n1.children as VNode[]
+          const children = n2.children as VNode[]
+          for (let i = 0; i < children.length; i++) {
+            children[i].el = oldChildren[i].el
+          }
+        }
       } else if (!optimized) {
         patchChildren(
           n1,

packages/runtime-core/src/renderer.ts

@@ -960,7 +960,8 @@ function baseCreateRenderer(
         // which also requires the correct parent container
         !isSameVNodeType(oldVNode, newVNode) ||
         // - In the case of a component, it could contain anything.
-        oldVNode.shapeFlag & ShapeFlags.COMPONENT
+        oldVNode.shapeFlag & ShapeFlags.COMPONENT ||
+        oldVNode.shapeFlag & ShapeFlags.TELEPORT
           ? hostParentNode(oldVNode.el!)!
           : // In other cases, the parent container is not actually used so we
             // just pass the block element here to avoid a DOM parentNode call.

packages/runtime-core/src/vnode.ts

@@ -411,11 +411,7 @@ function _createVNode(
     // the EVENTS flag is only for hydration and if it is the only flag, the
     // vnode should not be considered dynamic due to handler caching.
     patchFlag !== PatchFlags.HYDRATE_EVENTS &&
-    (patchFlag > 0 ||
-      shapeFlag & ShapeFlags.SUSPENSE ||
-      shapeFlag & ShapeFlags.TELEPORT ||
-      shapeFlag & ShapeFlags.STATEFUL_COMPONENT ||
-      shapeFlag & ShapeFlags.FUNCTIONAL_COMPONENT)
+    (patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT)
   ) {
     currentBlock.push(vnode)
   }

packages/vue/src/index.ts

@@ -5,6 +5,7 @@ import { compile, CompilerOptions, CompilerError } from '@vue/compiler-dom'
 import { registerRuntimeCompiler, RenderFunction, warn } from '@vue/runtime-dom'
 import * as runtimeDom from '@vue/runtime-dom'
 import { isString, NOOP, generateCodeFrame, extend } from '@vue/shared'
+import { InternalRenderFunction } from 'packages/runtime-core/src/component'
 
 __DEV__ && initDev()
 
@@ -74,6 +75,10 @@ function compileToFunction(
   const render = (__GLOBAL__
     ? new Function(code)()
     : new Function('Vue', code)(runtimeDom)) as RenderFunction
+
+  // mark the function as runtime compiled
+  ;(render as InternalRenderFunction)._rc = true
+
   return (compileCache[key] = render)
 }