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

package/dist/runtime-ets/dom/element/index.ts

@@ -0,0 +1,89 @@
+import { Current } from '../../current'
+import { TaroTextNode } from '../node'
+import { TaroElement } from './element'
+import {
+  FormElement,
+  TaroCheckboxElement,
+  TaroCheckboxGroupElement,
+  TaroFormElement,
+  TaroInputElement,
+  TaroPickerElement,
+  TaroRadioElement,
+  TaroRadioGroupElement,
+  TaroSliderElement,
+  TaroSwitchElement,
+  TaroTextAreaElement
+} from './form'
+import {
+  TaroButtonElement,
+  TaroIconElement,
+  TaroImageElement,
+  TaroLabelElement,
+  TaroRichTextElement,
+  TaroSwiperElement,
+  TaroSwiperItemElement,
+  TaroViewElement
+} from './normal'
+import { TaroScrollViewElement } from './scrollView'
+import { TaroTextElement } from './text'
+import { TaroVideoElement } from './video'
+
+export function initHarmonyElement () {
+  Current.createHarmonyElement = (tagName: string) => {
+    switch (tagName) {
+      case 'view': return new TaroViewElement()
+      case 'image': return new TaroImageElement()
+      case 'text': return new TaroTextElement()
+      case 'button': return new TaroButtonElement()
+      case 'scroll-view': return new TaroScrollViewElement()
+      case 'checkbox-group': return new TaroCheckboxGroupElement()
+      case 'input': return new TaroInputElement()
+      case 'picker': return new TaroPickerElement()
+      case 'radio-group': return new TaroRadioGroupElement()
+      case 'slider': return new TaroSliderElement()
+      case 'switch': return new TaroSwitchElement()
+      case 'video': return new TaroVideoElement()
+      case 'checkbox': return new TaroCheckboxElement()
+      case 'radio': return new TaroRadioElement()
+      case 'icon': return new TaroIconElement()
+      case 'label': return new TaroLabelElement()
+      case 'rich-text': return new TaroRichTextElement()
+      case 'swiper': return new TaroSwiperElement()
+      case 'swiper-item': return new TaroSwiperItemElement()
+      case 'textarea': return new TaroTextAreaElement()
+      case 'form': return new TaroFormElement()
+      default: return new TaroElement(tagName)
+    }
+  }
+
+  Current.createTextNode = (value: string): TaroTextNode => {
+    const node = new TaroTextNode(value)
+    return node
+  }
+}
+
+export {
+  FormElement,
+  TaroButtonElement,
+  TaroCheckboxElement,
+  TaroCheckboxGroupElement,
+  TaroElement,
+  TaroFormElement,
+  TaroIconElement,
+  TaroImageElement,
+  TaroInputElement,
+  TaroLabelElement,
+  TaroPickerElement,
+  TaroRadioElement,
+  TaroRadioGroupElement,
+  TaroRichTextElement,
+  TaroScrollViewElement,
+  TaroSliderElement,
+  TaroSwiperElement,
+  TaroSwiperItemElement,
+  TaroSwitchElement,
+  TaroTextAreaElement,
+  TaroTextElement,
+  TaroVideoElement,
+  TaroViewElement
+}

package/dist/runtime-ets/dom/element/normal.ts

