Merge remote-tracking branch 'origin/master' into feat-bind-this

# Conflicts: # docs-vuepress/api/compile.md
didi · Oct 9, 2023 · 7e95771 · 7e95771
2 parents 4885d07 + 86a472e
commit 7e95771
Show file tree

Hide file tree

Showing 104 changed files with 1,739 additions and 1,478 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -1,6 +1,6 @@
 name: test
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   lint:

diff --git a/docs-vuepress/.vuepress/config.js b/docs-vuepress/.vuepress/config.js
@@ -135,6 +135,7 @@ module.exports = {
       description: '深度性能优化的增强型小程序开发框架'
     },
   },
+  shouldPrefetch: () => false,
   plugins: {
     '@vuepress/pwa': {
       serviceWorker: true,

diff --git a/docs-vuepress/api/app-config.md b/docs-vuepress/api/app-config.md
@@ -155,3 +155,27 @@ mpx.config.webRouteConfig = {
   mode: 'history'
 }
 ```
+
+## errorHandler
+- **类型**： `Function`
+
+- **默认值**：`null`
+
+- **用法**：
+
+```js
+mpx.config.errorHandler = function (errmsg, location, error) {
+  // errmsg: 框架内部运行报错的报错归类信息，例如当执行一个watch方法报错时，会是 "Unhandled error occurs during execution of watch callback!"
+  // location: 具体报错的代码路径，可选项，不一定存在
+  // error: 具体的错误堆栈，可选项，不一定存在
+  // handle error
+}
+```
+
+Mpx 框架运行时报错捕获感知处理函数。
+
+* Mpx 框架生命周期执行错误；
+* Mpx 中的 computed、watch 等内置方法执行报错；
+* Mpx 框架的运行时的检测报错，例如存在目标平台不支持的属性，入参出参类型错误等；
+
+同时被捕获的错误会通过 console.error 输出。
diff --git a/docs-vuepress/api/compile.md b/docs-vuepress/api/compile.md
@@ -250,6 +250,7 @@ module.exports = defineConfig({
 })
 ```
 :::
+
 ### externalClasses
 
 - **类型**：`Array<string>`
@@ -488,6 +489,7 @@ module.exports = defineConfig({
 })
 ```
 :::
+
 ### autoSplit
 
 - **类型**：`boolean`
@@ -1126,8 +1128,6 @@ module.exports = defineConfig({
 ```
 :::
 
-
-
 ### i18n
 
 ```js
@@ -1432,135 +1432,161 @@ new MpxWebpackPlugin({
 })
 ```
 
+### asyncSubpackageRules
 
-## MpxWebpackPlugin static methods
+- **类型**：
+```ts
+type Condition = string | Function | RegExp
 
-`MpxWebpackPlugin` 通过静态方法暴露了以下五个内置 loader，详情如下：
+interface AsyncSubpackageRules {
+  include: Condition | Array<Condition>
+  exclude?: Condition | Array<Condition>
+  root: string
+  placeholder: string | { name: string, resource?: string}
+}
+```
+  * include: 同 webpack include 规则
+  * exclude: 同 webpack exclude 规则
+  * root: 匹配规则的组件或js模块的输出分包名
+  * placeholder: 匹配规则的组件所配置的componentPlaceholder，可支持配置原生组件和自定义组件，原生组件可直接以string类型配置，自定义组件需要配置对象，name 为该自定义组件名, resource 为自定义组件的路径，路径可为绝对路径和相对于项目目录的相对路径
 
-### MpxWebpackPlugin.loader
+- **详细**：异步分包场景下批量设置组件或 js 模块的异步分包，提升资源异步分包输出的灵活性。
 
-`MpxWebpackPlugin` 所提供的最主要 loader，用于处理 `.mpx` 文件，根据不同的[模式(mode)](/api/compile.html#mode)将 `.mpx` 文件输出为不同的结果。
+- **示例**：
 
-> \* 在微信环境下 `todo.mpx` 被loader处理后的文件为：`todo.wxml`、`todo.wxss`、`todo.js`、`todo.json`
+```js
+// include 可以是正则、字符串、函数、数组
+new MpxWebpackPlugin({
+  asyncSubpackageRules: [
+    {
+      include: '/project/pages', // 文件路径包含 '/project/pages' 的组件或者 require.async 异步引用的js 模块都会被打包至sub1分包
+      root: 'sub1',
+      placeholder: 'view'
+    }
+  ]
+})
+// 若配置自定义组件
+new MpxWebpackPlugin({
+  asyncSubpackageRules: [
+    {
+      include: '/project/pages', // 文件路径包含 '/project/pages' 的组件或者 require.async 异步引用的js 模块都会被打包至sub1分包
+      root: 'sub1',
+      placeholder: {
+        name: 'other-placeholder',
+        resource: '/user/xxxx/other.mpx' // 自定义组件的绝对路径
+      }
+    }
+  ]
+})
+```
 
+::: tip @mpxjs/[email protected] 版本配置如下
 ```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.mpx$/,
-        use: MpxWebpackPlugin.loader(options)
+// vue.config.js
+module.exports = defineConfig({
+  pluginOptions: {
+    mpx: {
+      plugin: {
+        // include 可以是正则、字符串、函数、数组
+        asyncSubpackageRules: [
+          {
+            include: '/project/pages', // 文件路径包含 '/project/pages' 的组件或者 require.async 异步引用的js 模块都会被打包至sub1分包
+            root: 'sub1',
+            placeholder: 'view'
+          }
+        ]
       }
-    ]
+    }
   }
-};
+})
 ```
+:::
 
-#### Options
+:::warning
+* 该配置匹配的组件，若使用方在引用路径已设置?root或componentPlaceholder，则以引用路径中的?root或componentPlaceholder为最高优先级
+* 若placeholder配置使用自定义组件，注意一定要配置 placeholder 中的 resource 字段
+* 本功能只会对使用require.async异步引用的js模块生效，若引用路径中已配置?root，则以路径中?root优先
+:::
 
-##### Options.transRpx `{Array<Object> | Object}`
+### retryRequireAsync
 
-用于统一转换 px 或者 rpx 单位，默认值为`{}`，详见 [transRpxRules](/api/compile.html#transrpxrules)
+`boolean = false`
 
-:::warning
-`transRpx` 已在`v2.6.0`版本中**移除**，请在统一配置文件 `build/mpx.plugin.conf.js` 中使用 `transRpxRules` 属性进行配置。
-:::
+开启时在处理`require.async`时会添加单次重试逻辑
 
-::: tip @mpxjs/[email protected] 版本配置如下
-```javascript
+```js
+// vue.config.js
 module.exports = defineConfig({
   pluginOptions: {
     mpx: {
-      loader: {
-        transRpxRules: [] 
+      plugin: {
+        retryRequireAsync: true
       }
     }
   }
 })
 ```
-:::
 
-##### Options.loaders `{Object}`
+### enableAliRequireAsync
+
+`boolean = false`
 
-可用于对某些资源文件的默认 loader 做覆盖或新增处理，以下例子演示了对 [less-loader](https://webpack.docschina.org/loaders/less-loader/) 做额外配置。
+支付宝在`2.8.2`基础库版本后开始支持分包异步化，开启此配置时Mpx的分包异步构建能力能在输出支付宝时生效，不开启时则还是采用兜底策略进行构建来兼容`2.8.2`之前的基础库版本
 
 ```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.mpx$/,
-        use: MpxWebpackPlugin.loader({
-          loaders: { // loaders选项
-            less: [ // 针对less做loader配置
-              'css-loader',
-              {
-                loader: 'less-loader',
-                options: { // 为less-loader添加额外配置
-                  lessOptions: {
-                    strictMath: true
-                  }
-                }
-              }
-            ]
-          }
-        })
+// vue.config.js
+module.exports = defineConfig({
+  pluginOptions: {
+    mpx: {
+      plugin: {
+        enableAliRequireAsync: true
       }
-    ]
+    }
   }
-};
+})
 ```
 
-::: tip @mpxjs/cli 3.x 版本配置如下
+### optimizeSize
+
+`boolean = false`
+
+开启后可优化编译配置减少构建产物体积
+
 ```js
-const { defineConfig } = require('@vue/cli-service')
+// vue.config.js
 module.exports = defineConfig({
   pluginOptions: {
     mpx: {
-      loader: {
-        loaders: { // loaders选项
-          less: [ // 针对less做loader配置
-            'css-loader',
-            {
-              loader: 'less-loader',
-              options: { // 为less-loader添加额外配置
-                lessOptions: {
-                  strictMath: true
-                }
-              }
-            }
-          ]
-        }
+      plugin: {
+        optimizeSize: true
       }
     }
   }
 })
 ```
-:::
-
-##### Options.templateOption `{Object}`
 
-针对使用其他模板引擎(如 [pug](https://www.pugjs.cn/api/getting-started.html))来编写 template 的情景下，可通过 `options.templateOption` 来传入引擎渲染时的额外参数。等同于：
+## MpxWebpackPlugin static methods
 
-```js
-const pug = require('pug')
+`MpxWebpackPlugin` 通过静态方法暴露了以下五个内置 loader，详情如下：
 
-const template = `view(class='gray') 这是一段pug模板`
+### MpxWebpackPlugin.loader
 
-pug.render(template, options.templateOption)
-```
+`MpxWebpackPlugin` 所提供的最主要 loader，用于处理 `.mpx` 文件，根据不同的[目标平台](#mode)将 `.mpx` 文件输出为不同的结果。
 
-::: tip
-在 `@mpxjs/cli 3.x`版本已经内置了对于 `pug` 的支持，只需要安装 `pug` 依赖相关即可：
+> 在微信环境下 `todo.mpx` 被loader处理后的文件为：`todo.wxml`、`todo.wxss`、`todo.js`、`todo.json`
 
-```javascript
-npm install -D pug pug-plain-loader
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.mpx$/,
+        use: MpxWebpackPlugin.loader()
+      }
+    ]
+  }
+};
 ```
-:::
-
-##### Options.excludedPreLoaders `{RegExp}`
-
-在构建过程中忽略特定 `pre-loader` 对文件的处理，仅支持正则表达式，默认值为 `/eslint-loader/`。
 
 ### MpxWebpackPlugin.pluginLoader
 

diff --git a/docs-vuepress/guide/advance/async-subpackage.md b/docs-vuepress/guide/advance/async-subpackage.md
@@ -30,13 +30,12 @@
 ## 跨分包 JS 代码引用
 >一个分包中的代码引用其它分包的代码时，为了不让下载阻塞代码运行，我们需要异步获取引用的结果
 
-在 Mpx 中跨分包异步引用 JS 代码时，**需要在引用的 JS 路径后拼接 JS 模块所在的分包名**，示例如下：
+在 Mpx 中跨分包异步引用 JS 代码时，**需要在引用的 JS 路径后拼接 JS 模块所在的分包名**，此外由于 **require** 不能传入多个参数的限制，在Mpx中无法使用回调函数的
+风格跨分包 JS 代码引用，只能使用 Promise 风格。
+
+示例如下：
 ```js
 // subPackageA/index.js
