@mpxjs/webpack-plugin 2.9.17 → 2.9.19-react.0

package/lib/runtime/components/web/getInnerListeners.js

@@ -1,6 +1,3 @@
-import { isEmptyObject } from '../../utils'
-import { isBrowser } from '../../env'
-
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
   // 该函数必须在产生merge前执行
@@ -44,80 +41,6 @@ function mergeListeners (listeners, otherListeners, options = {}) {
   })
 }
 
-function processTap (listeners, context) {
-  const listenerMap = {}
-  const tapEvents = ['tap', 'longpress', 'longtap']
-  const isTouchDevice = isBrowser ? document && ('ontouchstart' in document.documentElement) : true
-  tapEvents.forEach((eventName) => {
-    if (listeners[eventName]) {
-      listenerMap[eventName] = true
-      delete listeners[eventName]
-    }
-  })
-  if (isEmptyObject(listenerMap)) return
-  context.__mpxTapInfo = context.__mpxTapInfo || {}
-  let events
-  if (isTouchDevice) {
-    events = {
-      touchstart (e) {
-        context.__mpxTapInfo.detail = {
-          x: e.changedTouches[0].pageX,
-          y: e.changedTouches[0].pageY
-        }
-        context.__mpxTapInfo.startTimer = null
-        context.__mpxTapInfo.needTap = true
-        if (listenerMap.longpress || listenerMap.longtap) {
-          context.__mpxTapInfo.startTimer = setTimeout(() => {
-            context.__mpxTapInfo.needTap = false
-            if (listenerMap.longpress) {
-              const re = inheritEvent('longpress', e, context.__mpxTapInfo.detail)
-              context.$emit('longpress', re)
-            }
-            if (listenerMap.longtap) {
-              const re = inheritEvent('longtap', e, context.__mpxTapInfo.detail)
-              context.$emit('longtap', re)
-            }
-          }, 350)
-        }
-      },
-      touchmove (e) {
-        const tapDetailInfo = context.__mpxTapInfo.detail || {}
-        const currentPageX = e.changedTouches[0].pageX
-        const currentPageY = e.changedTouches[0].pageY
-        if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
-          context.__mpxTapInfo.needTap = false
-          context.__mpxTapInfo.startTimer && clearTimeout(context.__mpxTapInfo.startTimer)
-          context.__mpxTapInfo.startTimer = null
-        }
-      },
-      touchend (e) {
-        context.__mpxTapInfo.startTimer && clearTimeout(context.__mpxTapInfo.startTimer)
-        if (listenerMap.tap && context.__mpxTapInfo.needTap) {
-          const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
-          context.$emit('tap', re)
-        }
-      }
-    }
-  } else {
-    events = {
-      click (e) {
-        if (listenerMap.tap) {
-          context.__mpxTapInfo.detail = {
-            x: e.pageX,
-            y: e.pageY
-          }
-          const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
-          context.$emit('tap', re)
-        }
-      }
-    }
-  }
-
-  mergeListeners(listeners, events, {
-    force: true
-  })
-}
-
 export function extendEvent (e, extendObj = {}) {
   Object.keys(extendObj).forEach((key) => {
     Object.defineProperty(e, key, {
@@ -181,7 +104,6 @@ export default function getInnerListeners (context, options = {}) {
   }
 
   processModel(listeners, context)
-  processTap(listeners, context)
   mergeListeners(listeners, mergeBefore, mergeBeforeOptions)
   mergeListeners(listeners, mergeAfter, mergeAfterOptions)
   ignoredListeners.forEach((key) => {

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

@@ -95,7 +95,7 @@
     },
     mounted () {
       if (this.formType) {
-        this.$on('tap', () => {
+        this.$el.addEventListener('tap', () => {
           if (this.form && this.form[this.formType]) {
             this.form[this.formType]()
           }

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

@@ -36,7 +36,7 @@
       }
     },
     mounted () {
-      this.$on('tap', () => {
+      this.$el.addEventListener('tap', () => {
         const mpx = global.__mpx
         if (mpx) {
           switch (this.openType) {

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

@@ -3,12 +3,13 @@
   import { processSize } from '../../utils'
   import BScroll from '@better-scroll/core'
   import PullDown from '@better-scroll/pull-down'
-  import ObserveDom from '@better-scroll/observe-dom'
   import throttle from 'lodash/throttle'
+  import debounce from 'lodash/debounce'
 
-  BScroll.use(ObserveDom)
   BScroll.use(PullDown)
 
+  let mutationObserver = null
+
   export default {
     name: 'mpx-scroll-view',
     props: {
@@ -36,10 +37,6 @@
           return {}
         }
       },
-      updateRefresh: {
-        type: Boolean,
-        default: true
-      },
       scrollIntoView: String,
       scrollWithAnimation: Boolean,
       enableFlex: Boolean,
@@ -66,7 +63,11 @@
         currentX: 0,
         currentY: 0,
         lastX: 0,
-        lastY: 0
+        lastY: 0,
+        lastContentWidth: 0,
+        lastContentHeight: 0,
+        lastWrapperWidth: 0,
+        lastWrapperHeight: 0
       }
     },
     computed: {
@@ -101,12 +102,28 @@
         }
         return className
       },
-      scroll() {
+      scroll () {
         return this.scrollX || this.scrollY
       }
     },
     mounted () {
+      this.debounceRefresh = debounce(function () {
+        this.refresh()
+      }, 200, {
+        leading: false,
+        trailing: true
+      })
+      this.dispatchScrollTo = throttle(function (direction) {
+        let eventName = 'scrolltoupper'
+        if (direction === 'bottom' || direction === 'right') eventName = 'scrolltolower'
+        this.$emit(eventName, getCustomEvent(eventName, { direction }, this))
+      }, 200, {
+        leading: true,
+        trailing: false
+      })
       this.initBs()
+      this.observeAnimation('add')
+      this.handleMutationObserver()
     },
     activated () {
       if (!this.__mpx_deactivated) {
@@ -121,11 +138,11 @@
     deactivated () {
       this.__mpx_deactivated = true
     },
+
     beforeDestroy () {
       this.destroyBs()
-    },
-    updated () {
-      if (this.updateRefresh) this.refresh()
+      this.observeAnimation('remove')
+      this.destroyMutationObserver()
     },
     watch: {
       scrollIntoView (val) {
@@ -153,7 +170,7 @@
           }
         },
       },
-      scroll(val) {
+      scroll (val) {
         if (val) {
           this.initBs()
         } else {
@@ -162,12 +179,19 @@
       }
     },
     methods: {
+      observeAnimation (type) {
+        const eventNames = ['transitionend', 'animationend']
+        const  behaviorType = type === 'add' ? 'addEventListener' : 'removeEventListener'
+        eventNames.forEach(eventName => {
+          this.$refs.scrollContent?.[behaviorType](eventName, this.handleObserveAnimation)
+        })
+      },
       destroyBs () {
         if (!this.bs) return
         this.bs.destroy()
         delete this.bs
       },
-      disableBs() {
+      disableBs () {
         if (!this.bs) return
         this.bs.disable()
         this.currentX = -this.bs.x
@@ -176,6 +200,9 @@
       initBs () {
         this.destroyBs()
         this.initLayerComputed()
+        if (this.scrollOptions.observeDOM) {
+          console.warn('[Mpx runtime warn]The observeDOM attribute in scroll-view has been deprecated, please stop using it')
+        }
         const originBsOptions = {
           startX: -this.currentX,
           startY: -this.currentY,
@@ -194,11 +221,8 @@
             stop: 56
           }
         }
-        const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions)
+        const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions, { observeDOM: false })
         this.bs = new BScroll(this.$refs.wrapper, bsOptions)
-        this.bs.scroller.hooks.on('beforeRefresh', () => {
-          this.initLayerComputed()
-        })
         this.lastX = -this.currentX
         this.lastY = -this.currentY
         this.bs.on('scroll', throttle(({ x, y }) => {
@@ -283,6 +307,7 @@
                 }
               }
             })
+
             this.bs.on('pullingDown', () => {
               this.$emit('refresherrefresh', getCustomEvent('refresherrefresh', {}, this))
             })
@@ -297,13 +322,17 @@
       },
       initLayerComputed () {
         const wrapper = this.$refs.wrapper
-        const computedStyle = getComputedStyle(wrapper)
-        // 考虑子元素样式可能会设置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 scrollWrapperWidth = wrapper?.clientWidth || 0
+        const scrollWrapperHeight = wrapper?.clientHeight || 0
+        if (wrapper) {
+          const computedStyle = getComputedStyle(wrapper)
+          // 考虑子元素样式可能会设置100%，如果直接继承 scrollContent 的样式可能会有问题
+          // 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
+          this.$refs.innerWrapper.style.width = `${scrollWrapperWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
+          this.$refs.innerWrapper.style.height = `${scrollWrapperHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)}px`
+        }
         const innerWrapper = this.$refs.innerWrapper
-        const childrenArr = Array.from(innerWrapper.children)
+        const childrenArr = innerWrapper ? Array.from(innerWrapper.children) : []
 
         const getMinLength = (min, value) => {
           if (min === undefined) {
@@ -334,27 +363,72 @@
           maxRight = getMaxLength(maxRight, temp.right)
           maxBottom = getMaxLength(maxBottom, temp.bottom)
         })
-
-        const width = maxRight - minLeft
-        const height = maxBottom - minTop
-        this.$refs.scrollContent.style.width = `${width}px`
-        this.$refs.scrollContent.style.height = `${height}px`
+        const width = maxRight - minLeft || 0
+        const height = maxBottom - minTop || 0
+        if (this.$refs.scrollContent) {
+          this.$refs.scrollContent.style.width = `${width}px`
+          this.$refs.scrollContent.style.height = `${height}px`
+        }
+        return {
+          scrollContentWidth: width,
+          scrollContentHeight: height,
+          scrollWrapperWidth,
+          scrollWrapperHeight
+        }
       },
       refresh () {
         if (this.__mpx_deactivated) {
           this.__mpx_deactivated_refresh = true
           return
         }
-        if (this.bs) this.bs.refresh()
+        const { scrollContentWidth, scrollContentHeight,  scrollWrapperWidth, scrollWrapperHeight} = this.initLayerComputed()
+        if (!this.compare(scrollWrapperWidth, this.lastWrapperWidth) || !this.compare(scrollWrapperHeight, this.lastWrapperHeight) || !this.compare(scrollContentWidth, this.lastContentWidth) || !this.compare(scrollContentHeight, this.lastContentHeight)) {
+          this.lastContentWidth = scrollContentWidth
+          this.lastContentHeight = scrollContentHeight
+          this.lastWrapperWidth = scrollWrapperWidth
+          this.lastWrapperHeight = scrollWrapperHeight
+          if (this.bs) this.bs.refresh()
+        }
       },
-      dispatchScrollTo: throttle(function (direction) {
-        let eventName = 'scrolltoupper'
-        if (direction === 'bottom' || direction === 'right') eventName = 'scrolltolower'
-        this.$emit(eventName, getCustomEvent(eventName, { direction }, this))
-      }, 200, {
-        leading: true,
-        trailing: false
-      })
+      compare(num1, num2, scale = 1) {
+        return Math.abs(num1 - num2) < scale
+      },
+      handleMutationObserver () {
+        if (typeof MutationObserver !== 'undefined') {
+          mutationObserver = new MutationObserver((mutations) => this.mutationObserverHandler(mutations))
+          const config = { attributes: true, childList: true, subtree: true }
+          mutationObserver.observe(this.$refs.wrapper, config)
+        }
+      },
+       mutationObserverHandler (mutations) {
+        let needRefresh = false
+        for (let i = 0; i < mutations.length; i++) {
+          const mutation = mutations[i]
+          if (mutation.type !== 'attributes') {
+             needRefresh = true
+            break
+          } else {
+            if (mutation.target !== this.$refs.scrollContent && mutation.target !== this.$refs.innerWrapper) {
+              needRefresh = true
+              break
+            }
+          }
+        }
+        if (needRefresh) {
+          this.debounceRefresh()
+        }
+      },
+      handleObserveAnimation (e) {
+        if (e.target !== this.$refs.scrollContent) {
+          this.debounceRefresh()
+        }
+      },
+      destroyMutationObserver () {
+        if (mutationObserver) {
+          mutationObserver.disconnect()
+          mutationObserver = null
+        }
+      }
     },
     render (createElement) {
       const data = {
@@ -418,11 +492,13 @@
         bottom: 20px
         left: 50%
         transform: translateX(-50%)
+
       .mpx-pull-down-slot
         position: absolute
         width: 100%
         height: auto
         bottom: 0
+
       .mpx-pull-down-content-black
         .circle
           display: inline-block;

package/lib/runtime/oc.wxs

@@ -0,0 +1,16 @@
+// 可选链wxs
+module.exports.g = function (val, valKeyArr) {
+    var res = val
+    if (typeof val !== 'object') {
+        return undefined
+    }
+    var len = valKeyArr.length
+    var i = 0
+    while (i < len) {
+        if ((res = res[valKeyArr[i]]) === undefined) {
+            break
+        }
+        i++
+    }
+    return res
+}

package/lib/runtime/optionProcessor.js

@@ -86,7 +86,7 @@ export function getComponent (component, extendOptions) {
 export function getWxsMixin (wxsModules) {
   if (!wxsModules || !Object.keys(wxsModules).length) return
   return {
-    created () {
+    beforeCreate () {
       Object.keys(wxsModules).forEach((key) => {
         if (key in this) {
           console.error(`[Mpx runtime error]: The wxs module key [${key}] exist in the component/page instance already, please check and rename it!`)

package/lib/runtime/stringify.wxs

@@ -90,10 +90,6 @@ function isArray (arr) {
   }
 }
 
-function isDef (v) {
-  return v !== undefined && v !== null
-}
-
 var escapeMap = {
   '(': '_pl_',
   ')': '_pr_',
@@ -145,11 +141,11 @@ function stringifyDynamicClass (value) {
 
 function stringifyArray (value) {
   var res = ''
-  var stringified
+  var classString
   for (var i = 0; i < value.length; i++) {
-    if (isDef(stringified = stringifyDynamicClass(value[i])) && stringified !== '') {
+    if ((classString = stringifyDynamicClass(value[i]))) {
       if (res) res += ' '
-      res += stringified
+      res += classString
     }
   }
   return res

package/lib/runtime/useNodesRef.ts

@@ -0,0 +1,39 @@
+import { useRef, useEffect, useImperativeHandle, RefObject, ForwardedRef } from 'react'
+
+
+type Obj = Record<string, any>
+
+export type HandlerRef<T, P> = {
+  getNodeInstance(): {
+    props: RefObject<P>,
+    nodeRef: RefObject<T>,
+    instance: Obj
+  }
+}
+
+export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, instance:Obj = {} ) {
+  const nodeRef = useRef<T>(null)
+  const _props = useRef<P | null>(props)
+
+  useEffect(() => {
+    _props.current = props
+    return () => {
+      _props.current = null // 组件销毁，清空 _props 依赖数据
+    }
+  }, [props])
+  useImperativeHandle(ref, () => {
+    return {
+      getNodeInstance () {
+        return {
+          props: _props,
+          nodeRef,
+          instance
+        }
+      }
+    }
+  })
+
+  return {
+    nodeRef
+  }
+}

package/lib/style-compiler/index.js

@@ -9,6 +9,7 @@ const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
 const { matchCondition } = require('../utils/match-condition')
 const parseRequest = require('../utils/parse-request')
+const isReact = require('../utils/env').isReact
 
 module.exports = function (css, map) {
   this.cacheable()
@@ -47,7 +48,7 @@ module.exports = function (css, map) {
       plugins.push(transSpecial({ id }))
     }
 
-    if (mode === 'web') {
+    if (mode === 'web' || isReact(mode)) {
       plugins.push(transSpecial({ id }))
     }