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

package/dist/components-harmony-ets/switch.ets

@@ -1,47 +1,14 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
-  TaroEvent, TaroAny } from '@tarojs/runtime'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { createTaroEvent } from './utils/events'
-import { getNodeThresholds, shouldBindEvent, getNormalAttributes } from './utils/helper'
+import commonStyleModify from './style'
+import { getNodeThresholds, shouldBindEvent } from './utils/helper'
 
-import type { TaroSwitchElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroSwitchElement, TaroEvent } from '@tarojs/runtime'
 
 interface SwitchAttrs {
   selectedColor?: ResourceColor
 }
 
-@Extend(Toggle)
-function styles (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-}
-
 @Extend(Toggle)
 function attrs(attr: SwitchAttrs) {
   .selectedColor(attr.selectedColor)
@@ -61,53 +28,45 @@ function themeStyles(isDisabled: boolean) {
 
 @Component
 export default struct TaroSwitch {
-  nodeInfoMap: TaroAny = {}
-
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroSwitchElement) => void = this.customBuilder
   @ObjectLink node: TaroSwitchElement
-
-  @State value: boolean = false
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-
-    this.value = !!this.node._attrs.checked
+    if (this.node && !this.node._isInit) {
+      this.node._isInit = true
+      this.node._instance = this
+      this.node._reset = this.node.checked || false
+    }
   }
 
-  @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
-  }
+  build () {
+    Toggle({
+      type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
+      isOn: this.node.checked,
+    })
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .attrs(getAttributes(this.node))
+      .themeStyles(!!this.node._attrs.disabled)
+      .onChange((isOn: boolean) => {
+        if (this.node) {
+          if (!this.node?._attrs.disabled) {
+            const event: TaroEvent = createTaroEvent('change', { detail: { value: isOn } }, this.node)
 
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Toggle({
-        type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
-        isOn: this.value,
-      })
-        .defaultEvent()
-        .styles(getNormalAttributes(this.node))
-        .attrs(getAttributes(this.node))
-        .themeStyles(!!this.node._attrs.disabled)
-        .onChange((isOn: boolean) => {
-          if (!this.node._attrs.disabled) {
-            this.value = isOn
-            const event: TaroEvent = createTaroEvent('change', { detail: { value: this.value } }, this.node)
+            this.node.updateCheckedValue(isOn)
             eventHandler(event, 'change', this.node)
           } else {
-            // FIXME 找下文档是否有强制刷新方法
-            this.value = !this.value
-            this.value = !this.value
+            this.node.updateComponent()
           }
-        })
-        .visibleChangeEvent()
-    }
+        }
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        if (this.node) {
+          this.node._nodeInfo.areaInfo = res[1]
+        }
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }

package/dist/components-harmony-ets/{index.ts → tag.ts}

@@ -35,6 +35,8 @@ export const TaroAdTagName = 'ad'
 export const TaroWebViewTagName = 'web-view'
 export const TaroBlockTagName = 'block'
 export const TaroMapTagName = 'map'
+export const TaroPageMetaTagName = 'page-meta'
+export const TaroNavigationBarTagName = 'navigation-bar'
 export const TaroSlotTagName = 'slot'
 export const TaroNativeSlotTagName = 'native-slot'
 export const TaroCustomWrapperTagName = 'custom-wrapper'
@@ -47,3 +49,7 @@ export const TaroListTagName = 'list'
 export const TaroListItemTagName = 'list-item'
 export const TaroOpenDataTagName = 'open-data'
 export const TaroIgnoreTagName = 'ignore'
+
+export const TaroStickySectionTagName = 'sticky-section'
+export const TaroStickyHeaderTagName = 'sticky-header'
+export const TaroListViewTagName = 'list-view'

package/dist/components-harmony-ets/text.ets

@@ -1,97 +1,152 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny, NodeType } from '@tarojs/runtime'
+import { isString } from '@tarojs/shared'
+import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, NodeType } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { getNodeThresholds, getNormalAttributes, getFontAttributes, shouldBindEvent, bindAnimation } from './utils/helper'
+import { textModify, setNormalTextAttributeIntoInstance } from './style'
+import { getButtonColor } from './button'
+import { getImageMode } from './image'
+import { BUTTON_THEME_COLOR } from './utils/constant/style'
+import { getNodeThresholds, getStyleAttr, shouldBindEvent, getNormalAttributes } from './utils/helper'
 
-import type { TaroTextElement } from './element'
-import type { TaroStyleType, TaroTextStyleType } from '@tarojs/runtime'
+import type { TaroButtonElement, TaroElement, TaroTextElement, TaroAny, HarmonyStyle } from '@tarojs/runtime'
 
