fix(compiler-vapor): align transition v-if comment handling with vdom

packages/compiler-vapor/__tests__/transforms/TransformTransition.spec.ts

@@ -1,5 +1,6 @@
 import { makeCompile } from './_utils'
 import {
+  compile,
   transformChildren,
   transformElement,
   transformKey,
@@ -268,8 +269,8 @@ describe('compiler: transition', () => {
   })
 
   test('the v-if/else-if/else branches in Transition should ignore comments', () => {
-    expect(
-      compileWithElementTransform(`
+    const { code } = compile(
+      `
     <transition>
       <div v-if="a">hey</div>
       <!-- this should be ignored -->
@@ -281,7 +282,11 @@ describe('compiler: transition', () => {
         <p v-else/>
       </div>
     </transition>
-    `).code,
-    ).toMatchSnapshot()
+    `,
+      { prefixIdentifiers: true },
+    )
+    expect(code).toMatchSnapshot()
+    expect(code).not.toContain('this should be ignored')
+    expect(code).toContain('this should not be ignored')
   })
 })

packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap

@@ -32,10 +32,11 @@ exports[`compiler: transition > the v-if/else-if/else branches in Transition sho
 "import { VaporTransition as _VaporTransition, setInsertionState as _setInsertionState, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
 const t0 = _template("<div>hey", 2)
 const t1 = _template("<p>", 2)
-const t2 = _template("<div>")
+const t2 = _template("<!-- this should not be ignored -->", 2)
+const t3 = _template("<div>")
 
 export function render(_ctx) {
-  const n16 = _createComponent(_VaporTransition, null, () => {
+  const n17 = _createComponent(_VaporTransition, null, () => {
     const n0 = _createIf(() => (_ctx.a), () => {
       const n2 = t0()
       return n2
@@ -43,20 +44,21 @@ export function render(_ctx) {
       const n5 = t0()
       return n5
     }, () => {
-      const n14 = t2()
-      _setInsertionState(n14, 0, 0)
+      const n15 = t3()
+      _setInsertionState(n15, null, 0)
       const n9 = _createIf(() => (_ctx.c), () => {
         const n11 = t1()
         return n11
       }, () => {
-        const n13 = t1()
-        return n13
-      }, 773 /* BLOCK_SHAPE, INDEX_SHIFT */)
-      return n14
+        const n13 = t2()
+        const n14 = t1()
+        return [n13, n14]
+      }, 777 /* BLOCK_SHAPE, INDEX_SHIFT */)
+      return n15
     }, 645 /* BLOCK_SHAPE, SLOT_ROOT, INDEX_SHIFT */), 389 /* BLOCK_SHAPE, SLOT_ROOT, INDEX_SHIFT */)
-    return [n0, n3, n7]
+    return n0
   }, true)
-  return n16
+  return n17
 }"
 `;
 

packages/compiler-vapor/src/generators/event.ts

@@ -77,7 +77,6 @@ export function genSetEvent(
   function genName(): CodeFragment[] {
     const expr = genExpression(key, context)
     if (keyOverride) {
-      // TODO unit test
       const find = JSON.stringify(keyOverride[0])
       const replacement = JSON.stringify(keyOverride[1])
       const wrapped: CodeFragment[] = ['(', ...expr, ')']

packages/compiler-vapor/src/transforms/vIf.ts

@@ -23,7 +23,7 @@ import {
 import { VaporBlockShape, VaporIfFlags, extend } from '@vue/shared'
 import { newBlock, wrapTemplate } from './utils'
 import { getSiblingIf } from './transformComment'
-import { getBlockShape, isStaticExpression } from '../utils'
+import { getBlockShape, isInTransition, isStaticExpression } from '../utils'
 
 export const transformVIf: NodeTransform = createStructuralDirectiveTransform(
   ['if', 'else', 'else-if'],
@@ -116,14 +116,17 @@ export function processIf(
       )
     }
 
-    // TODO ignore comments if the v-if is direct child of <transition> (PR #3622)
-    if (__DEV__ && context.root.comment.length) {
-      node = wrapTemplate(node, ['else-if', 'else'])
-      context.node = node = extend({}, node, {
-        children: [...context.comment, ...node.children],
-      })
+    const comments = context.comment
+    if (comments.length) {
+      // #3619 ignore comments if the v-if is direct child of <transition>
+      if (__DEV__ && !isInTransition(context)) {
+        node = wrapTemplate(node, ['else-if', 'else'])
+        context.node = node = extend({}, node, {
+          children: [...comments, ...node.children],
+        })
+      }
+      comments.length = 0
     }
-    context.root.comment = []
 
     const [branch, onExit] = createIfBranch(node, context)