refactor: rename <portal> to <teleport>

BREAKING CHANGE: `<portal>` has been renamed to `<teleport>`.

    `target` prop is also renmaed to `to`, so the new usage will be:

    ```html
    <Teleport to="#modal-layer" :disabled="isMobile">
      <div class="modal">
        hello
      </div>
    </Teleport>
    ```

    The primary reason for the renaming is to avoid potential naming
    conflict with [native portals](https://wicg.github.io/portals/).

packages/compiler-core/src/runtimeHelpers.ts

@@ -1,5 +1,5 @@
 export const FRAGMENT = Symbol(__DEV__ ? `Fragment` : ``)
-export const PORTAL = Symbol(__DEV__ ? `Portal` : ``)
+export const TELEPORT = Symbol(__DEV__ ? `Teleport` : ``)
 export const SUSPENSE = Symbol(__DEV__ ? `Suspense` : ``)
 export const KEEP_ALIVE = Symbol(__DEV__ ? `KeepAlive` : ``)
 export const BASE_TRANSITION = Symbol(__DEV__ ? `BaseTransition` : ``)
@@ -33,7 +33,7 @@ export const WITH_CTX = Symbol(__DEV__ ? `withCtx` : ``)
 // Using `any` here because TS doesn't allow symbols as index type.
 export const helperNameMap: any = {
   [FRAGMENT]: `Fragment`,
-  [PORTAL]: `Portal`,
+  [TELEPORT]: `Teleport`,
   [SUSPENSE]: `Suspense`,
   [KEEP_ALIVE]: `KeepAlive`,
   [BASE_TRANSITION]: `BaseTransition`,

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

@@ -28,7 +28,7 @@ import {
   RESOLVE_DYNAMIC_COMPONENT,
   MERGE_PROPS,
   TO_HANDLERS,
-  PORTAL,
+  TELEPORT,
   KEEP_ALIVE
 } from '../runtimeHelpers'
 import {
@@ -124,8 +124,8 @@ export const transformElement: NodeTransform = (node, context) => {
 
       const shouldBuildAsSlots =
         isComponent &&
-        // Portal is not a real component and has dedicated runtime handling
-        vnodeTag !== PORTAL &&
+        // Teleport is not a real component and has dedicated runtime handling
+        vnodeTag !== TELEPORT &&
         // explained above.
         vnodeTag !== KEEP_ALIVE
 
@@ -135,7 +135,7 @@ export const transformElement: NodeTransform = (node, context) => {
         if (hasDynamicSlots) {
           patchFlag |= PatchFlags.DYNAMIC_SLOTS
         }
-      } else if (node.children.length === 1 && vnodeTag !== PORTAL) {
+      } else if (node.children.length === 1 && vnodeTag !== TELEPORT) {
         const child = node.children[0]
         const type = child.type
         // check for dynamic text children
@@ -217,7 +217,7 @@ export function resolveComponentType(
     }
   }
 
-  // 2. built-in components (Portal, Transition, KeepAlive, Suspense...)
+  // 2. built-in components (Teleport, Transition, KeepAlive, Suspense...)
   const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag)
   if (builtIn) {
     // built-ins are simply fallthroughs / have special handling during ssr

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

@@ -27,7 +27,7 @@ import {
   FRAGMENT,
   CREATE_COMMENT,
   OPEN_BLOCK,
-  PORTAL
+  TELEPORT
 } from '../runtimeHelpers'
 import { injectProp } from '../utils'
 import { PatchFlags, PatchFlagNames } from '@vue/shared'
@@ -218,8 +218,8 @@ function createChildrenCodegenNode(
       // component vnodes are always tracked and its children are
       // compiled into slots so no need to make it a block
       ((firstChild as ElementNode).tagType !== ElementTypes.COMPONENT ||
-        // portal has component type but isn't always tracked
-        vnodeCall.tag === PORTAL)
+        // teleport has component type but isn't always tracked
+        vnodeCall.tag === TELEPORT)
     ) {
       vnodeCall.isBlock = true
       helper(OPEN_BLOCK)

packages/compiler-core/src/utils.ts

@@ -25,7 +25,7 @@ import {
 import { TransformContext } from './transform'
 import {
   MERGE_PROPS,
-  PORTAL,
+  TELEPORT,
   SUSPENSE,
   KEEP_ALIVE,
   BASE_TRANSITION
@@ -38,8 +38,8 @@ export const isBuiltInType = (tag: string, expected: string): boolean =>
   tag === expected || tag === hyphenate(expected)
 
 export function isCoreComponent(tag: string): symbol | void {
-  if (isBuiltInType(tag, 'Portal')) {
-    return PORTAL
+  if (isBuiltInType(tag, 'Teleport')) {
+    return TELEPORT
   } else if (isBuiltInType(tag, 'Suspense')) {
     return SUSPENSE
   } else if (isBuiltInType(tag, 'KeepAlive')) {