@tarojs/plugin-platform-harmony-ets 4.0.0-beta.10 → 4.0.0-beta.11

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

@@ -94,38 +94,41 @@ function getButtonMinHeight (node: TaroButtonElement): string | number | undefin
   return getButtonHeight(node)
 }
 
-@Builder
-export default function TaroButton (node: TaroButtonElement) {
-  Button({ stateEffect: !node._attrs.disabled }) {
-    Row() {
-      if (node._attrs.loading) {
-        LoadingProgress()
-        .width(20).height(20)
-        .color(getThemeAttributes(node).color)
+@Component
+export default struct TaroButton {
+  @ObjectLink node: TaroButtonElement
+  build() {
+    Button({ stateEffect: !this.node._attrs.disabled }) {
+      Row() {
+        if (this.node._attrs.loading) {
+          LoadingProgress()
+            .width(20).height(20)
+            .color(getThemeAttributes(this.node).color)
+        }
+        createLazyChildren(this.node)
       }
-      createLazyChildren(node)
     }
+    .themeStyles(getThemeAttributes(this.node))
+    .attributeModifier(commonStyleModify.setNode(this.node))
+    .constraintSize({
+      minWidth: this.node.hmStyle?.minWidth || getButtonMinWidth(this.node),
+      minHeight: this.node.hmStyle?.minHeight || getButtonMinHeight(this.node),
+      maxWidth: this.node.hmStyle?.maxWidth,
+      maxHeight: this.node.hmStyle?.maxHeight,
+    })
+    .type(ButtonType.Normal)
+    .onClick((e: ClickEvent) => {
+      if (this.node._attrs.formType && ['submit', 'reset'].includes(this.node._attrs.formType)) {
+        const eventName = this.node._attrs.formType + '-btn'
+        const event: TaroEvent = createTaroEvent(eventName, {}, this.node)
+        eventHandler(event, eventName, this.node)
+      }
+      eventHandler(e, 'click', this.node)
+    })
+    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      this.node._nodeInfo.areaInfo = res[1]
+    }))
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
-  .themeStyles(getThemeAttributes(node))
-  .attributeModifier(commonStyleModify.setNode(node))
-  .constraintSize({
-    minWidth: node.hmStyle?.minWidth || getButtonMinWidth(node),
-    minHeight: node.hmStyle?.minHeight || getButtonMinHeight(node),
-    maxWidth: node.hmStyle?.maxWidth,
-    maxHeight: node.hmStyle?.maxHeight,
-  })
-  .type(ButtonType.Normal)
-  .onClick((e: ClickEvent) => {
-    if (node._attrs.formType && ['submit', 'reset'].includes(node._attrs.formType)) {
-      const eventName = node._attrs.formType + '-btn'
-      const event: TaroEvent = createTaroEvent(eventName, {}, node)
-      eventHandler(event, eventName, node)
-    }
-    eventHandler(e, 'click', node)
-  })
-  .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
-  .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-    node._nodeInfo.areaInfo = res[1]
-  }))
-  .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
 }

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

@@ -33,9 +33,10 @@ function getOptions (node: TaroCheckboxElement): CheckboxOptions {
   }
 }
 
+
 @Component
 export struct TaroCheckbox {
-  node: TaroCheckboxElement | null = null
+  @ObjectLink node: TaroCheckboxElement
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
@@ -94,7 +95,7 @@ interface ChangeEventDetail { value: string[] }
 
 @Component
 export struct TaroCheckboxGroup {
-  node: TaroCheckboxGroupElement | null = null
+  @ObjectLink node: TaroCheckboxGroupElement
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))

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

@@ -8,33 +8,36 @@ import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroFormElement } from '@tarojs/runtime'
 
