@mpxjs/webpack-plugin 2.10.15-4 → 2.10.15-prelease.1

package/lib/runtime/components/web/mpx-movable-area.vue

@@ -1,21 +1,23 @@
 <template>
-    <div class="mpx-movable-area-container" ref="movableArea">
-        <div class="mpx-movable-scroll-wrapper" ref="scroll">
-            <slot></slot>
-        </div>
+  <div class="mpx-movable-area-container" ref="movableArea">
+    <div class="mpx-movable-scroll-wrapper" ref="scroll">
+      <slot></slot>
     </div>
+  </div>
 </template>
 
 <script type="text/ecmascript-6">
   export default {
-    data () {
-      return {}
+    data() {
+      return {
+        isInited: false,
+      }
     },
-    mounted () {
+    mounted() {
       this.computedStyle()
-    },
-    beforeDestroy () {
-
+      if (!this.closeResizeObserver) {
+        this.createResizeObserver()
+      }
     },
     methods: {
       computedStyle() {
@@ -26,17 +28,39 @@
         if (!style.height) {
           this.$refs.movableArea.style.height = '10px'
         }
+      },
+      createResizeObserver() {
+        if (typeof ResizeObserver !== 'undefined') {
+          this.resizeObserver = new ResizeObserver(entries => {
+            if (!this.isInited) {
+              this.isInited = true
+              return
+            }
+            this.$children.forEach(child => {
+              if (child && child.refresh) {
+                child.refresh()
+              }
+            })
+          })
+          this.resizeObserver.observe(this.$refs.movableArea)
+        }
+      },
+    },
+    beforeDestroy () {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
       }
-    }
+    },
   }
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
-    .mpx-movable-area-container
-        position: absolute
-        .mpx-movable-scroll-wrapper
-            position: absolute
-            top: 0
-            left: 0
-            bottom: 0
-            right: 0
+  .mpx-movable-area-container
+      position: relative
+      .mpx-movable-scroll-wrapper
+          position: absolute
+          top: 0
+          left: 0
+          bottom: 0
+          right: 0
 </style>

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

