fix(compiler-core): make v-once work with v-if/else-if/else (#2182)

Partial fix for #2035

Author: HcySunYang

packages/compiler-core/__tests__/transforms/vOnce.spec.ts

@@ -99,15 +99,26 @@ describe('compiler: v-once transform', () => {
     expect(generate(root).code).toMatchSnapshot()
   })
 
-  test('with v-if', () => {
-    const root = transformWithOnce(`<div v-if="true" v-once />`)
+  test('with v-if/else', () => {
+    const root = transformWithOnce(`<div v-if="BOOLEAN" v-once /><p v-else/>`)
     expect(root.cached).toBe(1)
     expect(root.helpers).toContain(SET_BLOCK_TRACKING)
     expect(root.children[0]).toMatchObject({
       type: NodeTypes.IF,
-      // should cache the entire v-if expression, not just a single branch
+      // should cache the entire v-if/else-if/else expression, not just a single branch
       codegenNode: {
-        type: NodeTypes.JS_CACHE_EXPRESSION
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        value: {
+          type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
+          consequent: {
+            type: NodeTypes.VNODE_CALL,
+            tag: `"div"`
+          },
+          alternate: {
+            type: NodeTypes.VNODE_CALL,
+            tag: `"p"`
+          }
+        }
       }
     })
   })

packages/compiler-core/src/ast.ts

@@ -236,7 +236,7 @@ export interface CompoundExpressionNode extends Node {
 export interface IfNode extends Node {
   type: NodeTypes.IF
   branches: IfBranchNode[]
-  codegenNode?: IfConditionalExpression
+  codegenNode?: IfConditionalExpression | CacheExpression // <div v-if v-once>
 }
 
 export interface IfBranchNode extends Node {

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

@@ -20,7 +20,8 @@ import {
   IfNode,
   createVNodeCall,
   AttributeNode,
-  locStub
+  locStub,
+  CacheExpression
 } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
@@ -62,13 +63,7 @@ export const transformIf = createStructuralDirectiveTransform(
           ) as IfConditionalExpression
         } else {
           // attach this branch's codegen node to the v-if root.
-          let parentCondition = ifNode.codegenNode!
-          while (
-            parentCondition.alternate.type ===
-            NodeTypes.JS_CONDITIONAL_EXPRESSION
-          ) {
-            parentCondition = parentCondition.alternate
-          }
+          const parentCondition = getParentCondition(ifNode.codegenNode!)
           parentCondition.alternate = createCodegenNodeForBranch(
             branch,
             key + ifNode.branches.length - 1,
@@ -293,3 +288,19 @@ function isSameKey(
   }
   return true
 }
+
+function getParentCondition(
+  node: IfConditionalExpression | CacheExpression
+): IfConditionalExpression {
+  while (true) {
+    if (node.type === NodeTypes.JS_CONDITIONAL_EXPRESSION) {
+      if (node.alternate.type === NodeTypes.JS_CONDITIONAL_EXPRESSION) {
+        node = node.alternate
+      } else {
+        return node
+      }
+    } else if (node.type === NodeTypes.JS_CACHE_EXPRESSION) {
+      node = node.value as IfConditionalExpression
+    }
+  }
+}