@mpxjs/webpack-plugin 2.10.15 → 2.10.16

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

@@ -0,0 +1,444 @@
+/**
+ * ✔ min 最小值
+ * ✔ max 最大值
+ * ✔ step 步长
+ * ✔ disabled 是否禁用
+ * ✔ value 当前取值
+ * ✔ color 背景条的颜色（已废弃，使用 backgroundColor）
+ * ✔ selected-color 已选择的颜色（已废弃，使用 activeColor）
+ * ✔ activeColor 已选择的颜色
+ * ✔ backgroundColor 背景条的颜色
+ * ✔ block-size 滑块的大小
+ * ✔ block-color 滑块的颜色
+ * ✘ show-value 是否显示当前 value
+ * ✔ bindchange 完成一次拖动后触发的事件
+ * ✔ bindchanging 拖动过程中触发的事件
+ */
+import {
+  JSX,
+  useRef,
+  forwardRef,
+  useEffect,
+  useState,
+  createElement,
+  ForwardedRef,
+  useContext,
+  useMemo
+} from 'react'
+import {
+  View,
+  ViewStyle
+} from 'react-native'
+import { GestureDetector, Gesture, GestureStateChangeEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler'
+import Animated, { useSharedValue, useAnimatedStyle, runOnJS } from 'react-native-reanimated'
+import { warn } from '@mpxjs/utils'
+
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils'
+import Portal from './mpx-portal'
+import { FormContext, FormFieldValue } from './context'
+
+export interface SliderProps {
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  value?: number
+  color?: string
+  'selected-color'?: string
+  activeColor?: string
+  backgroundColor?: string
+  'block-size'?: number
+  'block-color'?: string
+  name?: string
+  bindchange?: (event: any) => void
+  catchchange?: (event: any) => void
+  bindchanging?: (event: any) => void
+  catchchanging?: (event: any) => void
+  style?: ViewStyle & Record<string, any>
+  'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+}
+
+const Slider = forwardRef<
+  HandlerRef<View, SliderProps>,
+  SliderProps
+>((props: SliderProps, ref: ForwardedRef<HandlerRef<View, SliderProps>>): JSX.Element => {
+  const {
+    min: rawMin = 0,
+    max: rawMax = 100,
+    step: rawStep = 1,
+    disabled = false,
+    value: rawValue,
+    color,
+    'selected-color': selectedColor,
+    activeColor = selectedColor || color || '#1aad19',
+    backgroundColor = color || '#e9e9e9',
+    'block-size': rawBlockSize = 28,
+    'block-color': blockColor = '#ffffff',
+    name,
+    style = {},
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+
+  // 确保数值类型正确
+  const min = typeof rawMin === 'string' ? parseFloat(rawMin) : rawMin
+  const max = typeof rawMax === 'string' ? parseFloat(rawMax) : rawMax
+  const step = typeof rawStep === 'string' ? parseFloat(rawStep) : rawStep
+  const value = rawValue !== undefined ? (typeof rawValue === 'string' ? parseFloat(rawValue) : rawValue) : undefined
+  const blockSize = typeof rawBlockSize === 'string' ? parseFloat(rawBlockSize) : rawBlockSize
+
+  // 如果没有提供 value，则使用 min 作为默认值
+  const defaultValue = value !== undefined ? value : min
+  const nodeRef = useRef(null)
+  const trackRef = useRef(null)
+  const [currentValue, setCurrentValue] = useState(defaultValue)
+  const [trackWidth, setTrackWidth] = useState(0)
+
+  const thumbPosition = useSharedValue(0)
+  const isDragging = useSharedValue(false)
+  const startDragPosition = useSharedValue(0) // 记录拖拽开始时的位置
+  const startDragValue = useSharedValue(0) // 记录拖拽开始时的值
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined
+
+  const propsRef = useRef(props)
+  propsRef.current = props
+
+  const formContext = useContext(FormContext)
+
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
+
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    hasPositionFixed
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef
+  })
+
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
+
+  // 使用 useRunOnJSCallback 处理手势回调
+  const runOnJSCallbackRef = useRef({
+    triggerChangeEvent: (newValue: number) => {
+      setCurrentValue(newValue)
+      const currentProps = propsRef.current
+      const changeHandler = currentProps.bindchange || currentProps.catchchange
+      if (changeHandler) {
+        changeHandler(getCustomEvent('change', {}, { layoutRef, detail: { value: newValue } }, currentProps))
+      }
+    },
+    triggerChangingEvent: (newValue: number) => {
+      const currentProps = propsRef.current
+      const changingHandler = currentProps.bindchanging || currentProps.catchchanging
+      if (changingHandler) {
+        changingHandler(getCustomEvent('changing', {}, { layoutRef, detail: { value: newValue } }, currentProps))
+      }
+    }
+  })
+  const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
+
+  // 限制步长，确保 step 大于 0，并且可被 (max - min) 整除
+  const validateStep = (step: number, min: number, max: number): number => {
+    if (step <= 0) return 1
+    if ((max - min) % step !== 0) {
+      warn(`Step ${step} is not a divisor of range ${max - min}`)
+    }
+    return step
+  }
+
+  const validStep = validateStep(step, min, max)
+
+  // 将值约束在 min-max 范围内，并按步长对齐
+  const constrainValue = (val: number, minVal: number = min, maxVal: number = max, stepVal: number = validStep): number => {
+    const constrained = Math.max(minVal, Math.min(maxVal, val))
+    const steps = Math.round((constrained - minVal) / stepVal)
+    return minVal + steps * stepVal
+  }
+
+  // 计算滑块位置
+  const getThumbPosition = (val: number, trackW: number = trackWidth, minVal: number = min, maxVal: number = max): number => {
+    if (trackW === 0) return 0
+    const percentage = (val - minVal) / (maxVal - minVal)
+    const position = percentage * trackW
+    return position
+  }
+
+  // 手势处理
+  const panGesture = useMemo(() => {
+    const getThumbPositionWorklet = (val: number, trackW: number, minVal: number, maxVal: number): number => {
+      'worklet'
+      if (trackW === 0) return 0
+      const percentage = (val - minVal) / (maxVal - minVal)
+      return percentage * trackW
+    }
+
+    const constrainValueWorklet = (val: number, minVal: number, maxVal: number, stepVal: number): number => {
+      'worklet'
+      const constrained = Math.max(minVal, Math.min(maxVal, val))
+      const steps = Math.round((constrained - minVal) / stepVal)
+      return minVal + steps * stepVal
+    }
+
+    return Gesture.Pan()
+      .enabled(!disabled) // 通过手势启用状态控制是否可拖拽
+      .onBegin(() => {
+        'worklet'
+        if (trackWidth === 0) return
+        isDragging.value = true
+        // 记录拖拽开始时的位置 - 使用当前的动画位置
+        startDragPosition.value = thumbPosition.value
+        // 根据当前位置反推值
+        const percentage = thumbPosition.value / trackWidth
+        const currentVal = min + percentage * (max - min)
+        startDragValue.value = constrainValueWorklet(currentVal, min, max, validStep)
+      })
+      .onUpdate((event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        'worklet'
+        if (trackWidth === 0) return
+
+        // 基于拖拽开始位置计算新位置
+        const newX = startDragPosition.value + event.translationX
+        const clampedX = Math.max(0, Math.min(trackWidth, newX))
+
+        // 计算新值
+        const percentage = clampedX / trackWidth
+        const rawValue = min + percentage * (max - min)
+        const newValue = constrainValueWorklet(rawValue, min, max, validStep)
+
+        // 更新滑块位置 - 使用约束后的值对应的位置
+        const constrainedPosition = getThumbPositionWorklet(newValue, trackWidth, min, max)
+        thumbPosition.value = constrainedPosition
+
+        // 只触发 changing 事件，不更新 currentValue（避免干扰拖拽）
+        runOnJS(runOnJSCallback)('triggerChangingEvent', newValue)
+      })
+      .onEnd((event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        'worklet'
+        isDragging.value = false
+
+        // 基于拖拽开始位置计算最终位置
+        const newX = startDragPosition.value + event.translationX
+        const clampedX = Math.max(0, Math.min(trackWidth, newX))
+        const percentage = clampedX / trackWidth
+        const rawValue = min + percentage * (max - min)
+        const finalValue = constrainValueWorklet(rawValue, min, max, validStep)
+
+        // 确保滑块位置与最终值匹配
+        const finalPosition = getThumbPositionWorklet(finalValue, trackWidth, min, max)
+        thumbPosition.value = finalPosition
+
+        // 更新 currentValue 并触发 change 事件
+        runOnJS(runOnJSCallback)('triggerChangeEvent', finalValue)
+      })
+  }, [disabled, trackWidth, min, max, validStep, runOnJSCallback])
+
+  // 当 value 属性变化时更新位置
+  useEffect(() => {
+    const newValue = constrainValue(defaultValue)
+    setCurrentValue(newValue)
+    // 同时更新动画位置
+    thumbPosition.value = getThumbPosition(newValue)
+  }, [defaultValue, min, max, validStep])
+
+  // 当 trackWidth 变化时更新滑块位置
+  useEffect(() => {
+    // 只在非拖拽状态下更新位置
+    if (!isDragging.value) {
+      thumbPosition.value = getThumbPosition(currentValue)
+    }
+  }, [trackWidth, currentValue])
+
+  // 动画样式
+  const animatedThumbStyle = useAnimatedStyle(() => {
+    const blockSizeNum = Math.max(12, Math.min(28, blockSize))
+    const trackHeight = 4
+    return {
+      position: 'absolute',
+      top: -((blockSizeNum - trackHeight) / 2),
+      left: Math.max(0, Math.min(trackWidth - blockSizeNum, thumbPosition.value - (blockSizeNum / 2))),
+      width: blockSizeNum,
+      height: blockSizeNum,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  })
+
+  // 轨道布局回调
+  const onTrackLayout = (event: any) => {
+    const { width } = event.nativeEvent.layout
+    setTrackWidth(width)
+  }
+
+  // 表单相关处理
+  const resetValue = () => {
+    const currentProps = propsRef.current
+    const currentValue = currentProps.value !== undefined ? currentProps.value : currentProps.min || 0
+    const parsedValue = typeof currentValue === 'string' ? parseFloat(currentValue) : currentValue
+    const currentMin = typeof currentProps.min === 'string' ? parseFloat(currentProps.min) : (currentProps.min || 0)
+    const currentMax = typeof currentProps.max === 'string' ? parseFloat(currentProps.max) : (currentProps.max || 100)
+    const currentStep = typeof currentProps.step === 'string' ? parseFloat(currentProps.step) : (currentProps.step || 1)
+    const resetVal = parsedValue !== undefined ? parsedValue : currentMin
+    const validatedStep = validateStep(currentStep, currentMin, currentMax)
+    const constrainedVal = constrainValue(resetVal, currentMin, currentMax, validatedStep)
+    setCurrentValue(constrainedVal)
+    thumbPosition.value = getThumbPosition(constrainedVal, trackWidth, currentMin, currentMax)
+  }
+
+  const getValue = () => {
+    return currentValue
+  }
+
+  if (formValuesMap) {
+    if (!name) {
+      warn('If a form component is used, the name attribute is required.')
+    } else {
+      formValuesMap.set(name, { getValue, resetValue })
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      if (formValuesMap && name) {
+        formValuesMap.delete(name)
+      }
+    }
+  }, [])
+
+  // 样式定义
+  const blockSizeNum = Math.max(12, Math.min(28, blockSize))
+  const trackHeight = 4
+
+  const containerStyle: ViewStyle = extendObject({} as ViewStyle, {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    minHeight: Math.max(blockSizeNum + 8, 40),
+    paddingHorizontal: 14 // 固定内边距，不受 block-size 影响
+  }, normalStyle, layoutStyle)
+
+  const trackStyle: ViewStyle = {
+    flex: 1,
+    height: trackHeight,
+    backgroundColor,
+    borderRadius: trackHeight / 2,
+    position: 'relative'
+  }
+
+  // 动画进度条样式
+  const animatedProgressStyle = useAnimatedStyle(() => {
+    return {
+      height: '100%',
+      backgroundColor: activeColor,
+      borderRadius: trackHeight / 2,
+      width: Math.max(0, thumbPosition.value)
+    }
+  })
+
+  const thumbStyle: ViewStyle = {
+    width: blockSizeNum,
+    height: blockSizeNum,
+    backgroundColor: blockColor,
+    borderRadius: blockSizeNum / 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4
+  }
+
+  const innerProps = useInnerProps(
+    extendObject({}, props, layoutProps, {
+      ref: nodeRef
+    }),
+    [
+      'min',
+      'max',
+      'step',
+      'disabled',
+      'value',
+      'color',
+      'selected-color',
+      'activeColor',
+      'backgroundColor',
+      'block-size',
+      'block-color',
+      'bindchange',
+      'catchchange',
+      'bindchanging',
+      'catchchanging'
+    ],
+    { layoutRef }
+  )
+
+  const sliderContent = createElement(
+    View,
+    extendObject({}, innerProps, { style: containerStyle }),
+    // 轨道容器
+    createElement(
+      View,
+      {
+        style: trackStyle,
+        onLayout: onTrackLayout,
+        ref: trackRef
+      },
+      // 进度条 - 使用动画样式
+      createElement(Animated.View, {
+        style: animatedProgressStyle
+      }),
+      // 滑块容器
+      createElement(
+        GestureDetector,
+        {
+          gesture: panGesture
+        },
+        createElement(
+          Animated.View,
+          {
+            style: [animatedThumbStyle]
+          },
+          // 滑块
+          createElement(View, {
+            style: thumbStyle
+          })
+        )
+      )
+    )
+  )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, sliderContent)
+  }
+
+  return sliderContent
+})
+
+Slider.displayName = 'MpxSlider'
+export default Slider

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

