@mpxjs/webpack-plugin 2.8.60 → 2.8.61

package/lib/platform/template/wx/index.js

@@ -358,7 +358,7 @@ module.exports = function getSpec ({ warn, error }) {
             value
           }
         },
-        web ({ name, value }, { eventRules, el }) {
+        web ({ name, value }, { eventRules, el, usingComponents }) {
           if (parseMustache(value).hasBinding) {
             error('Web environment does not support mustache binding in event props!')
             return
@@ -370,10 +370,11 @@ module.exports = function getSpec ({ warn, error }) {
           const meta = {
             modifierStr
           }
+          const isComponent = usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
           // 记录event监听信息用于后续判断是否需要使用内置基础组件
           el.hasEvent = true
           const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', meta })
-          const rEventName = runRules(eventRules, eventName, { mode: 'web' })
+          const rEventName = runRules(eventRules, eventName, { mode: 'web', data: { isComponent } })
           return {
             name: rPrefix + rEventName + meta.modifierStr,
             value
@@ -456,6 +457,16 @@ module.exports = function getSpec ({ warn, error }) {
               error(`Web environment does not support [${eventName}] event!`)
             }
           }
+        },
+        // 特殊web事件
+        {
+          test: /^click$/,
+          web (eventName, data) {
+            // 自定义组件根节点
+            if (data.isComponent) {
+              return '_' + eventName
+            }
+          }
         }
       ]
     }

package/lib/runtime/components/web/mpx-keep-alive.vue

@@ -64,6 +64,8 @@
             removeItem.vnode.componentInstance.$destroy()
           }
         })
+        // 在执行完destroy后再同步lastStack信息，让用户在destroy钩子中还能够访问到销毁之前的页面栈，与小程序保持一致
+        router.lastStack = router.stack.slice()
         router.needRemove.length = 0
 
         const stack = router.stack

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

@@ -10,10 +10,12 @@
   import {getCustomEvent, extendEvent} from './getInnerListeners'
   import BScroll from '@better-scroll/core'
   import Movable from '@better-scroll/movable'
+  import ObserveDOM from '@better-scroll/observe-dom'
   import Zoom from '@better-scroll/zoom'
 
   BScroll.use(Movable)
   BScroll.use(Zoom)
+  BScroll.use(ObserveDOM)
 
   export default {
     data () {
@@ -23,6 +25,8 @@
         maxScrollX: 0,
         minScrollY: 0,
         maxScrollY: 0,
+        currentX: this.x,
+        currentY: this.y,
         lastestX: 0,
         lastestY: 0,
         lastestScale: 1,
@@ -30,7 +34,10 @@
         isZooming: false,
         isFirstTouch: true,
         source: '',
-        touchEvent: ''
+        touchEvent: '',
+        isInited: false,
+        deactivatedX: 0,
+        deactivatedY: 0
       }
     },
     props: {
@@ -89,7 +96,8 @@
       speed: {
         type: Number,
         default: 1000
-      }
+      },
+      scrollOptions: Object
     },
     watch: {
       x (newVal) {
@@ -100,6 +108,7 @@
         if (newVal < this.bs.maxScrollX) {
           newVal = this.bs.maxScrollX
         }
+        this.currentX = newVal
         this.bs.scrollTo(newVal, this.bs.y, this.speed)
       },
       y (newVal) {
@@ -110,6 +119,7 @@
         if (newVal < this.bs.maxScrollY) {
           newVal = this.bs.maxScrollY
         }
+        this.currentY = newVal
         this.bs.scrollTo(this.bs.x, newVal, this.speed)
       },
       scaleValue (newVal) {
@@ -122,22 +132,60 @@
         }
         this.bs.zoomTo(newVal, 'center', 'center')
       },
-      disabled (newVal) {
-        if (newVal) {
-          this.bs && this.bs.disable()
-        } else {
-          this.bs && this.bs.enable()
-        }
+      disabled () {
+        this.init()
       }
     },
     mounted () {
+      if (!this.scrollOptions.closeResizeObserver) {
+        this.createResizeObserver()
+      }
       this.init()
     },