-@Extend(Text)
-function textStyle (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-  .fontColor(style.color)
-  .fontSize(style.fontSize)
-  .fontWeight(style.fontWeight)
-  .fontStyle(style.fontStyle)
-  .fontFamily(style.fontFamily)
-  .lineHeight(style.lineHeight)
-  .decoration({
-    type: style.decoration,
-    color: style.color
-  })
+function getButtonFontSize (node: TaroButtonElement): string | number {
+  const isMini = node._attrs.size === 'mini'
+
+  return isMini ? convertNumber2VP(26) : convertNumber2VP(36)
 }
 
-@Extend(Text)
-function textAttr(attr: TaroTextStyleType) {
-  .textAlign(attr.textAlign)
-  .textOverflow(attr.textOverflow)
-  .maxLines(attr.maxLines)
-  .letterSpacing(attr.letterSpacing)
+function getTextInViewWidth (node: TaroElement | null): TaroAny {
+  if (node) {
+    const hmStyle = node.hmStyle || {}
+    const isFlexView = hmStyle.display === 'flex'
+    const width: TaroAny = getStyleAttr(node, 'width')
+    const isPercentWidth = isString(width) && width.includes('%')
+
+    return isFlexView || isPercentWidth ? null : getStyleAttr(node, 'width')
+  }
 }
 
 
 @Component
 export default struct TaroText {
-  nodeInfoMap: TaroAny = {}
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroTextElement) => void = this.customBuilder
+  @ObjectLink node: TaroTextElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
   }
 
-  @ObjectLink node: TaroTextElement
-
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
+  build () {
+    if (this.node.nodeType === NodeType.TEXT_NODE) {
+      if (this.node.parentNode) {
+        if ((this.node.parentNode as TaroElement).tagName === 'BUTTON') {
+          Text(this.node.textContent)
+            .attributeModifier(textModify.setNode(this.node?.parentElement as TaroElement, {
+              fontSize: getButtonFontSize(this.node.parentNode as TaroButtonElement),
+              color: getButtonColor(this.node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node.parentNode as TaroButtonElement)._attrs.type || '').text)
+            }))
+        } else {
+          Text(this.node.textContent)
+            .attributeModifier(textModify.setNode(this.node?.parentElement as TaroElement))
+            .width(getTextInViewWidth(this.node.parentElement))
+        }
+      }
+    } else {
+      Text(this.node.textContent) {
+        // text 下还有标签
+        if (this.node.childNodes.length > 1 || ((this.node.childNodes[0] && this.node.childNodes[0] as TaroElement)?.nodeType === NodeType.ELEMENT_NODE)) {
+          ForEach(this.node.childNodes, (item: TaroElement) => {
+            createTextChildNode(item)
+          }, (item: TaroElement) => `${item._nid}${this.node._updateTrigger}`)
+        }
+      }
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .attributeModifier(textModify.setNode(this.node).withNormalStyle().setAnimationStyle(this.overwriteStyle))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+    }
   }
+}
 
