@mpxjs/webpack-plugin 2.10.7 → 2.10.8-beta.1

package/lib/runtime/components/web/mpx-sticky-header.vue

@@ -0,0 +1,99 @@
+<script>
+import { warn } from '@mpxjs/utils'
+import { getCustomEvent } from './getInnerListeners'
+
+  export default {
+    name: 'mpx-sticky-header',
+    inject: ['scrollOffset', 'refreshVersion'],
+    props: {
+      offsetTop: {
+        type: Number,
+        default: 0
+      },
+      padding: Array
+    },
+    data() {
+      return {
+        headerTop: 0,
+        isStickOnTop: false
+      }
+    },
+    watch: {
+      scrollOffset: {
+        handler(newScrollOffset) {
+          const newIsStickOnTop = newScrollOffset > this.headerTop
+          if (newIsStickOnTop !== this.isStickOnTop) {
+            this.isStickOnTop = newIsStickOnTop
+            this.$emit('stickontopchange', getCustomEvent('stickontopchange', {
+              isStickOnTop: newIsStickOnTop
+            }, this))
+          }
+
+          this.setTransformStyle()
+        },
+        immediate: true
+      },
+      refreshVersion: {
+        handler() {
+          this.setHeaderTop()
+          this.setTransformStyle()
+        },
+      }
+    },
+    mounted() {
+      this.setPaddingStyle()
+      this.setHeaderTop()
+    },
+    methods: {
+      setHeaderTop () {
+        const parentElement = this.$el.parentElement
+          if (!parentElement) return
+          
+          const parentClass = parentElement.className || ''
+          const isStickySection = /mpx-sticky-section/.test(parentClass)
+          const isScrollViewWrapper = /mpx-inner-wrapper/.test(parentClass)
+          
+          if (!isStickySection && !isScrollViewWrapper) {
+            warn('sticky-header only supports being a direct child of a scroll-view or sticky-section component.')
+            return
+          }
+          this.headerTop = isStickySection 
+            ? this.$el.offsetTop + parentElement.offsetTop
+            : this.$el.offsetTop
+      },
+      setPaddingStyle() {
+        const stickyHeader = this.$refs.stickyHeader
+        if (!stickyHeader) return
+        
+        if (this.padding && Array.isArray(this.padding)) {
+          const [top = 0, right = 0, bottom = 0, left = 0] = this.padding
+          stickyHeader.style.padding = `${top}px ${right}px ${bottom}px ${left}px`
+        }
+      },
+      setTransformStyle () {
+        const stickyHeader = this.$refs.stickyHeader
+        if (!stickyHeader) return
+        
+        // 设置 transform
+        if (this.scrollOffset > this.headerTop) {
+          stickyHeader.style.transform = `translateY(${this.scrollOffset - this.headerTop + this.offsetTop}px)`
+        } else {
+          stickyHeader.style.transform = 'none'
+        }
+      }
+    },
+    render(h) {
+      const style = {
+        width: '100%',
+        boxSizing: 'border-box',
+        position: 'relative',
+        zIndex: 10
+      }
+
+      return h('div', {
+        style,
+        ref: 'stickyHeader'
+      }, this.$slots.default)
+    }
+  }
+</script>

package/lib/runtime/components/web/mpx-sticky-section.vue

@@ -0,0 +1,15 @@
+<script>
+  export default {
+    name: 'mpx-sticky-section',
+    render(h) {
+      const style = {
+        position: 'relative'
+      }
+
+      return h('div', {
+        style,
+        class: 'mpx-sticky-section'
+      }, this.$slots.default)
+    }
+  }
+</script>

