@mpxjs/webpack-plugin 2.10.17-beta.6 → 2.10.17-beta.8

package/lib/index.js

@@ -805,6 +805,7 @@ class MpxWebpackPlugin {
           // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
           supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || (isReact(this.options.mode) && this.options.rnConfig.supportSubpackage)),
           partialCompileRules: this.options.partialCompileRules,
+          useExtendComponents: this.options.useExtendComponents,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
               hasPage: false,

package/lib/json-compiler/index.js

@@ -13,6 +13,7 @@ const createJSONHelper = require('./helper')
 const RecordIndependentDependency = require('../dependencies/RecordIndependentDependency')
 const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency')
 const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
+const { processExtendComponents } = require('../utils/process-extend-components')
 const resolve = require('../utils/resolve')
 const resolveTabBarPath = require('../utils/resolve-tab-bar-path')
 const resolveMpxCustomElementPath = require('../utils/resolve-mpx-custom-element-path')
@@ -75,13 +76,17 @@ module.exports = function (content) {
   const { getRequestString } = createHelpers(this)
 
   let currentName
-
+  let hasApp = true
   if (isApp) {
     currentName = appInfo.name
   } else {
     currentName = componentsMap[resourcePath] || pagesMap[resourcePath]
   }
 
+  if (!appInfo.name) {
+    hasApp = false
+  }
+
   const relativePath = useRelativePath ? publicPath + path.dirname(currentName) : ''
 
   const copydir = (dir, context, callback) => {
@@ -160,6 +165,18 @@ module.exports = function (content) {
     json.usingComponents = json.usingComponents || {}
   }
 
+  if (mode === 'wx' || mode === 'ali') {
+    const { useExtendComponents = {} } = mpx
+    if ((isApp || !hasApp) && useExtendComponents[mode]) {
+      const extendComponents = processExtendComponents({
+        useExtendComponents,
+        mode,
+        emitWarning
+      })
+      json.usingComponents = Object.assign({}, extendComponents, json.usingComponents)
+    }
+  }
+
   // 快应用补全json配置，必填项
   if (mode === 'qa' && isApp) {
     const defaultConf = {

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

@@ -139,11 +139,10 @@ module.exports = function getSpec ({ warn, error }) {
     const type = getValueType(prop)
     const tipsType = (type) => {
       const info = {
-        [ValueType.number]: '2rpx,10%,30rpx',
         [ValueType.color]: 'rgb,rgba,hsl,hsla,hwb,named color,#000000',
         [ValueType.enum]: `${SUPPORTED_PROP_VAL_ARR[prop]?.join(',')}`
       }
-      tips(`Value of ${prop} in ${selector} should be ${type}, eg ${info[type]}, received [${value}], please check again!`)
+      tips(`Value of ${prop} in ${selector} should be ${type}${info[type] ? `, eg ${info[type]}` : ''}, received [${value}], please check again!`)
     }
     switch (type) {
       case ValueType.number: {
@@ -549,15 +548,6 @@ module.exports = function getSpec ({ warn, error }) {
     return { prop, value: values[0].trim() }
   }
 
-  const formatZIndex = ({ prop, value, selector }, { mode }) => {
-    // z-index auto 报错
-    if (value === 'auto') {
-      error(`Property [${prop}] does not supported [${value}] on ${selector} in ${mode} environment, please check again!`)
-      return { prop, value: 0 }
-    }
-    return { prop, value: value }
-  }
-
   // const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
   //   value = value.trim()
   //   if (value === 'none') {
@@ -623,12 +613,6 @@ module.exports = function getSpec ({ warn, error }) {
         android: formatFontFamily,
         harmony: formatFontFamily
       },
-      {
-        test: 'z-index',
-        ios: formatZIndex,
-        android: formatZIndex,
-        harmony: formatZIndex
-      },
       // {
       //   test: 'box-shadow',
       //   ios: formatBoxShadow,

package/lib/react/processJSON.js

@@ -12,6 +12,7 @@ const { transSubpackage } = require('../utils/trans-async-sub-rules')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const { processExtendComponents } = require('../utils/process-extend-components')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 const RecordPageConfigsMapDependency = require('../dependencies/RecordPageConfigsMapDependency')
 
@@ -32,11 +33,19 @@ module.exports = function (jsonContent, {
     mode,
     srcMode,
     env,
-    projectRoot
+    projectRoot,
+    useExtendComponents = {},
+    appInfo
   } = mpx
 
   const context = loaderContext.context
 
+  let hasApp = true
+
+  if (!appInfo.name) {
+    hasApp = false
+  }
+
   const emitWarning = (msg) => {
     loaderContext.emitWarning(
       new Error('[Mpx json warning][' + loaderContext.resource + ']: ' + msg)
@@ -118,6 +127,16 @@ module.exports = function (jsonContent, {
     if (ctorType !== 'app') {
       rulesRunnerOptions.mainKey = ctorType
     }
+    if (!hasApp || ctorType === 'app') {
+      if (useExtendComponents[mode]) {
+        const extendComponents = processExtendComponents({
+          useExtendComponents,
+          mode,
+          emitWarning
+        })
+        jsonObj.usingComponents = Object.assign({}, extendComponents, jsonObj.usingComponents)
+      }
+    }
 
     const rulesRunner = getRulesRunner(rulesRunnerOptions)
 

package/lib/react/processScript.js

@@ -68,6 +68,7 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
       output += buildI18n({ loaderContext })
     }
     output += getRequireScript({ ctorType, script, loaderContext })
+
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }
 

package/lib/react/script-helper.js

@@ -4,7 +4,6 @@ const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
 const addQuery = require('../utils/add-query')
-
 function stringifyRequest (loaderContext, request) {
   return loaderUtils.stringifyRequest(loaderContext, request)
 }

package/lib/runtime/components/ali/mpx-recycle-view.mpx

@@ -0,0 +1,518 @@
+<template>
+  <view class="mpx-recycle-view">
+    <scroll-view
+      id="scrollViewContainer"
+      class="scroll-view-container"
+      wx:ref="mpxRecycleView"
+      scroll-y="{{true}}"
+      scroll-top="{{scrollTop}}"
+      enhanced="{{enhanced}}"
+      scroll-with-animation="{{scrollWithAnimation}}"
+      scroll-animation-duration="{{scrollAnimationDuration}}"
+      refresher-enabled="{{refresherEnabled}}"
+      refresher-triggered="{{refresherTriggered}}"
+      bindscroll="onScroll"
+      bindscrolltolower="onScrolltolower"
+      bindrefresherrefresh="onRefresherrefresh"
+      wx:style="{{scrollViewStyle}}"
+    >
+      <view class="content-wrapper">
+        <block wx:if="{{useListHeader}}">
+          <list-header listHeaderData="{{listHeaderData}}"></list-header>
+        </block>
+        <view
+          class="infinite-list-placeholder"
+          ref="infinitePlaceholder"
+          wx:style="{{placeholderStyle}}"
+        ></view>
+        <view class="infinite-list" ref="infiniteList" wx:style="{{infiniteListStyle}}">
+          <block wx:for="{{visibleData}}">
+            <section-header
+              wx:if="{{item.itemData.isSectionHeader}}"
+              wx:key="header{{_index}}"
+              itemData="{{item.itemData}}"
+            />
+            <recycle-item
+              wx:if="{{!item.itemData.isSectionHeader}}"
+              wx:key="item{{_index}}"
+              itemData="{{item.itemData}}"
+            />
+          </block>
+        </view>
+      </view>
+      <block
+        wx:if="{{ _stickyHeaders &&
+          _stickyHeaders.length &&
+          positions.length && 
+          enableSticky
+        }}"
+      >
+        <sticky-header
+          scroll-view-id="scrollViewContainer"
+          sticky-id="mpx-sticky-header-{{index}}"
+          wx:ref="stickyHeader"
+          class="sticky-section"
+          wx:style="top: {{(positions[stickyItem._index] && positions[stickyItem._index].top) || 0}}px"
+          wx:for="{{_stickyHeaders}}"
+          wx:for-item="stickyItem"
+          wx:key="_index"
+          enable-polling="{{enablePolling}}"
+          polling-duration="{{pollingDuration}}"
+        >
+          <section-header
+            wx:key="{{'header' + stickyItem._index}}"
+            itemData="{{stickyItem.itemData}}"
+          />
+        </sticky-header>
+      </block>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import mpx, { createComponent } from '@mpxjs/core'
+  createComponent({
+    properties: {
+      width: String | Number,
+      height: String | Number,
+      listData: {
+        type: Array,
+        value: () => {
+          return []
+        }
+      },
+      scrollOptions: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      minRenderCount: {
+        type: Number,
+        value: 10
+      },
+      bufferScale: {
+        type: Number,
+        value: 1
+      },
+      itemHeight: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      listHeaderHeight: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      sectionHeaderHeight: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      listHeaderData: {
+        type: Object,
+        value: () => {
+          return {}
+        }
+      },
+      enhanced: {
+        type: Boolean,
+        value: false
+      },
+      refresherEnabled: {
+        type: Boolean,
+        value: false
+      },
+      refresherTriggered: {
+        type: Boolean,
+        value: false
+      },
+      enableSticky: {
+        type: Boolean,
+        value: false
+      },
+      scrollWithAnimation: {
+        type: Boolean,
+        value: false
+      },
+      scrollAnimationDuration: {
+        type: Number,
+        value: 300
+      },
+      enablePolling: {
+        type: Boolean,
+        value: false
+      },
+      pollingDuration: {
+        type: Number,
+        value: 3000
+      },
+      useListHeader: {
+        type: Boolean,
+        value: false
+      }
+    },
+    data: {
+      start: 0,
+      end: 0,
+      containerHeight: 0,
+      positions: [],
+      visibleCounts: [],
+      infiniteListStyle: '',
+      placeholderStyle: '',
+      scrollTop: 0
+    },
+    computed: {
+      _listData() {
+        return this.listData.map((item, index) => {
+          return {
+            itemData: item,
+            _index: `_${index}`
+          }
+        })
+      },
+      _stickyHeaders() {
+        const data = []
+        this.listData.forEach((item, index) => {
+          if (item.isSectionHeader) {
+            data.push({
+              itemData: item,
+              _index: index
+            })
+          }
+        })
+        return data
+      },
+      scrollViewStyle() {
+        return `height: ${this.formatDimension(
+          this.height
+        )};width: ${this.formatDimension(this.width)}`
+      },
+      visibleCount() {
+        if (!this.visibleCounts.length) return this.minRenderCount
+        return Math.max(this.visibleCounts[this.start], this.minRenderCount)
+      },
+      aboveCount() {
+        if (!this._listData.length || !this.visibleCounts.length) return 0
+        let count = 0
+        const startIndex = Math.max(0, this.start)
+        const endIndex = Math.max(0, startIndex - this.bufferScale)
+
+        for (let i = startIndex; i > endIndex; i--) {
+          count += this.visibleCounts[i] || 0
+        }
+
+        return count
+      },
+      belowCount() {
+        if (!this._listData.length || !this.visibleCounts.length) return 0
+        let count = 0
+        const startIndex = Math.min(this.start, this._listData.length - 1)
+        const endIndex = Math.min(startIndex + this.bufferScale, this._listData.length - 1)
+
+        for (let i = startIndex; i < endIndex; i++) {
+          count += this.visibleCounts[i] || 0
+        }
+
+        return count
+      },
+      visibleData() {
+        if (!this._listData.length) return []
+
+        const start = Math.min(Math.max(0, this.start - this.aboveCount), this._listData.length - 1)
+
+        let end = Math.min(this._listData.length, this.start + this.visibleCount + this.belowCount)
+
+        // 如果接近列表末尾，确保显示所有剩余项目
+        if (end > this._listData.length - 3) {
+          end = this._listData.length
+        }
+
+        return this._listData.slice(start, end).map((item, idx) => {
+          const realIndex = start + idx
+          return {
+            ...item,
+            _index: `_${realIndex}`
+          }
+        })
+      },
+      _listHeaderHeight() {
+        let listHeaderHeight = 0
+        if (this.useListHeader) {
+          listHeaderHeight = this.getItemHeight(this.listHeaderData, 0, 'listHeaderHeight') || 0
+        }
+        return listHeaderHeight
+      },
+      placeholderHeight() {
+        if (!this.positions.length) return 0
+        return this.positions[this.positions.length - 1].bottom - this._listHeaderHeight || 0
+      }
+    },
+    watch: {
+      listData: {
+        handler() {
+          this.initPositions()
+          this.setPlaceholderStyle()
+          // 更新真实偏移量
+          this.setStartOffset()
+        }
+      },
+      containerHeight() {
+        this.calculateVisibleCounts()
+      }
+    },
+    ready() {
+      this.initPositions()
+      this.getContainerHeight()
+      this.setPlaceholderStyle()
+      if (!this.positions || !this.positions.length) {
+        return
+      }
+      this.start = this.getStartIndex()
+      this.end = this.start + this.visibleCount
+      this.setStartOffset()
+    },
+    methods: {
+      getContainerHeight() {
+        mpx
+          .createSelectorQuery()
+          .select('#scrollViewContainer')
+          .boundingClientRect((rect) => {
+            if (!rect) return
+            this.containerHeight = rect.height
+          })
+          .exec()
+      },
+      formatDimension(value) {
+        return typeof value === 'number' ? `${value}px` : value || '100%'
+      },
+      setPlaceholderStyle() {
+        this.placeholderStyle = `height: ${this.placeholderHeight}px`
+      },
+      initPositions() {
+        let bottom = this._listHeaderHeight || 0
+        this.positions = this._listData.map((item, index) => {
+          const height = this.getItemHeight(
+            item.itemData,
+            index,
+            item.itemData.isSectionHeader ? 'sectionHeaderHeight' : 'itemHeight'
+          )
+          const position = {
+            index,
+            height: height,
+            top: bottom,
+            bottom: bottom + height
+          }
+          bottom = position.bottom
+          return position
+        })
+
+        if (this.containerHeight) {
+          this.calculateVisibleCounts()
+        }
+      },
+      calculateVisibleCounts() {
+        this.visibleCounts = this.positions.map((_, startIndex) => {
+          let count = 0
+          let totalHeight = 0
+
+          for (let i = startIndex; i < this.positions.length; i++) {
+            totalHeight += this.positions[i].height
+            if (totalHeight > this.containerHeight) {
+              break
+            }
+            count++
+          }
+
+          // 如果是最后几个项目，确保全部显示
+          if (startIndex + count > this.positions.length - 3) {
+            count = this.positions.length - startIndex
+          }
+
+          return count
+        })
+      },
+
+      getStartIndex(scrollTop = 0) {
+        // 确保不会返回超出范围的索引
+        if (!this.positions.length) {
+          return 0
+        }
+
+        // 如果滚动位置为0，直接返回0
+        if (scrollTop <= 0) {
+          return 0
+        }
+        const index = this.binarySearch(this.positions, scrollTop)
+        return Math.max(0, Math.min(index, this._listData.length - 1))
+      },
+      binarySearch(list, value) {
+        if (!list.length) return 0
+
+        // 如果 scrollTop 超过了最后一个元素的底部
+        if (value >= list[list.length - 1].bottom) {
+          return list.length - 1
+        }
+
+        let start = 0
+        let end = list.length - 1
+
+        while (start <= end) {
+          const midIndex = Math.floor((start + end) / 2)
+          const midValue = list[midIndex]
+
+          if (value >= midValue.top && value < midValue.bottom) {
+            return midIndex
+          }
+
+          if (value < midValue.top) {
+            end = midIndex - 1
+          } else {
+            start = midIndex + 1
+          }
+        }
+
+        return Math.min(Math.max(0, start - 1), list.length - 1)
+      },
+      setStartOffset() {
+        if (!this.positions.length) return
+        if (this.start >= 1) {
+          // 确保 startIndex 不会超出范围
+          const startIndex = Math.min(
+            Math.max(0, this.start - this.aboveCount),
+            this.positions.length - 1
+          )
+
+          const offset = this.positions[startIndex].top
+          this.infiniteListStyle = `transform: translateY(${offset}px)`
+        } else {
+          this.infiniteListStyle = `transform: translateY(${this.positions[0].top}px)`
+        }
+      },
+      getItemHeight(item, index, key) {
+        const { value, getter } = this[key]
+        if (typeof getter === 'function') {
+          return getter(item, index) || 0
+        } else {
+          return value || 0
+        }
+      },
+      onScroll(e) {
+        const { scrollTop } = e.detail
+        const newStart = this.getStartIndex(scrollTop)
+        // 只有当start发生足够变化时才更新，避免滚动触发重渲染
+        if (Math.abs(newStart - this.end) >= Math.floor(this.belowCount / 2)) {
+          this.start = newStart
+          this.end = this.start + this.visibleCount
+          this.setStartOffset()
+        }
+
+        this.triggerEvent('scroll', e)
+      },
+      onScrolltolower(e) {
+        this.triggerEvent('scrolltolower', e)
+      },
+      onRefresherrefresh(e) {
+        this.triggerEvent('refresherrefresh', e)
+      },
+      scrollToIndex({ index, viewPosition = 0 }) {
+        const isStickyHeader = this._listData[index].itemData?.isSectionHeader
+        let prevHeaderHeight = 0
+        // 如果不是sticky header 查找最近一个吸顶的 sticky header
+        if (!isStickyHeader && this.enableSticky) {
+          for (let i = index - 1; i >= 0; i--) {
+            if (this._listData[i].itemData?.isSectionHeader) {
+              prevHeaderHeight = this.positions[i].height
+              break
+            }
+          }
+        }
+
+        const itemTop = (this.positions[index]?.top || 0) - prevHeaderHeight
+        const itemHeight = this.positions[index]?.height || 0
+        const containerHeight = this.containerHeight
+
+        let targetTop = itemTop
+        if (viewPosition === 1) {
+          // 滚动到可视区底部
+          targetTop = itemTop - (containerHeight - itemHeight)
+        } else if (viewPosition === 0.5) {
+          // 滚动到可视区中央
+          targetTop = itemTop - (containerHeight - itemHeight) / 2
+        }
+        // 支付宝小程序不支持 animated 参数，也不支持 scrollTo 方法滚动
+        this.scrollTop = targetTop
+
+        setTimeout(() => {
+          this.refreshStickyHeader()
+        }, this.scrollAnimationDuration + 100)
+      },
+      refreshStickyHeader() {
+        if (!this.$refs.stickyHeader) return
+
+        this.$refs.stickyHeader.forEach((header) => {
+          if (header && header.refresh) {
+            header.refresh()
+          }
+        })
+      }
+    }
+  })
+</script>
+
+<style scoped>
+  .scroll-view-container {
+    position: relative;
+  }
+  .mpx-recycle-view {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .content-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .infinite-list {
+    left: 0;
+    right: 0;
+    top: 0;
+    position: absolute;
+    will-change: transform;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    /* 支付宝环境需要设置允许事件穿透, 否则滑不动 */
+    /* @mpx-if (__mpx_mode__ === 'ali') */
+    pointer-events: none;
+    /* @mpx-endif */
+  }
+  .sticky-section {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<script type="application/json">
+  {
+    "disableScroll": true,
+    "usingComponents": {
+      "sticky-header": "./mpx-sticky-header.mpx"
+    },
+    "componentGenerics": {
+      "recycle-item": {
+        "default": "../wx/mpx-recycle-item-default.mpx"
+      },
+      "section-header": {
+        "default": "../wx/mpx-section-header-default.mpx"
+      },
+      "list-header": {
+        "default": "../wx/mpx-list-header-default.mpx"
+      }
+    }
+  }
+</script>