@mpxjs/webpack-plugin 2.10.17 → 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/runtime/optionProcessor.js

@@ -2,6 +2,7 @@ import { hasOwn, isEmptyObject, extend } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
+import { error } from '@mpxjs/utils'
 const dash2hump = require('../utils/hump-dash').dash2hump
 
 export function processComponentOption (
@@ -107,6 +108,10 @@ registered in parent context!`)
 
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
+  if (!component) {
+    error('getComponent() expected component options as the first argument, but got undefined.')
+    return null
+  }
   // eslint-disable-next-line
   if (extendOptions && !component.__mpxExtended) {
     extend(component, extendOptions, { __mpxExtended: true })

package/lib/runtime/optionProcessorReact.js

@@ -1,9 +1,16 @@
 import AsyncSuspense from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-async-suspense'
 import { memo, forwardRef, createElement } from 'react'
+import { error } from '@mpxjs/utils'
 import { extend } from './utils'
 
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
+  if (!component) {
+    error(
+      `getComponent expecting function/class component ${extendOptions?.displayName ? `[${extendOptions.displayName}] ` : ''}as the first argument, but got undefined.`
+    )
+    return null
+  }
   // eslint-disable-next-line
   if (extendOptions && !component.__mpxExtended) {
     extend(component, extendOptions, { __mpxExtended: true })

package/lib/runtime/stringify.wxs

@@ -45,7 +45,7 @@ function objectKeys (obj) {
 }
 
 function genRegExp (str, flags) {
-  if (!__mpx_wxs__) {
+  if (!__mpx_wxs__ || __mpx_mode__ === 'ks') {
     return new RegExp(str, flags)
   } else {
     return getRegExp(str, flags)
@@ -234,4 +234,4 @@ module.exports = {
     var parsedStaticStyle = typeof staticStyle === 'string' ? parseStyleText(staticStyle) : {}
     return genStyleText(extend(parsedStaticStyle, normalizedDynamicStyle))
   }
-}
+}

package/lib/script-setup-compiler/index.js

@@ -605,8 +605,7 @@ function compileScriptSetup (
       if (node.key.name === 'properties' && hasDefinePropsCall) {
         console.warn(`${DEFINE_PROPS} has been called, ${DEFINE_OPTIONS} set properties will be ignored`)
       } else {
-        const declCode = content.slice(node.value.start, node.value.end).trim()
-        runtimeOptions += `\n ${node.key.name}: ${declCode},`
+        runtimeOptions += `\n ${content.slice(node.start, node.end).trim()},`
       }
     }
   }

package/lib/style-compiler/strip-conditional.js

@@ -0,0 +1,243 @@
+const fs = require('fs')
+
+class Node {
+  constructor(type, condition = null) {
+    this.type = type // 'If', 'ElseIf', 'Else' 或 'Text'
+    this.condition = condition // If 或 Elif 的条件
+    this.children = []
+    this.value = ''
+  }
+}
+
+// 提取 css string 为 token
+function tokenize(cssString) {
+  // Support /* ... */, // ..., and <!-- ... --> styles
+  // 1. : /\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*\*\//g
+  // 2. : /\/\/\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*$/gm
+  // 3. : /<!--\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*-->/g
+  // Combined:
+  const regex = /(?:\/\*\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*\*\/)|(?:\/\/\s*@mpx-(if|elif|else|endif)(?:\s*\((.*?)\))?\s*)|(?:<!--\s*@mpx-(if|elif|else|endif)(?:\s*\(([\s\S]*?)\))?\s*-->)/g
+  const tokens = []
+  let lastIndex = 0
+  let match
+
+  while ((match = regex.exec(cssString)) !== null) {
+    // 如果 token 前有普通文本，生成文本 token
+    if (match.index > lastIndex) {
+      const text = cssString.substring(lastIndex, match.index)
+      tokens.push({ type: 'text', content: text })
+    }
+    // 1,2: (/* ... */)
+    // 3,4: (// ...)
+    // 5,6: (<!-- ... -->)
+    const type = match[1] || match[3] || match[5]
+    const condition = (match[2] || match[4] || match[6])
+
+    tokens.push({
+      type: type,
+      condition: condition ? condition.trim() : null
+    })
+    lastIndex = regex.lastIndex
+  }
+  // 处理结尾剩余的文本
+  if (lastIndex < cssString.length) {
+    const text = cssString.substring(lastIndex)
+    tokens.push({ type: 'text', content: text })
+  }
+  return tokens
+}
+
+// parse：将生成的 token 数组构造成嵌套的 AST
+function parse(cssString) {
+  const tokens = tokenize(cssString)
+  const ast = []
+  const nodeStack = []
+  let currentChildren = ast
+  tokens.forEach(token => {
+    if (token.type === 'text') {
+      const node = new Node('Text')
+      node.value = token.content
+      currentChildren.push(node)
+    } else if (token.type === 'if') {
+      const node = new Node('If', token.condition)
+      currentChildren.push(node)
+      nodeStack.push(currentChildren)
+      currentChildren = node.children
+    } else if (token.type === 'elif') {
+      if (nodeStack.length === 0) {
+        throw new Error('[Mpx style error]: elif without a preceding if')
+      }
+      currentChildren = nodeStack[nodeStack.length - 1]
+      const node = new Node('ElseIf', token.condition)
+      currentChildren.push(node)
+      currentChildren = node.children
+    } else if (token.type === 'else') {
+      if (nodeStack.length === 0) {
+        throw new Error('[Mpx style error]: else without a preceding if')
+      }
+      currentChildren = nodeStack[nodeStack.length - 1]
+      const node = new Node('Else')
+      currentChildren.push(node)
+      currentChildren = node.children
+    } else if (token.type === 'endif') {
+      if (nodeStack.length > 0) {
+        currentChildren = nodeStack.pop()
+      }
+    }
+  })
+  if (nodeStack.length > 0) {
+    throw new Error('[Mpx strip conditional error]: mpx-if without a matching endif')
+  }
+  return ast
+}
+
+function evaluateCondition(condition, defs) {
+  try {
+    const keys = Object.keys(defs)
+    const values = keys.map(key => defs[key])
+    /* eslint-disable no-new-func */
+    const func = new Function(...keys, `return (${condition});`)
+    return func(...values)
+  } catch (e) {
+    console.error(`[Mpx style error]:Error evaluating condition: ${condition}`, e)
+    return false
+  }
+}
+
+function traverseAndEvaluate(ast, defs) {
+  let output = ''
+  let batchedIf = false
+  function traverse(nodes) {
+    for (const node of nodes) {
+      if (node.type === 'Text') {
+        output += node.value
+      } else if (node.type === 'If') {
+        // 直接判断 If 节点
+        batchedIf = false
+        if (evaluateCondition(node.condition, defs)) {
+          traverse(node.children)
+          batchedIf = true
+        }
+      } else if (node.type === 'ElseIf' && !batchedIf) {
+        if (evaluateCondition(node.condition, defs)) {
+          traverse(node.children)
+          batchedIf = true
+        }
+      } else if (node.type === 'Else' && !batchedIf) {
+        traverse(node.children)
+      }
+    }
+  }
+  traverse(ast)
+  return output
+}
+
+/**
+ *
+ * @param {string} content
+ * @param {Record<string, any>} defs
+ * @returns
+ */
+function stripCondition(content, defs) {
+  const ast = parse(content)
+  return traverseAndEvaluate(ast, defs)
+}
+
+let proxyReadFileSync
+let proxyReadFile
+const rawReadFileSync = fs.readFileSync
+const rawReadFile = fs.readFile
+
+let isRewritten = false
+let __compilation = null
+
+function registerStripCompilation(compilation) {
+  __compilation = compilation
+}
+
+function logStripError(path, e) {
+  const msg = `[Mpx strip conditional error]\n  path: ${path}\n  message: ${e && e.message}\n  stack:\n${e && e.stack}`
+  console.error(msg)
+  if (__compilation && Array.isArray(__compilation.errors)) {
+    const err = new Error(msg)
+    err.file = path
+    __compilation.errors.push(err)
+  }
+}
+
+function rewriteFSForCss() {
+  if (isRewritten) return
+  isRewritten = true
+  fs.readFileSync = function () {
+    return (proxyReadFileSync || rawReadFileSync).apply(fs, arguments)
+  }
+  fs.readFile = function () {
+    return (proxyReadFile || rawReadFile).apply(fs, arguments)
+  }
+}
+
+function startFSStripForCss(defs) {
+  function shouldStrip(path) {
+    return typeof path === 'string' && /\.(styl|scss|sass|less|css|mpx)$/.test(path)
+  }
+  proxyReadFileSync = function (path, options) {
+    const content = rawReadFileSync.call(fs, path, options)
+    if (shouldStrip(path)) {
+      try {
+        if (typeof content === 'string') {
+          return stripCondition(content, defs)
+        } else if (Buffer.isBuffer(content)) {
+          const str = content.toString('utf-8')
+          const result = stripCondition(str, defs)
+          if (result !== str) {
+            return Buffer.from(result, 'utf-8')
+          }
+        }
+      } catch (e) {
+        logStripError(path, e)
+        return content
+      }
+    }
+    return content
+  }
+
+  proxyReadFile = function () {
+    const args = Array.from(arguments)
+    const callback = args[args.length - 1]
+    const path = args[0]
+
+    if (typeof callback !== 'function') {
+      return rawReadFile.apply(fs, args)
+    }
+
+    const wrappedCallback = (err, data) => {
+      if (err) return callback(err)
+      if (shouldStrip(path)) {
+        try {
+          if (typeof data === 'string') {
+            const result = stripCondition(data, defs)
+            return callback(null, result)
+          } else if (Buffer.isBuffer(data)) {
+            const content = data.toString('utf-8')
+            const result = stripCondition(content, defs)
+            if (result !== content) {
+              return callback(null, Buffer.from(result, 'utf-8'))
+            }
+          }
+        } catch (e) {
+          logStripError(path, e)
+          return callback(null, data)
+        }
+      }
+      callback(null, data)
+    }
+
+    args[args.length - 1] = wrappedCallback
+    return rawReadFile.apply(fs, args)
+  }
+}
+
+module.exports.stripCondition = stripCondition
+module.exports.rewriteFSForCss = rewriteFSForCss
+module.exports.startFSStripForCss = startFSStripForCss
+module.exports.registerStripCompilation = registerStripCompilation

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')
@@ -764,9 +764,7 @@ function parse (template, options) {
 
       const children = currentParent.children
 
-      const isTextLikeParent = currentParent.tag === 'text' || currentParent.tag === 'mpx-text' || currentParent.tag === 'Text' || currentParent.tag === 'mpx-simple-text'
-
-      if (!isTextLikeParent) {
+      if (currentParent.tag !== 'text') {
         text = text.trim()
       } else {
         text = text.trim() ? text : ''
@@ -2247,7 +2245,6 @@ function postProcessIfReact (el) {
           delete el.elseif
           el._if = true
           addIfCondition(ifNode, {
-            exp: el.elseif.exp,
             block: el
           })
           removeNode(el, true)
@@ -2435,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) {
@@ -2443,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) {
@@ -2720,7 +2721,7 @@ function postProcessTemplate (el) {
   }
 }
 
-const isValidMode = makeMap('wx,ali,swan,tt,qq,web,qa,jd,dd,tenon,ios,android,harmony,noMode')
+const isValidMode = makeMap('wx,ali,swan,tt,qq,web,qa,jd,dd,tenon,ios,android,harmony,ks,noMode')
 
 function isValidModeP (i) {
   return isValidMode(i[0] === '_' ? i.slice(1) : i)

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')