@mpxjs/webpack-plugin 2.10.18-beta.1 → 2.10.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.18-beta.1",
+  "version": "2.10.19",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -84,7 +84,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.18",
+    "@mpxjs/api-proxy": "^2.10.19",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/glob": "^8.1.0",
@@ -97,6 +97,7 @@
     "react-native-safe-area-context": "^4.12.0",
     "react-native-svg": "^15.8.0",
     "react-native-video": "^6.9.0",
+    "react-native-vision-camera": "^4.7.2",
     "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1",
     "webpack": "^5.75.0"
@@ -104,5 +105,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
+  "gitHead": "ca50ba6b1361f3c7790746476dd8b8e6be802ea3"
 }

package/lib/resolver/ExtendComponentsPlugin.js

@@ -1,60 +0,0 @@
-const { EXTEND_COMPONENT_CONFIG } = require('../utils/const')
-
-/**
- * 扩展组件路径解析插件
- * 将 @mpxjs/webpack-plugin/lib/runtime/components/extends/[component-name] 格式的路径
- * 解析为对应平台的实际组件路径
- */
-module.exports = class ExtendComponentsPlugin {
-  constructor (source, mode, target) {
-    this.source = source
-    this.target = target
-    this.mode = mode
-  }
-
-  apply (resolver) {
-    const target = resolver.ensureHook(this.target)
-    const mode = this.mode
-
-    resolver.getHook(this.source).tapAsync('ExtendComponentsPlugin', (request, resolveContext, callback) => {
-      const requestPath = request.request
-      if (!requestPath || !requestPath.startsWith('@mpxjs/webpack-plugin/lib/runtime/components/extends/')) {
-        return callback()
-      }
-
-      // 匹配 @mpxjs/webpack-plugin/lib/runtime/components/extends/[component-name]
-      const extendsMatch = requestPath.match(/^@mpxjs\/webpack-plugin\/lib\/runtime\/components\/extends\/(.+)$/)
-
-      if (!extendsMatch) {
-        return callback()
-      }
-
-      const componentName = extendsMatch[1]
-
-      // 检查组件是否在配置中
-      if (!EXTEND_COMPONENT_CONFIG[componentName]) {
-        return callback(new Error(`Extended component "${componentName}" was not found. Available extended components: ${Object.keys(EXTEND_COMPONENT_CONFIG).join(', ')}`))
-      }
-
-      // 获取当前模式下的组件路径
-      const componentConfig = EXTEND_COMPONENT_CONFIG[componentName]
-      const newRequest = componentConfig[mode]
-
-      if (!newRequest) {
-        return callback(new Error(`Extended component "${componentName}" cannot be used on the ${mode} platform. Supported platforms include: ${Object.keys(componentConfig).join(', ')}`))
-      }
-
-      const obj = Object.assign({}, request, {
-        request: newRequest
-      })
-
-      resolver.doResolve(
-        target,
-        obj,
-        `resolve extend component: ${componentName} to ${newRequest}`,
-        resolveContext,
-        callback
-      )
-    })
-  }
-}

package/lib/runtime/components/ali/mpx-section-list.mpx

@@ -1,566 +0,0 @@
-<template>
-  <view class="mpx-section-list">
-    <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 && item.itemData.isSectionHeader}}"
-              wx:key="header{{item.itemData.item_key || item._index}}"
-              itemData="{{item.itemData}}"
-            />
-            <recycle-item
-              wx:if="{{item.itemData && !item.itemData.isSectionHeader}}"
-              wx:key="item{{item.itemData.item_key || item._index}}"
-              itemData="{{item.itemData}}"
-            />
-          </block>
-        </view>
-        <block wx:if="{{useListFooter}}">
-          <list-footer listFooterData="{{listFooterData}}"></list-footer>
-        </block>
-      </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
-      },
-      listFooterData: {
-        type: Object,
-        value: () => {
-          return {}
-        }
-      },
-      useListFooter: {
-        type: Boolean,
-        value: false
-      }
-    },
-    data: {
-      start: 0,
-      end: 0,
-      containerHeight: 0,
-      positions: [],
-      visibleCounts: [],
-      infiniteListStyle: '',
-      placeholderStyle: '',
-      scrollTop: 0
-    },
-    computed: {
-      _listData() {
-        return (this.listData && this.listData.map((item, index) => {
-          return {
-            itemData: item,
-            _index: `_${index}`
-          }
-        })) || []
-      },
-      _stickyHeaders() {
-        const data = []
-        this.listData && 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()
-        }
-      },
-      itemHeight: {
-        handler() {
-          this.initPositions()
-          this.setPlaceholderStyle()
-          this.setStartOffset()
-        },
-        deep: true
-      },
-      sectionHeaderHeight: {
-        handler() {
-          this.initPositions()
-          this.setPlaceholderStyle()
-          this.setStartOffset()
-        },
-        deep: true
-      },
-      listHeaderHeight: {
-        handler() {
-          this.initPositions()
-          this.setPlaceholderStyle()
-          this.setStartOffset()
-        },
-        deep: true
-      },
-      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, viewOffset = 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
-        }
-
-        targetTop -= viewOffset
-
-        // 如果 targetTop 为 0，触发不了支付宝滚动，所以需要加一个很小的值
-        if (targetTop <= 0) {
-          targetTop = 0.01
-        }
-
-        // 支付宝小程序不支持 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-section-list {
-    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-section-list-default/list-item.mpx"
-      },
-      "section-header": {
-        "default": "../wx/mpx-section-list-default/section-header.mpx"
-      },
-      "list-header": {
-        "default": "../wx/mpx-section-list-default/list-header.mpx"
-      },
-      "list-footer": {
-        "default": "../wx/mpx-section-list-default/list-footer.mpx"
-      }
-    }
-  }
-</script>