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

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

@@ -0,0 +1,193 @@
+<template>
+  <scroll-view wx:ref="recycleViewRef" class="mpx-recycle-view" 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="{{ 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>
+  </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
+    }
+  },
+  data: {
+    convertedListData: [],
+    scrollIntoViewId: '',
+    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, animated, viewPosition = 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'
+        }
+      }
+    },
+    convertToSectionListData(data) {
+      const sections = []
+      let currentSection = null
+
+      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-recycle-item-default"
+      },
+      "section-header": {
+        "default": "./mpx-section-header-default"
+      },
+      "list-header": {
+        "default": "./mpx-list-header-default"
+      }
+    }
+  }
+</script>

package/lib/runtime/components/wx/mpx-section-header-default.mpx

@@ -0,0 +1,21 @@
+<template>
+  <view class="mpx-section-header-default">
+    <view class="mpx-default-content">section-header-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.mpx-section-header-default
+  margin 4px 16px
+  padding 16px
+  background #fff
+  border-radius 8px
+  box-shadow 0 2px 4px rgba(0,0,0,0.1)
+
+.mpx-default-content
+  display flex
+  flex-direction column
+  font-size 14px
+  color #666
+
+</style>

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')
@@ -728,6 +728,7 @@ function parse (template, options) {
       processElement(element, root, options, meta)
 
       tagNames.add(element.tag)
+
       // 统计通过抽象节点方式使用的组件
       element.attrsList.forEach((attr) => {
         if (genericRE.test(attr.name)) {
@@ -2432,7 +2433,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 +2445,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

@@ -7,5 +7,22 @@ module.exports = {
   MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
   MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
   PARENT_MODULE_ID: '__pid',
+  // 扩展组件的平台配置：声明哪些组件在哪些平台有专用实现，哪些使用公共组件
+  EXTEND_COMPONENT_CONFIG: {
+    'recycle-view': {
+      wx: 'runtime/components/wx/mpx-recycle-view.mpx',
+      ali: 'runtime/components/ali/mpx-recycle-view.mpx',
+      web: 'runtime/components/web/mpx-recycle-view.vue',
+      ios: 'runtime/components/react/dist/mpx-recycle-view.jsx',
+      android: 'runtime/components/react/dist/mpx-recycle-view.jsx',
+      harmony: 'runtime/components/react/dist/mpx-recycle-view.jsx'
+    },
+    'sticky-header': {
+      ali: 'runtime/components/ali/mpx-sticky-header.mpx'
+    },
+    'sticky-section': {
+      ali: 'runtime/components/ali/mpx-sticky-section.mpx'
+    }
+  },
   MPX_TAG_PAGE_SELECTOR: 'mpx-page'
 }

package/lib/utils/process-extend-components.js

@@ -0,0 +1,43 @@
+const { EXTEND_COMPONENT_CONFIG } = require('./const')
+const normalize = require('./normalize')
+
+/**
+ * 处理扩展组件的公共方法
+ * @param {Object} options 配置选项
+ * @param {Object} options.useExtendComponents 使用的扩展组件配置
+ * @param {string} options.mode 当前模式 (wx, ali, web, rn 等)
+ * @param {Function} options.emitWarning 警告函数
+ * @returns {Object} 扩展组件映射对象
+ */
+function processExtendComponents (options) {
+  const {
+    useExtendComponents = {},
+    mode,
+    emitWarning
+  } = options
+
+  if (!useExtendComponents[mode]) {
+    return {}
+  }
+
+  const extendComponents = {}
+
+  useExtendComponents[mode].forEach((name) => {
+    // 从配置中获取该组件在当前平台的具体路径
+    const componentConfig = EXTEND_COMPONENT_CONFIG[name]
+
+    if (componentConfig && componentConfig[mode]) {
+      extendComponents[name] = normalize.lib(componentConfig[mode])
+    } else if (componentConfig) {
+      emitWarning('extend component ' + name + ' is not configured for ' + mode + ' environment!')
+    } else {
+      emitWarning('extend component ' + name + ' is not supported in any environment!')
+    }
+  })
+
+  return extendComponents
+}
+
+module.exports = {
+  processExtendComponents
+}

package/lib/web/processJSON.js

@@ -11,6 +11,7 @@ const resolve = require('../utils/resolve')
 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')
 
 module.exports = function (jsonContent, {
@@ -30,11 +31,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)
@@ -116,7 +125,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)
 
     if (rulesRunner) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.17-beta.7",
+  "version": "2.10.17-beta.8",
   "description": "mpx compile core",
   "keywords": [
     "mpx"