@tarojs/helper 3.8.0-canary.0 → 4.0.0-beta.0

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_component_not_in_config.js

@@ -0,0 +1,91 @@
+const TARO_TEMPLATES_f0t0 = `import { createNode } from '../render'
+import { FlexManager } from '../utils/FlexManager'
+import { TOUCH_EVENT_MAP } from '../utils/constant/event'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '../utils/helper'
+import { TaroIgnoreElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../../runtime'
+import { DynamicCenter } from '../utils/DynamicCenter'
+
+import type { TaroViewElement } from '../element'
+import type { TaroElement, TaroAny, TaroStyleType, TaroTextStyleType } from '../../runtime'
+
+@Extend(Flex)
+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)
+}
+@Component
+export default struct TARO_TEMPLATES_f0t0 {
+  nodeInfoMap: TaroAny = {}
+  dynamicCenter: DynamicCenter = new DynamicCenter()
+  @ObjectLink node: TaroViewElement
+
+  aboutToAppear () {
+    this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this)
+  }
+
+  @State node0: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Flex(FlexManager.flexOptions(this.node0 as TaroElement)) {
+      Flex(FlexManager.flexOptions(this.node0.childNodes[0] as TaroElement)) {
+        createNode(this.node0.childNodes[0].childNodes[0] as TaroElement)
+      }
+      .attrs(getNormalAttributes(this.node0.childNodes[0] as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[0] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[0] as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node0.childNodes[0] as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node0.childNodes[0]._nid].areaInfo = eventResult[1]
+      }))
+      Flex(FlexManager.flexOptions(this.node0.childNodes[1] as TaroElement)) {
+        createNode(this.node0.childNodes[1].childNodes[0] as TaroElement)
+      }
+      .attrs(getNormalAttributes(this.node0.childNodes[1] as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node0.childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node0.childNodes[1]._nid].areaInfo = eventResult[1]
+      }))
+    }
+    .attrs(getNormalAttributes(this.node0 as TaroElement))
+    .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node0._nid].areaInfo = eventResult[1]
+    }))
+  }
+}
+`;
+function Index() {
+    return <View compileMode="f0t0" _dynamicID="node0">
+
+        <View><Slider/></View>
+
+        <View><Test1/></View>
+
+      </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_multi_compile_mode.js

@@ -0,0 +1,209 @@
+const TARO_TEMPLATES_f0t0 = `import { createNode } from '../render'
+import { FlexManager } from '../utils/FlexManager'
+import { TOUCH_EVENT_MAP } from '../utils/constant/event'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '../utils/helper'
+import { TaroIgnoreElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../../runtime'
+import { DynamicCenter } from '../utils/DynamicCenter'
+
+import type { TaroViewElement } from '../element'
+import type { TaroElement, TaroAny, TaroStyleType, TaroTextStyleType } from '../../runtime'
+
+@Extend(Image)
+function attrsImage (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)
+}
+
+function getImageMode (mode: string): ImageFit {
+  switch (mode) {
+    case 'aspectFit': return ImageFit.Contain
+    case 'aspectFill': return ImageFit.Cover
+    case 'scaleToFill': return ImageFit.Fill
+    case 'widthFix': return ImageFit.Auto
+    case 'heightFix': return ImageFit.Auto
+    default: return ImageFit.Contain
+  }
+}
+@Component
+export default struct TARO_TEMPLATES_f0t0 {
+  nodeInfoMap: TaroAny = {}
+  dynamicCenter: DynamicCenter = new DynamicCenter()
+  @ObjectLink node: TaroViewElement
+
+  aboutToAppear () {
+    this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this)
+  }
+
+  @State node0: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Image((this.node0 as TaroElement).getAttribute('src'))
+    .objectFit(getImageMode((this.node0 as TaroElement).getAttribute('mode')))
+    .attrsImage(getNormalAttributes(this.node0 as TaroElement))
+    .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node0._nid].areaInfo = eventResult[1]
+    }))
+  }
+}
+`;
+const TARO_TEMPLATES_f0t1 = `import { createNode } from '../render'
+import { FlexManager } from '../utils/FlexManager'
+import { TOUCH_EVENT_MAP } from '../utils/constant/event'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '../utils/helper'
+import { TaroIgnoreElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../../runtime'
+import { DynamicCenter } from '../utils/DynamicCenter'
+
+import type { TaroViewElement } from '../element'
+import type { TaroElement, TaroAny, TaroStyleType, TaroTextStyleType } from '../../runtime'
+
+@Extend(Flex)
+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(Text)
+function textStyle (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .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)
+  .fontStyle(style.fontStyle)
+  .fontFamily(style.fontFamily)
+  .lineHeight(style.lineHeight)
+  .decoration({
+    type: style.decoration,
+    color: style.color
+  })
+}
+
+@Extend(Text)
+function textAttr(attr: TaroTextStyleType) {
+  .textAlign(attr.textAlign)
+  .textOverflow(attr.textOverflow)
+  .maxLines(attr.maxLines)
+  .letterSpacing(attr.letterSpacing)
+}
+@Component
+export default struct TARO_TEMPLATES_f0t1 {
+  nodeInfoMap: TaroAny = {}
+  dynamicCenter: DynamicCenter = new DynamicCenter()
+  @ObjectLink node: TaroViewElement
+
+  aboutToAppear () {
+    this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this)
+  }
+
+  @State node0: TaroElement = new TaroIgnoreElement()
+  @State node1: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Flex(FlexManager.flexOptions(this.node0 as TaroElement)) {
+      Text(this.node1.textContent)
+      .textStyle(getNormalAttributes(this.node1 as TaroElement))
+      .textAttr(getFontAttributes(this.node1 as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node1._nid].areaInfo = eventResult[1]
+      }))
+    }
+    .attrs(getNormalAttributes(this.node0 as TaroElement))
+    .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node0._nid].areaInfo = eventResult[1]
+    }))
+  }
+}
+`;
+function Index() {
+    return <View>
+
+        <Image src={mySrc} compileMode="f0t0" _dynamicID="node0"/>
+
+        <View compileMode="f0t1" _dynamicID="node0">
+
+          <Text _dynamicID="node1">{myText}</Text>
+
+        </View>
+
+      </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/entry.rs/should_support_single_compile_mode.js

@@ -0,0 +1,66 @@
+const TARO_TEMPLATES_f0t0 = `import { createNode } from '../render'
+import { FlexManager } from '../utils/FlexManager'
+import { TOUCH_EVENT_MAP } from '../utils/constant/event'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '../utils/helper'
+import { TaroIgnoreElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../../runtime'
+import { DynamicCenter } from '../utils/DynamicCenter'
+
+import type { TaroViewElement } from '../element'
+import type { TaroElement, TaroAny, TaroStyleType, TaroTextStyleType } from '../../runtime'
+
+@Extend(Flex)
+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)
+}
+@Component
+export default struct TARO_TEMPLATES_f0t0 {
+  nodeInfoMap: TaroAny = {}
+  dynamicCenter: DynamicCenter = new DynamicCenter()
+  @ObjectLink node: TaroViewElement
+
+  aboutToAppear () {
+    this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this)
+  }
+
+  @State node0: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Flex(FlexManager.flexOptions(this.node0 as TaroElement)) {}
+    .attrs(getNormalAttributes(this.node0 as TaroElement))
+    .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node0._nid].areaInfo = eventResult[1]
+    }))
+  }
+}
+`;
+function Index() {
+    return <View compileMode="f0t0" _dynamicID="node0"></View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt.js

@@ -0,0 +1,76 @@
+const TARO_TEMPLATES_f0t0 = `import { createNode } from '../render'
+import { FlexManager } from '../utils/FlexManager'
+import { TOUCH_EVENT_MAP } from '../utils/constant/event'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '../utils/helper'
+import { TaroIgnoreElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../../runtime'
+import { DynamicCenter } from '../utils/DynamicCenter'
+
+import type { TaroViewElement } from '../element'
+import type { TaroElement, TaroAny, TaroStyleType, TaroTextStyleType } from '../../runtime'
+
+@Extend(Flex)
+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)
+}
+@Component
+export default struct TARO_TEMPLATES_f0t0 {
+  nodeInfoMap: TaroAny = {}
+  dynamicCenter: DynamicCenter = new DynamicCenter()
+  @ObjectLink node: TaroViewElement
+
+  aboutToAppear () {
+    this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this)
+  }
+
+  @State node0: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Flex(FlexManager.flexOptions(this.node0 as TaroElement)) {
+      ForEach(this.node0.childNodes, (item: TaroElement) => {
+        createNode(item)
+      }, (item: TaroElement) => item._nid)
+    }
+    .attrs(getNormalAttributes(this.node0 as TaroElement))
+    .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node0._nid].areaInfo = eventResult[1]
+    }))
+  }
+}
+`;
+function Index() {
+    return <View compileMode="f0t0" _dynamicID="node0">
+
+            {list.map((item)=>{
+        return <View>{item}</View>;
+    })}
+
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_arrow_function_with_blockstmt_and_set_parent_dynamic_id.js

@@ -0,0 +1,89 @@
+const TARO_TEMPLATES_f0t0 = `import { createNode } from '../render'
+import { FlexManager } from '../utils/FlexManager'
+import { TOUCH_EVENT_MAP } from '../utils/constant/event'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '../utils/helper'
+import { TaroIgnoreElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../../runtime'
+import { DynamicCenter } from '../utils/DynamicCenter'
+
+import type { TaroViewElement } from '../element'
+import type { TaroElement, TaroAny, TaroStyleType, TaroTextStyleType } from '../../runtime'
+
+@Extend(Flex)
+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)
+}
+@Component
+export default struct TARO_TEMPLATES_f0t0 {
+  nodeInfoMap: TaroAny = {}
+  dynamicCenter: DynamicCenter = new DynamicCenter()
+  @ObjectLink node: TaroViewElement
+
+  aboutToAppear () {
+    this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this)
+  }
+
+  @State node0: TaroElement = new TaroIgnoreElement()
+  @State node1: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Flex(FlexManager.flexOptions(this.node0 as TaroElement)) {
+      Flex(FlexManager.flexOptions(this.node1 as TaroElement)) {
+        ForEach(this.node1.childNodes, (item: TaroElement) => {
+          createNode(item)
+        }, (item: TaroElement) => item._nid)
+      }
+      .attrs(getNormalAttributes(this.node1 as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node1 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node1 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node1._nid].areaInfo = eventResult[1]
+      }))
+    }
+    .attrs(getNormalAttributes(this.node0 as TaroElement))
+    .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node0._nid].areaInfo = eventResult[1]
+    }))
+  }
+}
+`;
+function Index() {
+    return <View compileMode="f0t0" _dynamicID="node0">
+
+          <View _dynamicID="node1">
+
+            {list.map((item)=>{
+        return <View>{item}</View>;
+    })}
+
+          </View>
+
+        </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/looping.rs/should_loop_with_function_expr.js

@@ -0,0 +1,86 @@
+const TARO_TEMPLATES_f0t0 = `import { createNode } from '../render'
+import { FlexManager } from '../utils/FlexManager'
+import { TOUCH_EVENT_MAP } from '../utils/constant/event'
+import { getNodeThresholds, getNormalAttributes, getFontAttributes } from '../utils/helper'
+import { TaroIgnoreElement, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '../../runtime'
+import { DynamicCenter } from '../utils/DynamicCenter'
+
+import type { TaroViewElement } from '../element'
+import type { TaroElement, TaroAny, TaroStyleType, TaroTextStyleType } from '../../runtime'
+
+@Extend(Flex)
+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)
+}
+@Component
+export default struct TARO_TEMPLATES_f0t0 {
+  nodeInfoMap: TaroAny = {}
+  dynamicCenter: DynamicCenter = new DynamicCenter()
+  @ObjectLink node: TaroViewElement
+
+  aboutToAppear () {
+    this.dynamicCenter.bindComponentToNodeWithDFS(this.node, this)
+  }
+
+  @State node0: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Flex(FlexManager.flexOptions(this.node0 as TaroElement)) {
+      ForEach(this.node0.childNodes, (item: TaroElement) => {
+        createNode(item)
+      }, (item: TaroElement) => item._nid)
+    }
+    .attrs(getNormalAttributes(this.node0 as TaroElement))
+    .onVisibleAreaChange(getNodeThresholds(this.node0 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+    .onAreaChange(getComponentEventCallback(this.node0 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node0._nid].areaInfo = eventResult[1]
+    }))
+  }
+}
+`;
+function Index() {
+    return <View compileMode="f0t0" _dynamicID="node0">
+
+            {list.map(function(item, index) {
+        return <View hoverClass={myClass}>
+
+                  <Text>index:</Text>
+
+                  <Text>{index}</Text>
+
+                  <Text>item:</Text>
+
+                  <Text>{item}</Text>
+
+                </View>;
+    })}
+
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/looping.rs/should_loop_with_arrow_function_with_blockstmt.js

@@ -0,0 +1,8 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view wx:for="{{i.cn}}" wx:key="sid">{{item.cn[0].v}}</view></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+            {list.map(item => {
+              return <View>{item}</View>
+            })}
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/looping.rs/should_loop_with_arrow_function_with_expr.js

@@ -0,0 +1,6 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view wx:for="{{i.cn}}" wx:key="sid">{{item.cn[0].v}}</view></view></template>';
+function Index () {
+    return <View compileMode="f0t0">
+            {list.map(item => <View>{item}</View>)}
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/looping.rs/should_loop_with_function_expr.js

@@ -0,0 +1,20 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view hover-class="{{xs.b(item.p1,\'none\')}}" wx:for="{{i.cn}}" wx:key="sid"><text>index:</text><text>{{item.cn[0].cn[0].v}}</text><text>item:</text><text>{{item.cn[1].cn[0].v}}</text></view></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+
+            {list.map(function(item, index) {
+        return <View hoverClass={myClass}>
+
+                  
+
+                  <Text>{index}</Text>
+
+                  
+
+                  <Text>{item}</Text>
+
+                </View>;
+    })}
+
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/looping.rs/should_support_nested_loop.js

@@ -0,0 +1,15 @@
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view hover-class="{{xs.b(item.p1,\'none\')}}" wx:for="{{i.cn}}" wx:key="sid"><view>title: {{item.cn[0].cn[0].v}}</view><view><text selectable="{{xs.b(item.p1,!1)}}" wx:for="{{item.cn[1].cn}}" wx:key="sid">content: {{item.cn[0].v}}</text></view></view></view></template>';
+function Index() {
+    return <View compileMode="f0t0">
+            {list.map(function(item, index) {
+              return <View hoverClass={myClass} key={index}>
+                  <View>{item}</View>
+                  <View>
+                    {sublist.map(function(c) {
+                      return <Text selectable={isSelectable}>{c}</Text>
+                    })}
+                  </View>
+                </View>
+            })}
+          </View>;
+}