feat(runtime): support insertAdjacentHTML

packages/taro-runtime/src/__tests__/dom.spec.js

@@ -123,6 +123,30 @@ describe('DOM', () => {
       container.textContent = ''
       expect(container.hasChildNodes()).toBe(false)
     })
+
+    it('insertAdjacentHTML', () => {
+      const container = document.createElement('container')
+      const div = document.createElement('div')
+      const text = document.createTextNode('text')
+      container.appendChild(div)
+      container.firstChild.appendChild(text)
+
+      const divBeforeInsert = container.firstChild
+      divBeforeInsert.insertAdjacentHTML('beforebegin', '<view />')
+      divBeforeInsert.insertAdjacentHTML('afterbegin', '<button />')
+      divBeforeInsert.insertAdjacentHTML('beforeend', '<input />')
+      divBeforeInsert.insertAdjacentHTML('afterend', '<image />')
+
+      expect(container.childNodes.length).toBe(3)
+      expect(container.childNodes[0].nodeName).toBe('view')
+      expect(container.childNodes[1].nodeName).toBe('div')
+      expect(container.childNodes[2].nodeName).toBe('image')
+
+      const divAfterInsert = container.childNodes[1]
+      expect(divAfterInsert.childNodes.length).toBe(3)
+      expect(divAfterInsert.firstChild.nodeName).toBe('button')
+      expect(divAfterInsert.lastChild.nodeName).toBe('input')
+    })
   })
 
   describe('text', () => {

packages/taro-runtime/src/dom/node.ts

@@ -7,6 +7,7 @@ import { Shortcuts, ensure } from '@tarojs/shared'
 import { hydrate, HydratedData } from '../hydrate'
 import { TaroElement } from './element'
 import { setInnerHTML } from './html/html'
+import { parser } from './html/parser'
 import { CurrentReconciler } from '../reconciler'
 import { document } from '../bom/document'
 
@@ -216,6 +217,40 @@ export class TaroNode extends TaroEventTarget {
     return ''
   }
 
+  /**
+   * An implementation of `Element.insertAdjacentHTML()`
+   * to support Vue 3 with a version of or greater than `vue@3.1.2`
+   */
+  public insertAdjacentHTML (
+    position: 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend',
+    html: string
+  ) {
+    const parsedNodes = parser(html)
+
+    for (let i = 0; i < parsedNodes.length; i++) {
+      const n = parsedNodes[i]
+
+      switch (position) {
+        case 'beforebegin':
+          this.parentNode?.insertBefore(n, this)
+          break
+        case 'afterbegin':
+          if (this.hasChildNodes()) {
+            this.childNodes[0].insertBefore(n)
+          } else {
+            this.appendChild(n)
+          }
+          break
+        case 'beforeend':
+          this.appendChild(n)
+          break
+        case 'afterend':
+          this.parentNode?.appendChild(n)
+          break
+      }
+    }
+  }
+
   protected findIndex (childeNodes: TaroNode[], refChild: TaroNode) {
     const index = childeNodes.indexOf(refChild)
     ensure(index !== -1, 'The node to be replaced is not a child of this node.')