fix(compiler-dom): properly stringify v-html/v-text with constant value

fix #5439
close #5445

packages/compiler-core/src/index.ts

@@ -59,6 +59,7 @@ export {
   PropsExpression
 } from './transforms/transformElement'
 export { processSlotOutlet } from './transforms/transformSlotOutlet'
+export { getConstantType } from './transforms/hoistStatic'
 export { generateCodeFrame } from '@vue/shared'
 
 // v2 compat only

packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap

@@ -32,3 +32,23 @@ return function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
 }"
 `;
+
+exports[`stringify static html stringify v-html 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
+
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
+
+return function render(_ctx, _cache) {
+  return _hoisted_1
+}"
+`;
+
+exports[`stringify static html stringify v-text 1`] = `
+"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
+
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
+
+return function render(_ctx, _cache) {
+  return _hoisted_1
+}"
+`;

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

@@ -433,4 +433,25 @@ describe('stringify static html', () => {
       ]
     })
   })
+
+  // #5439
+  test('stringify v-html', () => {
+    const { code } = compileWithStringify(`
+      <pre  data-type="js"><code v-html="'&lt;span&gt;show-it &lt;/span&gt;'"></code></pre>
+      <div class>
+        <span class>1</span><span class>2</span>
+      </div>`)
+    expect(code).toMatch(`<code><span>show-it </span></code>`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('stringify v-text', () => {
+    const { code } = compileWithStringify(`
+      <pre  data-type="js"><code v-text="'&lt;span&gt;show-it &lt;/span&gt;'"></code></pre>
+      <div class>
+        <span class>1</span><span class>2</span>
+      </div>`)
+    expect(code).toMatch(`<code>&lt;span&gt;show-it &lt;/span&gt;</code>`)
+    expect(code).toMatchSnapshot()
+  })
 })

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

@@ -279,6 +279,7 @@ function stringifyElement(
   context: TransformContext
 ): string {
   let res = `<${node.tag}`
+  let innerHTML = ''
   for (let i = 0; i < node.props.length; i++) {
     const p = node.props[i]
     if (p.type === NodeTypes.ATTRIBUTE) {
@@ -286,14 +287,15 @@ function stringifyElement(
       if (p.value) {
         res += `="${escapeHtml(p.value.content)}"`
       }
-    } else if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind') {
+    } else if (p.type === NodeTypes.DIRECTIVE) {
+      if (p.name === 'bind') {
         const exp = p.exp as SimpleExpressionNode
         if (exp.content[0] === '_') {
           // internally generated string constant references
           // e.g. imported URL strings via compiler-sfc transformAssetUrl plugin
-        res += ` ${(p.arg as SimpleExpressionNode).content}="__VUE_EXP_START__${
+          res += ` ${
-          exp.content
+            (p.arg as SimpleExpressionNode).content
-        }__VUE_EXP_END__"`
+          }="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`
           continue
         }
         // constant v-bind, e.g. :foo="1"
@@ -309,15 +311,28 @@ function stringifyElement(
             evaluated
           )}"`
         }
+      } else if (p.name === 'html') {
+        // #5439 v-html with constant value
+        // not sure why would anyone do this but it can happen
+        innerHTML = evaluateConstant(p.exp as SimpleExpressionNode)
+      } else if (p.name === 'text') {
+        innerHTML = escapeHtml(
+          toDisplayString(evaluateConstant(p.exp as SimpleExpressionNode))
+        )
+      }
     }
   }
   if (context.scopeId) {
     res += ` ${context.scopeId}`
   }
   res += `>`
+  if (innerHTML) {
+    res += innerHTML
+  } else {
     for (let i = 0; i < node.children.length; i++) {
       res += stringifyNode(node.children[i], context)
     }
+  }
   if (!isVoidTag(node.tag)) {
     res += `</${node.tag}>`
   }

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

@@ -3,7 +3,8 @@ import {
   createObjectProperty,
   createSimpleExpression,
   TO_DISPLAY_STRING,
-  createCallExpression
+  createCallExpression,
+  getConstantType
 } from '@vue/compiler-core'
 import { createDOMCompilerError, DOMErrorCodes } from '../errors'
 
@@ -25,7 +26,9 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
       createObjectProperty(
         createSimpleExpression(`textContent`, true),
         exp
-          ? createCallExpression(
+          ? getConstantType(exp, context) > 0
+            ? exp
+            : createCallExpression(
                 context.helperString(TO_DISPLAY_STRING),
                 [exp],
                 loc