+    activated () {
+      if (this.deactivatedX || this.deactivatedY) {
+        this.refresh()
+        this.bs.putAt(this.deactivatedX, this.deactivatedY, 0)
+      }
+    },
+    deactivated () {
+      // when the hook is triggered
+      // bs will recalculate the boundary of movable to 0
+      // so record the position of the movable
+      this.deactivatedX = this.bs.x
+      this.deactivatedY = this.bs.y
+    },
     beforeDestroy () {
-      this.bs && this.bs.destroy()
+      this.destroyBs()
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
     },
     methods: {
+      createResizeObserver () {
+        if (typeof ResizeObserver !== 'undefined') {
+          this.resizeObserver = new ResizeObserver(entries => {
+            if (!this.isInited) {
+              this.isInited = true
+              return
+            }
+            this.refresh()
+          })
+          const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
+          this.resizeObserver.observe(elementToObserve)
+        }
+      },
+      refresh () {
+        this.bs && this.bs.refresh()
+      },
+      destroyBs () {
+        if (!this.bs) return
+        this.bs.destroy()
+        delete this.bs
+      },
       init () {
+        this.destroyBs()
         if (!this.$refs.scrollContent.parentNode || (this.$refs.scrollContent.parentNode && this.$refs.scrollContent.parentNode.className !== 'mpx-movable-scroll-wrapper')) {
           return
         }
@@ -150,8 +198,8 @@
           scrollX: false,
           scrollY: false,
           movable: true,
-          startX: this.x,
-          startY: this.y,
+          startX: this.currentX,
+          startY: this.currentY,
           bounce: this.outOfBounds,
           bounceTime: 800 / (this.damping / 20),
           probeType: 3,
@@ -160,7 +208,7 @@
         const BehaviorHooks = this.bs.scroller.scrollBehaviorY.hooks
         const actionsHandlerHooks = this.bs.scroller.actionsHandler.hooks
         const scrollerHooks = this.bs.scroller.hooks
-        this.bs.putAt(this.x, this.y, 0)
+        this.bs.putAt(this.currentX, this.currentY, 0)
         this.lastestX = this.roundFun(this.x)
         this.lastestY = this.roundFun(this.y)
         this.lastestScale = this.roundFun(this.scaleValue)
@@ -191,6 +239,10 @@
           this.lastestX = this.roundFun(position.x)
           this.lastestY = this.roundFun(position.y)
         })
+        scrollerHooks.on('scrollEnd', (position) =>{
+          this.currentX = this.bs.x
+          this.currentY = this.bs.y
+        })
         scrollerHooks.on('touchEnd', (position) => {
           this.isFirstTouch = true
           if (position.x > this.minScrollX || position.x < this.maxScrollX ||
@@ -257,9 +309,6 @@
             this.isZooming = false
           })
         }
-        if (this.disabled) { // 禁用
-          this.bs.disable()
-        }
       },
       initOptions () {
         if (!this.friction || this.friction < 0) {
@@ -290,19 +339,24 @@
             swipeTime: 50
           }
         }