@@ -38,7 +38,13 @@ export default {
       touchEvent: '',
       isInited: false,
       deactivatedX: 0,
-      deactivatedY: 0
+      deactivatedY: 0,
+      // 缓存高度，用于检测变化
+      cachedContentHeight: 0,
+      cachedWrapperHeight: 0,
+      // 缓存宽度，用于检测变化
+      cachedContentWidth: 0,
+      cachedWrapperWidth: 0
     }
   },
   props: {
@@ -107,7 +113,24 @@ export default {
   },
   watch: {
     x (newVal) {
+      if (this.direction === 'vertical' || this.direction === 'none') {
+        return
+      }
       this.source = ''
+      // 检查宽度是否发生变化，只有在变化时才调用 refresh
+      const widthChanged = this.checkWidthChange()
+      let currentX = this.bs.x
+      
+      if (widthChanged) {
+        // 兼容容器尺寸变化且同时改变x的场景，ResizeObserver回调是异步的，如果不直接refresh，minScrollX, maxScrollX 拿到的都是上一次的值
+        this.refresh()
+        // bs refresh 方法内会触发 resetPosition()，如果容器宽度从 100 - 50，y 从 100 - 50，这会导致位置立即跳转到边界内，没有动画效果，造成视觉突兀
+        // 如果 refresh 导致了位置变化，先恢复到原位置再动画滚动
+        if (this.bs.x !== currentX) {
+          this.bs.scrollTo(currentX, this.bs.y, 0)
+        }
+      }
+      
       if (newVal > this.bs.minScrollX) {
         newVal = this.bs.minScrollX
       }
@@ -118,7 +141,24 @@ export default {
       this.bs.scrollTo(newVal, this.bs.y, this.speed)
     },
     y (newVal) {
+      if (this.direction === 'horizontal' || this.direction === 'none') {
+        return
+      }
       this.source = ''
+      // 检查高度是否发生变化，只有在变化时才调用 refresh
+      const heightChanged = this.checkHeightChange()
+      let currentY = this.bs.y
+      
+      if (heightChanged) {
+        // 兼容容器尺寸变化且同时改变y的场景，ResizeObserver回调是异步的，如果不直接refresh，minScrollY, maxScrollY 拿到的都是上一次的值
+        this.refresh()
+        // bs refresh 方法内会触发 resetPosition()，如果容器高度从 100 - 50，y 从 100 - 50，这会导致位置立即跳转到边界内，没有动画效果，造成视觉突兀
+        // 如果 refresh 导致了位置变化，先恢复到原位置再动画滚动
+        if (this.bs.y !== currentY) {
+          this.bs.scrollTo(this.bs.x, currentY, 0)
+        }
+      }
+      
       if (newVal > this.bs.minScrollY) {
         newVal = this.bs.minScrollY
       }
@@ -146,6 +186,10 @@ export default {
     if (!this.scrollOptions.closeResizeObserver) {
       this.createResizeObserver()
     }
+    // 初始化尺寸缓存
+    this.$nextTick(() => {
+      this.initSizeCache()
+    })
     this.init()
   },
   activated () {
@@ -178,13 +222,50 @@ export default {
           }
           this.refresh()
         })
-        const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
-        elementToObserve && this.resizeObserver.observe(elementToObserve)
+        this.resizeObserver.observe(this.$refs.scrollContent)
       }
     },
     refresh () {
       this.bs && this.bs.refresh()
     },
+    // 检查高度是否发生变化
+    checkHeightChange () {
+      if (!this.$refs.scrollContent || !this.$parent.$refs.movableArea) {
+        return false
+      }
+      
+      const currentContentHeight = this.$refs.scrollContent.clientHeight
+      const currentWrapperHeight = this.$parent.$refs.movableArea.clientHeight
+      
+      const heightChanged = 
+        currentContentHeight !== this.cachedContentHeight || 
+        currentWrapperHeight !== this.cachedWrapperHeight
+      
+      // 更新缓存的高度
+      this.cachedContentHeight = currentContentHeight
+      this.cachedWrapperHeight = currentWrapperHeight
+      
+      return heightChanged
+    },
+    // 检查宽度是否发生变化
+    checkWidthChange () {
+      if (!this.$refs.scrollContent || !this.$parent.$refs.movableArea) {
+        return false
+      }
+      
+      const currentContentWidth = this.$refs.scrollContent.clientWidth
+      const currentWrapperWidth = this.$parent.$refs.movableArea.clientWidth
+      
+      const widthChanged = 
+        currentContentWidth !== this.cachedContentWidth || 
+        currentWrapperWidth !== this.cachedWrapperWidth
+      
+      // 更新缓存的宽度
+      this.cachedContentWidth = currentContentWidth
+      this.cachedWrapperWidth = currentWrapperWidth
+      
+      return widthChanged
+    },
     destroyBs () {
       if (!this.bs) return
       this.bs.destroy()
@@ -364,6 +445,15 @@ export default {
       }
       extend(this.bsOptions, this.scrollOptions)
     },
+    // 初始化尺寸缓存
+    initSizeCache () {
+      if (this.$refs.scrollContent && this.$parent.$refs.movableArea) {
+        this.cachedContentHeight = this.$refs.scrollContent.clientHeight
+        this.cachedWrapperHeight = this.$parent.$refs.movableArea.clientHeight
+        this.cachedContentWidth = this.$refs.scrollContent.clientWidth
+        this.cachedWrapperWidth = this.$parent.$refs.movableArea.clientWidth
+      }
+    },
     // 处理小数点，四舍五入，默认保留一位小数
     roundFun (value, n = 1) {
       return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)

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-swiper.vue

@@ -256,8 +256,7 @@
             }
             this.initBs()
           })
