chore: special handling text node

Author: edison1105

packages/runtime-vapor/__tests__/dom/prop.spec.ts

@@ -506,7 +506,7 @@ describe('patchProp', () => {
       expect(html()).toBe('<div>foo</div>')
     })
 
-    test('with multiple roots component', async () => {
+    test('with component renders multiple roots nodes', async () => {
       const Comp = defineVaporComponent({
         setup() {
           return [
@@ -527,6 +527,25 @@ describe('patchProp', () => {
       expect(html()).toBe('<div>child</div><div>child</div>')
       expect('Extraneous non-props attributes (textContent)').toHaveBeenWarned()
     })
+
+    test('with component renders text node', async () => {
+      const Comp = defineVaporComponent({
+        setup() {
+          return template('child')()
+        },
+      })
+      const value = ref('foo')
+      const { html } = define({
+        setup() {
+          const n1 = createComponent(Comp, null, null, true)
+          renderEffect(() => setBlockText(n1, toDisplayString(value)))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('child')
+      expect('Extraneous non-props attributes (textContent)').toHaveBeenWarned()
+    })
   })
 
   describe('setBlockHtml', () => {
@@ -579,7 +598,7 @@ describe('patchProp', () => {
       expect(html()).toBe('<div><p>foo</p></div>')
     })
 
-    test('with multiple roots component', async () => {
+    test('with component renders multiple roots', async () => {
       const Comp = defineVaporComponent({
         setup() {
           return [
@@ -600,5 +619,24 @@ describe('patchProp', () => {
       expect(html()).toBe('<div>child</div><div>child</div>')
       expect('Extraneous non-props attributes (innerHTML)').toHaveBeenWarned()
     })
+
+    test('with component renders text node', async () => {
+      const Comp = defineVaporComponent({
+        setup() {
+          return template('child')()
+        },
+      })
+      const value = ref('<p>foo</p>')
+      const { html } = define({
+        setup() {
+          const n1 = createComponent(Comp, null, null, true)
+          renderEffect(() => setBlockHtml(n1, value.value))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('child')
+      expect('Extraneous non-props attributes (innerHTML)').toHaveBeenWarned()
+    })
   })
 })

packages/runtime-vapor/src/dom/prop.ts

@@ -209,19 +209,30 @@ export function setBlockText(
   }
 }
 
+/**
+ * dev only
+ */
+function warnOnArrayBlock(prop: string): void {
+  warn(
+    `Extraneous non-props attributes (` +
+      `${prop}) ` +
+      `were passed to component but could not be automatically inherited ` +
+      `because component renders text or multiple root nodes.`,
+  )
+}
+
 function setTextToBlock(block: Block, value: any): void {
   if (block instanceof Node) {
-    ;(block as Element).textContent = value
+    if (block instanceof Element) {
+      block.textContent = value
+    } else if (__DEV__) {
+      warnOnArrayBlock('textContent')
+    }
   } else if (isVaporComponent(block)) {
     setTextToBlock(block.block, value)
   } else if (isArray(block)) {
     if (__DEV__) {
-      warn(
-        `Extraneous non-props attributes (` +
-          `textContent) ` +
-          `were passed to component but could not be automatically inherited ` +
-          `because component renders multiple root nodes.`,
-      )
+      warnOnArrayBlock('textContent')
     }
   } else {
     setTextToBlock(block.nodes, value)
@@ -247,17 +258,16 @@ export function setBlockHtml(
 
 function setHtmlToBlock(block: Block, value: any): void {
   if (block instanceof Node) {
-    ;(block as Element).innerHTML = value
+    if (block instanceof Element) {
+      block.innerHTML = value
+    } else if (__DEV__) {
+      warnOnArrayBlock('innerHTML')
+    }
   } else if (isVaporComponent(block)) {
     setHtmlToBlock(block.block, value)
   } else if (isArray(block)) {
     if (__DEV__) {
-      warn(
-        `Extraneous non-props attributes (` +
-          `innerHTML) ` +
-          `were passed to component but could not be automatically inherited ` +
-          `because component renders multiple root nodes.`,
-      )
+      warnOnArrayBlock('innerHTML')
     }
   } else {
     setHtmlToBlock(block.nodes, value)