@tarojs/plugin-platform-harmony-ets 4.0.0-beta.5 → 4.0.0-beta.50

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

@@ -1,67 +1,90 @@
 import { eventSource } from '@tarojs/runtime/dist/runtime.esm'
+import { EMPTY_OBJ, toCamelCase } from '@tarojs/shared'
 
 import { ATTRIBUTES_CALLBACK_TRIGGER_MAP, ID } from '../../constant'
+import { Current } from '../../current'
 import { findChildNodeWithDFS } from '../../utils'
 import { initComponentNodeInfo, triggerAttributesCallback } from '../../utils/info'
 import { bindAnimation } from '../bind'
 import { ClassList } from '../class-list'
+import { type ICSSStyleDeclaration, createCSSStyleDeclaration } from '../cssStyleDeclaration'
 import { NodeType, TaroNode } from '../node'
-import StyleSheet from '../stylesheet'
+import StyleSheet, { HarmonyStyle, TaroStyleType } from '../stylesheet'
 
-import type { StandardProps } from '@tarojs/components/types'
+import type { BaseTouchEvent, ITouchEvent, StandardProps } from '@tarojs/components/types'
 import type { TaroAny } from '../../utils'
-import type { ICSSStyleDeclaration } from '../cssStyleDeclaration'
 
-type NamedNodeMap = ({ name: string, value: string })[]
+type NamedNodeMap = { name: string, value: string }[]
 
 export interface TaroExtraProps {
   compileMode?: string | boolean
   compileIf?: boolean
   disabled?: boolean
+  __hmStyle?: TaroStyleType
 }
 
