@mpxjs/webpack-plugin 2.10.17-unocss.1 → 2.10.18-beta.1

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

@@ -0,0 +1,209 @@
+<template>
+  <scroll-view  wx:ref="recycleViewRef" class="mpx-section-list" scroll-y wx:style="{{ scrollViewStyle }}" type="custom"
+    enhanced="{{ enhanced }}" scroll-with-animation="{{ scrollWithAnimation }}" bounces="{{ bounces }}"
+    show-scrollbar="{{ showScrollbar }}" refresher-enabled="{{ refresherEnabled }}"
+    refresher-triggered="{{ refresherTriggered }}" bindscroll="onScroll" bindrefresherrefresh="onRefresh" scroll-into-view-offset="{{ scrollIntoViewOffset }}"
+    scroll-into-view="{{ scrollIntoViewId }}" scroll-into-view-alignment="{{ viewPosition }}">
+    <block wx:if="{{ useListHeader }}">
+      <list-header listHeaderData="{{ listHeaderData }}"></list-header>
+    </block>
+    <block wx:for="{{ convertedListData }}" wx:key="index">
+      <sticky-section>
+        <!-- section header -->
+        <block wx:if="{{ item.hasSectionHeader }}">
+          <block wx:if="{{ enableSticky }}">
+            <sticky-header>
+              <section-header itemData="{{ item.headerData }}" id="{{ item._domId }}"></section-header>
+            </sticky-header>
+          </block>
+          <block wx:else>
+            <section-header itemData="{{ item.headerData }}" id="{{ item._domId }}"></section-header>
+          </block>
+
+        </block>
+        <block wx:for="{{ item.data }}" wx:for-item="subItem" wx:key="subIndex">
+          <!-- section items -->
+          <recycle-item itemData="{{ subItem.itemData }}" id="{{ subItem._domId }}"></recycle-item>
+        </block>
+      </sticky-section>
+    </block>
+    <block wx:if="{{ useListFooter }}">
+      <list-footer listFooterData="{{ listFooterData }}"></list-footer>
+    </block>
+  </scroll-view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  properties: {
+    height: {
+      type: Number,
+      value: null
+    },
+    width: {
+      type: Number,
+      value: null
+    },
+    listData: {
+      type: Array,
+      value: []
+    },
+    enableSticky: {
+      type: Boolean,
+      value: false
+    },
+    showScrollbar: {
+      type: Boolean,
+      value: false
+    },
+    enhanced: {
+      type: Boolean,
+      value: false
+    },
+    bounces: {
+      type: Boolean,
+      value: false
+    },
+    refresherEnabled: {
+      type: Boolean,
+      value: false
+    },
+    refresherTriggered: {
+      type: Boolean,
+      value: false
+    },
+    listHeaderData: {
+      type: Object,
+      value: null
+    },
+    scrollWithAnimation: {
+      type: Boolean,
+      value: false
+    },
+    useListHeader: {
+      type: Boolean,
+      value: false
+    },
+    listFooterData: {
+      type: Object,
+      value: null
+    },
+    useListFooter: {
+      type: Boolean,
+      value: false
+    }
+  },
+  data: {
+    convertedListData: [],
+    scrollIntoViewId: '',
+    scrollIntoViewOffset: 0,
+    viewPosition: 'start'
+  },
+  computed: {
+    scrollViewStyle() {
+      return `height: ${this.formatDimension(this.height)};width: ${this.formatDimension(this.width)}`
+    }
+  },
+  watch: {
+    listData: {
+      handler(newVal) {
+        this.convertedListData = this.convertToSectionListData(newVal)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    formatDimension(value) {
+      return typeof value === 'number' ? `${value}px` : value || '100%'
+    },
+    onScroll(e) {
+      this.triggerEvent('scroll', e)
+    },
+    onRefresh(e) {
+      this.triggerEvent('refresh', e)
+    },
+    scrollToIndex({ index, viewPosition = 0, viewOffset = 0 }) {
+      if (index >= 0) {
+        this.scrollIntoViewId = `mpx-recycle-item-${index}`
+        switch (viewPosition) {
+          case 0:
+            this.viewPosition = 'start'
+            break
+          case 0.5:
+            this.viewPosition = 'center'
+            break
+          case 1:
+            this.viewPosition = 'end'
+            break
+          default:
+            this.viewPosition = 'start'
+        }
+        this.scrollIntoViewOffset = -viewOffset || 0
+      }
+    },
+    convertToSectionListData(data) {
+      const sections = []
+      let currentSection = null
+
+      data && data.forEach((item, index) => {
+        if (item.isSectionHeader) {
+          // 如果已经存在一个 section，先把它添加到 sections 中
+          if (currentSection) {
+            sections.push(currentSection)
+          }
+          // 创建新的 section
+          currentSection = {
+            headerData: item,
+            data: [],
+            hasSectionHeader: true,
+            _domId: `mpx-recycle-item-${index}`
+          }
+        } else {
+          // 如果没有当前 section，创建一个默认的
+          if (!currentSection) {
+            // 创建默认section (无header的section)
+            currentSection = {
+              headerData: null,
+              data: [],
+              hasSectionHeader: false
+            }
+          }
+          currentSection.data.push({
+            itemData: item,
+            _domId: `mpx-recycle-item-${index}`
+          })
+        }
+      })
+
+      // 添加最后一个 section
+      if (currentSection) {
+        sections.push(currentSection)
+      }
+
+      return sections
+    }
+  }
+})
+</script>
+
+<script type="application/json">
+  {
+    "component": true,
+    "componentGenerics": {
+      "recycle-item": {
+        "default": "./mpx-section-list-default/list-item.mpx"
+      },
+      "section-header": {
+        "default": "./mpx-section-list-default/section-header.mpx"
+      },
+      "list-header": {
+        "default": "./mpx-section-list-default/list-header.mpx"
+      },
+      "list-footer": {
+        "default": "./mpx-section-list-default/list-footer.mpx"
+      }
+    }
+  }
+</script>