-          const elementToObserve = document.querySelector('.mpx-swiper');
-          this.resizeObserver.observe(elementToObserve);
+          this.resizeObserver.observe(this.$refs.wrapper);
         }
       },
       refresh () {

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/components/web/mpx-web-view.vue

@@ -124,7 +124,7 @@ export default {
         case 'postMessage':
           let data = {
             type: 'message',
-            data: params[0]?.data
+            data: params[0]?.data || params[0] // 补充兜底逻辑
           }
           this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
           asyncCallback = Promise.resolve({
@@ -148,7 +148,7 @@ export default {
           break
         default:
           if (type) {
-            const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type]
+            const implement = mpx.config.webConfig?.webviewConfig?.apiImplementations?.[type]
             if (isFunction(implement)) {
               asyncCallback = Promise.resolve(implement(...params))
             } else {
@@ -174,7 +174,7 @@ export default {
       })
     },
     hostValidate (host) {
-      const hostWhitelists = mpx.config.webviewConfig && mpx.config.webviewConfig.hostWhitelists || []
+      const hostWhitelists = mpx.config.webConfig?.webviewConfig?.hostWhitelists || []
       if (hostWhitelists.length) {
         return hostWhitelists.some((item) => {
           return host.endsWith(item)

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)+?)\}\}(?!})/
@@ -1333,8 +1333,35 @@ function processEventReact (el, options) {
   // }
 }
 
+function isNeedBind (configs, isProxy) {
+  if (isProxy) return true
+  if (configs.length > 1) return true
+  if (configs.length === 1) return configs[0].hasArgs
+  return false
+}
+
+function processEventBinding (el, configs) {
+  let resultName
+  configs.forEach(({ name }) => {
+    if (name) {
+      // 清空原始事件绑定
+      let has
+      do {
+        has = getAndRemoveAttr(el, name).has
+      } while (has)
+
+      if (!resultName) {
+        // 清除修饰符
+        resultName = name.replace(/\..*/, '')
+      }
+    }
+  })
+  return { resultName }
+}
+
 function processEvent (el, options) {
   const eventConfigMap = {}
+  const finalEventsMap = {}
   el.attrsList.forEach(function ({ name, value }) {
     const parsedEvent = config[mode].event.parseEvent(name)
 
@@ -1346,14 +1373,21 @@ function processEvent (el, options) {
       const extraStr = runtimeCompile && prefix === 'catch' ? `, "__mpx_${prefix}"` : ''
       const parsedFunc = parseFuncStr(value, extraStr)
       if (parsedFunc) {
+        const isCapture = /^capture/.test(prefix)
         if (!eventConfigMap[type]) {
           eventConfigMap[type] = {
-            configs: []
+            configs: [],
+            captureConfigs: []
           }
         }
-        eventConfigMap[type].configs.push(Object.assign({ name }, parsedFunc))
+        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
+          }
         }
       }
     }
@@ -1393,57 +1427,57 @@ function processEvent (el, options) {
   }
 
   for (const type in eventConfigMap) {
-    let needBind = false
-    const { configs, proxy } = eventConfigMap[type]
-    delete eventConfigMap[type]
-    if (proxy) {
-      needBind = true
-    } else if (configs.length > 1) {
-      needBind = true
-    } else if (configs.length === 1) {
-      needBind = !!configs[0].hasArgs
-    }
+    const { configs = [], captureConfigs = [], proxy, captureProxy } = eventConfigMap[type]
+
+    let needBubblingBind = isNeedBind(configs, proxy)
+    let needCaptureBind = isNeedBind(captureConfigs, captureProxy)
 
     const escapedType = dash2hump(type)
     // 排除特殊情况
     if (!isValidIdentifierStr(escapedType)) {
       warn$1(`EventName ${type} which need be framework proxy processed must be a valid identifier!`)
-      needBind = false
+      needBubblingBind = false
+      needCaptureBind = false
     }
 
-    if (needBind) {
-      let resultName
-      configs.forEach(({ name }) => {
-        if (name) {
-          // 清空原始事件绑定
-          let has
-          do {
-            has = getAndRemoveAttr(el, name).has
-          } while (has)
+    if (needBubblingBind) {
+      const { resultName } = processEventBinding(el, configs)
 
-          if (!resultName) {
-            // 清除修饰符
-            resultName = name.replace(/\..*/, '')
-          }
+      addAttrs(el, [
+        {
+          name: resultName || config[mode].event.getEvent(type),
+          value: '__invoke'
         }
+      ])
+      if (!finalEventsMap.bubble) {
+        finalEventsMap.bubble = {}
+      }
+      finalEventsMap.bubble[escapedType] = configs.map((item) => {
+        return item.expStr
       })
+    }
 
+    if (needCaptureBind) {
+      const { resultName } = processEventBinding(el, captureConfigs)
       addAttrs(el, [
         {
           name: resultName || config[mode].event.getEvent(type),
-          value: '__invoke'
+          value: '__captureInvoke'
         }
       ])
-      eventConfigMap[escapedType] = configs.map((item) => {
+      if (!finalEventsMap.capture) {
+        finalEventsMap.capture = {}
+      }
+      finalEventsMap.capture[escapedType] = captureConfigs.map((item) => {
         return item.expStr
       })
     }
   }
 
-  if (!isEmptyObject(eventConfigMap)) {
+  if (!isEmptyObject(finalEventsMap)) {
     addAttrs(el, [{
       name: 'data-eventconfigs',
-      value: `{{${shallowStringify(eventConfigMap, true)}}}`
+      value: `{{${shallowStringify(finalEventsMap, true)}}}`
     }])
   }
 }
@@ -2737,8 +2771,8 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
+    processStyleReact(el, options)
     if (!pass) {
-      processStyleReact(el, options)
       processEventReact(el, options)
       processComponentGenerics(el, meta)
       processComponentIs(el, options)

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
+    }
+  }
+}

package/lib/utils/check-core-version-match.js

@@ -1,22 +1,82 @@
-const coreVersion = require('@mpxjs/core/package.json').version
-const utilsVersion = require('@mpxjs/utils/package.json').version
-const corePath = require.resolve('@mpxjs/core')
-const utilsPath = require.resolve('@mpxjs/utils')
-const semverLt = require('semver/functions/lt')
+const semverSatisfies = require('semver/functions/satisfies')
+const semverCoerce = require('semver/functions/coerce')
 
-const leastCoreVersion = '2.8.59'
-const leastUtilsVersion = '2.8.59'
+// 定义包之间的依赖关系和最低版本要求
+const PACKAGE_DEPENDENCIES = {
+  '@mpxjs/webpack-plugin': {
+    '@mpxjs/core': '^2.10.15 || ^2.10.15-beta.1',
+    '@mpxjs/utils': '^2.10.13 || ^2.10.13-beta.1',
+    '@mpxjs/api-proxy': '^2.10.15 || ^2.10.15-beta.1'
+  }
+}
+
+function getPackageVersion (packageName) {
+  try {
+    return require(`${packageName}/package.json`).version
+  } catch (e) {
+    console.warn(`无法获取 ${packageName} 的版本信息: ${e.message}`)
+    return null
+  }
+}
+
+function checkVersionSatisfies (version, requiredVersion) {
+  try {
+    const normalizedVersion = semverCoerce(version).version
+    return semverSatisfies(normalizedVersion, requiredVersion)
+  } catch (e) {
+    console.warn(`版本检查失败: ${e.message}`)
+    return false
+  }
+}
+
+function checkPackageDependencies (packageName) {
+  const dependencies = PACKAGE_DEPENDENCIES[packageName]
+  if (!dependencies) return []
+
+  const results = []
+
+  for (const depName in dependencies) {
+    const requiredVersion = dependencies[depName]
+    const actualVersion = getPackageVersion(depName)
+
+    if (!actualVersion) {
+      results.push({
+        dependency: depName,
+        required: requiredVersion,
+        actual: null,
+        compatible: false,
+        error: `无法获取 ${depName} 的版本信息`
+      })
+      continue
+    }
+
+    const isCompatible = checkVersionSatisfies(actualVersion, requiredVersion)
+    results.push({
+      dependency: depName,
+      required: requiredVersion,
+      actual: actualVersion,
+      compatible: isCompatible
+    })
+  }
+
+  return results
+}
 
-function compare (version, leastVersion, npmName, npmPath) {
-  if (semverLt(version, leastVersion)) {
+function checkVersionCompatibility () {
+  const pluginResults = checkPackageDependencies('@mpxjs/webpack-plugin')
+  const incompatibleResults = pluginResults.filter(result => !result.compatible)
+  if (incompatibleResults.length > 0) {
+    const errorMessages = incompatibleResults.map(result => {
+      if (!result.actual) {
+        return `  - ${result.error || `${result.dependency} 未安装`}`
+      }
+      return `  - ${result.dependency}@${result.actual} 不满足所需版本 ${result.required}`
+    })
     throw new Error(
-      `${npmName} packages version mismatch:
-    -${npmName}@${version}(${npmPath})
-    This may cause things to work incorrectly, Make sure the usage version is greater than ${leastVersion}.
-    `
+      `检测到 @mpxjs 包版本不兼容问题：\n${errorMessages.join('\n')}\n\n` +
+      '这可能导致编译或运行异常。请确保所有 @mpxjs 相关包的版本兼容，建议使用相同版本。'
     )
   }
 }
 
-compare(coreVersion, leastCoreVersion, '@mpxjs/core', corePath)
-compare(utilsVersion, leastUtilsVersion, '@mpxjs/utils', utilsPath)
+module.exports = checkVersionCompatibility