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

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

@@ -3,7 +3,7 @@ import { createLazyChildren } from './render'
 import commonStyleModify from './style'
 import { getSingleSelector, getMultiSelector } from './utils'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroEvent } from '@tarojs/runtime'
@@ -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)
@@ -237,8 +238,8 @@ export default struct TaroPicker {
           break
         case 'time': {
           const hour = new Date().getHours()
-          const minute = new Date().getMinutes() 
-  
+          const minute = new Date().getMinutes()
+
           defaultResetValue = `${('00'+hour).slice(-2)}:${('00'+minute).slice(-2)}`
           break
         }
@@ -247,7 +248,7 @@ export default struct TaroPicker {
           const day = data[1]
           const month = data[0]
           const year = data[2]
-  
+
           defaultResetValue = `${year}-${month}-${day}`
           break
         }
@@ -255,7 +256,7 @@ export default struct TaroPicker {
           defaultResetValue = ''
           break
       }
-  
+
       this.node._isInit = true
       this.node._reset = this.node.value || defaultResetValue
     }

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

@@ -3,7 +3,7 @@ import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBL
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import { TaroEvent, TaroAny, HarmonyType, TaroRadioGroupElement, TaroRadioElement } from '@tarojs/runtime'
@@ -35,8 +35,8 @@ function themeStyles(isDisabled: boolean) {
 
 @Component
 export struct TaroRadio {
-  node: TaroRadioElement | null = null
-  
+  @ObjectLink node: TaroRadioElement
+
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
       this.node._isInit = true
@@ -61,7 +61,7 @@ export struct TaroRadio {
                   this.node.updateComponent()
                 } else {
                   this.node.updateCheckedValue(value)
-      
+
                   if (value) {
                     const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node?._attrs.value } }, this.node)
                     eventHandler(event, 'change', this.node)
@@ -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结构

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

@@ -2,7 +2,7 @@ import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBL
 
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
 
@@ -49,8 +49,8 @@ function handleScrollEvent (node: TaroScrollViewElement, eventName = 'scroll', x
     deltaY: vp2px(yOffset),
     scrollLeft: vp2px(currentXOffset),
     scrollTop: vp2px(currentYOffset),
-    scrollWidth: vp2px(Number(node._scroll?.width)),
-    scrollHeight: vp2px(Number(node._scroll?.height)),
+    scrollWidth: vp2px(Number(node._nodeInfo?._scroll?.width)),
+    scrollHeight: vp2px(Number(node._nodeInfo?._scroll?.height)),
   }
   const event: TaroEvent = createTaroEvent(eventName, { detail: value }, node)
 
@@ -77,51 +77,56 @@ function columnAttrs (style: TaroStyleType) {
   })
 }
 
-@Builder
-export default function TaroScrollView (node: TaroScrollViewElement) {
-    Scroll(node.scroller) {
-      if (node._attrs.scrollX) {
+@Component
+export default struct TaroScrollView {
+  @ObjectLink node: TaroScrollViewElement
+
+  build () {
+    Scroll(this.node.scroller) {
+      if (this.node._attrs.scrollX) {
         Row() {
-          createLazyChildren(node)
+          createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(node))
-        .rowAttrs(getNormalAttributes(node))
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .rowAttrs(getNormalAttributes(this.node))
         .width(null)
         .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
-          node._scroll = areaResult
-        }, node, ['scroll', 'scrollstart', 'scrollend']))
-        .alignItems(FlexManager.flexOptions(node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(node).justifyContent)
+          this.node._nodeInfo._scroll = areaResult
+        }, this.node, ['scroll', 'scrollstart', 'scrollend']))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .flexGrow(0).flexShrink(0)
       } else {
         Column() {
-          createLazyChildren(node)
+          createLazyChildren(this.node)
         }
-        .attributeModifier(commonStyleModify.setNode(node))
-        .columnAttrs(getNormalAttributes(node))
+        .attributeModifier(commonStyleModify.setNode(this.node))
+        .columnAttrs(getNormalAttributes(this.node))
         .height(null)
         .alignItems(HorizontalAlign.Start)
         .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
-          node._scroll = areaResult
-        }, node, ['scroll', 'scrollstart', 'scrollend']))
-        .alignItems(FlexManager.flexOptions(node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(node).justifyContent)
+          this.node._nodeInfo._scroll = areaResult
+        }, this.node, ['scroll', 'scrollstart', 'scrollend']))
+        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .flexGrow(0).flexShrink(0)
       }
     }
