@mpxjs/webpack-plugin 2.9.0-beta.3 → 2.9.0-beta.5

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

@@ -85,7 +85,7 @@ function checkDelAndGetPath (path) {
       if (args.length === 1) {
         delPath = current.parentPath
       } else {
-        // case: this._i(a, function() {})
+        // case: _i(a, function() {})
         canDel = false
         break
       }
@@ -96,6 +96,16 @@ function checkDelAndGetPath (path) {
       } else {
         delPath = current.parentPath
       }
+    } else if (t.isLogicalExpression(current.container)) { // case: a || ''
+      const key = current.key === 'left' ? 'right' : 'left'
+      if (t.isLiteral(current.parent[key])) {
+        delPath = current.parentPath
+      } else {
+        canDel = false
+        break
+      }
+    } else if (current.key === 'expression' && t.isExpressionStatement(current.parentPath)) { // dealRemove删除节点时需要
+      delPath = current.parentPath
     } else {
       break
     }
@@ -152,10 +162,6 @@ function checkPrefix (keys, key) {
 }
 
 function dealRemove (path, replace) {
-  while (path.key === 'expression' && t.isExpressionStatement(path.parentPath)) {
-    path = path.parentPath
-  }
-
   try {
     if (replace) {
       path.replaceWith(t.stringLiteral(''))
@@ -163,8 +169,9 @@ function dealRemove (path, replace) {
       t.validate(path, path.key, null)
       path.remove()
     }
+    delete path.needBind
+    delete path.collectInfo
   } catch (e) {
-    console.error(e)
   }
 }
 
@@ -202,13 +209,30 @@ module.exports = {
       Identifier (path) {
         if (
           checkBindThis(path) &&
-          !path.scope.hasBinding(path.node.name) &&
           !ignoreMap[path.node.name]
         ) {
+          const scopeBinding = path.scope.hasBinding(path.node.name)
+          // 删除局部作用域的变量
+          if (scopeBinding) {
+            if (renderReduce) {
+              const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
+              if (canDel && !ignore) {
+                delPath.delInfo = {
+                  isLocal: true,
+                  canDel,
+                  replace
+                }
+              }
+            }
+            return
+          }
           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
@@ -272,10 +296,14 @@ module.exports = {
       enter (path) {
         // 删除重复变量
         if (path.delInfo) {
-          const { keyPath, canDel, replace } = path.delInfo
+          const { keyPath, canDel, isLocal, replace } = path.delInfo
           delete path.delInfo
 
           if (canDel) {
+            if (isLocal) { // 局部作用域里的变量，可直接删除
+              dealRemove(path, replace)
+              return
+            }
             const data = bindingsMap.get(currentBlock)
             const { bindings, pBindings } = data
             const allBindings = Object.assign({}, pBindings, bindings)
@@ -283,14 +311,12 @@ module.exports = {
             // 优先判断前缀，再判断全等
             if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
               dealRemove(path, replace)
-              return
             } else {
               const currentBlockVars = bindings[keyPath]
               if (currentBlockVars.length > 1) {
                 const index = currentBlockVars.findIndex(item => !item.canDel)
                 if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量
                   dealRemove(path, replace)
-                  return
                 }
               }
             }
@@ -311,9 +337,14 @@ module.exports = {
       },
       MemberExpression: {
         exit (path) {
-          if (path.collectPath) {
-            path.node && path.replaceWith(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('_c')), [path.collectPath, path.node]))
-            delete path.collectPath
+          if (path.collectInfo) {
+            const { isSimple, key } = path.collectInfo
+            const callee = isSimple ? t.identifier('_sc') : t.identifier('_c')
+            const replaceNode = renderReduce
+              ? t.callExpression(callee, [key])
+              : t.callExpression(callee, [key, path.node])
+            path.node && path.replaceWith(replaceNode)
+            delete path.collectInfo
           }
         }
       }