-// 使用回调函数风格的调用
-require('../subPackageB/utils.js?root=subPackageB', utils => {
-  console.log(utils.whoami) // Wechat MiniProgram
-})
 // 或者使用 Promise 风格的调用
 require.async('../commonPackage/index.js?root=subPackageB').then(pkg => {
   pkg.getPackageName() // 'common'

diff --git a/lerna.json b/lerna.json
@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.8.29"
+  "version": "2.8.49"
 }
diff --git a/packages/api-proxy/package.json b/packages/api-proxy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.8.8",
+  "version": "2.8.49",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",

diff --git a/packages/api-proxy/src/index.js b/packages/api-proxy/src/index.js
@@ -9,8 +9,7 @@ export default function install (target, options = {}) {
     platform = {},
     exclude = ['shareImageMessage'], // 强制不进行代理的api，临时fix微信分享朋友圈白屏
     custom = {}, // 自定义转化规则
-    fallbackMap = {}, // 对于不支持的API，允许配置一个映射表，接管不存在的API
-    optimize = false // 内部一些实验优化的开关，外部用户慎用
+    fallbackMap = {} // 对于不支持的API，允许配置一个映射表，接管不存在的API
   } = options
 
   let { from = '', to = '' } = platform
@@ -40,8 +39,7 @@ export default function install (target, options = {}) {
     exclude,
     from,
     to,
-    custom,
-    optimize
+    custom
   })
 
   const promisedApi = usePromise ? promisify(transedApi, whiteList, blackList) : {}

diff --git a/packages/api-proxy/src/mini/platform/wxToAli.js b/packages/api-proxy/src/mini/platform/wxToAli.js
@@ -6,10 +6,7 @@ const TIPS_NAME = '支付宝环境 mpx'
 // canvas api 用
 const CANVAS_MAP = {}
 
-// optimize case avoid call api multi times with getSystemInfoSync
-let systemInfo
-
-const getWxToAliApi = ({ optimize = false }) => {
+const getWxToAliApi = () => {
   return {
     /**
      * 基础
@@ -34,10 +31,6 @@ const getWxToAliApi = ({ optimize = false }) => {
     },
 
     getSystemInfoSync () {
-      if (optimize) {
-        if (systemInfo) return systemInfo
-      }
-
       const res = ALI_OBJ.getSystemInfoSync() || {}
 
       res.system = `${res.platform} ${res.system}`
@@ -48,8 +41,6 @@ const getWxToAliApi = ({ optimize = false }) => {
         res.windowHeight = Math.floor(res.screenHeight * res.windowWidth / res.screenWidth) - 50
       }
 
-      if (optimize) systemInfo = res
-
       return res
     },