package/lib/runtime/components/wx/mpx-sticky-header.mpx

@@ -0,0 +1,40 @@
+<template>
+  <sticky-header offset-top="{{offsetTop}}" padding="{{padding}}" allow-overlapping="{{allowOverlapping}}" bindstickontopchange="handleStickyChange">
+    <slot></slot>
+  </sticky-header>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    options: {
+      virtualHost: true
+    },
+    properties: {
+      offsetTop: {
+        type: Number,
+        value: 0
+      },
+      padding: {
+        type: Array,
+        value: [0, 0, 0, 0]
+      },
+      allowOverlapping: {
+        type: Boolean,
+        value: false
+      }
+    },
+    methods: {
+      handleStickyChange(e) {
+        this.triggerEvent('stickontopchange', e.detail)
+      }
+    }
+  })
+</script>
+
+<script type="application/json">
+  {
+    "component": true
+  }
+</script>

package/lib/runtime/components/wx/mpx-sticky-section.mpx

@@ -0,0 +1,31 @@
+<template>
+  <sticky-section padding="{{ padding }}" push-pinned-header="{{ pushPinnedHeader }}">
+    <slot></slot>
+  </sticky-section>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    options: {
+      virtualHost: true
+    },
+    properties: {
+      padding: {
+        type: Array,
+        value: [0, 0, 0, 0]
+      },
+      pushPinnedHeader: {
+        type: Boolean,
+        value: true
+      }
+    }
+  })
+</script>
+
+<script type="application/json">
+  {
+    "component": true
+  }
+</script>

package/lib/template-compiler/compiler.js

@@ -1,7 +1,7 @@
 const JSON5 = require('json5')
 const he = require('he')
 const config = require('../config')
-const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, PARENT_MODULE_ID, MPX_TAG_PAGE_SELECTOR } = require('../utils/const')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, PARENT_MODULE_ID, MPX_TAG_PAGE_SELECTOR, EXTEND_COMPONENT_CONFIG } = require('../utils/const')
 const normalize = require('../utils/normalize')
 const { normalizeCondition } = require('../utils/match-condition')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
