@tarojs/plugin-platform-harmony-ets 4.0.0-beta.3 → 4.0.0-beta.31

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

@@ -1,18 +1,19 @@
 import { eventSource } from '@tarojs/runtime/dist/runtime.esm'
+import { EMPTY_OBJ, toCamelCase } from '@tarojs/shared'
 
 import { ATTRIBUTES_CALLBACK_TRIGGER_MAP, ID } from '../../constant'
 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 } 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
@@ -20,48 +21,49 @@ export interface TaroExtraProps {
   disabled?: boolean
 }
 
-@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 _instance: TaroAny
   public _nodeInfo: TaroAny = {}
   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 +72,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 setAttribute (name: string, value: TaroAny): void {
-    if (name === ID) {
-      eventSource.delete(this._attrs.id)
-      eventSource.set(value, this as TaroAny)
+  public get children(): TaroElement[] {
+    return this.childNodes.filter((node) => node.nodeType === NodeType.ELEMENT_NODE) as TaroElement[]
+  }
+
+  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 +105,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 (
+      findChildNodeWithDFS<T>(
+        this as TaroAny,
+        (el) => {
+          const classList = el.classList
+          return classNames.every((c) => {
+            const bool = classList.contains(c)
 
-        return bool
-      })
-    }, true) || []
+            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 +170,71 @@ 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
+    }
+  }
 }

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,7 +186,7 @@ class TaroInputElement<T extends FormWidgetProps = InputProps> extends TaroFormW
   }
 }
 
-
+@Observed
 class TaroTextAreaElement extends TaroInputElement<TextareaProps>{
   controller: TextAreaController = new TextAreaController()
 
@@ -201,13 +194,14 @@ class TaroTextAreaElement extends TaroInputElement<TextareaProps>{
     super('TextArea')
   }
 }
-
+@Observed
 class TaroCheckboxElement extends TaroCheckedElement<CheckboxProps>{
   constructor() {
     super('Checkbox')
   }
 }
 
+@Observed
 class TaroRadioElement extends TaroCheckedElement<RadioProps>{
   public group?: string
 
@@ -215,16 +209,16 @@ class TaroRadioElement extends TaroCheckedElement<RadioProps>{
     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')
@@ -273,12 +267,13 @@ class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | Pick
   }
 }
 
+@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')

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

@@ -1,5 +1,6 @@
 import { Current } from '../../current'
 import { TaroTextNode } from '../node'
+import { TaroCanvasElement } from './canvas'
 import { TaroElement } from './element'
 import {
   FormElement,
@@ -14,6 +15,8 @@ import {
   TaroSwitchElement,
   TaroTextAreaElement
 } from './form'
+import { TaroMovableAreaElement } from './movableArea'
+import { TaroMovableViewElement } from './movableView'
 import {
   TaroButtonElement,
   TaroIconElement,
@@ -24,10 +27,11 @@ import {
   TaroSwiperItemElement,
   TaroViewElement
 } from './normal'
+import { TaroProgressElement } from './progress'
 import { TaroScrollViewElement } from './scrollView'
 import { TaroTextElement } from './text'
 import { TaroVideoElement } from './video'
-import { TaroWebViewElement } from './webView'
+import { TaroInnerHtmlElement, TaroWebViewElement } from './webView'
 
 export function initHarmonyElement () {
   Current.createHarmonyElement = (tagName: string) => {
@@ -36,6 +40,9 @@ export function initHarmonyElement () {
       case 'image': return new TaroImageElement()
       case 'text': return new TaroTextElement()
       case 'button': return new TaroButtonElement()
+      case 'movable-area': return new TaroMovableAreaElement()
+      case 'movable-view': return new TaroMovableViewElement()
+      case 'progress': return new TaroProgressElement()
       case 'scroll-view': return new TaroScrollViewElement()
       case 'checkbox-group': return new TaroCheckboxGroupElement()
       case 'input': return new TaroInputElement()
@@ -49,11 +56,13 @@ export function initHarmonyElement () {
       case 'icon': return new TaroIconElement()
       case 'label': return new TaroLabelElement()
       case 'rich-text': return new TaroRichTextElement()
+      case 'canvas': return new TaroCanvasElement()
       case 'swiper': return new TaroSwiperElement()
       case 'swiper-item': return new TaroSwiperItemElement()
       case 'textarea': return new TaroTextAreaElement()
       case 'form': return new TaroFormElement()
       case 'web-view': return new TaroWebViewElement()
+      case 'inner-html': return new TaroInnerHtmlElement()
       default: return new TaroElement(tagName)
     }
   }
@@ -67,15 +76,20 @@ export function initHarmonyElement () {
 export {
   FormElement,
   TaroButtonElement,
+  TaroCanvasElement,
   TaroCheckboxElement,
   TaroCheckboxGroupElement,
   TaroElement,
   TaroFormElement,
   TaroIconElement,
   TaroImageElement,
+  TaroInnerHtmlElement,
   TaroInputElement,
   TaroLabelElement,
+  TaroMovableAreaElement,
+  TaroMovableViewElement,
   TaroPickerElement,
+  TaroProgressElement,
   TaroRadioElement,
   TaroRadioGroupElement,
   TaroRichTextElement,
@@ -88,5 +102,4 @@ export {
   TaroTextElement,
   TaroVideoElement,
   TaroViewElement,
-  TaroWebViewElement
-}
+  TaroWebViewElement }

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

@@ -0,0 +1,12 @@
+
+import { TaroElement } from './element'
+
+import type { MovableAreaProps } from '@tarojs/components/types'
+
+@Observed
+export class TaroMovableAreaElement extends TaroElement<MovableAreaProps> {
+
+  constructor() {
+    super('MovableArea')
+  }
+}