-    .width(getNormalAttributes(node).width)
-    .height(getNormalAttributes(node).height)
-    .flexGrow(getNormalAttributes(node).flexGrow)
-    .flexShrink(getNormalAttributes(node).flexShrink)
-    .scrollable(getScrollable(node))
-    .scrollBar(getAttributes(node).scrollBar)
-    .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]
+    .width(getNormalAttributes(this.node).width)
+    .height(getNormalAttributes(this.node).height)
+    .flexGrow(getNormalAttributes(this.node).flexGrow)
+    .flexShrink(getNormalAttributes(this.node).flexShrink)
+    .scrollable(getScrollable(this.node))
+    .scrollBar(getAttributes(this.node).scrollBar)
+    .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]
     }))
-    .onScroll(shouldBindEvent(() => { handleScrollEvent(node, 'scroll') }, node, ['scroll']))
-    .onScrollStart(shouldBindEvent(() => { handleScrollEvent(node, 'scrollstart') }, node, ['scrollstart']))
-    .onScrollStop(shouldBindEvent(() => { handleScrollEvent(node, 'scrollend') }, node, ['scrollend']))
-    .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
+    .onScroll(shouldBindEvent(() => { handleScrollEvent(this.node, 'scroll') }, this.node, ['scroll']))
+    .onScrollStart(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollstart') }, this.node, ['scrollstart']))
+    .onScrollStop(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollend') }, this.node, ['scrollend']))
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    .onReachEnd(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrolltolower') }, this.node, ['scrolltolower']))
+  }
 }

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

@@ -37,7 +37,7 @@ function themeStyles(isDisabled: boolean) {
 
 @Component
 export default struct TaroSlider {
-  node: TaroSliderElement | null = null
+  @ObjectLink node: TaroSliderElement
 
   @State value: number = 0
 

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

@@ -40,24 +40,28 @@ function getSwiperAttributes (node: TaroSwiperElement): SwiperAttrs {
   return swiperAttrs
 }
 
-@Builder
-export default function TaroSwiper (node: TaroSwiperElement) {
-  Swiper(node.controller) {
-    createLazyChildren(node)
+@Component
+export default struct TaroSwiper {
+  @ObjectLink node: TaroSwiperElement
+
+  build () {
+    Swiper(this.node.controller) {
+      createLazyChildren(this.node)
+    }
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .swiperAttr(getSwiperAttributes(this.node))
+      .indicatorStyle({
+        color: this.node.getAttribute('indicatorColor'),
+        selectedColor:  this.node.getAttribute('indicatorActiveColor')
+      })
+      .onChange((index: number) => {
+        const event: TaroEvent = createTaroEvent('change', { detail: { current: index } }, this.node)
+        eventHandler(event, 'change', 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))
   }
-  .attributeModifier(commonStyleModify.setNode(node))
-  .swiperAttr(getSwiperAttributes(node))
-  .indicatorStyle({
-    color: node.getAttribute('indicatorColor'),
-    selectedColor:  node.getAttribute('indicatorActiveColor')
-  })
-  .onChange((index: number) => {
-    const event: TaroEvent = createTaroEvent('change', { detail: { current: index } }, node)
-    eventHandler(event, 'change', 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))
 }

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

@@ -28,7 +28,7 @@ function themeStyles(isDisabled: boolean) {
 
 @Component
 export default struct TaroSwitch {
-  node: TaroSwitchElement | null = null
+  @ObjectLink node: TaroSwitchElement
 
   aboutToAppear () {
     if (this.node && !this.node._isInit) {

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

@@ -38,29 +38,35 @@ function getButtonFontSize (node: TaroButtonElement) {
   return isMini ? convertNumber2VP(26) : convertNumber2VP(36)
 }
 
-@Builder
-export default function TaroText (node: TaroTextElement) {
-  if (node.nodeType === NodeType.TEXT_NODE && node.parentNode) {
-    if ((node.parentNode as TaroElement).tagName === 'BUTTON') {
-      Text(node.textContent)
-        .textNormalFontStyle(getNormalAttributes(node.parentNode as TaroElement))
-        .textSpecialFontStyle(getFontAttributes(node.parentNode as TaroElement))
-        .fontSize((node.parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize((node.parentNode as TaroButtonElement)))
-        .fontColor((node.parentNode as TaroButtonElement).hmStyle.color || getButtonColor(node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((node.parentNode as TaroButtonElement)._attrs.type).text))
+@Component
+export default struct TaroText {
+  @ObjectLink node: TaroTextElement
+
+  build () {
+    if (this.node.nodeType === NodeType.TEXT_NODE && this.node.parentNode) {
+      if ((this.node.parentNode as TaroElement).tagName === 'BUTTON') {
+        Text(this.node.textContent)
+          .textNormalFontStyle(getNormalAttributes(this.node.parentNode as TaroElement))
+          .textSpecialFontStyle(getFontAttributes(this.node.parentNode as TaroElement))
+          .fontSize((this.node.parentNode as TaroButtonElement).hmStyle.fontSize || getButtonFontSize(this.node.parentNode as TaroButtonElement))
+          .fontColor((this.node.parentNode as TaroButtonElement).hmStyle.color || getButtonColor(this.node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node.parentNode as TaroButtonElement)._attrs.type).text))
+      } else {
+        Text(this.node.textContent)
+          .textNormalFontStyle(getNormalAttributes(this.node.parentNode as TaroElement))
+          .textSpecialFontStyle(getFontAttributes(this.node.parentNode as TaroElement))
+          .width(getNormalAttributes(this.node.parentNode as TaroElement).width)
+          .height(getNormalAttributes(this.node.parentNode as TaroElement).height)
+      }
     } else {
-      Text(node.textContent)
-        .textNormalFontStyle(getNormalAttributes(node.parentNode as TaroElement))
-        .textSpecialFontStyle(getFontAttributes(node.parentNode as TaroElement))
+      Text(this.node.textContent)
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .textNormalFontStyle(getNormalAttributes(this.node))
+      .textSpecialFontStyle(getFontAttributes(this.node))
+      .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]
+      }))
     }
-  } else {
-    Text(node.textContent)
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', node), node, ['click']))
-    .attributeModifier(commonStyleModify.setNode(node))
-    .textNormalFontStyle(getNormalAttributes(node))
-    .textSpecialFontStyle(getFontAttributes(node))
-    .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]
-    }))
   }
 }

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

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

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

@@ -1,7 +1,7 @@
 import { isUndefined } from '@tarojs/shared'
 import { ObjectAssign } from '@tarojs/runtime'
 
-import { FlexManager } from './FlexManager'
+import { FlexManager } from './flexManager'
 import { TEXT_DEFAULT_STYLE } from './constant/style'
 
 import type { StandardProps, TextProps } from '@tarojs/components/types'
@@ -25,7 +25,7 @@ export function getFontAttributes (node: TaroElement): TaroTextStyleType {
 // 模拟 div 自动撑满父元素的情况
 function isMaxWidthView (node: TaroElement) {
   const parentNode: TaroElement = node.parentNode as TaroElement
-  
+
   return node.tagName === 'VIEW' && parentNode && parentNode.tagName === 'VIEW' &&
     !(FlexManager.isFlexNode(parentNode) && FlexManager.flexOptions(parentNode).direction !== FlexDirection.Column)
 }

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

@@ -78,25 +78,30 @@ function handleUpdate (node: TaroVideoElement, e: VideoUpdateEvent) {
   emitEvent(node, 'timeUpdate', { currentTime: e.time})
 }
 
-@Builder
-export default function TaroVideo (node: TaroVideoElement) {
-  Video(getVideoData(node))
-    .attributeModifier(commonStyleModify.setNode(node))
-    .props(getVideoProps(node))
-    .aspectRatio(4 / 3)
-    .onStart(shouldBindEvent(() => { emitEvent(node, 'play') }, node, ['play']))
-    .onPause(shouldBindEvent(() => { emitEvent(node, 'pause') }, node, ['pause']))
-    .onFinish(shouldBindEvent(() => { emitEvent(node, 'ended') }, node, ['ended']))
-    .onError(shouldBindEvent(() => { emitEvent(node, 'error') }, node, ['error']))
-    .onUpdate((e) => { handleUpdate(node, e) })
-    .onPrepared(shouldBindEvent((e: TaroAny) => { emitEvent(node, 'loadedMetaData', { duration: e.duration }) }, node, ['loadedmetadata']))
-    .onSeeking(shouldBindEvent((e: TaroAny) => { emitEvent(node, 'seeking', { duration: e.time }) }, node, ['seeking']))
-    .onSeeked(shouldBindEvent(() => { emitEvent(node, 'seeked') }, node, ['seeked']))
-    .onFullscreenChange(shouldBindEvent((e: TaroAny) => { emitEvent(node, 'fullScreenChange', { fullScreen: e.fullscreen}) }, node, ['fullscreenchange']))
-    .onClick((e: ClickEvent) => { 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))
+@Component
+export default struct TaroVideo {
+  @ObjectLink node: TaroVideoElement
+
+  build () {
+    Video(getVideoData(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node))
+      .props(getVideoProps(this.node))
+      .aspectRatio(4 / 3)
+      .onStart(shouldBindEvent(() => { emitEvent(this.node, 'play') }, this.node, ['play']))
+      .onPause(shouldBindEvent(() => { emitEvent(this.node, 'pause') }, this.node, ['pause']))
+      .onFinish(shouldBindEvent(() => { emitEvent(this.node, 'ended') }, this.node, ['ended']))
+      .onError(shouldBindEvent(() => { emitEvent(this.node, 'error') }, this.node, ['error']))
+      .onUpdate((e) => { handleUpdate(this.node, e) })
+      .onPrepared(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'loadedMetaData', { duration: e.duration }) }, this.node, ['loadedmetadata']))
+      .onSeeking(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'seeking', { duration: e.time }) }, this.node, ['seeking']))
+      .onSeeked(shouldBindEvent(() => { emitEvent(this.node, 'seeked') }, this.node, ['seeked']))
+      .onFullscreenChange(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'fullScreenChange', { fullScreen: e.fullscreen}) }, this.node, ['fullscreenchange']))
+      .onClick((e: ClickEvent) => { 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))
+  }
+
 }

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

@@ -3,7 +3,7 @@ import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBL
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
 
 import type { TaroViewElement, TaroStyleType, TaroAny } from '@tarojs/runtime'
@@ -28,35 +28,39 @@ function columnAttrs (style: TaroStyleType) {
   })
 }
 
-@Builder
-export default function TaroView (node: TaroViewElement) {
-  if (FlexManager.isFlexNode(node) && FlexManager.flexOptions(node).direction !== FlexDirection.Column) {
-    Row() {
-      createLazyChildren(node)
-    }
-    .attributeModifier(commonStyleModify.setNode(node))
-    .rowAttrs(getNormalAttributes(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)
+@Component
+export default struct TaroView {
+  @ObjectLink node: TaroViewElement
+
+  build () {
+    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))
+      .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))
+      .columnAttrs(getNormalAttributes(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))
-    .columnAttrs(getNormalAttributes(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)
   }
 }