@mpxjs/core 2.9.66 → 2.9.69-beta.0

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, isEmptyObject } 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
 }
 
@@ -23,15 +26,18 @@ const unit = {
   vh
 }
 
+const empty = {}
+
 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 +112,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 +169,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,9 +178,12 @@ export default function styleHelperMixin () {
           classString.split(/\s+/).forEach((className) => {
             if (classMap[className]) {
               Object.assign(result, classMap[className])
-            } else if (this.props[className] && isObject(this.props[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])
+              Object.assign(result, this.__props[className])
             }
           })
         }
@@ -196,7 +198,8 @@ export default function styleHelperMixin () {
             display: 'none'
           })
         }
-        return result
+
+        return isEmptyObject(result) ? empty : result
       }
     }
   }

package/src/platform/createApp.ios.js

@@ -1,14 +1,15 @@
 import transferOptions from '../core/transferOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp } from '@mpxjs/utils'
+import { makeMap, spreadProp, parseUrlQuery, getFocusedNavigation, hasOwn, extend } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
-import * as wxLifecycle from '../platform/patch/wx/lifecycle'
+import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
 import { createElement, memo, useRef, useEffect } from 'react'
 import * as ReactNative from 'react-native'
+import { Image } from 'react-native'
 import { ref } from '../observer/ref'
 
