@mpxjs/core 2.10.7-beta.1 → 2.10.7-beta.11

package/@types/index.d.ts

@@ -7,7 +7,7 @@
 /// <reference path="./global.d.ts" />
 /// <reference path="./node.d.ts" />
 
-import { GetComputedType } from '@mpxjs/store'
+import type { GetComputedType } from '@mpxjs/store'
 
 export * from '@mpxjs/store'
 
@@ -255,11 +255,22 @@ interface AnyConstructor {
   prototype: any
 }
 
-interface WebviewConfig {
+export interface WebviewConfig {
   hostWhitelists?: Array<string>
   apiImplementations?: object
 }
 
+export interface RnConfig {
+  onStateChange?: (state: any) => void
+  parseAppProps?: (props: any) => ({ initialRouteName?: string, initialParams?: any } | undefined | null | void)
+  /**
+   * 外层可能会异常设置此配置，因此加载监听函数内部
+   */
+  disableAppStateListener?: boolean
+  /** 进入页面是否控制回推按钮的展示以及监听回推按钮的点击 */
+  onStackTopBack: () => void
+}
+
 interface MpxConfig {
   useStrictDiff: boolean
   ignoreWarning: boolean | string | RegExp | ((msg: string, location: string, e: Error) => boolean)
@@ -272,8 +283,14 @@ interface MpxConfig {
   forceFlushSync: boolean,
   webRouteConfig: object,
   webConfig: object,
+  /*
+   * 支持两个属性
+   * hostWhitelists Array 类型 支持h5域名白名单安全校验
+   * apiImplementations webview JSSDK接口 例如getlocation
+  */
   webviewConfig: WebviewConfig,
-  rnConfig: object,
+  /** react-native 相关配置，用于挂载事件等，如 onShareAppMessage */
+  rnConfig?: RnConfig,
 }
 
 type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'
@@ -664,9 +681,15 @@ export const SERVERPREFETCH: string
 export const REACTHOOKSEXEC: string
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   const defineProps: (<T extends Properties = {}>(props: T) => Readonly<GetPropsType<T>>) & (<T>() => Readonly<T>)
   const defineOptions: <D extends Data = {}, P extends Properties = {}, C = {}, M extends Methods = {}, Mi extends Array<any> = [], S extends AnyObject = {}, O extends AnyObject = {}> (opt: ThisTypedComponentOpt<D, P, C, M, Mi, S, O>) => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   const defineExpose: <E extends AnyObject = AnyObject>(exposed?: E) => void
   const useContext: () => Context
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   const withDefaults: <Props, Defaults extends InferDefaults<Props>>(props: Props, defaults: Defaults) => PropsWithDefaults<Props, Defaults>
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.7-beta.1",
+  "version": "2.10.7-beta.11",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.10.7 | ^2.10.7-beta.1",
+    "@mpxjs/utils": "^2.10.6 | ^2.10.6-beta.1",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },

package/src/index.js

@@ -115,6 +115,9 @@ function use (plugin, options = {}) {
 
 APIs.use = use
 
+/**
+ * @returns {import('@mpxjs/core').Mpx}
+ */
 function factory () {
   // 作为原型挂载属性的中间层
   function Mpx () {
@@ -125,6 +128,9 @@ function factory () {
   return Mpx
 }
 
+/**
+ * @type {import('@mpxjs/core').Mpx}
+ */
 const Mpx = factory()
 
 Mpx.config = {
@@ -138,7 +144,9 @@ Mpx.config = {
   setDataHandler: null,
   forceFlushSync: false,
   webRouteConfig: {},
-  webConfig: {},
+  webConfig: {
+    disablePageTransition: true // 默认禁用页面切换动画
+  },
   /*
     支持两个属性
     hostWhitelists Array 类型 支持h5域名白名单安全校验

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

@@ -4,7 +4,7 @@ export default function pageRouteMixin (mixinType) {
   if (mixinType === 'page') {
     return {
       [BEFORECREATE] () {
-        const mpxEventChannel = global.__mpxEventChannel
+        const mpxEventChannel = global.__mpxEventChannel || {}
         if (mpxEventChannel.route === this.route) {
           this._eventChannel = mpxEventChannel.eventChannel
         } else {

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

@@ -10,15 +10,13 @@ export function init (Mpx) {
     show: [],
     hide: [],
     error: [],
-    rejection: [],
-    lazyLoad: []
+    rejection: []
   }
   global.__navigationHelper = navigationHelper
   if (global.i18n) {
     Mpx.i18n = createI18n(global.i18n)
   }
   initGlobalErrorHandling()
-  initGlobalLazyLoadHandling()
 }
 
 function initGlobalErrorHandling () {
@@ -65,13 +63,3 @@ function initGlobalErrorHandling () {
     require('promise/setimmediate/rejection-tracking').enable(rejectionTrackingOptions)
   }
 }
-
-function initGlobalLazyLoadHandling () {
-  global.onLazyLoadError = function (error) {
-    if (global.__mpxAppCbs?.lazyLoad?.length) {
-      global.__mpxAppCbs.lazyLoad.forEach((cb) => {
-        cb(error)
-      })
-    }
-  }
-}

package/src/platform/env/nav.js

@@ -95,14 +95,23 @@ export function innerNav ({ pageConfig, navigation }) {
   const safeAreaTop = useSafeAreaInsets()?.top || 0
   // 假设是栈导航，获取栈的长度
   const stackLength = navigation.getState()?.routes?.length
-  // 用于外部注册打开RN容器之前的栈长度
-  const beforeStackLength = Mpx.config?.rnConfig?.beforeStackLength || 0
+  const onStackTopBack = Mpx.config?.rnConfig?.onStackTopBack
+  const isHandleStackTopBack = typeof onStackTopBack === 'function'
 
   // 回退按钮与图标
-  const backElement = stackLength + beforeStackLength > 1
+  const backElement = stackLength > 1 || isHandleStackTopBack
   ? createElement(TouchableOpacity, {
     style: [styles.backButton],
-    onPress: () => { navigation.goBack() }
+    onPress: () => {
+      if (stackLength <= 1) {
+        if (isHandleStackTopBack) {
+          onStackTopBack()
+        }
+        return
+      }
+
+      navigation.goBack()
+    }
   }, createElement(Image, {
     source: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg==' },
     // 回退按钮的颜色与设置的title文案颜色一致

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

@@ -0,0 +1,17 @@
+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 { useHeaderHeight } from '@react-navigation/elements'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+
+export {
+  createNativeStackNavigator,
+  NavigationContainer,
+  useHeaderHeight,
+  StackActions,
+  GestureHandlerRootView,
+  PortalHost,
+  SafeAreaProvider,
+  useSafeAreaInsets
+}

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

@@ -1,14 +1,12 @@
 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 { useHeaderHeight } from '@react-navigation/elements'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 export {
   createNativeStackNavigator,
   NavigationContainer,
-  useHeaderHeight,
   StackActions,
   GestureHandlerRootView,
   PortalHost,

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

@@ -15,7 +15,7 @@ import {
   KeyboardAvoidContext,
   RouteContext
 } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
-import { PortalHost, useSafeAreaInsets } from '../env/navigationHelper'
+import { PortalHost, useSafeAreaInsets, GestureHandlerRootView } from '../env/navigationHelper'
 import { useInnerHeaderHeight } from '../env/nav'
 
 const ProviderContext = createContext(null)
@@ -419,22 +419,6 @@ function usePageStatus (navigation, pageId) {
   }, [navigation])
 }
 
-function usePagePreload (route) {
-  const name = route.name
-  useEffect(() => {
-    setTimeout(() => {
-      const preloadRule = global.__preloadRule || {}
-      const { packages } = preloadRule[name] || {}
-      if (packages?.length > 0) {
-        const downloadChunkAsync = mpxGlobal.__mpx.config?.rnConfig?.downloadChunkAsync
-        if (typeof downloadChunkAsync === 'function') {
-          callWithErrorHandling(() => downloadChunkAsync(packages))
-        }
-      }
-    }, 800)
-  }, [])
-}
-
 const RelationsContext = createContext(null)
 
 const checkRelation = (options) => {
@@ -463,6 +447,8 @@ function getLayoutData (headerHeight) {
   const isLandscape = screenDimensions.height < screenDimensions.width
   const bottomVirtualHeight = isLandscape ? screenDimensions.height - windowDimensions.height : ((screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight) || 0)
   return {
+    x: 0,
+    y: headerHeight,
     left: 0,
     top: headerHeight,
     // 此处必须为windowDimensions.width，在横屏状态下windowDimensions.width才符合预期
@@ -493,15 +479,11 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     }
     const headerHeight = useInnerHeaderHeight(currentPageConfig)
     navigation.layout = getLayoutData(headerHeight)
+    const onLayout = () => {
+      // 当用户处于横屏或者竖屏状态的时候，需要进行layout修正
+      navigation.layout = getLayoutData(headerHeight)
+    }
 
-    useEffect(() => {
-      const dimensionListener = ReactNative.Dimensions.addEventListener('change', ({ screen }) => {
-        navigation.layout = getLayoutData(headerHeight)
-      })
-      return () => dimensionListener?.remove()
-    }, [])
-
-    usePagePreload(route)
     usePageStatus(navigation, currentPageId)
 
     const withKeyboardAvoidingView = (element) => {
@@ -524,38 +506,45 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     }
     // android存在第一次打开insets都返回为0情况，后续会触发第二次渲染后正确
     navigation.insets = useSafeAreaInsets()
-    return withKeyboardAvoidingView(
-      createElement(ReactNative.View,
-        {
-          style: {
-            flex: 1,
-            backgroundColor: currentPageConfig?.backgroundColor || '#fff',
-            // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
-            overflow: 'hidden'
-          },
-          ref: rootRef
-        },
-        createElement(RouteContext.Provider,
+    return createElement(GestureHandlerRootView,
+      {
+        style: {
+          flex: 1
+        }
+      },
+      withKeyboardAvoidingView(
+        createElement(ReactNative.View,
           {
-            value: routeContextValRef.current
+            style: {
+              flex: 1,
+              backgroundColor: currentPageConfig?.backgroundColor || '#fff',
+              // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
+              overflow: 'hidden'
+            },
+            ref: rootRef,
+            onLayout
           },
-          createElement(IntersectionObserverContext.Provider,
+          createElement(RouteContext.Provider,
             {
-              value: intersectionObservers.current
+              value: routeContextValRef.current
             },
-            createElement(PortalHost,
-              null,
-              createElement(WrappedComponent, {
-                ...props,
-                navigation,
-                route,
-                id: currentPageId
-              })
+            createElement(IntersectionObserverContext.Provider,
+              {
+                value: intersectionObservers.current
+              },
+              createElement(PortalHost,
+                null,
+                createElement(WrappedComponent, {
+                  ...props,
+                  navigation,
+                  route,
+                  id: currentPageId
+                })
+              )
             )
           )
         )
-      )
-    )
+      ))
   }
 }
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
@@ -625,6 +614,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     })
 
     usePageEffect(proxy, pageId)
+
     useEffect(() => {
       proxy.mounted()
       return () => {

package/src/platform/patch/getDefaultOptions.web.js

@@ -89,8 +89,8 @@ export function getDefaultOptions ({ type, rawOptions = {} }) {
     },
     destroyed () {
       if (this.__mpxProxy) {
-        this.__mpxProxy.state = UNMOUNTED
         this.__mpxProxy.callHook(UNMOUNTED)
+        this.__mpxProxy.state = UNMOUNTED
       }
     },
     serverPrefetch (...args) {