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

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

@@ -33,12 +33,23 @@ export function render(_ctx) {
 }"
 `;
 
+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, setHtml as _setHtml, renderEffect as _renderEffect } from 'vue';
+"import { createDynamicComponent as _createDynamicComponent, setBlockHtml as _setBlockHtml, renderEffect as _renderEffect } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createDynamicComponent(() => ('button'), null, null, true)
-  _renderEffect(() => _setHtml(n0.nodes, _ctx.foo))
+  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

@@ -34,12 +34,23 @@ export function render(_ctx) {
 }"
 `;
 
+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, setElementText as _setElementText, renderEffect as _renderEffect } from 'vue';
+"import { createDynamicComponent as _createDynamicComponent, toDisplayString as _toDisplayString, setBlockText as _setBlockText, renderEffect as _renderEffect } from 'vue';
 
 export function render(_ctx) {
-  const n0 = _createDynamicComponent(() => ('button'), null, null, true)
-  _renderEffect(() => _setElementText(n0.nodes, _toDisplayString(_ctx.foo), true))
+  const n0 = _createDynamicComponent(() => (_ctx.Comp), null, null, true)
+  _renderEffect(() => _setBlockText(n0, _toDisplayString(_ctx.foo)))
   return n0
 }"
 `;

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

@@ -55,11 +55,15 @@ describe('v-html', () => {
   })
 
   test('work with dynamic component', () => {
-    const { code } = compileWithVHtml(
-      `<component :is="'button'" v-html="foo"/>`,
-    )
+    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('setHtml(n0.nodes, _ctx.foo))')
+    expect(code).contains('setBlockHtml(n0, _ctx.foo))')
   })
 
   test('should raise error and ignore children when v-html is present', () => {

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

@@ -59,13 +59,15 @@ describe('v-text', () => {
   })
 
   test('work with dynamic component', () => {
-    const { code } = compileWithVText(
-      `<component :is="'button'" v-text="foo"/>`,
-    )
+    const { code } = compileWithVText(`<component :is="Comp" v-text="foo"/>`)
     expect(code).matchSnapshot()
-    expect(code).contains(
-      'setElementText(n0.nodes, _toDisplayString(_ctx.foo), true)',
-    )
+    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', () => {

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

@@ -60,15 +60,12 @@ export function genCreateComponent(
     [],
   )
 
-  const isDynamicComponent = operation.dynamic && !operation.dynamic.isStatic
-  if (isDynamicComponent) context.block.dynamicComponents.push(operation.id)
-
   return [
     NEWLINE,
     ...inlineHandlers,
     `const n${operation.id} = `,
     ...genCall(
-      isDynamicComponent
+      operation.dynamic && !operation.dynamic.isStatic
         ? helper('createDynamicComponent')
         : operation.asset
           ? helper('createComponentWithFallback')

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

@@ -7,20 +7,15 @@ export function genSetHtml(
   oper: SetHtmlIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
-  const {
-    helper,
-    block: { dynamicComponents },
-  } = context
+  const { helper } = context
 
-  const isDynamicComponent = dynamicComponents.includes(oper.element)
-  const { value, element } = oper
+  const { value, element, isComponent } = oper
   return [
     NEWLINE,
     ...genCall(
-      helper('setHtml'),
-      // if the element is a dynamic component (VaporFragment)
-      // it should set html to the VaporFragment's nodes
-      `n${element}${isDynamicComponent ? '.nodes' : ''}`,
+      // use setBlockHtml for component
+      isComponent ? helper('setBlockHtml') : helper('setHtml'),
+      `n${element}`,
       genExpression(value, context),
     ),
   ]

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

@@ -9,33 +9,18 @@ export function genSetText(
   oper: SetTextIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
-  const {
-    helper,
-    block: { dynamicComponents },
-  } = context
-  const { element, values, generated, jsx } = oper
+  const { helper } = context
+  const { element, values, generated, jsx, isComponent } = oper
   const texts = combineValues(values, context, jsx)
-
-  // if the element is a dynamic component, we need to use `setElementText`
-  // to set the textContent of the VaporFragment's nodes.
-  return dynamicComponents.includes(oper.element)
-    ? [
-        NEWLINE,
-        ...genCall(
-          helper('setElementText'),
-          `n${element}.nodes`,
-          texts,
-          'true', // isConverted
-        ),
-      ]
-    : [
-        NEWLINE,
-        ...genCall(
-          helper('setText'),
-          `${generated ? 'x' : 'n'}${element}`,
-          texts,
-        ),
-      ]
+  return [
+    NEWLINE,
+    ...genCall(
+      // use setBlockText for component
+      isComponent ? helper('setBlockText') : helper('setText'),
+      `${generated && !isComponent ? 'x' : 'n'}${element}`,
+      texts,
+    ),
+  ]
 }
 
 function combineValues(
@@ -60,14 +45,6 @@ export function genGetTextChild(
   oper: GetTextChildIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
-  const {
-    block: { dynamicComponents },
-  } = context
-
-  // if the parent is a dynamic component, don't need to generate a child
-  // because it will use the `setElementText` helper directly.
-  if (dynamicComponents.includes(oper.parent)) return []
-
   return [
     NEWLINE,
     `const x${oper.parent} = ${context.helper('child')}(n${oper.parent})`,

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

@@ -49,7 +49,6 @@ export interface BlockIRNode extends BaseIRNode {
   type: IRNodeTypes.BLOCK
   node: RootNode | TemplateChildNode
   dynamic: IRDynamicInfo
-  dynamicComponents: number[]
   tempId: number
   effect: IREffect[]
   operation: OperationNode[]
@@ -125,6 +124,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]
@@ -151,6 +151,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/utils.ts

@@ -26,7 +26,6 @@ export const newBlock = (node: BlockIRNode['node']): BlockIRNode => ({
   type: IRNodeTypes.BLOCK,
   node,
   dynamic: newDynamic(),
-  dynamicComponents: [],
   effect: [],
   operation: [],
   returns: [],

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

@@ -30,15 +30,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 === 1
+    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,
     })
   }
 }