feat(runtime-vapor): v-html and v-text work with component (#13496)

Author: edison1105

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

@@ -32,3 +32,24 @@ export function render(_ctx) {
   return n0
 }"
 `;
+
+exports[`v-html > work with component 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, setBlockHtml as _setBlockHtml, renderEffect as _renderEffect } from 'vue';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n0 = _createComponentWithFallback(_component_Comp, null, null, true)
+  _renderEffect(() => _setBlockHtml(n0, _ctx.foo))
+  return n0
+}"
+`;
+
+exports[`v-html > work with dynamic component 1`] = `
+"import { createDynamicComponent as _createDynamicComponent, setBlockHtml as _setBlockHtml, renderEffect as _renderEffect } from 'vue';
+
+export function render(_ctx) {
+  const n0 = _createDynamicComponent(() => (_ctx.Comp), null, null, true)
+  _renderEffect(() => _setBlockHtml(n0, _ctx.foo))
+  return n0
+}"
+`;

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

@@ -33,3 +33,24 @@ export function render(_ctx) {
   return n0
 }"
 `;
+
+exports[`v-text > work with component 1`] = `
+"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, toDisplayString as _toDisplayString, setBlockText as _setBlockText, renderEffect as _renderEffect } from 'vue';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n0 = _createComponentWithFallback(_component_Comp, null, null, true)
+  _renderEffect(() => _setBlockText(n0, _toDisplayString(_ctx.foo)))
+  return n0
+}"
+`;
+
+exports[`v-text > work with dynamic component 1`] = `
+"import { createDynamicComponent as _createDynamicComponent, toDisplayString as _toDisplayString, setBlockText as _setBlockText, renderEffect as _renderEffect } from 'vue';
+
+export function render(_ctx) {
+  const n0 = _createDynamicComponent(() => (_ctx.Comp), null, null, true)
+  _renderEffect(() => _setBlockText(n0, _toDisplayString(_ctx.foo)))
+  return n0
+}"
+`;

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

@@ -54,6 +54,18 @@ describe('v-html', () => {
     expect(code).matchSnapshot()
   })
 
+  test('work with dynamic component', () => {
+    const { code } = compileWithVHtml(`<component :is="Comp" v-html="foo"/>`)
+    expect(code).matchSnapshot()
+    expect(code).contains('setBlockHtml(n0, _ctx.foo))')
+  })
+
+  test('work with component', () => {
+    const { code } = compileWithVHtml(`<Comp v-html="foo"/>`)
+    expect(code).matchSnapshot()
+    expect(code).contains('setBlockHtml(n0, _ctx.foo))')
+  })
+
   test('should raise error and ignore children when v-html is present', () => {
     const onError = vi.fn()
     const { code, ir, helpers } = compileWithVHtml(

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

@@ -58,6 +58,18 @@ describe('v-text', () => {
     expect(code).matchSnapshot()
   })
 
+  test('work with dynamic component', () => {
+    const { code } = compileWithVText(`<component :is="Comp" v-text="foo"/>`)
+    expect(code).matchSnapshot()
+    expect(code).contains('setBlockText(n0, _toDisplayString(_ctx.foo))')
+  })
+
+  test('work with component', () => {
+    const { code } = compileWithVText(`<Comp v-text="foo"/>`)
+    expect(code).matchSnapshot()
+    expect(code).contains('setBlockText(n0, _toDisplayString(_ctx.foo))')
+  })
+
   test('should raise error and ignore children when v-text is present', () => {
     const onError = vi.fn()
     const { code, ir } = compileWithVText(`<div v-text="test">hello</div>`, {

packages/compiler-vapor/src/generators/html.ts

@@ -8,9 +8,15 @@ export function genSetHtml(
   context: CodegenContext,
 ): CodeFragment[] {
   const { helper } = context
-  const { value, element } = oper
+
+  const { value, element, isComponent } = oper
   return [
     NEWLINE,
-    ...genCall(helper('setHtml'), `n${element}`, genExpression(value, context)),
+    ...genCall(
+      // use setBlockHtml for component
+      isComponent ? helper('setBlockHtml') : helper('setHtml'),
+      `n${element}`,
+      genExpression(value, context),
+    ),
   ]
 }

packages/compiler-vapor/src/generators/text.ts

@@ -10,11 +10,16 @@ export function genSetText(
   context: CodegenContext,
 ): CodeFragment[] {
   const { helper } = context
-  const { element, values, generated, jsx } = oper
+  const { element, values, generated, jsx, isComponent } = oper
   const texts = combineValues(values, context, jsx)
   return [
     NEWLINE,
-    ...genCall(helper('setText'), `${generated ? 'x' : 'n'}${element}`, texts),
+    ...genCall(
+      // use setBlockText for component
+      isComponent ? helper('setBlockText') : helper('setText'),
+      `${generated && !isComponent ? 'x' : 'n'}${element}`,
+      texts,
+    ),
   ]
 }
 

packages/compiler-vapor/src/ir/index.ts

@@ -126,6 +126,7 @@ export interface SetTextIRNode extends BaseIRNode {
   values: SimpleExpressionNode[]
   generated?: boolean // whether this is a generated empty text node by `processTextLikeContainer`
   jsx?: boolean
+  isComponent?: boolean
 }
 
 export type KeyOverride = [find: string, replacement: string]
@@ -152,6 +153,7 @@ export interface SetHtmlIRNode extends BaseIRNode {
   type: IRNodeTypes.SET_HTML
   element: number
   value: SimpleExpressionNode
+  isComponent?: boolean
 }
 
 export interface SetTemplateRefIRNode extends BaseIRNode {

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

@@ -22,5 +22,6 @@ export const transformVHtml: DirectiveTransform = (dir, node, context) => {
     type: IRNodeTypes.SET_HTML,
     element: context.reference(),
     value: exp,
+    isComponent: node.tagType === 1,
   })
 }

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

@@ -1,4 +1,8 @@
-import { DOMErrorCodes, createDOMCompilerError } from '@vue/compiler-dom'
+import {
+  DOMErrorCodes,
+  ElementTypes,
+  createDOMCompilerError,
+} from '@vue/compiler-dom'
 import { IRNodeTypes } from '../ir'
 import { EMPTY_EXPRESSION } from './utils'
 import type { DirectiveTransform } from '../transform'
@@ -30,15 +34,19 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
     context.childrenTemplate = [String(literal)]
   } else {
     context.childrenTemplate = [' ']
-    context.registerOperation({
-      type: IRNodeTypes.GET_TEXT_CHILD,
-      parent: context.reference(),
-    })
+    const isComponent = node.tagType === ElementTypes.COMPONENT
+    if (!isComponent) {
+      context.registerOperation({
+        type: IRNodeTypes.GET_TEXT_CHILD,
+        parent: context.reference(),
+      })
+    }
     context.registerEffect([exp], {
       type: IRNodeTypes.SET_TEXT,
       element: context.reference(),
       values: [exp],
       generated: true,
+      isComponent,
     })
   }
 }