@mpxjs/webpack-plugin 2.10.14 → 2.10.15-1

package/lib/runtime/components/react/dist/mpx-movable-view.jsx

@@ -22,7 +22,7 @@ import { StyleSheet } from 'react-native';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation } from './utils';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, withSpring } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
@@ -106,7 +106,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         const now = Date.now();
         if (now - lastChangeTime.value >= changeThrottleTime) {
             lastChangeTime.value = now;
-            runOnJS(handleTriggerChange)({ x, y, type });
+            runOnJS(runOnJSCallback)('handleTriggerChange', { x, y, type });
         }
     }, [changeThrottleTime]);
     useEffect(() => {
@@ -130,7 +130,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                         : newY;
                 }
                 if (bindchange) {
-                    runOnJS(handleTriggerChange)({
+                    runOnJS(runOnJSCallback)('handleTriggerChange', {
                         x: newX,
                         y: newY,
                         type: 'setData'
@@ -295,13 +295,20 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         bindtouchend && bindtouchend(e);
         catchtouchend && catchtouchend(e);
     };
+    const runOnJSCallbackRef = useRef({
+        handleTriggerChange,
+        triggerStartOnJS,
+        triggerMoveOnJS,
+        triggerEndOnJS
+    });
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     const gesture = useMemo(() => {
         const handleTriggerMove = (e) => {
             'worklet';
             const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove;
             const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove;
             if (hasTouchmove || hasCatchTouchmove) {
-                runOnJS(triggerMoveOnJS)({
+                runOnJS(runOnJSCallback)('triggerMoveOnJS', {
                     e,
                     touchEvent: touchEvent.value,
                     hasTouchmove,
@@ -319,7 +326,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                 y: changedTouches.y
             };
             if (bindtouchstart || catchtouchstart) {
-                runOnJS(triggerStartOnJS)({ e });
+                runOnJS(runOnJSCallback)('triggerStartOnJS', { e });
             }
         })
             .onStart(() => {
@@ -376,7 +383,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             isFirstTouch.value = true;
             isMoving.value = false;
             if (bindtouchend || catchtouchend) {
-                runOnJS(triggerEndOnJS)({ e });
+                runOnJS(runOnJSCallback)('triggerEndOnJS', { e });
             }
         })
             .onEnd((e) => {
@@ -405,7 +412,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                             : y;
                     }
                     if (bindchange) {
-                        runOnJS(handleTriggerChange)({
+                        runOnJS(runOnJSCallback)('handleTriggerChange', {
                             x,
                             y
                         });
@@ -423,7 +430,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                     }, () => {
                         xInertialMotion.value = false;
                         if (bindchange) {
-                            runOnJS(handleTriggerChange)({
+                            runOnJS(runOnJSCallback)('handleTriggerChange', {
                                 x: offsetX.value,
                                 y: offsetY.value
                             });
@@ -439,7 +446,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                     }, () => {
                         yInertialMotion.value = false;
                         if (bindchange) {
-                            runOnJS(handleTriggerChange)({
+                            runOnJS(runOnJSCallback)('handleTriggerChange', {
                                 x: offsetX.value,
                                 y: offsetY.value
                             });

package/lib/runtime/components/react/dist/mpx-scroll-view.jsx

@@ -38,7 +38,7 @@ import Animated, { useSharedValue, withTiming, useAnimatedStyle, runOnJS } from
 import { warn, hasOwn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE } from './utils';
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE, useRunOnJSCallback } from './utils';
 import { IntersectionObserverContext, ScrollViewContext } from './context';
 import Portal from './mpx-portal';
 const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView);
@@ -79,6 +79,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
     const scrollViewRef = useRef(null);
+    const runOnJSCallbackRef = useRef({
+        setEnableScroll,
+        setScrollBounces,
+        setRefreshing,
+        onRefresh
+    });
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     useNodesRef(props, ref, scrollViewRef, {
         style: normalStyle,
         scrollOffset: scrollOptions,
@@ -404,7 +411,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'worklet';
         if (enableScrollValue.value !== newValue) {
             enableScrollValue.value = newValue;
-            runOnJS(setEnableScroll)(newValue);
+            runOnJS(runOnJSCallback)('setEnableScroll', newValue);
         }
     }
     const resetScrollState = (value) => {
@@ -415,7 +422,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         'worklet';
         if (bouncesValue.value !== newValue) {
             bouncesValue.value = newValue;
-            runOnJS(setScrollBounces)(newValue);
+            runOnJS(runOnJSCallback)('setScrollBounces', newValue);
         }
     }
     // 处理下拉刷新的手势
@@ -460,7 +467,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
                 translateY.value = withTiming(0);
                 updateScrollState(true);
-                runOnJS(setRefreshing)(false);
+                runOnJS(runOnJSCallback)('setRefreshing', false);
             }
             else {
                 translateY.value = withTiming(refresherHeight.value);
@@ -469,13 +476,13 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         else if (event.translationY >= refresherHeight.value) {
             // 触发刷新
             translateY.value = withTiming(refresherHeight.value);
-            runOnJS(onRefresh)();
+            runOnJS(runOnJSCallback)('onRefresh');
         }
         else {
             // 回弹
             translateY.value = withTiming(0);
             updateScrollState(true);
-            runOnJS(setRefreshing)(false);
+            runOnJS(runOnJSCallback)('setRefreshing', false);
         }
     })
         .simultaneousWithExternalGesture(scrollViewRef);

package/lib/runtime/components/react/dist/mpx-swiper.jsx

@@ -4,7 +4,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS
 import React, { forwardRef, useRef, useEffect, useMemo, createElement } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, flatGesture } from './utils';
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, flatGesture, useRunOnJSCallback } from './utils';
 import { SwiperContext } from './context';
 import Portal from './mpx-portal';
 /**
@@ -71,7 +71,7 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, bindchange } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -112,10 +112,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 每个元素的宽度 or 高度，有固定值直接初始化无则0
     const step = useSharedValue(initStep);
     // 记录选中元素的索引值
-    const currentIndex = useSharedValue(props.current || 0);
+    const currentIndex = useSharedValue(propCurrent);
     // const initOffset = getOffset(props.current || 0, initStep)
     // 记录元素的偏移量
-    const offset = useSharedValue(getOffset(props.current || 0, initStep));
+    const offset = useSharedValue(getOffset(propCurrent, initStep));
     const strAbso = 'absolute' + dir.toUpperCase();
     const strVelocity = 'velocity' + dir.toUpperCase();
     // 标识手指触摸和抬起, 起点在onBegin
@@ -170,7 +170,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const iStep = dir === 'x' ? realWidth : realHeight;
         if (iStep !== step.value) {
             step.value = iStep;
-            updateCurrent(props.current || 0, iStep);
+            updateCurrent(propCurrent, iStep);
             updateAutoplay();
         }
     }
@@ -272,7 +272,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     easing: easeMap[easeingFunc]
                 }, () => {
                     currentIndex.value = nextIndex;
-                    runOnJS(loop)();
+                    runOnJS(runOnJSCallback)('loop');
                 });
             }
             else {
@@ -288,7 +288,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                         // 将开始位置设置为真正的位置
                         offset.value = initOffset;
                         currentIndex.value = nextIndex;
-                        runOnJS(loop)();
+                        runOnJS(runOnJSCallback)('loop');
                     });
                 }
                 else {
@@ -300,7 +300,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                         easing: easeMap[easeingFunc]
                     }, () => {
                         currentIndex.value = nextIndex;
-                        runOnJS(loop)();
+                        runOnJS(runOnJSCallback)('loop');
                     });
                 }
             }
@@ -325,12 +325,19 @@ const SwiperWrapper = forwardRef((props, ref) => {
             resumeLoop
         };
     }, []);
-    function handleSwiperChange(current) {
-        if (props.current !== currentIndex.value) {
+    function handleSwiperChange(current, pCurrent) {
+        if (pCurrent !== currentIndex.value) {
             const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
             bindchange && bindchange(eventData);
         }
     }
+    const runOnJSCallbackRef = useRef({
+        loop,
+        pauseLoop,
+        resumeLoop,
+        handleSwiperChange
+    });
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     function getOffset(index, stepValue) {
         if (!stepValue)
             return 0;
@@ -348,12 +355,12 @@ const SwiperWrapper = forwardRef((props, ref) => {
         const targetOffset = getOffset(index || 0, stepValue);
         if (targetOffset !== offset.value) {
             // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
-            if (props.current !== undefined && props.current !== currentIndex.value) {
+            if (propCurrent !== undefined && propCurrent !== currentIndex.value) {
                 offset.value = withTiming(targetOffset, {
                     duration: easeDuration,
                     easing: easeMap[easeingFunc]
                 }, () => {
-                    currentIndex.value = props.current || 0;
+                    currentIndex.value = propCurrent;
                 });
             }
             else {
@@ -373,7 +380,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
         if (newIndex !== preIndex && bindchange) {
-            runOnJS(handleSwiperChange)(newIndex);
+            runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent);
         }
     });
     useEffect(() => {
@@ -406,10 +413,10 @@ const SwiperWrapper = forwardRef((props, ref) => {
     useEffect(() => {
         // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
         // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
-        if (props.current !== currentIndex.value) {
-            updateCurrent(props.current || 0, step.value);
+        if (propCurrent !== currentIndex.value) {
+            updateCurrent(propCurrent, step.value);
         }
-    }, [props.current]);
+    }, [propCurrent]);
     useEffect(() => {
         autoplayShared.value = autoplay;
         updateAutoplay();
@@ -502,7 +509,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     if (touchfinish.value !== false) {
                         currentIndex.value = selectedIndex;
                         offset.value = resetOffset;
-                        runOnJS(resumeLoop)();
+                        runOnJS(runOnJSCallback)('resumeLoop');
                     }
                 });
             }
@@ -513,7 +520,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }, () => {
                     if (touchfinish.value !== false) {
                         currentIndex.value = selectedIndex;
-                        runOnJS(resumeLoop)();
+                        runOnJS(runOnJSCallback)('resumeLoop');
                     }
                 });
             }
@@ -535,7 +542,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             }, () => {
                 if (touchfinish.value !== false) {
                     currentIndex.value = moveToIndex;
-                    runOnJS(resumeLoop)();
+                    runOnJS(runOnJSCallback)('resumeLoop');
                 }
             });
         }
@@ -562,20 +569,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
             'worklet';
             const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData);
             if (+diffOffset === 0) {
-                runOnJS(resumeLoop)();
+                runOnJS(runOnJSCallback)('resumeLoop');
             }
             else if (isTriggerUpdateHalf) {
-                // 如果触发了onUpdate时的索引变更，则直接以update时的index为准
-                const targetIndex = !circularShared.value ? currentIndex.value : currentIndex.value + patchElmNumShared.value - 1;
-                offset.value = withTiming(-targetIndex * step.value, {
-                    duration: easeDuration,
-                    easing: easeMap[easeingFunc]
-                }, () => {
-                    if (touchfinish.value !== false) {
-                        currentIndex.value = targetIndex;
-                        runOnJS(resumeLoop)();
-                    }
-                });
+                // 如果触发了onUpdate时的索引变更
+                handleEnd(eventData);
             }
             else if (half) {
                 handleEnd(eventData);
@@ -651,15 +649,15 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 return;
             touchfinish.value = false;
             cancelAnimation(offset);
-            runOnJS(pauseLoop)();
+            runOnJS(runOnJSCallback)('pauseLoop');
             preAbsolutePos.value = e[strAbso];
             moveTranstion.value = e[strAbso];
         })
             .onUpdate((e) => {
             'worklet';
-            if (touchfinish.value)
-                return;
             const moveDistance = e[strAbso] - preAbsolutePos.value;
+            if (touchfinish.value || moveDistance === 0)
+                return;
             const eventData = {
                 translation: moveDistance,
                 transdir: moveDistance

package/lib/runtime/components/react/mpx-movable-view.tsx

@@ -22,7 +22,7 @@ import { StyleSheet, View, LayoutChangeEvent } from 'react-native'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { MovableAreaContext } from './context'
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject, omit, useNavigation } from './utils'
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback } from './utils'
 import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload, PanGesture } from 'react-native-gesture-handler'
 import Animated, {
   useSharedValue,
@@ -30,7 +30,6 @@ import Animated, {
   withDecay,
   runOnJS,
   runOnUI,
-  useAnimatedReaction,
   withSpring
 } from 'react-native-reanimated'
 import { collectDataset, noop } from '@mpxjs/utils'
@@ -87,7 +86,6 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   const layoutRef = useRef<any>({})
   const changeSource = useRef<any>('')
   const hasLayoutRef = useRef(false)
-
   const propsRef = useRef<any>({})
   propsRef.current = (props || {}) as MovableViewProps
 
@@ -208,7 +206,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     const now = Date.now()
     if (now - lastChangeTime.value >= changeThrottleTime) {
       lastChangeTime.value = now
-      runOnJS(handleTriggerChange)({ x, y, type })
+      runOnJS(runOnJSCallback)('handleTriggerChange', { x, y, type })
     }
   }, [changeThrottleTime])
 
@@ -233,7 +231,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             : newY
         }
         if (bindchange) {
-          runOnJS(handleTriggerChange)({
+          runOnJS(runOnJSCallback)('handleTriggerChange', {
             x: newX,
             y: newY,
             type: 'setData'
@@ -408,13 +406,21 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     catchtouchend && catchtouchend(e)
   }
 
+  const runOnJSCallbackRef = useRef({
+    handleTriggerChange,
+    triggerStartOnJS,
+    triggerMoveOnJS,
+    triggerEndOnJS
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
   const gesture = useMemo(() => {
     const handleTriggerMove = (e: GestureTouchEvent) => {
       'worklet'
       const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove
       const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove
       if (hasTouchmove || hasCatchTouchmove) {
-        runOnJS(triggerMoveOnJS)({
+        runOnJS(runOnJSCallback)('triggerMoveOnJS', {
           e,
           touchEvent: touchEvent.value,
           hasTouchmove,
@@ -433,7 +439,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           y: changedTouches.y
         }
         if (bindtouchstart || catchtouchstart) {
-          runOnJS(triggerStartOnJS)({ e })
+          runOnJS(runOnJSCallback)('triggerStartOnJS', { e })
         }
       })
       .onStart(() => {
@@ -487,7 +493,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         isFirstTouch.value = true
         isMoving.value = false
         if (bindtouchend || catchtouchend) {
-          runOnJS(triggerEndOnJS)({ e })
+          runOnJS(runOnJSCallback)('triggerEndOnJS', { e })
         }
       })
       .onEnd((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
@@ -515,7 +521,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
                 : y
             }
             if (bindchange) {
-              runOnJS(handleTriggerChange)({
+              runOnJS(runOnJSCallback)('handleTriggerChange', {
                 x,
                 y
               })
@@ -532,7 +538,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             }, () => {
               xInertialMotion.value = false
               if (bindchange) {
-                runOnJS(handleTriggerChange)({
+                runOnJS(runOnJSCallback)('handleTriggerChange', {
                   x: offsetX.value,
                   y: offsetY.value
                 })
@@ -548,7 +554,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             }, () => {
               yInertialMotion.value = false
               if (bindchange) {
-                runOnJS(handleTriggerChange)({
+                runOnJS(runOnJSCallback)('handleTriggerChange', {
                   x: offsetX.value,
                   y: offsetY.value
                 })

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -38,7 +38,7 @@ import Animated, { useSharedValue, withTiming, useAnimatedStyle, runOnJS } from
 import { warn, hasOwn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler, HIDDEN_STYLE } from './utils'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler, HIDDEN_STYLE, useRunOnJSCallback } from './utils'
 import { IntersectionObserverContext, ScrollViewContext } from './context'
 import Portal from './mpx-portal'
 
@@ -210,6 +210,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   const scrollViewRef = useRef<ScrollView>(null)
+
+  const runOnJSCallbackRef = useRef({
+    setEnableScroll,
+    setScrollBounces,
+    setRefreshing,
+    onRefresh
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
   useNodesRef(props, ref, scrollViewRef, {
     style: normalStyle,
     scrollOffset: scrollOptions,
@@ -587,7 +596,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'worklet'
     if (enableScrollValue.value !== newValue) {
       enableScrollValue.value = newValue
-      runOnJS(setEnableScroll)(newValue)
+      runOnJS(runOnJSCallback)('setEnableScroll', newValue)
     }
   }
 
@@ -600,7 +609,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'worklet'
     if (bouncesValue.value !== newValue) {
       bouncesValue.value = newValue
-      runOnJS(setScrollBounces)(newValue)
+      runOnJS(runOnJSCallback)('setScrollBounces', newValue)
     }
   }
 
@@ -649,19 +658,19 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
         if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
           translateY.value = withTiming(0)
           updateScrollState(true)
-          runOnJS(setRefreshing)(false)
+          runOnJS(runOnJSCallback)('setRefreshing', false)
         } else {
           translateY.value = withTiming(refresherHeight.value)
         }
       } else if (event.translationY >= refresherHeight.value) {
         // 触发刷新
         translateY.value = withTiming(refresherHeight.value)
-        runOnJS(onRefresh)()
+        runOnJS(runOnJSCallback)('onRefresh')
       } else {
         // 回弹
         translateY.value = withTiming(0)
         updateScrollState(true)
-        runOnJS(setRefreshing)(false)
+        runOnJS(runOnJSCallback)('setRefreshing', false)
       }
     })
     .simultaneousWithExternalGesture(scrollViewRef)

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -5,7 +5,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS
 import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo, createElement } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture, useRunOnJSCallback } from './utils'
 import { SwiperContext } from './context'
 import Portal from './mpx-portal'
 /**
@@ -148,6 +148,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     autoplay = false,
     circular = false,
     disableGesture = false,
+    current: propCurrent = 0,
     bindchange
   } = props
   const easeingFunc = props['easing-function'] || 'default'
@@ -198,10 +199,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 每个元素的宽度 or 高度，有固定值直接初始化无则0
   const step = useSharedValue(initStep)
   // 记录选中元素的索引值
-  const currentIndex = useSharedValue(props.current || 0)
+  const currentIndex = useSharedValue(propCurrent)
   // const initOffset = getOffset(props.current || 0, initStep)
   // 记录元素的偏移量
-  const offset = useSharedValue(getOffset(props.current || 0, initStep))
+  const offset = useSharedValue(getOffset(propCurrent, initStep))
   const strAbso = 'absolute' + dir.toUpperCase() as StrAbsoType
   const strVelocity = 'velocity' + dir.toUpperCase() as StrVelocityType
   // 标识手指触摸和抬起, 起点在onBegin
@@ -270,7 +271,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     const iStep = dir === 'x' ? realWidth : realHeight
     if (iStep !== step.value) {
       step.value = iStep
-      updateCurrent(props.current || 0, iStep)
+      updateCurrent(propCurrent, iStep)
       updateAutoplay()
     }
   }
@@ -374,7 +375,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           easing: easeMap[easeingFunc]
         }, () => {
           currentIndex.value = nextIndex
-          runOnJS(loop)()
+          runOnJS(runOnJSCallback)('loop')
         })
       } else {
         // 默认向右, 向下
@@ -389,7 +390,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             // 将开始位置设置为真正的位置
             offset.value = initOffset
             currentIndex.value = nextIndex
-            runOnJS(loop)()
+            runOnJS(runOnJSCallback)('loop')
           })
         } else {
           nextIndex = currentIndex.value + 1
@@ -400,7 +401,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             easing: easeMap[easeingFunc]
           }, () => {
             currentIndex.value = nextIndex
-            runOnJS(loop)()
+            runOnJS(runOnJSCallback)('loop')
           })
         }
       }
@@ -428,13 +429,21 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
   }, [])
 
-  function handleSwiperChange (current: number) {
-    if (props.current !== currentIndex.value) {
+  function handleSwiperChange (current: number, pCurrent: number) {
+    if (pCurrent !== currentIndex.value) {
       const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
       bindchange && bindchange(eventData)
     }
   }
 
+  const runOnJSCallbackRef = useRef({
+    loop,
+    pauseLoop,
+    resumeLoop,
+    handleSwiperChange
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
   function getOffset (index: number, stepValue: number) {
     if (!stepValue) return 0
     let targetOffset = 0
@@ -451,12 +460,12 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     const targetOffset = getOffset(index || 0, stepValue)
     if (targetOffset !== offset.value) {
       // 内部基于props.current!==currentIndex.value决定是否使用动画及更新currentIndex.value
-      if (props.current !== undefined && props.current !== currentIndex.value) {
+      if (propCurrent !== undefined && propCurrent !== currentIndex.value) {
         offset.value = withTiming(targetOffset, {
           duration: easeDuration,
           easing: easeMap[easeingFunc]
         }, () => {
-          currentIndex.value = props.current || 0
+          currentIndex.value = propCurrent
         })
       } else {
         offset.value = targetOffset
@@ -474,7 +483,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
     if (newIndex !== preIndex && bindchange) {
-      runOnJS(handleSwiperChange)(newIndex)
+      runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
   })
 
@@ -510,10 +519,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   useEffect(() => {
     // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
     // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
-    if (props.current !== currentIndex.value) {
-      updateCurrent(props.current || 0, step.value)
+    if (propCurrent !== currentIndex.value) {
+      updateCurrent(propCurrent, step.value)
     }
-  }, [props.current])
+  }, [propCurrent])
 
   useEffect(() => {
     autoplayShared.value = autoplay
@@ -603,7 +612,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           if (touchfinish.value !== false) {
             currentIndex.value = selectedIndex
             offset.value = resetOffset
-            runOnJS(resumeLoop)()
+            runOnJS(runOnJSCallback)('resumeLoop')
           }
         })
       } else {
@@ -613,7 +622,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }, () => {
           if (touchfinish.value !== false) {
             currentIndex.value = selectedIndex
-            runOnJS(resumeLoop)()
+            runOnJS(runOnJSCallback)('resumeLoop')
           }
         })
       }
@@ -635,7 +644,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       }, () => {
         if (touchfinish.value !== false) {
           currentIndex.value = moveToIndex
-          runOnJS(resumeLoop)()
+          runOnJS(runOnJSCallback)('resumeLoop')
         }
       })
     }
@@ -662,19 +671,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       'worklet'
       const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData)
       if (+diffOffset === 0) {
-        runOnJS(resumeLoop)()
+        runOnJS(runOnJSCallback)('resumeLoop')
       } else if (isTriggerUpdateHalf) {
-        // 如果触发了onUpdate时的索引变更，则直接以update时的index为准
-        const targetIndex = !circularShared.value ? currentIndex.value : currentIndex.value + patchElmNumShared.value - 1
-        offset.value = withTiming(-targetIndex * step.value, {
-          duration: easeDuration,
-          easing: easeMap[easeingFunc]
-        }, () => {
-          if (touchfinish.value !== false) {
-            currentIndex.value = targetIndex
-            runOnJS(resumeLoop)()
-          }
-        })
+        // 如果触发了onUpdate时的索引变更
+        handleEnd(eventData)
       } else if (half) {
         handleEnd(eventData)
       } else {
@@ -745,14 +745,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         if (!step.value) return
         touchfinish.value = false
         cancelAnimation(offset)
-        runOnJS(pauseLoop)()
+        runOnJS(runOnJSCallback)('pauseLoop')
         preAbsolutePos.value = e[strAbso]
         moveTranstion.value = e[strAbso]
       })
       .onUpdate((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
-        if (touchfinish.value) return
         const moveDistance = e[strAbso] - preAbsolutePos.value
+        if (touchfinish.value || moveDistance === 0) return
         const eventData = {
           translation: moveDistance,
           transdir: moveDistance

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.14",
+  "version": "2.10.15-1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -100,5 +100,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "536dff4513afc027834932deef4c0f8b4c365612"
+  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
 }

package/LICENSE

@@ -1,433 +0,0 @@
-                              Apache License
-
-                        Version 2.0, January 2004
-
-                     http://www.apache.org/licenses/
-
-
-
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-
-
-
-1. Definitions.
-
-
-
-
-   "License" shall mean the terms and conditions for use, reproduction,
-
-   and distribution as defined by Sections 1 through 9 of this document.
-
-
-
-
-   "Licensor" shall mean the copyright owner or entity authorized by
-
-   the copyright owner that is granting the License.
-
-
-
-
-   "Legal Entity" shall mean the union of the acting entity and all
-
-   other entities that control, are controlled by, or are under common
-
-   control with that entity. For the purposes of this definition,
-
-   "control" means (i) the power, direct or indirect, to cause the
-
-   direction or management of such entity, whether by contract or
-
-   otherwise, or (ii) ownership of fifty percent (50%) or more of the
-
-   outstanding shares, or (iii) beneficial ownership of such entity.
-
-
-
-
-   "You" (or "Your") shall mean an individual or Legal Entity
-
-   exercising permissions granted by this License.
-
-
-
-
-   "Source" form shall mean the preferred form for making modifications,
-
-   including but not limited to software source code, documentation
-
-   source, and configuration files.
-
-
-
-
-   "Object" form shall mean any form resulting from mechanical
-
-   transformation or translation of a Source form, including but
-
-   not limited to compiled object code, generated documentation,
-
-   and conversions to other media types.
-
-
-
-
-   "Work" shall mean the work of authorship, whether in Source or
-
-   Object form, made available under the License, as indicated by a
-
-   copyright notice that is included in or attached to the work
-
-   (an example is provided in the Appendix below).
-
-
-
-
-   "Derivative Works" shall mean any work, whether in Source or Object
-
-   form, that is based on (or derived from) the Work and for which the
-
-   editorial revisions, annotations, elaborations, or other modifications
-
-   represent, as a whole, an original work of authorship. For the purposes
-
-   of this License, Derivative Works shall not include works that remain
-
-   separable from, or merely link (or bind by name) to the interfaces of,
-
-   the Work and Derivative Works thereof.
-
-
-
-
-   "Contribution" shall mean any work of authorship, including
-
-   the original version of the Work and any modifications or additions
-
-   to that Work or Derivative Works thereof, that is intentionally
-
-   submitted to Licensor for inclusion in the Work by the copyright owner
-
-   or by an individual or Legal Entity authorized to submit on behalf of
-
-   the copyright owner. For the purposes of this definition, "submitted"
-
-   means any form of electronic, verbal, or written communication sent
-
-   to the Licensor or its representatives, including but not limited to
-
-   communication on electronic mailing lists, source code control systems,
-
-   and issue tracking systems that are managed by, or on behalf of, the
-
-   Licensor for the purpose of discussing and improving the Work, but
-
-   excluding communication that is conspicuously marked or otherwise
-
-   designated in writing by the copyright owner as "Not a Contribution."
-
-
-
-
-   "Contributor" shall mean Licensor and any individual or Legal Entity
-
-   on behalf of whom a Contribution has been received by Licensor and
-
-   subsequently incorporated within the Work.
-
-
-
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-
-   this License, each Contributor hereby grants to You a perpetual,
-
-   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-
-   copyright license to reproduce, prepare Derivative Works of,
-
-   publicly display, publicly perform, sublicense, and distribute the
-
-   Work and such Derivative Works in Source or Object form.
-
-
-
-
-3. Grant of Patent License. Subject to the terms and conditions of
-
-   this License, each Contributor hereby grants to You a perpetual,
-
-   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-
-   (except as stated in this section) patent license to make, have made,
-
-   use, offer to sell, sell, import, and otherwise transfer the Work,
-
-   where such license applies only to those patent claims licensable
-
-   by such Contributor that are necessarily infringed by their
-
-   Contribution(s) alone or by combination of their Contribution(s)
-
-   with the Work to which such Contribution(s) was submitted. If You
-
-   institute patent litigation against any entity (including a
-
-   cross-claim or counterclaim in a lawsuit) alleging that the Work
-
-   or a Contribution incorporated within the Work constitutes direct
-
-   or contributory patent infringement, then any patent licenses
-
-   granted to You under this License for that Work shall terminate
-
-   as of the date such litigation is filed.
-
-
-
-
-4. Redistribution. You may reproduce and distribute copies of the
-
-   Work or Derivative Works thereof in any medium, with or without
-
-   modifications, and in Source or Object form, provided that You
-
-   meet the following conditions:
-
-
-
-
-   (a) You must give any other recipients of the Work or
-
-       Derivative Works a copy of this License; and
-
-
-
-
-   (b) You must cause any modified files to carry prominent notices
-
-       stating that You changed the files; and
-
-
-
-
-   (c) You must retain, in the Source form of any Derivative Works
-
-       that You distribute, all copyright, patent, trademark, and
-
-       attribution notices from the Source form of the Work,
-
-       excluding those notices that do not pertain to any part of
-
-       the Derivative Works; and
-
-
-
-
-   (d) If the Work includes a "NOTICE" text file as part of its
-
-       distribution, then any Derivative Works that You distribute must
-
-       include a readable copy of the attribution notices contained
-
-       within such NOTICE file, excluding those notices that do not
-
-       pertain to any part of the Derivative Works, in at least one
-
-       of the following places: within a NOTICE text file distributed
-
-       as part of the Derivative Works; within the Source form or
-
-       documentation, if provided along with the Derivative Works; or,
-
-       within a display generated by the Derivative Works, if and
-
-       wherever such third-party notices normally appear. The contents
-
-       of the NOTICE file are for informational purposes only and
-
-       do not modify the License. You may add Your own attribution
-
-       notices within Derivative Works that You distribute, alongside
-
-       or as an addendum to the NOTICE text from the Work, provided
-
-       that such additional attribution notices cannot be construed
-
-       as modifying the License.
-
-
-
-
-   You may add Your own copyright statement to Your modifications and
-
-   may provide additional or different license terms and conditions
-
-   for use, reproduction, or distribution of Your modifications, or
-
-   for any such Derivative Works as a whole, provided Your use,
-
-   reproduction, and distribution of the Work otherwise complies with
-
-   the conditions stated in this License.
-
-
-
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-
-   any Contribution intentionally submitted for inclusion in the Work
-
-   by You to the Licensor shall be under the terms and conditions of
-
-   this License, without any additional terms or conditions.
-
-   Notwithstanding the above, nothing herein shall supersede or modify
-
-   the terms of any separate license agreement you may have executed
-
-   with Licensor regarding such Contributions.
-
-
-
-
-6. Trademarks. This License does not grant permission to use the trade
-
-   names, trademarks, service marks, or product names of the Licensor,
-
-   except as required for reasonable and customary use in describing the
-
-   origin of the Work and reproducing the content of the NOTICE file.
-
-
-
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-
-   agreed to in writing, Licensor provides the Work (and each
-
-   Contributor provides its Contributions) on an "AS IS" BASIS,
-
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-
-   implied, including, without limitation, any warranties or conditions
-
-   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-
-   PARTICULAR PURPOSE. You are solely responsible for determining the
-
-   appropriateness of using or redistributing the Work and assume any
-
-   risks associated with Your exercise of permissions under this License.
-
-
-
-
-8. Limitation of Liability. In no event and under no legal theory,
-
-   whether in tort (including negligence), contract, or otherwise,
-
-   unless required by applicable law (such as deliberate and grossly
-
-   negligent acts) or agreed to in writing, shall any Contributor be
-
-   liable to You for damages, including any direct, indirect, special,
-
-   incidental, or consequential damages of any character arising as a
-
-   result of this License or out of the use or inability to use the
-
-   Work (including but not limited to damages for loss of goodwill,
-
-   work stoppage, computer failure or malfunction, or any and all
-
-   other commercial damages or losses), even if such Contributor
-
-   has been advised of the possibility of such damages.
-
-
-
-
-9. Accepting Warranty or Additional Liability. While redistributing
-
-   the Work or Derivative Works thereof, You may choose to offer,
-
-   and charge a fee for, acceptance of support, warranty, indemnity,
-
-   or other liability obligations and/or rights consistent with this
-
-   License. However, in accepting such obligations, You may act only
-
-   on Your own behalf and on Your sole responsibility, not on behalf
-
-   of any other Contributor, and only if You agree to indemnify,
-
-   defend, and hold each Contributor harmless for any liability
-
-   incurred by, or claims asserted against, such Contributor by reason
-
-   of your accepting any such warranty or additional liability.
-
-
-
-
-END OF TERMS AND CONDITIONS
-
-
-
-
-APPENDIX: How to apply the Apache License to your work.
-
-
-
-
-   To apply the Apache License to your work, attach the following
-
-   boilerplate notice, with the fields enclosed by brackets "{}"
-
-   replaced with your own identifying information. (Don't include
-
-   the brackets!)  The text should be enclosed in the appropriate
-
-   comment syntax for the file format. We also recommend that a
-
-   file or class name and description of purpose be included on the
-
-   same "printed page" as the copyright notice for easier
-
-   identification within third-party archives.
-
-
-
-
-Copyright (C) 2017 Beijing Didi Infinity Technology and Development Co.,Ltd. All rights reserved.
-
-
-
-
-Licensed under the Apache License, Version 2.0 (the "License");
-
-you may not use this file except in compliance with the License.
-
-You may obtain a copy of the License at
-
-
-
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-
-
-
-Unless required by applicable law or agreed to in writing, software
-
-distributed under the License is distributed on an "AS IS" BASIS,
-
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-
-See the License for the specific language governing permissions and
-
-limitations under the License.