@mpxjs/webpack-plugin 2.10.17-unocss.1 → 2.10.18-beta.1

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

@@ -38,6 +38,10 @@ type EventDataType = {
   // onUpdate时根据上一个判断方向，onFinalize根据transformStart判断
   transdir: number
 }
+// 只基于方向 + offset 计算最终的索引
+type EventEndType = {
+  transdir: number
+}
 
 interface SwiperProps {
   children?: ReactNode
@@ -73,6 +77,7 @@ interface SwiperProps {
   'wait-for'?: Array<GestureHandler>
   'simultaneous-handlers'?: Array<GestureHandler>
   disableGesture?: boolean
+  'display-multiple-items'?: number
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
@@ -167,6 +172,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     marginBottom: dotSpacing,
     zIndex: 98
   }
+  const displayMultipleItems = props['display-multiple-items'] || 1
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
   const horizontal = props.vertical !== undefined ? !props.vertical : true
@@ -200,18 +206,19 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const preMarginShared = useSharedValue(preMargin)
   const nextMarginShared = useSharedValue(nextMargin)
   const autoplayShared = useSharedValue(autoplay)
+  const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : [])
   // 默认前后补位的元素个数
-  const patchElmNum = circular ? (preMargin ? 2 : 1) : 0
+  const patchElmNum = (circular && children.length > 1) ? displayMultipleItems + 1 : 0
   const patchElmNumShared = useSharedValue(patchElmNum)
+  const displayMultipleItemsShared = useSharedValue(displayMultipleItems)
   const circularShared = useSharedValue(circular)
-  const children = Array.isArray(props.children) ? props.children.filter(child => child) : (props.children ? [props.children] : [])
   // 对有变化的变量，在worklet中只能使用sharedValue变量，useRef不能更新
   const childrenLength = useSharedValue(children.length)
   const initWidth = typeof normalStyle?.width === 'number' ? normalStyle.width - preMargin - nextMargin : normalStyle.width
   const initHeight = typeof normalStyle?.height === 'number' ? normalStyle.height - preMargin - nextMargin : normalStyle.height
   const dir = horizontal === false ? 'y' : 'x'
   const pstep = dir === 'x' ? initWidth : initHeight
-  const initStep: number = isNaN(pstep) ? 0 : pstep
+  const initStep: number = isNaN(pstep) ? 0 : pstep / displayMultipleItems
   // 每个元素的宽度 or 高度，有固定值直接初始化无则0
   const step = useSharedValue(initStep)
   // 记录选中元素的索引值
@@ -227,8 +234,12 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const preAbsolutePos = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 时移动的距离
   const moveTranstion = useSharedValue(0)
+  // 记录用户手滑动的方向
+  const moveDir = useSharedValue(0)
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
+  // 记录是否首次，首次不能触发bindchange回调
+  const isFirstRef = useRef(true)
 
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
@@ -285,7 +296,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     const { width, height } = e.nativeEvent.layout
     const realWidth = dir === 'x' ? width - preMargin - nextMargin : width
     const realHeight = dir === 'y' ? height - preMargin - nextMargin : height
