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

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