@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27 → 4.0.0-alpha.10

package/dist/runtime-ets/dom/node.ts

@@ -1,9 +1,11 @@
 import { eventSource } from '@tarojs/runtime/dist/runtime.esm'
 
-import { TaroEventTarget } from './eventTarget'
+import TaroDataSourceElement from './dataSource'
 
+import type { StandardProps } from '@tarojs/components/types'
+import type { TaroAny } from '../utils'
 import type { TaroDocument } from './document'
-import type { TaroElement } from './element'
+import type { TaroElement } from './element/element'
 
 export enum NodeType {
   ELEMENT_NODE = 1,
@@ -23,45 +25,73 @@ function genId (): string {
   return `_n_${_id++}`
 }
 
-export class TaroNode extends TaroEventTarget {
+export class TaroNode extends TaroDataSourceElement {
   public readonly nodeName: string
   public readonly nodeType: NodeType
   public childNodes: TaroNode[] = []
   public parentNode: TaroNode | null = null
   public _nid: string = genId()
+  public _doc: TaroDocument | null = null
+  public _instance?: TaroAny
 
-  public _doc: TaroDocument
+  private _textContent = ''
+
+  // 以下属性为半编译模式下才会赋值和使用的属性
+  // 半编译节点更新触发器
+  public _updateTrigger = 0
   // 是否为半编译模板下的节点
   public _isCompileMode = false
   // 是否为半编译模板下拥有自主更新权的节点
   public _isDynamicNode = false
-  public _instance: any
 
-  private _updateTrigger = 0
-  private _textContent = ''
-
-  constructor(nodeName, nodeType = NodeType.ELEMENT_NODE) {
+  constructor(nodeName: string, nodeType = NodeType.ELEMENT_NODE) {
     super()
+
     this.nodeType = nodeType
     this.nodeName = nodeName
-    eventSource.set(this._nid, this as any)
+    eventSource.set(this._nid, this as TaroAny)
+  }
+
+  totalCount(): number {
+    return this.childNodes?.length || 0
+  }
+
+  getData(index: number): TaroElement<StandardProps> {
+    return this.childNodes[index] as TaroElement
   }
 
-  protected findIndex (refChild: TaroNode): number {
-    // @Observe 会影响 === 判断，只能比较 _nid
-    return this.childNodes.findIndex(node => node._nid === refChild._nid)
+  public findIndex (refChild?: TaroNode): number {
+    return this.childNodes.findIndex(node => node._nid === refChild?._nid)
+  }
+
+  public updateTextNode () {
+    // @ts-ignore
+    if (this.childNodes.length <= 0 || this.tagName !== 'VIEW') return
+
+    // TextNode 不具备 props 更新能力，需要由父节点来进行触发
+    this.childNodes.forEach(item => {
+      if (item.nodeType !== NodeType.TEXT_NODE) return
+
+      item._updateTrigger++
+    })
   }
 
   // 更新对应的 ArkUI 组件
   public updateComponent () {
-    if (this._isDynamicNode || !this._isCompileMode) {
-      this._updateTrigger += 1
+    // 非半编译模式或者半编译模式下拥有自主更新权力的节点走 @State 的更新模式
+    if (this._isDynamicNode || (!this._isCompileMode && this._instance)) {
+      this._updateTrigger++
     } else {
       this.parentNode?.updateComponent()
     }
   }
 
-  public get firstChild (): TaroNode | null{
+  // 提供唯一标识，方便与小程序一致，能根据uid获取到对应的节点
+  public get uid (): string {
+    return this._nid
+  }
+
+  public get firstChild (): TaroNode | null {
     return this.childNodes[0] || null
   }
 
@@ -102,15 +132,15 @@ export class TaroNode extends TaroEventTarget {
   public set textContent (value: string) {
     if (this.nodeType === NodeType.TEXT_NODE) {
       this._textContent = value
-      // if (this.parentNode && this.ownerDocument) {
-      //   const text = this.ownerDocument.createTextNode(value)
-      //   this.parentNode.replaceChild(text, this)
-      // } else {
-      //   this._textContent = value
-      // }
+      if (!this._instance) {
+        this.updateComponent()
+      }
     } else if (this.nodeType === NodeType.ELEMENT_NODE) {
-      const text = this.ownerDocument.createTextNode(value)
-      this.childNodes = [text]
+      const node = new TaroTextNode(value)
+      node._doc = this.ownerDocument
+      node.parentNode = this
+      this.childNodes.length = 0
+      this.childNodes.push(node)
     }
   }
 
@@ -125,13 +155,13 @@ export class TaroNode extends TaroEventTarget {
     }
   }
 
-  public set nodeValue (value: string) {
-    if (this.nodeType === NodeType.TEXT_NODE) {
+  public set nodeValue (value: string | null) {
+    if (this.nodeType === NodeType.TEXT_NODE && value) {
       this.textContent = value
     }
   }
 
-  public get ownerDocument (): TaroDocument {
+  public get ownerDocument (): TaroDocument | null {
     return this._doc
   }
 
@@ -140,29 +170,37 @@ export class TaroNode extends TaroEventTarget {
   }
 
   // TODO cloneNode()、contains()
-
-  public appendChild (child: TaroNode): TaroNode {
+  public connectParentNode (child: TaroNode) {
     child.parentNode?.removeChild(child)
     child.parentNode = this
-    // this.childNodes.push(child)
-    this.childNodes = [...this.childNodes, child]
+  }
+
+  public appendChild (child: TaroNode): TaroNode {
+    this.connectParentNode(child)
+    this.childNodes.push(child)
+    this.notifyDataAdd(this.childNodes.length - 1)
+
+    // @ts-ignore
+    child.toggleLayer?.(true)
 
     checkIsCompileModeAndInstallAfterDOMAction(child, this)
     return child
   }
 
-  public insertBefore (newNode: TaroNode, referenceNode: TaroNode | null): TaroNode {
+  public insertBefore (newNode: TaroNode, referenceNode?: TaroNode): TaroNode {
     newNode.parentNode?.removeChild(newNode)
 
-    if (referenceNode === null) {
+    if (!referenceNode) {
       this.appendChild(newNode)
     } else {
       const idxOfRef = this.findIndex(referenceNode)
-      this.childNodes = [
-        ...this.childNodes.slice(0, idxOfRef),
-        newNode,
-        ...this.childNodes.slice(idxOfRef)
-      ]
+      this.childNodes.splice(idxOfRef, 0, newNode)
+      this.connectParentNode(newNode)
+      // TODO: 优化
+      this.notifyDataReload()
+
+      // @ts-ignore
+      newNode.toggleLayer?.(true)
     }
 
     checkIsCompileModeAndInstallAfterDOMAction(newNode, this)
@@ -177,12 +215,11 @@ export class TaroNode extends TaroEventTarget {
 
     if (idxOfRef < 0) throw new Error('TaroNode:replaceChild NotFoundError')
 
-    this.childNodes = [
-      ...this.childNodes.slice(0, idxOfRef),
-      newChild,
-      ...this.childNodes.slice(idxOfRef + 1)
-    ]
+    this.childNodes[idxOfRef] = newChild
+    oldChild.dispose()
+    this.notifyDataChange(idxOfRef)
 
+    checkIsCompileModeAndUninstallAfterDOMAction(oldChild)
     checkIsCompileModeAndInstallAfterDOMAction(newChild, this)
 
     return oldChild
@@ -194,22 +231,50 @@ export class TaroNode extends TaroEventTarget {
     const idx = this.findIndex(child)
     if (idx < 0) throw new Error('TaroNode:removeChild NotFoundError')
 
-    this.childNodes = this.childNodes.filter((_, index) => index !== idx)
+    this.childNodes.splice(idx, 1)
+    child.dispose()
+    this.notifyDataDelete(idx)
 
     checkIsCompileModeAndUninstallAfterDOMAction(child)
 
     return child
   }
+
+  public dispose () {
+    // 渲染，层级大于0的节点需要让其回到正常层级，然后删掉
+    // @ts-ignore
+    this.toggleLayer?.(false)
+
+    this.parentNode = null
+    this.childNodes = []
+  }
+}
+
+@Observed
+export class TaroTextNode extends TaroNode {
+  constructor(value = '', nodeName = '#text', nodeType: NodeType = NodeType.TEXT_NODE) {
+    super(nodeName, nodeType)
+    this.textContent = value
+  }
+
+  public get data (): string {
+    return this.textContent
+  }
+
+  public set data (value: string) {
+    this.textContent = value
+  }
 }
 
 function checkIsCompileModeAndInstallAfterDOMAction (node: TaroNode, parentNode: TaroNode) {
-  if (!parentNode._isCompileMode) return
+  if (!parentNode._isCompileMode || !parentNode._instance) return
 
-  parentNode._instance?.dynamicCenter?.install?.(node, parentNode)
+  parentNode._instance.dynamicCenter?.install?.(node, parentNode)
+  node.updateComponent()
 }
 
 function checkIsCompileModeAndUninstallAfterDOMAction (node: TaroNode) {
-  if (!node._isCompileMode) return
+  if (!node._isCompileMode || !node?._instance) return
 
-  node._instance?.dynamicCenter?.uninstall?.(node)
-}
+  node._instance.dynamicCenter?.uninstall?.(node)
+}