Merge branch 'master' into feat-rn-support-disableRequireAsync

Author: hiyuki

docs-vitepress/guide/basic/component.md

@@ -151,8 +151,6 @@ createComponent({
 })
 </script>
 ```
-// TODO data 的注意项
-
 
 ### computed
 

docs-vitepress/guide/extend/api-proxy.md

@@ -1,6 +1,6 @@
 # Api代理
 
-> convert API at each end 各个平台之间 api 进行转换，目前已支持微信转支付宝、微信转web
+> convert API at each end 各个平台之间 api 进行转换，目前已支持微信转支付宝、微信转web、微信转RN
 
 ## Usage
 
@@ -31,12 +31,13 @@ proxy.navigateTo({
 
 |参数名称|类型|含义|是否必填| 默认值   |备注|
 |---|---|---|---|-------|---|
-|platform|Object|各平台之间的转换|否|       |使用 mpx 脚手架配置会自动进行转换，无需配置|
-|exclude|Array(String)|跨平台时不需要转换的 api|-|
+|~~platform~~|~~Object~~|~~各平台之间的转换~~|~~否~~|       |已删除|
+|~~exclude~~|~~Array(String)~~|~~跨平台时不需要转换的 api~~|已删除|
 |usePromise|Boolean|是否将 api 转化为 promise 格式使用|否| false |-|
 |whiteList|Array(String)|强行转化为 promise 格式的 api|否| []    |需要 usePromise 设为 true|
 |blackList|Array(String)|强制不变成 promise 格式的 api|否| []    |-|
-|fallbackMap|Object|对于不支持的API，允许配置一个映射表，接管不存在的API|否| {}    |-|
+|~~fallbackMap~~|~~Object~~|~~对于不支持的API，允许配置一个映射表，接管不存在的API~~|~~否~~| {}    |已删除|
+| custom       | Object            | 提供用户在各渠道下自定义api开放能力      | 否     | []                     | -                     |
 
 ## example
 
@@ -65,6 +66,12 @@ mpx.showModal({
 
 > 开启usePromise时所有的异步api将返回promise，但是小程序中存在一些异步api本身的返回值是具有意义的，如uploadFile会返回一个uploadTask对象用于后续监听上传进度或者取消上传，在对api进行promise化之后我们会将原始的返回值挂载到promise.__returned属性上，便于开发者访问使用
 
+**⚠️ 注意** 
+- mpx中开启usePromise后，所有options中有success和fail都会以promise风格处理，不与微信拉齐
+- 开启 usePromise 后，若同时写了 success 和 then，两者都会执行。但需注意：启用 usePromise 后，API 调用应使用 promise 方式；若仍用 success/fail 接收回调，当 API 调用失败时，promise 的 catch 会无法捕获错误，进而触发 onUnhandledRejection 来捕获该错误。
+- 整体支持 promise 写法，但个别 API 若想继续用 success/fail 回调，又不想出现调用失败未被 catch 的报错，可在调用API方法时传 usePromise: false（默认 true），临时关闭本次 promise 转换
+
+
 ```js
 import mpx from '@mpxjs/core'
 import apiProxy from '@mpxjs/api-proxy'
