refactor: rename <portal> to <teleport>

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

View File

@@ -19,11 +19,11 @@ export function createSSRCompilerError(
export const enum SSRErrorCodes {
X_SSR_CUSTOM_DIRECTIVE_NO_TRANSFORM = DOMErrorCodes.__EXTEND_POINT__,
X_SSR_UNSAFE_ATTR_NAME,
X_SSR_NO_PORTAL_TARGET
X_SSR_NO_TELEPORT_TARGET
}
export const SSRErrorMessages: { [code: number]: string } = {
[SSRErrorCodes.X_SSR_CUSTOM_DIRECTIVE_NO_TRANSFORM]: `Custom directive is missing corresponding SSR transform and will be ignored.`,
[SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME]: `Unsafe attribute name for SSR.`,
[SSRErrorCodes.X_SSR_NO_PORTAL_TARGET]: `No target prop on portal element.`
[SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET]: `No target prop on teleport element.`
}

View File

@@ -13,7 +13,7 @@ export const SSR_LOOSE_EQUAL = Symbol(`ssrLooseEqual`)
export const SSR_LOOSE_CONTAIN = Symbol(`ssrLooseContain`)
export const SSR_RENDER_DYNAMIC_MODEL = Symbol(`ssrRenderDynamicModel`)
export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`ssrGetDynamicModelProps`)
export const SSR_RENDER_PORTAL = Symbol(`ssrRenderPortal`)
export const SSR_RENDER_TELEPORT = Symbol(`ssrRenderTeleport`)
export const SSR_RENDER_SUSPENSE = Symbol(`ssrRenderSuspense`)
export const ssrHelpers = {
@@ -30,7 +30,7 @@ export const ssrHelpers = {
[SSR_LOOSE_CONTAIN]: `ssrLooseContain`,
[SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,
[SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
[SSR_RENDER_PORTAL]: `ssrRenderPortal`,
[SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
[SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`
}

View File

@@ -11,7 +11,7 @@ import {
buildSlots,
FunctionExpression,
TemplateChildNode,
PORTAL,
TELEPORT,
createIfStatement,
createSimpleExpression,
getBaseTransformPreset,
@@ -39,7 +39,7 @@ import {
processChildren,
processChildrenAsStatement
} from '../ssrCodegenTransform'
import { ssrProcessPortal } from './ssrTransformPortal'
import { ssrProcessTeleport } from './ssrTransformTeleport'
import {
ssrProcessSuspense,
ssrTransformSuspense
@@ -146,8 +146,8 @@ export function ssrProcessComponent(
if (!node.ssrCodegenNode) {
// this is a built-in component that fell-through.
const component = componentTypeMap.get(node)!
if (component === PORTAL) {
return ssrProcessPortal(node, context)
if (component === TELEPORT) {
return ssrProcessTeleport(node, context)
} else if (component === SUSPENSE) {
return ssrProcessSuspense(node, context)
} else {

View File

@@ -12,17 +12,17 @@ import {
processChildrenAsStatement
} from '../ssrCodegenTransform'
import { createSSRCompilerError, SSRErrorCodes } from '../errors'
import { SSR_RENDER_PORTAL } from '../runtimeHelpers'
import { SSR_RENDER_TELEPORT } from '../runtimeHelpers'
// Note: this is a 2nd-pass codegen transform.
export function ssrProcessPortal(
export function ssrProcessTeleport(
node: ComponentNode,
context: SSRTransformContext
) {
const targetProp = findProp(node, 'target')
if (!targetProp) {
context.onError(
createSSRCompilerError(SSRErrorCodes.X_SSR_NO_PORTAL_TARGET, node.loc)
createSSRCompilerError(SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET, node.loc)
)
return
}
@@ -37,7 +37,7 @@ export function ssrProcessPortal(
if (!target) {
context.onError(
createSSRCompilerError(
SSRErrorCodes.X_SSR_NO_PORTAL_TARGET,
SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET,
targetProp.loc
)
)
@@ -60,7 +60,7 @@ export function ssrProcessPortal(
)
contentRenderFn.body = processChildrenAsStatement(node.children, context)
context.pushStatement(
createCallExpression(context.helper(SSR_RENDER_PORTAL), [
createCallExpression(context.helper(SSR_RENDER_TELEPORT), [
`_push`,
contentRenderFn,
target,