fix(compiler): stringify values on v-text (#2432)

fix #2430

Author: posva

packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap

@@ -5,10 +5,12 @@ exports[`compile should contain standard transforms 1`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(_Fragment, null, [
-      _createVNode(\\"div\\", { textContent: text }, null, 8 /* PROPS */, [\\"textContent\\"]),
+      _createVNode(\\"div\\", {
+        textContent: _toDisplayString(text)
+      }, null, 8 /* PROPS */, [\\"textContent\\"]),
       _createVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
       _createVNode(\\"div\\", null, \\"test\\"),
       _createVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),

packages/compiler-dom/__tests__/transforms/vText.spec.ts

@@ -31,7 +31,9 @@ describe('compiler: v-text transform', () => {
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        textContent: `[test]`
+        textContent: {
+          arguments: [{ content: 'test' }]
+        }
       }),
       children: undefined,
       patchFlag: genFlagText(PatchFlags.PROPS),
@@ -50,7 +52,9 @@ describe('compiler: v-text transform', () => {
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        textContent: `[test]`
+        textContent: {
+          arguments: [{ content: 'test' }]
+        }
       }),
       children: undefined, // <-- children should have been removed
       patchFlag: genFlagText(PatchFlags.PROPS),

packages/compiler-dom/src/transforms/vText.ts

@@ -1,7 +1,9 @@
 import {
   DirectiveTransform,
   createObjectProperty,
-  createSimpleExpression
+  createSimpleExpression,
+  TO_DISPLAY_STRING,
+  createCallExpression
 } from '@vue/compiler-core'
 import { createDOMCompilerError, DOMErrorCodes } from '../errors'
 
@@ -21,8 +23,14 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
   return {
     props: [
       createObjectProperty(
-        createSimpleExpression(`textContent`, true, loc),
-        exp || createSimpleExpression('', true)
+        createSimpleExpression(`textContent`, true),
+        exp
+          ? createCallExpression(
+              context.helperString(TO_DISPLAY_STRING),
+              [exp],
+              loc
+            )
+          : createSimpleExpression('', true)
       )
     ]
   }