@tarojs/plugin-platform-harmony-ets 4.0.0-alpha.0 → 4.0.0-alpha.3

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

@@ -1,38 +1,12 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
+import commonStyleModify from './style'
 import { getNodeThresholds, getNormalAttributes, getFontAttributes, shouldBindEvent, parseStyles } from './utils/helper'
 
 import type { TaroAny, TaroStyleType, TaroTextStyleType, TaroTextAreaElement, TaroEvent } from '@tarojs/runtime'
 
 @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)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .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)
@@ -43,7 +17,7 @@ function textStyle (style: TaroStyleType) {
 @Extend(TextArea)
 function textAttr(attr: TaroTextStyleType) {
   .textAlign(attr.textAlign)
-  .maxLines(attr.maxLines)
+  .maxLines(attr.WebkitLineClamp)
 }
 
 function getPlaceholderColor (node: TaroTextAreaElement): string {
@@ -62,6 +36,11 @@ export default struct TaroTextArea {
     if (this.node) {
       this.value = this.node.value
       this.node._instance = this
+
+      if (!this.node._isInit) {
+        this.node._isInit = true
+        this.node._reset = this.node.value || ''
+      }
     }
   }
 
@@ -71,6 +50,7 @@ export default struct TaroTextArea {
         .key(this.node._nid)
         .maxLength(Number(this.node._attrs?.maxlength) || null)
         .placeholderColor(getPlaceholderColor(this.node))
+        .attributeModifier(commonStyleModify.setNode(this.node))
         .textStyle(getNormalAttributes(this.node))
         .textAttr(getFontAttributes(this.node))
         .onChange((value: string) => {

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
 
@@ -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) {

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

@@ -1,20 +1,58 @@
-import type { TaroAny, TaroElement } from '@tarojs/runtime'
+import type { TaroElement } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
+
+interface IFlexOptions {
+  direction: FlexDirection,
+  justifyContent: FlexAlign,
+  alignItems: VerticalAlign | HorizontalAlign,
+  // Row 和 Column 不支持下面两个属性
+  // wrap: FlexWrap,
+  // alignContent: FlexAlignContent
+}
 
 class FlexManager {
-  static flexOptions (node: TaroElement): FlexOptions {
+  static isFlexNode (node: TaroElement): boolean {
+    return !!node.hmStyle?.display?.includes('flex')
+  }
+  
+  static convertFlexAlignItemsToColumnOrRow (direction: FlexDirection, alignItems: ItemAlign | undefined): 	VerticalAlign | HorizontalAlign {
+    if (direction === FlexDirection.Column) {
+      switch (alignItems) {
+        case ItemAlign.Start:
+          return HorizontalAlign.Start
+        case ItemAlign.End:
+          return HorizontalAlign.End
+        default:
+          return HorizontalAlign.Center
+      }
+    } else {
+      switch (alignItems) {
+        case ItemAlign.Start:
+          return VerticalAlign.Top
+        case ItemAlign.End:
+          return VerticalAlign.Bottom
+        default:
+          return VerticalAlign.Center
+      }
+    }
+  }
+
+  static flexOptions (node: TaroElement): IFlexOptions {
     const hmStyle = node.hmStyle
+    const isFlex = FlexManager.isFlexNode(node)
+    const justifyContent: FlexAlign = isFlex ? (isUndefined(hmStyle.justifyContent) ? FlexAlign.Start : hmStyle.justifyContent) : FlexAlign.Start
 
-    let flexDirection = hmStyle.direction
+    let flexDirection = hmStyle.flexDirection
     if (!flexDirection && flexDirection !== 0) {
       flexDirection = hmStyle.display === 'flex' ? FlexDirection.Row : FlexDirection.Column
     }
 
+    const alignItems = isFlex ? FlexManager.convertFlexAlignItemsToColumnOrRow(flexDirection, hmStyle.alignItems) : HorizontalAlign.Start
+
     return {
+      alignItems,
+      justifyContent,
       direction: flexDirection,
-      justifyContent: hmStyle.justifyContent,
-      alignItems: hmStyle.alignItems,
-      wrap: hmStyle.flexWrap,
-      alignContent: hmStyle.alignContent,
     }
   }
 }

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

@@ -1,6 +1,6 @@
 import { getNormalAttributes, getFontAttributes } from './styles'
 
-import type { Func } from '@tarojs/runtime/dist/runtime.esm'
+import type { TFunc } from '@tarojs/runtime/dist/runtime.esm'
 import type { TaroElement } from '@tarojs/runtime'
 
 export const parseStyles = (styles = ''): Record<string, string> => {
@@ -20,7 +20,7 @@ export const parseStyles = (styles = ''): Record<string, string> => {
   return styleObj
 }
 
-export function shouldBindEvent (cb: Func, node: TaroElement, eventNames: string[], disabled = false) {
+export function shouldBindEvent (cb: TFunc, node: TaroElement | null, eventNames: string[], disabled = false) {
   if (!node || node._attrs?.disabled || disabled) return null
   if (!node.__listeners) {
     return null

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

@@ -1,15 +1,18 @@
+import { isUndefined } from '@tarojs/shared'
 import { ObjectAssign } from '@tarojs/runtime'
 
+import { FlexManager } from './FlexManager'
 import { TEXT_DEFAULT_STYLE } from './constant/style'
 
-import type { StandardProps } from '@tarojs/components/types'
+import type { StandardProps, TextProps } from '@tarojs/components/types'
 import type { TaroAny, TaroElement, TaroStyleType, TaroTextStyleType, HarmonyType, HarmonyStyle } from '@tarojs/runtime'
 
 export function getFontAttributes (node: TaroElement): TaroTextStyleType {
   const hmStyle = node.hmStyle
+  const attrs: TextProps = node._attrs || {}
 
   const attributes: TaroAny = {
-    maxLines: hmStyle.maxLines || Infinity,
+    WebkitLineClamp: attrs.maxLines || hmStyle.WebkitLineClamp || Infinity,
     // 已做处理的属性
     letterSpacing: hmStyle.letterSpacing,
     textAlign: hmStyle.textAlign,
@@ -19,17 +22,25 @@ export function getFontAttributes (node: TaroElement): TaroTextStyleType {
   return attributes
 }
 
+// 模拟 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)
+}
+
 export function getNormalAttributes (node: TaroElement): TaroStyleType {
   const hmStyle = node.hmStyle
 
   const _nid = node._nid
   const _attrs: StandardProps = node._attrs || {}
 
-  const transform: TaroAny = hmStyle.transform
-  const transformRotate: HarmonyType.Transform.Rotate = transform?.rotate?.[0]
-  const transformTranslate: HarmonyType.Transform.Translate = transform?.translate?.[0]
-  const transformScale: HarmonyType.Transform.Scale = transform?.scale?.[0]
-  const transformTransform: HarmonyType.Transform.Transform = transform?.transform?.[0]
+  let linearGradient: HarmonyType.LinearGradient | undefined = undefined
+  // 渐变
+  if (hmStyle.backgroundImage?.colors) {
+    linearGradient = hmStyle.backgroundImage
+  }
 
   let normalAttributes: HarmonyStyle = {
     // Flex相关
@@ -38,28 +49,54 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
     flexShrink: hmStyle.flexShrink,
     alignSelf: hmStyle.alignSelf,
     // 尺寸相关
-    width: hmStyle.width,
+    width: isMaxWidthView(node) && isUndefined(hmStyle.width) ? '100%' : hmStyle.width,
     height: hmStyle.height,
-    constraintSize: hmStyle.constraintSize,
-    margin: hmStyle.margin,
-    padding: hmStyle.padding,
+    minHeight: hmStyle.minHeight,
+    maxHeight: hmStyle.maxHeight,
+    minWidth: hmStyle.minWidth,
+    maxWidth: hmStyle.maxWidth,
+    marginTop: hmStyle.marginTop,
+    marginRight: hmStyle.marginRight,
+    marginBottom: hmStyle.marginBottom,
+    marginLeft: hmStyle.marginLeft,
+    paddingTop: hmStyle.paddingTop,
+    paddingRight: hmStyle.paddingRight,
+    paddingBottom: hmStyle.paddingBottom,
+    paddingLeft: hmStyle.paddingLeft,
     // 边框相关
     borderStyle: hmStyle.borderStyle,
+    borderTopStyle: hmStyle.borderTopStyle,
+    borderRightStyle: hmStyle.borderRightStyle,
+    borderBottomStyle: hmStyle.borderBottomStyle,
+    borderLeftStyle: hmStyle.borderLeftStyle,
     borderWidth: hmStyle.borderWidth,
+    borderTopWidth: hmStyle.borderTopWidth,
+    borderRightWidth: hmStyle.borderRightWidth,
+    borderBottomWidth: hmStyle.borderBottomWidth,
+    borderLeftWidth: hmStyle.borderLeftWidth,
     borderColor: hmStyle.borderColor,
+    borderTopColor: hmStyle.borderTopColor,
+    borderRightColor: hmStyle.borderRightColor,
+    borderBottomColor: hmStyle.borderBottomColor,
+    borderLeftColor: hmStyle.borderLeftColor,
     borderRadius: hmStyle.borderRadius,
+    borderTopLeftRadius: hmStyle.borderTopLeftRadius,
+    borderTopRightRadius: hmStyle.borderTopRightRadius,
+    borderBottomRightRadius: hmStyle.borderBottomRightRadius,
+    borderBottomLeftRadius: hmStyle.borderBottomLeftRadius,
     // 背景相关
     backgroundColor: hmStyle.backgroundColor,
     backgroundImage: hmStyle.backgroundImage,
-    backgroundImageSize: hmStyle.backgroundImageSize,
+    backgroundSize: hmStyle.backgroundSize,
     backgroundRepeat: hmStyle.backgroundRepeat,
-    backgroundImagePosition: hmStyle.backgroundImagePosition,
-    linearGradient: hmStyle.linearGradient,
+    backgroundPosition: hmStyle.backgroundPosition,
+    linearGradient,
     // 变换相关
-    rotate: transformRotate,
-    translate: transformTranslate,
-    scale: transformScale,
-    transform: transformTransform,
+    transform: hmStyle.transform,
+    transformOrigin: {
+      x: hmStyle.transformOrigin?.x || 0,
+      y: hmStyle.transformOrigin?.y || 0
+    },
     // 通用文本相关
     color: hmStyle.color,
     fontSize: hmStyle.fontSize,
@@ -67,11 +104,12 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
     fontWeight: hmStyle.fontWeight,
     fontFamily: hmStyle.fontFamily || TEXT_DEFAULT_STYLE.FONT_FAMILY,
     lineHeight: hmStyle.lineHeight,
-    decoration: hmStyle.decoration,
+    textDecoration: hmStyle.textDecoration,
     // 其他
-    clip: hmStyle.clip,
+    overflow: hmStyle.overflow,
     id: _attrs.id || _nid,
     opacity: hmStyle.opacity,
+    zIndex: hmStyle.zIndex
     // focus: _attrs.focus || false,
   }
 

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

@@ -1,9 +1,10 @@
 import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
+import commonStyleModify from './style'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroStyleType, TaroAny, TaroVideoElement, TaroEvent } from '@tarojs/runtime'
+import type { TaroAny, TaroVideoElement, TaroEvent } from '@tarojs/runtime'
 
 export interface VideoOptions {
   src?: string | Resource
@@ -21,37 +22,6 @@ export interface VideoUpdateEvent {
   time: number
 }
 
-@Extend(Video)
-function attrs (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)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .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(Video)
 function props(attr: VideoAttrs) {
   .muted(attr.muted)
@@ -111,7 +81,7 @@ function handleUpdate (node: TaroVideoElement, e: VideoUpdateEvent) {
 @Builder
 export default function TaroVideo (node: TaroVideoElement) {
   Video(getVideoData(node))
-    .attrs(getNormalAttributes(node))
+    .attributeModifier(commonStyleModify.setNode(node))
     .props(getVideoProps(node))
     .aspectRatio(4 / 3)
     .onStart(shouldBindEvent(() => { emitEvent(node, 'play') }, node, ['play']))

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

@@ -1,96 +1,54 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
+import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { FlexManager } from './utils/FlexManager'
 import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
 
-import type { TaroViewElement, TaroAny, TaroStyleType } from '@tarojs/runtime'
+import type { TaroViewElement, TaroStyleType, TaroAny } from '@tarojs/runtime'
 
-@Extend(Flex)
-function flexAttrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .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(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) {
-  .id(style.id)
-  .key(style.id)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .backgroundImagePosition(style.backgroundImagePosition)
-  .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)
-}
-
-function isFlexNode (node: TaroViewElement) {
-  return !!node.hmStyle?.display?.includes('flex')
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight || style.height,
+    maxHeight: style.maxHeight
+  })
 }
 
 @Builder
 export default function TaroView (node: TaroViewElement) {
-  if (isFlexNode(node)) {
-    Flex(FlexManager.flexOptions(node)) {
+  if (FlexManager.isFlexNode(node) && FlexManager.flexOptions(node).direction !== FlexDirection.Column) {
+    Row() {
       createLazyChildren(node)
     }
-    .flexAttrs(getNormalAttributes(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)
     }
+    .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()))
@@ -98,7 +56,7 @@ export default function TaroView (node: TaroViewElement) {
       node._nodeInfo.areaInfo = res[1]
     }))
     .onVisibleAreaChange(getNodeThresholds(node) || [0.0, 1.0], getComponentEventCallback(node, VISIBLE_CHANGE_EVENT_NAME))
-    .alignItems(HorizontalAlign.Start)
-    .justifyContent(node.hmStyle.justifyContent)
+    .alignItems(FlexManager.flexOptions(node).alignItems as HorizontalAlign)
+    .justifyContent(FlexManager.flexOptions(node).justifyContent)
   }
 }

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

@@ -0,0 +1,50 @@
+import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
+
+import commonStyleModify from './style'
+import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
+
+import type { TaroAny, TaroWebViewElement, TaroStyleType, TaroEvent } from '@tarojs/runtime'
+
+interface IPageLoad {
+  url: string
+}
+
+interface IError {
+  request: WebResourceRequest
+  error: WebResourceError
+}
+
+@Builder
+export default function TaroWebView (node: TaroWebViewElement) {
+  Web({ src: node._attrs.src, controller: node.controller })
+    .attributeModifier(commonStyleModify.setNode(node))
+    .onPageEnd((e: IPageLoad) => {
+      // 1. 创建消息端口
+      node.ports = node.controller.createWebMessagePorts(true)
+      // 2. 发送端口1到HTML5
+      node.controller.postMessage('init_web_messageport', [node.ports[1]], '*');
+      // 3. 保存端口0到本地
+      node.nativePort = node.ports[0]
+      // 4. 设置回调函数
+      node.nativePort.onMessageEventExt((result) => {
+        const message = node.handleMessageFromWeb(result)
+        const messageEvent: TaroEvent = createTaroEvent('message', { detail: { data: message } }, node)
+
+        eventHandler(messageEvent, 'message', node)
+      })
+
+      const onLoadEvent: TaroEvent = createTaroEvent('load', { detail: { src: node._attrs.src } }, node)
+
+      eventHandler(onLoadEvent, 'load', node)
+    })
+    .onErrorReceive(shouldBindEvent((e: IError) => {
+      const event: TaroEvent = createTaroEvent('error', { detail: { url: node._attrs.src, fullUrl: e.request.getRequestUrl() } }, node)
+      
+      eventHandler(event, 'error', node)
+    }, node, ['error']))
+    .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))
+}