@@ -2432,7 +2432,11 @@ function isRealNode (el) {
 }
 
 function isComponentNode (el) {
-  return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component' || componentGenerics[el.tag]
+  return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component' || componentGenerics[el.tag] || isExtendComponentNode(el)
+}
+
+function isExtendComponentNode (el) {
+  return EXTEND_COMPONENT_CONFIG[el.tag]?.[mode]
 }
 
 function getComponentInfo (el) {
@@ -2440,7 +2444,7 @@ function getComponentInfo (el) {
 }
 
 function isReactComponent (el) {
-  return !isComponentNode(el) && isRealNode(el) && !el.isBuiltIn
+  return !isComponentNode(el) && isRealNode(el) && !el.isBuiltIn && !isExtendComponentNode(el)
 }
 
 function processExternalClasses (el, options) {

package/lib/utils/const.js

@@ -1,3 +1,5 @@
+const componentPrefixPath = '@mpxjs/webpack-plugin/lib/runtime/components'
+
 module.exports = {
   MPX_PROCESSED_FLAG: 'mpx_processed',
   MPX_DISABLE_EXTRACTOR_CACHE: 'mpx_disable_extractor_cache',
@@ -7,5 +9,32 @@ module.exports = {
   MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
   MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
   PARENT_MODULE_ID: '__pid',
+  // 扩展组件的平台配置：声明哪些组件在哪些平台有专用实现，哪些使用公共组件
+  EXTEND_COMPONENT_CONFIG: {
+    'section-list': {
+      wx: `${componentPrefixPath}/wx/mpx-section-list.mpx`,
+      ali: `${componentPrefixPath}/ali/mpx-section-list.mpx`,
+      web: `${componentPrefixPath}/web/mpx-section-list.vue`,
+      ios: `${componentPrefixPath}/react/dist/mpx-section-list.jsx`,
+      android: `${componentPrefixPath}/react/dist/mpx-section-list.jsx`,
+      harmony: `${componentPrefixPath}/react/dist/mpx-section-list.jsx`
+    },
+    'sticky-header': {
+      wx: `${componentPrefixPath}/wx/mpx-sticky-header.mpx`,
+      ali: `${componentPrefixPath}/ali/mpx-sticky-header.mpx`,
+      web: `${componentPrefixPath}/web/mpx-sticky-header.vue`,
+      ios: `${componentPrefixPath}/react/dist/mpx-sticky-header.jsx`,
+      android: `${componentPrefixPath}/react/dist/mpx-sticky-header.jsx`,
+      harmony: `${componentPrefixPath}/react/dist/mpx-sticky-header.jsx`
+    },
+    'sticky-section': {
+      wx: `${componentPrefixPath}/wx/mpx-sticky-section.mpx`,
+      ali: `${componentPrefixPath}/ali/mpx-sticky-section.mpx`,
+      web: `${componentPrefixPath}/web/mpx-sticky-section.vue`,
+      ios: `${componentPrefixPath}/react/dist/mpx-sticky-section.jsx`,
+      android: `${componentPrefixPath}/react/dist/mpx-sticky-section.jsx`,
+      harmony: `${componentPrefixPath}/react/dist/mpx-sticky-section.jsx`
+    }
+  },
   MPX_TAG_PAGE_SELECTOR: 'mpx-page'
 }

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

@@ -91,7 +91,7 @@ const isBuildInReactTag = makeMap(
   'mpx-movable-area,mpx-label,mpx-input,' +
   'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
   'mpx-rich-text,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
-  'mpx-icon,mpx-canvas'
+  'mpx-icon,mpx-canvas,mpx-camera'
 )
 
 const isSpace = makeMap('ensp,emsp,nbsp')

package/lib/wxss/loader.js

@@ -92,6 +92,9 @@ module.exports = async function loader (content, map, meta) {
         filter: options.import.filter,
         urlHandler: (url) => {
           url = combineRequests(getPreRequester(this)(options.importLoaders), url)
+          if (isRN) {
+            return stringifyRequest(this, url)
+          }
           return getRequestString('styles', { src: url }, {
             isStatic: true,
             issuerResource: this.resource,
@@ -249,7 +252,7 @@ module.exports = async function loader (content, map, meta) {
   let moduleCode
 
   try {
-    moduleCode = getModuleCode(result, api, replacements, options, this)
+    moduleCode = getModuleCode(result, api, replacements, options, isRN, this)
   } catch (error) {
     callback(error)
 

package/lib/wxss/utils.js

@@ -1016,6 +1016,7 @@ function getModuleCode (
   api,
   replacements,
   options,
+  isRN,
   loaderContext
 ) {
   if (options.modules.exportOnlyLocals === true) {
@@ -1054,8 +1055,12 @@ function getModuleCode (
     } else {
       // 符合css后缀名的文件经过mpx处理后会带上相应的后缀防止使用 webpack 的默认解析规则，此时 require/import 相应路径时，导出的不是一段 css 代码了，事实上是一个文件路径。
       const printedParam = printParams(media, dedupe, supports, layer)
-      const otherParams = printedParam.length > 0 ? printedParam : ''
-      beforeCode += `___CSS_LOADER_EXPORT___.push([module.id, '@import "' + ${item.importName} + '";', ${JSON.stringify(otherParams)} ]);\n`
+      const hasParams = printedParam.length > 0
+      if (isRN) {
+        beforeCode += `___CSS_LOADER_EXPORT___.i(${item.importName}${hasParams ? `, ${printedParam}` : ''});\n`
+      } else {
+        beforeCode += `___CSS_LOADER_EXPORT___.push([module.id, '@import "' + ${item.importName} + '";'${hasParams ? `, ${printedParam}` : ''}]);\n`
+      }
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.17-unocss.1",
+  "version": "2.10.18-beta.1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -29,7 +29,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.17",
+    "@mpxjs/utils": "^2.10.18",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -84,7 +84,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.17",
+    "@mpxjs/api-proxy": "^2.10.18",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/glob": "^8.1.0",