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/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
 }
 
 /**

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

@@ -62,7 +62,7 @@ interface ImageProps extends StandardProps {
    */
   ariaLabel?: string
   /** 是否渐显
-   * @supported weapp-skyline
+   * @supported weapp
    * @default false
    */
   fadeIn?: boolean

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

@@ -199,21 +199,25 @@ interface InputProps extends StandardProps, FormItemProps {
    */
   onNickNameReview?: CommonEventFunction
   /** 选区改变事件, {selectionStart, selectionEnd}
-   * @supported weapp-skyline
+   * @supported weapp
    */
   onSelectionChange?: CommonEventFunction
   /** 输入法开始新的输入时触发 （仅当输入法支持时触发）
-   * @supported weapp-skyline
+   * @supported weapp
    */
   onKeyboardCompositionStart?: CommonEventFunction
   /** 输入法输入字符时触发（仅当输入法支持时触发）
-   * @supported weapp-skyline
+   * @supported weapp
    */
   onKeyboardCompositionUpdate?: CommonEventFunction
   /** 输入法输入结束时触发（仅当输入法支持时触发）
-   * @supported weapp-skyline
+   * @supported weapp
    */
   onKeyboardCompositionEnd?: CommonEventFunction
+  /** 键盘高度变化时触发。event.detail = {height: height, pageBottomPadding: pageBottomPadding}； height: 键盘高度，pageBottomPadding: 页面上推高度
+   * @supported weapp
+   */
+  onKeyoardHeightChangeWorklet?: string
 }
 declare namespace InputProps {
   /** Input 类型 */

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

@@ -53,7 +53,7 @@ interface RichTextProps extends StandardProps {
    */
   onLongtap?: CommonEventFunction
   /** 布局兼容模式
-   * @supported weapp-skyline
+   * @supported weapp
    * @default default
    */
   mode?: 'default' | 'compat' | 'aggressive' | 'inline-block' | 'web'