feat(compiler): convert text mixed with elements into createVNode calls

This ensures they are tracked as dynamic children when inside blocks.
Also guaruntees compiled vnodes always have vnode children in arrays
so that they can skip normalizeVNode safely in optimized mode.

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

@@ -122,6 +122,7 @@ export function isStaticNode(
     case NodeTypes.FOR:
       return false
     case NodeTypes.INTERPOLATION:
+    case NodeTypes.TEXT_CALL:
       return isStaticNode(node.content, resultCache)
     case NodeTypes.SIMPLE_EXPRESSION:
       return node.isConstant

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

@@ -4,8 +4,11 @@ import {
   TemplateChildNode,
   TextNode,
   InterpolationNode,
-  CompoundExpressionNode
+  CompoundExpressionNode,
+  createCallExpression
 } from '../ast'
+import { TEXT, CREATE_VNODE } from '../runtimeHelpers'
+import { PatchFlags, PatchFlagNames } from '@vue/shared'
 
 const isText = (
   node: TemplateChildNode
@@ -14,16 +17,19 @@ const isText = (
 
 // Merge adjacent text nodes and expressions into a single expression
 // e.g. <div>abc {{ d }} {{ e }}</div> should have a single expression node as child.
-export const optimizeText: NodeTransform = node => {
+export const transformText: NodeTransform = (node, context) => {
   if (node.type === NodeTypes.ROOT || node.type === NodeTypes.ELEMENT) {
     // perform the transform on node exit so that all expressions have already
     // been processed.
     return () => {
       const children = node.children
       let currentContainer: CompoundExpressionNode | undefined = undefined
+      let hasText = false
+
       for (let i = 0; i < children.length; i++) {
         const child = children[i]
         if (isText(child)) {
+          hasText = true
           for (let j = i + 1; j < children.length; j++) {
             const next = children[j]
             if (isText(next)) {
@@ -45,6 +51,31 @@ export const optimizeText: NodeTransform = node => {
           }
         }
       }
+
+      if (hasText && children.length > 1) {
+        // when an element has mixed text/element children, convert text nodes
+        // into createVNode(Text) calls.
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i]
+          if (isText(child) || child.type === NodeTypes.COMPOUND_EXPRESSION) {
+            const callArgs = [context.helper(TEXT), `null`, child]
+            if (child.type !== NodeTypes.TEXT) {
+              callArgs.push(
+                `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
+              )
+            }
+            children[i] = {
+              type: NodeTypes.TEXT_CALL,
+              content: child,
+              loc: child.loc,
+              codegenNode: createCallExpression(
+                context.helper(CREATE_VNODE),
+                callArgs
+              )
+            }
+          }
+        }
+      }
     }
   }
 }