@@ -82,4 +89,16 @@ mpx.showActionSheet({
 .catch(err => {
   console.log(err)
 })
+
+// 关闭本次调用转换promise风格
+mpx.showActionSheet({
+  itemList: ['A', 'B', 'C'],
+  success (res) {
+    console.log(res.tapIndex)
+  },
+  fail () {
+    console.log(err)
+  },
+  usePromise: false // 关闭设置
+})
 ```

docs-vitepress/guide/platform/rn.md

@@ -1,28 +1,14 @@
-import { ENV_OBJ } from './utils'
+import { ENV_OBJ, warn } from './utils'
 
 // 特别指定的不进行Promise封装的方法
 const blackList = [
-  'clearStorage',
-  'hideToast',
-  'hideLoading',
   'drawCanvas',
   'canIUse',
-  'stopRecord',
-  'pauseVoice',
-  'stopVoice',
-  'pauseBackgroundAudio',
-  'stopBackgroundAudio',
-  'showNavigationBarLoading',
-  'hideNavigationBarLoading',
   'getPerformance',
-  'hideKeyboard',
-  'stopPullDownRefresh',
-  'pageScrollTo',
   'reportAnalytics',
   'getMenuButtonBoundingClientRect',
   'reportMonitor',
   'reportEvent',
-  'connectSocket',
   'base64ToArrayBuffer',
   'arrayBufferToBase64',
   'getDeviceInfo',
@@ -33,16 +19,12 @@ const blackList = [
   'postMessageToReferrerPage',
   'postMessageToReferrerMiniProgram',
   'reportPerformance',
-  'getPerformance',
-  'preDownloadSubpackage',
   'router',
   'nextTick',
   'checkIsPictureInPictureActive',
   'worklet',
   'revokeBufferURL',
-  'reportEvent',
   'getExptInfoSync',
-  'reserveChannelsLive',
   'getNFCAdapter',
   'isVKSupport'
 ]
@@ -79,18 +61,22 @@ function promisify (listObj, whiteList, customBlackList) {
     if (typeof listObj[key] !== 'function') {
       return
     }
-
-    result[key] = function (...args) {
-      const obj = args[0] || {}
-      // 不需要转换 or 用户已定义回调，则不处理
-      if (!promisifyFilter(key)) {
-        return listObj[key].apply(ENV_OBJ, args)
-      } else { // 其他情况进行转换
+    if (!promisifyFilter(key)) {
+      result[key] = listObj[key].bind(ENV_OBJ)
+    } else {
+      result[key] = function (...args) {
+        const obj = args[0] || {}
+        if (obj.usePromise === false) {
+          return listObj[key].apply(ENV_OBJ, args)
+        }
         if (!args[0]) args.unshift(obj)
         let returned
         const promise = new Promise((resolve, reject) => {
           const originSuccess = obj.success
           const originFail = obj.fail
+          if (originSuccess || originFail) {
+            warn(`The [${key}] method has been promisified, please use .then or .catch to handle the result, if you need to handle the result with options.success/fail, please set options.usePromise to false to close the promisify in this call temporarily. `)
+          }
           obj.success = function (res) {
             originSuccess && originSuccess.call(this, res)
             resolve(res)

packages/api-proxy/src/common/js/promisify.js

@@ -1,5 +1,4 @@
 import { hasOwn, noop, getEnvObj, getFocusedNavigation, error as errorHandler, warn as warnHandler } from '@mpxjs/utils'
-import { getCurrentInstance } from '@mpxjs/core'
 
 /**
  *
@@ -90,8 +89,7 @@ function failHandle (result, fail, complete) {
 }
 
 function getCurrentPageId () {
-  const currentInstance = getCurrentInstance()
-  const id = currentInstance?.proxy?.getPageId() || getFocusedNavigation()?.pageId || null
+  const id = getFocusedNavigation()?.pageId || null
   return id
 }
 

packages/api-proxy/src/common/js/utils.js

@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
     position: 'absolute',
-    zIndex: 1000
+    zIndex: 10000
   },
   maskWrap: {
     left: 0,
@@ -65,8 +65,8 @@ const styles = StyleSheet.create({
   },
   itemTextStyle: {
     fontSize: 18,
-    height: 22,
-    lineHeight: 22
+    paddingTop: 2,
+    paddingBottom: 2
   },
   buttonStyle: {
     paddingTop: 10,
@@ -195,8 +195,8 @@ function ActionSheet ({ itemColor, height, success, fail, complete, alertText, i
             style={{
               color: '#000000',
               fontSize: 18,
-              lineHeight: 22,
-              height: 22,
+              paddingTop: 2,
+              paddingBottom: 2,
               width: '100%',
               textAlign: 'center'
             }}

packages/api-proxy/src/platform/api/action-sheet/rnActionSheet.jsx

@@ -41,7 +41,6 @@ export default class Preview {
     })
     // click to close
     bindTap(this.preview, () => {
-      this.currentIndex = 0
       this.preview.style.display = 'none'
       this.preview.querySelector('.__mpx_preview_images__').remove()
       this.preview.remove()
@@ -54,17 +53,19 @@ export default class Preview {
    * @param {string[]} options.urls - 图片地址数组
    */
   show (options) {
-    const supported = ['urls', 'success', 'fail', 'complete']
+    const supported = ['urls', 'success', 'fail', 'complete', 'current']
     Object.keys(options).forEach(key => !supported.includes(key) && warn(`previewImage: 暂不支持选项 ${key} ！`))
-    const { urls, success, fail, complete } = options
+    const { urls, current, success, fail, complete } = options
     try {
+      this.currentIndex = urls.indexOf(current) > -1 ? urls.indexOf(current) : 0
       getRootElement().appendChild(this.preview)
       this.preview.style.display = 'block'
       // create images with urls
       // append to preview
       this.preview.appendChild(createDom('div', { class: '__mpx_preview_images__' }, urls.map(url => createDom('div', {
         style: `background-image: url(${url})`
       }))))
+      this.preview.querySelector('.__mpx_preview_images__').style.transform = `translateX(-${this.currentIndex * 100}%)`
       this.maxIndex = urls.length
       this.updateTextTip()
       successHandle({ errMsg: 'previewImage:ok' }, success, complete)

packages/api-proxy/src/platform/api/image/Preview.js

@@ -47,7 +47,8 @@ const showModal = function (options = {}) {
       alignItems: 'center',
       display: 'flex',
       backgroundColor: 'rgba(0,0,0,0.6)',
-      position: 'absolute'
+      position: 'absolute',
+      zIndex: 10000
     },
     modalContent: {
       paddingTop: 20,

packages/api-proxy/src/platform/api/modal/rnModal.jsx

@@ -24,7 +24,7 @@ function isLock (navigationHelper, type, options) {
       navigationHelper.lastFailCallback('timeout')
       navigationHelper.lastFailCallback = null
     }
-  }, 350)
+  }, 1000)
   return false
 }
 

packages/api-proxy/src/platform/api/route/index.ios.js

@@ -4,70 +4,85 @@ import contextMap from '../../dynamic/vnode/context'
 
 function logCallbackNotFound (context, callbackName) {
   const location = context.__mpxProxy && context.__mpxProxy.options.mpxFileResource
-  error(`Instance property [${callbackName}] is not function, please check.`, location)
+  error(
+    `Instance property [${callbackName}] is not function, please check.`,
+    location
+  )
+}
+
+function handleEvent (context, $event, isCapture) {
+  if (typeof Mpx.config.proxyEventHandler === 'function') {
+    try {
+      Mpx.config.proxyEventHandler($event, context)
+    } catch (e) {
+    }
+  }
+  const location = context.__mpxProxy.options.mpxFileResource
+  const type = $event.type
+  // thanos 平台特殊事件标识
+  const emitMode = $event.detail && $event.detail.mpxEmit
+  if (!type) {
+    error('Event object must have [type] property!', location)
+    return
+  }
+  let fallbackType = ''
+  if (type === 'begin' || type === 'end') {
+    // 地图的 regionchange 事件会派发 e.type 为 begin 和 end 的事件
+    fallbackType = __mpx_mode__ === 'ali' ? 'regionChange' : 'regionchange'
+  } else if (/-([a-z])/.test(type)) {
+    fallbackType = dash2hump(type)
+  } else if (__mpx_mode__ === 'ali') {
+    fallbackType = type.replace(/^./, i => i.toLowerCase())
+  }
+  const target = $event.currentTarget || $event.target
+  if (!target) {
+    error(`[${type}] event object must have [currentTarget/target] property!`, location)
+    return
+  }
+  const mode = isCapture ? 'capture' : 'bubble'
+  const eventConfigs = target.dataset.eventconfigs?.[mode] || {}
+
+  const curEventConfig = eventConfigs[type] || eventConfigs[fallbackType] || []
+  // 如果有 mpxuid 说明是运行时组件，那么需要设置对应的上下文
+  const rootRuntimeContext = contextMap.get(target.dataset.mpxuid)
+  const runtimeContext = rootRuntimeContext || context
+  let returnedValue
+  curEventConfig.forEach((item) => {
+    const callbackName = item[0]
+    if (emitMode) {
+      // thanos 平台特殊事件标识处理
+      $event = $event.detail.data
+    }
+    if (callbackName) {
+      const params = item.length > 1
+        ? item.slice(1).map(item => {
+          if (item === '__mpx_event__') {
+            return $event
+          } else {
+            return item
+          }
+        })
+      : [$event]
+      if (typeof runtimeContext[callbackName] === 'function') {
+        returnedValue = runtimeContext[callbackName].apply(
+          runtimeContext,
+          params
+        )
+      } else {
+        logCallbackNotFound(runtimeContext, callbackName)
+      }
+    }
+  })
+  return returnedValue
 }
 
 export default function proxyEventMixin () {
   const methods = {
     __invoke ($event) {
-      if (typeof Mpx.config.proxyEventHandler === 'function') {
-        try {
-          Mpx.config.proxyEventHandler($event, this)
-        } catch (e) {
-        }
-      }
-      const location = this.__mpxProxy.options.mpxFileResource
-      const type = $event.type
-      // thanos 平台特殊事件标识
-      const emitMode = $event.detail && $event.detail.mpxEmit
-      if (!type) {
-        error('Event object must have [type] property!', location)
-        return
-      }
-      let fallbackType = ''
-      if (type === 'begin' || type === 'end') {
-        // 地图的 regionchange 事件会派发 e.type 为 begin 和 end 的事件
-        fallbackType = __mpx_mode__ === 'ali' ? 'regionChange' : 'regionchange'
-      } else if (/-([a-z])/.test(type)) {
-        fallbackType = dash2hump(type)
-      } else if (__mpx_mode__ === 'ali') {
-        fallbackType = type.replace(/^./, i => i.toLowerCase())
-      }
-      const target = $event.currentTarget || $event.target
-      if (!target) {
-        error(`[${type}] event object must have [currentTarget/target] property!`, location)
-        return
-      }
-      const eventConfigs = target.dataset.eventconfigs || {}
-      const curEventConfig = eventConfigs[type] || eventConfigs[fallbackType] || []
-      // 如果有 mpxuid 说明是运行时组件，那么需要设置对应的上下文
-      const rootRuntimeContext = contextMap.get(target.dataset.mpxuid)
-      const context = rootRuntimeContext || this
-      let returnedValue
-      curEventConfig.forEach((item) => {
-        const callbackName = item[0]
-        if (emitMode) {
-          // thanos 平台特殊事件标识处理
-          $event = $event.detail.data
-        }
-        if (callbackName) {
-          const params = item.length > 1
-            ? item.slice(1).map(item => {
-              if (item === '__mpx_event__') {
-                return $event
-              } else {
-                return item
-              }
-            })
-            : [$event]
-          if (typeof context[callbackName] === 'function') {
-            returnedValue = context[callbackName].apply(context, params)
-          } else {
-            logCallbackNotFound(context, callbackName)
-          }
-        }
-      })
-      return returnedValue
+       return handleEvent(this, $event, false)
+    },
+    __captureInvoke ($event) {
+       return handleEvent(this, $event, true)
     },
     __model (expr, $event, valuePath = ['value'], filterMethod) {
       const innerFilter = {