fix: generate v-if fallback comment as block

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
index aa7fd9b6dd08a418d7efe22ea1ce3a54754751bb..c4dd8cbb6438e9c00cf874f6b07ca0f1aed47ede 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
@@ -389,7 +389,7 @@ return function render() {
         ? _createBlock(\\"div\\", _hoisted_1, [
             _hoisted_2
           ])
-        : _createCommentVNode())
+        : _createCommentVNode(\\"v-if\\", true))
     ]))
   }
 }"

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index af3a901bca2ad73af3290795835fa990d4039b9f..372b077124ae2ba311b43b2fd9aaa620ce5acad3 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -161,7 +161,7 @@ return function render() {
       ? _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
           return (_openBlock(), _createBlock(\\"div\\"))
         }), 128 /* UNKEYED_FRAGMENT */)
-      : _createCommentVNode())
+      : _createCommentVNode(\\"v-if\\", true))
   }
 }"
 `;

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index 2ae79ffde5da01c9c9f489f48dda7148d5dded3e..498c03d35c683acf5357e7cbde3f9aabdc4ca587 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -9,7 +9,7 @@ return function render() {
     
     return (_openBlock(), ok
       ? _createBlock(\\"div\\", { key: 0 })
-      : _createCommentVNode())
+      : _createCommentVNode(\\"v-if\\", true))
   }
 }"
 `;
@@ -27,7 +27,7 @@ return function render() {
           \\"hello\\",
           _createVNode(\\"p\\")
         ])
-      : _createCommentVNode())
+      : _createCommentVNode(\\"v-if\\", true))
   }
 }"
 `;
@@ -41,7 +41,7 @@ return function render() {
     
     return (_openBlock(), ok
       ? _renderSlot($slots, \\"default\\", { key: 0 })
-      : _createCommentVNode())
+      : _createCommentVNode(\\"v-if\\", true))
   }
 }"
 `;
@@ -87,7 +87,7 @@ return function render() {
       ? _createBlock(\\"div\\", { key: 0 })
       : orNot
         ? _createBlock(\\"p\\", { key: 1 })
-        : _createCommentVNode())
+        : _createCommentVNode(\\"v-if\\", true))
   }
 }"
 `;
@@ -101,7 +101,7 @@ return function render() {
     
     return (_openBlock(), ok
       ? _renderSlot($slots, \\"default\\", { key: 0 })
-      : _createCommentVNode())
+      : _createCommentVNode(\\"v-if\\", true))
   }
 }"
 `;

diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index e3da963c8bd64b1b0afe8f6884f86c33a26e8c83..6389d8ea9a66b06d04cef0370aae2020cbd9dde5 100644 (file)
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -152,7 +152,12 @@ function createCodegenNodeForBranch(
     return createConditionalExpression(
       branch.condition,
       createChildrenCodegenNode(branch, index, context),
-      createCallExpression(context.helper(CREATE_COMMENT))
+      // make sure to pass in asBlock: true so that the comment node call
+      // closes the current block.
+      createCallExpression(context.helper(CREATE_COMMENT), [
+        __DEV__ ? '"v-if"' : '""',
+        'true'
+      ])
     ) as IfConditionalExpression
   } else {
     return createChildrenCodegenNode(branch, index, context) as BlockCodegenNode

diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index 41c2cd748ef90085f85c3661615ba3824a414c1e..ad1d3ad0c8b086f4a2d0967563473acf41217f09 100644 (file)
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -258,8 +258,15 @@ export function createTextVNode(text: string = ' ', flag: number = 0): VNode {
   return createVNode(Text, null, text, flag)
 }
 
-export function createCommentVNode(text: string = ''): VNode {
-  return createVNode(Comment, null, text)
+export function createCommentVNode(
+  text: string = '',
+  // when used as the v-else branch, the comment node must be created as a
+  // block to ensure correct updates.
+  asBlock: boolean = false
+): VNode {
+  return asBlock
+    ? createBlock(Comment, null, text)
+    : createVNode(Comment, null, text)
 }
 
 export function normalizeVNode(child: VNodeChild): VNode {