-@Builder
-export default function TaroForm (node: TaroFormElement) {
-  if (FlexManager.isFlexNode(node) && FlexManager.flexOptions(node).direction !== FlexDirection.Column) {
-    Row() {
-      createLazyChildren(node)
+@Component
+export default struct TaroForm {
+  @ObjectLink node: TaroFormElement
+  build() {
+    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+      Row() {
+        createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    } else {
+      Column() {
+        createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .alignItems(FlexManager.flexOptions(node).alignItems as VerticalAlign)
-    .justifyContent(FlexManager.flexOptions(node).justifyContent)
-  } else {
-    Column() {
-      createLazyChildren(node)
-    }
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .alignItems(FlexManager.flexOptions(node).alignItems as HorizontalAlign)
-    .justifyContent(FlexManager.flexOptions(node).justifyContent)
   }
 }

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

@@ -48,22 +48,26 @@ function getIconData (node: TaroIconElement): Resource | null {
   }
 }
 
-@Builder
-export default function TaroIcon (node: TaroIconElement) {
-  Image(getIconData(node))
-    .objectFit(ImageFit.Contain)
-    .fillColor(node._attrs.color || ICON_COLOR_MAP[node._attrs.type] || Color.Black)
-    .attributeModifier(commonStyleModify.setNode(node))
-    .size({
-      width: convertNumber2VP(Number(node._attrs.size) || 23),
-      height: convertNumber2VP(Number(node._attrs.size) || 23),
-    })
-    .width(getNormalAttributes(node).width || convertNumber2PX(23))
-    .height(getNormalAttributes(node).height || convertNumber2PX(23))
-    .onComplete(e => eventHandler(e, 'complete', node))
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
+@Component
+export default struct TaroIcon {
+  @ObjectLink node: TaroIconElement
+  build() {
+    Image(getIconData(this.node))
+      .objectFit(ImageFit.Contain)
+      .fillColor(this.node._attrs.color || ICON_COLOR_MAP[this.node._attrs.type] || Color.Black)
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .size({
+        width: convertNumber2VP(Number(this.node._attrs.size) || 23),
+        height: convertNumber2VP(Number(this.node._attrs.size) || 23),
+      })
+      .width(getNormalAttributes(this.node).width || convertNumber2PX(23))
+      .height(getNormalAttributes(this.node).height || convertNumber2PX(23))
+      .onComplete(e => eventHandler(e, 'complete', this.node))
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .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]
+      }))
+  }
 }
+

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

@@ -16,15 +16,19 @@ function getImageMode (mode: string): ImageFit {
   }
 }
 
