root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

fix(compiler-ssr): fix missing scopeId on server-rendered TransitionGroup (#7557) 

close #7554
This commit is contained in:
白雾三语 2023-10-20 16:21:41 +08:00 committed by GitHub
parent 36c99a9c6b
commit 61c1357427
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
View File

@ -124,4 +124,48 @@ describe('ssr: scopeId', () => {
}"
`)
})
// #7554
test('scopeId is correctly transform to scope attribute of transition-group ', () => {
expect(
compile(
`<transition-group tag="div" class="red"><span>hello</span></transition-group>`,
{
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(\`<div\${_ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs))} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
}"
`)
// with dynamic tag
expect(
compile(
`<transition-group :tag="someTag" class="red"><span>hello</span></transition-group>`,
{
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><span data-v-xxxxxxx>hello</span></\${
_ctx.someTag
}>\`)
}"
`)
})
})

12
packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
View File

@ -18,6 +18,7 @@ const wipMap = new WeakMap<ComponentNode, WIPEntry>()
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(`</${tag.value!.content}>`)