fix(ssr): don't render comments in TransitionGroup (#11961)

close #11958
This commit is contained in:
edison 2024-09-20 16:46:45 +08:00 committed by GitHub
parent 62242886d7
commit a2f6edeb02
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 11 deletions

View File

@ -39,7 +39,7 @@ describe('transition-group', () => {
}) })
// #11514 // #11514
test('with static tag + comment', () => { test('with static tag + v-if comment', () => {
expect( expect(
compile( compile(
`<transition-group tag="ul"><div v-for="i in list"/><div v-if="false"></div></transition-group>`, `<transition-group tag="ul"><div v-for="i in list"/><div v-if="false"></div></transition-group>`,
@ -60,6 +60,25 @@ describe('transition-group', () => {
`) `)
}) })
// #11958
test('with static tag + comment', () => {
expect(
compile(
`<transition-group tag="ul"><div v-for="i in list"/><!--test--></transition-group>`,
).code,
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
_ssrRenderList(_ctx.list, (i) => {
_push(\`<div></div>\`)
})
_push(\`</ul>\`)
}"
`)
})
test('with dynamic tag', () => { test('with dynamic tag', () => {
expect( expect(
compile( compile(

View File

@ -156,7 +156,7 @@ export function processChildren(
context: SSRTransformContext, context: SSRTransformContext,
asFragment = false, asFragment = false,
disableNestedFragments = false, disableNestedFragments = false,
disableCommentAsIfAlternate = false, disableComment = false,
): void { ): void {
if (asFragment) { if (asFragment) {
context.pushStringPart(`<!--[-->`) context.pushStringPart(`<!--[-->`)
@ -197,7 +197,9 @@ export function processChildren(
case NodeTypes.COMMENT: case NodeTypes.COMMENT:
// no need to escape comment here because the AST can only // no need to escape comment here because the AST can only
// contain valid comments. // contain valid comments.
context.pushStringPart(`<!--${child.content}-->`) if (!disableComment) {
context.pushStringPart(`<!--${child.content}-->`)
}
break break
case NodeTypes.INTERPOLATION: case NodeTypes.INTERPOLATION:
context.pushStringPart( context.pushStringPart(
@ -207,12 +209,7 @@ export function processChildren(
) )
break break
case NodeTypes.IF: case NodeTypes.IF:
ssrProcessIf( ssrProcessIf(child, context, disableNestedFragments, disableComment)
child,
context,
disableNestedFragments,
disableCommentAsIfAlternate,
)
break break
case NodeTypes.FOR: case NodeTypes.FOR:
ssrProcessFor(child, context, disableNestedFragments) ssrProcessFor(child, context, disableNestedFragments)

View File

@ -27,7 +27,7 @@ export function ssrProcessIf(
node: IfNode, node: IfNode,
context: SSRTransformContext, context: SSRTransformContext,
disableNestedFragments = false, disableNestedFragments = false,
disableCommentAsIfAlternate = false, disableComment = false,
): void { ): void {
const [rootBranch] = node.branches const [rootBranch] = node.branches
const ifStatement = createIfStatement( const ifStatement = createIfStatement(
@ -56,7 +56,7 @@ export function ssrProcessIf(
} }
} }
if (!currentIf.alternate && !disableCommentAsIfAlternate) { if (!currentIf.alternate && !disableComment) {
currentIf.alternate = createBlockStatement([ currentIf.alternate = createBlockStatement([
createCallExpression(`_push`, ['`<!---->`']), createCallExpression(`_push`, ['`<!---->`']),
]) ])