Merge c44ee00075 into 56be3dd4db

packages/compiler-core/src/index.ts

@@ -44,7 +44,7 @@ export * from './runtimeHelpers'
 export { getBaseTransformPreset, type TransformPreset } from './compile'
 export { transformModel } from './transforms/vModel'
 export { transformOn } from './transforms/vOn'
-export { transformBind } from './transforms/vBind'
+export { transformBind, transformBindShorthand } from './transforms/vBind'
 export { noopDirectiveTransform } from './transforms/noopDirectiveTransform'
 export { processIf } from './transforms/vIf'
 export { processFor, createForLoopParams } from './transforms/vFor'

packages/compiler-ssr/__tests__/ssrTeleport.spec.ts

@@ -0,0 +1,42 @@
+import { compile } from '../src'
+
+describe('teleport', () => {
+  test('with static to', () => {
+    expect(compile(`<teleport to="body"><div></div></teleport>`).code)
+      .toMatchInlineSnapshot(`
+      "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _ssrRenderTeleport(_push, (_push) => {
+          _push(\`<div></div>\`)
+        }, "body", false, _parent)
+      }"
+    `)
+  })
+
+  test('with dynamic to', () => {
+    expect(compile(`<teleport :to="target"><div></div></teleport>`).code)
+      .toMatchInlineSnapshot(`
+      "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _ssrRenderTeleport(_push, (_push) => {
+          _push(\`<div></div>\`)
+        }, _ctx.target, false, _parent)
+      }"
+    `)
+  })
+
+  test('with dynamic to shorthand', () => {
+    expect(compile(`<teleport :to><div></div></teleport>`).code)
+      .toMatchInlineSnapshot(`
+      "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _ssrRenderTeleport(_push, (_push) => {
+          _push(\`<div></div>\`)
+        }, _ctx.to, false, _parent)
+      }"
+    `)
+  })
+})

packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts

@@ -101,6 +101,28 @@ describe('transition-group', () => {
     `)
   })
 
+  test('with dynamic tag shorthand', () => {
+    expect(
+      compile(
+        `<transition-group :tag><div v-for="i in list"/></transition-group>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<\${
+          _ctx.tag
+        }\${
+          _ssrRenderAttrs(_attrs)
+        }>\`)
+        _ssrRenderList(_ctx.list, (i) => {
+          _push(\`<div></div>\`)
+        })
+        _push(\`</\${_ctx.tag}>\`)
+      }"
+    `)
+  })
+
   test('with multi fragments children', () => {
     expect(
       compile(

packages/compiler-ssr/src/transforms/ssrTransformComponent.ts

@@ -38,6 +38,7 @@ import {
   locStub,
   resolveComponentType,
   stringifyExpression,
+  transformBindShorthand,
   traverseNode,
 } from '@vue/compiler-dom'
 import { SSR_RENDER_COMPONENT, SSR_RENDER_VNODE } from '../runtimeHelpers'
@@ -102,6 +103,15 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
   componentTypeMap.set(node, component)
 
   if (isSymbol(component)) {
+    for (const prop of node.props) {
+      if (
+        prop.type === NodeTypes.DIRECTIVE &&
+        prop.name === 'bind' &&
+        !prop.exp
+      ) {
+        transformBindShorthand(prop, context)
+      }
+    }
     if (component === SUSPENSE) {
       return ssrTransformSuspense(node, context)
     } else if (component === TRANSITION_GROUP) {