wip(compiler-ssr): v-if

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

@@ -23,7 +23,8 @@ import {
   BlockCodegenNode,
   SlotOutletCodegenNode,
   ElementCodegenNode,
-  ComponentCodegenNode
+  ComponentCodegenNode,
+  IfNode
 } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
@@ -40,73 +41,18 @@ import { injectProp } from '../utils'
 export const transformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
   (node, dir, context) => {
-    if (
-      dir.name !== 'else' &&
-      (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim())
-    ) {
-      const loc = dir.exp ? dir.exp.loc : node.loc
-      context.onError(
-        createCompilerError(ErrorCodes.X_V_IF_NO_EXPRESSION, dir.loc)
-      )
-      dir.exp = createSimpleExpression(`true`, false, loc)
-    }
-
-    if (!__BROWSER__ && context.prefixIdentifiers && dir.exp) {
-      // dir.exp can only be simple expression because vIf transform is applied
-      // before expression transform.
-      dir.exp = processExpression(dir.exp as SimpleExpressionNode, context)
-    }
-
-    if (dir.name === 'if') {
-      const branch = createIfBranch(node, dir)
-      const codegenNode = createSequenceExpression([
-        createCallExpression(context.helper(OPEN_BLOCK))
-      ]) as IfCodegenNode
-
-      context.replaceNode({
-        type: NodeTypes.IF,
-        loc: node.loc,
-        branches: [branch],
-        codegenNode
-      })
-
+    return processIfBranches(node, dir, context, (ifNode, branch, isRoot) => {
       // Exit callback. Complete the codegenNode when all children have been
       // transformed.
       return () => {
-        codegenNode.expressions.push(createCodegenNodeForBranch(
-          branch,
-          0,
-          context
-        ) as IfConditionalExpression)
-      }
-    } else {
-      // locate the adjacent v-if
-      const siblings = context.parent!.children
-      const comments = []
-      let i = siblings.indexOf(node)
-      while (i-- >= -1) {
-        const sibling = siblings[i]
-        if (__DEV__ && sibling && sibling.type === NodeTypes.COMMENT) {
-          context.removeNode(sibling)
-          comments.unshift(sibling)
-          continue
-        }
-        if (sibling && sibling.type === NodeTypes.IF) {
-          // move the node to the if node's branches
-          context.removeNode()
-          const branch = createIfBranch(node, dir)
-          if (__DEV__ && comments.length) {
-            branch.children = [...comments, ...branch.children]
-          }
-          sibling.branches.push(branch)
-          // since the branch was removed, it will not be traversed.
-          // make sure to traverse here.
-          traverseChildren(branch, context)
-          // make sure to reset currentNode after traversal to indicate this
-          // node has been removed.
-          context.currentNode = null
+        if (isRoot) {
+          ifNode.codegenNode = createSequenceExpression([
+            createCallExpression(context.helper(OPEN_BLOCK)),
+            createCodegenNodeForBranch(branch, 0, context)
+          ]) as IfCodegenNode
+        } else {
           // attach this branch's codegen node to the v-if root.
-          let parentCondition = sibling.codegenNode
+          let parentCondition = ifNode.codegenNode!
             .expressions[1] as ConditionalExpression
           while (
             parentCondition.alternate.type ===
@@ -116,20 +62,92 @@ export const transformIf = createStructuralDirectiveTransform(
           }
           parentCondition.alternate = createCodegenNodeForBranch(
             branch,
-            sibling.branches.length - 1,
+            ifNode.branches.length - 1,
             context
           )
-        } else {
-          context.onError(
-            createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc)
-          )
         }
-        break
       }
-    }
+    })
   }
 )
 
+export const processIfBranches = (
+  node: ElementNode,
+  dir: DirectiveNode,
+  context: TransformContext,
+  processCodegen?: (
+    node: IfNode,
+    branch: IfBranchNode,
+    isRoot: boolean
+  ) => (() => void) | void
+) => {
+  if (
+    dir.name !== 'else' &&
+    (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim())
+  ) {
+    const loc = dir.exp ? dir.exp.loc : node.loc
+    context.onError(
+      createCompilerError(ErrorCodes.X_V_IF_NO_EXPRESSION, dir.loc)
+    )
+    dir.exp = createSimpleExpression(`true`, false, loc)
+  }
+
+  if (!__BROWSER__ && context.prefixIdentifiers && dir.exp) {
+    // dir.exp can only be simple expression because vIf transform is applied
+    // before expression transform.
+    dir.exp = processExpression(dir.exp as SimpleExpressionNode, context)
+  }
+
+  if (dir.name === 'if') {
+    const branch = createIfBranch(node, dir)
+    const ifNode: IfNode = {
+      type: NodeTypes.IF,
+      loc: node.loc,
+      branches: [branch]
+    }
+    context.replaceNode(ifNode)
+    if (processCodegen) {
+      return processCodegen(ifNode, branch, true)
+    }
+  } else {
+    // locate the adjacent v-if
+    const siblings = context.parent!.children
+    const comments = []
+    let i = siblings.indexOf(node)
+    while (i-- >= -1) {
+      const sibling = siblings[i]
+      if (__DEV__ && sibling && sibling.type === NodeTypes.COMMENT) {
+        context.removeNode(sibling)
+        comments.unshift(sibling)
+        continue
+      }
+      if (sibling && sibling.type === NodeTypes.IF) {
+        // move the node to the if node's branches
+        context.removeNode()
+        const branch = createIfBranch(node, dir)
+        if (__DEV__ && comments.length) {
+          branch.children = [...comments, ...branch.children]
+        }
+        sibling.branches.push(branch)
+        const onExit = processCodegen && processCodegen(sibling, branch, false)
+        // since the branch was removed, it will not be traversed.
+        // make sure to traverse here.
+        traverseChildren(branch, context)
+        // call on exit
+        if (onExit) onExit()
+        // make sure to reset currentNode after traversal to indicate this
+        // node has been removed.
+        context.currentNode = null
+      } else {
+        context.onError(
+          createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc)
+        )
+      }
+      break
+    }
+  }
+}
+
 function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode {
   return {
     type: NodeTypes.IF_BRANCH,
@@ -171,25 +189,25 @@ function createChildrenCodegenNode(
     createSimpleExpression(index + '', false)
   )
   const { children } = branch
-  const child = children[0]
+  const firstChild = children[0]
   const needFragmentWrapper =
-    children.length !== 1 || child.type !== NodeTypes.ELEMENT
+    children.length !== 1 || firstChild.type !== NodeTypes.ELEMENT
   if (needFragmentWrapper) {
     const blockArgs: CallExpression['arguments'] = [
       helper(FRAGMENT),
       createObjectExpression([keyProperty]),
       children
     ]
-    if (children.length === 1 && child.type === NodeTypes.FOR) {
+    if (children.length === 1 && firstChild.type === NodeTypes.FOR) {
       // optimize away nested fragments when child is a ForNode
-      const forBlockArgs = child.codegenNode.expressions[1].arguments
+      const forBlockArgs = firstChild.codegenNode!.expressions[1].arguments
       // directly use the for block's children and patchFlag
       blockArgs[2] = forBlockArgs[2]
       blockArgs[3] = forBlockArgs[3]
     }
     return createCallExpression(helper(CREATE_BLOCK), blockArgs)
   } else {
-    const childCodegen = (child as ElementNode).codegenNode as
+    const childCodegen = (firstChild as ElementNode).codegenNode as
       | ElementCodegenNode
       | ComponentCodegenNode
       | SlotOutletCodegenNode