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

package/dist/apis/utils/handler.ts

@@ -11,7 +11,7 @@ interface IMethodParam<T = Partial<ICallbackResult>> {
   name: string
   success?: TCallback<T & ICallbackResult>
   fail?: TCallback
-  complete?: TCallback
+  complete?: TCallback<T | ICallbackResult>
 }
 interface IMockPromise {
   resolve?: typeof Promise.resolve | TFunc
@@ -23,7 +23,7 @@ export class MethodHandler<T = Partial<ICallbackResult>> {
 
   protected __success?: TCallback<T>
   protected __fail?: TCallback
-  protected __complete?: TCallback
+  protected __complete?: TCallback<T | ICallbackResult>
 
   protected isHandlerError = false
 
@@ -41,7 +41,7 @@ export class MethodHandler<T = Partial<ICallbackResult>> {
       res.errMsg = `${this.methodName}:ok`
     }
     isFunction(this.__success) && this.__success(res as T)
-    isFunction(this.__complete) && this.__complete(res)
+    isFunction(this.__complete) && this.__complete(res as T)
 
     const { resolve = Promise.resolve.bind(Promise) } = promise
     return resolve(res as Required<T & U & ICallbackResult>)
@@ -54,7 +54,7 @@ export class MethodHandler<T = Partial<ICallbackResult>> {
       res.errMsg = `${this.methodName}:fail ${res.errMsg}`
     }
     isFunction(this.__fail) && this.__fail(res)
-    isFunction(this.__complete) && this.__complete(res)
+    isFunction(this.__complete) && this.__complete(res as ICallbackResult)
 
     const {
       resolve = Promise.resolve.bind(Promise),

package/dist/apis/worker/index.ts

@@ -0,0 +1,4 @@
+import { temporarilyNotSupport } from '../utils'
+
+// Worker
+export const createWorker = /* @__PURE__ */ temporarilyNotSupport('createWorker')

package/dist/apis/wxml/IntersectionObserver.ts

@@ -1,9 +1,9 @@
-import Taro from '@tarojs/api'
-// @ts-ignore
 import { Current, disconnectEvent, findChildNodeWithDFS, getPageScrollerOrNode, setNodeEventCallbackAndTriggerComponentUpdate, TaroElement, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
 import { temporarilyNotSupport } from '../utils'
 
+import type Taro from '@tarojs/taro/types'
+
 export class IntersectionObserver implements Taro.IntersectionObserver {
   // 自定义组件实例
   private _component: any
@@ -29,17 +29,15 @@ export class IntersectionObserver implements Taro.IntersectionObserver {
       if (this._observerNodes instanceof Array) {
         this._observerNodes.forEach((n: TaroElement & any) => {
           disconnectEvent(n, VISIBLE_CHANGE_EVENT_NAME)
-          if (n._instance) {
-            // @ts-ignore
-            n._instance?.nodeInfoMap?.[n._nid]?.thresholds = null
-          }
+          // @ts-ignore
+          n._nodeInfo?.thresholds = null
         })
       } else {
         disconnectEvent(this._observerNodes, VISIBLE_CHANGE_EVENT_NAME)
         // @ts-ignore
-        if (this._observerNodes._instance) {
+        if (this._observerNodes._nodeInfo) {
           // @ts-ignore
-          this._observerNodes._instance?.nodeInfoMap?.[this._observerNodes._nid]?.thresholds = null
+          this._observerNodes._nodeInfo?.thresholds = null
         }
       }
     }
@@ -50,29 +48,22 @@ export class IntersectionObserver implements Taro.IntersectionObserver {
     const node = findChildNodeWithDFS(this._component, targetSelector, observeAll)
     this._observerNodes = node
 
-
     if (node) {
       if (node instanceof Array) {
         node.forEach(n => {
           // @ts-ignore
-          n.awaitAppear.then(() => {
-            // @ts-ignore
-            n._instance?.nodeInfoMap?.[n._nid]?.thresholds = thresholds
+          n._nodeInfo?.thresholds = thresholds
 
-            setNodeEventCallbackAndTriggerComponentUpdate(n, VISIBLE_CHANGE_EVENT_NAME, (isVisible: boolean, currentRatio: number) => {
-              callback(this.handleResult(isVisible, currentRatio))
-            })
+          setNodeEventCallbackAndTriggerComponentUpdate(n, VISIBLE_CHANGE_EVENT_NAME, (isVisible: boolean, currentRatio: number) => {
+            callback(this.handleResult(isVisible, currentRatio))
           })
         })
       } else {
         // @ts-ignore
-        node.awaitAppear.then(() => {
-          // @ts-ignore
-          node._instance?.nodeInfoMap?.[node._nid]?.thresholds = thresholds
+        node._nodeInfo?.thresholds = thresholds
 
-          setNodeEventCallbackAndTriggerComponentUpdate(node, VISIBLE_CHANGE_EVENT_NAME, (isVisible: boolean, currentRatio: number) => {
-            callback(this.handleResult(isVisible, currentRatio))
-          })
+        setNodeEventCallbackAndTriggerComponentUpdate(node, VISIBLE_CHANGE_EVENT_NAME, (isVisible: boolean, currentRatio: number) => {
+          callback(this.handleResult(isVisible, currentRatio))
         })
       }
     }

package/dist/apis/wxml/index.ts

@@ -1,8 +1,9 @@
-import Taro from '@tarojs/taro'
-
+import { temporarilyNotSupport } from '../utils'
 import { IntersectionObserver } from './IntersectionObserver'
 import { SelectorQuery } from './selectorQuery'
 
+import type Taro from '@tarojs/taro/types'
+
 export const createSelectorQuery = () => {
   return new SelectorQuery()
 }
@@ -10,3 +11,5 @@ export const createSelectorQuery = () => {
 export const createIntersectionObserver: typeof Taro.createIntersectionObserver = (component, options) => {
   return new IntersectionObserver(component, options)
 }
+
+export const createMediaQueryObserver = /* @__PURE__ */ temporarilyNotSupport('createMediaQueryObserver')

package/dist/apis/wxml/nodesRef.ts

@@ -1,7 +1,7 @@
-import Taro from '@tarojs/api'
-
 import { SelectorQuery } from './selectorQuery'
 
+import type Taro from '@tarojs/taro/types'
+
 export class NodesRef implements Taro.NodesRef {
   _component?: any
   _selector: string

package/dist/apis/wxml/selectorQuery.ts

@@ -2,7 +2,7 @@ import { AREA_CHANGE_EVENT_NAME, Current, getPageScrollerOrNode, setNodeEventCal
 
 import { NodesRef } from './nodesRef'
 
-import type Taro from '@tarojs/api'
+import type Taro from '@tarojs/taro/types'
 
 interface ISelectorQueryQueue {
   component: any
@@ -135,8 +135,7 @@ function filter (fields, dom) {
   // if (dataset) res.dataset = Object.assign({}, dom.dataset)
 
   if (rect || size) {
-    const id = dom?._nid
-    const { areaInfo } = dom?._instance?.nodeInfoMap?.[id] || {}
+    const { areaInfo } = dom?._nodeInfo || {}
 
     if (areaInfo) {
       if (rect) {
@@ -153,7 +152,7 @@ function filter (fields, dom) {
     }
   }
   if (scrollOffset) {
-    const scroller = dom._instance.scroller
+    const scroller = dom.scroller
 
     if (scroller) {
       const { xOffset, yOffset } = scroller.currentOffset()

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

@@ -1,58 +1,68 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo } from '@tarojs/runtime'
-import { createNode } from './render'
-import TaroComponentWrapper from './base'
-import { createTaroEvent } from './utils/events'
+import { eventHandler, createTaroEvent, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+import { createLazyChildren } from './render'
 import { BUTTON_THEME_COLOR } from './utils/constant/style'
-import { AttributeManager } from './utils/AttributeManager'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
+import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroAny, TaroEvent } from '@tarojs/runtime'
-import type { TaroButtonElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroEvent, TaroButtonElement, TaroStyleType } from '@tarojs/runtime'
 
 @Extend(Button)
 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)
+  .padding({
+    top: style.padding?.top,
+    left: style.padding?.left || 10,
+    right: style.padding?.right || 10,
+    bottom: style.padding?.bottom,
+  })
+  .margin(style.margin)
   .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(Button)
 function themeStyles(style: TaroStyleType) {
-  .border({
-    width: 1,
-    color: style.backgroundColor
-  })
   .fontColor(style.color)
   .opacity(style.opacity)
+  .borderColor(style.borderColor)
+  .borderWidth(style.borderWidth)
+  .borderRadius(style.borderRadius)
   .backgroundColor(style.backgroundColor)
 }
 
+export function getButtonColor (node: TaroButtonElement, color: ResourceColor) {
+  const _attrs = node._attrs
+  const isDisabled: boolean = _attrs.disabled || false
+  const isPlain: boolean = _attrs.plain || false
+  const type: string = _attrs.type || 'default'
+
+  if (isDisabled && isPlain) {
+    return Color.Black
+  }
+
+  if (isPlain) {
+    return BUTTON_THEME_COLOR.get(type).plainText
+  }
+
+  return color
+}
+
 function getThemeAttributes (node: TaroButtonElement): TaroStyleType {
   const hmStyle = node.hmStyle
   const _attrs = node._attrs
@@ -61,59 +71,75 @@ function getThemeAttributes (node: TaroButtonElement): TaroStyleType {
   const type: string = _attrs.type || 'default'
 
   return {
-    opacity: isDisabled ? 0.4 : 1,
+    borderColor: hmStyle.borderColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background),
+    borderWidth: hmStyle.borderWidth || 1,
+    borderRadius: hmStyle.borderRadius || convertNumber2VP(10),
+    opacity: isDisabled ? 0.4 : hmStyle.opacity,
     backgroundColor: isPlain ? Color.Transparent : (hmStyle.backgroundColor || BUTTON_THEME_COLOR.get(type).background),
-    color: hmStyle.color || BUTTON_THEME_COLOR.get(type).text,
+    color: hmStyle.color || getButtonColor(node, BUTTON_THEME_COLOR.get(type).text),
   }
 }
 
-@Component
-export default struct TaroButton {
-  nodeInfoMap: TaroAny = {}
+function getButtonWidth (node: TaroButtonElement) {
+  const isMini = node._attrs.size === 'mini'
+
+  return isMini ? convertNumber2VP(120) : '100%'
+}
 
-  @ObjectLink node: TaroButtonElement
+function getButtonHeight (node: TaroButtonElement) {
+  const isMini = node._attrs.size === 'mini'
 
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  return isMini ? convertNumber2VP(60) : convertNumber2VP(92)
+}
+
+function getButtonMinWidth (node: TaroButtonElement): string | number | undefined {
+  if (node.hmStyle.width) {
+    return undefined
   }
 
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
+  return getButtonWidth(node)
+}
+
+function getButtonMinHeight (node: TaroButtonElement): string | number | undefined {
+  if (node.hmStyle.height) {
+    return undefined
   }
 
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Button({ stateEffect: !this.node._attrs.disabled }) {
-        Row() {
-          if (this.node._attrs.loading) {
-            LoadingProgress()
-            .width(20).height(20)
-            .color(getThemeAttributes(this.node).color)
-          }
-          ForEach(this.node.childNodes, (item: TaroElement) => {
-            createNode(item)
-          }, (item: TaroElement) => item._nid)
-        }
+  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)
       }
-      .attrs(getNormalAttributes(this.node))
-      .themeStyles(getThemeAttributes(this.node))
-      .onClick((e: ClickEvent) => {
-        if (['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 => {
-        const eventResult: TaroAny = res.eventResult
-        this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-      }))
-      .visibleChangeEvent()
+      createLazyChildren(node)
     }
   }
+  .themeStyles(getThemeAttributes(node))
+  .attrs(getNormalAttributes(node))
+  .constraintSize({
+    minWidth: node.hmStyle?.constraintSize?.minWidth || getButtonMinWidth(node),
+    minHeight: node.hmStyle?.constraintSize?.minHeight || getButtonMinHeight(node),
+    maxWidth: node.hmStyle?.constraintSize?.maxWidth,
+    maxHeight: node.hmStyle?.constraintSize?.maxHeight,
+  })
+  .type(ButtonType.Normal)
+  .onClick((e: ClickEvent) => {
+    if (['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

@@ -1,13 +1,10 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny, TaroEvent } from '@tarojs/runtime'
+import { createTaroEvent, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { createNode } from './render'
-import { createTaroEvent } from './utils/events'
+import { createLazyChildren } from './render'
 import { FlexManager } from './utils/FlexManager'
 import { shouldBindEvent, getNormalAttributes, getNodeThresholds } from './utils/helper'
 
-import type { TaroCheckboxElement, TaroCheckboxGroupElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroStyleType, TaroAny, TaroEvent, TaroCheckboxElement, TaroCheckboxGroupElement } from '@tarojs/runtime'
 
 interface CheckboxOptions {
   name?: string
@@ -33,6 +30,7 @@ function checkboxStyle (style: TaroStyleType) {
   .backgroundColor(style.backgroundColor)
   .backgroundImage(style.backgroundImage, style.backgroundRepeat)
   .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -60,77 +58,49 @@ function getAttributes (node: TaroCheckboxElement): CheckboxAttrs {
 }
 
 function getOptions (node: TaroCheckboxElement): CheckboxOptions {
-  const value: string = node._attrs.value
   return {
-    name: value || node.textContent
+    name: node.value as string || node.textContent
   }
 }
 
-
-@Component
-export struct TaroCheckbox {
-  nodeInfoMap: TaroAny = {}
-
-  @ObjectLink node: TaroCheckboxElement
-
-  @State checked: boolean = false
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
-
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-
-    this.checked = !!this.node._attrs.checked
-  }
-
-  @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() {
-    TaroComponentWrapper({ node: this.node }) {
-      Stack() {
-        Row() {
-          Checkbox(getOptions(this.node))
-            .defaultEvent()
-            .checkboxStyle(getNormalAttributes(this.node))
-            .checkboxAttr(getAttributes(this.node))
-            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
-            .select(this.checked)
-            .onChange((value: boolean) => {
-              if (!!this.node._attrs.disabled) {
-                // FIXME 找下文档是否有强制刷新方法
-                this.checked = !this.checked
-                this.checked = !this.checked
-              } else {
-                this.checked = value
-                if (this.checked) {
-                  const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node._attrs.value } }, this.node)
-                  eventHandler(event, 'change', this.node)
-                }
-              }
-            })
-            .visibleChangeEvent()
-          Text(this.node.textContent)
-            .textAlign(TextAlign.Center)
-            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
-        }
-        .onClick(() => {
-          this.checked = !this.checked
+@Builder
+export function TaroCheckbox(node: TaroCheckboxElement) {
+  Stack() {
+    Row() {
+      Checkbox(getOptions(node))
+        .checkboxStyle(getNormalAttributes(node))
+        .checkboxAttr(getAttributes(node))
+        .opacity(!!node._attrs.disabled ? 0.4 : 1)
+        .select(node.checked)
+        .onChange((value: boolean) => {
+          if (!!node?._attrs.disabled) {
+            node.updateComponent()
+          } else {
+            node.updateCheckedValue(value)
+
+            if (value) {
+              const event: TaroEvent = createTaroEvent('change', { detail: { value: node?._attrs.value } }, 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))
+      Text(node.textContent)
+        .textAlign(TextAlign.Center)
+        .opacity(!!node._attrs.disabled ? 0.4 : 1)
     }
+    .onClick(() => {
+      if (!node?._attrs.disabled) {
+        node.checked = !node.checked
+      }
+    })
   }
 }
 
-
 @Extend(Flex)
 function checkboxGroupAttrs (style: TaroStyleType) {
   .id(style.id)
@@ -147,6 +117,7 @@ function checkboxGroupAttrs (style: TaroStyleType) {
   .backgroundColor(style.backgroundColor)
   .backgroundImage(style.backgroundImage, style.backgroundRepeat)
   .backgroundImageSize(style.backgroundImageSize)
+  .backgroundImagePosition(style.backgroundImagePosition)
   .rotate(style.rotate)
   .scale(style.scale)
   .translate(style.translate)
@@ -165,51 +136,35 @@ interface ChangeEventDetail { value: string[] }
 
 @Component
 export struct TaroCheckboxGroup {
-  nodeInfoMap: TaroAny = {}
-
-  @ObjectLink node: TaroCheckboxGroupElement
+  node: TaroCheckboxGroupElement | null = null
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 
   aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-
-    // 阻止事件冒泡传递上去
-    this.node.addEventListener('change', (e: TaroEvent<ChangeEventDetail>) => {
-      e.stopPropagation()
-      e.detail.value = this.getValues()
-    })
-  }
-
-  // Element使用的获取值方法
-  getValues () {
-    const childList = this.node.getElementsByTagName<TaroCheckboxElement>('CHECKBOX')
-    const result: string[] = []
-    childList.forEach(element => {
-      if (element._instance.checked) {
-        result.push(element._attrs.value)
-      }
-    })
-    return result
+    if (this.node) {
+      // 阻止事件冒泡传递上去
+      this.node.addEventListener('change', (e: TaroEvent<ChangeEventDetail>) => {
+        e.stopPropagation()
+        e.detail.value = (this.node as TaroCheckboxGroupElement).value
+      })
+    }
   }
 
   @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]
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      if (this.node) {
+        this.node._nodeInfo.areaInfo = res[1]
+      }
     }))
   }
 
   build() {
-    TaroComponentWrapper({ node: this.node }) {
+    if (this.node) {
       Flex(FlexManager.flexOptions(this.node)) {
-        ForEach(this.node.childNodes, (item: TaroElement) => {
-          createNode(item)
-        }, (item: TaroElement) => item._nid)
+        createLazyChildren(this.node)
       }
       .checkboxGroupAttrs(getNormalAttributes(this.node))
       .defaultEvent()