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/server-renderer/src/helpers/ssrRenderTeleport.ts

@@ -6,37 +6,37 @@ import {
   SSRBufferItem
 } from '../renderToString'
 
-export function ssrRenderPortal(
+export function ssrRenderTeleport(
   parentPush: PushFn,
   contentRenderFn: (push: PushFn) => void,
   target: string,
   disabled: boolean,
   parentComponent: ComponentInternalInstance
 ) {
-  parentPush('<!--portal start-->')
+  parentPush('<!--teleport start-->')
 
-  let portalContent: SSRBufferItem
+  let teleportContent: SSRBufferItem
 
   if (disabled) {
     contentRenderFn(parentPush)
-    portalContent = `<!---->`
+    teleportContent = `<!---->`
   } else {
     const { getBuffer, push } = createBuffer()
     contentRenderFn(push)
-    push(`<!---->`) // portal end anchor
-    portalContent = getBuffer()
+    push(`<!---->`) // teleport end anchor
+    teleportContent = getBuffer()
   }
 
   const context = parentComponent.appContext.provides[
     ssrContextKey as any
   ] as SSRContext
-  const portalBuffers =
-    context.__portalBuffers || (context.__portalBuffers = {})
-  if (portalBuffers[target]) {
-    portalBuffers[target].push(portalContent)
+  const teleportBuffers =
+    context.__teleportBuffers || (context.__teleportBuffers = {})
+  if (teleportBuffers[target]) {
+    teleportBuffers[target].push(teleportContent)
   } else {
-    portalBuffers[target] = [portalContent]
+    teleportBuffers[target] = [teleportContent]
   }
 
-  parentPush('<!--portal end-->')
+  parentPush('<!--teleport end-->')
 }

packages/server-renderer/src/index.ts

@@ -13,7 +13,7 @@ export {
 } from './helpers/ssrRenderAttrs'
 export { ssrInterpolate } from './helpers/ssrInterpolate'
 export { ssrRenderList } from './helpers/ssrRenderList'
-export { ssrRenderPortal } from './helpers/ssrRenderPortal'
+export { ssrRenderTeleport } from './helpers/ssrRenderTeleport'
 export { ssrRenderSuspense } from './helpers/ssrRenderSuspense'
 
 // v-model helpers

packages/server-renderer/src/renderToString.ts

@@ -32,7 +32,7 @@ import { compile } from '@vue/compiler-ssr'
 import { ssrRenderAttrs } from './helpers/ssrRenderAttrs'
 import { SSRSlots } from './helpers/ssrRenderSlot'
 import { CompilerError } from '@vue/compiler-dom'
-import { ssrRenderPortal } from './helpers/ssrRenderPortal'
+import { ssrRenderTeleport } from './helpers/ssrRenderTeleport'
 
 const {
   isVNode,
@@ -63,8 +63,8 @@ export type Props = Record<string, unknown>
 
 export type SSRContext = {
   [key: string]: any
-  portals?: Record<string, string>
-  __portalBuffers?: Record<string, SSRBuffer>
+  teleports?: Record<string, string>
+  __teleportBuffers?: Record<string, SSRBuffer>
 }
 
 export function createBuffer() {
@@ -123,7 +123,7 @@ export async function renderToString(
   input.provide(ssrContextKey, context)
   const buffer = await renderComponentVNode(vnode)
 
-  await resolvePortals(context)
+  await resolveTeleports(context)
 
   return unrollBuffer(buffer)
 }
@@ -256,8 +256,8 @@ function renderVNode(
         renderElementVNode(push, vnode, parentComponent)
       } else if (shapeFlag & ShapeFlags.COMPONENT) {
         push(renderComponentVNode(vnode, parentComponent))
-      } else if (shapeFlag & ShapeFlags.PORTAL) {
-        renderPortalVNode(push, vnode, parentComponent)
+      } else if (shapeFlag & ShapeFlags.TELEPORT) {
+        renderTeleportVNode(push, vnode, parentComponent)
       } else if (shapeFlag & ShapeFlags.SUSPENSE) {
         renderVNode(
           push,
@@ -360,24 +360,24 @@ function applySSRDirectives(
   return mergeProps(rawProps || {}, ...toMerge)
 }
 
-function renderPortalVNode(
+function renderTeleportVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance
 ) {
-  const target = vnode.props && vnode.props.target
+  const target = vnode.props && vnode.props.to
   const disabled = vnode.props && vnode.props.disabled
   if (!target) {
-    warn(`[@vue/server-renderer] Portal is missing target prop.`)
+    warn(`[@vue/server-renderer] Teleport is missing target prop.`)
     return []
   }
   if (!isString(target)) {
     warn(
-      `[@vue/server-renderer] Portal target must be a query selector string.`
+      `[@vue/server-renderer] Teleport target must be a query selector string.`
     )
     return []
   }
-  ssrRenderPortal(
+  ssrRenderTeleport(
     push,
     push => {
       renderVNodeChildren(
@@ -392,14 +392,14 @@ function renderPortalVNode(
   )
 }
 
-async function resolvePortals(context: SSRContext) {
-  if (context.__portalBuffers) {
-    context.portals = context.portals || {}
-    for (const key in context.__portalBuffers) {
+async function resolveTeleports(context: SSRContext) {
+  if (context.__teleportBuffers) {
+    context.teleports = context.teleports || {}
+    for (const key in context.__teleportBuffers) {
       // note: it's OK to await sequentially here because the Promises were
       // created eagerly in parallel.
-      context.portals[key] = unrollBuffer(
-        await Promise.all(context.__portalBuffers[key])
+      context.teleports[key] = unrollBuffer(
+        await Promise.all(context.__teleportBuffers[key])
       )
     }
   }