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(\`\`) + }" + `) + }) + 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) {