@tarojs/helper 3.7.0-alpha.26 → 3.7.0-alpha.27

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_handle_events.js

@@ -0,0 +1,181 @@
+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)
+  .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(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)
+  .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()
+  @State node1: TaroElement = new TaroIgnoreElement()
+  @State node2: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Flex(FlexManager.flexOptions(this.node0 as TaroElement)) {
+      Flex(FlexManager.flexOptions(this.node0.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]
+      }))
+      .onClick(e => eventHandler(e, 'click', this.node0.childNodes[0] as TaroElement))
+      Flex(FlexManager.flexOptions(this.node0.childNodes[1] 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]
+      }))
+      .onClick(e => eventHandler(e, 'click', this.node0.childNodes[1] as TaroElement))
+      Flex(FlexManager.flexOptions(this.node1 as TaroElement)) {}
+      .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]
+      }))
+      .onClick(e => eventHandler(e, 'click', this.node1 as TaroElement))
+      Flex(FlexManager.flexOptions(this.node2 as TaroElement)) {}
+      .attrs(getNormalAttributes(this.node2 as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node2._nid].areaInfo = eventResult[1]
+      }))
+      Image((this.node0.childNodes[4] as TaroElement).getAttribute('src'))
+      .objectFit(getImageMode((this.node0.childNodes[4] as TaroElement).getAttribute('mode')))
+      .attrsImage(getNormalAttributes(this.node0.childNodes[4] as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[4] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[4] as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node0.childNodes[4] as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node0.childNodes[4]._nid].areaInfo = eventResult[1]
+      }))
+      .onComplete(e => eventHandler(e, 'complete', this.node0.childNodes[4] as TaroElement))
+      Flex(FlexManager.flexOptions(this.node0.childNodes[5] as TaroElement)) {}
+      .attrs(getNormalAttributes(this.node0.childNodes[5] as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node0.childNodes[5] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node0.childNodes[5] as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node0.childNodes[5] as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node0.childNodes[5]._nid].areaInfo = eventResult[1]
+      }))
+      .onClick(e => eventHandler(e, 'click', this.node0.childNodes[5] as TaroElement))
+      .onTouch(e => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node0.childNodes[5] 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 onClick={()=>{
+        console.log("click done");
+    }}></View>
+
+            <View onClick={function clickFn() {
+        console.log("click done");
+    }}></View>
+
+            <View onClick={handleViewClick} _dynamicID="node1"></View>
+
+            <View onAnimationStart={()=>{}} id={myId} _dynamicID="node2"></View>
+
+            <Image onLoad={()=>{
+        console.log("load done");
+    }} id="myImg"/>
+
+            <View onClick={()=>{
+        console.log("click done");
+    }} onTouchStart={()=>{
+        console.log("touch start done");
+    }}/>
+
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/attributes.rs/should_turn_dynamic_attrs.js

@@ -0,0 +1,184 @@
+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)
+  .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(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)
+  .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()
+  @State node1: TaroElement = new TaroIgnoreElement()
+  @State node2: TaroElement = new TaroIgnoreElement()
+  @State node3: TaroElement = new TaroIgnoreElement()
+  @State node4: TaroElement = new TaroIgnoreElement()
+  @State node5: TaroElement = new TaroIgnoreElement()
+  
+  build() {
+    Flex(FlexManager.flexOptions(this.node0 as TaroElement)) {
+      Flex(FlexManager.flexOptions(this.node1 as TaroElement)) {
+        Flex(FlexManager.flexOptions(this.node2 as TaroElement)) {}
+        .attrs(getNormalAttributes(this.node2 as TaroElement))
+        .onVisibleAreaChange(getNodeThresholds(this.node2 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node2 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+        .onAreaChange(getComponentEventCallback(this.node2 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+          const eventResult: TaroAny = res.eventResult
+          this.nodeInfoMap[this.node2._nid].areaInfo = eventResult[1]
+        }))
+        Flex(FlexManager.flexOptions(this.node1.childNodes[1] as TaroElement)) {}
+        .attrs(getNormalAttributes(this.node1.childNodes[1] as TaroElement))
+        .onVisibleAreaChange(getNodeThresholds(this.node1.childNodes[1] as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node1.childNodes[1] as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+        .onAreaChange(getComponentEventCallback(this.node1.childNodes[1] as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+          const eventResult: TaroAny = res.eventResult
+          this.nodeInfoMap[this.node1.childNodes[1]._nid].areaInfo = eventResult[1]
+        }))
+        Flex(FlexManager.flexOptions(this.node3 as TaroElement)) {
+          Flex(FlexManager.flexOptions(this.node4 as TaroElement)) {}
+          .attrs(getNormalAttributes(this.node4 as TaroElement))
+          .onVisibleAreaChange(getNodeThresholds(this.node4 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node4 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+          .onAreaChange(getComponentEventCallback(this.node4 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+            const eventResult: TaroAny = res.eventResult
+            this.nodeInfoMap[this.node4._nid].areaInfo = eventResult[1]
+          }))
+        }
+        .attrs(getNormalAttributes(this.node3 as TaroElement))
+        .onVisibleAreaChange(getNodeThresholds(this.node3 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node3 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+        .onAreaChange(getComponentEventCallback(this.node3 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+          const eventResult: TaroAny = res.eventResult
+          this.nodeInfoMap[this.node3._nid].areaInfo = eventResult[1]
+        }))
+      }
+      .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]
+      }))
+      Image((this.node0.childNodes[1] as TaroElement).getAttribute('src'))
+      .objectFit(getImageMode((this.node0.childNodes[1] as TaroElement).getAttribute('mode')))
+      .attrsImage(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]
+      }))
+      Image((this.node5 as TaroElement).getAttribute('src'))
+      .objectFit(getImageMode((this.node5 as TaroElement).getAttribute('mode')))
+      .attrsImage(getNormalAttributes(this.node5 as TaroElement))
+      .onVisibleAreaChange(getNodeThresholds(this.node5 as TaroElement) || [0.0, 1.0], getComponentEventCallback(this.node5 as TaroElement, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node5 as TaroElement, AREA_CHANGE_EVENT_NAME, res => {
+        const eventResult: TaroAny = res.eventResult
+        this.nodeInfoMap[this.node5._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 class={myClass} _dynamicID="node1">
+
+              <View style={myStyle} customProp={myCustomProp} _dynamicID="node2"></View>
+
+              <View class="center"/>
+
+              <View onTouch={myTime} _dynamicID="node3">
+
+                <View hoverClass={myHoverClass} _dynamicID="node4"></View>
+
+              </View>
+
+            </View>
+
+            <Image alt="占位符" src="https://www.jd.com/test.jpg"/>
+
+            <Image alt="占位符" src={src} _dynamicID="node5"/>
+
+          </View>;
+}

package/swc/plugin-compile-mode/tests/__swc_snapshots__/src/tests/harmony/children.rs/should_render_react_component.js

@@ -0,0 +1,75 @@
+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)
+  .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)) {
+      createNode(this.node0.childNodes[0] as TaroElement)
+      createNode(this.node1 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">
+
+            <Foo/>
+
+            <Foo title={myTitle} loading onClick={()=>{}} _dynamicID="node1"/>
+
+          </View>;
+}