@@ -287,16 +287,13 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       imageProps.resizeMode = 'stretch'
-      if (type === 'linear') {
-        const dimensionWidth = calcPercent(width as NumberVal, layoutWidth) || 0
-        const dimensionHeight = calcPercent(height as NumberVal, layoutHeight) || 0
-        // ios 上 linear 组件只要重新触发渲染，在渲染过程中 width 或者 height 被设置为 0，即使后面再更新为正常宽高，也会渲染不出来
-        if (dimensionWidth && dimensionHeight) {
-          dimensions = {
-            width: dimensionWidth,
-            height: dimensionHeight
-          } as { width: NumberVal, height: NumberVal }
-        }
+      if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+        // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
+        // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
+        dimensions = {
+          width: 0,
+          height: 0
+        } as { width: NumberVal, height: NumberVal }
       } else {
         dimensions = {
           width: isPercent(width) ? width : +width,

package/lib/runtime/components/web/mpx-input.vue

@@ -56,7 +56,7 @@
           if (val !== -1) this.setSelectionRange(undefined, val)
         },
         immediate: true
-      }
+      },
     },
     render (createElement) {
       const mergeBefore = {

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

@@ -4,10 +4,12 @@
   import { processSize } from '../../utils'
   import BScroll from '@better-scroll/core'
   import PullDown from '@better-scroll/pull-down'
+  import MouseWheel from '@better-scroll/mouse-wheel'
   import throttle from 'lodash/throttle'
   import debounce from 'lodash/debounce'
 
   BScroll.use(PullDown)
+  BScroll.use(MouseWheel)
 
   let mutationObserver = null
   let resizeObserver = null
@@ -222,7 +224,11 @@
           bounce: false,
           stopPropagation: true,
           bindToWrapper: true,
-          eventPassthrough: (this.scrollX && 'vertical') || (this.scrollY && 'horizontal') || ''
+          eventPassthrough: (this.scrollX && 'vertical') || (this.scrollY && 'horizontal') || '',
+          mouseWheel: {
+            speed: 20,
+            easeTime: 300
+          }
         }
         if (this.refresherEnabled) {
           originBsOptions.bounce = true

package/lib/runtime/components/web/mpx-video.vue

@@ -148,6 +148,11 @@
       },
       controls: function (show) {
         this.$emit('controlstoggle', inheritEvent('controlstoggle', {}, { show }))
+      },
+      objectFit (val) {
+        if (this._player && this._player.video) {
+          this._player.video.style.objectFit = val
+        }
       }
     },
     mounted () {
@@ -189,6 +194,9 @@
         if (this.initialTime) {
           this._player.seek(this.initialTime)
         }
+        if (this.objectFit) {
+          this._player.video.style.objectFit = this.objectFit
+        }
       },
       initStyle () {
 
@@ -239,7 +247,10 @@
 
         this._player.on('progress', (e) => {
           const eNode = e.target
-          const buffered = (eNode?.buffered?.end(0)) / (eNode?.duration)
+          let buffered = 0
+          if (eNode?.buffered && eNode.buffered.length > 0) {
+            buffered = (eNode.buffered.end(0)) / (eNode?.duration)
+          }
           this.$emit('progress', inheritEvent('progress', e, { buffered: buffered * 100 }))
         })
 

package/lib/runtime/optionProcessor.js

@@ -108,7 +108,9 @@ registered in parent context!`)
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
-  if (extendOptions) extend(component, extendOptions)
+  if (extendOptions && !component.__mpxExtended) {
+    extend(component, extendOptions, { __mpxExtended: true })
+  }
   return component
 }
 

package/lib/runtime/optionProcessorReact.js

@@ -5,7 +5,9 @@ import { extend } from './utils'
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
-  if (extendOptions) Object.assign(component, extendOptions)
+  if (extendOptions && !component.__mpxExtended) {
+    extend(component, extendOptions, { __mpxExtended: true })
+  }
   return component
 }
 
@@ -15,7 +17,7 @@ export function getAsyncSuspense (commonProps) {
     result = memo(forwardRef(function (props, ref) {
       return createElement(AsyncSuspense,
         extend({}, commonProps, {
-          innerProps: Object.assign({}, props, { ref })
+          innerProps: extend({}, props, { ref })
         })
       )
     }))

package/lib/template-compiler/compiler.js

@@ -176,11 +176,11 @@ const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
 const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
 // 添加~前缀避免wxs绝对路径在存在projectRoot时被拼接为错误路径
 const i18nWxsRequest = '~' + i18nWxsLoaderPath + '!' + i18nWxsPath
-const i18nModuleName = '_i'
+const i18nModuleName = '_i_'
 const stringifyWxsPath = '~' + normalize.lib('runtime/stringify.wxs')
-const stringifyModuleName = '_s'
+const stringifyModuleName = '_s_'
 const optionalChainWxsPath = '~' + normalize.lib('runtime/oc.wxs')
-const optionalChainWxsName = '_oc' // 改成_oc解决web下_o重名问题
+const optionalChainWxsName = '_oc_' // 改成_oc解决web下_o重名问题
 
 const tagRES = /(\{\{(?:.|\n|\r)+?\}\})(?!})/
 const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
@@ -1383,7 +1383,11 @@ function processEvent (el, options) {
         const targetConfigs = isCapture ? eventConfigMap[type].captureConfigs : eventConfigMap[type].configs
         targetConfigs.push(Object.assign({ name }, parsedFunc))
         if (modifiers.indexOf('proxy') > -1 || options.forceProxyEvent) {
-          eventConfigMap[type].proxy = true
+          if (isCapture) {
+            eventConfigMap[type].captureProxy = true
+          } else {
+            eventConfigMap[type].proxy = true
+          }
         }
       }
     }
@@ -1423,10 +1427,10 @@ function processEvent (el, options) {
   }
 
   for (const type in eventConfigMap) {
-    const { configs = [], captureConfigs = [], proxy } = eventConfigMap[type]
+    const { configs = [], captureConfigs = [], proxy, captureProxy } = eventConfigMap[type]
 
     let needBubblingBind = isNeedBind(configs, proxy)
-    let needCaptureBind = isNeedBind(captureConfigs, proxy)
+    let needCaptureBind = isNeedBind(captureConfigs, captureProxy)
 
     const escapedType = dash2hump(type)
     // 排除特殊情况

package/lib/utils/chain-assign.js

@@ -0,0 +1,47 @@
+/**
+ * 链式合并方法的工具函数
+ *
+ * 在多条件分支下使用 Object.assign 会导致同名方法被覆盖，
+ * 这个函数通过创建组合函数来确保所有方法都能按顺序执行。
+ *
+ * @param {Object} target - 目标 visitor 对象
+ * @param {Object} source - 要链式分配的 visitor 方法对象
+ *
+ * @example
+ * const visitor = {}
+ *
+ * // 第一次合并
+ * chainAssign(visitor, {
+ *   CallExpression(path) {
+ *     console.log('第一个处理器')
+ *   }
+ * })
+ *
+ * // 第二次合并 - 不会覆盖，而是组合执行
+ * chainAssign(visitor, {
+ *   CallExpression(path) {
+ *     console.log('第二个处理器')
+ *   }
+ * })
+ *
+ * // 执行时会依次输出:
+ * // 第一个处理器
+ * // 第二个处理器
+ */
+module.exports = function chainAssign (target, source) {
+  for (const [key, value] of Object.entries(source)) {
+    if (target[key]) {
+      // 如果已存在同名方法，创建组合函数依次执行
+      const originalMethod = target[key]
+      target[key] = function (path) {
+        originalMethod.call(this, path)
+        // 只有当节点没有停止遍历或被移除时才继续执行
+        if (!path.removed && !path.shouldStop) {
+          value.call(this, path)
+        }
+      }
+    } else {
+      target[key] = value
+    }
+  }
+}