-        if (this.direction === 'vertical') {
+        if (this.disabled) {
+          this.bsOptions = {
+            ...this.bsOptions,
+            freeScroll: false,
+            scrollY: false,
+            scrollX: false
+          }
+        } else if (this.direction === 'vertical') {
           this.bsOptions = {
             ...this.bsOptions,
             scrollY: true
           }
-        }
-        if (this.direction === 'horizontal') {
+        } else if (this.direction === 'horizontal') {
           this.bsOptions = {
             ...this.bsOptions,
             scrollX: true
           }
-        }
-        if (this.direction === 'all') {
+        } else if (this.direction === 'all') {
           this.bsOptions = {
             ...this.bsOptions,
             freeScroll: true,
@@ -310,6 +364,10 @@
             scrollY: true
           }
         }
+        this.bsOptions = {
+          ...this.bsOptions,
+          ...this.scrollOptions
+        }
       },
       // 处理小数点，四舍五入，默认保留一位小数
       roundFun(value, n = 1) {

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

@@ -57,15 +57,23 @@
     data () {
       return {
         isLoading: false,
-        isAutoPullDown: true
+        isAutoPullDown: true,
+        currentX: 0,
+        currentY: 0,
+        lastX: 0,
+        lastY: 0
       }
     },
     computed: {
       _scrollTop () {
-        return processSize(this.scrollTop)
+        const size = processSize(this.scrollTop)
+        this.currentY = size
+        return size
       },
       _scrollLeft () {
-        return processSize(this.scrollLeft)
+        const size = processSize(this.scrollLeft)
+        this.currentX = size
+        return size
       },
       _lowerThreshold () {
         return processSize(this.lowerThreshold)
@@ -87,10 +95,13 @@
           className += ' active'
         }
         return className
+      },
+      scroll() {
+        return this.scrollX || this.scrollY
       }
     },
     mounted () {
-      this.init()
+      this.initBs()
     },
     activated () {
       if (!this.__mpx_deactivated) {
@@ -106,7 +117,7 @@
       this.__mpx_deactivated = true
     },
     beforeDestroy () {
-      this.destroy()
+      this.destroyBs()
     },
     updated () {
       if (this.updateRefresh) this.refresh()
@@ -136,20 +147,33 @@
             }
           }
         },
