fix(skyline): 适配skyline worklet

Author: yushijie1

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/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 />
+    )
+  }
+}