Skip to content

Commit

Permalink
fix(compiler-ssr): fix missing scopeId on server-rendered TransitionG…
Browse files Browse the repository at this point in the history
…roup (#7557)

close #7554
  • Loading branch information
baiwusanyu-c authored Oct 20, 2023
1 parent 36c99a9 commit 61c1357
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 2 deletions.
44 changes: 44 additions & 0 deletions packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}>\`)
}"
`)
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -45,7 +46,8 @@ export function ssrTransformTransitionGroup(
}
wipMap.set(node, {
tag,
propsExp
propsExp,
scopeId: context.scopeId || null
})
}
}
Expand All @@ -58,14 +60,17 @@ 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(`<`)
context.pushStringPart(tag.exp!)
if (propsExp) {
context.pushStringPart(propsExp)
}
if (scopeId) {
context.pushStringPart(` ${scopeId}`)
}
context.pushStringPart(`>`)

processChildren(
Expand All @@ -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}>`)
Expand Down

0 comments on commit 61c1357

Please sign in to comment.