@mpxjs/core 2.10.17 → 2.10.18-beta.2

package/src/platform/builtInMixins/refsMixin.js

@@ -15,6 +15,52 @@ const setRef = function (target, ref, isAsync) {
     }
   })
 }
+const proxyMethods = ['boundingClientRect', 'scrollOffset']
+function rewriteAliCreateSelectorQuery (target) {
+  const rawCreateSelectorQuery = target.createSelectorQuery
+  target.createSelectorQuery = function (...args) {
+    let selectorQuery = rawCreateSelectorQuery.apply(target, args)
+    const cbs = []
+
+    if (typeof selectorQuery === 'undefined') {
+      // 兜底 selectorQuery 在ali为 undefined 情况
+      // 调用 createSelectorQuery时，组件实例已经被销毁，ali this._originCreateSelectorQuery 返回 undefined。导致后续 selectorQuery[name] 报错
+      // 方案：对齐微信，微信实例销毁时，其他调用正常，仅 createSelectorQuery.exec 不执行回调
+      // 复现：setTimeout 中调用，倒计时未回调时切换页面
+      selectorQuery = {}
+      // ['boundingClientRect', 'context', 'exec', 'fields', 'in', 'node', 'scrollOffset', 'select', 'selectAll', 'selectViewport', 'toImage']
+      const backupMethodKeys = Object.keys(envObj.createSelectorQuery())
+      const backupFn = function () {
+        return selectorQuery
+      }
+      backupMethodKeys.forEach(key => {
+        selectorQuery[key] = backupFn
+      })
+      return selectorQuery
+    }
+
+    proxyMethods.forEach((name) => {
+      const originalMethod = selectorQuery[name]
+      selectorQuery[name] = function (cb = noop) {
+        cbs.push(cb)
+        return originalMethod.call(this)
+      }
+    })
+
+    const originalExec = selectorQuery.exec
+    selectorQuery.exec = function (originalCb = noop) {
+      const cb = function (results) {
+        results.forEach((item, index) => {
+          cbs[index] && cbs[index](item)
+        })
+        originalCb(results)
+      }
+      return originalExec.call(this, cb)
+    }
+
+    return selectorQuery
+  }
+}
 
 export default function getRefsMixin () {
   const refsMixin = {
@@ -24,8 +70,7 @@ export default function getRefsMixin () {
       this.__getRefs()
 
       if (__mpx_mode__ === 'ali') {
-        this._originCreateSelectorQuery = this.createSelectorQuery
-        this.createSelectorQuery = this._createSelectorQuery
+        rewriteAliCreateSelectorQuery(this)
       }
     },
     methods: {
@@ -68,51 +113,7 @@ export default function getRefsMixin () {
       }
     })
 
-    const proxyMethods = ['boundingClientRect', 'scrollOffset']
-
     Object.assign(refsMixin.methods, {
-      _createSelectorQuery (...args) {
-        let selectorQuery = this._originCreateSelectorQuery(...args)
-        const cbs = []
-
-        if (typeof selectorQuery === 'undefined') {
-          // 兜底 selectorQuery 在ali为 undefined 情况
-          // 调用 createSelectorQuery时，组件实例已经被销毁，ali this._originCreateSelectorQuery 返回 undefined。导致后续 selectorQuery[name] 报错
-          // 方案：对齐微信，微信实例销毁时，其他调用正常，仅 createSelectorQuery.exec 不执行回调
-          // 复现：setTimeout 中调用，倒计时未回调时切换页面
-          selectorQuery = {}
-          // ['boundingClientRect', 'context', 'exec', 'fields', 'in', 'node', 'scrollOffset', 'select', 'selectAll', 'selectViewport', 'toImage']
-          const backupMethodKeys = Object.keys(envObj.createSelectorQuery())
-          const backupFn = function () {
-            return selectorQuery
-          }
-          backupMethodKeys.forEach(key => {
-            selectorQuery[key] = backupFn
-          })
-          return selectorQuery
-        }
-
-        proxyMethods.forEach((name) => {
-          const originalMethod = selectorQuery[name]
-          selectorQuery[name] = function (cb = noop) {
-            cbs.push(cb)
-            return originalMethod.call(this)
-          }
-        })
-
-        const originalExec = selectorQuery.exec
-        selectorQuery.exec = function (originalCb = noop) {
-          const cb = function (results) {
-            results.forEach((item, index) => {
-              cbs[index] && cbs[index](item)
-            })
-            originalCb(results)
-          }
-          return originalExec.call(this, cb)
-        }
-
-        return selectorQuery
-      },
       selectComponent (selector) {
         return this.$selectComponent(selector)
       },

package/src/platform/builtInMixins/renderHelperMixin.js

@@ -1,44 +1,46 @@
 import { getByPath, hasOwn, isObject } from '@mpxjs/utils'
 
-export default function renderHelperMixin () {
-  return {
-    methods: {
-      _i (val, handler) {
-        let i, l, keys, key
-        if (Array.isArray(val) || typeof val === 'string') {
-          for (i = 0, l = val.length; i < l; i++) {
-            handler.call(this, val[i], i)
-          }
-        } else if (typeof val === 'number') {
-          for (i = 0; i < val; i++) {
-            handler.call(this, i + 1, i)
-          }
-        } else if (isObject(val)) {
-          keys = Object.keys(val)
-          for (i = 0, l = keys.length; i < l; i++) {
-            key = keys[i]
-            handler.call(this, val[key], key, i)
-          }
-        }
-      },
-      // collect
-      _c (key, value) {
-        if (hasOwn(this.__mpxProxy.renderData, key)) {
-          return this.__mpxProxy.renderData[key]
-        }
-        if (value === undefined) {
-          value = getByPath(this, key)
-        }
-        this.__mpxProxy.renderData[key] = value
-        return value
-      },
-      // simple collect
-      _sc (key) {
-        return (this.__mpxProxy.renderData[key] = this[key])
-      },
-      _r (skipPre, vnode) {
-        this.__mpxProxy.renderWithData(skipPre, vnode)
+export const renderHelperDefs = {
+  _i (val, handler) {
+    let i, l, keys, key
+    if (Array.isArray(val) || typeof val === 'string') {
+      for (i = 0, l = val.length; i < l; i++) {
+        handler.call(this, val[i], i)
+      }
+    } else if (typeof val === 'number') {
+      for (i = 0; i < val; i++) {
+        handler.call(this, i + 1, i)
       }
+    } else if (isObject(val)) {
+      keys = Object.keys(val)
+      for (i = 0, l = keys.length; i < l; i++) {
+        key = keys[i]
+        handler.call(this, val[key], key, i)
+      }
+    }
+  },
+  // collect
+  _c (key, value) {
+    if (hasOwn(this.__mpxProxy.renderData, key)) {
+      return this.__mpxProxy.renderData[key]
+    }
+    if (value === undefined) {
+      value = getByPath(this, key)
     }
+    this.__mpxProxy.renderData[key] = value
+    return value
+  },
+  // simple collect
+  _sc (key) {
+    return (this.__mpxProxy.renderData[key] = this[key])
+  },
+  _r (skipPre, vnode) {
+    this.__mpxProxy.renderWithData(skipPre, vnode)
+  }
+}
+
+export default function renderHelperMixin () {
+  return {
+    methods: renderHelperDefs
   }
 }

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

@@ -1,33 +1,74 @@
-import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn } from '@mpxjs/utils'
-import { Dimensions, StyleSheet } from 'react-native'
+import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn, getFocusedNavigation } from '@mpxjs/utils'
+import { StyleSheet, Dimensions } from 'react-native'
+import { reactive } from '../../observer/reactive'
 import Mpx from '../../index'
 
-const rawDimensions = {
-  screen: Dimensions.get('screen'),
-  window: Dimensions.get('window')
+global.__mpxAppDimensionsInfo = {
+  window: Dimensions.get('window'),
+  screen: Dimensions.get('screen')
 }
-let width, height
+global.__mpxSizeCount = 0
+global.__mpxPageSizeCountMap = reactive({})
 
-function customDimensions (dimensions) {
+global.__GCC = function (className, classMap, classMapValueCache) {
+  if (!classMapValueCache.has(className)) {
+    const styleObj = classMap[className]?.(global.__formatValue)
+    styleObj && classMapValueCache.set(className, styleObj)
+  }
+  return classMapValueCache.get(className)
+}
+
+let dimensionsInfoInitialized = false
+function useDimensionsInfo (dimensions) {
+  dimensionsInfoInitialized = true
   if (typeof Mpx.config.rnConfig?.customDimensions === 'function') {
     dimensions = Mpx.config.rnConfig.customDimensions(dimensions) || dimensions
   }
-  width = dimensions.screen.width
-  height = dimensions.screen.height
+  global.__mpxAppDimensionsInfo.window = dimensions.window
+  global.__mpxAppDimensionsInfo.screen = dimensions.screen
+}
+
+function getPageSize (window = global.__mpxAppDimensionsInfo.screen) {
+  return window.width + 'x' + window.height
 }
 
-Dimensions.addEventListener('change', customDimensions)
+Dimensions.addEventListener('change', ({ window, screen }) => {
+  const oldScreen = getPageSize(global.__mpxAppDimensionsInfo.screen)
+  useDimensionsInfo({ window, screen })
+
+  // 对比 screen 高宽是否存在变化
+  if (getPageSize(screen) === oldScreen) return
+
+  global.__classCaches?.forEach(cache => cache?.clear())
+
+  // 更新全局和栈顶页面的标记，其他后台页面的标记在show之后更新
+  global.__mpxSizeCount++
+
+  const navigation = getFocusedNavigation()
+
+  if (navigation) {
+    global.__mpxPageSizeCountMap[navigation.pageId] = global.__mpxSizeCount
+    if (hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
+      global.__mpxPageStatusMap[navigation.pageId] = `resize${global.__mpxSizeCount}`
+    }
+  }
+})
 
+// TODO: 1 目前测试鸿蒙下折叠屏screen固定为展开状态下屏幕尺寸，仅window会变化，且window包含状态栏高度
+// TODO: 2 存在部分安卓折叠屏机型在折叠/展开切换时，Dimensions监听到的width/height尺寸错误，并触发多次问题
 function rpx (value) {
+  const screenInfo = global.__mpxAppDimensionsInfo.screen
   // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
   // px = rpx * (750 / 屏幕宽度)
-  return value * width / 750
+  return value * screenInfo.width / 750
 }
 function vw (value) {
-  return value * width / 100
+  const screenInfo = global.__mpxAppDimensionsInfo.screen
+  return value * screenInfo.width / 100
 }
 function vh (value) {
-  return value * height / 100
+  const screenInfo = global.__mpxAppDimensionsInfo.screen
+  return value * screenInfo.height / 100
 }
 
 const unit = {
@@ -38,8 +79,14 @@ const unit = {
 
 const empty = {}
 
-function formatValue (value) {
-  if (width === undefined) customDimensions(rawDimensions)
+function formatValue (value, unitType) {
+  if (!dimensionsInfoInitialized) useDimensionsInfo(global.__mpxAppDimensionsInfo)
+  if (unitType === 'hairlineWidth') {
+    return StyleSheet.hairlineWidth
+  }
+  if (unitType && typeof unit[unitType] === 'function') {
+    return unit[unitType](+value)
+  }
   const matched = unitRegExp.exec(value)
   if (matched) {
     if (!matched[2] || matched[2] === 'px') {
@@ -180,29 +227,57 @@ function isNativeStyle (style) {
   )
 }
 
+function getMediaStyle (media) {
+  if (!media || !media.length) return {}
+  const { width } = global.__mpxAppDimensionsInfo.screen
+  return media.reduce((styleObj, item) => {
+    const { options = {}, value = {} } = item
+    const { minWidth, maxWidth } = options
+    if (!isNaN(minWidth) && !isNaN(maxWidth) && width >= minWidth && width <= maxWidth) {
+      Object.assign(styleObj, value)
+    } else if (!isNaN(minWidth) && width >= minWidth) {
+      Object.assign(styleObj, value)
+    } else if (!isNaN(maxWidth) && width <= maxWidth) {
+      Object.assign(styleObj, value)
+    }
+    return styleObj
+  }, {})
+}
+
 export default function styleHelperMixin () {
   return {
     methods: {
+      __getSizeCount () {
+        return global.__mpxPageSizeCountMap[this.__pageId]
+      },
       __getClass (staticClass, dynamicClass) {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
         const isNativeStaticStyle = staticStyle && isNativeStyle(staticStyle)
         let result = isNativeStaticStyle ? [] : {}
-        const mergeResult = isNativeStaticStyle ? (o) => result.push(o) : (o) => Object.assign(result, o)
+        const mergeResult = isNativeStaticStyle ? (...args) => result.push(...args) : (...args) => Object.assign(result, ...args)
 
-        const classMap = this.__getClassMap?.() || {}
-        const appClassMap = global.__getAppClassMap?.() || {}
+        this.__getSizeCount()
 
         if (staticClass || dynamicClass) {
           // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
           const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
+
           classString.split(/\s+/).forEach((className) => {
-            if (classMap[className]) {
-              mergeResult(classMap[className])
-            } else if (appClassMap[className]) {
-              // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
-              mergeResult(appClassMap[className])
+            let localStyle, appStyle
+            if (localStyle = this.__getClassStyle?.(className)) {
+              if (localStyle._media?.length) {
+                mergeResult(localStyle._default, getMediaStyle(localStyle._media))
+              } else {
+                mergeResult(localStyle)
+              }
+            } else if (appStyle = global.__getAppClassStyle?.(className)) {
+              if (appStyle._media?.length) {
+                mergeResult(appStyle._default, getMediaStyle(appStyle._media))
+              } else {
+                mergeResult(appStyle)
+              }
             } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
               mergeResult(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, getFocusedNavigation, hasOwn } from '@mpxjs/utils'
+import { makeMap, spreadProp, getFocusedNavigation, hasOwn, callWithErrorHandling } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
@@ -14,10 +14,6 @@ import MpxNav from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
-function getPageSize (window = ReactNative.Dimensions.get('window')) {
-  return window.width + 'x' + window.height
-}
-
 function filterOptions (options, appData) {
   const newOptions = {}
   Object.keys(options).forEach(key => {
@@ -74,13 +70,12 @@ export default function createApp (options) {
         )
       }
       const getComponent = () => {
-        return item.displayName ? item : item()
+        return item.displayName ? item : callWithErrorHandling(item, null, 'require page script')
       }
       if (key === initialRouteName) {
         return createElement(Stack.Screen, {
           name: key,
           getComponent,
-          initialParams,
           layout: headerLayout
         })
       }
@@ -124,7 +119,7 @@ export default function createApp (options) {
           const current = state.routes[state.index]
           options = {
             path: current.name,
-            query: current.params,
+            query: current.name === global.__mpxInitialRouteName ? global.__mpxInitialRunParams : current.params,
             scene: 0,
             shareTicket: '',
             referrerInfo: {}
@@ -184,7 +179,7 @@ export default function createApp (options) {
         const current = state.routes[state.index]
         const options = {
           path: current.name,
-          query: current.params,
+          query: current.name === global.__mpxInitialRouteName ? global.__mpxInitialRunParams : current.params,
           scene: 0,
           shareTicket: '',
           referrerInfo: {},
@@ -208,26 +203,17 @@ export default function createApp (options) {
         if (Mpx.config.rnConfig.disableAppStateListener) return
         onAppStateChange(state)
       })
-
-      let count = 0
-      let lastPageSize = getPageSize()
-      const resizeSubScription = ReactNative.Dimensions.addEventListener('change', ({ window }) => {
-        const pageSize = getPageSize(window)
-        if (pageSize === lastPageSize) return
-        lastPageSize = pageSize
-        const navigation = getFocusedNavigation()
-        if (navigation && hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
-          global.__mpxPageStatusMap[navigation.pageId] = `resize${count++}`
-        }
-      })
       return () => {
         appState.state = 'exit'
         changeSubscription && changeSubscription.remove()
-        resizeSubScription && resizeSubScription.remove()
       }
     }, [])
 
     const { initialRouteName, initialParams } = initialRouteRef.current
+    if (!global.__mpxAppHotLaunched) {
+      global.__mpxInitialRouteName = initialRouteName
+      global.__mpxInitialRunParams = initialParams
+    }
     const navScreenOpts = {
       headerShown: false,
       statusBarTranslucent: Mpx.config.rnConfig.statusBarTranslucent ?? true,

package/src/platform/env/navigationHelper.ios.js

@@ -1,7 +1,7 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { NavigationContainer, StackActions } from '@react-navigation/native'
 import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { SafeAreaProvider, useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 export {
@@ -11,5 +11,6 @@ export {
   GestureHandlerRootView,
   PortalHost,
   SafeAreaProvider,
-  useSafeAreaInsets
+  useSafeAreaInsets,
+  initialWindowMetrics
 }