+      },
+      scroll(val) {
+        if (val) {
+          this.initBs()
+        } else {
+          this.disableBs()
+        }
       }
     },
     methods: {
-      destroy () {
+      destroyBs () {
         if (!this.bs) return
         this.bs.destroy()
         delete this.bs
       },
-      init () {
-        if (this.bs) return
+      disableBs() {
+        if (!this.bs) return
+        this.bs.disable()
+        this.currentX = -this.bs.x
+        this.currentY = -this.bs.y
+      },
+      initBs () {
+        this.destroyBs()
         this.initLayerComputed()
         const originBsOptions = {
-          startX: -this._scrollLeft,
-          startY: -this._scrollTop,
+          startX: -this.currentX,
+          startY: -this.currentY,
           scrollX: this.scrollX,
           scrollY: this.scrollY,
           probeType: 3,
@@ -170,8 +194,8 @@
         this.bs.scroller.hooks.on('beforeRefresh', () => {
           this.initLayerComputed()
         })
-        this.lastX = -this._scrollLeft
-        this.lastY = -this._scrollTop
+        this.lastX = -this.currentX
+        this.lastY = -this.currentY
         this.bs.on('scroll', throttle(({ x, y }) => {
           const deltaX = x - this.lastX
           const deltaY = y - this.lastY
@@ -201,6 +225,10 @@
           leading: true,
           trailing: false
         }))
+        this.bs.on('scrollEnd', () => {
+          this.currentX = -this.bs.x
+          this.currentY = -this.bs.y
+        })
         if (this.scrollIntoView) this.scrollToView(this.scrollIntoView)
         // 若开启自定义下拉刷新 或 开启 scroll-view 增强特性
         if (this.refresherEnabled || this.enhanced) {
@@ -265,8 +293,10 @@
       initLayerComputed () {
         const wrapper = this.$refs.wrapper
         const computedStyle = getComputedStyle(wrapper)
-        this.$refs.innerWrapper.style.width = `${computedStyle.clientWidth -  parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
-        this.$refs.innerWrapper.style.height = `${computedStyle.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)}px`
+        // 考虑子元素样式可能会设置100%，如果直接继承 scrollContent 的样式可能会有问题
+        // 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
+        this.$refs.innerWrapper.style.width = `${wrapper.clientWidth -  parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
+        this.$refs.innerWrapper.style.height = `${wrapper.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)}px`
         const innerWrapper = this.$refs.innerWrapper
         const childrenArr = Array.from(innerWrapper.children)
 

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

@@ -2,9 +2,12 @@
   import getInnerListeners, { getCustomEvent } from './getInnerListeners'
   import BScroll from '@better-scroll/core'
   import Slide from '@better-scroll/slide'
+  import ObserveDOM from '@better-scroll/observe-dom'
   import throttle from 'lodash/throttle'
+  import { processSize } from '../../utils'
 
   BScroll.use(Slide)
+  BScroll.use(ObserveDOM)
 
   export default {
     name: 'mpx-swiper',
@@ -37,13 +40,16 @@
         type: String,
         default: 'default'
       },
+      previousMargin: String,
+      nextMargin: String,
       scrollOptions: Object
     },
     data () {
       return {
         currentIndex: this.current,
         currentChildLength: 0,
-        lastChildLength: 0
+        lastChildLength: 0,
+        init: false
       }
     },
     computed: {
@@ -81,13 +87,20 @@
           default:
             return
         }
-      }
+      },
+      _previousMargin () {
+        return processSize(this.previousMargin) || 0
+      },
+      _nextMargin () {
+        return processSize(this.nextMargin) || 0
+      },
     },
     updated () {
-      this.currentChildLength = this.$children && this.$children.length
+      this.setCurrentChildLength()
     },
     watch: {
       current (val) {
+        this.currentIndex = val
         if (this.bs) {
           this.lastX = this.bs.x
           this.lastY = this.bs.y
@@ -95,7 +108,7 @@
         this.changeSource = ''
         this.goto(val)
       },
-      currentChildLength(val) {
+      currentChildLength (val) {
         if (val < this.lastChildLength && val < this.currentIndex) {
           this.goto(0, 0)
         }
@@ -119,65 +132,128 @@
       this.itemIds = []
     },
     mounted () {
-      const originBsOptions = {
-        scrollX: !this.vertical,
-        scrollY: this.vertical,
-        slide: {
-          loop: this.circular,
-          threshold: 0.5,
-          speed: this.duration,
-          easing: this.easing,
-          interval: this.interval,
-          autoplay: this.autoplay,
-          startPageXIndex: this.vertical ? 0 : this.current,
-          startPageYIndex: this.vertical? this.current : 0
-        },
-        momentum: false,
-        bounce: false,
-        probeType: 3,
-        stopPropagation: true
+      if (!this.scrollOptions.closeResizeObserver) {
+        this.createResizeObserver()
       }
-      const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions)
-      this.bs = new BScroll(this.$refs.wrapper, bsOptions)
-      this.bs.on('slideWillChange', (page) => {
-        this.currentIndex = this.vertical ? page.pageY : page.pageX
-        this.$emit('change', getCustomEvent('change', {
-          current: this.currentIndex,
-          currentItemId: this.itemIds[this.currentIndex] || '',
-          source: this.changeSource
-        }, this))
-      })
-
-      this.bs.on('scrollEnd', () => {
-        this.$emit('animationfinish', getCustomEvent('animationfinish', {
-          current: this.currentIndex,
-          currentItemId: this.itemIds[this.currentIndex] || '',
-          source: this.changeSource
-        }, this))
-      })
-      this.bs.on('scroll', throttle(({ x, y }) => {
-        this.$emit('transition', getCustomEvent('transition', {
-          dx: this.lastX - x,
-          dy: this.lastY - y
-        }, this))
-      }, 30, {
-        leading: true,
-        trailing: false
-      }))
-
-      this.bs.on('beforeScrollStart', () => {
-        if (this.bs) {
-          this.lastX = this.bs.x
-          this.lastY = this.bs.y
-        }
-        this.changeSource = 'touch'
-      })
+      this.setCurrentChildLength()
+      this.initBs()
     },
     beforeDestroy () {
-      this.bs && this.bs.destroy()
-      delete this.bs
+      this.destroyBs()
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
     },
     methods: {
+      destroyBs () {
+        if (!this.bs) return
+        this.bs.destroy()
+        delete this.bs
+      },
+      initLayerComputed () {
+        const wrapper = this.$refs.wrapper
+        const computedStyle = getComputedStyle(wrapper)
+        const innerWrapper = this.$refs.innerWrapper
+        let width = wrapper.clientWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)
+        let height = wrapper.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)
+        if (!this.vertical) {
+          if (this._previousMargin || this._nextMargin) {
+            if (this._previousMargin) {
+              innerWrapper.style.marginLeft = `${this._previousMargin}px`
+              width = width - this._previousMargin
+            }
+            if (this._nextMargin) {
+              width = width - this._nextMargin
+            }
+          }
+        } else {
+          if (this._previousMargin || this._nextMargin) {
+            if (this._previousMargin) {
+              innerWrapper.style.marginTop = `${this._previousMargin}px`
+              height = height - this._previousMargin
+            }
+            if (this._nextMargin) {
+              height = height - this._nextMargin
+            }
+          }
+        }
+        innerWrapper.style.height = `${height}px`
+        innerWrapper.style.width = `${width}px`
+      },
+      initBs () {
+        this.destroyBs()
+        this.initLayerComputed()
+        const originBsOptions = {
+          scrollX: !this.vertical,
+          scrollY: this.vertical,
+          slide: {
+            loop: this.circular,
+            threshold: 0.5,
+            speed: this.duration,
+            easing: this.easing,
+            interval: this.interval,
+            autoplay: this.autoplay,
+            startPageXIndex: this.vertical ? 0 : this.currentIndex,
+            startPageYIndex: this.vertical ? this.currentIndex : 0
+          },
+          momentum: false,
+          bounce: false,
+          probeType: 3,
+          stopPropagation: true
+        }
+        const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions)
+        this.bs = new BScroll(this.$refs.innerWrapper, bsOptions)
+        this.bs.scroller.hooks.on('beforeRefresh', () => {
+          this.initLayerComputed()
+        })
+        this.bs.on('slideWillChange', (page) => {
+          this.currentIndex = this.vertical ? page.pageY : page.pageX
+          this.$emit('change', getCustomEvent('change', {
+            current: this.currentIndex,
+            currentItemId: this.itemIds[this.currentIndex] || '',
+            source: this.changeSource
+          }, this))
+        })
+
+        this.bs.on('scrollEnd', () => {
+          this.$emit('animationfinish', getCustomEvent('animationfinish', {
+            current: this.currentIndex,
+            currentItemId: this.itemIds[this.currentIndex] || '',
+            source: this.changeSource
+          }, this))
+        })
+        this.bs.on('scroll', throttle(({ x, y }) => {
+          this.$emit('transition', getCustomEvent('transition', {
+            dx: this.lastX - x,
+            dy: this.lastY - y
+          }, this))
+        }, 30, {
+          leading: true,
+          trailing: false
+        }))
+
+        this.bs.on('beforeScrollStart', () => {
+          if (this.bs) {
+            this.lastX = this.bs.x
+            this.lastY = this.bs.y
+          }
+          this.changeSource = 'touch'
+        })
+      },
+      createResizeObserver () {
+        if (typeof ResizeObserver !== 'undefined'){
+          this.resizeObserver = new ResizeObserver(entries => {
+            if (!this.init) {
+              this.init = true
+              return
+            }
+            this.initBs()
+          })
+          const elementToObserve = document.querySelector('.mpx-swiper');
+          this.resizeObserver.observe(elementToObserve);
+        }
+      },
       refresh () {
         this.bs && this.bs.refresh()
       },
@@ -186,6 +262,9 @@
         const y = this.vertical ? index : 0
         const speed = time === 0 ? 0 : this.duration
         this.bs && this.bs.goToPage(x, y, speed)
+      },
+      setCurrentChildLength () {
+        this.currentChildLength = this.$children && this.$children.length
       }
     },
     render (createElement) {
@@ -194,13 +273,13 @@
         on: getInnerListeners(this, { ignoredListeners: ['change', 'animationfinish', 'transition'] }),
         ref: 'wrapper'
       }
+
       const content = createElement('div', {
         class: {
           'mpx-swiper-content': true,
           vertical: this.vertical
         }
       }, this.$slots.default)
-
       const children = [content]
       if (this.indicatorDots) {
         const items = this.$slots.default.filter((VNode) => VNode.tag && VNode.tag.endsWith('mpx-swiper-item'))
@@ -227,7 +306,14 @@
         }, dotsItems)
         children.push(dots)
       }
