@mpxjs/webpack-plugin 2.9.17 → 2.9.21

package/lib/index.js

@@ -46,6 +46,7 @@ const { matchCondition } = require('./utils/match-condition')
 const processDefs = require('./utils/process-defs')
 const config = require('./config')
 const hash = require('hash-sum')
+const nativeLoaderPath = normalize.lib('native-loader')
 const wxssLoaderPath = normalize.lib('wxss/index')
 const wxmlLoaderPath = normalize.lib('wxml/loader')
 const wxsLoaderPath = normalize.lib('wxs/loader')
@@ -196,7 +197,7 @@ class MpxWebpackPlugin {
 
   static nativeLoader (options = {}) {
     return {
-      loader: normalize.lib('native-loader'),
+      loader: nativeLoaderPath,
       options
     }
   }
@@ -251,6 +252,10 @@ class MpxWebpackPlugin {
     return addQuery(request, { isComponent: true })
   }
 
+  static getNativeEntry (request) {
+    return `!!${nativeLoaderPath}!${request}`
+  }
+
   static getPluginEntry (request) {
     return addQuery(request, {
       mpx: true,

package/lib/loader.js

@@ -50,7 +50,6 @@ module.exports = function (content) {
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
-  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
 
   const emitWarning = (msg) => {
     this.emitWarning(
@@ -64,14 +63,11 @@ module.exports = function (content) {
     )
   }
 
-  let ctorType = 'app'
-  if (pagesMap[resourcePath]) {
-    // page
-    ctorType = 'page'
-  } else if (componentsMap[resourcePath]) {
-    // component
-    ctorType = 'component'
-  }
+  let ctorType = pagesMap[resourcePath]
+    ? 'page'
+    : componentsMap[resourcePath]
+      ? 'component'
+      : 'app'
 
   // 支持资源query传入isPage或isComponent支持页面/组件单独编译
   if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
@@ -130,7 +126,7 @@ module.exports = function (content) {
           warn: emitWarning,
           error: emitError
         }
-        if (!isApp) {
+        if (ctorType !== 'app') {
           rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
         }
         const rulesRunner = getRulesRunner(rulesRunnerOptions)
@@ -278,17 +274,12 @@ module.exports = function (content) {
       }
 
       // 注入构造函数
-      let ctor = 'App'
-      if (ctorType === 'page') {
-        // swan也默认使用Page构造器
-        if (mpx.forceUsePageCtor || mode === 'ali') {
-          ctor = 'Page'
-        } else {
-          ctor = 'Component'
-        }
-      } else if (ctorType === 'component') {
-        ctor = 'Component'
-      }
+      const ctor = ctorType === 'page'
+        ? (mpx.forceUsePageCtor || mode === 'ali') ? 'Page' : 'Component'
+        : ctorType === 'component'
+          ? 'Component'
+          : 'App'
+
       output += `global.currentCtor = ${ctor}\n`
       output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()

package/lib/native-loader.js

@@ -6,8 +6,12 @@ const createHelpers = require('./helpers')
 const getJSONContent = require('./utils/get-json-content')
 const async = require('async')
 const { matchCondition } = require('./utils/match-condition')
-const { JSON_JS_EXT } = require('./utils/const')
+const { JSON_JS_EXT, MPX_APP_MODULE_ID } = require('./utils/const')
 const getRulesRunner = require('./platform')
+const getEntryName = require('./utils/get-entry-name')
+const AppEntryDependency = require('./dependencies/AppEntryDependency')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+
 // todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
 module.exports = function (content) {
   this.cacheable()
@@ -21,8 +25,8 @@ module.exports = function (content) {
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
-  const moduleId = 'm' + mpx.pathHash(filePath)
   const { resourcePath, queryObj } = parseRequest(this.resource)
+  const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
   const mode = mpx.mode
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
@@ -31,7 +35,6 @@ module.exports = function (content) {
   const componentsMap = mpx.componentsMap[packageName]
   const parsed = path.parse(resourcePath)
   const resourceName = path.join(parsed.dir, parsed.name)
-  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
   const srcMode = localSrcMode || globalSrcMode
   const typeExtMap = config[srcMode].typeExtMap
   const typeResourceMap = {}
@@ -143,6 +146,7 @@ module.exports = function (content) {
         useJSONJS
       }, null, this, callback)
     }, (content, callback) => {
+      let componentPlaceholder = []
       let json
       try {
         json = JSON5.parse(content)
@@ -158,7 +162,35 @@ module.exports = function (content) {
         warn: emitWarning,
         error: emitError
       }
-      if (!isApp) {
+
+      let ctorType = pagesMap[resourcePath]
+        ? 'page'
+        : componentsMap[resourcePath]
+          ? 'component'
+          : 'app'
+
+      // 支持资源query传入isPage或isComponent支持页面/组件单独编译
+      if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
+        const entryName = getEntryName(this) || mpx.getOutputPath(resourcePath, queryObj.isComponent ? 'component' : 'page')
+        ctorType = queryObj.isComponent ? 'component' : 'page'
+        this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
+      }
+
+      // 处理构造器类型
+      const ctor = ctorType === 'page'
+        ? (mpx.forceUsePageCtor || mode === 'ali') ? 'Page' : 'Component'
+        : ctorType === 'component'
+          ? 'Component'
+          : 'App'
+
+      if (ctorType === 'app') {
+        const appName = getEntryName(this)
+        if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+      }
+
+      const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
+
+      if (ctorType !== 'app') {
         rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
       }
       const rulesRunner = getRulesRunner(rulesRunnerOptions)
@@ -166,6 +198,9 @@ module.exports = function (content) {
       if (json.usingComponents) {
         usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
       }
+      if (json.componentPlaceholder) {
+        componentPlaceholder = componentPlaceholder.concat(Object.values(json.componentPlaceholder))
+      }
       const {
         getRequire
       } = createHelpers(loaderContext)
@@ -180,14 +215,16 @@ module.exports = function (content) {
 
         switch (type) {
           case 'template':
-            if (isApp) return ''
+            if (ctorType === 'app') return ''
             Object.assign(extraOptions, {
               hasScoped,
               hasComment,
               isNative,
               moduleId,
-              usingComponents
+              usingComponents,
+              componentPlaceholder
             })
+            // if (template.src) extraOptions.resourcePath = resourcePath
             break
           case 'styles':
             if (cssLang) part.lang = cssLang
@@ -209,20 +246,6 @@ module.exports = function (content) {
         output += `global.currentResource = ${JSON.stringify(filePath)}\n`
       }
 
-      // 注入构造函数
-      let ctor = 'App'
-      let ctorType = 'app'
-      if (pagesMap[resourcePath]) {
-        ctorType = 'page'
-        if (mpx.forceUsePageCtor || mode === 'ali') {
-          ctor = 'Page'
-        } else {
-          ctor = 'Component'
-        }
-      } else if (componentsMap[resourcePath]) {
-        ctor = 'Component'
-        ctorType = 'component'
-      }
       output += `global.currentCtor = ${ctor}\n`
       output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()

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

@@ -7,7 +7,7 @@ module.exports = function ({ print }) {
   return {
     test: TAG_NAME,
     web (tag, { el }) {
-      if (el.hasEvent) {
+      if (el.hasModel) {
         el.isBuiltIn = true
       }
       if (el.isBuiltIn) {

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

@@ -10,9 +10,10 @@ module.exports = function ({ print }) {
   return {
     test: TAG_NAME,
     web (tag, { el }) {
-      if (el.hasEvent) {
+      if (el.hasModel) {
         el.isBuiltIn = true
       }
+
       if (el.isBuiltIn) {
         return 'mpx-text'
       } else {

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

@@ -12,7 +12,7 @@ module.exports = function ({ print }) {
     //   return 'a:view'
     // },
     web (tag, { el }) {
-      if (el.hasEvent) {
+      if (el.hasModel) {
         el.isBuiltIn = true
       }
       if (el.isBuiltIn) {

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

@@ -124,7 +124,7 @@ module.exports = function getSpec ({ warn, error }) {
       {
         test: 'wx:model',
         web ({ value }, { el }) {
-          el.hasEvent = true
+          el.hasModel = true
           const attrsMap = el.attrsMap
           const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
           const stringify = JSON.stringify
@@ -375,9 +375,9 @@ module.exports = function getSpec ({ warn, error }) {
           }
         },
         web ({ name, value }, { eventRules, el, usingComponents }) {
-          if (parseMustacheWithContext(value).hasBinding) {
-            error('Web environment does not support mustache binding in event props!')
-            return
+          const parsed = parseMustacheWithContext(value)
+          if (parsed.hasBinding) {
+            value = '__invokeHandler(' + parsed.result + ', $event)'
           }
           const match = this.test.exec(name)
           const prefix = match[1]
@@ -387,8 +387,6 @@ module.exports = function getSpec ({ warn, error }) {
             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', data: { isComponent } })
           return {

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

@@ -0,0 +1,100 @@
+import { extendEvent } from './getInnerListeners'
+import { isBrowser } from '../../env'
+
+function MpxEvent (layer) {
+    this.targetElement = null
+
+    this.touches = []
+
+    this.touchStartX = 0
+
+    this.touchStartY = 0
+
+    this.startTimer = null
+
+    this.needTap = true
+
+    this.isTouchDevice = document && ('ontouchstart' in document.documentElement)
+
+    this.onTouchStart = (event) => {
+        if (event.targetTouches?.length > 1) {
+            return true
+        }
+
+        this.touches = event.targetTouches
+        this.targetElement = event.target
+        this.needTap = true
+        this.startTimer = null
+        this.touchStartX = this.touches[0].pageX
+        this.touchStartY = this.touches[0].pageY
+        this.startTimer = setTimeout(() => {
+            this.needTap = false
+            this.sendEvent(this.targetElement, 'longpress', event)
+            this.sendEvent(this.targetElement, 'longtap', event)
+        }, 350)
+    }
+
+    this.onTouchMove = (event) => {
+        const touch = event.changedTouches[0]
+        if (Math.abs(touch.pageX - this.touchStartX) > 1 || Math.abs(touch.pageY - this.touchStartY) > 1) {
+            this.needTap = false
+            this.startTimer && clearTimeout(this.startTimer)
+            this.startTimer = null
+        }
+    }
+
+    this.onTouchEnd = (event) => {
+        if (event.targetTouches?.length > 1) {
+            return true
+        }
+        this.startTimer && clearTimeout(this.startTimer)
+        this.startTimer = null
+        if (this.needTap) {
+            this.sendEvent(this.targetElement, 'tap', event)
+        }
+    }
+
+    this.onClick = (event) => {
+        this.targetElement = event.target
+        this.sendEvent(this.targetElement, 'tap', event)
+    }
+    this.sendEvent = (targetElement, type, event) => {
+        // eslint-disable-next-line no-undef
+        const touchEvent = new TouchEvent(type, {
+            view: window,
+            bubbles: true,
+            cancelable: true
+        })
+        const changedTouches = event.changedTouches || []
+        extendEvent(touchEvent, {
+            timeStamp: event.timeStamp,
+            currentTarget: event.target,
+            changedTouches,
+            touches: changedTouches,
+            detail: {
+                // pc端点击事件可能没有changedTouches，所以直接从 event中取
+                x: changedTouches[0]?.pageX || event.pageX || 0,
+                y: changedTouches[0]?.pageY || event.pageY || 0
+            }
+        })
+        targetElement && targetElement.dispatchEvent(touchEvent)
+    }
+
+    this.addListener = () => {
+        if (this.isTouchDevice) {
+            layer.addEventListener('touchstart', this.onTouchStart, true)
+            layer.addEventListener('touchmove', this.onTouchMove, true)
+            layer.addEventListener('touchend', this.onTouchEnd, true)
+        } else {
+            layer.addEventListener('click', this.onClick, true)
+        }
+    }
+    this.addListener()
+}
+
+if (isBrowser) {
+    document.addEventListener('DOMContentLoaded', function () {
+        // eslint-disable-next-line no-new
+        new MpxEvent(document.body)
+    }, false)
+}

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/template-compiler/compiler.js

@@ -104,6 +104,7 @@ let env
 let platformGetTagNamespace
 let filePath
 let refId
+let haveOptionChain = false
 
 function updateForScopesMap () {
   forScopes.forEach((scope) => {
@@ -164,6 +165,8 @@ const i18nWxsRequest = '~' + i18nWxsLoaderPath + '!' + i18nWxsPath
 const i18nModuleName = '__i18n__'
 const stringifyWxsPath = '~' + normalize.lib('runtime/stringify.wxs')
 const stringifyModuleName = '__stringify__'
+const optionsChainWxsPath = '~' + normalize.lib('runtime/oc.wxs')
+const optionsChainWxsName = '__oc__'
 
 const tagRES = /(\{\{(?:.|\n|\r)+?\}\})(?!})/
 const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
@@ -637,6 +640,7 @@ function parse (template, options) {
   forScopes = []
   forScopesMap = {}
   hasI18n = false
+  haveOptionChain = false
 
   platformGetTagNamespace = options.getTagNamespace || no
 
@@ -761,6 +765,10 @@ function parse (template, options) {
     }
   }
 
+  if (haveOptionChain) {
+    injectWxs(meta, optionsChainWxsName, optionsChainWxsPath)
+  }
+
   injectNodes.forEach((node) => {
     addChild(root, node, true)
   })
@@ -1156,6 +1164,7 @@ function parseMustacheWithContext (raw = '') {
       })
     }
 
+    exp = parseOptionChain(exp)
     if (i18n) {
       for (const i18nFuncName of i18nFuncNames) {
         const funcNameRE = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`)
@@ -1860,7 +1869,6 @@ function getVirtualHostRoot (options, meta) {
             value: '$listeners'
           }
         ])
-        rootView.hasEvent = true
         processElement(rootView, rootView, options, meta)
         return rootView
       }
@@ -2393,6 +2401,169 @@ function genNode (node) {
   return exp
 }
 
+/**
+ * 处理可选链用法
+ * @param str
+ * @returns
+ */
+function parseOptionChain (str) {
+  const wxsName = `${optionsChainWxsName}.g`
+  let optionsRes
+  while (optionsRes = /\?\./.exec(str)) {
+    const strLength = str.length
+    const grammarMap = {
+      init () {
+        const initKey = [
+          {
+            mapKey: '[]',
+            mapValue: [
+              {
+                key: '[',
+                value: 1
+              },
+              {
+                key: ']',
+                value: -1
+              }
+            ]
+          },
+          {
+            mapKey: '()',
+            mapValue: [
+              {
+                key: '(',
+                value: 1
+              },
+              {
+                key: ')',
+                value: -1
+              }
+            ]
+          }
+        ]
+        this.count = {}
+        initKey.forEach(({ mapKey, mapValue }) => {
+          mapValue.forEach(({ key, value }) => {
+            this[key] = this.changeState(mapKey, value)
+          })
+        })
+      },
+      changeState (key, value) {
+        if (!this.count[key]) {
+          this.count[key] = 0
+        }
+        return () => {
+          this.count[key] = this.count[key] + value
+          return this.count[key]
+        }
+      },
+      checkState () {
+        return Object.values(this.count).find(i => i)
+      }
+    }
+    let leftIndex = optionsRes.index
+    let rightIndex = leftIndex + 2
+    let haveNotGetValue = true
+    let chainValue = ''
+    let chainKey = ''
+    let notCheck = false
+    grammarMap.init()
+    // 查 ?. 左边值
+    while (haveNotGetValue && leftIndex > 0) {
+      const left = str[leftIndex - 1]
+      const grammar = grammarMap[left]
+      if (notCheck) {
+        // 处于表达式内
+        chainValue = left + chainValue
+        if (grammar) {
+          grammar()
+          if (!grammarMap.checkState()) {
+            // 表达式结束
+            notCheck = false
+          }
+        }
+      } else if (~[']', ')'].indexOf(left)) {
+        // 命中表达式，开始记录表达式
+        chainValue = left + chainValue
+        notCheck = true
+        grammar()
+      } else if (left !== ' ') {
+        if (!/[A-Za-z0-9_$.]/.test(left)) {
+          // 结束
+          haveNotGetValue = false
+          leftIndex++
+        } else {
+          // 正常语法
+          chainValue = left + chainValue
+        }
+      }
+      leftIndex--
+    }
+    if (grammarMap.checkState() && haveNotGetValue) {
+      // 值查找结束但是语法未闭合或者处理到边界还未结束，抛异常
+      throw new Error('[optionChain] option value illegal!!!')
+    }
+    haveNotGetValue = true
+    let keyValue = ''
+    // 查 ?. 右边key
+    while (haveNotGetValue && rightIndex < strLength) {
+      const right = str[rightIndex]
+      const grammar = grammarMap[right]
+      if (notCheck) {
+        // 处于表达式内
+        if (grammar) {
+          grammar()
+          if (grammarMap.checkState()) {
+            keyValue += right
+          } else {
+            // 表达式结束
+            notCheck = false
+            chainKey += `,${keyValue}`
+            keyValue = ''
+          }
+        } else {
+          keyValue += right
+        }
+      } else if (~['[', '('].indexOf(right)) {
+        // 命中表达式，开始记录表达式
+        grammar()
+        if (keyValue) {
+          chainKey += `,'${keyValue}'`
+          keyValue = ''
+        }
+        notCheck = true
+      } else if (!/[A-Za-z0-9_$.?]/.test(right)) {
+        // 结束
+        haveNotGetValue = false
+        rightIndex--
+      } else if (right !== '?') {
+        // 正常语法
+        if (right === '.') {
+          if (keyValue) {
+            chainKey += `,'${keyValue}'`
+          }
+          keyValue = ''
+        } else {
+          keyValue += right
+        }
+      }
+      rightIndex++
+    }
+    if (grammarMap.checkState() && haveNotGetValue) {
+      // key值查找结束但是语法未闭合或者处理到边界还未结束，抛异常
+      throw new Error('[optionChain] option key illegal!!!')
+    }
+    if (keyValue) {
+      chainKey += `,'${keyValue}'`
+    }
+    str = str.slice(0, leftIndex) + `${wxsName}(${chainValue},[${chainKey.slice(1)}])` + str.slice(rightIndex)
+    if (!haveOptionChain) {
+      haveOptionChain = true
+    }
+  }
+  return str
+}
+
 module.exports = {
   parseComponent,
   parse,

package/lib/utils/ts-loader-watch-run-loader-filter.js

@@ -1,7 +1,10 @@
+const toPosix = require('./to-posix')
+
 module.exports = (loaders, loaderIndex) => {
   for (let i = loaderIndex; i >= 0; i--) {
     const currentLoader = loaders[i]
-    if (currentLoader.path.endsWith('node_modules/ts-loader/dist/stringify-loader.js')) {
+    const currentLoaderPath = toPosix(currentLoader.path)
+    if (currentLoaderPath.endsWith('node_modules/ts-loader/dist/stringify-loader.js')) {
       return i
     }
   }

package/lib/web/processMainScript.js

@@ -2,6 +2,7 @@
 const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+const eventPath = normalize.lib('runtime/components/web/event')
 const {
   buildComponentsMap,
   buildPagesMap,
@@ -65,6 +66,8 @@ module.exports = function (script, {
     globalTabBar
   })
 
+  output += `\n  require(${stringifyRequest(loaderContext, eventPath)})\n`
+
   output += `\n  var App = require(${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}).default\n`
 
   output += `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.17",
+  "version": "2.9.21",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "80dd826352ab7178952f6ac1f2d7dbcf610fe6cf"
+  "gitHead": "0ed5fa50016bd13a170c38619cfa9cbcc352ba23"
 }