From 61c135742795aa5e3189a79c7dec6afa21bbc8d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?= <32354856+baiwusanyu-c@users.noreply.github.com> Date: Fri, 20 Oct 2023 16:21:41 +0800 Subject: [PATCH] fix(compiler-ssr): fix missing scopeId on server-rendered TransitionGroup (#7557) close #7554 --- .../compiler-ssr/__tests__/ssrScopeId.spec.ts | 44 +++++++++++++++++++ .../transforms/ssrTransformTransitionGroup.ts | 12 ++++- 2 files changed, 54 insertions(+), 2 deletions(-) diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts index 3445a84fda9..1be6a2c180c 100644 --- a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts +++ b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts @@ -124,4 +124,48 @@ describe('ssr: scopeId', () => { }" `) }) + + // #7554 + test('scopeId is correctly transform to scope attribute of transition-group ', () => { + expect( + compile( + `hello`, + { + scopeId, + mode: 'module' + } + ).code + ).toMatchInlineSnapshot(` + "import { mergeProps as _mergeProps } from \\"vue\\" + import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\" + + export function ssrRender(_ctx, _push, _parent, _attrs) { + _push(\`hello\`) + }" + `) + + // with dynamic tag + expect( + compile( + `hello`, + { + scopeId, + mode: 'module' + } + ).code + ).toMatchInlineSnapshot(` + "import { mergeProps as _mergeProps } from \\"vue\\" + import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\" + + export function ssrRender(_ctx, _push, _parent, _attrs) { + _push(\`<\${ + _ctx.someTag + }\${ + _ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs)) + } data-v-xxxxxxx>hello\`) + }" + `) + }) }) diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts index 00b0d9dd45a..b0f96e4dd6c 100644 --- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts +++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts @@ -18,6 +18,7 @@ const wipMap = new WeakMap() interface WIPEntry { tag: AttributeNode | DirectiveNode propsExp: string | JSChildNode | null + scopeId: string | null } // phase 1: build props @@ -45,7 +46,8 @@ export function ssrTransformTransitionGroup( } wipMap.set(node, { tag, - propsExp + propsExp, + scopeId: context.scopeId || null }) } } @@ -58,7 +60,7 @@ export function ssrProcessTransitionGroup( ) { const entry = wipMap.get(node) if (entry) { - const { tag, propsExp } = entry + const { tag, propsExp, scopeId } = entry if (tag.type === NodeTypes.DIRECTIVE) { // dynamic :tag context.pushStringPart(`<`) @@ -66,6 +68,9 @@ export function ssrProcessTransitionGroup( if (propsExp) { context.pushStringPart(propsExp) } + if (scopeId) { + context.pushStringPart(` ${scopeId}`) + } context.pushStringPart(`>`) processChildren( @@ -89,6 +94,9 @@ export function ssrProcessTransitionGroup( if (propsExp) { context.pushStringPart(propsExp) } + if (scopeId) { + context.pushStringPart(` ${scopeId}`) + } context.pushStringPart(`>`) processChildren(node, context, false, true) context.pushStringPart(``)