@mpxjs/webpack-plugin 2.10.6 → 2.10.7-beta.1

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

@@ -44,6 +44,7 @@
       enhanced: Boolean,
       refresherEnabled: Boolean,
       refresherTriggered: Boolean,
+      enableSticky: Boolean,
       refresherThreshold: {
         type: Number,
         default: 45
@@ -57,6 +58,16 @@
         default: ''
       }
     },
+    provide () {
+      return {
+        scrollOffset: {
+          get: () => this.lastY
+        },
+        refreshVersion: {
+          get: () => this.refreshVersion
+        }
+      }
+    },
     data () {
       return {
         isLoading: false,
@@ -68,7 +79,8 @@
         lastContentWidth: 0,
         lastContentHeight: 0,
         lastWrapperWidth: 0,
-        lastWrapperHeight: 0
+        lastWrapperHeight: 0,
+        refreshVersion: 0
       }
     },
     computed: {
@@ -222,6 +234,9 @@
             stop: 56
           }
         }
+        if(this.enableSticky) {
+          originBsOptions.useTransition = false
+        }
         const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions, { observeDOM: false })
         this.bs = new BScroll(this.$refs.wrapper, bsOptions)
         this.lastX = -this.currentX
@@ -251,7 +266,7 @@
           }
           this.lastX = x
           this.lastY = y
-        }, 30, {
+        }, this.enableSticky ? 0 : 30, {
           leading: true,
           trailing: true
         }))
