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/).
2020-03-31 10:52:42 -04:00
parent 8080c38323
commit eee5095692
26 changed files with 290 additions and 283 deletions
--- a/packages/runtime-core/tests/components/Suspense.spec.ts
+++ b/packages/runtime-core/tests/components/Suspense.spec.ts
@@ -731,5 +731,5 @@ describe('Suspense', () => {
    expect(serializeInner(root)).toBe(`<div>Child A</div><div>Child B</div>`)
  })

-  test.todo('portal inside suspense')
+  test.todo('teleport inside suspense')
 })
--- a/packages/runtime-core/tests/components/Teleport.spec.ts
+++ b/packages/runtime-core/tests/components/Teleport.spec.ts
@@ -3,28 +3,28 @@ import {
  serializeInner,
  render,
  h,
-  Portal,
+  Teleport,
  Text,
  ref,
  nextTick
 } from '@vue/runtime-test'
 import { createVNode, Fragment } from '../../src/vnode'

-describe('renderer: portal', () => {
+describe('renderer: teleport', () => {
  test('should work', () => {
    const target = nodeOps.createElement('div')
    const root = nodeOps.createElement('div')

    render(
      h(() => [
-        h(Portal, { target }, h('div', 'teleported')),
+        h(Teleport, { to: target }, h('div', 'teleported')),
        h('div', 'root')
      ]),
      root
    )

    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(target)).toMatchInlineSnapshot(
      `"<div>teleported</div>"`
@@ -39,14 +39,14 @@ describe('renderer: portal', () => {

    render(
      h(() => [
-        h(Portal, { target: target.value }, h('div', 'teleported')),
+        h(Teleport, { to: target.value }, h('div', 'teleported')),
        h('div', 'root')
      ]),
      root
    )

    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(targetA)).toMatchInlineSnapshot(
      `"<div>teleported</div>"`
@@ -57,7 +57,7 @@ describe('renderer: portal', () => {
    await nextTick()

    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(targetA)).toMatchInlineSnapshot(`""`)
    expect(serializeInner(targetB)).toMatchInlineSnapshot(
@@ -70,7 +70,7 @@ describe('renderer: portal', () => {
    const root = nodeOps.createElement('div')
    const children = ref([h('div', 'teleported')])

-    render(h(Portal, { target }, children.value), root)
+    render(h(Teleport, { to: target }, children.value), root)
    expect(serializeInner(target)).toMatchInlineSnapshot(
      `"<div>teleported</div>"`
    )
@@ -96,7 +96,7 @@ describe('renderer: portal', () => {

    render(
      h(() => [
-        h(Portal, { target }, h('div', 'teleported')),
+        h(Teleport, { to: target }, h('div', 'teleported')),
        h('div', 'root')
      ]),
      root
@@ -109,28 +109,28 @@ describe('renderer: portal', () => {
    expect(serializeInner(target)).toBe('')
  })

-  test('multiple portal with same target', () => {
+  test('multiple teleport with same target', () => {
    const target = nodeOps.createElement('div')
    const root = nodeOps.createElement('div')

    render(
      h('div', [
-        h(Portal, { target }, h('div', 'one')),
-        h(Portal, { target }, 'two')
+        h(Teleport, { to: target }, h('div', 'one')),
+        h(Teleport, { to: target }, 'two')
      ]),
      root
    )

    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!--portal start--><!--portal end--><!--portal start--><!--portal end--></div>"`
+      `"<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>"`
    )
    expect(serializeInner(target)).toMatchInlineSnapshot(`"<div>one</div>two"`)

    // update existing content
    render(
      h('div', [
-        h(Portal, { target }, [h('div', 'one'), h('div', 'two')]),
-        h(Portal, { target }, 'three')
+        h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
+        h(Teleport, { to: target }, 'three')
      ]),
      root
    )
@@ -139,38 +139,38 @@ describe('renderer: portal', () => {
    )

    // toggling
-    render(h('div', [null, h(Portal, { target }, 'three')]), root)
+    render(h('div', [null, h(Teleport, { to: target }, 'three')]), root)
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!----><!--portal start--><!--portal end--></div>"`
+      `"<div><!----><!--teleport start--><!--teleport end--></div>"`
    )
    expect(serializeInner(target)).toMatchInlineSnapshot(`"three"`)

    // toggle back
    render(
      h('div', [
-        h(Portal, { target }, [h('div', 'one'), h('div', 'two')]),
-        h(Portal, { target }, 'three')
+        h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
+        h(Teleport, { to: target }, 'three')
      ]),
      root
    )
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!--portal start--><!--portal end--><!--portal start--><!--portal end--></div>"`
+      `"<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>"`
    )
    // should append
    expect(serializeInner(target)).toMatchInlineSnapshot(
      `"three<div>one</div><div>two</div>"`
    )

-    // toggle the other portal
+    // toggle the other teleport
    render(
      h('div', [
-        h(Portal, { target }, [h('div', 'one'), h('div', 'two')]),
+        h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
        null
      ]),
      root
    )
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!--portal start--><!--portal end--><!----></div>"`
+      `"<div><!--teleport start--><!--teleport end--><!----></div>"`
    )
    expect(serializeInner(target)).toMatchInlineSnapshot(
      `"<div>one</div><div>two</div>"`
@@ -183,14 +183,14 @@ describe('renderer: portal', () => {

    const renderWithDisabled = (disabled: boolean) => {
      return h(Fragment, [
-        h(Portal, { target, disabled }, h('div', 'teleported')),
+        h(Teleport, { to: target, disabled }, h('div', 'teleported')),
        h('div', 'root')
      ])
    }

    render(renderWithDisabled(false), root)
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(target)).toMatchInlineSnapshot(
      `"<div>teleported</div>"`
@@ -198,33 +198,33 @@ describe('renderer: portal', () => {

    render(renderWithDisabled(true), root)
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><div>teleported</div><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(target)).toBe(``)

    // toggle back
    render(renderWithDisabled(false), root)
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(target)).toMatchInlineSnapshot(
      `"<div>teleported</div>"`
    )
  })

-  test('moving portal while enabled', () => {
+  test('moving teleport while enabled', () => {
    const target = nodeOps.createElement('div')
    const root = nodeOps.createElement('div')

    render(
      h(Fragment, [
-        h(Portal, { target }, h('div', 'teleported')),
+        h(Teleport, { to: target }, h('div', 'teleported')),
        h('div', 'root')
      ]),
      root
    )
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(target)).toMatchInlineSnapshot(
      `"<div>teleported</div>"`
@@ -233,12 +233,12 @@ describe('renderer: portal', () => {
    render(
      h(Fragment, [
        h('div', 'root'),
-        h(Portal, { target }, h('div', 'teleported'))
+        h(Teleport, { to: target }, h('div', 'teleported'))
      ]),
      root
    )
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div>root</div><!--portal start--><!--portal end-->"`
+      `"<div>root</div><!--teleport start--><!--teleport end-->"`
    )
    expect(serializeInner(target)).toMatchInlineSnapshot(
      `"<div>teleported</div>"`
@@ -246,56 +246,56 @@ describe('renderer: portal', () => {

    render(
      h(Fragment, [
-        h(Portal, { target }, h('div', 'teleported')),
+        h(Teleport, { to: target }, h('div', 'teleported')),
        h('div', 'root')
      ]),
      root
    )
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(target)).toMatchInlineSnapshot(
      `"<div>teleported</div>"`
    )
  })

-  test('moving portal while disabled', () => {
+  test('moving teleport while disabled', () => {
    const target = nodeOps.createElement('div')
    const root = nodeOps.createElement('div')

    render(
      h(Fragment, [
-        h(Portal, { target, disabled: true }, h('div', 'teleported')),
+        h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
        h('div', 'root')
      ]),
      root
    )
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><div>teleported</div><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(target)).toBe('')

    render(
      h(Fragment, [
        h('div', 'root'),
-        h(Portal, { target, disabled: true }, h('div', 'teleported'))
+        h(Teleport, { to: target, disabled: true }, h('div', 'teleported'))
      ]),
      root
    )
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div>root</div><!--portal start--><div>teleported</div><!--portal end-->"`
+      `"<div>root</div><!--teleport start--><div>teleported</div><!--teleport end-->"`
    )
    expect(serializeInner(target)).toBe('')

    render(
      h(Fragment, [
-        h(Portal, { target, disabled: true }, h('div', 'teleported')),
+        h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
        h('div', 'root')
      ]),
      root
    )
    expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--portal start--><div>teleported</div><!--portal end--><div>root</div>"`
+      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
    )
    expect(serializeInner(target)).toBe('')
  })
--- a/packages/runtime-core/tests/hydration.spec.ts
+++ b/packages/runtime-core/tests/hydration.spec.ts
@@ -4,7 +4,7 @@ import {
  ref,
  nextTick,
  VNode,
-  Portal,
+  Teleport,
  createStaticVNode,
  Suspense,
  onMounted,
@@ -153,18 +153,18 @@ describe('SSR hydration', () => {
    )
  })

-  test('Portal', async () => {
+  test('Teleport', async () => {
    const msg = ref('foo')
    const fn = jest.fn()
-    const portalContainer = document.createElement('div')
-    portalContainer.id = 'portal'
-    portalContainer.innerHTML = `<span>foo</span><span class="foo"></span><!---->`
-    document.body.appendChild(portalContainer)
+    const teleportContainer = document.createElement('div')
+    teleportContainer.id = 'teleport'
+    teleportContainer.innerHTML = `<span>foo</span><span class="foo"></span><!---->`
+    document.body.appendChild(teleportContainer)

    const { vnode, container } = mountWithHydration(
-      '<!--portal start--><!--portal end-->',
+      '<!--teleport start--><!--teleport end-->',
      () =>
-        h(Portal, { target: '#portal' }, [
+        h(Teleport, { to: '#teleport' }, [
          h('span', msg.value),
          h('span', { class: msg.value, onClick: fn })
        ])
@@ -173,120 +173,120 @@ describe('SSR hydration', () => {
    expect(vnode.el).toBe(container.firstChild)
    expect(vnode.anchor).toBe(container.lastChild)

-    expect(vnode.target).toBe(portalContainer)
+    expect(vnode.target).toBe(teleportContainer)
    expect((vnode.children as VNode[])[0].el).toBe(
-      portalContainer.childNodes[0]
+      teleportContainer.childNodes[0]
    )
    expect((vnode.children as VNode[])[1].el).toBe(
-      portalContainer.childNodes[1]
+      teleportContainer.childNodes[1]
    )
-    expect(vnode.targetAnchor).toBe(portalContainer.childNodes[2])
+    expect(vnode.targetAnchor).toBe(teleportContainer.childNodes[2])

    // event handler
-    triggerEvent('click', portalContainer.querySelector('.foo')!)
+    triggerEvent('click', teleportContainer.querySelector('.foo')!)
    expect(fn).toHaveBeenCalled()

    msg.value = 'bar'
    await nextTick()
-    expect(portalContainer.innerHTML).toBe(
+    expect(teleportContainer.innerHTML).toBe(
      `<span>bar</span><span class="bar"></span><!---->`
    )
  })

-  test('Portal (multiple + integration)', async () => {
+  test('Teleport (multiple + integration)', async () => {
    const msg = ref('foo')
    const fn1 = jest.fn()
    const fn2 = jest.fn()

    const Comp = () => [
-      h(Portal, { target: '#portal2' }, [
+      h(Teleport, { to: '#teleport2' }, [
        h('span', msg.value),
        h('span', { class: msg.value, onClick: fn1 })
      ]),
-      h(Portal, { target: '#portal2' }, [
+      h(Teleport, { to: '#teleport2' }, [
        h('span', msg.value + '2'),
        h('span', { class: msg.value + '2', onClick: fn2 })
      ])
    ]

-    const portalContainer = document.createElement('div')
-    portalContainer.id = 'portal2'
+    const teleportContainer = document.createElement('div')
+    teleportContainer.id = 'teleport2'
    const ctx: SSRContext = {}
    const mainHtml = await renderToString(h(Comp), ctx)
    expect(mainHtml).toMatchInlineSnapshot(
-      `"<!--[--><!--portal start--><!--portal end--><!--portal start--><!--portal end--><!--]-->"`
+      `"<!--[--><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--><!--]-->"`
    )

-    const portalHtml = ctx.portals!['#portal2']
-    expect(portalHtml).toMatchInlineSnapshot(
+    const teleportHtml = ctx.teleports!['#teleport2']
+    expect(teleportHtml).toMatchInlineSnapshot(
      `"<span>foo</span><span class=\\"foo\\"></span><!----><span>foo2</span><span class=\\"foo2\\"></span><!---->"`
    )

-    portalContainer.innerHTML = portalHtml
-    document.body.appendChild(portalContainer)
+    teleportContainer.innerHTML = teleportHtml
+    document.body.appendChild(teleportContainer)

    const { vnode, container } = mountWithHydration(mainHtml, Comp)
    expect(vnode.el).toBe(container.firstChild)
-    const portalVnode1 = (vnode.children as VNode[])[0]
-    const portalVnode2 = (vnode.children as VNode[])[1]
-    expect(portalVnode1.el).toBe(container.childNodes[1])
-    expect(portalVnode1.anchor).toBe(container.childNodes[2])
-    expect(portalVnode2.el).toBe(container.childNodes[3])
-    expect(portalVnode2.anchor).toBe(container.childNodes[4])
+    const teleportVnode1 = (vnode.children as VNode[])[0]
+    const teleportVnode2 = (vnode.children as VNode[])[1]
+    expect(teleportVnode1.el).toBe(container.childNodes[1])
+    expect(teleportVnode1.anchor).toBe(container.childNodes[2])
+    expect(teleportVnode2.el).toBe(container.childNodes[3])
+    expect(teleportVnode2.anchor).toBe(container.childNodes[4])

-    expect(portalVnode1.target).toBe(portalContainer)
-    expect((portalVnode1 as any).children[0].el).toBe(
-      portalContainer.childNodes[0]
+    expect(teleportVnode1.target).toBe(teleportContainer)
+    expect((teleportVnode1 as any).children[0].el).toBe(
+      teleportContainer.childNodes[0]
    )
-    expect(portalVnode1.targetAnchor).toBe(portalContainer.childNodes[2])
+    expect(teleportVnode1.targetAnchor).toBe(teleportContainer.childNodes[2])

-    expect(portalVnode2.target).toBe(portalContainer)
-    expect((portalVnode2 as any).children[0].el).toBe(
-      portalContainer.childNodes[3]
+    expect(teleportVnode2.target).toBe(teleportContainer)
+    expect((teleportVnode2 as any).children[0].el).toBe(
+      teleportContainer.childNodes[3]
    )
-    expect(portalVnode2.targetAnchor).toBe(portalContainer.childNodes[5])
+    expect(teleportVnode2.targetAnchor).toBe(teleportContainer.childNodes[5])

    // // event handler
-    triggerEvent('click', portalContainer.querySelector('.foo')!)
+    triggerEvent('click', teleportContainer.querySelector('.foo')!)
    expect(fn1).toHaveBeenCalled()

-    triggerEvent('click', portalContainer.querySelector('.foo2')!)
+    triggerEvent('click', teleportContainer.querySelector('.foo2')!)
    expect(fn2).toHaveBeenCalled()

    msg.value = 'bar'
    await nextTick()
-    expect(portalContainer.innerHTML).toMatchInlineSnapshot(
+    expect(teleportContainer.innerHTML).toMatchInlineSnapshot(
      `"<span>bar</span><span class=\\"bar\\"></span><!----><span>bar2</span><span class=\\"bar2\\"></span><!---->"`
    )
  })

-  test('Portal (disabled)', async () => {
+  test('Teleport (disabled)', async () => {
    const msg = ref('foo')
    const fn1 = jest.fn()
    const fn2 = jest.fn()

    const Comp = () => [
      h('div', 'foo'),
-      h(Portal, { target: '#portal3', disabled: true }, [
+      h(Teleport, { to: '#teleport3', disabled: true }, [
        h('span', msg.value),
        h('span', { class: msg.value, onClick: fn1 })
      ]),
      h('div', { class: msg.value + '2', onClick: fn2 }, 'bar')
    ]

-    const portalContainer = document.createElement('div')
-    portalContainer.id = 'portal3'
+    const teleportContainer = document.createElement('div')
+    teleportContainer.id = 'teleport3'
    const ctx: SSRContext = {}
    const mainHtml = await renderToString(h(Comp), ctx)
    expect(mainHtml).toMatchInlineSnapshot(
-      `"<!--[--><div>foo</div><!--portal start--><span>foo</span><span class=\\"foo\\"></span><!--portal end--><div class=\\"foo2\\">bar</div><!--]-->"`
+      `"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class=\\"foo\\"></span><!--teleport end--><div class=\\"foo2\\">bar</div><!--]-->"`
    )

-    const portalHtml = ctx.portals!['#portal3']
-    expect(portalHtml).toMatchInlineSnapshot(`"<!---->"`)
+    const teleportHtml = ctx.teleports!['#teleport3']
+    expect(teleportHtml).toMatchInlineSnapshot(`"<!---->"`)

-    portalContainer.innerHTML = portalHtml
-    document.body.appendChild(portalContainer)
+    teleportContainer.innerHTML = teleportHtml
+    document.body.appendChild(teleportContainer)

    const { vnode, container } = mountWithHydration(mainHtml, Comp)
    expect(vnode.el).toBe(container.firstChild)
@@ -294,19 +294,19 @@ describe('SSR hydration', () => {

    expect(children[0].el).toBe(container.childNodes[1])

-    const portalVnode = children[1]
-    expect(portalVnode.el).toBe(container.childNodes[2])
-    expect((portalVnode.children as VNode[])[0].el).toBe(
+    const teleportVnode = children[1]
+    expect(teleportVnode.el).toBe(container.childNodes[2])
+    expect((teleportVnode.children as VNode[])[0].el).toBe(
      container.childNodes[3]
    )
-    expect((portalVnode.children as VNode[])[1].el).toBe(
+    expect((teleportVnode.children as VNode[])[1].el).toBe(
      container.childNodes[4]
    )
-    expect(portalVnode.anchor).toBe(container.childNodes[5])
+    expect(teleportVnode.anchor).toBe(container.childNodes[5])
    expect(children[2].el).toBe(container.childNodes[6])

-    expect(portalVnode.target).toBe(portalContainer)
-    expect(portalVnode.targetAnchor).toBe(portalContainer.childNodes[0])
+    expect(teleportVnode.target).toBe(teleportContainer)
+    expect(teleportVnode.targetAnchor).toBe(teleportContainer.childNodes[0])

    // // event handler
    triggerEvent('click', container.querySelector('.foo')!)
@@ -318,7 +318,7 @@ describe('SSR hydration', () => {
    msg.value = 'bar'
    await nextTick()
    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<!--[--><div>foo</div><!--portal start--><span>bar</span><span class=\\"bar\\"></span><!--portal end--><div class=\\"bar2\\">bar</div><!--]-->"`
+      `"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class=\\"bar\\"></span><!--teleport end--><div class=\\"bar2\\">bar</div><!--]-->"`
    )
  })

--- a/packages/runtime-core/src/apiOptions.ts
+++ b/packages/runtime-core/src/apiOptions.ts
@@ -88,7 +88,7 @@ export interface ComponentOptionsBase<
  call?: never
  // type-only differentiators for built-in Vnode types
  __isFragment?: never
-  __isPortal?: never
+  __isTeleport?: never
  __isSuspense?: never
 }

--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -11,26 +11,26 @@ import { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
 import { isString, ShapeFlags } from '@vue/shared'
 import { warn } from '../warning'

-export interface PortalProps {
-  target: string | RendererElement
+export interface TeleportProps {
+  to: string | RendererElement
  disabled?: boolean
 }

-export const isPortal = (type: any): boolean => type.__isPortal
+export const isTeleport = (type: any): boolean => type.__isTeleport

-const isPortalDisabled = (props: VNode['props']): boolean =>
+const isTeleportDisabled = (props: VNode['props']): boolean =>
  props && (props.disabled || props.disabled === '')

 const resolveTarget = <T = RendererElement>(
-  props: PortalProps | null,
+  props: TeleportProps | null,
  select: RendererOptions['querySelector']
 ): T | null => {
-  const targetSelector = props && props.target
+  const targetSelector = props && props.to
  if (isString(targetSelector)) {
    if (!select) {
      __DEV__ &&
        warn(
-          `Current renderer does not support string target for Portals. ` +
+          `Current renderer does not support string target for Teleports. ` +
            `(missing querySelector renderer option)`
        )
      return null
@@ -39,21 +39,21 @@ const resolveTarget = <T = RendererElement>(
      if (!target) {
        __DEV__ &&
          warn(
-            `Failed to locate Portal target with selector "${targetSelector}".`
+            `Failed to locate Teleport target with selector "${targetSelector}".`
          )
      }
      return target as any
    }
  } else {
    if (__DEV__ && !targetSelector) {
-      warn(`Invalid Portal target: ${targetSelector}`)
+      warn(`Invalid Teleport target: ${targetSelector}`)
    }
    return targetSelector as any
  }
 }

-export const PortalImpl = {
-  __isPortal: true,
+export const TeleportImpl = {
+  __isTeleport: true,
  process(
    n1: VNode | null,
    n2: VNode,
@@ -72,32 +72,32 @@ export const PortalImpl = {
      o: { insert, querySelector, createText, createComment }
    } = internals

-    const disabled = isPortalDisabled(n2.props)
+    const disabled = isTeleportDisabled(n2.props)
    const { shapeFlag, children } = n2
    if (n1 == null) {
      // insert anchors in the main view
      const placeholder = (n2.el = __DEV__
-        ? createComment('portal start')
+        ? createComment('teleport start')
        : createText(''))
      const mainAnchor = (n2.anchor = __DEV__
-        ? createComment('portal end')
+        ? createComment('teleport end')
        : createText(''))
      insert(placeholder, container, anchor)
      insert(mainAnchor, container, anchor)

      const target = (n2.target = resolveTarget(
-        n2.props as PortalProps,
+        n2.props as TeleportProps,
        querySelector
      ))
      const targetAnchor = (n2.targetAnchor = createText(''))
      if (target) {
        insert(targetAnchor, target)
      } else if (__DEV__) {
-        warn('Invalid Portal target on mount:', target, `(${typeof target})`)
+        warn('Invalid Teleport target on mount:', target, `(${typeof target})`)
      }

      const mount = (container: RendererElement, anchor: RendererNode) => {
-        // Portal *always* has Array children. This is enforced in both the
+        // Teleport *always* has Array children. This is enforced in both the
        // compiler and vnode children normalization.
        if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
          mountChildren(
@@ -123,12 +123,12 @@ export const PortalImpl = {
      const mainAnchor = (n2.anchor = n1.anchor)!
      const target = (n2.target = n1.target)!
      const targetAnchor = (n2.targetAnchor = n1.targetAnchor)!
-      const wasDisabled = isPortalDisabled(n1.props)
+      const wasDisabled = isTeleportDisabled(n1.props)
      const currentContainer = wasDisabled ? container : target
      const currentAnchor = wasDisabled ? mainAnchor : targetAnchor

      if (n2.dynamicChildren) {
-        // fast path when the portal happens to be a block root
+        // fast path when the teleport happens to be a block root
        patchBlockChildren(
          n1.dynamicChildren!,
          n2.dynamicChildren,
@@ -153,45 +153,45 @@ export const PortalImpl = {
        if (!wasDisabled) {
          // enabled -> disabled
          // move into main container
-          movePortal(
+          moveTeleport(
            n2,
            container,
            mainAnchor,
            internals,
-            PortalMoveTypes.TOGGLE
+            TeleportMoveTypes.TOGGLE
          )
        }
      } else {
        // target changed
-        if ((n2.props && n2.props.target) !== (n1.props && n1.props.target)) {
+        if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
          const nextTarget = (n2.target = resolveTarget(
-            n2.props as PortalProps,
+            n2.props as TeleportProps,
            querySelector
          ))
          if (nextTarget) {
-            movePortal(
+            moveTeleport(
              n2,
              nextTarget,
              null,
              internals,
-              PortalMoveTypes.TARGET_CHANGE
+              TeleportMoveTypes.TARGET_CHANGE
            )
          } else if (__DEV__) {
            warn(
-              'Invalid Portal target on update:',
+              'Invalid Teleport target on update:',
              target,
              `(${typeof target})`
            )
          }
        } else if (wasDisabled) {
          // disabled -> enabled
-          // move into portal target
-          movePortal(
+          // move into teleport target
+          moveTeleport(
            n2,
            target,
            targetAnchor,
            internals,
-            PortalMoveTypes.TOGGLE
+            TeleportMoveTypes.TOGGLE
          )
        }
      }
@@ -211,38 +211,38 @@ export const PortalImpl = {
    }
  },

-  move: movePortal,
-  hydrate: hydratePortal
+  move: moveTeleport,
+  hydrate: hydrateTeleport
 }

-export const enum PortalMoveTypes {
+export const enum TeleportMoveTypes {
  TARGET_CHANGE,
  TOGGLE, // enable / disable
  REORDER // moved in the main view
 }

-function movePortal(
+function moveTeleport(
  vnode: VNode,
  container: RendererElement,
  parentAnchor: RendererNode | null,
  { o: { insert }, m: move }: RendererInternals,
-  moveType: PortalMoveTypes = PortalMoveTypes.REORDER
+  moveType: TeleportMoveTypes = TeleportMoveTypes.REORDER
 ) {
  // move target anchor if this is a target change.
-  if (moveType === PortalMoveTypes.TARGET_CHANGE) {
+  if (moveType === TeleportMoveTypes.TARGET_CHANGE) {
    insert(vnode.targetAnchor!, container, parentAnchor)
  }
  const { el, anchor, shapeFlag, children, props } = vnode
-  const isReorder = moveType === PortalMoveTypes.REORDER
+  const isReorder = moveType === TeleportMoveTypes.REORDER
  // move main view anchor if this is a re-order.
  if (isReorder) {
    insert(el!, container, parentAnchor)
  }
-  // if this is a re-order and portal is enabled (content is in target)
+  // if this is a re-order and teleport is enabled (content is in target)
  // do not move children. So the opposite is: only move children if this
-  // is not a reorder, or the portal is disabled
-  if (!isReorder || isPortalDisabled(props)) {
-    // Portal has either Array children or no children.
+  // is not a reorder, or the teleport is disabled
+  if (!isReorder || isTeleportDisabled(props)) {
+    // Teleport has either Array children or no children.
    if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      for (let i = 0; i < (children as VNode[]).length; i++) {
        move(
@@ -260,12 +260,12 @@ function movePortal(
  }
 }

-interface PortalTargetElement extends Element {
-  // last portal target
+interface TeleportTargetElement extends Element {
+  // last teleport target
  _lpa?: Node | null
 }

-function hydratePortal(
+function hydrateTeleport(
  node: Node,
  vnode: VNode,
  parentComponent: ComponentInternalInstance | null,
@@ -284,15 +284,16 @@ function hydratePortal(
  ) => Node | null
 ): Node | null {
  const target = (vnode.target = resolveTarget<Element>(
-    vnode.props as PortalProps,
+    vnode.props as TeleportProps,
    querySelector
  ))
  if (target) {
-    // if multiple portals rendered to the same target element, we need to
-    // pick up from where the last portal finished instead of the first node
-    const targetNode = (target as PortalTargetElement)._lpa || target.firstChild
+    // 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
+    const targetNode =
+      (target as TeleportTargetElement)._lpa || target.firstChild
    if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-      if (isPortalDisabled(vnode.props)) {
+      if (isTeleportDisabled(vnode.props)) {
        vnode.anchor = hydrateChildren(
          nextSibling(node),
          vnode,
@@ -313,7 +314,7 @@ function hydratePortal(
          optimized
        )
      }
-      ;(target as PortalTargetElement)._lpa = nextSibling(
+      ;(target as TeleportTargetElement)._lpa = nextSibling(
        vnode.targetAnchor as Node
      )
    }
@@ -322,7 +323,7 @@ function hydratePortal(
 }

 // Force-casted public typing for h and TSX props inference
-export const Portal = (PortalImpl as any) as {
-  __isPortal: true
-  new (): { $props: VNodeProps & PortalProps }
+export const Teleport = (TeleportImpl as any) as {
+  __isTeleport: true
+  new (): { $props: VNodeProps & TeleportProps }
 }
--- a/packages/runtime-core/src/h.ts
+++ b/packages/runtime-core/src/h.ts
@@ -6,7 +6,7 @@ import {
  Fragment,
  isVNode
 } from './vnode'
-import { Portal, PortalProps } from './components/Portal'
+import { Teleport, TeleportProps } from './components/Teleport'
 import { Suspense, SuspenseProps } from './components/Suspense'
 import { isObject, isArray } from '@vue/shared'
 import { RawSlots } from './componentSlots'
@@ -68,7 +68,7 @@ type RawChildren =
 // fake constructor type returned from `defineComponent`
 interface Constructor<P = any> {
  __isFragment?: never
-  __isPortal?: never
+  __isTeleport?: never
  __isSuspense?: never
  new (): { $props: P }
 }
@@ -92,10 +92,10 @@ export function h(
  children?: VNodeArrayChildren
 ): VNode

-// portal (target prop is required)
+// teleport (target prop is required)
 export function h(
-  type: typeof Portal,
-  props: RawProps & PortalProps,
+  type: typeof Teleport,
+  props: RawProps & TeleportProps,
  children: RawChildren
 ): VNode

--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -18,7 +18,7 @@ import {
  SuspenseBoundary,
  queueEffectWithSuspense
 } from './components/Suspense'
-import { PortalImpl } from './components/Portal'
+import { TeleportImpl } from './components/Teleport'

 export type RootHydrateFunction = (
  vnode: VNode<Node, Element>,
@@ -172,11 +172,11 @@ export function createHydrationFunctions(
          return isFragmentStart
            ? locateClosingAsyncAnchor(node)
            : nextSibling(node)
-        } else if (shapeFlag & ShapeFlags.PORTAL) {
+        } else if (shapeFlag & ShapeFlags.TELEPORT) {
          if (domType !== DOMNodeTypes.COMMENT) {
            return onMismatch()
          }
-          return (vnode.type as typeof PortalImpl).hydrate(
+          return (vnode.type as typeof TeleportImpl).hydrate(
            node,
            vnode,
            parentComponent,
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -53,7 +53,7 @@ export {
 } from './vnode'
 // Internal Components
 export { Text, Comment, Fragment } from './vnode'
-export { Portal, PortalProps } from './components/Portal'
+export { Teleport, TeleportProps } from './components/Teleport'
 export { Suspense, SuspenseProps } from './components/Suspense'
 export { KeepAlive, KeepAliveProps } from './components/KeepAlive'
 export {
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -58,7 +58,7 @@ import {
  queueEffectWithSuspense,
  SuspenseImpl
 } from './components/Suspense'
-import { PortalImpl } from './components/Portal'
+import { TeleportImpl } from './components/Teleport'
 import { KeepAliveSink, isKeepAlive } from './components/KeepAlive'
 import { registerHMR, unregisterHMR } from './hmr'
 import {
@@ -412,8 +412,8 @@ function baseCreateRenderer(
            isSVG,
            optimized
          )
-        } else if (shapeFlag & ShapeFlags.PORTAL) {
-          ;(type as typeof PortalImpl).process(
+        } else if (shapeFlag & ShapeFlags.TELEPORT) {
+          ;(type as typeof TeleportImpl).process(
            n1,
            n2,
            container,
@@ -1207,7 +1207,7 @@ function baseCreateRenderer(
        patch(
          prevTree,
          nextTree,
-          // parent may have changed if it's in a portal
+          // parent may have changed if it's in a teleport
          hostParentNode(prevTree.el!)!,
          // anchor may have changed if it's in a fragment
          getNextHostNode(prevTree),
@@ -1653,8 +1653,8 @@ function baseCreateRenderer(
      return
    }

-    if (shapeFlag & ShapeFlags.PORTAL) {
-      ;(type as typeof PortalImpl).move(vnode, container, anchor, internals)
+    if (shapeFlag & ShapeFlags.TELEPORT) {
+      ;(type as typeof TeleportImpl).move(vnode, container, anchor, internals)
      return
    }

@@ -1739,9 +1739,9 @@ function baseCreateRenderer(
        unmountChildren(children as VNode[], parentComponent, parentSuspense)
      }

-      // an unmounted portal should always remove its children
-      if (shapeFlag & ShapeFlags.PORTAL) {
-        ;(vnode.type as typeof PortalImpl).remove(vnode, internals)
+      // an unmounted teleport should always remove its children
+      if (shapeFlag & ShapeFlags.TELEPORT) {
+        ;(vnode.type as typeof TeleportImpl).remove(vnode, internals)
      }

      if (doRemove) {
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -29,7 +29,7 @@ import { DirectiveBinding } from './directives'
 import { TransitionHooks } from './components/BaseTransition'
 import { warn } from './warning'
 import { currentScopeId } from './helpers/scopeId'
-import { PortalImpl, isPortal } from './components/Portal'
+import { TeleportImpl, isTeleport } from './components/Teleport'
 import { currentRenderingInstance } from './componentRenderUtils'
 import { RendererNode, RendererElement } from './renderer'

@@ -50,7 +50,7 @@ export type VNodeTypes =
  | typeof Static
  | typeof Comment
  | typeof Fragment
-  | typeof PortalImpl
+  | typeof TeleportImpl
  | typeof SuspenseImpl

 export type VNodeRef =
@@ -113,8 +113,8 @@ export interface VNode<HostNode = RendererNode, HostElement = RendererElement> {
  // DOM
  el: HostNode | null
  anchor: HostNode | null // fragment anchor
-  target: HostElement | null // portal target
-  targetAnchor: HostNode | null // portal target anchor
+  target: HostElement | null // teleport target
+  targetAnchor: HostNode | null // teleport target anchor

  // optimization only
  shapeFlag: number
@@ -283,8 +283,8 @@ function _createVNode(
    ? ShapeFlags.ELEMENT
    : __FEATURE_SUSPENSE__ && isSuspense(type)
      ? ShapeFlags.SUSPENSE
-      : isPortal(type)
-        ? ShapeFlags.PORTAL
+      : isTeleport(type)
+        ? ShapeFlags.TELEPORT
        : isObject(type)
          ? ShapeFlags.STATEFUL_COMPONENT
          : isFunction(type)
@@ -430,7 +430,7 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
  } else if (typeof children === 'object') {
    // Normalize slot to plain children
    if (
-      (shapeFlag & ShapeFlags.ELEMENT || shapeFlag & ShapeFlags.PORTAL) &&
+      (shapeFlag & ShapeFlags.ELEMENT || shapeFlag & ShapeFlags.TELEPORT) &&
      (children as any).default
    ) {
      normalizeChildren(vnode, (children as any).default())
@@ -446,8 +446,8 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
    type = ShapeFlags.SLOTS_CHILDREN
  } else {
    children = String(children)
-    // force portal children to array so it can be moved around
-    if (shapeFlag & ShapeFlags.PORTAL) {
+    // force teleport children to array so it can be moved around
+    if (shapeFlag & ShapeFlags.TELEPORT) {
      type = ShapeFlags.ARRAY_CHILDREN
      children = [createTextVNode(children as string)]
    } else {