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

24
packages/compiler-ssr/__tests__/ssrPortal.spec.ts
View File

@@ -1,13 +1,13 @@
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)
}"
@@ -15,24 +15,26 @@ describe('ssr compile: portal', () => {
})
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)
}"