@mpxjs/webpack-plugin 2.10.15-2 → 2.10.15-4

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

@@ -100,15 +100,6 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             layoutRef
         }, propsRef.current));
     }, []);
-    // 节流版本的 change 事件触发
-    const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
-        'worklet';
-        const now = Date.now();
-        if (now - lastChangeTime.value >= changeThrottleTime) {
-            lastChangeTime.value = now;
-            runOnJS(runOnJSCallback)('handleTriggerChange', { x, y, type });
-        }
-    }, [changeThrottleTime]);
     useEffect(() => {
         runOnUI(() => {
             if (offsetX.value !== x || offsetY.value !== y) {
@@ -302,6 +293,15 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         triggerEndOnJS
     });
     const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
+    // 节流版本的 change 事件触发
+    const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
+        'worklet';
+        const now = Date.now();
+        if (now - lastChangeTime.value >= changeThrottleTime) {
+            lastChangeTime.value = now;
+            runOnJS(runOnJSCallback)('handleTriggerChange', { x, y, type });
+        }
+    }, [changeThrottleTime]);
     const gesture = useMemo(() => {
         const handleTriggerMove = (e) => {
             'worklet';

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

@@ -120,6 +120,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const strVelocity = 'velocity' + dir.toUpperCase();
     // 标识手指触摸和抬起, 起点在onBegin
     const touchfinish = useSharedValue(true);
+    // 记录onUpdate时的方向，用于进行onFinalize中的值修正
+    const preUpdateTransDir = useSharedValue(0);
     // 记录上一帧的绝对定位坐标
     const preAbsolutePos = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 时移动的距离
@@ -325,11 +327,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
             resumeLoop
         };
     }, []);
-    function handleSwiperChange(current, pCurrent) {
-        if (pCurrent !== currentIndex.value) {
-            const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
-            bindchange && bindchange(eventData);
-        }
+    function handleSwiperChange(current) {
+        const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
+        bindchange && bindchange(eventData);
     }
     const runOnJSCallbackRef = useRef({
         loop,
@@ -379,7 +379,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && bindchange) {
+        if (newIndex !== preIndex && preIndex !== null && preIndex !== undefined && bindchange) {
             runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent);
         }
     });
@@ -411,9 +411,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     }, [children.length]);
     useEffect(() => {
-        // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+        // 1. 如果用户在touch的过程中, 外部更新了current以内部为准（小程序表现）
         // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
-        if (propCurrent !== currentIndex.value) {
+        if (propCurrent !== currentIndex.value && touchfinish.value) {
             updateCurrent(propCurrent, step.value);
         }
     }, [propCurrent]);
@@ -662,6 +662,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 translation: moveDistance,
                 transdir: moveDistance
             };
