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

package/lib/runtime/components/web/mpx-titlebar.vue

@@ -0,0 +1,244 @@
+<script>
+import mpx from '@mpxjs/core'
+export default {
+  name: 'mpx-titlebar',
+  props: {
+    // 来自 app.json 中 window 的 titlebar 相关配置
+    windowConfig: {
+      type: Object,
+      default: () => global.__mpxPageConfig
+    },
+    // 来自 页面 json 中的 titlebar 相关配置，会覆盖 windowConfig
+    pageConfig: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    // 合并全局 window 配置与页面配置（页面配置覆盖全局配置）
+    cfg () {
+      return Object.assign({}, this.windowConfig || {}, this.pageConfig || {})
+    },
+    // 标题文本（兼容常见字段名）
+    titleText () {
+      return this.cfg.navigationBarTitleText || this.cfg.title || ''
+    },
+    // 背景色（兼容常见字段）
+    backgroundColor () {
+      return this.cfg.navigationBarBackgroundColor || '#ffffff'
+    },
+    // 文本颜色，微信小程序中 navigationBarTextStyle 为 white 或 black
+    textColor () {
+      const style = this.cfg.navigationBarTextStyle || 'black'
+      return style === 'white' ? '#ffffff' : '#000000'
+    },
+    // navigationStyle: 'default' | 'custom'，custom 表示需要自定义绘制
+    navigationStyle () {
+      return this.cfg.navigationStyle || 'default'
+    },
+    // 是否隐藏（navigationStyle 为 'custom' 时也应隐藏）
+    hidden () {
+      return mpx.config?.webConfig?.enableTitleBar !== true || this.navigationStyle === 'custom'
+    },
+    // 是否展示返回按钮：根据浏览器历史判断（不依赖额外 page 配置）
+    showBack () {
+      console.log('showBack', this.$router.stack.length)
+      try {
+        return this.$router.stack.length > 1
+      } catch (e) {
+        return false
+      }
+    },
+    // safe area 顶部 padding，使用 env(safe-area-inset-top)
+    safeStyle () {
+      // 多数浏览器支持 env(), 为兼容也使用 constant() 备选（旧 iOS Safari）
+      return {
+        paddingTop: 'env(safe-area-inset-top, 0px)'
+      }
+    },
+    // 内部标题栏高度（遵循小程序常见平台差异）
+    innerHeight () {
+      const isIOS = /iP(hone|od|ad)/.test(navigator.userAgent)
+      return (isIOS ? 44 : 48) + 'px'
+    },
+    rootStyle () {
+      return {
+        background: this.backgroundColor,
+        color: this.textColor
+      }
+    },
+    innerStyle () {
+      return {
+        height: this.innerHeight
+      }
+    }
+    ,
+    // content wrapper style: padding-top to avoid being covered by fixed titlebar
+    contentStyle () {
+      // use calc to combine innerHeight and safe-area inset
+      return {
+        paddingTop: this.hidden ? '0px' : `calc(${this.innerHeight} + env(safe-area-inset-top, 0px))`,
+        // create its own layer to avoid overlapping issues
+        transform: 'translateZ(0)',
+        willChange: 'transform'
+      }
+    }
+  },
+  methods: {
+    // 左侧点击：派发事件并在可回退时回退
+    onLeftClick (e) {
+      this.$emit('click-left', e)
+      if (this.showBack) {
+        try { window.history.back() } catch (err) {}
+      }
+    }
+  },
+  render (h) {
+    console.log('render mpx-titlebar', this.cfg, 'windowConfig', this.windowConfig, 'pageConfig', this.pageConfig)
+    const leftChildren = []
+
+    // default back button (SVG) — no left slot support
+    if (this.showBack) {
+      leftChildren.push(
+        h('button', {
+          class: 'mpx-titlebar__back',
+          attrs: { 'aria-label': 'back', type: 'button' }
+        }, [
+          h('svg', {
+            attrs: {
+              viewBox: '0 0 24 24',
+              width: '20',
+              height: '20',
+              fill: 'none',
+              xmlns: 'http://www.w3.org/2000/svg',
+              focusable: 'false',
+              'aria-hidden': 'true'
+            }
+          }, [
+            h('path', {
+              attrs: {
+                d: 'M15 18l-6-6 6-6',
+                stroke: 'currentColor',
+                'stroke-width': '2',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round'
+              }
+            })
+          ])
+        ])
+      )
+    }
+
+    // center shows title; only default slot (page content) is supported
+    const centerChildren = [
+      h('div', { class: 'mpx-titlebar__title', style: { color: this.textColor } }, [this.titleText])
+    ]
+
+  // top-level wrapper: contains fixed titlebar and page content wrapper
+  return h('page', { class: 'mpx-titlebar-wrapper' }, [
+      // fixed titlebar
+      h('div', {
+        class: ['mpx-titlebar', { 'mpx-titlebar--hidden': this.hidden }],
+        style: this.rootStyle
+      }, [
+        h('div', { class: 'mpx-titlebar__safe', style: this.safeStyle }, [
+          h('div', { class: 'mpx-titlebar__inner', style: this.innerStyle }, [
+              h('div', { class: 'mpx-titlebar__left', on: { click: this.onLeftClick } }, leftChildren),
+              h('div', { class: 'mpx-titlebar__center' }, centerChildren),
+              h('div', { class: 'mpx-titlebar__right' }, [])
+          ])
+        ])
+      ]),
+
+      // page content wrapper: default slot is page content
+      h('div', { class: 'mpx-titlebar__content', style: this.contentStyle }, this.$slots.default || [])
+    ])
+  }
+}
+</script>
+
+<style scoped>
+.mpx-titlebar {
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+.mpx-titlebar--hidden {
+  display: none;
+}
+.mpx-titlebar__safe {
+  /* safe area handled by padding-top; include both env and constant for broader iOS support */
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-top: constant(safe-area-inset-top, 0px);
+}
+.mpx-titlebar__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  box-sizing: border-box;
+}
+.mpx-titlebar__left,
+.mpx-titlebar__right {
+  flex: 0 0 auto;
+  min-width: 44px;
+  display: flex;
+  align-items: center;
+}
+.mpx-titlebar__center {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0 8px;
+}
+.mpx-titlebar__title {
+  font-size: 17px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 500;
+}
+.mpx-titlebar__back {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: inherit;
+  padding: 6px;
+  cursor: pointer;
+}
+
+/* wrapper and content layout */
+.mpx-titlebar-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.mpx-titlebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000; /* ensure above page content */
+}
+
+.mpx-titlebar__content {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
+  background: transparent;
+}
+
+/* SVG icon sizing and inherit color */
+.mpx-titlebar__back svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+.mpx-titlebar__back path {
+  stroke: currentColor;
+}
+</style>

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

@@ -0,0 +1,26 @@
+<template>
+  <view class="mpx-list-footer-default">
+    <view class="mpx-default-content">list-footer-default</view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+createComponent({})
+</script>
+
+<style lang="stylus" scoped>
+.mpx-list-footer-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-section-list-default/list-header.mpx

@@ -0,0 +1,26 @@
+<template>
+  <view class="mpx-list-header-default">
+    <view class="mpx-default-content">list-header-default</view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+createComponent({})
+</script>
+
+<style lang="stylus" scoped>
+.mpx-list-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/components/wx/mpx-section-list-default/list-item.mpx

@@ -0,0 +1,26 @@
+<template>
+  <view class="mpx-recycle-item-default">
+    <view class="mpx-default-content">recycle-item-default</view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+createComponent({})
+</script>
+
+<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-section-list-default/section-header.mpx

@@ -0,0 +1,26 @@
+<template>
+  <view class="mpx-section-header-default">
+    <view class="mpx-default-content">section-header-default</view>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+createComponent({})
+</script>
+
+<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/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()},`
       }
     }
   }