-const appHooksMap = makeMap(mergeLifecycle(wxLifecycle.LIFECYCLE).app)
+const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
 function getOrientation (window = ReactNative.Dimensions.get('window')) {
   return window.width > window.height ? 'landscape' : 'portrait'
@@ -30,17 +31,13 @@ function filterOptions (options, appData) {
 }
 
 function createAppInstance (appData) {
-  const instance = {
-    ...Mpx.prototype,
-    ...appData
-  }
-  return instance
+  return extend({}, Mpx.prototype, appData)
 }
 
 export default function createApp (option, config = {}) {
   const appData = {}
 
-  const { NavigationContainer, createNavigationContainerRef, createNativeStackNavigator, SafeAreaProvider } = global.__navigationHelper
+  const { NavigationContainer, createStackNavigator, SafeAreaProvider } = global.__navigationHelper
   // app选项目前不需要进行转换
   const { rawOptions, currentInject } = transferOptions(option, 'app', false)
   const defaultOptions = filterOptions(spreadProp(rawOptions, 'methods'), appData)
@@ -51,16 +48,25 @@ export default function createApp (option, config = {}) {
   }
   const pages = currentInject.getPages() || {}
   const firstPage = currentInject.firstPage
-  const Stack = createNativeStackNavigator()
-  const navigationRef = createNavigationContainerRef()
-  const pageScreens = Object.entries(pages).map(([key, item]) => {
-    return createElement(Stack.Screen, {
-      name: key,
-      component: item
+  const Stack = createStackNavigator()
+  const getPageScreens = (initialRouteName, initialParams) => {
+    return Object.entries(pages).map(([key, item]) => {
+      if (key === initialRouteName) {
+        return createElement(Stack.Screen, {
+          name: key,
+          component: item,
+          initialParams
+        })
+      }
+      return createElement(Stack.Screen, {
+        name: key,
+        component: item
+      })
     })
-  })
+  }
   global.__mpxOptionsMap = global.__mpxOptionsMap || {}
-  const onStateChange = () => {
+  const onStateChange = (state) => {
+    Mpx.config.rnConfig.onStateChange?.(state)
     if (global.__navigationHelper.lastSuccessCallback) {
       global.__navigationHelper.lastSuccessCallback()
       global.__navigationHelper.lastSuccessCallback = null
@@ -75,32 +81,48 @@ export default function createApp (option, config = {}) {
     }
   }
 
-  global.__mpxAppCbs = global.__mpxAppCbs || {
-    show: [],
-    hide: [],
-    error: []
-  }
+  global.__mpxAppLaunched = false
 
   global.__mpxAppFocusedState = ref('show')
-  global.__mpxOptionsMap[currentInject.moduleId] = memo(() => {
+  global.__mpxOptionsMap[currentInject.moduleId] = memo((props) => {
     const instanceRef = useRef(null)
     if (!instanceRef.current) {
       instanceRef.current = createAppInstance(appData)
     }
     const instance = instanceRef.current
-    useEffect(() => {
-      const current = navigationRef.isReady() ? navigationRef.getCurrentRoute() : {}
-      const options = {
-        path: current.name,
-        query: current.params,
-        scene: 0,
-        shareTicket: '',
-        referrerInfo: {}
+    const initialRouteRef = useRef({
+      initialRouteName: firstPage,
+      initialParams: {}
+    })
+
+    if (!global.__mpxAppLaunched) {
+      const parsed = Mpx.config.rnConfig.parseAppProps?.(props) || {}
+      if (parsed.url) {
+        const { path, queryObj } = parseUrlQuery(parsed.url)
+        Object.assign(initialRouteRef.current, {
+          initialRouteName: path.startsWith('/') ? path.slice(1) : path,
+          initialParams: queryObj
+        })
+      }
+      global.__mpxAppOnLaunch = (navigation) => {
+        global.__mpxAppLaunched = true
+        const state = navigation.getState()
+        Mpx.config.rnConfig.onStateChange?.(state)
+        const current = state.routes[state.index]
+        global.__mpxEnterOptions = {
+          path: current.name,
+          query: current.params,
+          scene: 0,
+          shareTicket: '',
+          referrerInfo: {}
+        }
+        defaultOptions.onLaunch && defaultOptions.onLaunch.call(instance, global.__mpxEnterOptions)
+        defaultOptions.onShow && defaultOptions.onShow.call(instance, global.__mpxEnterOptions)
       }
-      global.__mpxEnterOptions = options
-      defaultOptions.onLaunch && defaultOptions.onLaunch.call(instance, options)
+    }
+
+    useEffect(() => {
       if (defaultOptions.onShow) {
-        defaultOptions.onShow.call(instance, options)
         global.__mpxAppCbs.show.push(defaultOptions.onShow.bind(instance))
       }
       if (defaultOptions.onHide) {
@@ -109,18 +131,39 @@ export default function createApp (option, config = {}) {
       if (defaultOptions.onError) {
         global.__mpxAppCbs.error.push(defaultOptions.onError.bind(instance))
       }
+      if (defaultOptions.onUnhandledRejection) {
+        global.__mpxAppCbs.rejection.push(defaultOptions.onUnhandledRejection.bind(instance))
+      }
 
       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(options)
           })
-          global.__mpxAppFocusedState.value = 'show'
-        } else if (currentState === 'inactive') {
+          if (navigation && hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
+            global.__mpxPageStatusMap[navigation.pageId] = 'show'
+          }
+        } else if (currentState === 'inactive' || currentState === 'background') {
           global.__mpxAppCbs.hide.forEach((cb) => {
             cb()
           })
-          global.__mpxAppFocusedState.value = 'hide'
+          const navigation = getFocusedNavigation()
+          if (navigation && hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
+            global.__mpxPageStatusMap[navigation.pageId] = 'hide'
+          }
         }
       })
 
@@ -130,7 +173,10 @@ export default function createApp (option, config = {}) {
         const orientation = getOrientation(window)
         if (orientation === lastOrientation) return
         lastOrientation = orientation
-        global.__mpxAppFocusedState.value = `resize${count++}`
+        const navigation = getFocusedNavigation()
+        if (navigation && hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
+          global.__mpxPageStatusMap[navigation.pageId] = `resize${count++}`
+        }
       })
       return () => {
         changeSubscription && changeSubscription.remove()
@@ -138,26 +184,41 @@ export default function createApp (option, config = {}) {
       }
     }, [])
 
+    const { initialRouteName, initialParams } = initialRouteRef.current
+    const headerBackImageProps = Mpx.config.rnConfig.headerBackImageProps || null
+    const navScreenOpts = {
+      gestureEnabled: true,
+      // 7.x替换headerBackTitleVisible
+      // headerBackButtonDisplayMode: 'minimal',
+      headerBackTitleVisible: false,
+      // 安卓上会出现初始化时闪现导航条的问题
+      headerShown: false
+    }
+    if (headerBackImageProps) {
+      navScreenOpts.headerBackImage = () => {
+        return createElement(Image, headerBackImageProps)
+      }
+    }
     return createElement(SafeAreaProvider,
       null,
       createElement(NavigationContainer,
         {
-          ref: navigationRef,
           onStateChange,
           onUnhandledAction
         },
         createElement(Stack.Navigator,
           {
-            initialRouteName: firstPage
+            initialRouteName,
+            screenOptions: navScreenOpts
           },
-          ...pageScreens
+          ...getPageScreens(initialRouteName, initialParams)
         )
       )
     )
   })
 
   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]
@@ -165,4 +226,11 @@ export default function createApp (option, config = {}) {
     }
     return []
   }
+
+  global.setCurrentPageStatus = function (status) {
+    const navigation = getFocusedNavigation()
+    if (navigation && hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
+      global.__mpxPageStatusMap[navigation.pageId] = status
+    }
+  }
 }

package/src/platform/createApp.js

@@ -3,10 +3,11 @@ import mergeOptions from '../core/mergeOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
 import { makeMap, spreadProp, isBrowser } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
-import * as webLifecycle from '../platform/patch/web/lifecycle'
+import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
+import { initAppProvides } from './export/inject'
 
-const webAppHooksMap = makeMap(mergeLifecycle(webLifecycle.LIFECYCLE).app)
+const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
 function filterOptions (options, appData) {
   const newOptions = {}
@@ -14,7 +15,7 @@ function filterOptions (options, appData) {
     if (builtInKeysMap[key]) {
       return
     }
-    if (__mpx_mode__ === 'web' && !webAppHooksMap[key]) {
+    if (__mpx_mode__ === 'web' && !appHooksMap[key] && key !== 'provide') {
       appData[key] = options[key]
     } else {
       newOptions[key] = options[key]
@@ -46,11 +47,6 @@ export default function createApp (option, config = {}) {
         }
         global.__mpxEnterOptions = options
         this.$options.onLaunch && this.$options.onLaunch.call(this, options)
-        global.__mpxAppCbs = global.__mpxAppCbs || {
-          show: [],
-          hide: [],
-          error: []
-        }
         if (isBrowser) {
           if (this.$options.onShow) {
             this.$options.onShow.call(this, options)
@@ -62,6 +58,9 @@ export default function createApp (option, config = {}) {
           if (this.$options.onError) {
             global.__mpxAppCbs.error.push(this.$options.onError.bind(this))
           }
+          if (this.$options.onUnhandledRejection) {
+            global.__mpxAppCbs.rejection.push(this.$options.onUnhandledRejection.bind(this))
+          }
         }
       }
     })
@@ -87,6 +86,7 @@ export default function createApp (option, config = {}) {
       return appData
     }
   } else {
+    initAppProvides(rawOptions)
     defaultOptions.onAppInit && defaultOptions.onAppInit()
     const ctor = config.customCtor || global.currentCtor || App
     ctor(defaultOptions)

package/src/platform/env/event.js

@@ -0,0 +1,108 @@
+import { isBrowser } from '@mpxjs/utils'
+
+function extendEvent (e, extendObj = {}) {
+  Object.keys(extendObj).forEach((key) => {
+    Object.defineProperty(e, key, {
+      value: extendObj[key],
+      enumerable: true,
+      configurable: true,
+      writable: true
+    })
+  })
+}
+
+function MpxEvent (layer) {
+  this.targetElement = null
+  this.touches = []
+  this.touchStartX = 0
+  this.touchStartY = 0
+  this.startTimer = null
+  this.needTap = true
+  this.isTouchDevice = document && ('ontouchstart' in document.documentElement)
+
+  this.onTouchStart = (event) => {
+    if (event.targetTouches?.length > 1) {
+      return true
+    }
+    this.touches = event.targetTouches
+    this.targetElement = event.target
+    this.needTap = true
+    this.startTimer = null
+    this.touchStartX = this.touches[0].pageX
+    this.touchStartY = this.touches[0].pageY
+    this.startTimer = setTimeout(() => {
+      this.needTap = false
+      this.sendEvent(this.targetElement, 'longpress', event)
+      this.sendEvent(this.targetElement, 'longtap', event)
+    }, 350)
+  }
+
+  this.onTouchMove = (event) => {
+    const touch = event.changedTouches[0]
+    if (Math.abs(touch.pageX - this.touchStartX) > 1 || Math.abs(touch.pageY - this.touchStartY) > 1) {
+      this.needTap = false
+      this.startTimer && clearTimeout(this.startTimer)
+      this.startTimer = null
+    }
+  }
+
+  this.onTouchEnd = (event) => {
+    if (event.targetTouches?.length > 1) {
+      return true
+    }
+    this.startTimer && clearTimeout(this.startTimer)
+    this.startTimer = null
+    if (this.needTap) {
+      this.sendEvent(this.targetElement, 'tap', event)
+    }
+  }
+
+  this.onClick = (event) => {
+    this.targetElement = event.target
+    this.sendEvent(this.targetElement, 'tap', event)
+  }
+  this.sendEvent = (targetElement, type, event) => {
+    const touchEvent = new CustomEvent(type, {
+      bubbles: true,
+      cancelable: true
+    })
+    const changedTouches = event.changedTouches || []
+    extendEvent(touchEvent, {
+      timeStamp: event.timeStamp,
+      changedTouches,
+      touches: changedTouches,
+      detail: {
+        // pc端点击事件可能没有changedTouches，所以直接从 event中取
+        x: changedTouches[0]?.pageX || event.pageX || 0,
+        y: changedTouches[0]?.pageY || event.pageY || 0
+      }
+    })
+    targetElement && targetElement.dispatchEvent(touchEvent)
+  }
+
+  this.addListener = () => {
+    if (this.isTouchDevice) {
+      layer.addEventListener('touchstart', this.onTouchStart, true)
+      layer.addEventListener('touchmove', this.onTouchMove, true)
+      layer.addEventListener('touchend', this.onTouchEnd, true)
+    } else {
+      layer.addEventListener('click', this.onClick, true)
+    }
+  }
+  this.addListener()
+}
+
+export function initEvent () {
+  if (isBrowser && !global.__mpxCreatedEvent) {
+    global.__mpxCreatedEvent = true
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+      // eslint-disable-next-line no-new
+      new MpxEvent(document.body)
+    } else {
+      document.addEventListener('DOMContentLoaded', function () {
+        // eslint-disable-next-line no-new
+        new MpxEvent(document.body)
+      }, false)
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+import { createI18n } from '../builtInMixins/i18nMixin'
+
+export function init (Mpx) {
+  global.__mpx = Mpx
+  global.__mpxAppCbs = global.__mpxAppCbs || {
+    show: [],
+    hide: [],
+    error: [],
+    rejection: []
+  }
+  if (global.i18n) {
+    Mpx.i18n = createI18n(global.i18n)
+  }
+  initGlobalErrorHandling()
+}
+
+function initGlobalErrorHandling () {
+  if (global.ErrorUtils) {
+    const defaultHandler = global.ErrorUtils.getGlobalHandler()
+    global.ErrorUtils.setGlobalHandler((error, isFatal) => {
+      if (global.__mpxAppCbs && global.__mpxAppCbs.error && global.__mpxAppCbs.error.length) {
+        global.__mpxAppCbs.error.forEach((cb) => {
+          cb(error)
+        })
+      } else if (defaultHandler) {
+        defaultHandler(error, isFatal)
+      } else {
+        console.error(`${error.name}: ${error.message}\n`)
+      }
+    })
+  }
+
+  const rejectionTrackingOptions = {
+    allRejections: true,
+    onUnhandled (id, error) {
+      if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
+        global.__mpxAppCbs.rejection.forEach((cb) => {
+          cb(error, id)
+        })
+      } else {
+        console.warn(`UNHANDLED PROMISE REJECTION (id: ${id}): ${error}\n`)
+      }
+    }
+  }
+
+  if (global?.HermesInternal?.hasPromise?.()) {
+    global.HermesInternal?.enablePromiseRejectionTracker?.(rejectionTrackingOptions)
+  } else {
+    require('promise/setimmediate/rejection-tracking').enable(rejectionTrackingOptions)
+  }
+}

package/src/platform/env/index.js

@@ -0,0 +1,8 @@
+import { createI18n } from '../builtInMixins/i18nMixin'
+
+export function init (Mpx) {
+  global.__mpx = Mpx
+  if (global.i18n) {
+    Mpx.i18n = createI18n(global.i18n)
+  }
+}

package/src/platform/env/index.web.js

@@ -0,0 +1,48 @@
+import Vue from 'vue'
+import install from './vuePlugin'
+import { isBrowser, error, warn } from '@mpxjs/utils'
+import { initEvent } from './event'
+
+export function init (Mpx) {
+  global.__mpx = Mpx
+  global.__mpxAppCbs = global.__mpxAppCbs || {
+    show: [],
+    hide: [],
+    error: [],
+    rejection: []
+  }
+  Mpx.__vue = Vue
+  Vue.use(install)
+  initEvent()
+  initGlobalErrorHandling()
+}
+
+function initGlobalErrorHandling () {
+  Vue.config.errorHandler = (e, vm, info) => {
+    error(`Unhandled error occurs${info ? ` during execution of [${info}]` : ''}!`, vm?.__mpxProxy?.options.mpxFileResource, e)
+  }
+  Vue.config.warnHandler = (msg, vm, trace) => {
+    warn(msg, vm?.__mpxProxy?.options.mpxFileResource, trace)
+  }
+
+  if (isBrowser) {
+    window.addEventListener('error', (event) => {
+      if (global.__mpxAppCbs && global.__mpxAppCbs.error && global.__mpxAppCbs.error.length) {
+        global.__mpxAppCbs.error.forEach((cb) => {
+          cb(event.error)
+        })
+      } else {
+        console.error(`${event.type}: ${event.message}\n`)
+      }
+    })
+    window.addEventListener('unhandledrejection', (event) => {
+      if (global.__mpxAppCbs && global.__mpxAppCbs.rejection && global.__mpxAppCbs.rejection.length) {
+        global.__mpxAppCbs.rejection.forEach((cb) => {
+          cb(event.reason, event.promise)
+        })
+      } else {
+        console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}\n`)
+      }
+    })
+  }
+}

package/src/{external → platform/env}/vuePlugin.js

@@ -1,7 +1,7 @@
 import { walkChildren, parseSelector, error, hasOwn, collectDataset } from '@mpxjs/utils'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
 import { EffectScope } from 'vue'
-import { PausedState } from '../helper/const'
+import { PausedState } from '../../helper/const'
 
 const hackEffectScope = () => {
   EffectScope.prototype.pause = function () {

package/src/platform/export/index.js

@@ -42,3 +42,8 @@ export {
 export {
   useI18n
 } from '../../platform/builtInMixins/i18nMixin'
+
+export {
+  provide,
+  inject
+} from './inject'

package/src/platform/export/index.web.js

@@ -27,7 +27,9 @@ export {
   // effectScope
   effectScope,
   getCurrentScope,
-  onScopeDispose
+  onScopeDispose,
+  provide,
+  inject
 } from 'vue'
 
 export {