RESOLVE_DIRECTIVE,
TO_HANDLERS,
helperNameMap,
- PORTAL,
+ TELEPORT,
RESOLVE_DYNAMIC_COMPONENT,
SUSPENSE,
KEEP_ALIVE,
})
})
- test('should handle <Portal> with normal children', () => {
+ test('should handle <Teleport> with normal children', () => {
function assert(tag: string) {
const { root, node } = parseWithElementTransform(
`<${tag} target="#foo"><span /></${tag}>`
)
expect(root.components.length).toBe(0)
- expect(root.helpers).toContain(PORTAL)
+ expect(root.helpers).toContain(TELEPORT)
expect(node).toMatchObject({
- tag: PORTAL,
+ tag: TELEPORT,
props: createObjectMatcher({
target: '#foo'
}),
})
}
- assert(`portal`)
- assert(`Portal`)
+ assert(`teleport`)
+ assert(`Teleport`)
})
test('should handle <Suspense>', () => {
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` : ``)
// 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`,
RESOLVE_DYNAMIC_COMPONENT,
MERGE_PROPS,
TO_HANDLERS,
- PORTAL,
+ TELEPORT,
KEEP_ALIVE
} from '../runtimeHelpers'
import {
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
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
}
}
- // 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
FRAGMENT,
CREATE_COMMENT,
OPEN_BLOCK,
- PORTAL
+ TELEPORT
} from '../runtimeHelpers'
import { injectProp } from '../utils'
import { PatchFlags, PatchFlagNames } from '@vue/shared'
// 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)
import { TransformContext } from './transform'
import {
MERGE_PROPS,
- PORTAL,
+ TELEPORT,
SUSPENSE,
KEEP_ALIVE,
BASE_TRANSITION
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')) {
import { compile } from '../src'
-describe('ssr compile: portal', () => {
+describe('ssr compile: teleport', () => {
test('should work', () => {
- expect(compile(`<portal :target="target"><div/></portal>`).code)
+ expect(compile(`<teleport :target="target"><div/></teleport>`).code)
.toMatchInlineSnapshot(`
- "const { ssrRenderPortal: _ssrRenderPortal } = require(\\"@vue/server-renderer\\")
+ "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _ssrRenderPortal(_push, (_push) => {
+ _ssrRenderTeleport(_push, (_push) => {
_push(\`<div></div>\`)
}, _ctx.target, false, _parent)
}"
})
test('disabled prop handling', () => {
- expect(compile(`<portal :target="target" disabled><div/></portal>`).code)
- .toMatchInlineSnapshot(`
- "const { ssrRenderPortal: _ssrRenderPortal } = require(\\"@vue/server-renderer\\")
+ expect(
+ compile(`<teleport :target="target" disabled><div/></teleport>`).code
+ ).toMatchInlineSnapshot(`
+ "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _ssrRenderPortal(_push, (_push) => {
+ _ssrRenderTeleport(_push, (_push) => {
_push(\`<div></div>\`)
}, _ctx.target, true, _parent)
}"
`)
expect(
- compile(`<portal :target="target" :disabled="foo"><div/></portal>`).code
+ compile(`<teleport :target="target" :disabled="foo"><div/></teleport>`)
+ .code
).toMatchInlineSnapshot(`
- "const { ssrRenderPortal: _ssrRenderPortal } = require(\\"@vue/server-renderer\\")
+ "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
- _ssrRenderPortal(_push, (_push) => {
+ _ssrRenderTeleport(_push, (_push) => {
_push(\`<div></div>\`)
}, _ctx.target, _ctx.foo, _parent)
}"
export const enum SSRErrorCodes {
X_SSR_CUSTOM_DIRECTIVE_NO_TRANSFORM = DOMErrorCodes.__EXTEND_POINT__,
X_SSR_UNSAFE_ATTR_NAME,
- X_SSR_NO_PORTAL_TARGET
+ X_SSR_NO_TELEPORT_TARGET
}
export const SSRErrorMessages: { [code: number]: string } = {
[SSRErrorCodes.X_SSR_CUSTOM_DIRECTIVE_NO_TRANSFORM]: `Custom directive is missing corresponding SSR transform and will be ignored.`,
[SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME]: `Unsafe attribute name for SSR.`,
- [SSRErrorCodes.X_SSR_NO_PORTAL_TARGET]: `No target prop on portal element.`
+ [SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET]: `No target prop on teleport element.`
}
export const SSR_LOOSE_CONTAIN = Symbol(`ssrLooseContain`)
export const SSR_RENDER_DYNAMIC_MODEL = Symbol(`ssrRenderDynamicModel`)
export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`ssrGetDynamicModelProps`)
-export const SSR_RENDER_PORTAL = Symbol(`ssrRenderPortal`)
+export const SSR_RENDER_TELEPORT = Symbol(`ssrRenderTeleport`)
export const SSR_RENDER_SUSPENSE = Symbol(`ssrRenderSuspense`)
export const ssrHelpers = {
[SSR_LOOSE_CONTAIN]: `ssrLooseContain`,
[SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,
[SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
- [SSR_RENDER_PORTAL]: `ssrRenderPortal`,
+ [SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
[SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`
}
buildSlots,
FunctionExpression,
TemplateChildNode,
- PORTAL,
+ TELEPORT,
createIfStatement,
createSimpleExpression,
getBaseTransformPreset,
processChildren,
processChildrenAsStatement
} from '../ssrCodegenTransform'
-import { ssrProcessPortal } from './ssrTransformPortal'
+import { ssrProcessTeleport } from './ssrTransformTeleport'
import {
ssrProcessSuspense,
ssrTransformSuspense
if (!node.ssrCodegenNode) {
// this is a built-in component that fell-through.
const component = componentTypeMap.get(node)!
- if (component === PORTAL) {
- return ssrProcessPortal(node, context)
+ if (component === TELEPORT) {
+ return ssrProcessTeleport(node, context)
} else if (component === SUSPENSE) {
return ssrProcessSuspense(node, context)
} else {
processChildrenAsStatement
} from '../ssrCodegenTransform'
import { createSSRCompilerError, SSRErrorCodes } from '../errors'
-import { SSR_RENDER_PORTAL } from '../runtimeHelpers'
+import { SSR_RENDER_TELEPORT } from '../runtimeHelpers'
// Note: this is a 2nd-pass codegen transform.
-export function ssrProcessPortal(
+export function ssrProcessTeleport(
node: ComponentNode,
context: SSRTransformContext
) {
const targetProp = findProp(node, 'target')
if (!targetProp) {
context.onError(
- createSSRCompilerError(SSRErrorCodes.X_SSR_NO_PORTAL_TARGET, node.loc)
+ createSSRCompilerError(SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET, node.loc)
)
return
}
if (!target) {
context.onError(
createSSRCompilerError(
- SSRErrorCodes.X_SSR_NO_PORTAL_TARGET,
+ SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET,
targetProp.loc
)
)
)
contentRenderFn.body = processChildrenAsStatement(node.children, context)
context.pushStatement(
- createCallExpression(context.helper(SSR_RENDER_PORTAL), [
+ createCallExpression(context.helper(SSR_RENDER_TELEPORT), [
`_push`,
contentRenderFn,
target,
expect(serializeInner(root)).toBe(`<div>Child A</div><div>Child B</div>`)
})
- test.todo('portal inside suspense')
+ test.todo('teleport inside suspense')
})
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>"`
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>"`
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(
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>"`
)
render(
h(() => [
- h(Portal, { target }, h('div', 'teleported')),
+ h(Teleport, { to: target }, h('div', 'teleported')),
h('div', 'root')
]),
root
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
)
)
// 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>"`
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>"`
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>"`
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>"`
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('')
})
ref,
nextTick,
VNode,
- Portal,
+ Teleport,
createStaticVNode,
Suspense,
onMounted,
)
})
- 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 })
])
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])
-
- expect(portalVnode1.target).toBe(portalContainer)
- expect((portalVnode1 as any).children[0].el).toBe(
- portalContainer.childNodes[0]
+ 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(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)
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')!)
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><!--]-->"`
)
})
call?: never
// type-only differentiators for built-in Vnode types
__isFragment?: never
- __isPortal?: never
+ __isTeleport?: never
__isSuspense?: never
}
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
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,
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(
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,
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
)
}
}
}
},
- 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(
}
}
-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,
) => 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,
optimized
)
}
- ;(target as PortalTargetElement)._lpa = nextSibling(
+ ;(target as TeleportTargetElement)._lpa = nextSibling(
vnode.targetAnchor as Node
)
}
}
// 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 }
}
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'
// fake constructor type returned from `defineComponent`
interface Constructor<P = any> {
__isFragment?: never
- __isPortal?: never
+ __isTeleport?: never
__isSuspense?: never
new (): { $props: P }
}
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
SuspenseBoundary,
queueEffectWithSuspense
} from './components/Suspense'
-import { PortalImpl } from './components/Portal'
+import { TeleportImpl } from './components/Teleport'
export type RootHydrateFunction = (
vnode: VNode<Node, Element>,
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,
} 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 {
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 {
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,
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),
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
}
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) {
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'
| typeof Static
| typeof Comment
| typeof Fragment
- | typeof PortalImpl
+ | typeof TeleportImpl
| typeof SuspenseImpl
export type VNodeRef =
// 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
? ShapeFlags.ELEMENT
: __FEATURE_SUSPENSE__ && isSuspense(type)
? ShapeFlags.SUSPENSE
- : isPortal(type)
- ? ShapeFlags.PORTAL
+ : isTeleport(type)
+ ? ShapeFlags.TELEPORT
: isObject(type)
? ShapeFlags.STATEFUL_COMPONENT
: isFunction(type)
} 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())
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 {
-import { createApp, h, Portal } from 'vue'
+import { createApp, h, Teleport } from 'vue'
import { renderToString, SSRContext } from '../src/renderToString'
-import { ssrRenderPortal } from '../src/helpers/ssrRenderPortal'
+import { ssrRenderTeleport } from '../src/helpers/ssrRenderTeleport'
-describe('ssrRenderPortal', () => {
- test('portal rendering (compiled)', async () => {
+describe('ssrRenderTeleport', () => {
+ test('teleport rendering (compiled)', async () => {
const ctx: SSRContext = {}
const html = await renderToString(
createApp({
return { msg: 'hello' }
},
ssrRender(_ctx, _push, _parent) {
- ssrRenderPortal(
+ ssrRenderTeleport(
_push,
_push => {
_push(`<div>content</div>`)
}),
ctx
)
- expect(html).toBe('<!--portal start--><!--portal end-->')
- expect(ctx.
portals!['#target']).toBe(`<div>content</div><!---->`)
+ expect(html).toBe('<!--teleport start--><!--teleport end-->')
+ expect(ctx.
teleports!['#target']).toBe(`<div>content</div><!---->`)
})
- test('portal rendering (compiled + disabled)', async () => {
+ test('teleport rendering (compiled + disabled)', async () => {
const ctx: SSRContext = {}
const html = await renderToString(
createApp({
return { msg: 'hello' }
},
ssrRender(_ctx, _push, _parent) {
- ssrRenderPortal(
+ ssrRenderTeleport(
_push,
_push => {
_push(`<div>content</div>`)
}),
ctx
)
- expect(html).toBe('<!--portal start--><div>content</div><!--portal end-->')
- expect(ctx.portals!['#target']).toBe(`<!---->`)
+ expect(html).toBe(
+ '<!--teleport start--><div>content</div><!--teleport end-->'
+ )
+ expect(ctx.teleports!['#target']).toBe(`<!---->`)
})
- test('portal rendering (vnode)', async () => {
+ test('teleport rendering (vnode)', async () => {
const ctx: SSRContext = {}
const html = await renderToString(
h(
- Portal,
+ Teleport,
{
- target: `#target`
+ to: `#target`
},
h('span', 'hello')
),
ctx
)
- expect(html).toBe('<!--portal start--><!--portal end-->')
- expect(ctx.portals!['#target']).toBe('<span>hello</span><!---->')
+ expect(html).toBe('<!--teleport start--><!--teleport end-->')
+ expect(ctx.teleports!['#target']).toBe('<span>hello</span><!---->')
})
- test('portal rendering (vnode + disabled)', async () => {
+ test('teleport rendering (vnode + disabled)', async () => {
const ctx: SSRContext = {}
const html = await renderToString(
h(
- Portal,
+ Teleport,
{
- target: `#target`,
+ to: `#target`,
disabled: true
},
h('span', 'hello')
),
ctx
)
- expect(html).toBe('<!--portal start--><span>hello</span><!--portal end-->')
- expect(ctx.portals!['#target']).toBe(`<!---->`)
+ expect(html).toBe(
+ '<!--teleport start--><span>hello</span><!--teleport end-->'
+ )
+ expect(ctx.teleports!['#target']).toBe(`<!---->`)
})
- test('multiple portals with same target', async () => {
+ test('multiple teleports with same target', async () => {
const ctx: SSRContext = {}
const html = await renderToString(
h('div', [
h(
- Portal,
+ Teleport,
{
- target: `#target`
+ to: `#target`
},
h('span', 'hello')
),
- h(Portal, { target: `#target` }, 'world')
+ h(Teleport, { to: `#target` }, 'world')
]),
ctx
)
expect(html).toBe(
- '<div><!--portal start--><!--portal end--><!--portal start--><!--portal end--></div>'
+ '<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>'
)
- expect(ctx.portals!['#target']).toBe(
+ expect(ctx.teleports!['#target']).toBe(
'<span>hello</span><!---->world<!---->'
)
})
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-->')
}
} 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
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,
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() {
input.provide(ssrContextKey, context)
const buffer = await renderComponentVNode(vnode)
- await resolvePortals(context)
+ await resolveTeleports(context)
return unrollBuffer(buffer)
}
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,
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(
)
}
-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])
)
}
}
TEXT_CHILDREN = 1 << 3,
ARRAY_CHILDREN = 1 << 4,
SLOTS_CHILDREN = 1 << 5,
- PORTAL = 1 << 6,
+ TELEPORT = 1 << 6,
SUSPENSE = 1 << 7,
COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
COMPONENT_KEPT_ALIVE = 1 << 9,
<!-- app -->
<div id="app">
<button id="show-modal" @click="showModal = true">Show Modal</button>
- <portal target="#modal-container">
+ <teleport to="#modal-container">
<!-- use the modal component, pass in the prop -->
<modal :show="showModal" @close="showModal = false">
<template #header>
<h3>custom header</h3>
</template>
</modal>
- </portal>
+ </teleport>
</div>
<script>
projects / thirdparty / vuejs / core.git / commitdiff
