theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: rename <portal> to <teleport>

Browse Source 
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/).
This commit is contained in:
Evan You
2020-03-31 10:52:42 -04:00
parent 8080c38323
commit eee5095692
26 changed files with 290 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/runtime-core/__tests__/components/Suspense.spec.ts
View File

@@ -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')
})

82
packages/runtime-core/__tests__/components/Portal.spec.ts → packages/runtime-core/__tests__/components/Teleport.spec.ts
View File

@@ -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('')
})

116
packages/runtime-core/__tests__/hydration.spec.ts
View File

@@ -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><!--]-->"`
)
})