fix(skyline): 适配skyline worklet

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/types/DraggableSheet.d.ts

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

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

@@ -214,6 +214,10 @@ interface InputProps extends StandardProps, FormItemProps {
    * @supported weapp-skyline
    */
   onKeyboardCompositionEnd?: CommonEventFunction
+  /** 键盘高度变化时触发。event.detail = {height: height, pageBottomPadding: pageBottomPadding}； height: 键盘高度，pageBottomPadding: 页面上推高度
+   * @supported weapp-skyline
+   */
+  onKeyoardHeightChangeWorklet?: CommonEventFunction
 }
 declare namespace InputProps {
   /** Input 类型 */

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

@@ -297,6 +297,22 @@ interface ScrollViewProps extends StandardProps {
    * @supported alipay
    */
   onTouchCancel?: CommonEventFunction
+  /** 同 bindscrollstart，但仅支持 worklet 作为回调
+   * @supported weapp-skyline
+   */
+  onScrollStartWorklet?: CommonEventFunction
+  /** bindscroll ，但仅支持 worklet 作为回调
+   * @supported weapp-skyline
+   */
+  onScrollUpdateWorklet?: CommonEventFunction
+  /** 同 bindscrollend，但仅支持 worklet 作为回调
+   * @supported weapp-skyline
+   */
+  onScrollEndWorklet?: CommonEventFunction
+  /** 指定手指抬起时做惯性滚动的初速度。(velocity: number) => number
+   * @supported weapp-skyline
+   */
+  adjustDecelerationVelocityWorklet?: TaroGeneral.TFunc
 }
 declare namespace ScrollViewProps {
   interface onScrollDetail {

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

@@ -61,9 +61,9 @@ interface ShareElementProps extends StandardProps {
     | 'bounceInOut'
     | 'cubic-bezier(x1, y1, x2, y2)'
   /** 动画帧回调
-   * @supported weapp
+   * @supported weapp-skyline
    */
-  onFrame?: string
+  onFrameWorklet?: CommonEventFunction
 }
 /** 共享元素
  *

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

@@ -221,6 +221,18 @@ interface SwiperProps extends StandardProps {
    * @default 0
    */
   cacheExtent?: number
+  /** 滑动开始时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy}
+   * @supported weapp-skyline
+   */
+  onScrollStartWorklet?: CommonEventFunction
+  /** 滑动位置更新时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy}
+   * @supported weapp-skyline
+   */
+  onScrollUpdateWorklet?: CommonEventFunction
+  /** 滑动结束时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy}
+   * @supported weapp-skyline
+   */
+  onScrollEndWorklet?: CommonEventFunction
 }
 declare namespace SwiperProps {
   /** 导致变更的原因 */

packages/taro-components/types/gesture/DoubleTapGestureHandler.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from '../common'
+import { CommonGestureProps } from './common'
+
+interface DoubleTapGestureHandlerProps extends CommonGestureProps, StandardProps {
+  /** 手指移动过程中手势是否响应
+   * @supported weapp-skyline
+   */
+  shouldResponseOnMoveWorklet?: string
+}
+
+/** 双击时触发手势
+ * 微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用
+ * @supported weapp-skyline
+ * @example_react
+ * ```tsx
+ * import { Component } from 'react'
+ * import { View, DoubleTapGestureHandler } from '@tarojs/components'
+ *
+ * export function Index () {
+ *   return (
+ *     <View compileMode>
+ *       <DoubleTapGestureHandler onGestureWorklet="onGesture">
+ *          <View className='circle'></View>
+ *       </DoubleTapGestureHandler>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+declare const DoubleTapGestureHandler: ComponentType<DoubleTapGestureHandlerProps>
+
+export { DoubleTapGestureHandler, DoubleTapGestureHandlerProps }

packages/taro-components/types/gesture/ForcePressGestureHandler.d.ts

@@ -0,0 +1,30 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from './common'
+import { CommonGestureProps } from './common'
+
+interface ForcePressGestureHandlerProps extends CommonGestureProps, StandardProps {
+}
+
+/**iPhone 设备重按时触发手势
+ * 微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用
+ * @supported weapp-skyline
+ * @example_react
+ * ```tsx
+ * import { Component } from 'react'
+ * import { View, ForcePressGestureHandler } from '@tarojs/components'
+ *
+ * export function Index () {
+ *   return (
+ *     <View compileMode>
+ *       <ForcePressGestureHandler onGestureWorklet="onGesture">
+ *          <View className='circle'></View>
+ *       </ForcePressGestureHandler>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+declare const ForcePressGestureHandler: ComponentType<ForcePressGestureHandlerProps>
+
+export { ForcePressGestureHandler, ForcePressGestureHandlerProps }

packages/taro-components/types/gesture/HorizontalDragGestureHandler.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from '../common'
+import { CommonGestureProps } from './common'
+
+interface HorizontalDragGestureHandlerProps extends CommonGestureProps, StandardProps {
+  /** 手指移动过程中手势是否响应
+   * @supported weapp-skyline
+   */
+  shouldResponseOnMoveWorklet?: string
+}
+
+/**横向滑动时触发手势
+ * 微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用
+ * @supported weapp-skyline
+ * @example_react
+ * ```tsx
+ * import { Component } from 'react'
+ * import { View, HorizontalDragGestureHandler } from '@tarojs/components'
+ *
+ * export function Index () {
+ *   return (
+ *     <View compileMode>
+ *       <HorizontalDragGestureHandler onGestureWorklet="onGesture">
+ *          <View className='circle'></View>
+ *       </HorizontalDragGestureHandler>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+declare const HorizontalDragGestureHandler: ComponentType<HorizontalDragGestureHandlerProps>
+
+export { HorizontalDragGestureHandler, HorizontalDragGestureHandlerProps }

packages/taro-components/types/gesture/LongPressGestureHandler.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from '../common'
+import { CommonGestureProps } from './common'
+
+interface LongPressGestureHandlerProps extends CommonGestureProps, StandardProps {
+  /** 手指移动过程中手势是否响应
+   * @supported weapp-skyline
+   */
+  shouldResponseOnMoveWorklet?: string
+}
+
+/**长按时触发手势
+ * 微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用
+ * @supported weapp-skyline
+ * @example_react
+ * ```tsx
+ * import { Component } from 'react'
+ * import { View, LongPressGestureHandler } from '@tarojs/components'
+ *
+ * export function Index () {
+ *   return (
+ *     <View compileMode>
+ *       <LongPressGestureHandler onGestureWorklet="onGesture">
+ *          <View className='circle'></View>
+ *       </LongPressGestureHandler>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+declare const LongPressGestureHandler: ComponentType<LongPressGestureHandlerProps>
+
+export { LongPressGestureHandler, LongPressGestureHandlerProps }

packages/taro-components/types/gesture/PanGestureHandler.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from '../common'
+import { CommonGestureProps } from './common'
+
+interface PanGestureHandlerProps extends CommonGestureProps, StandardProps {
+  /** 手指移动过程中手势是否响应
+   * @supported weapp-skyline
+   */
+  shouldResponseOnMoveWorklet?: string
+}
+
+/**拖动（横向/纵向）时触发手势
+ * 微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用
+ * @supported weapp-skyline
+ * @example_react
+ * ```tsx
+ * import { Component } from 'react'
+ * import { View, PanGestureHandler } from '@tarojs/components'
+ *
+ * export function Index () {
+ *   return (
+ *     <View compileMode>
+ *       <PanGestureHandler onGestureWorklet="onGesture">
+ *          <View className='circle'></View>
+ *       </PanGestureHandler>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+declare const PanGestureHandler: ComponentType<PanGestureHandlerProps>
+
+export { PanGestureHandler, PanGestureHandlerProps }

packages/taro-components/types/gesture/ScaleGestureHandler.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from '../common'
+import { CommonGestureProps } from './common'
+
+interface ScaleGestureHandlerProps extends CommonGestureProps, StandardProps {
+  /** 手指移动过程中手势是否响应
+   * @supported weapp-skyline
+   */
+  shouldResponseOnMoveWorklet?: string
+}
+
+/**多指缩放时触发手势
+ * 微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用
+ * @supported weapp-skyline
+ * @example_react
+ * ```tsx
+ * import { Component } from 'react'
+ * import { View, ScaleGestureHandler } from '@tarojs/components'
+ *
+ * export function Index () {
+ *   return (
+ *     <View compileMode>
+ *       <ScaleGestureHandler onGestureWorklet="onGesture">
+ *          <View className='circle'></View>
+ *       </ScaleGestureHandler>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+declare const ScaleGestureHandler: ComponentType<ScaleGestureHandlerProps>
+
+export { ScaleGestureHandler, ScaleGestureHandlerProps }

packages/taro-components/types/gesture/TapGestureHandler.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react'
+
+import { StandardProps } from '../common'
+import { CommonGestureProps } from './common'
+
+interface TapGestureHandlerProps extends CommonGestureProps, StandardProps {
+  /** 手指移动过程中手势是否响应
+   * @supported weapp-skyline
+   */
+  shouldResponseOnMoveWorklet?: string
+}
+
+/**点击时触发手势
+ * 微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用
+ * @supported weapp-skyline
+ * @example_react
+ * ```tsx
+ * import { Component } from 'react'
+ * import { View, TapGestureHandler } from '@tarojs/components'
+ *
+ * export function Index () {
+ *   return (
+ *     <View compileMode>
+ *       <TapGestureHandler onGestureWorklet="onGesture">
+ *          <View className='circle'></View>
+ *       </TapGestureHandler>
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+declare const TapGestureHandler: ComponentType<TapGestureHandlerProps>
+
+export { TapGestureHandler, TapGestureHandlerProps }