@@ -0,0 +1,75 @@
+
+import { TaroElement } from './element'
+
+import type {
+  ButtonProps,
+  IconProps,
+  ImageProps,
+  LabelProps,
+  RichTextProps,
+  SwiperItemProps,
+  SwiperProps,
+  ViewProps
+} from '@tarojs/components/types'
+
+class TaroViewElement extends TaroElement<ViewProps> {
+  constructor() {
+    super('View')
+  }
+}
+
+class TaroImageElement extends TaroElement<ImageProps> {
+  constructor() {
+    super('Image')
+  }
+}
+
+class TaroButtonElement extends TaroElement<ButtonProps> {
+  constructor() {
+    super('Button')
+  }
+}
+
+
+class TaroIconElement extends TaroElement<IconProps>{
+  constructor() {
+    super('Icon')
+  }
+}
+
+class TaroLabelElement extends TaroElement<LabelProps>{
+  constructor() {
+    super('Label')
+  }
+}
+
+class TaroRichTextElement extends TaroElement<RichTextProps>{
+  constructor() {
+    super('RichText')
+  }
+}
+
+class TaroSwiperElement extends TaroElement<SwiperProps>{
+  controller: SwiperController = new SwiperController()
+
+  constructor() {
+    super('Swiper')
+  }
+}
+
+class TaroSwiperItemElement extends TaroElement<SwiperItemProps>{
+  constructor() {
+    super('SwiperItem')
+  }
+}
+
+export {
+  TaroButtonElement,
+  TaroIconElement,
+  TaroImageElement,
+  TaroLabelElement,
+  TaroRichTextElement,
+  TaroSwiperElement,
+  TaroSwiperItemElement,
+  TaroViewElement, 
+}

package/dist/runtime-ets/dom/element/scrollView.ts

@@ -0,0 +1,14 @@
+import { bindScrollTo } from '../bind'
+import { TaroElement } from './element'
+
+import type { ScrollViewProps } from '@tarojs/components/types'
+
+export class TaroScrollViewElement extends TaroElement<ScrollViewProps> {
+  scroller: Scroller = new Scroller()
+
+  constructor() {
+    super('ScrollView')
+
+    bindScrollTo(this)
+  }
+}

package/dist/runtime-ets/dom/element/text.ts

@@ -0,0 +1,17 @@
+import { TaroNode } from '../node'
+import { TaroElement } from './element'
+
+import type { TextProps } from '@tarojs/components/types'
+
+export class TaroTextElement extends TaroElement<TextProps> {
+  constructor() {
+    super('Text')
+  }
+
+  public appendChild (child: TaroNode): TaroNode {
+    super.appendChild(child)
+
+    this.updateComponent()
+    return child
+  }
+}

package/dist/runtime-ets/dom/element/video.ts

@@ -0,0 +1,49 @@
+import { TaroElement } from './element'
+
+import type { VideoProps } from '@tarojs/components/types'
+
+export class TaroVideoElement extends TaroElement<VideoProps> {
+  _currentTime = 0
+
+  controller: VideoController = new VideoController()
+
+  constructor() {
+    super('Video')
+  }
+
+  async play() {
+    try {
+      this.controller.start()
+      return Promise.resolve()
+    } catch (e) {
+      return Promise.reject(e)
+    }
+  }
+
+  pause() {
+    try {
+      this.controller.pause()
+      return Promise.resolve()
+    } catch (e) {
+      return Promise.reject(e)
+    }
+  }
+
+  stop() {
+    try {
+      this.controller.stop()
+      return Promise.resolve()
+    } catch (e) {
+      return Promise.reject(e)
+    }
+  }
+
+  get currentTime() {
+    return this._currentTime
+  }
+
+  set currentTime(val: number) {
+    this._currentTime = val
+    this.controller.setCurrentTime(val)
+  }
+}

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

@@ -1,7 +1,7 @@
 import { hooks } from '@tarojs/shared'
 
 import { CONFIRM, CURRENT_TARGET, INPUT, KEY_CODE, TARGET, TIME_STAMP, TYPE } from '../constant'
-import { TaroElement } from './element'
+import { TaroElement } from './element/element'
 
 import type { EventOptions } from '../interface'
 
@@ -162,3 +162,26 @@ export function eventHandler (event, type: string, node: TaroElement) {
     })
   }
 }
+
+export function createTaroEvent(type: string, opts: Partial<EventOptions> = {}, node?: TaroElement) {
+  opts.bubbles ||= true
+  opts.cancelable ||= true
+  const e = new TaroEvent(type, opts as Required<EventOptions>)
+
+  if (node) {
+    const properties: Record<string, PropertyDescriptor> = {}
+    properties.target = properties.currentTarget = {
+      get() {
+        return node
+      }
+    }
+    Object.defineProperties(e, properties)
+  }
+  for (const key in opts) {
+    if (['bubbles', 'cancelable'].includes(key)) {
+      continue
+    }
+    e[key] = opts[key]
+  }
+  return e
+}

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

