fix(compiler-core): should apply text transform to if branches

fix #725

Author: yyx990803

packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`compiler: integration tests function mode 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment, renderList: _renderList, createTextVNode: _createTextVNode } = _Vue
+    const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", {
       id: \\"foo\\",
@@ -14,7 +14,9 @@ return function render(_ctx, _cache) {
       _createTextVNode(_toDisplayString(world.burn()) + \\" \\", 1 /* TEXT */),
       ok
         ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
-        : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
+        : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
+            _createTextVNode(\\"no\\")
+          ])),
       (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (value, index) => {
         return (_openBlock(), _createBlock(\\"div\\", null, [
           _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
@@ -26,7 +28,7 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 1`] = `
-"const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment, renderList: _renderList, createTextVNode: _createTextVNode } = Vue
+"const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList } = Vue
 
 return function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(\\"div\\", {
@@ -36,7 +38,9 @@ return function render(_ctx, _cache) {
     _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
     (_ctx.ok)
       ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
-      : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
+      : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
+          _createTextVNode(\\"no\\")
+        ])),
     (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
       return (_openBlock(), _createBlock(\\"div\\", null, [
         _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
@@ -47,7 +51,7 @@ return function render(_ctx, _cache) {
 `;
 
 exports[`compiler: integration tests module mode 1`] = `
-"import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, Fragment as _Fragment, renderList as _renderList, createTextVNode as _createTextVNode } from \\"vue\\"
+"import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList } from \\"vue\\"
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(\\"div\\", {
@@ -57,7 +61,9 @@ export function render(_ctx, _cache) {
     _createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
     (_ctx.ok)
       ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
-      : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [\\"no\\"])),
+      : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
+          _createTextVNode(\\"no\\")
+        ])),
     (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
       return (_openBlock(), _createBlock(\\"div\\", null, [
         _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)

packages/compiler-core/src/ast.ts

@@ -92,6 +92,7 @@ export type TemplateChildNode =
   | TextNode
   | CommentNode
   | IfNode
+  | IfBranchNode
   | ForNode
   | TextCallNode
 

packages/compiler-core/src/transform.ts

@@ -329,7 +329,6 @@ export function traverseChildren(
   for (; i < parent.children.length; i++) {
     const child = parent.children[i]
     if (isString(child)) continue
-    context.currentNode = child
     context.parent = parent
     context.childIndex = i
     context.onNodeRemoved = nodeRemoved
@@ -341,6 +340,7 @@ export function traverseNode(
   node: RootNode | TemplateChildNode,
   context: TransformContext
 ) {
+  context.currentNode = node
   // apply transform plugins
   const { nodeTransforms } = context
   const exitFns = []
@@ -380,9 +380,10 @@ export function traverseNode(
     // for container types, further traverse downwards
     case NodeTypes.IF:
       for (let i = 0; i < node.branches.length; i++) {
-        traverseChildren(node.branches[i], context)
+        traverseNode(node.branches[i], context)
       }
       break
+    case NodeTypes.IF_BRANCH:
     case NodeTypes.FOR:
     case NodeTypes.ELEMENT:
     case NodeTypes.ROOT:

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

@@ -16,7 +16,8 @@ export const transformText: NodeTransform = (node, context) => {
   if (
     node.type === NodeTypes.ROOT ||
     node.type === NodeTypes.ELEMENT ||
-    node.type === NodeTypes.FOR
+    node.type === NodeTypes.FOR ||
+    node.type === NodeTypes.IF_BRANCH
   ) {
     // perform the transform on node exit so that all expressions have already
     // been processed.

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

@@ -1,7 +1,7 @@
 import {
   createStructuralDirectiveTransform,
-  traverseChildren,
-  TransformContext
+  TransformContext,
+  traverseNode
 } from '../transform'
 import {
   NodeTypes,
@@ -125,7 +125,7 @@ export function processIf(
         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)
+        traverseNode(branch, context)
         // call on exit
         if (onExit) onExit()
         // make sure to reset currentNode after traversal to indicate this