feat(compiler): generate TEXT patchFlag

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

@@ -5,7 +5,7 @@ exports[`compiler: integration tests function mode 1`] = `
 
 return function render() {
   with (this) {
-    const { createVNode: _createVNode, toString: _toString, openBlock: _openBlock, createBlock: _createBlock, Empty: _Empty, Fragment: _Fragment, renderList: _renderList } = _Vue
+    const { toString: _toString, openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Empty: _Empty, Fragment: _Fragment, renderList: _renderList } = _Vue
     
     return _createVNode(\\"div\\", {
       id: \\"foo\\",
@@ -19,7 +19,7 @@ return function render() {
           ])),
       _createVNode(_Fragment, null, _renderList(list, (value, index) => {
         return (_openBlock(), _createBlock(\\"div\\", null, [
-          _createVNode(\\"span\\", null, _toString(value + index))
+          _createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
         ]))
       }), 128 /* UNKEYED_FRAGMENT */)
     ], 2 /* CLASS */)
@@ -28,7 +28,7 @@ return function render() {
 `;
 
 exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 1`] = `
-"const { createVNode, toString, openBlock, createBlock, Empty, Fragment, renderList } = Vue
+"const { toString, openBlock, createVNode, createBlock, Empty, Fragment, renderList } = Vue
 
 return function render() {
   const _ctx = this
@@ -44,7 +44,7 @@ return function render() {
         ])),
     createVNode(Fragment, null, renderList(_ctx.list, (value, index) => {
       return (openBlock(), createBlock(\\"div\\", null, [
-        createVNode(\\"span\\", null, toString(value + index))
+        createVNode(\\"span\\", null, toString(value + index), 1 /* TEXT */)
       ]))
     }), 128 /* UNKEYED_FRAGMENT */)
   ], 2 /* CLASS */)
@@ -52,7 +52,7 @@ return function render() {
 `;
 
 exports[`compiler: integration tests module mode 1`] = `
-"import { createVNode, toString, openBlock, createBlock, Empty, Fragment, renderList } from \\"vue\\"
+"import { toString, openBlock, createVNode, createBlock, Empty, Fragment, renderList } from \\"vue\\"
 
 export default function render() {
   const _ctx = this
@@ -68,7 +68,7 @@ export default function render() {
         ])),
     createVNode(Fragment, null, renderList(_ctx.list, (value, index) => {
       return (openBlock(), createBlock(\\"div\\", null, [
-        createVNode(\\"span\\", null, _toString(value + index))
+        createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
       ]))
     }), 128 /* UNKEYED_FRAGMENT */)
   ], 2 /* CLASS */)

packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`compiler: transform component slots dynamically named slots 1`] = `
-"const { resolveComponent, createVNode, toString } = Vue
+"const { toString, resolveComponent, createVNode } = Vue
 
 return function render() {
   const _ctx = this
@@ -21,7 +21,7 @@ return function render() {
 `;
 
 exports[`compiler: transform component slots explicit default slot 1`] = `
-"const { resolveComponent, createVNode, toString } = Vue
+"const { toString, resolveComponent, createVNode } = Vue
 
 return function render() {
   const _ctx = this
@@ -37,7 +37,7 @@ return function render() {
 `;
 
 exports[`compiler: transform component slots implicit default slot 1`] = `
-"const { resolveComponent, createVNode } = Vue
+"const { createVNode, resolveComponent } = Vue
 
 return function render() {
   const _ctx = this
@@ -52,7 +52,7 @@ return function render() {
 `;
 
 exports[`compiler: transform component slots named slots 1`] = `
-"const { resolveComponent, createVNode, toString } = Vue
+"const { toString, resolveComponent, createVNode } = Vue
 
 return function render() {
   const _ctx = this
@@ -72,12 +72,12 @@ return function render() {
 `;
 
 exports[`compiler: transform component slots nested slots scoping 1`] = `
-"const { resolveComponent, createVNode, toString } = Vue
+"const { toString, resolveComponent, createVNode } = Vue
 
 return function render() {
   const _ctx = this
-  const _component_Comp = resolveComponent(\\"Comp\\")
   const _component_Inner = resolveComponent(\\"Inner\\")
+  const _component_Comp = resolveComponent(\\"Comp\\")
   
   return createVNode(_component_Comp, null, {
     default: ({ foo }) => [

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

@@ -26,6 +26,7 @@ import { transformStyle } from '../../src/transforms/transformStyle'
 import { transformBind } from '../../src/transforms/vBind'
 import { PatchFlags } from '@vue/shared'
 import { createObjectMatcher } from '../testUtils'
+import { optimizeText } from '../../src/transforms/optimizeText'
 
 function parseWithElementTransform(
   template: string,
@@ -36,7 +37,7 @@ function parseWithElementTransform(
 } {
   const ast = parse(template, options)
   transform(ast, {
-    nodeTransforms: [transformElement],
+    nodeTransforms: [optimizeText, transformElement],
     ...options
   })
   const codegenNode = (ast.children[0] as ElementNode)
@@ -562,6 +563,20 @@ describe('compiler: element transform', () => {
       })
     }
 
+    test('TEXT', () => {
+      const { node } = parseWithBind(`<div>foo</div>`)
+      expect(node.arguments.length).toBe(3)
+
+      const { node: node2 } = parseWithBind(`<div>{{ foo }}</div>`)
+      expect(node2.arguments.length).toBe(4)
+      expect(node2.arguments[3]).toBe(`${PatchFlags.TEXT} /* TEXT */`)
+
+      // multiple nodes, merged with optimze text
+      const { node: node3 } = parseWithBind(`<div>foo {{ bar }} baz</div>`)
+      expect(node3.arguments.length).toBe(4)
+      expect(node3.arguments[3]).toBe(`${PatchFlags.TEXT} /* TEXT */`)
+    })
+
     test('CLASS', () => {
       const { node } = parseWithBind(`<div :class="foo" />`)
       expect(node.arguments.length).toBe(4)

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

@@ -123,9 +123,8 @@ describe('compiler: transform component slots', () => {
         one: {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
-            type: NodeTypes.SIMPLE_EXPRESSION,
+            type: NodeTypes.COMPOUND_EXPRESSION,
-            content: `{ foo }`,
+            children: [`{ `, { content: `foo` }, ` }`]
-            isStatic: false
           },
           returns: [
             {
@@ -145,9 +144,8 @@ describe('compiler: transform component slots', () => {
         two: {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
-            type: NodeTypes.SIMPLE_EXPRESSION,
+            type: NodeTypes.COMPOUND_EXPRESSION,
-            content: `{ bar }`,
+            children: [`{ `, { content: `bar` }, ` }`]
-            isStatic: false
           },
           returns: [
             {
@@ -186,9 +184,8 @@ describe('compiler: transform component slots', () => {
         '[_ctx.one]': {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
-            type: NodeTypes.SIMPLE_EXPRESSION,
+            type: NodeTypes.COMPOUND_EXPRESSION,
-            content: `{ foo }`,
+            children: [`{ `, { content: `foo` }, ` }`]
-            isStatic: false
           },
           returns: [
             {
@@ -208,9 +205,8 @@ describe('compiler: transform component slots', () => {
         '[_ctx.two]': {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
-            type: NodeTypes.SIMPLE_EXPRESSION,
+            type: NodeTypes.COMPOUND_EXPRESSION,
-            content: `{ bar }`,
+            children: [`{ `, { content: `bar` }, ` }`]
-            isStatic: false
           },
           returns: [
             {
@@ -249,9 +245,8 @@ describe('compiler: transform component slots', () => {
         default: {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
-            type: NodeTypes.SIMPLE_EXPRESSION,
+            type: NodeTypes.COMPOUND_EXPRESSION,
-            content: `{ foo }`,
+            children: [`{ `, { content: `foo` }, ` }`]
-            isStatic: false
           },
           returns: [
             {

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

@@ -38,6 +38,9 @@ export const transformElement: NodeTransform = (node, context) => {
       node.tagType === ElementTypes.ELEMENT ||
       node.tagType === ElementTypes.COMPONENT
     ) {
+      // perform the work on exit, after all child expressions have been
+      // processed and merged.
+      return () => {
         const isComponent = node.tagType === ElementTypes.COMPONENT
         let hasProps = node.props.length > 0
         const hasChildren = node.children.length > 0
@@ -86,17 +89,21 @@ export const transformElement: NodeTransform = (node, context) => {
             if (hasDynamicSlotName) {
               patchFlag |= PatchFlags.DYNAMIC_SLOTS
             }
-        } else {
+          } else if (node.children.length === 1) {
-          if (node.children.length === 1) {
             const child = node.children[0]
             const type = child.type
+            const hasDynamicTextChild =
+              type === NodeTypes.INTERPOLATION ||
+              type === NodeTypes.COMPOUND_EXPRESSION
+            if (hasDynamicTextChild) {
+              patchFlag |= PatchFlags.TEXT
+            }
             // pass directly if the only child is one of:
             // - text (plain / interpolation / expression)
             // - <slot> outlet (already an array)
             if (
               type === NodeTypes.TEXT ||
-              type === NodeTypes.INTERPOLATION ||
+              hasDynamicTextChild ||
-              type === NodeTypes.COMPOUND_EXPRESSION ||
               (type === NodeTypes.ELEMENT &&
                 (child as ElementNode).tagType === ElementTypes.SLOT)
             ) {
@@ -108,7 +115,6 @@ export const transformElement: NodeTransform = (node, context) => {
             args.push(node.children)
           }
         }
-      }
         // patchFlag & dynamicPropNames
         if (patchFlag !== 0) {
           if (!hasChildren) {
@@ -160,6 +166,7 @@ export const transformElement: NodeTransform = (node, context) => {
       }
     }
   }
+}
 
 type PropsExpression = ObjectExpression | CallExpression | ExpressionNode