eee5095692
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/).
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { compile } from '../src'
|
|
|
|
describe('ssr compile: teleport', () => {
|
|
test('should work', () => {
|
|
expect(compile(`<teleport :target="target"><div/></teleport>`).code)
|
|
.toMatchInlineSnapshot(`
|
|
"const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"@vue/server-renderer\\")
|
|
|
|
return function ssrRender(_ctx, _push, _parent) {
|
|
_ssrRenderTeleport(_push, (_push) => {
|
|
_push(\`<div></div>\`)
|
|
}, _ctx.target, false, _parent)
|
|
}"
|
|
`)
|
|
})
|
|
|
|
test('disabled prop handling', () => {
|
|
expect(
|
|
compile(`<teleport :target="target" disabled><div/></teleport>`).code
|
|
).toMatchInlineSnapshot(`
|
|
"const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"@vue/server-renderer\\")
|
|
|
|
return function ssrRender(_ctx, _push, _parent) {
|
|
_ssrRenderTeleport(_push, (_push) => {
|
|
_push(\`<div></div>\`)
|
|
}, _ctx.target, true, _parent)
|
|
}"
|
|
`)
|
|
|
|
expect(
|
|
compile(`<teleport :target="target" :disabled="foo"><div/></teleport>`)
|
|
.code
|
|
).toMatchInlineSnapshot(`
|
|
"const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"@vue/server-renderer\\")
|
|
|
|
return function ssrRender(_ctx, _push, _parent) {
|
|
_ssrRenderTeleport(_push, (_push) => {
|
|
_push(\`<div></div>\`)
|
|
}, _ctx.target, _ctx.foo, _parent)
|
|
}"
|
|
`)
|
|
})
|
|
})
|