@@ -327,6 +342,7 @@
         const scrollWrapperHeight = wrapper?.clientHeight || 0
         if (wrapper) {
           const computedStyle = getComputedStyle(wrapper)
+          this.refreshVersion = this.refreshVersion + 1
           // 考虑子元素样式可能会设置100%，如果直接继承 scrollContent 的样式可能会有问题
           // 所以使用 wrapper 作为 innerWrapper 的宽高参考依据
           this.$refs.innerWrapper.style.width = `${scrollWrapperWidth - parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
@@ -458,7 +474,8 @@
       }
 
       const innerWrapper = createElement('div', {
-        ref: 'innerWrapper'
+        ref: 'innerWrapper',
+        class: 'mpx-inner-wrapper'
       }, this.$slots.default)
 
       const pullDownContent = this.refresherDefaultStyle !== 'none' ? createElement('div', {
@@ -568,4 +585,4 @@
               background: rgba(255, 255, 255, .7)
             100%
               background: rgba(255, 255, 255, .3)
-</style>
+</style>

package/lib/runtime/components/web/mpx-sticky-header.vue

@@ -0,0 +1,91 @@
+<script>
+import { warn } from '@mpxjs/utils'
+import { getCustomEvent } from './getInnerListeners'
+
+  export default {
+    name: 'mpx-sticky-header',
+    inject: ['scrollOffset', 'refreshVersion'],
+    props: {
+      'offsetTop': {
+        type: Number,
+        default: 0
+      }
+    },
+    data() {
+      return {
+        headerTop: 0,
+        isStickOnTop: false
+      }
+    },
+    computed: {
+      _scrollOffset() {
+        return -this.scrollOffset?.get() || 0
+      },
+      _refreshVersion() {
+        return this.refreshVersion?.get() || 0
+      }
+    },
+    watch: {
+      _scrollOffset: {
+        handler(newScrollOffset) {
+          const newIsStickOnTop = newScrollOffset > this.headerTop
+          if (newIsStickOnTop !== this.isStickOnTop) {
+            this.isStickOnTop = newIsStickOnTop
+            this.$emit('stickontopchange', getCustomEvent('stickontopchange', {
+              isStickOnTop: newIsStickOnTop
+            }, this))
+          }
+          const stickyHeader = this.$refs.stickyHeader
+          if (!stickyHeader) return
+          if (this.isStickOnTop) {
+            stickyHeader.style.transform = `translateY(${newScrollOffset - this.headerTop + this.offsetTop}px)`
+          } else {
+            stickyHeader.style.transform = 'none'
+          }
+        },
+        immediate: true
+      },
+      _refreshVersion: {
+        handler() {
+          const parentElement = this.$el.parentElement
+          if (!parentElement) return
+          
+          const parentClass = parentElement.className || ''
+          const isStickySection = /mpx-sticky-section/.test(parentClass)
+          const isScrollViewWrapper = /mpx-inner-wrapper/.test(parentClass)
+          
+          if (!isStickySection && !isScrollViewWrapper) {
+            warn('sticky-header only supports being a direct child of a scroll-view or sticky-section component.')
+            return
+          }
+          
+          this.headerTop = isStickySection 
+            ? this.$el.offsetTop + parentElement.offsetTop
+            : this.$el.offsetTop
+          
+          const stickyHeader = this.$refs.stickyHeader
+          if (!stickyHeader) return
+          
+          if (this._scrollOffset > this.headerTop) {
+            stickyHeader.style.transform = `translateY(${this._scrollOffset - this.headerTop + this.offsetTop}px)`
+          } else {
+            stickyHeader.style.transform = 'none'
+          }
+        },
+      }
+    },
+    render(h) {
+      const style = {
+        width: '100%',
+        boxSizing: 'border-box',
+        position: 'relative',
+        zIndex: 10
+      }
+
+      return h('div', {
+        style,
+        ref: 'stickyHeader'
+      }, this.$slots.default)
+    }
+  }
+</script>

package/lib/runtime/components/web/mpx-sticky-section.vue

@@ -0,0 +1,15 @@
+<script>
+  export default {
+    name: 'mpx-sticky-section',
+    render(h) {
+      const style = {
+        position: 'relative'
+      }
+
+      return h('div', {
+        style,
+        class: 'mpx-sticky-section'
+      }, this.$slots.default)
+    }
+  }
+</script>

package/lib/runtime/optionProcessor.js

@@ -181,7 +181,6 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     global.__mpxRouter.lastStack = null
     global.__mpxRouter.needCache = null
     global.__mpxRouter.needRemove = []
-    global.__mpxRouter.eventChannelMap = {}
     global.__mpxRouter.currentActionType = null
     // 处理reLaunch中传递的url并非首页时的replace逻辑
     global.__mpxRouter.beforeEach(function (to, from, next) {
@@ -241,7 +240,6 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
         case 'to':
           stack.push(insertItem)
           global.__mpxRouter.needCache = insertItem
-          if (action.eventChannel) global.__mpxRouter.eventChannelMap[to.path.slice(1)] = action.eventChannel
           break
         case 'back':
           global.__mpxRouter.needRemove = stack.splice(stack.length - action.delta, action.delta)

package/lib/template-compiler/compiler.js

@@ -180,7 +180,7 @@ const i18nModuleName = '_i'
 const stringifyWxsPath = '~' + normalize.lib('runtime/stringify.wxs')
 const stringifyModuleName = '_s'
 const optionalChainWxsPath = '~' + normalize.lib('runtime/oc.wxs')
-const optionalChainWxsName = '_o'
+const optionalChainWxsName = '_oc' // 改成_oc解决web下_o重名问题
 
 const tagRES = /(\{\{(?:.|\n|\r)+?\}\})(?!})/
 const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
@@ -2725,8 +2725,8 @@ function processElement (el, root, options, meta) {
     processIf(el)
     processFor(el)
     processRefReact(el, meta)
-    processStyleReact(el, options)
     if (!pass) {
+      processStyleReact(el, options)
       processEventReact(el, options)
       processComponentGenerics(el, meta)
       processComponentIs(el, options)

package/lib/utils/dom-tag-config.js

@@ -72,7 +72,7 @@ const isNativeMiniTag = makeMap(
  * 是否为mpx内置组件
  * collected from packages/webpack-plugin/lib/runtime/components/web/
  */
-const isBuildInTag = makeMap(
+const isBuildInWebTag = 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,' +
@@ -81,6 +81,19 @@ const isBuildInTag = makeMap(
   'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
 )
 
+/**
+ * 是否为mpx2rn内置组件
+ */
+const isBuildInReactTag = makeMap(
+  'mpx-web-view,mpx-view,mpx-video,mpx-textarea,mpx-text,mpx-switch,' +
+  'mpx-swiper,mpx-swiper-item,mpx-simple-view,mpx-simple-text,mpx-scroll-view,' +
+  'mpx-root-portal,mpx-radio,mpx-radio-group,mpx-navigator,mpx-movable-view,' +
+  'mpx-movable-area,mpx-label,mpx-keyboard-avoiding-view,mpx-input,mpx-inline-text,' +
+  'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
+  'mpx-rich-text,mpx-portal,mpx-popup,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
+  'mpx-icon,mpx-canvas'
+)
+
 const isSpace = makeMap('ensp,emsp,nbsp')
 
 const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
@@ -105,11 +118,12 @@ module.exports = {
   isVoidTag,
   isNonPhrasingTag,
   isRichTextTag,
-  isBuildInTag,
+  isBuildInWebTag,
   isUnaryTag,
   isSpace,
   isContWidth,
   isContHeight,
   isNativeMiniTag,
-  isContConRow
+  isContConRow,
+  isBuildInReactTag
 }

package/lib/web/script-helper.js

@@ -13,7 +13,7 @@ function stringifyRequest (loaderContext, request) {
 
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
-    return `/* webpackChunkName: "${chunkName}" */`
+    return `/* webpackChunkName: "${chunkName}/index" */`
   }
   return ''
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.6",
+  "version": "2.10.7-beta.1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.6",
+    "@mpxjs/utils": "^2.10.7 | ^2.10.7-beta.1",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.6",
+    "@mpxjs/api-proxy": "^2.10.7 | ^2.10.7-beta.1",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -100,5 +100,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "e28605bc2d8ab33f4dccf13ea98d9ca996f43ed6"
+  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
 }