Merge branch 'master' into fix-sticky-position

Author: hiyuki

docs-vitepress/api/app-config.md

@@ -158,7 +158,7 @@ mpx.config.webRouteConfig = {
 ```
 
 ## webConfig
-web 环境下的一些配置，如路由模式，页面切换动画效果等
+web 环境下的一些配置，如路由模式
 
 - **用法**:
 ```js
@@ -169,3 +169,4 @@ mpx.config.webConfig.routeConfig = {
 // 禁用页面切换动画
 mpx.config.webConfig.disablePageTransition = true
 ```
+此处的 `disablePageTransition` 后续将被废弃，请使用编译阶段的[disablePageTransition](./compile.md#webconfig)进行配置

docs-vitepress/api/compile.md

@@ -824,8 +824,17 @@ module.exports = defineConfig({
 
 transRpxFn 配置用于自定义输出 web 时对于 rpx 样式单位的转换逻辑，常见的方式有转换为 vw 或转换为 rem
 
+`{useSSR: boolean}`
+
+useSSR 默认值为 `false`，当 SSR 模式下使用异步分包时，需要将 useSSR 设置为 `true`, 其他场景不需要。
+
+`{disablePageTransition: boolean}`
+
+用于配置禁用/开启页面切换动画，默认禁用
+
+
 ```js
-// vue.config.js
+// mpx.config.js
 module.exports = defineConfig({
   pluginOptions: {
     mpx: {
@@ -834,7 +843,11 @@ module.exports = defineConfig({
           transRpxFn: function (match, $1) {
             if ($1 === '0') return $1
             return `${$1 * +(100 / 750).toFixed(8)}vw`
-          }
+          },
+          // 当 SSR 模式下使用异步分包时
+          useSSR: true,
+          // 开启页面切换动画
+          disablePageTransition: false
         }
       }
     }

docs-vitepress/guide/advance/platform.md

@@ -630,7 +630,7 @@ onShow|是
 onHide|是
 onUnload|是
 onError|是
-onServerPrefetch｜是
+onServerPrefetch|是
 created|是
 attached|是
 ready|是

docs-vitepress/guide/platform/rn.md

@@ -183,7 +183,6 @@ RN:
 > 1. 只有父级 view 节点的文本样式可以被子 text 节点继承；
 > 2. view 节点直接包裹文本实际上等同于 view>text>文本，Mpx 框架在编译时若检测到 view 节点直接包裹文本会自动添加一层 text 节点；
 > 3. 多级 text 节点可实现文本样式的继承，比如 text>text>文本 ；
-> 4. 若不想使用 Mpx 内部实现的 view>text>文本 这种文本样式继承，可设置`disable-default-style=true` 来关闭该继承逻辑；
 ### 简写样式属性
 在 Mpx 内对于通过 class 类来定义的样式会按照 RN 的样式规则在编译处理一遍，其中最重要的一部分就是将 RN 不支持简写属性按约定的规则转换成 RN 能支持多属性结构。
 
@@ -682,7 +681,7 @@ Mpx 输出 React Native 支持以下模版指令。
 注意事项
 
 1. 目前不支持自定义下拉刷新节点，使用 slot="refresher" 声明无效，在 React Native 环境中还是会被当作普通节点渲染出来
-2. 若使用 scroll-into-view 属性，需要 id 对应的组件节点添加 wx:ref 标记，否则无法正常滚动
+2. 若使用 scroll-into-view 属性，需要 id 对应的组件节点添加 wx:ref 标记，否则无法正常滚动。另外组件节点需要是内置基础组件，自定义组件暂不支持。
 3. simultaneous-handlers 为 RN 环境特有属性，具体含义可参考[react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#simultaneouswithexternalgesture)
 4. wait-for  为 RN 环境特有属性，具体含义可参考[react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/gesture-composition/#requireexternalgesturetofail)
 
@@ -707,7 +706,9 @@ Mpx 输出 React Native 支持以下模版指令。
 | next-margin             | String  | `0`                 | 后边距，可用于露出后一项的一小部分，接受px |
 | scale                   | Boolean  | `false`            | 滑动时是否开启前后元素缩小,默认是缩放0.7倍, 暂不支持自定义 |
 | easing-function         | String  | `linear`      | 支持 linear、easeInCubic、easeOutCubic、easeInOutCubic|
-| bindchange              | eventhandle|   无          | current 改变时会触发 change 事件，`event.detail = {current, source}`|
+| simultaneous-handlers              | `Array<object>`|   []          | RN环境特有属性，主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 swiper 组件|
+| wait-for              | `Array<object>`|   []          | RN环境特有属性，主要用于组件嵌套场景，允许延迟激活处理某些手势，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 swiper 组件|
+| disableGesture              | Boolean|   false       | 禁用 swiper 滑动手势。若开启用户无法通过手势滑动 swiper，只能通过开启 autoPlay 进行自动轮播|
 
 
 
@@ -979,6 +980,34 @@ movable-view的可移动区域。
 | bindlinechange       | 输入框行数变化时调用，`event.detail = { height: 0, lineCount: 0 }`，不支持 `heightRpx`    |
 | bind:selectionchange | 选区改变事件, `event.detail = {selectionStart, selectionEnd}`                                         |
 
+#### progress
+进度条。
+
+属性
+
+| 属性名                   | 类型     | 默认值         | 说明                                                       |
+| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
+| percent                 | Number  | `0`           | 百分比进度，范围0-100                                         |
+| stroke-width            | Number\|String | `6`   | 进度条线的宽度，单位px                                        |
+| color                   | String  |               | 进度条颜色（已废弃，请使用 activeColor）                        |
+| activeColor             | String  | `#09BB07`     | 已选择的进度条的颜色                                           |
+| backgroundColor         | String  | `#EBEBEB`     | 未选择的进度条的颜色                                           |
+| active                  | Boolean | `false`       | 进度条从左往右的动画                                           |
+| active-mode             | String  | `backwards`   | 动画播放模式，`backwards`: 从头开始播放；`forwards`: 从上次结束点接着播放 |
+| duration                | Number  | `30`          | 进度增加1%所需毫秒数                                          |
+
+事件
+
+| 事件名           | 说明                                                 |
+| ----------------| --------------------------------------------------- |
+| bindactiveend   | 动画完成时触发，`event.detail = { percent }`            |
+
+注意事项
+
+1. 不支持 `show-info` 属性，即不支持在进度条右侧显示百分比
+2. 不支持 `border-radius` 属性自定义圆角大小
+3. 不支持 `font-size` 属性设置右侧百分比字体大小
+
 #### picker-view
 
 嵌入页面的滚动选择器。其中只可放置 [*picker-view-column*](#picker-view-column) 组件，其它节点不会显示
@@ -1001,11 +1030,11 @@ movable-view的可移动区域。
 
 - 触感反馈回调方法
 
-通过在全局注册 `mpx.config.rnConfig.pickerVibrate` 方法，在每次滚动选择时会调用该方法。
+通过在全局注册 `mpx.config.rnConfig.onPickerVibrate` 方法，在每次滚动选择时会调用该方法。
 
 | 注册触感方法名           | 类型          | 说明                |
 | ----------------------| --------------| ------------------- |
-| pickerVibrate         | Function      | 注册自定义触感反馈方法。调用时机：在每次滚动选择时会调用该方法。可以在方法内自定义实现类似 iOS 端原生表盘的振动触感。    |
+| onPickerVibrate         | Function      | 注册自定义触感反馈方法。调用时机：在每次滚动选择时会调用该方法。可以在方法内自定义实现类似 iOS 端原生表盘的振动触感。    |
 
 #### picker-view-column
 
@@ -2597,7 +2626,7 @@ mpx.config.rnConfig.downloadChunkAsync = function (packages) {
 
 ```javascript
 // RN 场景下监听异步页面加载失败的全局配置
-mpx.config.rnConfig.lazyLoadPageErrorHandler = function (error) {
+mpx.config.rnConfig.onLazyLoadPageError = function (error) {
   console.log(
     error.subpackage, // 加载失败的分包名
     error.errType // 加载失败的类型：'timeout' | 'fail'

packages/core/@types/index.d.ts

@@ -121,6 +121,7 @@ interface Context {
   createSelectorQuery: WechatMiniprogram.Component.InstanceMethods<Record<string, any>>['createSelectorQuery']
   createIntersectionObserver: WechatMiniprogram.Component.InstanceMethods<Record<string, any>>['createIntersectionObserver'],
   getPageId: WechatMiniprogram.Component.InstanceMethods<Record<string, any>>['getPageId']
+  getOpenerEventChannel: WechatMiniprogram.Component.InstanceMethods<Record<string, any>>['getOpenerEventChannel']
 }
 type ExtendedComponentOptions = {
   disconnectOnUnmounted?: boolean
@@ -274,7 +275,7 @@ export interface RnConfig {
    *
    * @param state 当前的导航状态对象
    */
-  onStateChange?: (state: Record<string, any>) => void;
+  onStateChange?: (state: Record<string, any>) => void
 
   /**
    * 用于获取初始路由配置的函数。
@@ -286,7 +287,7 @@ export interface RnConfig {
    */
   parseAppProps?: (
     props: Record<string, any>
-  ) => { initialRouteName?: string; initialParams?: any } | void;
+  ) => { initialRouteName?: string; initialParams?: any } | void
 
   /**
    * 页面栈长度为 1（即根页面）且用户尝试退出 App 时触发。
@@ -295,20 +296,20 @@ export interface RnConfig {
    * - `true`：允许退出应用
    * - `false`：阻止退出应用
    */
-  onAppBack?: () => boolean;
+  onAppBack?: () => boolean
 
   /**
    * 是否禁用框架内部的 AppStateChange 监听。
    */
-  disableAppStateListener?: boolean;
+  disableAppStateListener?: boolean
 
   /**
    * 控制首页回退按钮是否展示，并监听点击事件。
    *
    * 如果绑定该函数，则首页显示返回按钮，点击后调用该函数作为回调。
    * 如需返回，请在函数内部手动调用 `back()`。
    */
-  onStackTopBack?: () => void;
+  onStackTopBack?: () => void
 
   /**
    * 容器实现的 open-type 能力集合。
@@ -324,16 +325,26 @@ export interface RnConfig {
      * @returns `void`
      */
     onShareAppMessage?: (shareInfo: {
-      title: string;
-      path: string;
-      imageUrl?: string;
-    }) => void;
-  };
+      title: string
+      path: string
+      imageUrl?: string
+    }) => void
+  }
 
   /**
    * 在使用 picker-view-column 时，触发短震动反馈。
    */
-  pickerVibrate?: () => void;
+  onPickerVibrate?: () => void
+
+  /**
+   * 分包页面加载失败时触发
+   * @param subpackage 失败分包名
+   * @param errType 失败类型
+   */
+  onLazyLoadPageError?: (error: {
+    subpackage: string
+    errType: 'timeout' | 'fail'
+  }) => void
 
   /**
    * 自定义屏幕尺寸信息，用于 mpx style 渲染等依赖尺寸的功能。
@@ -343,7 +354,7 @@ export interface RnConfig {
    */
   customDimensions?: <T extends { window: ScaledSize; screen: ScaledSize }>(
     dimensions: T
-  ) => T | void;
+  ) => T | void
 
   /**
    * 异步分包加载配置。
@@ -352,18 +363,18 @@ export interface RnConfig {
     /**
      * 加载超时时长配置，单位为毫秒。
      */
-    timeout: number;
+    timeout: number
 
     /**
      * 异步分包页面加载超时或失败时，自定义兜底页面文件路径。
      */
-    fallback: string;
+    fallback: string
 
     /**
      * 异步分包页面加载时，自定义 loading 页面文件路径。
      */
-    loading: string;
-  };
+    loading: string
+  }
 
   /**
    * 加载并执行异步分包的方法。
@@ -373,14 +384,14 @@ export interface RnConfig {
    * @param params.package 分包名
    * @returns Promise，表示加载完成
    */
-  loadChunkAsync?: (params: { url: string; package: string }) => Promise<any>;
+  loadChunkAsync?: (params: { url: string; package: string }) => Promise<any>
 
   /**
    * 下载多个异步分包的方法（不执行）。
    *
    * @param packages 分包名数组
    */
-  downloadChunkAsync?: (packages: Array<string>) => void;
+  downloadChunkAsync?: (packages: Array<string>) => void
 }
 
 interface MpxConfig {

packages/core/src/core/proxy.js

@@ -334,7 +334,8 @@ export default class MpxProxy {
           selectAllComponents: this.target.selectAllComponents.bind(this.target),
           createSelectorQuery: this.target.createSelectorQuery ? this.target.createSelectorQuery.bind(this.target) : envObj.createSelectorQuery.bind(envObj),
           createIntersectionObserver: this.target.createIntersectionObserver ? this.target.createIntersectionObserver.bind(this.target) : envObj.createIntersectionObserver.bind(envObj),
-          getPageId: this.target.getPageId.bind(this.target)
+          getPageId: this.target.getPageId.bind(this.target),
+          getOpenerEventChannel: this.target.getOpenerEventChannel.bind(this.target)
         }
       ])
       if (!isObject(setupResult)) {
@@ -501,11 +502,19 @@ export default class MpxProxy {
     const hooks = this.hooks[hookName] || []
     let result
     if (isFunction(hook) && !hooksOnly) {
+      const setContext = hookName !== BEFORECREATE
+      if (setContext) {
+        setCurrentInstance(this)
+      }
       result = callWithErrorHandling(hook.bind(this.target), this, `${hookName} hook`, params)
+      if (setContext) {
+        unsetCurrentInstance()
+      }
     }
     hooks.forEach((hook) => {
       result = params ? hook(...params) : hook()
     })
+
     return result
   }
 

packages/webpack-plugin/lib/index.js

@@ -1726,6 +1726,23 @@ class MpxWebpackPlugin {
               source.add('// inject pageconfigmap for screen\n' +
                 'var context = (function() { return this })() || Function("return this")();\n')
               source.add(`context.__mpxPageConfigsMap = ${JSON.stringify(mpx.pageConfigsMap)};\n`)
+
+              if (process.env.NODE_ENV !== 'production') {
+                source.add(`
+${globalObject}.__mpxClearAsyncChunkCache = ${globalObject}.__mpxClearAsyncChunkCache || function (ids) {
+  ids = JSON.stringify(ids)
+  var arr = ${globalObject}['${chunkLoadingGlobal}'] || []
+  for (var i = arr.length - 1; i >= 0; i--) {
+    if (JSON.stringify(arr[i][0]) === ids) {
+      arr.splice(i, 1)
+    }
+  }
+};\n`)
+              }
+            } else {
+              if (process.env.NODE_ENV !== 'production') {
+                source.add(`${globalObject}.__mpxClearAsyncChunkCache && ${globalObject}.__mpxClearAsyncChunkCache(${JSON.stringify(chunk.ids)});\n`)
+              }
             }
             source.add(originalSource)
             compilation.assets[chunkFile] = source
@@ -1825,6 +1842,7 @@ try {
 
         compilation.chunkGroups.forEach((chunkGroup) => {
           if (!chunkGroup.isInitial()) {
+            isReact(mpx.mode) && chunkGroup.chunks.forEach((chunk) => processChunk(chunk, false, []))
             return
           }
 

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -547,6 +547,17 @@ module.exports = function getSpec ({ warn, error }) {
   //   })
   //   return cssMap
   // }
+  const formatBorder = ({ prop, value, selector }, { mode }) => {
+    value = value.trim()
+    if (value === 'none') {
+      return {
+        prop: 'borderWidth',
+        value: 0
+      }
+    } else {
+      return formatAbbreviation({ prop, value, selector }, { mode })
+    }
+  }
 
   return {
     supportedModes: ['ios', 'android', 'harmony'],
@@ -593,6 +604,12 @@ module.exports = function getSpec ({ warn, error }) {
       //   android: formatBoxShadow,
       //   harmony: formatBoxShadow
       // },
+      {
+        test: 'border',
+        ios: formatBorder,
+        android: formatBorder,
+        harmony: formatBorder
+      },
       // 通用的简写格式匹配
       {
         test: new RegExp('^(' + Object.keys(AbbreviationMap).join('|') + ')$'),

packages/webpack-plugin/lib/platform/template/wx/component-config/progress.js

@@ -17,6 +17,18 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-progress'
     },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-progress'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-progress'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-progress'
+    },
     props: [
       {
         test: /^(border-radius|font-size|color|active-mode|duration)$/,

packages/webpack-plugin/lib/platform/template/wx/component-config/unsupported.js

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'slider', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'slider', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print