-@Builder
-export default function TaroImage (node: TaroImageElement) {
-  Image(node.getAttribute('src'))
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .objectFit(getImageMode(node.getAttribute('mode')))
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onComplete(e => eventHandler(e, 'complete', node))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+@Component
+export default struct TaroImage {
+  @ObjectLink node: TaroImageElement
+
+  build() {
+    Image(this.node.getAttribute('src'))
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .objectFit(getImageMode(this.node.getAttribute('mode')))
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .onComplete(e => eventHandler(e, 'complete', this.node))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
 }

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

@@ -1,11 +1,15 @@
 import htmlParser from './utils/htmlParser'
 import { createChildItem } from './render'
 
-import type { TaroElement } from '@tarojs/runtime'
+import type { TaroInnerHtmlElement } from '@tarojs/runtime'
 
-@Builder
-export default function TaroInnerHtml (node: TaroElement) {
-  if (node.innerHTML) {
-    createChildItem(htmlParser(node.innerHTML))
+@Component
+export default struct TaroInnerHtml {
+  @ObjectLink node: TaroInnerHtmlElement
+  
+  build() {
+    if (this.node.innerHTML) {
+      createChildItem(htmlParser(this.node.innerHTML))
+    }
   }
 }

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

@@ -48,7 +48,7 @@ function getPlaceholderColor (node: TaroInputElement): string {
 export default struct TaroInput {
   @State value: string = ''
 
-  node: TaroInputElement | null = null
+  @ObjectLink node: TaroInputElement
 
   aboutToAppear () {
     if (this.node) {

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

@@ -34,45 +34,49 @@ function handleTargetChange (id: string) {
   }
 }
 
-@Builder
-export default function TaroLabel (node: TaroLabelElement) {
-  if (FlexManager.isFlexNode(node) && FlexManager.flexOptions(node).direction !== FlexDirection.Column) {
-    Row() {
-      createLazyChildren(node)
-    }
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onClick((e: ClickEvent) => {
-      const firstChild: TaroElement | null = node.childNodes[0] as TaroElement | null
-      const id: string = node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
-  
-      handleTargetChange(id)
-      eventHandler(e, 'click', node)
-    })
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .alignItems(FlexManager.flexOptions(node).alignItems as VerticalAlign)
-    .justifyContent(FlexManager.flexOptions(node).justifyContent)
-  } else {
-    Column() {
-      createLazyChildren(node)
+
+@Component
+export default struct TaroLabel {
+  @ObjectLink node:TaroLabelElement
+  build() {
+    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+      Row() {
+        createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .onClick((e: ClickEvent) => {
+        const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
+        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
+
+        handleTargetChange(id)
+        eventHandler(e, 'click', this.node)
+      })
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    } else {
+      Column() {
+        createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .onClick((e: ClickEvent) => {
+        const firstChild: TaroElement | null = this.node.childNodes[0] as TaroElement | null
+        const id: string = this.node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
+
+        handleTargetChange(id)
+        eventHandler(e, 'click', this.node)
+      })
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onClick((e: ClickEvent) => {
-      const firstChild: TaroElement | null = node.childNodes[0] as TaroElement | null
-      const id: string = node._attrs.for || firstChild?._attrs.id || firstChild?._nid || ''
-  
-      handleTargetChange(id)
-      eventHandler(e, 'click', node)
-    })
-    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), node), node, TOUCH_EVENT_MAP.values()))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .alignItems(FlexManager.flexOptions(node).alignItems as HorizontalAlign)
-    .justifyContent(FlexManager.flexOptions(node).justifyContent)
   }
 }

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

@@ -0,0 +1,67 @@
+import type { TaroMovableAreaElement, TaroStyleType } from '@tarojs/runtime'
+import commonStyleModify from './style'
+import { createLazyChildren } from './render'
+
+import { FlexManager } from './utils/FlexManager'
+import { getNormalAttributes } from './utils/helper'
+
+
+@Extend(Row)
+function rowAttrs(style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth || style.width,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
+}
+
+@Extend(Column)
+function columnAttrs(style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight || style.height,
+    maxHeight: style.maxHeight
+  })
+}
+
+@Component
+export default struct TaroMovableArea {
+  @ObjectLink node: TaroMovableAreaElement
+
+  @Provide areaWidth: Length = 0
+  @Provide areaHeight: Length = 0
+
+  build() {
+    if (this.node) {
+      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+        Row() {
+          createLazyChildren(this.node)
+        }
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .rowAttrs(getNormalAttributes(this.node))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        .clip(true)
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          this.areaWidth = newValue.width
+          this.areaHeight = newValue.height
+        })
+      } else {
+        Column() {
+          createLazyChildren(this.node)
+        }
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .columnAttrs(getNormalAttributes(this.node))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        .clip(true)
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          this.areaWidth = newValue.width
+          this.areaHeight = newValue.height
+        })
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+import type { TaroMovableViewElement, TaroStyleType } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { createLazyChildren } from './render'
+
+import { FlexManager } from './utils/FlexManager'
+import { getNormalAttributes, } from './utils/helper'
+@Extend(Row)
+function rowAttrs(style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth || style.width,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight,
+    maxHeight: style.maxHeight
+  })
+}
+
+@Extend(Column)
+function columnAttrs(style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight || style.height,
+    maxHeight: style.maxHeight
+  })
+}
+
+@Component
+export default struct TaroMovableArea {
+  @ObjectLink node: TaroMovableViewElement
+
+  @Provide areaWidth: Length = 0
+  @Provide areaHeight: Length = 0
+
+  build() {
+    if (this.node) {
+      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+        Row() {
+          createLazyChildren(this.node)
+        }
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .rowAttrs(getNormalAttributes(this.node))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        .clip(true)
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          this.areaWidth = newValue.width
+          this.areaHeight = newValue.height
+        })
+      } else {
+        Column() {
+          createLazyChildren(this.node)
+        }
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .columnAttrs(getNormalAttributes(this.node))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+        .clip(true)
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          this.areaWidth = newValue.width
+          this.areaHeight = newValue.height
+        })
+      }
+    }
+  }
+}

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

