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

fix #5439
close #5445

Author: yyx990803

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,44 +279,59 @@ 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) {
       res += ` ${p.name}`
       if (p.value) {
         res += `="${escapeHtml(p.value.content)}"`
       }
-    } else if (p.type === NodeTypes.DIRECTIVE && 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__${
-          exp.content
-        }__VUE_EXP_END__"`
-        continue
-      }
-      // constant v-bind, e.g. :foo="1"
-      let evaluated = evaluateConstant(exp)
-      if (evaluated != null) {
-        const arg = p.arg && (p.arg as SimpleExpressionNode).content
-        if (arg === 'class') {
-          evaluated = normalizeClass(evaluated)
-        } else if (arg === 'style') {
-          evaluated = stringifyStyle(normalizeStyle(evaluated))
+    } 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__${exp.content}__VUE_EXP_END__"`
+          continue
+        }
+        // constant v-bind, e.g. :foo="1"
+        let evaluated = evaluateConstant(exp)
+        if (evaluated != null) {
+          const arg = p.arg && (p.arg as SimpleExpressionNode).content
+          if (arg === 'class') {
+            evaluated = normalizeClass(evaluated)
+          } else if (arg === 'style') {
+            evaluated = stringifyStyle(normalizeStyle(evaluated))
+          }
+          res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
+            evaluated
+          )}"`
         }
-        res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
-          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 += `>`
-  for (let i = 0; i < node.children.length; i++) {
-    res += stringifyNode(node.children[i], context)
+  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,11 +26,13 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
       createObjectProperty(
         createSimpleExpression(`textContent`, true),
         exp
-          ? createCallExpression(
-              context.helperString(TO_DISPLAY_STRING),
-              [exp],
-              loc
-            )
+          ? getConstantType(exp, context) > 0
+            ? exp
+            : createCallExpression(
+                context.helperString(TO_DISPLAY_STRING),
+                [exp],
+                loc
+              )
           : createSimpleExpression('', true)
       )
     ]