@mpxjs/webpack-plugin 2.10.4 → 2.10.5-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/components/web/mpx-web-view.vue

@@ -197,4 +197,4 @@ export default {
   right: 0;
   bottom: 0;
 }
-</style>
+</style>

package/lib/runtime/mpxGlobal.js

@@ -0,0 +1 @@
+module.exports = Object.create(global)

package/lib/runtime/optionProcessor.d.ts

@@ -4,8 +4,13 @@ declare global {
       [key: string]: any
     }
   }
+  interface Window {
+     mpxGlobal: Record<string, any>
+  }
 }
 
+declare const mpxGlobal: Record<string, any>
+
 export function processComponentOption (...args: any): object
 
 export function getComponent (...args: any): object

package/lib/template-compiler/bind-this.js

@@ -70,7 +70,7 @@ function getCollectPath (path) {
 function checkDelAndGetPath (path) {
   let current = path
   let delPath = path
-  let canDel = true
+  let canDel = true // 是否可删除，优先级比replace高
   let ignore = false
   let replace = false
 
@@ -80,8 +80,13 @@ function checkDelAndGetPath (path) {
     if (t.isUnaryExpression(current.parent) && current.key === 'argument') {
       delPath = current.parentPath
     } else if (t.isCallExpression(current.parent)) {
-      const args = current.node.arguments || current.parent.arguments || []
-      if (args.length === 1) { // case: String(a) || this._p(a)
+      const args = current.parent.arguments || []
+      if (
+        // case: String(a) || this._p(a)
+        args.length === 1 ||
+        // 除了自身，参数列表里只能是数字或字符串才能删
+        (args.every(node => node === current.node || t.isNumericLiteral(node) || t.isStringLiteral(node)))
+      ) {
         delPath = current.parentPath
       } else {
         break
@@ -123,24 +128,20 @@ function checkDelAndGetPath (path) {
 
     if (t.isCallExpression(parent) && listKey === 'arguments') {
       canDel = false
-      break
     }
 
     if (t.isMemberExpression(parent) && parent.computed) {
       canDel = false
-      break
     }
 
     if (t.isLogicalExpression(parent)) { // case: a || ((b || c) && d)
       canDel = false
       ignore = true
-      break
     }
 
     if (t.isConditionalExpression(parent)) {
       if (key === 'test') {
         canDel = false
-        break
       } else {
         ignore = true
         replace = true // 继续往上找，判断是否存在if条件等

package/lib/template-compiler/compiler.js

@@ -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/wxs/pre-loader.js

@@ -54,6 +54,7 @@ module.exports = function (content) {
         ExportNamedDeclaration (path) {
           if (
             path.node.declaration &&
+            path.node.declaration.declarations &&
             path.node.declaration.declarations.length === 1 &&
             path.node.declaration.declarations[0].id.name === path.node.declaration.declarations[0].init.name
           ) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.4",
+  "version": "2.10.5-beta.1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.4",
+    "@mpxjs/api-proxy": "^2.10.5 | ^2.10.5-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": "c877bcebc894c75fe107f7b997cee5b494932e43"
+  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
 }