diff --git a/packages/compiler-core/src/index.ts b/packages/compiler-core/src/index.ts
index 29e5f6813..f38f6991c 100644
--- a/packages/compiler-core/src/index.ts
+++ b/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'
diff --git a/packages/compiler-ssr/__tests__/ssrTeleport.spec.ts b/packages/compiler-ssr/__tests__/ssrTeleport.spec.ts
new file mode 100644
index 000000000..e1807bc90
--- /dev/null
+++ b/packages/compiler-ssr/__tests__/ssrTeleport.spec.ts
@@ -0,0 +1,42 @@
+import { compile } from '../src'
+
+describe('teleport', () => {
+ test('with static to', () => {
+ expect(compile(``).code)
+ .toMatchInlineSnapshot(`
+ "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _ssrRenderTeleport(_push, (_push) => {
+ _push(\`
\`)
+ }, "body", false, _parent)
+ }"
+ `)
+ })
+
+ test('with dynamic to', () => {
+ expect(compile(``).code)
+ .toMatchInlineSnapshot(`
+ "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _ssrRenderTeleport(_push, (_push) => {
+ _push(\`\`)
+ }, _ctx.target, false, _parent)
+ }"
+ `)
+ })
+
+ test('with dynamic to shorthand', () => {
+ expect(compile(``).code)
+ .toMatchInlineSnapshot(`
+ "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _ssrRenderTeleport(_push, (_push) => {
+ _push(\`\`)
+ }, _ctx.to, false, _parent)
+ }"
+ `)
+ })
+})
diff --git a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
index 82122e621..abbb5f53e 100644
--- a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -101,6 +101,28 @@ describe('transition-group', () => {
`)
})
+ test('with dynamic tag shorthand', () => {
+ expect(
+ compile(
+ ``,
+ ).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(\`\`)
+ })
+ _push(\`\${_ctx.tag}>\`)
+ }"
+ `)
+ })
+
test('with multi fragments children', () => {
expect(
compile(
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index cad1ee810..be77ed30c 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/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) {