-    const iStep = dir === 'x' ? realWidth : realHeight
+    const iStep = (dir === 'x' ? realWidth : realHeight) / displayMultipleItems
     if (iStep !== step.value) {
       step.value = iStep
       updateCurrent(propCurrent, iStep)
@@ -344,18 +355,35 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   function renderItems () {
     const intLen = children.length
     let renderChild = children.slice()
+    // if (circular && intLen > 1) {
+    //   // 最前面加最后一个元素
+    //   const lastChild = React.cloneElement(children[intLen - 1] as ReactElement, { key: 'clone0' })
+    //   // 最后面加第一个元素
+    //   const firstChild = React.cloneElement(children[0] as ReactElement, { key: 'clone1' })
+    //   if (preMargin) {
+    //     const lastChild1 = React.cloneElement(children[intLen - 2] as ReactElement, { key: 'clone2' })
+    //     const firstChild1 = React.cloneElement(children[1] as ReactElement, { key: 'clone3' })
+    //     renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1])
+    //   } else {
+    //     renderChild = [lastChild].concat(renderChild).concat([firstChild])
+    //   }
+    // }
     if (circular && intLen > 1) {
-      // 最前面加最后一个元素
-      const lastChild = React.cloneElement(children[intLen - 1] as ReactElement, { key: 'clone0' })
-      // 最后面加第一个元素
-      const firstChild = React.cloneElement(children[0] as ReactElement, { key: 'clone1' })
-      if (preMargin) {
-        const lastChild1 = React.cloneElement(children[intLen - 2] as ReactElement, { key: 'clone2' })
-        const firstChild1 = React.cloneElement(children[1] as ReactElement, { key: 'clone3' })
-        renderChild = [lastChild1, lastChild].concat(renderChild).concat([firstChild, firstChild1])
-      } else {
-        renderChild = [lastChild].concat(renderChild).concat([firstChild])
+      // 动态生成前置补位元素
+      const frontClones = []
+      // 计算补位序列的起始索引。例如 len=3, patch=2 -> start=1 (即从B开始)
+      const startIndex = intLen - (patchElmNum % intLen)
+      for (let i = 0; i < patchElmNum; i++) {
+        const sourceIndex = (startIndex + i) % intLen
+        frontClones.push(React.cloneElement(children[sourceIndex], { key: `clone_front_${i}` }))
+      }
+      // 动态生成后置补位元素
+      const backClones = []
+      for (let i = 0; i < patchElmNum; i++) {
+        const sourceIndex = i % intLen
+        backClones.push(React.cloneElement(children[sourceIndex], { key: `clone_back_${i}` }))
       }
+      renderChild = [...frontClones, ...renderChild, ...backClones]
     }
     const arrChildren = renderChild.map((child, index) => {
       const extraStyle = {} as { [key: string]: any }
@@ -390,7 +418,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       let nextIndex = currentIndex.value
       if (!circularShared.value) {
         // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器
-        if (currentIndex.value === childrenLength.value - 1) {
+        if (currentIndex.value === childrenLength.value - displayMultipleItemsShared.value) {
           pauseLoop()
           return
         }
@@ -456,11 +484,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({
@@ -509,9 +535,10 @@ 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 && bindchange && !isFirstRef.current) {
       runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
+    isFirstRef.current = false
   })
 
   useEffect(() => {
@@ -560,16 +587,17 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       }
     }
   }, [autoplay])
-
   useEffect(() => {
-    if (circular !== circularShared.value) {
+    if (circular !== circularShared.value || patchElmNum !== patchElmNumShared.value || displayMultipleItems !== displayMultipleItemsShared.value) {
       circularShared.value = circular
-      patchElmNumShared.value = circular ? (preMargin ? 2 : 1) : 0
+      patchElmNumShared.value = patchElmNum
+      displayMultipleItemsShared.value = displayMultipleItems
       offset.value = getOffset(currentIndex.value, step.value)
     }
-  }, [circular, preMargin])
+  }, [circular, patchElmNum, displayMultipleItems])
   const { gestureHandler } = useMemo(() => {
-    function getTargetPosition (eventData: EventDataType) {
+    // 基于transdir + 当前offset计算索引
+    function getTargetPosition (eventData: EventEndType) {
       'worklet'
       // 移动的距离
       const { transdir } = eventData
@@ -585,7 +613,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       const moveToIndex = transdir < 0 ? Math.ceil(computedIndex) : Math.floor(computedIndex)
       // 实际应该定位的索引值
       if (!circularShared.value) {
-        selectedIndex = moveToIndex
+        const maxIndex = Math.max(0, childrenLength.value - displayMultipleItemsShared.value)
+        selectedIndex = Math.min(Math.max(moveToIndex, 0), maxIndex)
         moveToTargetPos = selectedIndex * step.value
       } else {
         if (moveToIndex >= childrenLength.value + patchElmNumShared.value) {
@@ -618,7 +647,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       const gestureMovePos = offset.value + translation
       if (!circularShared.value) {
         // 如果只判断区间，中间非滑动状态(handleResistanceMove)向左滑动，突然改为向右滑动，但是还在非滑动态，本应该可滑动判断为了不可滑动
-        const posEnd = -step.value * (childrenLength.value - 1)
+        const posEnd = -step.value * (childrenLength.value - displayMultipleItemsShared.value)
         if (transdir < 0) {
           return gestureMovePos > posEnd
         } else {
@@ -628,7 +657,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         return true
       }
     }
-    function handleEnd (eventData: EventDataType) {
+    function handleEnd (eventData: EventEndType) {
       'worklet'
       const { isCriticalItem, targetOffset, resetOffset, selectedIndex } = getTargetPosition(eventData)
       if (isCriticalItem) {
@@ -654,7 +683,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         })
       }
     }
-    function handleBack (eventData: EventDataType) {
+    function handleBack (eventData: EventEndType) {
       'worklet'
       const { transdir } = eventData
       // 向右滑动的back:trans < 0， 向左滑动的back: trans < 0
@@ -675,10 +704,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
       })
     }
-    // 当前的offset和index多对应的offset进行对比，判断是否超过一半
-    function computeHalf (eventData: EventDataType) {
+    function computeHalf () {
       'worklet'
-      const { transdir } = eventData
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
       if (circularShared.value) {
@@ -687,32 +714,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 正常事件中拿到的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(runOnJSCallback)('resumeLoop')
-      } else if (isTriggerUpdateHalf) {
-        // 如果触发了onUpdate时的索引变更
-        handleEnd(eventData)
-      } else if (half) {
-        handleEnd(eventData)
-      } else {
-        handleBack(eventData)
-      }
+      return half
     }
     function reachBoundary (eventData: EventDataType) {
       'worklet'
       // 1. 基于当前的offset和translation判断是否超过当前边界值
       const { translation } = eventData
-      const boundaryStart = -patchElmNumShared.value * step.value
+      // 与终点的逻辑对齐，都是超过补位元素对应的起点offset
+      const boundaryStart = 0
       const boundaryEnd = -(childrenLength.value + patchElmNumShared.value) * step.value
       const moveToOffset = offset.value + translation
       let isBoundary = false
@@ -729,7 +738,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         // 超过边界的距离
         const exceedLength = Math.abs(boundaryStart) - Math.abs(moveToOffset)
         // 计算对标正常元素所在的offset
-        resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value + (step.value - exceedLength)
+        resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value - exceedLength
       }
       return {
         isBoundary,
@@ -742,7 +751,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       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
+      const maxOffset = translation < 0 ? -(childrenLength.value - displayMultipleItemsShared.value) * step.value : 0
       let resistance = 0.1
       let overDrag = 0
       let finalOffset = 0
@@ -766,6 +775,14 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       }
       return finalOffset
     }
+    // 设置手势移动的方向
+    function setMoveDir (curAbsoPos: number) {
+      'worklet'
+      const distance = curAbsoPos - preAbsolutePos.value
+      if (distance) {
+        moveDir.value = curAbsoPos - preAbsolutePos.value
+      }
+    }
     const gesturePan = Gesture.Pan()
       .onBegin((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
@@ -785,9 +802,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           transdir: moveDistance
         }
         // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
-        const { half } = computeHalf(eventData)
-        if (childrenLength.value > 1 && half) {
-          const { selectedIndex } = getTargetPosition(eventData)
+        const offsetHalf = computeHalf()
+        if (childrenLength.value > 1 && offsetHalf) {
+          const { selectedIndex } = getTargetPosition({ transdir: moveDistance } as EventEndType)
           currentIndex.value = selectedIndex
         }
         // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
@@ -798,6 +815,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             const finalOffset = handleResistanceMove(eventData)
             offset.value = finalOffset
           }
+          setMoveDir(e[strAbso])
           preAbsolutePos.value = e[strAbso]
           return
         }
@@ -805,6 +823,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         if (circularShared.value && childrenLength.value === 1) {
           const finalOffset = handleResistanceMove(eventData)
           offset.value = finalOffset
+          setMoveDir(e[strAbso])
           preAbsolutePos.value = e[strAbso]
           return
         }
@@ -815,6 +834,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         } else {
           offset.value = moveDistance + offset.value
         }
+        setMoveDir(e[strAbso])
         preAbsolutePos.value = e[strAbso]
       })
       .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
@@ -822,10 +842,21 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         if (touchfinish.value) return
         touchfinish.value = true
         // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
+        // 正常状态下基于onUpdate时的moveDir判断方向、未触发onUpdate的则基于onBegin的moveTranstion判断方向
         const moveDistance = e[strAbso] - preAbsolutePos.value
+        // 默认兜底方向: 以onBegin为起点，因一些原因未触发onUpdate但是触发了位移
+        const defaultDir = e[strAbso] - moveTranstion.value
+        // 实时方向：方向基于onUpdate时的方向，滑动的速度超过阈值时基于实时的滑动方向计算
+        const realtimeData = {
+          transdir: moveDir.value || defaultDir
+        }
+        // 起始方向：基于用户起始手势
+        const originData = {
+          transdir: defaultDir
+        }
         const eventData = {
           translation: moveDistance,
-          transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
+          transdir: realtimeData.transdir
         }
         // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
         if (childrenLength.value === 1) {
@@ -839,19 +870,35 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         // 非循环支持最后元素可滑动能力后，向左快速移动未超过最大可移动范围一半，因为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)
+          if (realtimeData.transdir < 0) {
+            handleBack(realtimeData)
           } else {
-            handleEnd(eventData)
+            handleEnd(realtimeData)
           }
           return
         }
         // 3. 非循环状态可移动态、循环状态, 正常逻辑处理
         const velocity = e[strVelocity]
-        if (Math.abs(velocity) < longPressRatio) {
-          handleLongPress(eventData)
+        // 用于判断是否超过一半，基于索引判断是否超过一半不可行(1.滑动过程中索引会变更导致计算反向, 2.边界场景会更新offset也会导致基于索引+offset判断实效)
+        const tmp = offset.value % step.value > step.value / 2
+        // 小于0手向左滑动
+        const offsetHalf = originData.transdir < 0 ? tmp : !tmp
+        if (offsetHalf) {
+          if (Math.abs(velocity) > longPressRatio) {
+            // 超过速度阈值，按照实时方向(快速来回滑动)
+            handleEnd(realtimeData)
+          } else {
+            // 超过速度阈值，按照起始方向（慢速长按）
+            handleEnd(originData)
+          }
         } else {
-          handleEnd(eventData)
+          if (Math.abs(velocity) > longPressRatio) {
+            // 超过速度阈值，按照实时方向(快速来回滑动)
+            handleEnd(realtimeData)
+          } else {
+            // 超过速度阈值，按照起始方向（慢速长按）
+            handleBack(originData)
+          }
         }
       })
       .withRef(swiperGestureRef)

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

@@ -234,7 +234,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         }
         break
       case 'postMessage':
-        bindmessage && bindmessage(getCustomEvent('messsage', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
+        bindmessage && bindmessage(getCustomEvent('message', {}, { // RN组件销毁顺序与小程序不一致，所以改成和支付宝消息一致
           detail: {
             data: params[0]?.data
           }

package/lib/runtime/components/react/tsconfig.json

@@ -3,7 +3,7 @@
   "include": [
     "./"
   ],
-  "exclude": [],
+  "exclude": ["./dist/"],
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",

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

@@ -550,7 +550,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   // transform rpx to px
   transformBoxShadow(normalStyle)
   // transform 字符串格式转化数组格式(先转数组再处理css var)
-  transformTransform(styleObj)
+  transformTransform(normalStyle)
 
   return {
     hasVarDec,
@@ -755,10 +755,14 @@ export function getCurrentPage (pageId: number | null | undefined) {
 
 export function renderImage (
   imageProps: ImageProps | FastImageProps,
-  enableFastImage = false
+  enableFastImage = true
 ) {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const Component: React.ComponentType<ImageProps | FastImageProps> = enableFastImage ? require('@d11/react-native-fast-image') : Image
+  let Component: React.ComponentType<ImageProps | FastImageProps> = Image
+  if (enableFastImage) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const fastImageModule = require('@d11/react-native-fast-image')
+    Component = fastImageModule.default || fastImageModule
+  }
   return createElement(Component, imageProps)
 }
 

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -380,7 +380,7 @@
             const top = item.offsetTop
             const width = item.offsetWidth
             const height = item.offsetHeight
-    
+
             minLeft = getMinLength(minLeft, left)
             minTop = getMinLength(minTop, top)
             maxRight = getMaxLength(maxRight, left + width)
@@ -414,6 +414,9 @@
           if (this.bs) this.bs.refresh()
         }
       },
+      forceUpdateRefreshVersion () {
+        this.refreshVersion++
+      },
       compare(num1, num2, scale = 1) {
         return Math.abs(num1 - num2) < scale
       },
@@ -588,4 +591,4 @@
               background: rgba(255, 255, 255, .7)
             100%
               background: rgba(255, 255, 255, .3)
-</style>
+</style>