@@ -37,7 +37,7 @@ class TaroEventTarget extends Events {
 
   public removeEventListener (type: string, listener: fn) {
     const listeners = this.__listeners[type]
-    if (listeners.length) {
+    if (listeners?.length) {
       this.__listeners[type] = listeners.filter(item => item !== listener)
     }
   }
@@ -95,4 +95,5 @@ class TaroEventTarget extends Events {
   }
 }
 
+
 export { TaroEventTarget }

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,41 +25,53 @@ 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
+  public _doc: TaroDocument | null = null
   // 是否为半编译模板下的节点
   public _isCompileMode = false
   // 是否为半编译模板下拥有自主更新权的节点
   public _isDynamicNode = false
-  public _instance: any
 
-  private _updateTrigger = 0
+  public _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
   }
 
-  protected findIndex (refChild: TaroNode): number {
-    // @Observe 会影响 === 判断，只能比较 _nid
+  getData(index: number): TaroElement<StandardProps> {
+    return this.childNodes[index] as TaroElement
+  }
+
+  public findIndex (refChild: TaroNode): number {
     return this.childNodes.findIndex(node => node._nid === refChild._nid)
   }
 
   // 更新对应的 ArkUI 组件
   public updateComponent () {
-    if (this._isDynamicNode || !this._isCompileMode) {
-      this._updateTrigger += 1
+    if (!this.parentNode || !this.parentNode.listeners?.length) return
+
+    const idx = this.parentNode.findIndex(this)
+      
+    if (idx >= 0) {
+      this._updateTrigger++
+      this.parentNode.notifyDataChange(idx)
     } else {
-      this.parentNode?.updateComponent()
+      this.parentNode.notifyDataReload()
     }
   }
 
@@ -102,15 +116,11 @@ 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
-      // }
+      this.parentNode?.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
+      this.childNodes = [node]
     }
   }
 
@@ -125,13 +135,14 @@ 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
+      this.parentNode?.updateComponent()
     }
   }
 
-  public get ownerDocument (): TaroDocument {
+  public get ownerDocument (): TaroDocument | null {
     return this._doc
   }
 
@@ -144,8 +155,9 @@ export class TaroNode extends TaroEventTarget {
   public appendChild (child: TaroNode): TaroNode {
     child.parentNode?.removeChild(child)
     child.parentNode = this
-    // this.childNodes.push(child)
-    this.childNodes = [...this.childNodes, child]
+
+    this.childNodes.push(child)
+    this.notifyDataAdd(this.childNodes.length - 1)
 
     checkIsCompileModeAndInstallAfterDOMAction(child, this)
     return child
@@ -158,11 +170,9 @@ export class TaroNode extends TaroEventTarget {
       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)
+      // TODO: 优化
+      this.notifyDataReload()
     }
 
     checkIsCompileModeAndInstallAfterDOMAction(newNode, this)
@@ -177,11 +187,9 @@ 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)
 
     checkIsCompileModeAndInstallAfterDOMAction(newChild, this)
 
@@ -194,22 +202,44 @@ 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 () {
+    this.parentNode = null
+    this.childNodes = []
+  }
+}
+
+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
+function checkIsCompileModeAndInstallAfterDOMAction (_node: TaroNode, _parentNode: TaroNode) {
+  // if (!parentNode._isCompileMode) return
 
-  parentNode._instance?.dynamicCenter?.install?.(node, parentNode)
+  // parentNode._instance?.dynamicCenter?.install?.(node, parentNode)
 }
 
-function checkIsCompileModeAndUninstallAfterDOMAction (node: TaroNode) {
-  if (!node._isCompileMode) return
+function checkIsCompileModeAndUninstallAfterDOMAction (_node: TaroNode) {
+  // if (!node._isCompileMode) return
 
-  node._instance?.dynamicCenter?.uninstall?.(node)
-}
+  // node._instance?.dynamicCenter?.uninstall?.(node)
+}