-      return createElement('div', data, children)
+
+      const innerWrapper = createElement('div', {
+        ref: 'innerWrapper',
+        class: {
+          'mpx-swiper-wrapper': true
+        }
+      }, children)
+      return createElement('div', data, [innerWrapper])
     }
   }
 </script>
@@ -237,7 +323,6 @@
     overflow hidden
     position relative
 
-
   .mpx-swiper-content
     width 100%
     height 100%

package/lib/runtime/optionProcessor.js

@@ -57,6 +57,7 @@ export default function processOption (
         routes: routes
       })
       global.__mpxRouter.stack = []
+      global.__mpxRouter.lastStack = null
       global.__mpxRouter.needCache = null
       global.__mpxRouter.needRemove = []
       global.__mpxRouter.eventChannelMap = {}

package/lib/template-compiler/bind-this.js

@@ -170,7 +170,7 @@ function dealRemove (path, replace) {
       path.remove()
     }
     delete path.needBind
-    delete path.collectPath
+    delete path.collectInfo
   } catch (e) {
   }
 }
@@ -229,7 +229,10 @@ module.exports = {
           const { last, keyPath } = calPropName(path)
           path.needBind = true
           if (needCollect) {
-            last.collectPath = t.stringLiteral(keyPath)
+            last.collectInfo = {
+              key: t.stringLiteral(keyPath),
+              isSimple: !/[[.]/.test(keyPath)
+            }
           }
 
           if (!renderReduce) return
@@ -334,12 +337,14 @@ module.exports = {
       },
       MemberExpression: {
         exit (path) {
-          if (path.collectPath) {
+          if (path.collectInfo) {
+            const { isSimple, key } = path.collectInfo
+            const callee = isSimple ? t.identifier('_sc') : t.identifier('_c')
             const replaceNode = renderReduce
-              ? t.callExpression(t.identifier('_c'), [path.collectPath])
-              : t.callExpression(t.identifier('_c'), [path.collectPath, path.node])
+              ? t.callExpression(callee, [key])
+              : t.callExpression(callee, [key, path.node])
             path.node && path.replaceWith(replaceNode)
-            delete path.collectPath
+            delete path.collectInfo
           }
         }
       }

package/lib/template-compiler/index.js

@@ -94,7 +94,7 @@ global.currentInject = {
   const rawCode = compiler.genNode(ast)
   if (rawCode) {
     const renderCode = `
-global.currentInject.render = function (_i, _c, _r) {
+global.currentInject.render = function (_i, _c, _r, _sc) {
 ${rawCode}
 _r();
 };\n`

package/lib/web/processScript.js

@@ -111,9 +111,10 @@ module.exports = function (script, {
   Vue.use(VueRouter)
   global.getApp = function(){}
   global.getCurrentPages = function(){
-    if(!global.__mpxRouter) return []
+    const router = global.__mpxRouter
+    if(!router) return []
     // @ts-ignore
-    return global.__mpxRouter.stack.map(item => {
+    return (router.lastStack || router.stack).map(item => {
       let page
       const vnode = item.vnode
       if(vnode && vnode.componentInstance) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.60",
+  "version": "2.8.61",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "02a77bf602744c35703b2fdc27171edbec09edcb"
+  "gitHead": "f393ffc439f21b24f5f09a65ef99db20b145e19a"
 }