@@ -219,9 +219,10 @@ export struct PickerView {
   }
 }
 
+
 @Component
 export default struct TaroPicker {
-  node: TaroPickerElement | null = null
+  @ObjectLink node: TaroPickerElement
 
   aboutToAppear () {
     this.node?.addEventListener('click', this.handleClick)

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

@@ -0,0 +1,45 @@
+import type { TaroProgressElement, TaroAny } from '@tarojs/runtime'
+import commonStyleModify from './style'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+
+const PROGRESS_ACTIVECOLOR = '#09BB07'
+const PROGRESS_BACKGROUNDCOLOR = '#EBEBEB'
+const PROGRESS_DEFAULTINFOFONTSIZE = 16
+
+@Component
+export default struct TaroProgress {
+  @ObjectLink node: TaroProgressElement
+
+  build() {
+    if (this.node) {
+      Row({ space: 5 }) {
+        Progress({
+          value: parseFloat(this.node.getAttribute('percent')),
+          type: ProgressType.Linear
+        })
+          .attributeModifier(commonStyleModify.setNode(this.node))
+          .color(this.node.getAttribute('activeColor') ?? PROGRESS_ACTIVECOLOR)
+          .backgroundColor(this.node.getAttribute('backgroundColor') ?? PROGRESS_BACKGROUNDCOLOR)
+          .style({
+            strokeWidth: this.node.getAttribute('strokeWidth'),
+            strokeRadius: parseFloat(this.node.getAttribute('borderRadius')),
+            enableSmoothEffect: Boolean(this.node.getAttribute('active')),
+          })
+
+          .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+          .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) => {
+            if (this.node) {
+              this.node._nodeInfo.areaInfo = res[1]
+            }
+          }))
+
+        if (this.node.getAttribute('showInfo')) {
+          Text(`${this.node.getAttribute('percent')}%`)
+            .fontSize(this.node.getAttribute('fontSize') ?? PROGRESS_DEFAULTINFOFONTSIZE)
+        }
+      }
+    }
+  }
+}

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

@@ -35,7 +35,7 @@ function themeStyles(isDisabled: boolean) {
 
 @Component
 export struct TaroRadio {
-  node: TaroRadioElement | null = null
+  @ObjectLink node: TaroRadioElement
   
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
@@ -95,7 +95,7 @@ export struct TaroRadio {
 
 @Component
 export struct TaroRadioGroup {
-  node: TaroRadioGroupElement | null = null
+  @ObjectLink node: TaroRadioGroupElement
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))

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

@@ -10,15 +10,20 @@ function generateText (node: TaroRichTextElement): string {
   return parseHtmlNode(node._attrs.nodes || '')
 }
 
-@Builder
-export default function TaroRichText (node: TaroRichTextElement) {
-  RichText(generateText(node))
-    .attributeModifier(commonStyleModify.setNode(node))
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .onAreaChange(getComponentEventCallback(node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-      node._nodeInfo.areaInfo = res[1]
-    }))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+@Component
+export default struct TaroRichText {
+  @ObjectLink node: TaroRichTextElement
+
+  build () {
+    RichText(generateText(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  
+  }
 }
 
 // 将nodeTree转换成harmony需要的string结构