@mpxjs/webpack-plugin 2.9.0-beta.4 → 2.9.0

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

@@ -3,7 +3,7 @@ const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
 const normalize = require('../../../utils/normalize')
 const { capitalToHyphen } = require('../../../utils/string')
-const { isOriginTag } = require('../../../utils/dom-tag-config')
+const { isOriginTag, isBuildInTag } = require('../../../utils/dom-tag-config')
 
 const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
 const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
@@ -127,7 +127,7 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   /**
-   * 将小程序代码中使用的与原生 HTML tag 同名组件进行转化，以解决与原生tag命名冲突问题。
+   * 将小程序代码中使用的与原生 HTML tag 或 内建组件 同名的组件进行转化，以解决与原生tag命名冲突问题。
    * @param {string} type usingComponents
    * @returns input
    */
@@ -136,7 +136,7 @@ module.exports = function getSpec ({ warn, error }) {
       const usingComponents = input[type]
       if (usingComponents) {
         Object.keys(usingComponents).forEach(tag => {
-          if (isOriginTag(tag)) {
+          if (isOriginTag(tag) || isBuildInTag(tag)) {
             usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
             delete usingComponents[tag]
           }

package/lib/platform/template/wx/component-config/fix-html-tag.js

@@ -1,9 +1,9 @@
-const { isOriginTag } = require('../../../../utils/dom-tag-config')
+const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
 
 module.exports = function () {
   return {
     waterfall: true,
-    test: (input) => isOriginTag(input),
+    test: (input) => isOriginTag(input) || isBuildInTag(input),
     // 处理原生tag
     web (tag, data = {}) {
       // @see packages/webpack-plugin/lib/platform/json/wx/index.js webHTMLTagProcesser

package/lib/platform/template/wx/component-config/view.js

@@ -41,18 +41,7 @@ module.exports = function ({ print }) {
     // 快应用通用事件有touchstart|touchmove|touchend|touchcancel|longpress|click|focus|blur
     event: [
       {
-        // 支付宝中的view组件额外支持了transitionEnd|animationStart|animationIteration|animationEnd，故在此声明了组件事件转换逻辑
         test: /^(transitionend|animationstart|animationiteration|animationend)$/,
-        //
-        ali (eventName) {
-          const eventMap = {
-            transitionend: 'transitionEnd',
-            animationstart: 'animationStart',
-            animationiteration: 'animationIteration',
-            animationend: 'animationEnd'
-          }
-          return eventMap[eventName]
-        },
         qa: qaEventLogError
       }
     ]

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

@@ -355,7 +355,7 @@ module.exports = function getSpec ({ warn, error }) {
             value
           }
         },
-        web ({ name, value }, { eventRules, el }) {
+        web ({ name, value }, { eventRules, el, usingComponents }) {
           if (parseMustacheWithContext(value).hasBinding) {
             error('Web environment does not support mustache binding in event props!')
             return
@@ -367,10 +367,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
@@ -440,7 +441,11 @@ module.exports = function getSpec ({ warn, error }) {
               touchcancel: 'touchCancel',
               tap: 'tap',
               longtap: 'longTap',
-              longpress: 'longTap'
+              longpress: 'longTap',
+              transitionend: 'transitionEnd',
+              animationstart: 'animationStart',
+              animationiteration: 'animationIteration',
+              animationend: 'animationEnd'
             }
             if (eventMap[eventName]) {
               return eventMap[eventName]
@@ -453,6 +458,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,13 @@
       speed: {
         type: Number,
         default: 1000
-      }
+      },
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
     },
     watch: {
       x (newVal) {
@@ -100,6 +113,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 +124,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 +137,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 +203,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 +213,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 +244,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 +314,6 @@
             this.isZooming = false
           })
         }
-        if (this.disabled) { // 禁用
-          this.bs.disable()
-        }
       },
       initOptions () {
         if (!this.friction || this.friction < 0) {
@@ -290,19 +344,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 +369,10 @@
             scrollY: true
           }
         }
+        this.bsOptions = {
+          ...this.bsOptions,
+          ...this.scrollOptions
+        }
       },
       // 处理小数点，四舍五入，默认保留一位小数
       roundFun(value, n = 1) {

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

@@ -30,7 +30,12 @@
         type: [Number, String],
         default: 0
       },
-      scrollOptions: Object,
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
       updateRefresh: {
         type: Boolean,
         default: true
@@ -57,15 +62,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 +100,13 @@
           className += ' active'
         }
         return className
+      },
+      scroll() {
+        return this.scrollX || this.scrollY
       }
     },
     mounted () {
-      this.init()
+      this.initBs()
     },
     activated () {
       if (!this.__mpx_deactivated) {
@@ -106,7 +122,7 @@
       this.__mpx_deactivated = true
     },
     beforeDestroy () {
-      this.destroy()
+      this.destroyBs()
     },
     updated () {
       if (this.updateRefresh) this.refresh()
@@ -136,20 +152,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 +199,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 +230,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 +298,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,21 @@
         type: String,
         default: 'default'
       },
-      scrollOptions: Object
+      previousMargin: String,
+      nextMargin: String,
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
     },
     data () {
       return {
         currentIndex: this.current,
         currentChildLength: 0,
-        lastChildLength: 0
+        lastChildLength: 0,
+        init: false
       }
     },
     computed: {
@@ -81,13 +92,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 +113,7 @@
         this.changeSource = ''
         this.goto(val)
       },
-      currentChildLength(val) {
+      currentChildLength (val) {
         if (val < this.lastChildLength && val < this.currentIndex) {
           this.goto(0, 0)
         }
@@ -119,65 +137,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 +267,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 +278,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 +311,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 +328,6 @@
     overflow hidden
     position relative
 
-
   .mpx-swiper-content
     width 100%
     height 100%

package/lib/runtime/optionProcessor.js

@@ -140,6 +140,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
       routes: routes
     })
     global.__mpxRouter.stack = []
+    global.__mpxRouter.lastStack = null
     global.__mpxRouter.needCache = null
     global.__mpxRouter.needRemove = []
     global.__mpxRouter.eventChannelMap = {}
@@ -344,7 +345,7 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
           router.push(context.url)
           router.onReady(() => {
             context.rendered = () => {
-              context.state = JSON.stringify((pinia.state && pinia.state.value) || {})
+              context.state = pinia?.state?.value || {}
             }
             resolve(app)
           }, reject)
@@ -361,8 +362,8 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
       VueRouter,
       tabBarMap
     })
-    if (window.__INITIAL_STATE__) {
-      pinia.state.value = JSON.parse(window.__INITIAL_STATE__)
+    if (window.__INITIAL_STATE__ && pinia) {
+      pinia.state.value = window.__INITIAL_STATE__
     }
     app.$mount(webConfig.el || '#app')
   }

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/utils/dom-tag-config.js

@@ -68,6 +68,19 @@ const isNativeMiniTag = makeMap(
   'open-data,native-component,aria-component,page-meta'
 )
 
+/**
+ * 是否为mpx内置组件
+ * collected from packages/webpack-plugin/lib/runtime/components/web/
+ */
+const isBuildInTag = makeMap(
+  'mpx-image,mpx-picker-view,mpx-slider,mpx-textarea,mpx-input,mpx-picker,' +
+  'mpx-swiper-item,mpx-video,mpx-button,mpx-keep-alive,mpx-progress,' +
+  'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
+  'mpx-switch,mpx-web-view,mpx-checkbox,mpx-movable-view,mpx-radio,' +
+  'mpx-tab-bar-container,mpx-form,mpx-navigator,mpx-rich-text,mpx-tab-bar,' +
+  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
+)
+
 const isSpace = makeMap('ensp,emsp,nbsp')
 
 const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
@@ -92,6 +105,7 @@ module.exports = {
   isVoidTag,
   isNonPhrasingTag,
   isRichTextTag,
+  isBuildInTag,
   isUnaryTag,
   isSpace,
   isContWidth,

package/lib/web/script-helper.js

@@ -129,11 +129,11 @@ function buildGlobalParams ({ moduleId, scriptSrcMode, loaderContext, isProducti
     global.getCurrentPages = function () {
       if (!(typeof window !== 'undefined')) {
         console.error('[Mpx runtime error]: Dangerous API! global.getCurrentPages is running in non browser environment, It may cause some problems, please use this method with caution')
-        return
       }
-      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.9.0-beta.4",
+  "version": "2.9.0",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "300107cbcf0d6847e1d27896ea71ad4ce1387dd5"
+  "gitHead": "91ac258dbf1d0a324a74cac606e2cc10ef557823"
 }