-  @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
+@Builder
+function createTextChildNode (item: TaroElement) {
+  if (item.tagName === 'IMAGE') {
+    ImageSpan(item.getAttribute('src'))
+      // .attributeModifier(commonStyleModify.setNode(item))
+      .objectFit(getImageMode(item.getAttribute('mode')))
+      // .verticalAlign(align)
+      .width(item._st.hmStyle.width)
+      .height(item._st.hmStyle.height)
+      .margin({
+        top: item._st.hmStyle.marginTop,
+        left: item._st.hmStyle.marginLeft,
+        right: item._st.hmStyle.marginRight,
+        bottom: item._st.hmStyle.marginBottom,
+      })
+      .padding({
+        top: item._st.hmStyle.paddingTop,
+        left: item._st.hmStyle.paddingLeft,
+        right: item._st.hmStyle.paddingRight,
+        bottom: item._st.hmStyle.paddingBottom,
+      })
+      .textBackgroundStyle({
+        color: item._st.hmStyle.backgroundColor,
+        radius: {
+          topLeft: item._st.hmStyle.borderTopLeftRadius,
+          topRight: item._st.hmStyle.borderTopRightRadius,
+          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+          bottomRight: item._st.hmStyle.borderBottomRightRadius,
+        }
+      })
+      .borderRadius({
+        topLeft: item._st.hmStyle.borderTopLeftRadius,
+        topRight: item._st.hmStyle.borderTopRightRadius,
+        bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+        bottomRight: item._st.hmStyle.borderBottomRightRadius
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
+  } else if (item.nodeType === NodeType.TEXT_NODE) {
+    Span(item.textContent)
+  } else if (item.tagName === 'TEXT') {
+    Span(item.textContent)
+      .attributeModifier(spanModify.setNode(item))
+      .letterSpacing(item._st.hmStyle.letterSpacing)
+      .textBackgroundStyle({
+        color: item._st.hmStyle.backgroundColor,
+        radius: {
+          topLeft: item._st.hmStyle.borderTopLeftRadius,
+          topRight: item._st.hmStyle.borderTopRightRadius,
+          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+          bottomRight: item._st.hmStyle.borderBottomRightRadius,
+        }
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
   }
+}
 
+class SpanStyleModify implements AttributeModifier<SpanAttribute> {
+  node: TaroTextElement | null = null
+  style: HarmonyStyle | null = null
+  overwriteStyle: Record<string, TaroAny> = {}
+  withNormal = false
 
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      if (this.node.nodeType === NodeType.TEXT_NODE) {
-        Text(this.node.textContent)
-      } else {
-        Text(this.node.textContent)
-          .defaultEvent()
-          .textStyle(getNormalAttributes(this.node))
-          .textAttr(getFontAttributes(this.node))
-          .visibleChangeEvent()
-      }
+  setNode (node: TaroTextElement) {
+    this.node = node
+    this.style = getNormalAttributes(this.node)
+    return this
+  }
+
+  applyNormalAttribute(instance: SpanAttribute): void {
+    if (this.node && this.style) {
+      setNormalTextAttributeIntoInstance(instance, this.style, this.node)
     }
   }
 }
+
+const spanModify = new SpanStyleModify()

package/dist/components-harmony-ets/textArea.ets

@@ -1,44 +1,16 @@
-import window from '@ohos.window'
-import common from '@ohos.app.ability.common'
-import { isNumber, isUndefined } from '@tarojs/shared'
-import { bindFocus, bindInstanceToNode, eventHandler, Current, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
-  TaroEvent, TaroAny } from '@tarojs/runtime'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { createTaroEvent } from './utils/events'
-import { getNodeThresholds, getNormalAttributes, getFontAttributes, parseStyles, shouldBindEvent, bindAnimation } from './utils/helper'
+import commonStyleModify from './style'
+import { getNodeThresholds, getFontAttributes, shouldBindEvent, parseStyles } from './utils/helper'
 
-import type { TaroTextAreaElement } from './element'
-import type { TaroStyleType, TaroTextStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroStyleType, TaroTextStyleType, TaroTextAreaElement, TaroEvent } from '@tarojs/runtime'
+
+interface TextareaAttrs extends TaroTextStyleType {
+  autoFocus?: boolean
+}
 
 @Extend(TextArea)
 function textStyle (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
   .fontColor(style.color)
   .fontSize(style.fontSize)
   .fontWeight(style.fontWeight)
@@ -47,123 +19,75 @@ function textStyle (style: TaroStyleType) {
 }
 
 @Extend(TextArea)
-function textAttr(attr: TaroTextStyleType) {
+function textAttr(attr: TextareaAttrs) {
   .textAlign(attr.textAlign)
-  .maxLines(attr.maxLines)
+  .maxLines(attr.WebkitLineClamp)
+  .defaultFocus(attr.autoFocus)
 }
 
-@Component
-struct TaroTextArea {
-  nodeInfoMap: TaroAny = {}
-
-  @State text: string = ''
-
-  @ObjectLink node: TaroTextAreaElement
-
-  controller: TextAreaController = new TextAreaController()
+function getAttributes(node: TaroTextAreaElement): TextareaAttrs {
+  const attrs: TaroAny = getFontAttributes(node)
+  attrs.autoFocus = node._attrs.autoFocus || node._attrs.focus || false
+  return attrs
+}
 
-  windowClass?: window.Window
+function getPlaceholderColor (node: TaroTextAreaElement): string {
+  const placeholderStyle: string = node._attrs.placeholderStyle || ''
 
-  _height: number = 0
+  return parseStyles(placeholderStyle)?.color
+}
 
-  heightChange = (height: number) => {
-    if (isNumber(height)) {
-      if (this._height !== height) {
-        this.onKeyboardHeightChange(height)
-        this._height = height
-      }
-    }
-  }
+@Component
+export default struct TaroTextArea {
+  @State value: string = ''
 
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroTextAreaElement) => void = this.customBuilder
+  @ObjectLink node: TaroTextAreaElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    bindFocus(this.node)
-    // 绑定动画
-    bindAnimation(this.node)
+    if (this.node) {
+      this.value = this.node.value
+      this.node._instance = this
 
-    this.text = this.node._attrs.value || ''
-
-    try {
-      Current.contextPromise
-        .then((context: common.BaseContext) => {
-          return window.getLastWindow(context, (err, windowClass: window.Window) => {
-            const errCode: number = err.code;
-            if (errCode) {
-              console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err))
-              return;
-            }
-            this.windowClass = windowClass
-            windowClass.on('keyboardHeightChange', this.heightChange)
-          })
-        })
-    } catch (exception) {
-      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception))
-    }
-  }
-
-  aboutToDisappear () {
-    if (this.windowClass) {
-      try {
-        this.windowClass.off('keyboardHeightChange', this.heightChange)
-      } catch (err) {
-        console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err))
+      if (!this.node._isInit) {
+        this.node._isInit = true
+        this.node._reset = this.node.value || ''
       }
     }
   }
 
-  onKeyboardHeightChange (height: number) {
-    const event: TaroEvent = createTaroEvent('keyboardHeightChange', { detail: { height, duration: 0 } }, this.node)
-    eventHandler(event, 'keyboardHeightChange', this.node)
-  }
-
-  getPlaceholderColor (node: TaroTextAreaElement): string {
-    const placeholderStyle: string = node._attrs.placeholderStyle || ''
-
-    return parseStyles(placeholderStyle)?.color
-  }
-
-  getText (): string {
-    return isUndefined(this.node._attrs.value) ? this.text : this.node._attrs.value
-  }
-
-  @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onBlur(() => {
-      const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.text } }, this.node)
-      eventHandler(event, 'blur', this.node)
-    })
-    .onFocus(() => {
-      const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.text, height: this._height } }, this.node)
-      eventHandler(event, 'focus', this.node)
-    })
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
-  }
-
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      TextArea({ text: this.getText(), placeholder: this.node._attrs?.placeholder || '', controller: this.controller })
-        .focusable(true)
-        .key(this.node._nid)
-        .placeholderColor(this.getPlaceholderColor(this.node))
-        .defaultEvent()
-        .textStyle(getNormalAttributes(this.node))
-        .textAttr(getFontAttributes(this.node))
-        .onChange((value: string) => {
-          const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
-          eventHandler(event, 'input', this.node)
-          this.text = value
-        })
-        .visibleChangeEvent()
-    }
+  build () {
+    TextArea({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
+      .key(this.node._nid)
+      .maxLength(Number(this.node._attrs?.maxlength) || null)
+      .placeholderColor(getPlaceholderColor(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .textStyle(this.node?.hmStyle)
+      .textAttr(getAttributes(this.node))
+      .onChange((value: string) => {
+        const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
+
+        this.value = value
+        this.node?.updateFormWidgetValue(value)
+        eventHandler(event, 'input', this.node)
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onBlur(() => {
+        const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
+        eventHandler(event, 'blur', this.node)
+      })
+      .onFocus(() => {
+        const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
+
+        eventHandler(event, 'focus', this.node)
+      })
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        if (this.node) {
+          this.node._nodeInfo.areaInfo = res[1]
+        }
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }
-
-export default TaroTextArea

package/dist/components-harmony-ets/utils/AttributeManager.ets

@@ -60,7 +60,7 @@ class AttributeManager {
     const dataValue: string = AttributeManager.getNodeStyle(style, 'animation')
 
     if (dataValue) {
-      let values: string[] = dataValue.trim().split(new RegExp("/\s+/"))
+      let values: string[] = dataValue.toString().trim().split(new RegExp("/\s+/"))
       switch (values.length) {
         case 4:
           res = { duration: values[0], curve: values[1], delay: values[2] }

package/dist/components-harmony-ets/utils/DynamicCenter.ts

@@ -1,9 +1,6 @@
-import { bindFocus, bindInstanceToNode, bindScrollTo, initComponentNodeInfo, TaroAny, TaroElement } from '@tarojs/runtime'
-
-import { bindAnimation } from './helper'
+import { TaroAny, TaroElement } from '@tarojs/runtime'
 
 export class DynamicCenter {
-
   install (node: TaroElement, parentNode: TaroElement) {
     if (!parentNode._isCompileMode) return
 
@@ -14,7 +11,7 @@ export class DynamicCenter {
     if (!node._isCompileMode || !node._instance) return
 
     if (node._attrs?._dynamicID) {
-      node._instance[node._attrs._dynamicID] = null
+      node._instance[node._attrs._dynamicID] = new TaroElement('Ignore')
     }
     node._instance = null
   }
@@ -25,13 +22,7 @@ export class DynamicCenter {
     const dynamicID = node._attrs?._dynamicID
 
     // dynamicID 只是为了更新到精准的 node
-    // 而为了让半编译模板中每个 node 都能响应 api 的调用，因此 initComponentNodeInfo、bindInstanceToNode 和各种 bindAttribute 都需要执行
-    initComponentNodeInfo(component, node)
-    bindInstanceToNode(node, component)
-    bindFocus(node)
-    bindAnimation(node)
-    bindScrollTo(node, component)
-
+    node._instance = component
     node._isCompileMode = true
 
     if (dynamicID) {
@@ -45,4 +36,4 @@ export class DynamicCenter {
       this.bindComponentToNodeWithDFS(node.childNodes[i] as TaroElement, component)
     }
   }
-}
+}