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

package/lib/index.js

@@ -124,7 +124,6 @@ class MpxWebpackPlugin {
     options.resolveMode = options.resolveMode || 'webpack'
     options.writeMode = options.writeMode || 'changed'
     options.autoScopeRules = options.autoScopeRules || {}
-    options.renderOptimizeRules = options.renderOptimizeRules || {}
     options.autoVirtualHostRules = options.autoVirtualHostRules || {}
     options.forceDisableProxyCtor = options.forceDisableProxyCtor || false
     options.transMpxRules = options.transMpxRules || {
@@ -168,16 +167,11 @@ class MpxWebpackPlugin {
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
     options.partialCompile = options.mode !== 'web' && options.partialCompile
-    options.asyncSubpackageRules = options.asyncSubpackageRules || null
+    options.asyncSubpackageRules = options.asyncSubpackageRules || []
+    options.optimizeRenderRules = options.optimizeRenderRules || {}
     options.retryRequireAsync = options.retryRequireAsync || false
     options.enableAliRequireAsync = options.enableAliRequireAsync || false
     options.optimizeSize = options.optimizeSize || false
-    let proxyComponentEventsRules = []
-    const proxyComponentEventsRulesRaw = options.proxyComponentEventsRules
-    if (proxyComponentEventsRulesRaw) {
-      proxyComponentEventsRules = Array.isArray(proxyComponentEventsRulesRaw) ? proxyComponentEventsRulesRaw : [proxyComponentEventsRulesRaw]
-    }
-    options.proxyComponentEventsRules = proxyComponentEventsRules
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
@@ -638,7 +632,6 @@ class MpxWebpackPlugin {
           appTitle: 'Mpx homepage',
           attributes: this.options.attributes,
           externals: this.options.externals,
-          renderOptimizeRules: this.options.renderOptimizeRules,
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
@@ -657,7 +650,7 @@ class MpxWebpackPlugin {
             })
           },
           asyncSubpackageRules: this.options.asyncSubpackageRules,
-          proxyComponentEventsRules: this.options.proxyComponentEventsRules,
+          optimizeRenderRules: this.options.optimizeRenderRules,
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))

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/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
@@ -453,6 +454,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)