fix(compiler-vapor): keep literal interpolation in component slot templates (#14405)

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformText.spec.ts.snap

@@ -12,13 +12,12 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: text transform > constant text 1`] = `
-"import { child as _child, template as _template } from 'vue';
+"import { template as _template } from 'vue';
 const t0 = _template("<div>2 foo1 1 1 1", true)
 
 export function render(_ctx) {
-  const n1 = t0()
-  const n0 = _child(n1)
-  return n1
+  const n0 = t0()
+  return n0
 }"
 `;
 
@@ -32,3 +31,19 @@ export function render(_ctx) {
   return n0
 }"
 `;
+
+exports[`compiler: text transform > slot literal interpolation 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("Hello")
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n1 = _createComponentWithFallback(_component_Comp, null, {
+    "default": () => {
+      const n0 = t0()
+      return n0
+    }
+  }, true)
+  return n1
+}"
+`;

packages/compiler-vapor/__tests__/transforms/transformText.spec.ts

@@ -7,6 +7,7 @@ import {
   transformVBind,
   transformVIf,
   transformVOn,
+  transformVSlot,
 } from '../../src'
 
 import { makeCompile } from './_utils'
@@ -15,6 +16,7 @@ const compileWithTextTransform = makeCompile({
   nodeTransforms: [
     transformVIf,
     transformElement,
+    transformVSlot,
     transformChildren,
     transformText,
   ],
@@ -103,4 +105,10 @@ describe('compiler: text transform', () => {
     expect(code).includes(`_template("<div>2 foo1 1 1 1", true)`)
     expect(code).toMatchSnapshot()
   })
+
+  test('slot literal interpolation', () => {
+    const { code } = compileWithTextTransform(`<Comp>{{ "Hello" }}</Comp>`)
+    expect(code).includes('const t0 = _template("Hello")')
+    expect(code).toMatchSnapshot()
+  })
 })

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

@@ -112,14 +112,21 @@ function processInterpolation(context: TransformContext<InterpolationNode>) {
     return
   }
 
+  const literalValues = values.map(v => getLiteralExpressionValue(v))
+  const allLiteral = literalValues.every(v => v != null)
+  if (allLiteral && parentNode.type !== NodeTypes.ROOT) {
+    const text = literalValues.join('')
+    const isElementChild =
+      parentNode.type === NodeTypes.ELEMENT &&
+      parentNode.tagType === ElementTypes.ELEMENT
+    context.template += isElementChild ? escapeHtml(text) : text
+    return
+  }
+
   context.template += ' '
   const id = context.reference()
 
-  if (
-    values.length === 0 ||
-    (values.every(v => getLiteralExpressionValue(v) != null) &&
-      parentNode.type !== NodeTypes.ROOT)
-  ) {
+  if (values.length === 0) {
     return
   }