@mpxjs/core 2.9.67 → 2.9.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.67",
+  "version": "2.9.69",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,21 +19,23 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.67",
+    "@mpxjs/utils": "^2.9.69",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
   "peerDependencies": {
     "@ant-design/react-native": "^5.1.3",
+    "@d11/react-native-fast-image": "^8.6.12",
     "@mpxjs/api-proxy": "^2.9.0",
     "@mpxjs/store": "^2.9.0",
-    "@react-navigation/native": "^6.1.17",
-    "@react-navigation/native-stack": "^6.9.26",
+    "@react-navigation/native": "^7.0.3",
+    "@react-navigation/stack": "^7.0.4",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^2.19.0",
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-safe-area-context": "^4.10.1",
+    "react-native-safe-area-context": "^4.14.0",
+    "react-native-screens": "^4.1.0",
     "react-native-webview": "^13.10.5",
     "vue": "^2.7.10",
     "vue-demi": "^0.14.6",
@@ -62,7 +64,7 @@
     "@react-navigation/native": {
       "optional": true
     },
-    "@react-navigation/native-stack": {
+    "@react-navigation/stack": {
       "optional": true
     },
     "@ant-design/react-native": {
@@ -71,6 +73,9 @@
     "react-native-safe-area-context": {
       "optional": true
     },
+    "react-native-screens": {
+      "optional": true
+    },
     "react-native-webview": {
       "optional": true
     },
@@ -79,6 +84,9 @@
     },
     "react-native-linear-gradient": {
       "optional": true
+    },
+    "@d11/react-native-fast-image": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -97,5 +105,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "b23d3850c16543c5998811b8d1d8e6ee7988c0f8"
+  "gitHead": "e23c51acc4c2ffdd31fcc6c27aae1aed42d1ade2"
 }

package/src/convertor/wxToReact.js

@@ -5,7 +5,7 @@ import {
 import { implemented } from '../core/implement'
 
 // 暂不支持的wx选项，后期需要各种花式支持
-const unsupported = ['relations', 'moved', 'definitionFilter', 'onShareAppMessage']
+const unsupported = ['relations', 'moved', 'definitionFilter']
 
 function convertErrorDesc (key) {
   error(`Options.${key} is not supported in runtime conversion from wx to react native.`, global.currentResource)

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

@@ -1,19 +1,22 @@
-import { isObject, isArray, dash2hump, isFunction, cached, getFocusedNavigation } from '@mpxjs/utils'
+import { isObject, isArray, dash2hump, cached } from '@mpxjs/utils'
 import { Dimensions, StyleSheet } from 'react-native'
 
+let { width, height } = Dimensions.get('screen')
+
+Dimensions.addEventListener('change', ({ screen }) => {
+  width = screen.width
+  height = screen.height
+})
+
 function rpx (value) {
-  const { width } = Dimensions.get('screen')
   // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
   // px = rpx * (750 / 屏幕宽度)
   return value * width / 750
 }
 function vw (value) {
-  const { width } = Dimensions.get('screen')
   return value * width / 100
 }
 function vh (value) {
-  const navigation = getFocusedNavigation()
-  const height = navigation?.layout?.height || Dimensions.get('screen').height
   return value * height / 100
 }
 
@@ -24,14 +27,15 @@ const unit = {
 }
 
 function formatValue (value) {
-  let matched
-  if ((matched = numberRegExp.exec(value))) {
-    value = +matched[1]
-  } else if ((matched = unitRegExp.exec(value))) {
-    value = unit[matched[2]](+matched[1])
-  } else if (hairlineRegExp.test(value)) {
-    value = StyleSheet.hairlineWidth
+  const matched = unitRegExp.exec(value)
+  if (matched) {
+    if (!matched[2] || matched[2] === 'px') {
+      return +matched[1]
+    } else {
+      return unit[matched[2]](+matched[1])
+    }
   }
+  if (hairlineRegExp.test(value)) return StyleSheet.hairlineWidth
   return value
 }
 
@@ -106,8 +110,7 @@ function stringifyDynamicClass (value) {
 
 const listDelimiter = /;(?![^(]*[)])/g
 const propertyDelimiter = /:(.+)/
-const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
-const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh|px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 
@@ -164,14 +167,8 @@ export default function styleHelperMixin () {
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
         const result = {}
-        const classMap = {}
-        // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
-        if (isFunction(global.__getAppClassMap)) {
-          Object.assign(classMap, global.__getAppClassMap())
-        }
-        if (isFunction(this.__getClassMap)) {
-          Object.assign(classMap, this.__getClassMap())
-        }
+        const classMap = this.__getClassMap?.() || {}
+        const appClassMap = global.__getAppClassMap?.() || {}
 
         if (staticClass || dynamicClass) {
           // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
@@ -179,6 +176,9 @@ export default function styleHelperMixin () {
           classString.split(/\s+/).forEach((className) => {
             if (classMap[className]) {
               Object.assign(result, classMap[className])
+            } else if (appClassMap[className]) {
+              // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
+              Object.assign(result, appClassMap[className])
             } else if (this.props[className] && isObject(this.props[className])) {
               // externalClasses必定以对象形式传递下来
               Object.assign(result, this.props[className])

package/src/platform/createApp.ios.js

@@ -1,6 +1,6 @@
 import transferOptions from '../core/transferOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp, parseUrlQuery } from '@mpxjs/utils'
+import { makeMap, spreadProp, parseUrlQuery, getFocusedNavigation } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import * as wxLifecycle from '../platform/patch/wx/lifecycle'
 import Mpx from '../index'
@@ -143,8 +143,21 @@ export default function createApp (option, config = {}) {
 
       const changeSubscription = ReactNative.AppState.addEventListener('change', (currentState) => {
         if (currentState === 'active') {
+          let options = global.__mpxEnterOptions
+          const navigation = getFocusedNavigation()
+          if (navigation) {
+            const state = navigation.getState()
+            const current = state.routes[state.index]
+            options = {
+              path: current.name,
+              query: current.params,
+              scene: 0,
+              shareTicket: '',
+              referrerInfo: {}
+            }
+          }
           global.__mpxAppCbs.show.forEach((cb) => {
-            cb(global.__mpxEnterOptions)
+            cb(options)
           })
           global.__mpxAppFocusedState.value = 'show'
         } else if (currentState === 'inactive') {
@@ -180,9 +193,13 @@ export default function createApp (option, config = {}) {
         createElement(Stack.Navigator,
           {
             initialRouteName,
-            headerBackButtonDisplayMode: 'minimal',
-            headerMode: 'float',
-            gestureEnabled: true
+            screenOptions: {
+              gestureEnabled: true,
+              // 7.x替换headerBackTitleVisible
+              // headerBackButtonDisplayMode: 'minimal',
+              headerBackTitleVisible: false,
+              headerMode: 'float'
+            }
           },
           ...getPageScreens(initialRouteName, initialParams)
         )
@@ -191,7 +208,7 @@ export default function createApp (option, config = {}) {
   })
 
   global.getCurrentPages = function () {
-    const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
+    const navigation = getFocusedNavigation()
     if (navigation) {
       return navigation.getState().routes.map((route) => {
         return global.__mpxPagesMap[route.key] && global.__mpxPagesMap[route.key][0]

package/src/platform/patch/react/getDefaultOptions.ios.js

@@ -1,15 +1,15 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment, cloneElement } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, Fragment, cloneElement } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../../observer/effect'
 import { watch } from '../../../observer/watch'
 import { reactive, set, del } from '../../../observer/reactive'
-import { hasOwn, isFunction, noop, isObject, getByPath, collectDataset, hump2dash, wrapMethodsWithErrorHandling } from '@mpxjs/utils'
+import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, wrapMethodsWithErrorHandling } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
 import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE, REACTHOOKSEXEC } from '../../../core/innerLifecycle'
 import mergeOptions from '../../../core/mergeOptions'
 import { queueJob } from '../../../observer/scheduler'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
-import { IntersectionObserverContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
+import { IntersectionObserverContext, RouteContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
 
 function getSystemInfo () {
   const window = ReactNative.Dimensions.get('window')
@@ -105,26 +105,33 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
       this.__refs = {}
       this.__dispatchedSlotSet = new WeakSet()
     },
-    __getSlot (name) {
+    __getSlot (name, slot) {
       const { children } = propsRef.current
       if (children) {
-        const result = []
-        if (Array.isArray(children)) {
+        let result = []
+        if (isArray(children) && !hasOwn(children, '__slot')) {
           children.forEach(child => {
-            if (child?.props?.slot === name) {
+            if (isObject(child) && hasOwn(child, '__slot')) {
+              if (child.__slot === name) result.push(...child)
+            } else if (child?.props?.slot === name) {
               result.push(child)
             }
           })
         } else {
-          if (children?.props?.slot === name) {
+          if (isObject(children) && hasOwn(children, '__slot')) {
+            if (children.__slot === name) result.push(...children)
+          } else if (children?.props?.slot === name) {
             result.push(children)
           }
         }
-        return result.filter(item => {
+        result = result.filter(item => {
           if (!isObject(item) || this.__dispatchedSlotSet.has(item)) return false
           this.__dispatchedSlotSet.add(item)
           return true
         })
+        if (!result.length) return null
+        result.__slot = slot
+        return result
       }
       return null
     },
@@ -134,7 +141,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
     _i (val, fn) {
       let i, l, keys, key
       const result = []
-      if (Array.isArray(val) || typeof val === 'string') {
+      if (isArray(val) || typeof val === 'string') {
         for (i = 0, l = val.length; i < l; i++) {
           result.push(fn.call(this, val[i], i))
         }
@@ -266,8 +273,6 @@ function hasPageHook (mpxProxy, hookNames) {
   })
 }
 
-const RouteContext = createContext(null)
-
 const triggerPageStatusHook = (mpxProxy, event) => {
   mpxProxy.callHook(event === 'show' ? ONSHOW : ONHIDE)
   const pageLifetimes = mpxProxy.options.pageLifetimes
@@ -447,24 +452,20 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
       useLayoutEffect(() => {
         const isCustom = pageConfig.navigationStyle === 'custom'
-        const opt = {}
-        if (__mpx_mode__ === 'android') {
-          // opt = {
-          //   statusBarTranslucent: isCustom,
-          //   statusBarStyle: pageConfig.statusBarStyle, // 枚举值 'auto' | 'dark' | 'light' 控制statusbar字体颜色
-          //   statusBarColor: isCustom ? 'transparent' : pageConfig.statusBarColor // 控制statusbar背景颜色
-          // }
-        }
         navigation.setOptions({
           headerShown: !isCustom,
           title: pageConfig.navigationBarTitleText || '',
           headerStyle: {
             backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
           },
-          // headerTitleAlign: 'center',
-          headerTintColor: pageConfig.navigationBarTextStyle || 'white',
-          ...opt
+          headerTintColor: pageConfig.navigationBarTextStyle || 'white'
         })
+        if (__mpx_mode__ === 'android') {
+          ReactNative.StatusBar.setBarStyle(pageConfig.barStyle || 'dark-content')
+          ReactNative.StatusBar.setTranslucent(isCustom) // 控制statusbar是否占位
+          const color = isCustom ? 'transparent' : pageConfig.statusBarColor
+          color && ReactNative.StatusBar.setBackgroundColor(color)
+        }
       }, [])
 
       const rootRef = useRef(null)