@tarojs/plugin-platform-harmony-ets 4.0.0-beta.0 → 4.0.0-beta.1

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

@@ -68,12 +68,16 @@ class CSSStyleDeclaration {
     const node = this.el
     prop = prop.includes('-') ? toCamelCase(prop) : prop
     const value = node._st[prop]
+    if (prop.startsWith('_')) {
+      prop = prop.replace('_', '')
+    }
     if (value === undefined) {
-      node._st[prop] = undefined
+      // node._st[prop] = undefined
+      delete node._st.hmStyle[prop]
       return ''
     } else {
-      // delete node._st[prop]
-      node._st[prop] = undefined
+      delete node._st.hmStyle[prop]
+      // node._st[prop] = undefined
       // node._st = { ...node._st }
       return value
     }

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

@@ -20,6 +20,7 @@ export interface TaroExtraProps {
   disabled?: boolean
 }
 
+@Observed
 export class TaroElement<T extends StandardProps = StandardProps> extends TaroNode {
   public _innerHTML = ''
   public _nodeInfo: TaroAny = {}

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

@@ -31,6 +31,8 @@ interface FormWidgetProps extends StandardProps {
 class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends TaroElement<T> {
   _instance
 
+  _isInit = false
+
   _name = ''
 
   _value: TaroAny = ''
@@ -44,7 +46,6 @@ class TaroFormWidgetElement<T extends FormWidgetProps = FormWidgetProps> extends
 
     this._name = this._attrs.name || ''
     this._value = this._attrs.value || ''
-    this._reset = this._attrs.value || ''
   }
 
   public setAttribute (name: string, value: any): void {
@@ -104,7 +105,6 @@ class TaroCheckedElement<T extends StandardProps & { checked?: boolean } = Stand
     super(tagName)
 
     this._checked = this._attrs.checked || false
-    this._reset = this._attrs.checked || false
   }
 
   public setAttribute (name: string, value: any): void {
@@ -262,6 +262,15 @@ class TaroPickerElement extends TaroFormWidgetElement<PickerSelectorProps | Pick
         return ''
     }
   }
+
+  public reset() {
+    super.reset()
+
+    const event: TaroEvent = createTaroEvent('change', { detail: { value: this._reset } }, this)
+    
+    event.stopPropagation()
+    eventHandler(event, 'change', this)
+  }
 }
 
 class TaroSwitchElement extends TaroCheckedElement<SwitchProps> {

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

@@ -31,16 +31,18 @@ export class TaroNode extends TaroDataSourceElement {
   public childNodes: TaroNode[] = []
   public parentNode: TaroNode | null = null
   public _nid: string = genId()
-
   public _doc: TaroDocument | null = null
+
+  private _textContent = ''
+
+  // 以下属性为半编译模式下才会赋值和使用的属性
+  // 半编译节点更新触发器
+  public _updateTrigger = 0
   // 是否为半编译模板下的节点
   public _isCompileMode = false
   // 是否为半编译模板下拥有自主更新权的节点
   public _isDynamicNode = false
 
-  public _updateTrigger = 0
-  private _textContent = ''
-
   constructor(nodeName: string, nodeType = NodeType.ELEMENT_NODE) {
     super()
 
@@ -63,15 +65,25 @@ export class TaroNode extends TaroDataSourceElement {
 
   // 更新对应的 ArkUI 组件
   public updateComponent () {
-    if (!this.parentNode || !this.parentNode.listeners?.length) return
+    if (!this._isCompileMode && (!this.parentNode || !this.parentNode.listeners?.length)) return
 
     const idx = this.parentNode.findIndex(this)
-      
-    if (idx >= 0) {
-      this._updateTrigger++
-      this.parentNode.notifyDataChange(idx)
+
+    if (this._isCompileMode) {
+      // 半编译模式下走 @State 的更新模式
+      if (this._isDynamicNode) {
+        this._updateTrigger++
+      } else {
+        this.parentNode.updateComponent()
+      }
     } else {
-      this.parentNode.notifyDataReload()
+      // 非半编译模式下走 LazyForEach 的更新模式
+      if (idx >= 0) {
+        this._updateTrigger++
+        this.parentNode.notifyDataChange(idx)
+      } else {
+        this.parentNode.notifyDataReload()
+      }
     }
   }
 
@@ -232,14 +244,15 @@ export class TaroTextNode extends TaroNode {
   }
 }
 
-function checkIsCompileModeAndInstallAfterDOMAction (_node: TaroNode, _parentNode: TaroNode) {
-  // if (!parentNode._isCompileMode) return
+function checkIsCompileModeAndInstallAfterDOMAction (node: TaroNode, parentNode: TaroNode) {
+  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
+function checkIsCompileModeAndUninstallAfterDOMAction (node: TaroNode) {
+  if (!node._isCompileMode || !parentNode._instance) return
 
-  // node._instance?.dynamicCenter?.uninstall?.(node)
+  node._instance.dynamicCenter?.uninstall?.(node)
 }

package/dist/runtime-ets/dom/stylesheet/covertWeb2Hm.ts

@@ -0,0 +1,551 @@
+// @ts-nocheck
+
+import { CSSProperties } from 'react'
+
+import { BORDER_STYLE_MAP, capitalizeFirstLetter, FlexManager, getNodeMarginOrPaddingData, getUnit } from './util'
+
+// 将web端的style转换为hm端的style
+export default function convertWebStyle2HmStyle(webStyle: CSSProperties) {
+  const hmStyle: Record<string, any> = {}
+  Object.keys(webStyle).forEach((key) => {
+    const value = webStyle[key]
+    switch (key) {
+      case 'padding': {
+        const { top, bottom, left, right } = getNodeMarginOrPaddingData(value)
+        hmStyle._paddingTop = top
+        hmStyle._paddingBottom = bottom
+        hmStyle._paddingLeft = left
+        hmStyle._paddingRight = right
+        break
+      }
+      case 'paddingTop': {
+        hmStyle._paddingTop = getUnit(value)
+        break
+      }
+      case 'paddingBottom': {
+        hmStyle._paddingBottom = getUnit(value)
+        break
+      }
+      case 'paddingLeft': {
+        hmStyle._paddingLeft = getUnit(value)
+        break
+      }
+      case 'paddingRight': {
+        hmStyle._paddingRight = getUnit(value)
+        break
+      }
+      case 'margin': {
+        const { top, bottom, left, right } = getNodeMarginOrPaddingData(value)
+        hmStyle._marginTop = top
+        hmStyle._marginBottom = bottom
+        hmStyle._marginLeft = left
+        hmStyle._marginRight = right
+        break
+      }
+      case 'marginTop': {
+        hmStyle._marginTop = getUnit(value)
+        break
+      }
+      case 'marginBottom': {
+        hmStyle._marginBottom = getUnit(value)
+        break
+      }
+      case 'marginLeft': {
+        hmStyle._marginLeft = getUnit(value)
+        break
+      }
+      case 'marginRight': {
+        hmStyle._marginRight = getUnit(value)
+        break
+      }
+      case 'top': {
+        hmStyle._top = getUnit(value)
+        break
+      }
+      case 'left': {
+        hmStyle._left = getUnit(value)
+        break
+      }
+      case 'flex': {
+        let res: [number, number, number | string] = [0, 0, 'auto']
+        if (typeof value === 'number') {
+          res = [value, 1, 0]
+        } else if (value === 'auto') {
+          res = [1, 1, 'auto']
+        } else if (value === 'none') {
+          res = [0, 0, 'auto']
+        } else if (typeof value === 'string') {
+          const FlexList = value.replace(new RegExp('/\\s+/g'), ' ').split(' ')
+          FlexList.forEach((item, index) => {
+            res[index] = index < 2 ? Number(item) : item
+          })
+        }
+        hmStyle._flexGrow = getUnit(res[0])
+        hmStyle._flexShrink = Number(res[1])
+        hmStyle._flexBasis = Number(res[2])
+        break
+      }
+      case 'flexGrow': {
+        hmStyle._flexGrow = getUnit(value)
+        break
+      }
+      case 'flexShrink': {
+        hmStyle._flexShrink = Number(value)
+        break
+      }
+      case 'flexBasis': {
+        hmStyle._flexBasis = Number(value)
+        break
+      }
+      case 'alignSelf': {
+        hmStyle._alignSelf = FlexManager.itemAlign(value)
+        break
+      }
+      case 'flexDirection': {
+        hmStyle._flexDirection = FlexManager.direction(value)
+        break
+      }
+      case 'justifyContent': {
+        hmStyle._justifyContent = FlexManager.flexAlign(value)
+        break
+      }
+      case 'alignItems': {
+        hmStyle._alignItems = FlexManager.itemAlign(value)
+        break
+      }
+      case 'alignContent': {
+        hmStyle._alignContent = FlexManager.flexAlign(value)
+        break
+      }
+      case 'flexWrap': {
+        hmStyle._flexWrap = FlexManager.flexWrap(value)
+        break
+      }
+      case 'width': {
+        hmStyle._width = getUnit(value)
+        break
+      }
+      case 'height': {
+        hmStyle._height = getUnit(value)
+        break
+      }
+      case 'minWidth': {
+        hmStyle._minWidth = getUnit(value)
+        break
+      }
+      case 'minHeight': {
+        hmStyle._minHeight = getUnit(value)
+        break
+      }
+      case 'maxWidth': {
+        hmStyle._maxWidth = getUnit(value)
+        break
+      }
+      case 'maxHeight': {
+        hmStyle._maxHeight = getUnit(value)
+        break
+      }
+      case 'background': {
+        // TODO： 暂未实现
+        break
+      }
+      case 'backgroundColor': {
+        hmStyle._backgroundColor = value
+        break
+      }
+      case 'backgroundImage': {
+        setBackgroundImage(hmStyle, value)
+        break
+      }
+      case 'backgroundRepeat': {
+        setBackgroundRepeat(hmStyle, value)
+        break
+      }
+      case 'backgroundSize': {
+        setBackgroundSize(hmStyle, value)
+        break
+      }
+      case 'backgroundPosition': {
+        setBackgroundPosistion(hmStyle, value)
+        break
+      }
+      case 'border': {
+        const [width, style, color] = value.split(' ')
+        hmStyle._borderTopWidth = getUnit(width)
+        hmStyle._borderRightWidth = getUnit(width)
+        hmStyle._borderBottomWidth = getUnit(width)
+        hmStyle._borderLeftWidth = getUnit(width)
+        hmStyle._borderTopStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle._borderRightStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle._borderBottomStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle._borderLeftStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle._borderTopColor = color
+        hmStyle._borderRightColor = color
+        hmStyle._borderBottomColor = color
+        hmStyle._borderLeftColor = color
+        break
+      }
+      case 'borderTop': {
+        const [width, style, color] = value.split(' ')
+        hmStyle._borderTopWidth = getUnit(width)
+        hmStyle._borderTopStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle._borderTopColor = color
+        break
+      }
+      case 'borderRight': {
+        const [width, style, color] = value.split(' ')
+        hmStyle._borderRightWidth = getUnit(width)
+        hmStyle._borderRightStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle._borderRightColor = color
+        break
+      }
+      case 'borderBottom': {
+        const [width, style, color] = value.split(' ')
+        hmStyle._borderBottomWidth = getUnit(width)
+        hmStyle._borderBottomStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle._borderBottomColor = color
+        break
+      }
+      case 'borderLeft': {
+        const [width, style, color] = value.split(' ')
+        hmStyle._borderLeftWidth = getUnit(width)
+        hmStyle._borderLeftStyle = BORDER_STYLE_MAP.get(style)
+        hmStyle._borderLeftColor = color
+        break
+      }
+      case 'borderWidth': {
+        hmStyle._borderTopWidth = getUnit(value)
+        hmStyle._borderRightWidth = getUnit(value)
+        hmStyle._borderBottomWidth = getUnit(value)
+        hmStyle._borderLeftWidth = getUnit(value)
+        break
+      }
+      case 'borderLeftWidth': {
+        hmStyle._borderLeftWidth = getUnit(value)
+        break
+      }
+      case 'borderRightWidth': {
+        hmStyle._borderRightWidth = getUnit(value)
+        break
+      }
+      case 'borderTopWidth': {
+        hmStyle._borderTopWidth = getUnit(value)
+        break
+      }
+      case 'borderBottomWidth': {
+        hmStyle._borderBottomWidth = getUnit(value)
+        break
+      }
+      case 'borderStyle': {
+        hmStyle._borderTopStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle._borderRightStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle._borderBottomStyle = BORDER_STYLE_MAP.get(value)
+        hmStyle._borderLeftStyle = BORDER_STYLE_MAP.get(value)
+        break
+      }
+      case 'borderLeftStyle': {
+        hmStyle._borderLeftStyle = BORDER_STYLE_MAP.get(value)
+        break
+      }
+      case 'borderRightStyle': {
+        hmStyle._borderRightStyle = BORDER_STYLE_MAP.get(value)
+        break
+      }
+      case 'borderTopStyle': {
+        hmStyle._borderTopStyle = BORDER_STYLE_MAP.get(value)
+        break
+      }
+      case 'borderBottomStyle': {
+        hmStyle._borderBottomStyle = BORDER_STYLE_MAP.get(value)
+        break
+      }
+      case 'borderColor': {
+        hmStyle._borderTopColor = value
+        hmStyle._borderRightColor = value
+        hmStyle._borderBottomColor = value
+        hmStyle._borderLeftColor = value
+        break
+      }
+      case 'borderLeftColor': {
+        hmStyle._borderLeftColor = value
+        break
+      }
+      case 'borderRightColor': {
+        hmStyle._borderRightColor = value
+        break
+      }
+      case 'borderTopColor': {
+        hmStyle._borderTopColor = value
+        break
+      }
+      case 'borderBottomColor': {
+        hmStyle._borderBottomColor = value
+        break
+      }
+      case 'borderRadius': {
+        hmStyle._borderTopLeftRadius = getUnit(value)
+        hmStyle._borderTopRightRadius = getUnit(value)
+        hmStyle._borderBottomLeftRadius = getUnit(value)
+        hmStyle._borderBottomRightRadius = getUnit(value)
+        break
+      }
+      case 'borderTopLeftRadius': {
+        hmStyle._borderTopLeftRadius = getUnit(value)
+        break
+      }
+      case 'borderTopRightRadius': {
+        hmStyle._borderTopRightRadius = getUnit(value)
+        break
+      }
+      case 'borderBottomLeftRadius': {
+        hmStyle._borderBottomLeftRadius = getUnit(value)
+        break
+      }
+      case 'borderBottomRightRadius': {
+        hmStyle._borderBottomRightRadius = getUnit(value)
+        break
+      }
+      case 'color': {
+        hmStyle._color = value
+        break
+      }
+      case 'fontSize': {
+        hmStyle._fontSize = getUnit(value)
+        break
+      }
+      case 'fontWeight': {
+        setFontWeight(hmStyle, value)
+        break
+      }
+      case 'fontStyle': {
+        switch (value) {
+          case 'italic':
+            hmStyle._fontStyle = FontStyle.Italic
+            break
+          default:
+            hmStyle._fontStyle = FontStyle.Normal
+        }
+        break
+      }
+      case 'textAlign': {
+        switch (value) {
+          case 'left':
+            hmStyle._textAlign = TextAlign.Start
+            break
+          case 'center':
+            hmStyle._textAlign = TextAlign.Center
+            break
+          case 'right':
+            hmStyle._textAlign = TextAlign.End
+            break
+          default:
+            hmStyle._textAlign = TextAlign.Start
+            break
+        }
+        break
+      }
+      case 'lineHeight': {
+        hmStyle._lineHeight = getUnit(value)
+        break
+      }
+      case 'letterSpacing': {
+        hmStyle._letterSpacing = getUnit(value)
+        break
+      }
+      case 'textDecoration': {
+        if (typeof value === 'string') {
+          switch (value) {
+            case 'underline': hmStyle._textDecoration = TextDecorationType.Underline; break
+            case 'overline': hmStyle._textDecoration = TextDecorationType.Overline; break
+            case 'line-through': hmStyle._textDecoration = TextDecorationType.LineThrough; break
+            default: hmStyle._textDecoration = TextDecorationType.None; break
+          }
+        }
+        break
+      }
+      case 'textOverflow': {
+        if (typeof value === 'string') {
+          let overflow = TextOverflow.None
+          switch (value) {
+            case 'clip': overflow = TextOverflow.Clip; break
+            case 'ellipsis': overflow = TextOverflow.Ellipsis; break
+            case 'marquee': overflow = TextOverflow.MARQUEE; break
+          }
+          hmStyle._textOverflow = {
+            overflow
+          }
+        }
+        break
+      }
+      case 'WebkitLineClamp': {
+        hmStyle._WebkitLineClamp = Number(value)
+        break 
+      }
+      case 'transform': {
+        hmStyle._transform = parseTransform(value)
+        break
+      }
+      default: {
+        hmStyle[key] = value
+        break
+      }
+    }
+  })
+  return hmStyle
+}
+
+function setBackgroundImage(hmStyle, value) {
+  if (typeof value === 'string' && value.indexOf('url(') !== -1 && value.indexOf(')') !== -1) {
+    // 如果包含 url()，则说明是 background-image 属性
+    const match = value.match(new RegExp('url\\([\'"]?(.*?)[\'"]?\\)'))
+    if (match) {
+      hmStyle._backgroundImage = [{
+        src: match[1]
+      }]
+    }
+  }
+}
+
+function setBackgroundRepeat(hmStyle, value) {
+  if (typeof value === 'string') {
+    switch (value) {
+      case 'repeat-x': hmStyle._backgroundRepeat = [ImageRepeat.X]; break
+      case 'repeat-y': hmStyle._backgroundRepeat = [ImageRepeat.Y]; break
+      case 'no-repeat': hmStyle._backgroundRepeat = [ImageRepeat.NoRepeat]; break
+      default: hmStyle._backgroundRepeat = [ImageRepeat.XY]; break
+    }
+  }
+}
+
+function setBackgroundSize(hmStyle, value) {
+  if (typeof value === 'string') {
+    const sizes = value.split(' ')
+    if (sizes.length === 1) {
+      hmStyle._backgroundSize = [{ width: getUnit(sizes[0]) }]
+    } else if (sizes.length === 2) {
+      hmStyle._backgroundSize = [{ width: getUnit(sizes[0]), height: getUnit(sizes[1]) }]
+    }
+  }
+}
+
+function setBackgroundPosistion (hmStyle, value) {
+  if (typeof value === 'string') {
+    const positions = value.split(' ')
+    const horizontal = positions[0].toLowerCase()
+    const vertical = positions[1].toLowerCase() || 'top'
+
+    if (horizontal === 'left' && vertical === 'top') {
+      hmStyle._backgroundPosition = [Alignment.TopStart]
+    } else if (horizontal === 'center' && vertical === 'top') {
+      hmStyle._backgroundPosition = [Alignment.Top]
+    } else if (horizontal === 'right' && vertical === 'top') {
+      hmStyle._backgroundPosition = [Alignment.TopEnd]
+    } else if (horizontal === 'left' && vertical === 'center') {
+      hmStyle._backgroundPosition = [Alignment.Start]
+    } else if (horizontal === 'center' && vertical === 'center') {
+      hmStyle._backgroundPosition = [Alignment.Center]
+    } else if (horizontal === 'right' && vertical === 'center') {
+      hmStyle._backgroundPosition = [Alignment.End]
+    } else if (horizontal === 'left' && vertical === 'bottom') {
+      hmStyle._backgroundPosition = [Alignment.BottomStart]
+    } else if (horizontal === 'center' && vertical === 'bottom') {
+      hmStyle._backgroundPosition = [Alignment.Bottom]
+    } else if (horizontal === 'right' && vertical === 'bottom') {
+      hmStyle._backgroundPosition = [Alignment.BottomEnd]
+    } else {
+      if (/^\d+(\.\d+)?(px|%|vw|vh)$/.test(horizontal)) {
+        hmStyle._backgroundPosition = [{ x: getUnit(horizontal) }]
+        if (/^\d+(\.\d+)?(px|%|vw|vh)$/.test(vertical)) {
+          hmStyle._backgroundPosition = [{ x: getUnit(horizontal), y: getUnit(vertical) }]
+        }
+      }
+    }
+  }
+}
+
+function setFontWeight (hmStyle, value) {
+  switch (value) {
+    case 'normal': hmStyle._fontWeight = FontWeight.Normal; break
+    case 'bold': hmStyle._fontWeight = FontWeight.Bold; break
+    case 'bolder': hmStyle._fontWeight = FontWeight.Bolder; break
+    case 'lighter': hmStyle._fontWeight = FontWeight.Lighter; break
+    default: hmStyle._fontWeight = Number(value); break
+  }
+}
+
+function parseTransform(transformString) {
+  const transformRegex = /(\w+)\(([^)]+)\)/g
+  const transforms = []
+
+  let matchs
+  while ((matchs = transformRegex.exec(transformString)) !== null) {
+    const [, type, valueString] = matchs
+    const values = valueString.split(/\s*,\s*/).map(parseFloat)
+
+    const transformObj = {
+      type: capitalizeFirstLetter(type),
+      value: {}
+    }
+
+    switch (type) {
+      case 'translate':
+      case 'translate3d':
+        transformObj.value.x = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.y = parseFloat(getUnit(values[1])) || 0
+        transformObj.value.z = parseFloat(getUnit(values[2])) || 0
+        break
+      case 'translateX':
+        transformObj.value.x = parseFloat(getUnit(values[0])) || 0
+        break
+      case 'translateY':
+        transformObj.value.y = parseFloat(getUnit(values[0])) || 0
+        break
+      case 'translateZ':
+        transformObj.value.z = parseFloat(getUnit(values[0])) || 0
+        break
+      case 'rotate':
+        transformObj.value.angle = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.x = 0
+        transformObj.value.y = 0
+        transformObj.value.z = 1
+        break
+      case 'rotate3d':
+        transformObj.value.angle = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.x = values[1] || 0
+        transformObj.value.y = values[2] || 0
+        transformObj.value.z = values[3] || 0
+        break
+      case 'rotateX':
+        transformObj.value.angle = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.x = 1
+        transformObj.value.y = 0
+        transformObj.value.z = 0
+        break
+      case 'rotateY':
+        transformObj.value.angle = parseFloat(getUnit(values[0])) || 0
+        transformObj.value.x = 0
+        transformObj.value.y = 1
+        transformObj.value.z = 0
+        break
+      case 'scale':
+      case 'scale3d':
+        transformObj.value.x = values[0] || 1
+        transformObj.value.y = values[1] || values[0] || 1
+        transformObj.value.z = values[2] || 1
+        break
+      case 'scaleX':
+        transformObj.value.x = values[0] || 1
+        break
+      case 'scaleY':
+        transformObj.value.y = values[0] || 1
+        break
+      default:
+        // Handle unrecognized transform types or ignore them
+        break
+    }
+
+    transforms.push(transformObj)
+  }
+
+  return transforms
+}