Merge branch 'fix/skyline' into feat/4.0.8

crates/swc_plugin_compile_mode/src/tests/attributes.rs

@@ -47,6 +47,7 @@ test!(
             <View onClick={handleViewClick}></View>
             <View onAnimationStart={() => {}} id={myId}></View>
             <Image onLoad={() => {}} id="myImg" />
+            <View nativeView="view" onScroll={() => {}} onScrollUpdateWorklet="onScrollUpdate" onGestureWorklet="onGesture" shouldResponseOnMoveWorklet="shouldResponseOnMoveCallBack"></View>
           </View>
         )
       }

crates/swc_plugin_compile_mode/src/transform.rs

@@ -342,6 +342,15 @@ impl TransformVisitor {
             Some(jsx_attr_value) => {
               match jsx_attr_value {
                 JSXAttrValue::Lit(Lit::Str(Str { value, .. })) => {
+                  // 处理worklet事件
+                  if is_event {
+                    let event_name_str = event_name.unwrap();
+                    if event_name_str.starts_with("worklet:") {
+                      props.insert(event_name_str, value.to_string());
+                      return false;
+                    }
+                  }
+
                   // 静态属性在 xml 中保留即可，jsx 中可以删除
                   if jsx_attr_name != COMPILE_MODE {
                     props.insert(miniapp_attr_name, value.to_string());

crates/swc_plugin_compile_mode/src/utils/mod.rs

@@ -88,6 +88,19 @@ pub fn check_is_event_attr(val: &str) -> bool {
 }
 
 pub fn identify_jsx_event_key(val: &str, platform: &str) -> Option<String> {
+
+  // 处理worklet事件及callback
+  // 事件：     onScrollUpdateWorklet         ->  worklet:onscrollupdate
+  // callback：shouldResponseOnMoveWorklet   ->  worklet:should-response-on-move
+  if val.ends_with("Worklet") {
+    let worklet_name = val.trim_end_matches("Worklet");
+    if worklet_name.starts_with("on") {
+      return Some(format!("worklet:{}", worklet_name.to_lowercase()));
+    } else {
+      return Some(format!("worklet:{}", to_kebab_case(worklet_name)));
+    }
+  }
+
   if check_is_event_attr(val) {
     let event_name = val.get(2..).unwrap().to_lowercase();
     let event_name = if event_name == "click" {

crates/swc_plugin_compile_mode/tests/__swc_snapshots__/src/tests/attributes.rs/should_handle_events.js

@@ -1,8 +1,14 @@
-const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view bindtap="eh" data-sid="{{i.cn[0].sid}}" id="{{i.cn[0].sid}}"></view><view bindanimationstart="eh" data-sid="{{i.cn[1].sid}}" id="{{i.cn[1].uid}}"></view><image bindload="eh" data-sid="{{i.cn[2].sid}}" id="myImg"></image></view></template>';
+const TARO_TEMPLATES_f0t0 = '<template name="tmpl_0_f0t0"><view><view bindtap="eh" data-sid="{{i.cn[0].sid}}" id="{{i.cn[0].sid}}"></view><view bindanimationstart="eh" data-sid="{{i.cn[1].sid}}" id="{{i.cn[1].uid}}"></view><image bindload="eh" data-sid="{{i.cn[2].sid}}" id="myImg"></image><view bindscroll="eh" data-sid="{{i.cn[3].sid}}" id="{{i.cn[3].sid}}" native-view="view" worklet:ongesture="onGesture" worklet:onscrollupdate="onScrollUpdate" worklet:should-response-on-move="shouldResponseOnMoveCallBack"></view></view></template>';
 function Index() {
     return <View compileMode="f0t0">
+
             <View onClick={handleViewClick}></View>
-            <View onAnimationStart={() => {}} id={myId}></View>
-            <Image onLoad={() => {}} />
-          </View>
+
+            <View onAnimationStart={()=>{}} id={myId}></View>
+
+            <Image onLoad={()=>{}}/>
+
+            <View onScroll={()=>{}}></View>
+
+          </View>;
 }

packages/shared/src/components.ts

@@ -525,10 +525,10 @@ export const voidElements = new Set([
 export const nestElements = new Map([
   ['view', -1],
   ['catch-view', -1],
-  ['click-view', -1],
   ['cover-view', -1],
   ['static-view', -1],
   ['pure-view', -1],
+  ['click-view', -1],
   ['block', -1],
   ['text', -1],
   ['static-text', 6],

packages/shared/src/template.ts

@@ -217,10 +217,11 @@ export class BaseTemplate {
               style: comp.style,
               class: comp.class
             }
+
             result['click-view'] = {
               style: comp.style,
               class: comp.class,
-              bindtap: 'eh'
+              ...this.getClickEvent()
             }
           }
         }
@@ -412,9 +413,9 @@ export class BaseTemplate {
       case 'slot':
       case 'slot-view':
       case 'catch-view':
-      case 'click-view':
       case 'static-view':
       case 'pure-view':
+      case 'click-view':
         nodeName = 'view'
         break
       case 'static-text':
@@ -515,6 +516,10 @@ export class BaseTemplate {
     return events
   }
 
+  protected getClickEvent (): any {
+    return { bindtap: 'eh' }
+  }
+
   protected getAttrValue (value: string, _key: string, _nodeName: string) {
     return `{${value}}`
   }

packages/taro-components/src/components/double-tap-gesture-handler/readme.md

@@ -0,0 +1,10 @@
+# taro-double-tap-gesture-handler-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/src/components/double-tap-gesture-handler/script.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-double-tap-gesture-handler-core'
+})
+export class DoubleTapGestureHandler implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('DoubleTapGestureHandler', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/force-press-gesture-handler/readme.md

@@ -0,0 +1,10 @@
+# taro-force-press-gesture-handler-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/src/components/force-press-gesture-handler/script.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-force-press-gesture-handler-core'
+})
+export class ForcePressGestureHandler implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('ForcePressGestureHandler', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/horizontal-drag-gesture-handler/readme.md

@@ -0,0 +1,10 @@
+# taro-horizontal-drag-gesture-handler-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/src/components/horizontal-drag-gesture-handler/script.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-horizontal-drag-gesture-handler-core'
+})
+export class HorizontalDragGestureHandler implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('HorizontalDragGestureHandler', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/long-press-gesture-handler/readme.md

@@ -0,0 +1,10 @@
+# taro-long-press-gesture-handler-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/src/components/long-press-gesture-handler/script.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-long-press-gesture-handler-core'
+})
+export class LongPressGestureHandler implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('LongPressGestureHandler', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/pan-gesture-handler/readme.md

@@ -0,0 +1,10 @@
+# taro-pan-gesture-handler-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/src/components/pan-gesture-handler/script.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-pan-gesture-handler-core'
+})
+export class PanGestureHandler implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('PanGestureHandler', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/scale-gesture-handler/readme.md

@@ -0,0 +1,10 @@
+# taro-scale-gesture-handler-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/src/components/scale-gesture-handler/script.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-scale-gesture-handler-core'
+})
+export class ScaleGestureHandler implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('ScaleGestureHandler', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/script/readme.md

@@ -0,0 +1,10 @@
+# taro-script-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/src/components/script/script.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-script-core'
+})
+export class Script implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('Script', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/tap-gesture-handler/readme.md

@@ -0,0 +1,10 @@
+# taro-tap-gesture-handler-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/src/components/tap-gesture-handler/script.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-tap-gesture-handler-core'
+})
+export class TapGestureHandler implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('TapGestureHandler', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/vertical-drag-gesture-handler/readme.md

@@ -0,0 +1,10 @@
+# taro-vertical-drag-gesture-handler-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/src/components/vertical-drag-gesture-handler/script.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-vertical-drag-gesture-handler-core'
+})
+export class VerticalDragGestureHandler implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('VerticalDragGestureHandler', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/types/DraggableSheet.d.ts

@@ -32,6 +32,11 @@ interface DraggableSheetProps extends StandardProps {
    * @default []
    */
   snapSizes?: any[]
+  /**
+   * 尺寸发生变化时触发，仅支持 worklet 作为回调。event = {pixels, size}
+   * @supported weapp
+   */
+  onSizeUpdateWorklet?: string
 }
 
 /**