-@Observed
-export class TaroElement<T extends StandardProps = StandardProps> extends TaroNode {
+export class TaroElement<
+  T extends StandardProps<any, U> = StandardProps,
+  U extends BaseTouchEvent<any> = ITouchEvent
+> extends TaroNode {
   public _innerHTML = ''
-  public _nodeInfo: TaroAny = {}
+  public _nodeInfo: TaroAny = {
+    layer: 0 // 渲染层级
+  }
+  
+  public hm_instance: TaroAny
+
+  public get _instance () {
+    return this.hm_instance
+  }
+
+  public set _instance (value) {
+    this.hm_instance = value
+    if (this._nodeInfo.aboutToAppear) {
+      let task
+      // eslint-disable-next-line no-cond-assign
+      while (task = this._nodeInfo.aboutToAppear.shift()) {
+        task()
+      }
+    }
+  }
+
   public readonly tagName: string
+  public dataset: Record<string, unknown> = EMPTY_OBJ
   public _attrs: T & TaroExtraProps = {} as T & TaroExtraProps
 
-  _client?: Area
-  _scroll?: Area
-
   constructor(tagName: string) {
     super(tagName.replace(new RegExp('(?<=.)([A-Z])', 'g'), '-$1').toUpperCase(), NodeType.ELEMENT_NODE)
     this.tagName = this.nodeName
-
+    this._style = createCSSStyleDeclaration(this)
     initComponentNodeInfo(this)
     bindAnimation(this)
   }
 
-  public set id (value: string) {
+  public set id(value: string) {
     this.setAttribute('id', value)
   }
 
-  public get id (): string {
+  public get id(): string {
     return this.getAttribute('id') || this._nid
   }
 
-  public set className (value: string) {
+  public set className(value: string) {
     this.setAttribute('class', value)
   }
 
-  public get className (): string {
+  public get className(): string {
     return this.getAttribute('class') || ''
   }
 
-  public get classList (): ClassList {
+  public get classList(): ClassList {
     return new ClassList(this.className, this)
   }
 
-  public get attributes (): NamedNodeMap {
+  public get attributes(): NamedNodeMap {
     const list: NamedNodeMap = []
 
-    Object.keys(this._attrs).forEach(name => {
+    Object.keys(this._attrs).forEach((name) => {
       const value: TaroAny = this._attrs[name]
 
       list.push({ name, value })
@@ -70,14 +93,24 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     return list
   }
 
-  public get children (): TaroElement[] {
-    return this.childNodes.filter(node => node.nodeType === NodeType.ELEMENT_NODE) as TaroElement[]
+  public get children(): TaroElement[] {
+    return this.childNodes.filter((node) => node.nodeType === NodeType.ELEMENT_NODE) as TaroElement[]
   }
 
-  public setAttribute (name: string, value: TaroAny): void {
-    if (name === ID) {
-      eventSource.delete(this._attrs.id)
-      eventSource.set(value, this as TaroAny)
+  public setAttribute(name: string, value: TaroAny): void {
+    switch (name) {
+      case ID:
+        eventSource.delete(this._attrs.id)
+        eventSource.set(value, this as TaroAny)
+        break
+      default:
+        if (name.startsWith('data-')) {
+          if (this.dataset === EMPTY_OBJ) {
+            this.dataset = Object.create(null)
+          }
+          this.dataset[toCamelCase(name.replace(/^data-/, ''))] = value
+        }
+        break
     }
 
     this._attrs[name] = value
@@ -93,50 +126,64 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     }
   }
 
-  public getAttribute (name: string): string {
+  public getAttribute(name: string): string {
     return this._attrs[name]
   }
 
-  public removeAttribute (name: string): void {
+  public removeAttribute(name: string): void {
     this._attrs[name] = null
   }
 
-  public hasAttribute (name: string): boolean {
+  public hasAttribute(name: string): boolean {
     return !!this._attrs[name]
   }
 
-  public hasAttributes (): boolean {
+  public hasAttributes(): boolean {
     return Object.keys(this._attrs).length > 0
   }
 
-  public getElementById<T extends TaroElement = TaroElement> (id: string | undefined | null) {
-    return findChildNodeWithDFS<T>(this as TaroAny, (el) => {
-      return el.id === id
-    }, false)
+  public getElementById<T extends TaroElement = TaroElement>(id: string | undefined | null) {
+    return findChildNodeWithDFS<T>(
+      this as TaroAny,
+      (el) => {
+        return el.id === id
+      },
+      false
+    )
   }
 
-  public getElementsByTagName<T extends TaroElement = TaroElement> (tagName: string) {
-    return findChildNodeWithDFS<T>(this as TaroAny, (el) => {
-      return el.nodeName === tagName || (tagName === '*' && this as TaroAny !== el)
-    }, true) || []
+  public getElementsByTagName<T extends TaroElement = TaroElement>(tagName: string) {
+    return (
+      findChildNodeWithDFS<T>(
+        this as TaroAny,
+        (el) => {
+          return el.nodeName === tagName || (tagName === '*' && (this as TaroAny) !== el)
+        },
+        true
+      ) || []
+    )
   }
 
-  public getElementsByClassName<T extends TaroElement = TaroElement> (className: string) {
+  public getElementsByClassName<T extends TaroElement = TaroElement>(className: string) {
     const classNames = className.trim().split(new RegExp('\\s+'))
 
-    return findChildNodeWithDFS<T>(this as TaroAny, (el) => {
-      const classList = el.classList
-      return classNames.every(c => {
-        const bool = classList.contains(c)
-
-        return bool
-      })
-    }, true) || []
+    return (
+      findChildNodeWithDFS<T>(
+        this as TaroAny,
+        (el) => {
+          const classList = el.classList
+          return classNames.every((c) => {
+            const bool = classList.contains(c)
+
+            return bool
+          })
+        },
+        true
+      ) || []
+    )
   }
 
-  // TODO dataset
-
-  public set innerHTML (value: string) {
+  public set innerHTML(value: string) {
     if (this.nodeType === NodeType.ELEMENT_NODE && this.ownerDocument) {
       const ele = this.ownerDocument.createElement('inner-html')
       ele._innerHTML = value
@@ -144,20 +191,239 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
     }
   }
 
-  public get innerHTML (): string {
+  public get innerHTML(): string {
     return this._innerHTML
   }
 
+  // 存放的样式，获取其实跟获取style是一样的，只不过这里取的更快捷，不需要走style的get方法进到cssStyleDeclaration
   public _st = new StyleSheet()
 
   // 经转换后的鸿蒙样式
-  public get hmStyle () {
+  public get hmStyle() {
     return this._st.hmStyle
   }
 
   public _style: ICSSStyleDeclaration | null = null
 
-  public get style (): ICSSStyleDeclaration | null {
+  public get style(): ICSSStyleDeclaration | null {
     return this._style
   }
+
+  // 伪元素，不存在style动态设置，均已被转换为鸿蒙样式
+  // 可根据实际情况，迁移到具体的组件中，如View、ScrollView中，Text\Image其实是不需要的
+  public _pseudo_before: StyleSheet | null = null
+
+  public set_pseudo_before(value: HarmonyStyle | null) {
+    if (value) {
+      if (!this._pseudo_before) {
+        this._pseudo_before = new StyleSheet()
+      }
+      Object.keys(value).forEach(key => {
+        this._pseudo_before!.hmStyle[key] = value[key]
+      })
+    } else {
+      this._pseudo_before = null
+    }
+  }
+
+  public _pseudo_after: StyleSheet | null = null
+
+  public set_pseudo_after(value: HarmonyStyle | null) {
+    if (value) {
+      if (!this._pseudo_after) {
+        this._pseudo_after = new StyleSheet()
+      }
+      Object.keys(value).forEach(key => {
+        this._pseudo_after!.hmStyle[key] = value[key]
+      })
+    } else {
+      this._pseudo_after = null
+    }
+  }
+  
+  // 伪类，在获取的时候根据dom和parent的关系，动态设置
+  public _pseudo_class: Record<string, StyleSheet | null> = {
+    // ["::first-child"]: new StyleSheet(),
+  }
+
+  public set_pseudo_class(name: string, value: HarmonyStyle | null) {
+    if (value) {
+      if (!this._pseudo_class[name]) {
+        this._pseudo_class[name] = new StyleSheet()
+      }
+      Object.keys(value).forEach(key => {
+        this._pseudo_class[name]!.hmStyle[key] = value[key]
+      })
+    } else {
+      this._pseudo_class[name] = null
+    }
+  }
+
+  get currentLayerNode () {
+    if (!Current.page) return null
+    if (typeof Current.page.tabBarCurrentIndex !== 'undefined') {
+      Current.page.layerNode ||= []
+      Current.page.layerNode[Current.page.tabBarCurrentIndex] ||= Current.createHarmonyElement('VIEW')
+      // Tabbar
+      return Current.page.layerNode[Current.page.tabBarCurrentIndex]
+    } else {
+      Current.page.layerNode ||= Current.createHarmonyElement('VIEW')
+      return Current.page.layerNode
+    }
+  }
+
+  get currentLayerParents () {
+    if (!Current.page) return null
+    if (typeof Current.page.tabBarCurrentIndex !== 'undefined') {
+      Current.page.layerParents ||= []
+      Current.page.layerParents[Current.page.tabBarCurrentIndex] ||= []
+      // Tabbar
+      return Current.page.layerParents[Current.page.tabBarCurrentIndex]
+    } else {
+      Current.page.layerParents ||= []
+      return Current.page.layerParents
+    }
+  }
+
+  // 设置渲染层级，0为正常层级，大于0为固定层级
+  // 1、appendChild的时候会判断是否需要设置层级
+  // 2、taro-react的setProperty，在处理属性变化的时候，会判断是否需要设置层级
+  // 3、removeChild的时候，会判断是否需要移除层级
+  public setLayer (value: number) {
+    if (!this.parentNode) return // 没有父节点，不需要设置层级关系
+    this._nodeInfo.layer = value
+
+    const currentLayerNode = this.currentLayerNode
+    const currentLayerParents = this.currentLayerParents
+    if (!currentLayerNode || !currentLayerParents) return
+    if (value > 0) {
+      // 插入到固定浮层
+      currentLayerNode.childNodes.push(this)
+      currentLayerNode.notifyDataAdd(currentLayerNode.childNodes.length - 1)
+      // 绑定祖先的节点id，建立关系，方便在祖先卸载（removeChild）的时候，能够找到该节点使其卸载
+      const _parentRecord = {}
+      generateLayerParentIds(_parentRecord, this)
+      currentLayerParents[this._nid] = _parentRecord
+    } else {
+      const idx = currentLayerNode.childNodes.findIndex(n => n._nid === this._nid)
+      currentLayerNode.childNodes.splice(idx, 1)
+      currentLayerNode.notifyDataDelete(idx)
+
+      delete currentLayerParents[this._nid]
+    }
+
+    if (this.parentNode) {
+      this.parentNode.notifyDataChange(this.parentNode.findIndex(this))
+      this.updateComponent()
+    }
+  }
+
+  protected toggleLayer(add: boolean) {
+    if (add) {
+      if (this._st?.hmStyle.position === 'fixed') {
+        this.setLayer(1)
+      }
+    } else {
+      const currentLayerParents = this.currentLayerParents
+      if (!currentLayerParents) return
+      // 识别Current.page.layerParents里面是否有需要移除的固定元素
+      if (this._nodeInfo?.layer > 0) {
+        delete currentLayerParents[this._nid]
+        this.setLayer(0)
+      } else {
+        Object.keys(currentLayerParents).forEach(fixedId => {
+          const parentIds =currentLayerParents[fixedId]
+          if (parentIds[this._nid]) {
+            // 需要移除fixedId
+            delete currentLayerParents[fixedId]
+            const fixedNode = eventSource.get(fixedId) as unknown as TaroElement
+            if (fixedNode) {
+              fixedNode.setLayer(0)
+            }
+          }
+        })
+      }
+    }
+  }
+
+  // 设置动画  
+  public setAnimation (playing) {
+    if (!this._instance) {
+      if (!this._nodeInfo.aboutToAppear) {
+        this._nodeInfo.aboutToAppear = []
+      }
+      this._nodeInfo.aboutToAppear.push(() => {
+        this.setAnimation(playing)
+      })
+      return
+    }
+
+    const keyframes = this._st.hmStyle.animationName
+
+    // 防止动画闪烁，需要把第一帧的内容先设置上去设置初始样式
+    if (playing && keyframes && keyframes[0] && keyframes[0].percentage === 0) {
+      this._instance.overwriteStyle = keyframes[0].event
+    }
+    
+    // 首次设置，不用实例替换
+    if (!this._nodeInfo.hasAnimation) {
+      this._nodeInfo.hasAnimation = true
+      // 下一帧播放，等节点样式首次设置上去在进行覆盖
+      setTimeout(() => {
+        if (playing) {
+          this.playAnimation()
+        }
+      }, 0)
+    } else if (this.parentNode) {
+      const idx = this.parentNode.findIndex(this)
+      // Note: 因为keyframeAnimateTo无法暂停，华为没有支持，只能临时先换掉实例，重新创建ark节点，使得原本的keyframeAnimateTo失效
+      // remove
+      this.parentNode.childNodes.splice(idx, 1)
+      this.parentNode.notifyDataDelete(idx)
+
+      // 下一帧播放，等实例被移除掉，再重新插入
+      setTimeout(() => {
+        // insert
+        this.parentNode?.childNodes.splice(idx, 0, this)
+        this.parentNode?.notifyDataAdd(idx)
+
+        // 执行动画
+        if (playing) {
+          this.playAnimation()
+        }
+      }, 0)
+    }
+  }
+
+  private playAnimation () {
+    const { 
+      animationDuration = 0, animationDelay = 0, animationIterationCount = 1, animationName: keyframes, 
+      animationTimingFunction
+    } = this._st.hmStyle
+
+    if (keyframes) {
+      let cur_percentage = 0
+      this._instance.getUIContext()?.keyframeAnimateTo({
+        delay: animationDelay,
+        iterations: animationIterationCount,
+      }, keyframes.map(item => {
+        const duration = (item.percentage - cur_percentage) * animationDuration
+        cur_percentage = item.percentage
+        return {
+          duration: duration,
+          curve: item.event.animationTimingFunction || animationTimingFunction,
+          event: () => {
+            this._instance.overwriteStyle = item.event
+          }
+        }
+      }))
+    }
+  }
+}
+
+function generateLayerParentIds(ids: Record<string, true>, node?: TaroElement) {
+  if (node?.parentElement) {
+    ids[node.parentElement._nid] = true
+    generateLayerParentIds(ids, node.parentElement)
+  }
 }

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

@@ -29,14 +29,10 @@ interface FormWidgetProps extends StandardProps {
 }
 
 class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends TaroElement<T> {
-  _instance
-
   _isInit = false
 
   _name = ''
 
-  _value: TaroAny = ''
-
   _reset: TaroAny = ''
 
   constructor (tagName: string) {
@@ -45,7 +41,7 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
     bindFocus(this)
 
     this._name = this._attrs.name || ''
-    this._value = this._attrs.value || ''
+    this._nodeInfo._value = this._attrs.value || ''
   }
 
   public setAttribute (name: string, value: any): void {
@@ -66,11 +62,10 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
 
   public set name (val: string) {
     this.updateFormWidgetName(val)
-    this.updateComponent()
   }
 
   public get value () {
-    return this._value
+    return this._nodeInfo._value
   }
 
   public set value (val: TaroAny) {
@@ -78,8 +73,6 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
 
     if (this._instance) {
       this._instance.value = val
-    } else {
-      this.updateComponent()
     }
   }
 
@@ -89,7 +82,7 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
   }
 
   public updateFormWidgetValue (val: TaroAny) {
-    this._value = val
+    this._nodeInfo._value = val
     this._attrs.value = val
   }
 
@@ -121,7 +114,6 @@ class TaroCheckedElement<T extends StandardProps & { checked?: boolean } = Stand
 
   set checked (val: boolean) {
     this.updateCheckedValue(val)
-    this.updateComponent()
   }
 
   public updateCheckedValue (val: boolean) {
@@ -134,6 +126,7 @@ class TaroCheckedElement<T extends StandardProps & { checked?: boolean } = Stand
   }
 }
 
+@Observed
 class TaroInputElement<T extends FormWidgetProps = InputProps> extends TaroFormWidgetElement<T> {
   _height = 0
 
@@ -193,38 +186,39 @@ class TaroInputElement<T extends FormWidgetProps = InputProps> extends TaroFormW
   }
 }
 
-
-class TaroTextAreaElement extends TaroInputElement<TextareaProps>{
+@Observed
+class TaroTextAreaElement extends TaroInputElement<TextareaProps> {
   controller: TextAreaController = new TextAreaController()
 
   constructor() {
     super('TextArea')
   }
 }
-
-class TaroCheckboxElement extends TaroCheckedElement<CheckboxProps>{
+@Observed
+class TaroCheckboxElement extends TaroCheckedElement<CheckboxProps> {
   constructor() {
     super('Checkbox')
   }
 }
 
-class TaroRadioElement extends TaroCheckedElement<RadioProps>{
+@Observed
+class TaroRadioElement extends TaroCheckedElement<RadioProps> {
   public group?: string
 
   constructor() {
     super('Radio')
   }
 }
-class TaroSliderElement extends TaroFormWidgetElement<SliderProps> {
-  _value = 0
 
+@Observed
+class TaroSliderElement extends TaroFormWidgetElement<SliderProps> {
   constructor() {
     super('Slider')
 
-    this._value = Number(this._attrs.value || 0)
+    this._nodeInfo._value = Number(this._attrs.value || 0)
   }
 }
-
+@Observed
 class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | PickerTimeProps | PickerDateProps | PickerMultiSelectorProps> {
   constructor() {
     super('Picker')
@@ -238,7 +232,7 @@ class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | Pick
       case 'selector': {
         const key = this._attrs.rangeKey
         const item = this._attrs.range[this.value]
-        
+
         if (key) {
           return item[key]
         } else {
@@ -267,18 +261,19 @@ class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | Pick
     super.reset()
 
     const event: TaroEvent = createTaroEvent('change', { detail: { value: this._reset } }, this)
-    
+
     event.stopPropagation()
     eventHandler(event, 'change', this)
   }
 }
 
+@Observed
 class TaroSwitchElement extends TaroCheckedElement<SwitchProps> {
   constructor() {
     super('Switch')
   }
 }
-
+@Observed
 class TaroCheckboxGroupElement extends TaroFormWidgetElement<CheckboxGroupProps> {
   constructor() {
     super('CheckboxGroup')
@@ -304,6 +299,7 @@ class TaroCheckboxGroupElement extends TaroFormWidgetElement<CheckboxGroupProps>
   }
 }
 
+@Observed
 class TaroRadioGroupElement extends TaroFormWidgetElement<RadioGroupProps> {
   constructor() {
     super('RadioGroup')
@@ -329,6 +325,7 @@ class TaroRadioGroupElement extends TaroFormWidgetElement<RadioGroupProps> {
   }
 }
 
+@Observed
 class TaroFormElement extends TaroFormWidgetElement {
   constructor() {
     super('Form')
@@ -340,7 +337,7 @@ class TaroFormElement extends TaroFormWidgetElement {
 
       findChildNodeWithDFS<TaroFormWidgetElement>(this, item => {
         if (!item.name) return false
-        
+
         switch (item.nodeName) {
           case 'INPUT':
           case 'RADIO':
@@ -371,9 +368,9 @@ class TaroFormElement extends TaroFormWidgetElement {
         e.stopPropagation()
         switch (item.nodeName) {
           case 'INPUT':
-          case 'SLIDER': 
+          case 'SLIDER':
           case 'PICKER':
-          case 'RADIO': 
+          case 'RADIO':
           case 'SWITCH':
           case 'CHECKBOX':
           case 'TEXTAREA':