@mpxjs/webpack-plugin 2.10.12 → 2.10.13

package/lib/dependencies/DynamicEntryDependency.js

@@ -6,6 +6,7 @@ const toPosix = require('../utils/to-posix')
 const async = require('async')
 const parseRequest = require('../utils/parse-request')
 const hasOwn = require('../utils/has-own')
+const { RetryRuntimeGlobal } = require('../retry-runtime-module')
 
 class DynamicEntryDependency extends NullDependency {
   constructor (range, request, entryType, outputPath = '', packageRoot = '', relativePath = '', context = '', extraOptions = {}) {
@@ -201,9 +202,11 @@ class DynamicEntryDependency extends NullDependency {
 DynamicEntryDependency.Template = class DynamicEntryDependencyTemplate {
   apply (dep, source, {
     module,
-    chunkGraph
+    chunkGraph,
+    runtimeRequirements
   }) {
-    const { resultPath, range, key, publicPath, extraOptions } = dep
+    const { resultPath, key, publicPath, extraOptions } = dep
+    let range = dep.range
 
     let replaceContent = ''
 
@@ -214,10 +217,10 @@ DynamicEntryDependency.Template = class DynamicEntryDependencyTemplate {
         let relativePath = toPosix(path.relative(publicPath + path.dirname(chunkGraph.getModuleChunks(module)[0].name), resultPath))
         if (!relativePath.startsWith('.')) relativePath = './' + relativePath
         replaceContent = JSON.stringify(relativePath)
-        if (extraOptions.retryRequireAsync) {
-          replaceContent += `).catch(function (e) {
-  return require.async(${JSON.stringify(relativePath)});
-}`
+        if (extraOptions.retryRequireAsync && extraOptions.retryRequireAsync.times > 0) {
+          range = extraOptions.requireAsyncRange
+          runtimeRequirements.add(RetryRuntimeGlobal)
+          replaceContent = `${RetryRuntimeGlobal}(function() { return require.async(${JSON.stringify(relativePath)}) }, ${extraOptions.retryRequireAsync.times}, ${extraOptions.retryRequireAsync.interval})`
         }
       } else {
         replaceContent = JSON.stringify(resultPath)

package/lib/dependencies/ImportDependencyTemplate.js

@@ -1,4 +1,6 @@
 const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
+const { RetryRuntimeGlobal } = require('../retry-runtime-module')
+const parseRequest = require('../utils/parse-request')
 
 class ImportDependencyTemplate extends (
   ModuleDependency.Template
@@ -31,6 +33,16 @@ class ImportDependencyTemplate extends (
     content = content.replace(/(__webpack_require__\.t\.bind\(.+,\s*)(\d+)(\s*\))/, (_, p1, p2, p3) => {
       return p1 + '9' + p3
     })
+
+    const { queryObj } = parseRequest(dep.request)
+    const retryRequireAsync = queryObj.retryRequireAsync && JSON.parse(queryObj.retryRequireAsync)
+
+    // require.async 的场景且配置了重试次数才注入 RetryRuntimeModule
+    if (queryObj.isRequireAsync && retryRequireAsync && retryRequireAsync.times > 0) {
+      runtimeRequirements.add(RetryRuntimeGlobal)
+      content = `${RetryRuntimeGlobal}(function() { return ${content} }, ${retryRequireAsync.times}, ${retryRequireAsync.interval})`
+    }
+
     source.replace(dep.range[0], dep.range[1] - 1, content)
   }
 }

package/lib/index.js

@@ -77,6 +77,7 @@ const VirtualModulesPlugin = require('webpack-virtual-modules')
 const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
 const LoadAsyncChunkModule = require('./react/LoadAsyncChunkModule')
 const ExternalModule = require('webpack/lib/ExternalModule')
+const { RetryRuntimeModule, RetryRuntimeGlobal } = require('./retry-runtime-module')
 require('./utils/check-core-version-match')
 
 const isProductionLikeMode = options => {
@@ -202,6 +203,12 @@ class MpxWebpackPlugin {
     options.asyncSubpackageRules = options.asyncSubpackageRules || []
     options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
     options.retryRequireAsync = options.retryRequireAsync || false
+    if (options.retryRequireAsync === true) {
+      options.retryRequireAsync = {
+        times: 1,
+        interval: 0
+      }
+    }
     options.optimizeSize = options.optimizeSize || false
     options.dynamicComponentRules = options.dynamicComponentRules || {}// 运行时组件配置
     this.options = options
@@ -615,6 +622,13 @@ class MpxWebpackPlugin {
         }
       })
 
+      compilation.hooks.runtimeRequirementInTree
+        .for(RetryRuntimeGlobal)
+        .tap('MpxWebpackPlugin', (chunk) => {
+          compilation.addRuntimeModule(chunk, new RetryRuntimeModule())
+          return true
+        })
+
       if (isReact(this.options.mode)) {
         compilation.hooks.runtimeRequirementInTree
           .for(RuntimeGlobals.loadScript)
@@ -1436,6 +1450,10 @@ class MpxWebpackPlugin {
               if (mpx.supportRequireAsync) {
                 if (isWeb(mpx.mode) || isReact(mpx.mode)) {
                   if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
+                  request = addQuery(request, {
+                    isRequireAsync: true,
+                    retryRequireAsync: JSON.stringify(this.options.retryRequireAsync)
+                  })
                   const depBlock = new AsyncDependenciesBlock(
                     {
                       name: tarRoot + '/index'
@@ -1451,7 +1469,8 @@ class MpxWebpackPlugin {
                   const dep = new DynamicEntryDependency(range, request, 'export', '', tarRoot, '', context, {
                     isAsync: true,
                     isRequireAsync: true,
-                    retryRequireAsync: !!this.options.retryRequireAsync
+                    retryRequireAsync: this.options.retryRequireAsync,
+                    requireAsyncRange: expr.range
                   })
 
                   parser.state.current.addPresentationalDependency(dep)
@@ -1606,7 +1625,7 @@ class MpxWebpackPlugin {
               target = expr.object
             }
 
-            if (!matchCondition(resourcePath, this.options.transMpxRules) || resourcePath.indexOf('node_modules/@mpxjs') !== -1 || !target || mode === srcMode) return
+            if (!matchCondition(resourcePath, this.options.transMpxRules) || toPosix(resourcePath).indexOf('node_modules/@mpxjs') !== -1 || !target || mode === srcMode) return
 
             const type = target.name
             const name = type === 'wx' ? 'mpx' : 'createFactory'

package/lib/react/LoadAsyncChunkModule.js

@@ -5,7 +5,7 @@ const HelperRuntimeModule = require('webpack/lib/runtime/HelperRuntimeModule')
 class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
   constructor (timeout) {
     super('load async chunk')
-    this.timeout = timeout || 5000
+    this.timeout = timeout || 10000
   }
 
   generate () {

package/lib/react/processScript.js

@@ -1,6 +1,6 @@
 const normalize = require('../utils/normalize')
 const optionProcessorPath = normalize.lib('runtime/optionProcessorReact')
-const { buildPagesMap, buildComponentsMap, getRequireScript, buildGlobalParams, stringifyRequest } = require('./script-helper')
+const { buildPagesMap, buildComponentsMap, getRequireScript, buildGlobalParams, stringifyRequest, buildI18n } = require('./script-helper')
 
 module.exports = function (script, {
   loaderContext,
@@ -17,7 +17,7 @@ module.exports = function (script, {
   componentGenerics,
   genericsInfo
 }, callback) {
-  const { appInfo } = loaderContext.getMpx()
+  const { appInfo, i18n } = loaderContext.getMpx()
 
   let scriptSrcMode = srcMode
   if (script) {
@@ -62,6 +62,9 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
     })
 
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo, componentGenerics, hasApp })
+    if (!hasApp && i18n) {
+      output += buildI18n({ loaderContext })
+    }
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }

package/lib/retry-runtime-module.js

@@ -0,0 +1,56 @@
+const Template = require('webpack/lib/Template')
+const RuntimeModule = require('webpack/lib/RuntimeModule')
+
+const RetryRuntimeGlobal = '__webpack_require__.__retry'
+
+class RetryRuntimeModule extends RuntimeModule {
+  constructor () {
+    super('mpx retry module')
+  }
+
+  generate () {
+    const { compilation } = this
+    const { runtimeTemplate } = compilation
+    return Template.asString([
+      `${RetryRuntimeGlobal} = ${runtimeTemplate.basicFunction(
+        'fn, times, interval',
+        [
+          'times = times || 1;',
+          'interval = interval || 0;',
+          `return new Promise(${runtimeTemplate.basicFunction(
+            'resolve, reject',
+            [
+              Template.indent([
+                'var _t = 0;',
+                `var _retry = ${runtimeTemplate.basicFunction('', [
+                  Template.indent([
+                    `fn().then(resolve).catch(${runtimeTemplate.basicFunction('err', [
+                      Template.indent([
+                        'if (_t < times) {',
+                        Template.indent([
+                            '++_t;',
+                            'interval > 0 ? setTimeout(_retry, interval) : _retry()'
+                          ]),
+                        '} else {',
+                          Template.indent([
+                            'reject(err);'
+                          ]),
+                        '}'
+                      ])
+                    ])})`
+                  ])
+                ])};`,
+                '_retry();'
+              ])
+            ]
+          )})`
+        ]
+      )}`
+    ])
+  }
+}
+
+module.exports = {
+  RetryRuntimeModule,
+  RetryRuntimeGlobal
+}

package/lib/runtime/components/react/dist/mpx-async-suspense.jsx

@@ -91,10 +91,19 @@ const AsyncSuspense = ({ type, chunkName, moduleId, innerProps, getLoading, getF
                     if (cancelled)
                         return;
                     if (type === 'component') {
-                        global.onLazyLoadError({
-                            type: 'subpackage',
-                            subpackage: [chunkName],
-                            errMsg: `loadSubpackage: ${e.type}`
+                        global.__mpxAppCbs.lazyLoad.forEach((cb) => {
+                            // eslint-disable-next-line node/no-callback-literal
+                            cb({
+                                type: 'subpackage',
+                                subpackage: [chunkName],
+                                errMsg: `loadSubpackage: ${e.type}`
+                            });
+                        });
+                    }
+                    if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.lazyLoadPageErrorHandler === 'function') {
+                        mpxGlobal.__mpx.config.rnConfig.lazyLoadPageErrorHandler({
+                            subpackage: chunkName,
+                            errType: e.type
                         });
                     }
                     loadChunkPromise.current = null;

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

@@ -117,14 +117,13 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 记录元素的偏移量
     const offset = useSharedValue(getOffset(props.current || 0, initStep));
     const strAbso = 'absolute' + dir.toUpperCase();
+    const strVelocity = 'velocity' + dir.toUpperCase();
     // 标识手指触摸和抬起, 起点在onBegin
     const touchfinish = useSharedValue(true);
     // 记录上一帧的绝对定位坐标
     const preAbsolutePos = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 时移动的距离
     const moveTranstion = useSharedValue(0);
-    // 记录从onBegin 到 onTouchesUp 的时间
-    const moveTime = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
@@ -405,7 +404,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     }, [children.length]);
     useEffect(() => {
-        updateCurrent(props.current || 0, step.value);
+        // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+        // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
+        if (props.current !== currentIndex.value) {
+            updateCurrent(props.current || 0, step.value);
+        }
     }, [props.current]);
     useEffect(() => {
         autoplayShared.value = autoplay;
@@ -427,7 +430,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         function getTargetPosition(eventData) {
             'worklet';
             // 移动的距离
-            const { translation } = eventData;
+            const { transdir } = eventData;
             let resetOffsetPos = 0;
             let selectedIndex = currentIndex.value;
             // 是否临界点
@@ -435,9 +438,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 真实滚动到的偏移量坐标
             let moveToTargetPos = 0;
             const tmp = !circularShared.value ? 0 : preMarginShared.value;
-            const currentOffset = translation < 0 ? offset.value - tmp : offset.value + tmp;
+            const currentOffset = transdir < 0 ? offset.value - tmp : offset.value + tmp;
             const computedIndex = Math.abs(currentOffset) / step.value;
-            const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
+            const moveToIndex = transdir < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex);
             // 实际应该定位的索引值
             if (!circularShared.value) {
                 selectedIndex = moveToIndex;
@@ -470,14 +473,18 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
         function canMove(eventData) {
             'worklet';
-            const { translation } = eventData;
-            const currentOffset = Math.abs(offset.value);
+            // 旧版：如果在快速多次滑动时，只根据当前的offset判断，会出现offset没超出，加上translation后越界的场景(如在倒数第二个元素快速滑动)
+            // 新版：会加上translation
+            const { translation, transdir } = eventData;
+            const gestureMovePos = offset.value + translation;
             if (!circularShared.value) {
-                if (translation < 0) {
-                    return currentOffset < step.value * (childrenLength.value - 1);
+                // 如果只判断区间，中间非滑动状态(handleResistanceMove)向左滑动，突然改为向右滑动，但是还在非滑动态，本应该可滑动判断为了不可滑动
+                const posEnd = -step.value * (childrenLength.value - 1);
+                if (transdir < 0) {
+                    return gestureMovePos > posEnd;
                 }
                 else {
-                    return currentOffset > 0;
+                    return gestureMovePos < 0;
                 }
             }
             else {
@@ -511,25 +518,16 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 });
             }
         }
-        function handleBackInit() {
-            'worklet';
-            // 微信的效果
-            // 1. 只有一个元素，即使设置了circular，也不会产生循环的效果，2. 可以响应手势，但是会有回弹的效果
-            offset.value = withTiming(0, {
-                duration: easeDuration,
-                easing: easeMap[easeingFunc]
-            });
-        }
         function handleBack(eventData) {
             'worklet';
-            const { translation } = eventData;
+            const { transdir } = eventData;
             // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
             let currentOffset = Math.abs(offset.value);
             if (circularShared.value) {
-                currentOffset += translation < 0 ? preMarginShared.value : -preMarginShared.value;
+                currentOffset += transdir < 0 ? preMarginShared.value : -preMarginShared.value;
             }
             const curIndex = currentOffset / step.value;
-            const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value;
+            const moveToIndex = (transdir < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value;
             const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? preMarginShared.value : 0);
             offset.value = withTiming(targetOffset, {
                 duration: easeDuration,
@@ -541,65 +539,111 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
             });
         }
-        function handleLongPress() {
+        // 当前的offset和index多对应的offset进行对比，判断是否超过一半
+        function computeHalf(eventData) {
             'worklet';
+            const { transdir } = eventData;
             const currentOffset = Math.abs(offset.value);
             let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
             if (circularShared.value) {
                 preOffset -= preMarginShared.value;
             }
-            // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
+            // 正常事件中拿到的translation值(正向滑动<0，倒着滑>0)
             const diffOffset = preOffset - currentOffset;
             const half = Math.abs(diffOffset) > step.value / 2;
+            const isTriggerUpdateHalf = (transdir < 0 && currentOffset < preOffset) || (transdir > 0 && currentOffset > preOffset);
+            return {
+                diffOffset,
+                half,
+                isTriggerUpdateHalf
+            };
+        }
+        function handleLongPress(eventData) {
+            'worklet';
+            const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData);
             if (+diffOffset === 0) {
                 runOnJS(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)();
+                    }
+                });
+            }
             else if (half) {
-                handleEnd({ translation: diffOffset });
+                handleEnd(eventData);
             }
             else {
-                handleBack({ translation: diffOffset });
+                handleBack(eventData);
             }
         }
         function reachBoundary(eventData) {
             'worklet';
-            // 移动的距离
+            // 1. 基于当前的offset和translation判断是否超过当前边界值
             const { translation } = eventData;
-            const elementsLength = step.value * childrenLength.value;
+            const boundaryStart = -patchElmNumShared.value * step.value;
+            const boundaryEnd = -(childrenLength.value + patchElmNumShared.value) * step.value;
+            const moveToOffset = offset.value + translation;
             let isBoundary = false;
             let resetOffset = 0;
-            // Y轴向下滚动, transDistance > 0, 向上滚动 < 0 X轴向左滚动, transDistance > 0
-            const currentOffset = offset.value;
-            const moveStep = Math.ceil(translation / elementsLength);
-            if (translation < 0) {
-                const posEnd = (childrenLength.value + patchElmNumShared.value + 1) * step.value;
-                const posReverseEnd = (patchElmNumShared.value - 1) * step.value;
-                if (currentOffset < -posEnd + step.value) {
-                    isBoundary = true;
-                    resetOffset = Math.abs(moveStep) === 0 ? patchElmNumShared.value * step.value + translation : moveStep * elementsLength;
-                }
-                if (currentOffset > -posReverseEnd) {
-                    isBoundary = true;
-                    resetOffset = moveStep * elementsLength;
-                }
+            if (moveToOffset < boundaryEnd) {
+                isBoundary = true;
+                // 超过边界的距离
+                const exceedLength = Math.abs(moveToOffset) - Math.abs(boundaryEnd);
+                // 计算对标正常元素所在的offset
+                resetOffset = patchElmNumShared.value * step.value + exceedLength;
             }
-            else if (translation > 0) {
-                const posEnd = (patchElmNumShared.value - 1) * step.value;
-                const posReverseEnd = (patchElmNumShared.value + childrenLength.value) * step.value;
-                if (currentOffset > -posEnd) {
-                    isBoundary = true;
-                    resetOffset = moveStep * elementsLength + step.value + (moveStep === 1 ? translation : 0);
-                }
-                if (currentOffset < -posReverseEnd) {
-                    isBoundary = true;
-                    resetOffset = moveStep * elementsLength + patchElmNumShared.value * step.value;
-                }
+            if (moveToOffset > boundaryStart) {
+                isBoundary = true;
+                // 超过边界的距离
+                const exceedLength = Math.abs(boundaryStart) - Math.abs(moveToOffset);
+                // 计算对标正常元素所在的offset
+                resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value + (step.value - exceedLength);
             }
             return {
                 isBoundary,
                 resetOffset: -resetOffset
             };
         }
+        // 非循环超出边界，应用阻力; 开始滑动少阻力小，滑动越长阻力越大
+        function handleResistanceMove(eventData) {
+            'worklet';
+            const { translation, transdir } = eventData;
+            const moveToOffset = offset.value + translation;
+            const maxOverDrag = Math.floor(step.value / 2);
+            const maxOffset = translation < 0 ? -(childrenLength.value - 1) * step.value : 0;
+            let resistance = 0.1;
+            let overDrag = 0;
+            let finalOffset = 0;
+            // 向右向下小于0, 向左向上大于0；
+            if (transdir < 0) {
+                overDrag = Math.abs(moveToOffset - maxOffset);
+            }
+            else {
+                overDrag = Math.abs(moveToOffset);
+            }
+            // 滑动越多resistance越小
+            resistance = 1 - overDrag / maxOverDrag;
+            // 确保阻力在合理范围内
+            resistance = Math.min(0.5, resistance);
+            // 限制在最大拖拽范围内
+            if (transdir < 0) {
+                const adjustOffset = offset.value + translation * resistance;
+                finalOffset = Math.max(adjustOffset, maxOffset - maxOverDrag);
+            }
+            else {
+                const adjustOffset = offset.value + translation * resistance;
+                finalOffset = Math.min(adjustOffset, maxOverDrag);
+            }
+            return finalOffset;
+        }
         const gesturePan = Gesture.Pan()
             .onBegin((e) => {
             'worklet';
@@ -610,21 +654,42 @@ const SwiperWrapper = forwardRef((props, ref) => {
             runOnJS(pauseLoop)();
             preAbsolutePos.value = e[strAbso];
             moveTranstion.value = e[strAbso];
-            moveTime.value = new Date().getTime();
         })
-            .onTouchesMove((e) => {
+            .onUpdate((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const touchEventData = e.changedTouches[0];
-            const moveDistance = touchEventData[strAbso] - preAbsolutePos.value;
+            const moveDistance = e[strAbso] - preAbsolutePos.value;
             const eventData = {
-                translation: moveDistance
+                translation: moveDistance,
+                transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
             };
-            // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-            if (!circularShared.value && !canMove(eventData)) {
+            // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
+            const { half } = computeHalf(eventData);
+            if (childrenLength.value > 1 && half) {
+                const { selectedIndex } = getTargetPosition(eventData);
+                currentIndex.value = selectedIndex;
+            }
+            // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
+            if (!circularShared.value) {
+                if (canMove(eventData)) {
+                    offset.value = moveDistance + offset.value;
+                }
+                else {
+                    const finalOffset = handleResistanceMove(eventData);
+                    offset.value = finalOffset;
+                }
+                preAbsolutePos.value = e[strAbso];
                 return;
             }
+            // 3. 循环更新: 只有一个元素时可滑动，加入阻力
+            if (circularShared.value && childrenLength.value === 1) {
+                const finalOffset = handleResistanceMove(eventData);
+                offset.value = finalOffset;
+                preAbsolutePos.value = e[strAbso];
+                return;
+            }
+            // 4. 循环更新：正常
             const { isBoundary, resetOffset } = reachBoundary(eventData);
             if (childrenLength.value > 1 && isBoundary && circularShared.value) {
                 offset.value = resetOffset;
@@ -632,28 +697,43 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 offset.value = moveDistance + offset.value;
             }
-            preAbsolutePos.value = touchEventData[strAbso];
+            preAbsolutePos.value = e[strAbso];
         })
-            .onTouchesUp((e) => {
+            .onFinalize((e) => {
             'worklet';
             if (touchfinish.value)
                 return;
-            const touchEventData = e.changedTouches[0];
-            const moveDistance = touchEventData[strAbso] - moveTranstion.value;
             touchfinish.value = true;
+            // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
+            const moveDistance = e[strAbso] - preAbsolutePos.value;
             const eventData = {
-                translation: moveDistance
+                translation: moveDistance,
+                transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
             };
+            // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
             if (childrenLength.value === 1) {
-                return handleBackInit();
+                offset.value = withTiming(0, {
+                    duration: easeDuration,
+                    easing: easeMap[easeingFunc]
+                });
+                return;
             }
-            // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
+            // 2.非循环状态不可移动态：最后一个元素 和 第一个元素
+            // 非循环支持最后元素可滑动能力后，向左快速移动未超过最大可移动范围一半，因为offset为正值，向左滑动handleBack，默认向上取整
+            // 但是在offset大于0时，取0。[-100, 0](back取0), [0, 100](back取1)， 所以handleLongPress里的处理逻辑需要兼容支持，因此这里直接单独处理，不耦合下方公共的判断逻辑。
             if (!circularShared.value && !canMove(eventData)) {
+                if (eventData.transdir < 0) {
+                    handleBack(eventData);
+                }
+                else {
+                    handleEnd(eventData);
+                }
                 return;
             }
-            const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000;
-            if (Math.abs(strVelocity) < longPressRatio) {
-                handleLongPress();
+            // 3. 非循环状态可移动态、循环状态, 正常逻辑处理
+            const velocity = e[strVelocity];
+            if (Math.abs(velocity) < longPressRatio) {
+                handleLongPress(eventData);
             }
             else {
                 handleEnd(eventData);

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation, runOnJS } from 'react-native-reanimated';
 import { error, hasOwn, collectDataset } from '@mpxjs/utils';
+import { useRunOnJSCallback } from './utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -182,13 +183,19 @@ export default function useAnimationHooks(props) {
             timeStamp: Date.now()
         });
     }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const runOnJSCallbackRef = useRef({
+        withTimingCallback
+    });
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
     // 创建单个animation
     function getAnimation({ key, value }, { delay, duration, easing }, callback) {
         const animation = typeof callback === 'function'
             ? withTiming(value, { duration, easing }, (finished, current) => {
                 callback(finished, current);
                 if (transitionend && finished) {
-                    runOnJS(withTimingCallback)(finished, current, duration);
+                    runOnJS(runOnJSCallback)('withTimingCallback', finished, current, duration);
                 }
             })
             : withTiming(value, { duration, easing });

package/lib/runtime/components/react/dist/utils.jsx

@@ -5,7 +5,6 @@ import { VarContext, ScrollViewContext, RouteContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
 import FastImage from '@d11/react-native-fast-image';
-import { runOnJS } from 'react-native-reanimated';
 import { Gesture } from 'react-native-gesture-handler';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
@@ -663,13 +662,11 @@ export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled
     const gesture = useMemo(() => {
         return Gesture.Pan()
             .onTouchesDown(() => {
-            'worklet';
-            runOnJS(setStartTimer)();
+            setStartTimer();
         })
             .onTouchesUp(() => {
-            'worklet';
-            runOnJS(setStayTimer)();
-        });
+            setStayTimer();
+        }).runOnJS(true);
     }, []);
     if (gestureRef) {
         gesture.simultaneousWithExternalGesture(gestureRef);
@@ -679,3 +676,17 @@ export function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled
         gesture
     };
 }
+export function useRunOnJSCallback(callbackMapRef) {
+    const invokeCallback = useCallback((key, ...args) => {
+        const callback = callbackMapRef.current[key];
+        // eslint-disable-next-line node/no-callback-literal
+        if (isFunction(callback))
+            return callback(...args);
+    }, []);
+    useEffect(() => {
+        return () => {
+            callbackMapRef.current = {};
+        };
+    }, []);
+    return invokeCallback;
+}

package/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -1,6 +1,7 @@
 import { useState, ComponentType, useEffect, useCallback, useRef, ReactNode, createElement } from 'react'
 import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native'
 import FastImage from '@d11/react-native-fast-image'
+import { AnyFunc } from './types/common'
 
 const asyncChunkMap = new Map()
 
@@ -136,10 +137,19 @@ const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
           .catch((e) => {
             if (cancelled) return
             if (type === 'component') {
-              global.onLazyLoadError({
-                type: 'subpackage',
-                subpackage: [chunkName],
-                errMsg: `loadSubpackage: ${e.type}`
+              global.__mpxAppCbs.lazyLoad.forEach((cb: AnyFunc) => {
+                // eslint-disable-next-line node/no-callback-literal
+                cb({
+                  type: 'subpackage',
+                  subpackage: [chunkName],
+                  errMsg: `loadSubpackage: ${e.type}`
+                })
+              })
+            }
+            if (type === 'page' && typeof mpxGlobal.__mpx.config?.rnConfig?.lazyLoadPageErrorHandler === 'function') {
+              mpxGlobal.__mpx.config.rnConfig.lazyLoadPageErrorHandler({
+                subpackage: chunkName,
+                errType: e.type
               })
             }
             loadChunkPromise.current = null

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

@@ -1,5 +1,5 @@
 import { View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
-import { GestureDetector, Gesture, PanGesture } from 'react-native-gesture-handler'
+import { GestureDetector, Gesture, PanGesture, GestureStateChangeEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated'
 
 import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo, createElement } from 'react'
@@ -26,8 +26,12 @@ import Portal from './mpx-portal'
  */
 type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
 type StrAbsoType = 'absoluteX' | 'absoluteY'
+type StrVelocityType = 'velocityX' | 'velocityY'
 type EventDataType = {
+  // 和上一帧offset值的对比
   translation: number
+  // onUpdate时根据上一个判断方向，onFinalize根据transformStart判断
+  transdir: number
 }
 
 interface SwiperProps {
@@ -46,7 +50,7 @@ interface SwiperProps {
   vertical?: boolean
   style: {
     [key: string]: any
-  };
+  }
   'easing-function'?: EaseType
   'previous-margin'?: string
   'next-margin'?: string
@@ -54,7 +58,7 @@ interface SwiperProps {
   'enable-var': boolean
   'parent-font-size'?: number
   'parent-width'?: number
-  'parent-height'?: number;
+  'parent-height'?: number
   'external-var-context'?: Record<string, any>
   'wait-for'?: Array<GestureHandler>
   'simultaneous-handlers'?: Array<GestureHandler>
@@ -199,14 +203,13 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 记录元素的偏移量
   const offset = useSharedValue(getOffset(props.current || 0, initStep))
   const strAbso = 'absolute' + dir.toUpperCase() as StrAbsoType
+  const strVelocity = 'velocity' + dir.toUpperCase() as StrVelocityType
   // 标识手指触摸和抬起, 起点在onBegin
   const touchfinish = useSharedValue(true)
   // 记录上一帧的绝对定位坐标
   const preAbsolutePos = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 时移动的距离
   const moveTranstion = useSharedValue(0)
-  // 记录从onBegin 到 onTouchesUp 的时间
-  const moveTime = useSharedValue(0)
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
 
@@ -505,7 +508,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [children.length])
 
   useEffect(() => {
-    updateCurrent(props.current || 0, step.value)
+    // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+    // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
+    if (props.current !== currentIndex.value) {
+      updateCurrent(props.current || 0, step.value)
+    }
   }, [props.current])
 
   useEffect(() => {
@@ -529,7 +536,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     function getTargetPosition (eventData: EventDataType) {
       'worklet'
       // 移动的距离
-      const { translation } = eventData
+      const { transdir } = eventData
       let resetOffsetPos = 0
       let selectedIndex = currentIndex.value
       // 是否临界点
@@ -537,9 +544,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 真实滚动到的偏移量坐标
       let moveToTargetPos = 0
       const tmp = !circularShared.value ? 0 : preMarginShared.value
-      const currentOffset = translation < 0 ? offset.value - tmp : offset.value + tmp
+      const currentOffset = transdir < 0 ? offset.value - tmp : offset.value + tmp
       const computedIndex = Math.abs(currentOffset) / step.value
-      const moveToIndex = translation < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex)
+      const moveToIndex = transdir < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex)
       // 实际应该定位的索引值
       if (!circularShared.value) {
         selectedIndex = moveToIndex
@@ -569,13 +576,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
     function canMove (eventData: EventDataType) {
       'worklet'
-      const { translation } = eventData
-      const currentOffset = Math.abs(offset.value)
+      // 旧版：如果在快速多次滑动时，只根据当前的offset判断，会出现offset没超出，加上translation后越界的场景(如在倒数第二个元素快速滑动)
+      // 新版：会加上translation
+      const { translation, transdir } = eventData
+      const gestureMovePos = offset.value + translation
       if (!circularShared.value) {
-        if (translation < 0) {
-          return currentOffset < step.value * (childrenLength.value - 1)
+        // 如果只判断区间，中间非滑动状态(handleResistanceMove)向左滑动，突然改为向右滑动，但是还在非滑动态，本应该可滑动判断为了不可滑动
+        const posEnd = -step.value * (childrenLength.value - 1)
+        if (transdir < 0) {
+          return gestureMovePos > posEnd
         } else {
-          return currentOffset > 0
+          return gestureMovePos < 0
         }
       } else {
         return true
@@ -607,25 +618,16 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         })
       }
     }
-    function handleBackInit () {
-      'worklet'
-      // 微信的效果
-      // 1. 只有一个元素，即使设置了circular，也不会产生循环的效果，2. 可以响应手势，但是会有回弹的效果
-      offset.value = withTiming(0, {
-        duration: easeDuration,
-        easing: easeMap[easeingFunc]
-      })
-    }
     function handleBack (eventData: EventDataType) {
       'worklet'
-      const { translation } = eventData
+      const { transdir } = eventData
       // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
       let currentOffset = Math.abs(offset.value)
       if (circularShared.value) {
-        currentOffset += translation < 0 ? preMarginShared.value : -preMarginShared.value
+        currentOffset += transdir < 0 ? preMarginShared.value : -preMarginShared.value
       }
       const curIndex = currentOffset / step.value
-      const moveToIndex = (translation < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value
+      const moveToIndex = (transdir < 0 ? Math.floor(curIndex) : Math.ceil(curIndex)) - patchElmNumShared.value
       const targetOffset = -(moveToIndex + patchElmNumShared.value) * step.value + (circularShared.value ? preMarginShared.value : 0)
       offset.value = withTiming(targetOffset, {
         duration: easeDuration,
@@ -637,64 +639,108 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
       })
     }
-    function handleLongPress () {
+    // 当前的offset和index多对应的offset进行对比，判断是否超过一半
+    function computeHalf (eventData: EventDataType) {
       'worklet'
+      const { transdir } = eventData
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
       if (circularShared.value) {
         preOffset -= preMarginShared.value
       }
-      // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
+      // 正常事件中拿到的translation值(正向滑动<0，倒着滑>0)
       const diffOffset = preOffset - currentOffset
       const half = Math.abs(diffOffset) > step.value / 2
+      const isTriggerUpdateHalf = (transdir < 0 && currentOffset < preOffset) || (transdir > 0 && currentOffset > preOffset)
+      return {
+        diffOffset,
+        half,
+        isTriggerUpdateHalf
+      }
+    }
+    function handleLongPress (eventData: EventDataType) {
+      'worklet'
+      const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData)
       if (+diffOffset === 0) {
         runOnJS(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)()
+          }
+        })
       } else if (half) {
-        handleEnd({ translation: diffOffset })
+        handleEnd(eventData)
       } else {
-        handleBack({ translation: diffOffset })
+        handleBack(eventData)
       }
     }
     function reachBoundary (eventData: EventDataType) {
       'worklet'
-      // 移动的距离
+      // 1. 基于当前的offset和translation判断是否超过当前边界值
       const { translation } = eventData
-      const elementsLength = step.value * childrenLength.value
+      const boundaryStart = -patchElmNumShared.value * step.value
+      const boundaryEnd = -(childrenLength.value + patchElmNumShared.value) * step.value
+      const moveToOffset = offset.value + translation
       let isBoundary = false
       let resetOffset = 0
-      // Y轴向下滚动, transDistance > 0, 向上滚动 < 0 X轴向左滚动, transDistance > 0
-      const currentOffset = offset.value
-      const moveStep = Math.ceil(translation / elementsLength)
-      if (translation < 0) {
-        const posEnd = (childrenLength.value + patchElmNumShared.value + 1) * step.value
-        const posReverseEnd = (patchElmNumShared.value - 1) * step.value
-        if (currentOffset < -posEnd + step.value) {
-          isBoundary = true
-          resetOffset = Math.abs(moveStep) === 0 ? patchElmNumShared.value * step.value + translation : moveStep * elementsLength
-        }
-        if (currentOffset > -posReverseEnd) {
-          isBoundary = true
-          resetOffset = moveStep * elementsLength
-        }
-      } else if (translation > 0) {
-        const posEnd = (patchElmNumShared.value - 1) * step.value
-        const posReverseEnd = (patchElmNumShared.value + childrenLength.value) * step.value
-        if (currentOffset > -posEnd) {
-          isBoundary = true
-          resetOffset = moveStep * elementsLength + step.value + (moveStep === 1 ? translation : 0)
-        }
-        if (currentOffset < -posReverseEnd) {
-          isBoundary = true
-          resetOffset = moveStep * elementsLength + patchElmNumShared.value * step.value
-        }
+      if (moveToOffset < boundaryEnd) {
+        isBoundary = true
+        // 超过边界的距离
+        const exceedLength = Math.abs(moveToOffset) - Math.abs(boundaryEnd)
+        // 计算对标正常元素所在的offset
+        resetOffset = patchElmNumShared.value * step.value + exceedLength
+      }
+      if (moveToOffset > boundaryStart) {
+        isBoundary = true
+        // 超过边界的距离
+        const exceedLength = Math.abs(boundaryStart) - Math.abs(moveToOffset)
+        // 计算对标正常元素所在的offset
+        resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value + (step.value - exceedLength)
       }
       return {
         isBoundary,
         resetOffset: -resetOffset
       }
     }
+    // 非循环超出边界，应用阻力; 开始滑动少阻力小，滑动越长阻力越大
+    function handleResistanceMove (eventData: EventDataType) {
+      'worklet'
+      const { translation, transdir } = eventData
+      const moveToOffset = offset.value + translation
+      const maxOverDrag = Math.floor(step.value / 2)
+      const maxOffset = translation < 0 ? -(childrenLength.value - 1) * step.value : 0
+      let resistance = 0.1
+      let overDrag = 0
+      let finalOffset = 0
+      // 向右向下小于0, 向左向上大于0；
+      if (transdir < 0) {
+        overDrag = Math.abs(moveToOffset - maxOffset)
+      } else {
+        overDrag = Math.abs(moveToOffset)
+      }
+      // 滑动越多resistance越小
+      resistance = 1 - overDrag / maxOverDrag
+      // 确保阻力在合理范围内
+      resistance = Math.min(0.5, resistance)
+      // 限制在最大拖拽范围内
+      if (transdir < 0) {
+        const adjustOffset = offset.value + translation * resistance
+        finalOffset = Math.max(adjustOffset, maxOffset - maxOverDrag)
+      } else {
+        const adjustOffset = offset.value + translation * resistance
+        finalOffset = Math.min(adjustOffset, maxOverDrag)
+      }
+      return finalOffset
+    }
     const gesturePan = Gesture.Pan()
-      .onBegin((e) => {
+      .onBegin((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
         if (!step.value) return
         touchfinish.value = false
@@ -702,47 +748,81 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         runOnJS(pauseLoop)()
         preAbsolutePos.value = e[strAbso]
         moveTranstion.value = e[strAbso]
-        moveTime.value = new Date().getTime()
       })
-      .onTouchesMove((e) => {
+      .onUpdate((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - preAbsolutePos.value
+        const moveDistance = e[strAbso] - preAbsolutePos.value
         const eventData = {
-          translation: moveDistance
+          translation: moveDistance,
+          transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
         }
-        // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-        if (!circularShared.value && !canMove(eventData)) {
+        // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
+        const { half } = computeHalf(eventData)
+        if (childrenLength.value > 1 && half) {
+          const { selectedIndex } = getTargetPosition(eventData)
+          currentIndex.value = selectedIndex
+        }
+        // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
+        if (!circularShared.value) {
+          if (canMove(eventData)) {
+            offset.value = moveDistance + offset.value
+          } else {
+            const finalOffset = handleResistanceMove(eventData)
+            offset.value = finalOffset
+          }
+          preAbsolutePos.value = e[strAbso]
           return
         }
+        // 3. 循环更新: 只有一个元素时可滑动，加入阻力
+        if (circularShared.value && childrenLength.value === 1) {
+          const finalOffset = handleResistanceMove(eventData)
+          offset.value = finalOffset
+          preAbsolutePos.value = e[strAbso]
+          return
+        }
+        // 4. 循环更新：正常
         const { isBoundary, resetOffset } = reachBoundary(eventData)
         if (childrenLength.value > 1 && isBoundary && circularShared.value) {
           offset.value = resetOffset
         } else {
           offset.value = moveDistance + offset.value
         }
-        preAbsolutePos.value = touchEventData[strAbso]
+        preAbsolutePos.value = e[strAbso]
       })
-      .onTouchesUp((e) => {
+      .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
         if (touchfinish.value) return
-        const touchEventData = e.changedTouches[0]
-        const moveDistance = touchEventData[strAbso] - moveTranstion.value
         touchfinish.value = true
+        // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
+        const moveDistance = e[strAbso] - preAbsolutePos.value
         const eventData = {
-          translation: moveDistance
+          translation: moveDistance,
+          transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
         }
+        // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
         if (childrenLength.value === 1) {
-          return handleBackInit()
+          offset.value = withTiming(0, {
+            duration: easeDuration,
+            easing: easeMap[easeingFunc]
+          })
+          return
         }
-        // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
+        // 2.非循环状态不可移动态：最后一个元素 和 第一个元素
+        // 非循环支持最后元素可滑动能力后，向左快速移动未超过最大可移动范围一半，因为offset为正值，向左滑动handleBack，默认向上取整
+        // 但是在offset大于0时，取0。[-100, 0](back取0), [0, 100](back取1)， 所以handleLongPress里的处理逻辑需要兼容支持，因此这里直接单独处理，不耦合下方公共的判断逻辑。
         if (!circularShared.value && !canMove(eventData)) {
+          if (eventData.transdir < 0) {
+            handleBack(eventData)
+          } else {
+            handleEnd(eventData)
+          }
           return
         }
-        const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000
-        if (Math.abs(strVelocity) < longPressRatio) {
-          handleLongPress()
+        // 3. 非循环状态可移动态、循环状态, 正常逻辑处理
+        const velocity = e[strVelocity]
+        if (Math.abs(velocity) < longPressRatio) {
+          handleLongPress(eventData)
         } else {
           handleEnd(eventData)
         }

package/lib/runtime/components/react/types/global.d.ts

@@ -40,6 +40,8 @@ declare let global: {
   __formatValue (value: string): string | number
 } & Record<string, any>
 
+declare let mpxGlobal: Record<string, any>
+
 declare module '@react-navigation/native' {
    export function useNavigation (): Record<string, any>
    export function usePreventRemove(

package/lib/runtime/components/react/useAnimationHooks.ts

@@ -14,6 +14,7 @@ import {
 } from 'react-native-reanimated'
 import type { AnimationCallback, WithTimingConfig, SharedValue, AnimatableValue } from 'react-native-reanimated'
 import { error, hasOwn, collectDataset } from '@mpxjs/utils'
+import { useRunOnJSCallback } from './utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -218,13 +219,19 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
       timeStamp: Date.now()
     })
   }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const runOnJSCallbackRef = useRef({
+    withTimingCallback
+  })
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
   // 创建单个animation
   function getAnimation ({ key, value }: { key: string, value: string|number }, { delay, duration, easing }: ExtendWithTimingConfig, callback?: AnimationCallback) {
     const animation = typeof callback === 'function'
       ? withTiming(value, { duration, easing }, (finished, current) => {
         callback(finished, current)
         if (transitionend && finished) {
-          runOnJS(withTimingCallback)(finished, current, duration)
+          runOnJS(runOnJSCallback)('withTimingCallback', finished, current, duration)
         }
       })
       : withTiming(value, { duration, easing })

package/lib/runtime/components/react/utils.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement } from 'react'
+import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement, MutableRefObject } from 'react'
 import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
 import { VarContext, ScrollViewContext, RouteContext } from './context'
@@ -787,13 +787,11 @@ export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled
   const gesture = useMemo(() => {
     return Gesture.Pan()
       .onTouchesDown(() => {
-        'worklet'
-        runOnJS(setStartTimer)()
+        setStartTimer()
       })
       .onTouchesUp(() => {
-        'worklet'
-        runOnJS(setStayTimer)()
-      })
+        setStayTimer()
+      }).runOnJS(true)
   }, [])
 
   if (gestureRef) {
@@ -805,3 +803,19 @@ export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled
     gesture
   }
 }
+
+export function useRunOnJSCallback (callbackMapRef: MutableRefObject<Record<string, AnyFunc>>) {
+  const invokeCallback = useCallback((key: string, ...args: any) => {
+    const callback = callbackMapRef.current[key]
+    // eslint-disable-next-line node/no-callback-literal
+    if (isFunction(callback)) return callback(...args)
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      callbackMapRef.current = {}
+    }
+  }, [])
+
+  return invokeCallback
+}

package/lib/web/processMainScript.js

@@ -49,7 +49,7 @@ import { processAppOption, getComponent } from ${stringifyRequest(loaderContext,
 Vue.use(VueRouter)\n`
 
   if (i18n) {
-    output += buildI18n({ i18n, loaderContext })
+    output += buildI18n({ i18n, isMain: true, loaderContext })
   }
 
   output += buildGlobalParams({

package/lib/web/processScript.js

@@ -7,7 +7,8 @@ const {
   buildComponentsMap,
   getRequireScript,
   buildGlobalParams,
-  stringifyRequest
+  stringifyRequest,
+  buildI18n
 } = require('./script-helper')
 
 module.exports = function (script, {
@@ -24,7 +25,7 @@ module.exports = function (script, {
   wxsModuleMap,
   localComponentsMap
 }, callback) {
-  const { projectRoot, appInfo, webConfig } = loaderContext.getMpx()
+  const { projectRoot, appInfo, webConfig, i18n } = loaderContext.getMpx()
 
   let output = '/* script */\n'
 
@@ -70,6 +71,9 @@ module.exports = function (script, {
       }
 
       content += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, webConfig, hasApp })
+      if (!hasApp && i18n) {
+        content += buildI18n({ i18n, loaderContext })
+      }
       content += getRequireScript({ ctorType, script, loaderContext })
       content += `
   export default processComponentOption({

package/lib/web/script-helper.js

@@ -186,13 +186,17 @@ function buildGlobalParams ({
   return content
 }
 
-function buildI18n ({ i18n, loaderContext }) {
+function buildI18n ({ i18n, isMain, loaderContext }) {
   let i18nContent = ''
   const i18nObj = Object.assign({}, i18n)
-  i18nContent += `
-  import VueI18n from 'vue-i18n'
+  if (!isMain) {
+    i18nContent += `import Vue from 'vue'
+    import Mpx from '@mpxjs/core'\n`
+  }
+  i18nContent += `import VueI18n from 'vue-i18n'
   import { createI18n } from 'vue-i18n-bridge'
-  Vue.use(VueI18n , { bridge: true })\n`
+  if (!Mpx.i18n) {
+    Vue.use(VueI18n , { bridge: true })\n`
   const requestObj = {}
   const i18nKeys = ['messages', 'dateTimeFormats', 'numberFormats']
   i18nKeys.forEach((key) => {
@@ -201,15 +205,16 @@ function buildI18n ({ i18n, loaderContext }) {
       delete i18nObj[`${key}Path`]
     }
   })
-  i18nContent += `  var i18nCfg = ${JSON.stringify(i18nObj)}\n`
+  i18nContent += `    var i18nCfg = ${JSON.stringify(i18nObj)}\n`
   Object.keys(requestObj).forEach((key) => {
-    i18nContent += `  i18nCfg.${key} = require(${requestObj[key]})\n`
+    i18nContent += `    i18nCfg.${key} = require(${requestObj[key]})\n`
   })
   i18nContent += `
-  i18nCfg.legacy = false
-  var i18n = createI18n(i18nCfg, VueI18n)
-  Vue.use(i18n)
-  Mpx.i18n = i18n\n`
+    i18nCfg.legacy = false
+    var i18n = createI18n(i18nCfg, VueI18n)
+    Vue.use(i18n)
+    Mpx.i18n = i18n
+  }\n`
   return i18nContent
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.12",
+  "version": "2.10.13",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.8",
+    "@mpxjs/utils": "^2.10.13",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.8",
+    "@mpxjs/api-proxy": "^2.10.13",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -100,5 +100,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "430dd358e9737dc543d3395fee3c304d19a98702"
+  "gitHead": "1b4a2d4765341ef6c6b74e501f72a0f856f247f9"
 }