fix(compiler-ssr/teleport): correct the target prop of teleport (#2053)

diff --git a/packages/compiler-ssr/__tests__/ssrPortal.spec.ts b/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
index e5a6bad1289f7a1d62145cbc157d0974c43959b0..bb08b3024f7db1dc018fb1af342e69c6537e43b9 100644 (file)
--- a/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
@@ -2,7 +2,7 @@ import { compile } from '../src'
 
 describe('ssr compile: teleport', () => {
   test('should work', () => {
-    expect(compile(`<teleport :target="target"><div/></teleport>`).code)
+    expect(compile(`<teleport :to="target"><div/></teleport>`).code)
       .toMatchInlineSnapshot(`
       "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"@vue/server-renderer\\")
 
@@ -15,9 +15,8 @@ describe('ssr compile: teleport', () => {
   })
 
   test('disabled prop handling', () => {
-    expect(
-      compile(`<teleport :target="target" disabled><div/></teleport>`).code
-    ).toMatchInlineSnapshot(`
+    expect(compile(`<teleport :to="target" disabled><div/></teleport>`).code)
+      .toMatchInlineSnapshot(`
       "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"@vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
@@ -28,8 +27,7 @@ describe('ssr compile: teleport', () => {
     `)
 
     expect(
-      compile(`<teleport :target="target" :disabled="foo"><div/></teleport>`)
-        .code
+      compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code
     ).toMatchInlineSnapshot(`
       "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"@vue/server-renderer\\")
 

diff --git a/packages/compiler-ssr/src/errors.ts b/packages/compiler-ssr/src/errors.ts
index 1ac3798dc5adab6f757a5e8866d57395ba1cc602..a1e057a78c230f639dce6d22ba77b612f85671ac 100644 (file)
--- a/packages/compiler-ssr/src/errors.ts
+++ b/packages/compiler-ssr/src/errors.ts
@@ -26,6 +26,6 @@ export const enum SSRErrorCodes {
 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_TELEPORT_TARGET]: `No target prop on teleport element.`,
+  [SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET]: `Missing the 'to' prop on teleport element.`,
   [SSRErrorCodes.X_SSR_INVALID_AST_NODE]: `Invalid AST node during SSR transform.`
 }

diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts b/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
index 5a39688db240814ea8363f6c2c5c08e68d16791c..d9cfdbb0274c05e0225524a3a538ab7731f26e48 100644 (file)
--- a/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
@@ -19,7 +19,7 @@ export function ssrProcessTeleport(
   node: ComponentNode,
   context: SSRTransformContext
 ) {
-  const targetProp = findProp(node, 'target')
+  const targetProp = findProp(node, 'to')
   if (!targetProp) {
     context.onError(
       createSSRCompilerError(SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET, node.loc)