package/lib/runtime/optionProcessorReact.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode, ComponentType } from 'react'
 declare global {
   namespace NodeJS {
     interface Global {
@@ -7,3 +8,20 @@ declare global {
 }
 
 export function getComponent (...args: any): object
+
+interface AsyncModule {
+  __esModule: boolean
+  default: ReactNode
+}
+
+interface AsyncSuspenseProps {
+  type: 'component' | 'page'
+  chunkName: string
+  moduleId: string
+  innerProps: any
+  loading: ComponentType<unknown>
+  fallback: ComponentType<unknown>
+  getChildren: () => Promise<AsyncModule>
+}
+
+export function getAsyncSuspense(props: AsyncSuspenseProps): ReactNode

package/lib/runtime/optionProcessorReact.js

@@ -1,6 +1,36 @@
+import AsyncSuspense from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-async-suspense'
+import { memo, forwardRef, createElement } from 'react'
+import { extend } from './utils'
+
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
   if (extendOptions) Object.assign(component, extendOptions)
   return component
 }
+
+export function getAsyncSuspense (commonProps) {
+  if (commonProps.type === 'component') {
+    return memo(forwardRef(function (props, ref) {
+      return createElement(AsyncSuspense,
+        extend(commonProps, {
+          innerProps: Object.assign({}, props, { ref })
+        })
+      )
+    }))
+  } else {
+    return function (props) {
+      return createElement(AsyncSuspense,
+        extend(commonProps, {
+          innerProps: props
+        })
+      )
+    }
+  }
+}
+
+export function getLazyPage (getComponent) {
+  return function (props) {
+    return createElement(getComponent(), props)
+  }
+}

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

@@ -1,5 +1,6 @@
 const babylon = require('@babel/parser')
 const MagicString = require('magic-string')
+const { SourceMapConsumer, SourceMapGenerator } = require('source-map')
 const traverse = require('@babel/traverse').default
 const t = require('@babel/types')
 const formatCodeFrame = require('@babel/code-frame')
@@ -625,7 +626,12 @@ function compileScriptSetup (
   _s.appendRight(endOffset, '})')
 
   return {
-    content: _s.toString()
+    content: _s.toString(),
+    map: _s.generateMap({
+      source: filePath,
+      hires: true,
+      includeContent: true
+    })
   }
 }
 
@@ -1165,14 +1171,30 @@ function getCtor (ctorType) {
   return ctor
 }
 
-module.exports = function (content) {
+module.exports = async function (content, sourceMap) {
   const { queryObj } = parseRequest(this.resource)
   const { ctorType, lang } = queryObj
   const filePath = this.resourcePath
-  const { content: callbackContent } = compileScriptSetup({
+  const callback = this.async()
+  let finalSourceMap = null
+  const {
+    content: callbackContent,
+    map
+  } = compileScriptSetup({
     content,
     lang
   }, ctorType, filePath)
-
-  this.callback(null, callbackContent)
+  finalSourceMap = map
+  if (sourceMap) {
+    const compiledMapConsumer = await new SourceMapConsumer(map)
+    const compiledMapGenerator = SourceMapGenerator.fromSourceMap(compiledMapConsumer)
+
+    const originalConsumer = await new SourceMapConsumer(sourceMap)
+    compiledMapGenerator.applySourceMap(
+      originalConsumer,
+      filePath // 需要确保与原始映射的source路径一致
+    )
+    finalSourceMap = compiledMapGenerator.toJSON()
+  }
+  callback(null, callbackContent, finalSourceMap)
 }

package/lib/template-compiler/bind-this.js

@@ -2,6 +2,7 @@ const babylon = require('@babel/parser')
 const traverse = require('@babel/traverse').default
 const t = require('@babel/types')
 const generate = require('@babel/generator').default
+const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 
 const names = 'Infinity,undefined,NaN,isFinite,isNaN,' +
   'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
@@ -41,7 +42,7 @@ function getCollectPath (path) {
     if (current.node.computed) {
       if (t.isLiteral(current.node.property)) {
         if (t.isStringLiteral(current.node.property)) {
-          if (dangerousKeyMap[current.node.property.value]) {
+          if (dangerousKeyMap[current.node.property.value] || !isValidIdentifierStr(current.node.property.value)) {
             break
           }
           keyPath += `.${current.node.property.value}`

package/lib/template-compiler/compiler.js

@@ -38,7 +38,7 @@ const endTag = new RegExp(('^<\\/' + qnameCapture + '[^>]*>'))
 const doctype = /^<!DOCTYPE [^>]+>/i
 const comment = /^<!--/
 const conditionalComment = /^<!\[/
-const specialClassReg = /^mpx-((cover-)?view|button|navigator|picker-view|input|textarea)$/
+const specialClassReg = /^mpx-((cover-)?view|button|navigator|picker-view|input|textarea|page-container)$/
 let IS_REGEX_CAPTURING_BROKEN = false
 'x'.replace(/x(.)?/g, function (m, g) {
   IS_REGEX_CAPTURING_BROKEN = g === ''
@@ -581,7 +581,8 @@ function parseComponent (content, options) {
       let text = content.slice(currentBlock.start, currentBlock.end)
       // pad content so that linters and pre-processors can output correct
       // line numbers in errors and warnings
-      if (options.pad) {
+      // stylus编译遇到大量空行时会出现栈溢出，故针对stylus不走pad
+      if (options.pad && !(currentBlock.tag === 'style' && currentBlock.lang === 'stylus')) {
         text = padContent(currentBlock, options.pad) + text
       }
       currentBlock.content = text
@@ -1110,8 +1111,28 @@ function processStyleReact (el, options) {
     }])
   }
 
-  if (specialClassReg.test(el.tag)) {
-    const staticClassNames = ['hover', 'indicator', 'mask', 'placeholder']
+  // 原生组件支持 xx-class 与 xx-style（xx-class 将会被合并到 xx-style 中）
+  const match = el.tag.match(specialClassReg)
+  if (match) {
+    let staticClassNames
+    switch (el.tag) {
+      case 'mpx-view':
+      case 'mpx-cover-view':
+      case 'mpx-button':
+      case 'mpx-navigator':
+        staticClassNames = ['hover']
+        break
+      case 'mpx-page-container':
+        staticClassNames = ['custom', 'overlay']
+        break
+      case 'mpx-input':
+      case 'mpx-textarea':
+        staticClassNames = ['placeholder']
+        break
+      case 'mpx-picker-view':
+        staticClassNames = ['mask', 'indicator']
+        break
+    }
     staticClassNames.forEach((className) => {
       let staticClass = el.attrsMap[className + '-class'] || ''
       let staticStyle = getAndRemoveAttr(el, className + '-style').val || ''
@@ -1849,7 +1870,7 @@ function processRefReact (el, meta) {
     }])
   }
 
-  if (el.tag === 'mpx-scroll-view' && el.attrsMap['scroll-into-view']) {
+  if (el.tag === 'mpx-scroll-view') {
     addAttrs(el, [
       {
         name: '__selectRef',
@@ -2002,7 +2023,7 @@ function postProcessFor (el) {
 function postProcessForReact (el) {
   if (el.for) {
     if (el.for.key) {
-      addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key)}, ${el.for.index || 'index'})`, false, 'key')
+      addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key === '_' ? 'index' : el.for.key)}, ${el.for.index || 'index'})`, false, 'key')
       addAttrs(el, [{
         name: 'key',
         value: el.for.key

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

@@ -72,13 +72,26 @@ const isNativeMiniTag = makeMap(
  * 是否为mpx内置组件
  * collected from packages/webpack-plugin/lib/runtime/components/web/
  */
-const isBuildInTag = makeMap(
+const isBuildInWebTag = makeMap(
   'mpx-image,mpx-picker-view,mpx-slider,mpx-textarea,mpx-input,mpx-picker,' +
   'mpx-swiper-item,mpx-video,mpx-button,mpx-keep-alive,mpx-progress,' +
   'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
   'mpx-switch,mpx-web-view,mpx-checkbox,mpx-movable-view,mpx-radio,' +
   'mpx-tab-bar-container,mpx-form,mpx-navigator,mpx-rich-text,mpx-tab-bar,' +
-  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
+  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text,mpx-page-container'
+)
+
+/**
+ * 是否为mpx2rn内置组件
+ */
+const isBuildInReactTag = makeMap(
+  'mpx-web-view,mpx-view,mpx-video,mpx-textarea,mpx-text,mpx-switch,' +
+  'mpx-swiper,mpx-swiper-item,mpx-simple-view,mpx-simple-text,mpx-scroll-view,' +
+  'mpx-root-portal,mpx-radio,mpx-radio-group,mpx-navigator,mpx-movable-view,' +
+  'mpx-movable-area,mpx-label,mpx-keyboard-avoiding-view,mpx-input,mpx-inline-text,' +
+  'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
+  'mpx-rich-text,mpx-portal,mpx-popup,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
+  'mpx-icon,mpx-canvas'
 )
 
 const isSpace = makeMap('ensp,emsp,nbsp')
@@ -105,11 +118,12 @@ module.exports = {
   isVoidTag,
   isNonPhrasingTag,
   isRichTextTag,
-  isBuildInTag,
+  isBuildInWebTag,
   isUnaryTag,
   isSpace,
   isContWidth,
   isContHeight,
   isNativeMiniTag,
-  isContConRow
+  isContConRow,
+  isBuildInReactTag
 }

package/lib/utils/trans-async-sub-rules.js

@@ -0,0 +1,19 @@
+function transSubpackage (asyncSubpackageNameRules, tarRoot) {
+  // 如果没有tarRoot，则无需进行tarRoot的修改，因此
+  if (tarRoot && Array.isArray(asyncSubpackageNameRules) && asyncSubpackageNameRules.length >= 1) {
+    for (const item of asyncSubpackageNameRules) {
+      if (item?.from) {
+        const fromPaths = Array.isArray(item.from) ? item.from : [item.from]
+        if (fromPaths.includes(tarRoot)) {
+          tarRoot = item.to
+          break
+        }
+      }
+    }
+  }
+  return tarRoot
+}
+
+module.exports = {
+  transSubpackage
+}

package/lib/web/script-helper.js

@@ -13,7 +13,7 @@ function stringifyRequest (loaderContext, request) {
 
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
-    return `/* webpackChunkName: "${chunkName}" */`
+    return `/* webpackChunkName: "${chunkName}/index" */`
   }
   return ''
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.7",
+  "version": "2.10.8-beta.1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.6",
+    "@mpxjs/utils": "^2.10.8",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.7",
+    "@mpxjs/api-proxy": "^2.10.8",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -100,5 +100,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "3c56726c27464abac9cea343167d1b40933fff0d"
+  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
 }