+            preUpdateTransDir.value = moveDistance;
             // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
             const { half } = computeHalf(eventData);
             if (childrenLength.value > 1 && half) {
@@ -702,11 +703,17 @@ const SwiperWrapper = forwardRef((props, ref) => {
             if (touchfinish.value)
                 return;
             touchfinish.value = true;
+            /**
+             * 安卓修正
+             * 问题：部分安卓机型onFinalize中拿到的absoluteX 有问题
+             * 案例：比如手指从右向左滑的时候，onUpdate拿到的是241.64346313476562， 而onFinalize中拿到的是241.81817626953125，理论上onFinalize中应该比onUpdate小才对吧
+             * 解决方式：修正
+            */
             // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
             const moveDistance = e[strAbso] - preAbsolutePos.value;
             const eventData = {
                 translation: moveDistance,
-                transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
+                transdir: Math.abs(moveDistance) > 1 ? moveDistance : preUpdateTransDir.value
             };
             // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
             if (childrenLength.value === 1) {

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

@@ -200,16 +200,6 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     )
   }, [])
 
-  // 节流版本的 change 事件触发
-  const handleTriggerChangeThrottled = useCallback(({ x, y, type }: { x: number; y: number; type?: string }) => {
-    'worklet'
-    const now = Date.now()
-    if (now - lastChangeTime.value >= changeThrottleTime) {
-      lastChangeTime.value = now
-      runOnJS(runOnJSCallback)('handleTriggerChange', { x, y, type })
-    }
-  }, [changeThrottleTime])
-
   useEffect(() => {
     runOnUI(() => {
       if (offsetX.value !== x || offsetY.value !== y) {
@@ -414,6 +404,16 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   })
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
 
+  // 节流版本的 change 事件触发
+  const handleTriggerChangeThrottled = useCallback(({ x, y, type }: { x: number; y: number; type?: string }) => {
+    'worklet'
+    const now = Date.now()
+    if (now - lastChangeTime.value >= changeThrottleTime) {
+      lastChangeTime.value = now
+      runOnJS(runOnJSCallback)('handleTriggerChange', { x, y, type })
+    }
+  }, [changeThrottleTime])
+
   const gesture = useMemo(() => {
     const handleTriggerMove = (e: GestureTouchEvent) => {
       'worklet'

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

@@ -207,6 +207,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const strVelocity = 'velocity' + dir.toUpperCase() as StrVelocityType
   // 标识手指触摸和抬起, 起点在onBegin
   const touchfinish = useSharedValue(true)
+  // 记录onUpdate时的方向，用于进行onFinalize中的值修正
+  const preUpdateTransDir = useSharedValue(0)
   // 记录上一帧的绝对定位坐标
   const preAbsolutePos = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 时移动的距离
@@ -429,11 +431,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     }
   }, [])
 
-  function handleSwiperChange (current: number, pCurrent: number) {
-    if (pCurrent !== currentIndex.value) {
-      const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
-      bindchange && bindchange(eventData)
-    }
+  function handleSwiperChange (current: number) {
+    const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+    bindchange && bindchange(eventData)
   }
 
   const runOnJSCallbackRef = useRef({
@@ -482,7 +482,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-    if (newIndex !== preIndex && bindchange) {
+    if (newIndex !== preIndex && preIndex !== null && preIndex !== undefined && bindchange) {
       runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
   })
@@ -517,9 +517,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [children.length])
 
   useEffect(() => {
-    // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
+    // 1. 如果用户在touch的过程中, 外部更新了current以内部为准（小程序表现）
     // 2. 手指滑动过程中更新索引，外部会把current再传入进来，导致offset直接更新，增加判断不同才更新
-    if (propCurrent !== currentIndex.value) {
+    if (propCurrent !== currentIndex.value && touchfinish.value) {
       updateCurrent(propCurrent, step.value)
     }
   }, [propCurrent])
@@ -757,6 +757,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           translation: moveDistance,
           transdir: moveDistance
         }
+        preUpdateTransDir.value = moveDistance
         // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
         const { half } = computeHalf(eventData)
         if (childrenLength.value > 1 && half) {
@@ -794,11 +795,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         'worklet'
         if (touchfinish.value) return
         touchfinish.value = true
+        /**
+         * 安卓修正
+         * 问题：部分安卓机型onFinalize中拿到的absoluteX 有问题
+         * 案例：比如手指从右向左滑的时候，onUpdate拿到的是241.64346313476562， 而onFinalize中拿到的是241.81817626953125，理论上onFinalize中应该比onUpdate小才对吧
+         * 解决方式：修正
+        */
         // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
         const moveDistance = e[strAbso] - preAbsolutePos.value
         const eventData = {
           translation: moveDistance,
-          transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
+          transdir: Math.abs(moveDistance) > 1 ? moveDistance : preUpdateTransDir.value
         }
         // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
         if (childrenLength.value === 1) {

package/lib/runtime/components/web/filterTag.js

@@ -88,7 +88,16 @@ function parseHTML (html, options) {
           match.end = index
           handleStartTag(match)
         }
+        continue
+      }
+
+      // If we reach here, the `<` at position 0 does not start a valid tag/comment/end tag
+      // Treat it as plain text to avoid infinite loop on stray '<'
+      if (options.chars) {
+        options.chars('<')
       }
+      advance(1)
+      continue
     }
     let text, rest, next
     if (textEnd >= 0) {

package/lib/runtime/optionProcessor.js

@@ -14,7 +14,8 @@ export function processComponentOption (
     componentGenerics,
     genericsInfo,
     wxsMixin,
-    hasApp
+    hasApp,
+    disablePageTransition
   }
 ) {
   // 局部注册页面和组件中依赖的组件
@@ -79,7 +80,7 @@ registered in parent context!`)
         transitionName: ''
       }
     }
-    if (!global.__mpx.config.webConfig.disablePageTransition) {
+    if (!disablePageTransition) {
       option.watch = {
         $route: {
           handler () {

package/lib/template-compiler/compiler.js

@@ -1936,7 +1936,18 @@ function processAttrs (el, options) {
   el.attrsList.forEach((attr) => {
     const isTemplateData = el.tag === 'template' && attr.name === 'data'
     const needWrap = isTemplateData && mode !== 'swan'
-    const value = needWrap ? `{${attr.value}}` : attr.value
+    let value = needWrap ? `{${attr.value}}` : attr.value
+
+    // 修复React Native环境下属性值中插值表达式带空格的问题
+    if (isReact(mode) && typeof value === 'string') {
+      // 检查是否为带空格的插值表达式
+      const trimmedValue = value.trim()
+      if (trimmedValue.startsWith('{{') && trimmedValue.endsWith('}}')) {
+        // 如果是纯插值表达式但带有前后空格，则使用去除空格后的值进行解析
+        value = trimmedValue
+      }
+    }
+
     const parsed = parseMustacheWithContext(value)
     if (parsed.hasBinding) {
       // 该属性判断用于提供给运行时对于计算属性作为props传递时提出警告

package/lib/web/processScript.js

@@ -27,6 +27,8 @@ module.exports = function (script, {
 }, callback) {
   const { projectRoot, appInfo, webConfig, i18n } = loaderContext.getMpx()
 
+  const { disablePageTransition = true } = webConfig
+
   let output = '/* script */\n'
 
   let scriptSrcMode = srcMode
@@ -86,7 +88,8 @@ module.exports = function (script, {
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},
     wxsMixin: getWxsMixin(wxsModules),
-    hasApp: ${hasApp}
+    hasApp: ${hasApp},
+    disablePageTransition: ${JSON.stringify(disablePageTransition)},
   })\n`
       return content
     }

package/lib/web/processTemplate.js

@@ -35,11 +35,13 @@ module.exports = function (template, {
   let output = '/* template */\n'
 
   if (ctorType === 'app') {
-    const { el } = webConfig
+    const { el, disablePageTransition = true } = webConfig
     const idName = (el && el.match(/#(.*)/) && el.match(/#(.*)/)[1]) || 'app'
     template = {
       tag: 'template',
-      content: `<div id="${idName}"><transition :name="transitionName"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></transition></div>`
+      content: disablePageTransition
+        ? `<div id="${idName}"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></div>`
+        : `<div id="${idName}"><transition :name="transitionName"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></transition></div>`
     }
     builtInComponentsMap['mpx-keep-alive'] = {
       resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { isComponent: true })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.15-2",
+  "version": "2.10.15-4",
   "description": "mpx compile core",
   "keywords": [
     "mpx"