@mpxjs/core 2.10.13 → 2.10.15

package/@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,12 +296,12 @@ export interface RnConfig {
    * - `true`：允许退出应用
    * - `false`：阻止退出应用
    */
-  onAppBack?: () => boolean;
+  onAppBack?: () => boolean
 
   /**
    * 是否禁用框架内部的 AppStateChange 监听。
    */
-  disableAppStateListener?: boolean;
+  disableAppStateListener?: boolean
 
   /**
    * 控制首页回退按钮是否展示，并监听点击事件。
@@ -308,7 +309,7 @@ export interface RnConfig {
    * 如果绑定该函数，则首页显示返回按钮，点击后调用该函数作为回调。
    * 如需返回，请在函数内部手动调用 `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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.13",
+  "version": "2.10.15",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -109,5 +109,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "1b4a2d4765341ef6c6b74e501f72a0f856f247f9"
+  "gitHead": "4ea4a54f55aa938ad139e080827cffbbf7bb82db"
 }

package/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
   }
 

package/src/platform/builtInMixins/proxyEventMixin.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 = {

package/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -1,4 +1,4 @@
-import { isObject, isArray, dash2hump, cached, isEmptyObject } from '@mpxjs/utils'
+import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn } from '@mpxjs/utils'
 import { Dimensions, StyleSheet } from 'react-native'
 import Mpx from '../../index'
 
@@ -176,6 +176,14 @@ function transformStyleObj (styleObj) {
   return transformed
 }
 
+function isNativeStyle (style) {
+  return Array.isArray(style) || (
+    typeof style === 'object' &&
+    // Reanimated 的 animated style 通常会包含 viewDescriptors 或 _animations
+    (hasOwn(style, 'viewDescriptors') || hasOwn(style, '_animations'))
+  )
+}
+
 export default function styleHelperMixin () {
   return {
     methods: {
@@ -183,7 +191,10 @@ export default function styleHelperMixin () {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
-        const result = {}
+        const isNativeStaticStyle = staticStyle && isNativeStyle(staticStyle)
+        let result = isNativeStaticStyle ? [] : {}
+        const mergeResult = isNativeStaticStyle ? (o) => result.push(o) : (o) => Object.assign(result, o)
+
         const classMap = this.__getClassMap?.() || {}
         const appClassMap = global.__getAppClassMap?.() || {}
 
@@ -192,24 +203,34 @@ export default function styleHelperMixin () {
           const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
           classString.split(/\s+/).forEach((className) => {
             if (classMap[className]) {
-              Object.assign(result, classMap[className])
+              mergeResult(classMap[className])
             } else if (appClassMap[className]) {
               // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
-              Object.assign(result, appClassMap[className])
+              mergeResult(appClassMap[className])
             } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
-              Object.assign(result, this.__props[className])
+              mergeResult(this.__props[className])
             }
           })
         }
 
         if (staticStyle || dynamicStyle) {
-          const styleObj = Object.assign({}, parseStyleText(staticStyle), normalizeDynamicStyle(dynamicStyle))
-          Object.assign(result, transformStyleObj(styleObj))
+          const styleObj = {}
+          if (isNativeStaticStyle) {
+            if (Array.isArray(staticStyle)) {
+              result = result.concat(staticStyle)
+            } else {
+              mergeResult(staticStyle)
+            }
+          } else {
+            Object.assign(styleObj, parseStyleText(staticStyle))
+          }
+          Object.assign(styleObj, normalizeDynamicStyle(dynamicStyle))
+          mergeResult(transformStyleObj(styleObj))
         }
 
         if (hide) {
-          Object.assign(result, {
+          mergeResult({
             // display: 'none'
             // RN下display:'none'容易引发未知异常问题，使用布局样式模拟
             flex: 0,
@@ -220,8 +241,8 @@ export default function styleHelperMixin () {
             overflow: 'hidden'
           })
         }
-
-        return isEmptyObject(result) ? empty : result
+        const isEmpty = isNativeStaticStyle ? result.length > 0 : isEmptyObject(result)
+        return isEmpty ? empty : result
       }
     }
   }