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/).
43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import { ComponentInternalInstance, ssrContextKey } from 'vue'
|
|
import {
|
|
SSRContext,
|
|
createBuffer,
|
|
PushFn,
|
|
SSRBufferItem
|
|
} from '../renderToString'
|
|
|
|
export function ssrRenderTeleport(
|
|
parentPush: PushFn,
|
|
contentRenderFn: (push: PushFn) => void,
|
|
target: string,
|
|
disabled: boolean,
|
|
parentComponent: ComponentInternalInstance
|
|
) {
|
|
parentPush('<!--teleport start-->')
|
|
|
|
let teleportContent: SSRBufferItem
|
|
|
|
if (disabled) {
|
|
contentRenderFn(parentPush)
|
|
teleportContent = `<!---->`
|
|
} else {
|
|
const { getBuffer, push } = createBuffer()
|
|
contentRenderFn(push)
|
|
push(`<!---->`) // teleport end anchor
|
|
teleportContent = getBuffer()
|
|
}
|
|
|
|
const context = parentComponent.appContext.provides[
|
|
ssrContextKey as any
|
|
] as SSRContext
|
|
const teleportBuffers =
|
|
context.__teleportBuffers || (context.__teleportBuffers = {})
|
|
if (teleportBuffers[target]) {
|
|
teleportBuffers[target].push(teleportContent)
|
|
} else {
|
|
teleportBuffers[target] = [teleportContent]
|
|
}
|
|
|
|
parentPush('<!--teleport end-->')
|
|
}
|