@mpxjs/webpack-plugin 2.10.16 → 2.10.17-beta.10

package/lib/runtime/components/wx/mpx-recycle-item-default.mpx

@@ -0,0 +1,21 @@
+<template>
+  <view class="mpx-recycle-item-default">
+    <view class="mpx-default-content">recycle-item-default</view>
+  </view>
+</template>
+
+<style lang="stylus" scoped>
+.mpx-recycle-item-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/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/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

@@ -98,7 +98,7 @@ function compileScriptSetup (
   ) {
     if (node) {
       throw new Error(
-        `[@mpxjs/webpack-plugin script-setup-compiler] ${msg}\n\n${filePath}\n${formatCodeFrame(
+        `[Mpx script error]: ${msg}\n\n${filePath}\n${formatCodeFrame(
           content,
           node.start + startOffset,
           end
@@ -106,7 +106,7 @@ function compileScriptSetup (
       )
     } else {
       throw new Error(
-        `[@mpxjs/webpack-plugin script-setup-compiler] ${msg}\n\n${filePath}\n`
+        `[Mpx script error]: ${msg}\n\n${filePath}\n`
       )
     }
   }

package/lib/style-compiler/index.js

@@ -18,7 +18,8 @@ module.exports = function (css, map) {
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const mpx = this.getMpx()
   const mpxStyleOptions = (queryObj.mpxStyleOptions && JSON.parse(queryObj.mpxStyleOptions)) || {}
-  const id = queryObj.moduleId || mpxStyleOptions.mid || mpx.getModuleId(resourcePath)
+  const id = queryObj.moduleId || mpxStyleOptions.mid || mpx.getModuleId(resourcePath, false, (queryObj.moduleId || mpxStyleOptions.mid) ? null : this)
+
   const appInfo = mpx.appInfo
   const defs = mpx.defs
   const mode = mpx.mode
@@ -55,7 +56,7 @@ module.exports = function (css, map) {
     }
 
     if (isReact(mode)) {
-      plugins.push(transSpecial({ id }))
+      plugins.push(transSpecial({ id, transPage: true }))
     }
 
     // plugins.push(pluginCondStrip({

package/lib/style-compiler/load-postcss-config.js

@@ -29,7 +29,7 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
       if (err.message.indexOf('No PostCSS Config found') >= 0) {
         return
       }
-      loaderContext.emitWarning(`Error loading PostCSS config: ${err.message}`)
+      loaderContext.emitWarning(`[Mpx style warning]: Error loading PostCSS config: ${err.message}`)
     })
   }
 

package/lib/style-compiler/plugins/trans-special.js

@@ -1,7 +1,8 @@
 const selectorParser = require('postcss-selector-parser')
+const { MPX_TAG_PAGE_SELECTOR } = require('../../utils/const')
 // trans-special
 
-module.exports = ({ id }) => {
+module.exports = ({ id, transPage = false }) => {
   return {
     postcssPlugin: 'trans-special',
     Once: (root) => {
@@ -13,7 +14,14 @@ module.exports = ({ id }) => {
               if (/^:host$/.test(n.value)) {
                 const compoundSelectors = n.nodes
                 n.replaceWith(selectorParser.className({
-                  value: 'host-' + id
+                  value: `host-${id}`
+                }))
+                selector.insertAfter(n, compoundSelectors)
+              }
+              if (transPage && /^page$/.test(n.value)) {
+                const compoundSelectors = n.nodes || []
+                n.replaceWith(selectorParser.className({
+                  value: MPX_TAG_PAGE_SELECTOR
                 }))
                 selector.insertAfter(n, compoundSelectors)
               }

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

@@ -0,0 +1,225 @@
+const path = require('node:path')
+/**
+ * @typedef {(id: string, importer?: string, aliasOnly?: boolean) => Promise<string | undefined>} ResolveIdFn
+ */
+/**
+ * @typedef {(unquotedUrl: string, rawUrl: string) => Promise<string | false> | string | false} CssUrlReplacer
+ */
+
+// https://drafts.csswg.org/css-syntax-3/#identifier-code-point
+const cssUrlRE = /(?<!@import\s+)(?<=^|[^\w\-\u0080-\uffff])url\((\s*('[^']+'|"[^"]+")\s*|(?:\\.|[^'")\\])+)\)/
+const cssDataUriRE = /(?<=^|[^\w\-\u0080-\uffff])data-uri\((\s*('[^']+'|"[^"]+")\s*|[^'")]+)\)/
+const importCssRE = /@import\s+(?:url\()?('[^']+\.css'|"[^"]+\.css"|[^'"\s)]+\.css)/
+const nonEscapedDoubleQuoteRe = /(?<!\\)"/g
+const externalRE = /^([a-z]+:)?\/\//
+const isExternalUrl = url => externalRE.test(url)
+
+const dataUrlRE = /^\s*data:/i
+const isDataUrl = url => dataUrlRE.test(url)
+const functionCallRE = /^[A-Z_][.\w-]*\(/i
+
+function skipUrlReplacer(unquotedUrl) {
+  return isExternalUrl(unquotedUrl) || isDataUrl(unquotedUrl) || unquotedUrl[0] === '#' || unquotedUrl[0] === '@' || functionCallRE.test(unquotedUrl)
+}
+
+/**
+ *
+ * @param {string} rawUrl
+ * @param {string} matched
+ * @param {CssUrlReplacer} replacer
+ * @param {string} funcName
+ * @returns {Promise<string>}
+ */
+async function doUrlReplace(rawUrl, matched, replacer, funcName = 'url') {
+  let wrap = ''
+  const first = rawUrl[0]
+  let unquotedUrl = rawUrl
+  if (first === '"' || first === "'") {
+    wrap = first
+    unquotedUrl = rawUrl.slice(1, -1)
+  }
+  if (skipUrlReplacer(unquotedUrl)) {
+    return matched
+  }
+  //  Remove escape sequences to get the actual file name before resolving.
+  unquotedUrl = unquotedUrl.replace(/\\(\W)/g, '$1')
+
+  let newUrl = await replacer(unquotedUrl, rawUrl)
+  if (newUrl === false) {
+    return matched
+  }
+
+  // The new url might need wrapping even if the original did not have it, e.g.
+  // if a space was added during replacement or the URL contains ")"
+  if (wrap === '' && (newUrl !== encodeURI(newUrl) || newUrl.includes(')'))) {
+    wrap = '"'
+  }
+  // If wrapping in single quotes and newUrl also contains single quotes, switch to double quotes.
+  // Give preference to double quotes since SVG inlining converts double quotes to single quotes.
+  if (wrap === "'" && newUrl.includes("'")) {
+    wrap = '"'
+  }
+  // Escape double quotes if they exist (they also tend to be rarer than single quotes)
+  if (wrap === '"' && newUrl.includes('"')) {
+    newUrl = newUrl.replace(nonEscapedDoubleQuoteRe, '\\"')
+  }
+  return `${funcName}(${wrap}${newUrl}${wrap})`
+}
+
+/**
+ *
+ * @param {string} rawUrl
+ * @param {string} matched
+ * @param {CssUrlReplacer} replacer
+ * @returns
+ */
+async function doImportCSSReplace(rawUrl, matched, replacer) {
+  let wrap = ''
+  const first = rawUrl[0]
+  let unquotedUrl = rawUrl
+  if (first === '"' || first === "'") {
+    wrap = first
+    unquotedUrl = rawUrl.slice(1, -1)
+  }
+  if (skipUrlReplacer(unquotedUrl)) {
+    return matched
+  }
+
+  const newUrl = await replacer(unquotedUrl, rawUrl)
+  if (newUrl === false) {
+    return matched
+  }
+
+  const prefix = matched.includes('url(') ? 'url(' : ''
+  return `@import ${prefix}${wrap}${newUrl}${wrap}`
+}
+
+/**
+ *
+ * @param {string} input
+ * @param {RegExp} re
+ * @param {(match: RegExpMatchArray) => string | Promise<string>} replacer
+ * @returns {Promise<string>}
+ */
+async function asyncReplace(input, re, replacer) {
+  let match = null
+  let remaining = input
+  let rewritten = ''
+  while ((match = re.exec(remaining))) {
+    rewritten += remaining.slice(0, match.index)
+    rewritten += await replacer(match)
+    remaining = remaining.slice(match.index + match[0].length)
+  }
+  rewritten += remaining
+  return rewritten
+}
+module.exports.asyncReplace = asyncReplace
+
+/**
+ *
+ * @param {string} css
+ * @param {CssUrlReplacer} replacer
+ * @returns
+ */
+function rewriteCssUrls(css, replacer) {
+  return asyncReplace(css, cssUrlRE, async match => {
+    const [matched, rawUrl] = match
+    return await doUrlReplace(rawUrl.trim(), matched, replacer)
+  })
+}
+
+/**
+ *
+ * @param {string} css
+ * @param {CssUrlReplacer} replacer
+ * @returns
+ */
+function rewriteCssDataUris(css, replacer) {
+  return asyncReplace(css, cssDataUriRE, async match => {
+    const [matched, rawUrl] = match
+    return await doUrlReplace(rawUrl.trim(), matched, replacer, 'data-uri')
+  })
+}
+/**
+ *
+ * @param {string} css
+ * @param {CssUrlReplacer} replacer
+ * @returns
+ */
+function rewriteImportCss(css, replacer) {
+  return asyncReplace(css, importCssRE, async match => {
+    const [matched, rawUrl] = match
+    return await doImportCSSReplace(rawUrl, matched, replacer)
+  })
+}
+
+const windowsSlashRE = /\\/g
+function slash(p) {
+  return p.replace(windowsSlashRE, '/')
+}
+
+const isWindows = typeof process !== 'undefined' && process.platform === 'win32'
+/**
+ *
+ * @param {string} id
+ * @returns {string}
+ */
+function normalizePath(id) {
+  return path.posix.normalize(isWindows ? slash(id) : id)
+}
+
+/**
+ *
+ * @param {string} file
+ * @param {string} rootFile
+ * @param {string} content
+ * @param {ResolveIdFn} resolver
+ * @param {(unquotedUrl: string, rawUrl: string) => boolean} [ignoreUrl]
+ * @returns {Promise<{ file: string, contents?: string }>}
+ */
+async function rebaseUrls(file, rootFile, content, resolver, ignoreUrl) {
+  //   file = path.resolve(file) // ensure os-specific flashes
+  // in the same dir, no need to rebase
+  const fileDir = path.dirname(file)
+  const rootDir = path.dirname(rootFile)
+
+  // no url()
+  const hasUrls = cssUrlRE.test(content)
+  // data-uri() calls
+  const hasDataUris = cssDataUriRE.test(content)
+  // no @import xxx.css
+  const hasImportCss = importCssRE.test(content)
+
+  if (!hasUrls && !hasDataUris && !hasImportCss) {
+    return { file }
+  }
+
+  let rebased
+  const rebaseFn = async (unquotedUrl, rawUrl) => {
+    if (ignoreUrl?.(unquotedUrl, rawUrl)) return false
+    if (unquotedUrl[0] === '/') return unquotedUrl
+    const absolute = (await resolver(unquotedUrl, file)) || path.resolve(fileDir, unquotedUrl)
+    const relative = path.relative(rootDir, absolute)
+    return normalizePath(relative)
+  }
+
+  // fix css imports in less such as `@import "foo.css"`
+  if (hasImportCss) {
+    rebased = await rewriteImportCss(content, rebaseFn)
+  }
+
+  if (hasUrls) {
+    rebased = await rewriteCssUrls(rebased || content, rebaseFn)
+  }
+
+  if (hasDataUris) {
+    rebased = await rewriteCssDataUris(rebased || content, rebaseFn)
+  }
+
+  return {
+    file,
+    contents: rebased
+  }
+}
+
+module.exports.rebaseUrls = rebaseUrls