@mpxjs/core 2.9.65 → 2.9.67

package/@types/global.d.ts

@@ -4,6 +4,8 @@ declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | '
 // declaration for mpx env
 declare let __mpx_env__: string
 
+declare const Mixin: WechatMiniprogram.Behavior.Constructor
+
 // Wildcard module declarations for ?resolve case
 declare module '*?resolve' {
   const resourcePath: string

package/@types/index.d.ts

@@ -137,6 +137,11 @@ interface ComponentOpt<D extends Data, P extends Properties, C, M extends Method
 
   initData?: Record<string, any>
 
+  provide?: Record<string, any> | (() => Record<string, any>)
+  inject?:
+    | { [key: string]: string | Symbol | { from?: string | Symbol; default?: any } }
+    | Array<string>
+
   [index: string]: any
 }
 
@@ -259,13 +264,15 @@ interface MpxConfig {
   ignoreWarning: boolean | string | RegExp | ((msg: string, location: string, e: Error) => boolean)
   ignoreProxyWhiteList: Array<string>
   observeClassInstance: boolean | Array<AnyConstructor>
-  errorHandler: (e: Error, target: ComponentIns<{}, {}, {}, {}, []>, hookName: string) => any | null
+  errorHandler: (msg: String, location: String, e: Error) => any | null
+  warnHandler: (msg: String, location: String, e: Error) => any | null
   proxyEventHandler: (e: WechatMiniprogram.CustomEvent) => any | null
   setDataHandler: (data: object, target: ComponentIns<{}, {}, {}, {}, []>) => any | null
   forceFlushSync: boolean,
   webRouteConfig: object,
   webConfig: object,
-  webviewConfig?: WebviewConfig
+  webviewConfig: WebviewConfig,
+  rnConfig: object,
 }
 
 type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'
@@ -306,6 +313,8 @@ export interface Mpx {
 
   delete: typeof del
 
+  provide: typeof provide
+
   config: MpxConfig
 
   i18n: {
@@ -570,6 +579,13 @@ export function onScopeDispose (fn: () => void): void
 export function set<T extends object> (target: T, key: string | number, value: any): void
 export function del<T extends object> (target: T, key: keyof T): void
 
+// provide & inject
+export declare function provide<T>(key: InjectionKey<T> | string | number, value: T): void;
+export declare function inject<T>(key: InjectionKey<T> | string): T | undefined;
+export declare function inject<T>(key: InjectionKey<T> | string, defaultValue: T, treatDefaultAsFactory?: false): T;
+export declare function inject<T>(key: InjectionKey<T> | string, defaultValue: T | (() => T), treatDefaultAsFactory: true): T;
+export declare interface InjectionKey<T> extends Symbol {}
+
 // nextTick
 export function nextTick (fn: () => any): void
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.65",
+  "version": "2.9.67",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.65",
+    "@mpxjs/utils": "^2.9.67",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -97,5 +97,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "24efa90e90b4d42c285ca61739cb9e4d0696976c"
+  "gitHead": "b23d3850c16543c5998811b8d1d8e6ee7988c0f8"
 }

package/src/core/mergeOptions.js

@@ -354,7 +354,7 @@ function transformHOOKS (options) {
     const componentHooksMap = makeMap(convertRule.lifecycle.component)
     for (const key in options) {
       // 使用Component创建page实例，页面专属生命周期&自定义方法需写在methods内部
-      if (typeof options[key] === 'function' && key !== 'dataFn' && key !== 'setup' && !componentHooksMap[key]) {
+      if (typeof options[key] === 'function' && key !== 'dataFn' && key !== 'setup' && key !== 'provide' && !componentHooksMap[key]) {
         if (!options.methods) options.methods = {}
         options.methods[key] = options[key]
         delete options[key]

package/src/core/proxy.js

@@ -8,10 +8,12 @@ import Mpx from '../index'
 import {
   noop,
   type,
+  isArray,
   isFunction,
   isObject,
   isEmptyObject,
   isPlainObject,
+  isWeb,
   doGetByPath,
   getByPath,
   setByPath,
@@ -25,6 +27,7 @@ import {
   processUndefined,
   getFirstKey,
   callWithErrorHandling,
+  wrapMethodsWithErrorHandling,
   warn,
   error,
   getEnvObj
@@ -47,6 +50,7 @@ import {
 } from './innerLifecycle'
 import contextMap from '../dynamic/vnode/context'
 import { getAst } from '../dynamic/astCache'
+import { inject, provide } from '../platform/export/apiInject'
 
 let uid = 0
 
@@ -106,6 +110,7 @@ export default class MpxProxy {
     this.uid = uid++
     this.name = options.name || ''
     this.options = options
+    this.ignoreReactivePattern = this.options.options?.ignoreReactivePattern
     // beforeCreate -> created -> mounted -> unmounted
     this.state = BEFORECREATE
     this.ignoreProxyMap = makeMap(Mpx.config.ignoreProxyWhiteList)
@@ -135,6 +140,21 @@ export default class MpxProxy {
     this.initApi()
   }
 
+  processIgnoreReactive (obj) {
+    if (this.ignoreReactivePattern && isObject(obj)) {
+      Object.keys(obj).forEach((key) => {
+        if (this.ignoreReactivePattern.test(key)) {
+          Object.defineProperty(obj, key, {
+            enumerable: true,
+            // set configurable to false to skip defineReactive
+            configurable: false
+          })
+        }
+      })
+    }
+    return obj
+  }
+
   created () {
     if (__mpx_dynamic_runtime__) {
       // 缓存上下文，在 destoryed 阶段删除
@@ -144,11 +164,15 @@ export default class MpxProxy {
       // web中BEFORECREATE钩子通过vue的beforeCreate钩子单独驱动
       this.callHook(BEFORECREATE)
       setCurrentInstance(this)
+      // 在 props/data 初始化之前初始化 inject
+      this.initInject()
       this.initProps()
       this.initSetup()
       this.initData()
       this.initComputed()
       this.initWatch()
+      // 在 props/data 初始化之后初始化 provide
+      this.initProvide()
       unsetCurrentInstance()
     }
 
@@ -203,11 +227,26 @@ export default class MpxProxy {
       // 页面/组件销毁清除上下文的缓存
       contextMap.remove(this.uid)
     }
+    if (!isWeb && this.options.__type__ === 'page') {
+      // 小程序页面销毁时移除对应的 provide
+      if (isFunction(this.target.getPageId)) {
+        const pageId = this.target.getPageId()
+        const providesMap = global.__mpxProvidesMap
+        if (providesMap.__pages[pageId]) {
+          delete providesMap.__pages[pageId]
+        }
+      }
+    }
     this.callHook(BEFOREUNMOUNT)
     this.scope?.stop()
     if (this.update) this.update.active = false
     this.callHook(UNMOUNTED)
     this.state = UNMOUNTED
+    if (this._intersectionObservers) {
+      this._intersectionObservers.forEach((observer) => {
+        observer.disconnect()
+      })
+    }
   }
 
   isUnmounted () {
@@ -249,14 +288,14 @@ export default class MpxProxy {
     } else {
       this.props = diffAndCloneA(this.target.__getProps(this.options)).clone
     }
-    reactive(this.props)
+    reactive(this.processIgnoreReactive(this.props))
     proxy(this.target, this.props, undefined, false, this.createProxyConflictHandler('props'))
   }
 
   initSetup () {
     const setup = this.options.setup
     if (setup) {
-      const setupResult = callWithErrorHandling(setup, this, 'setup function', [
+      let setupResult = callWithErrorHandling(setup, this, 'setup function', [
         this.props,
         {
           triggerEvent: this.target.triggerEvent ? this.target.triggerEvent.bind(this.target) : noop,
@@ -273,6 +312,7 @@ export default class MpxProxy {
         error(`Setup() should return a object, received: ${type(setupResult)}.`, this.options.mpxFileResource)
         return
       }
+      setupResult = wrapMethodsWithErrorHandling(setupResult, this)
       proxy(this.target, setupResult, undefined, false, this.createProxyConflictHandler('setup result'))
       this.collectLocalKeys(setupResult, (key, val) => !isFunction(val))
     }
@@ -287,7 +327,7 @@ export default class MpxProxy {
     if (isFunction(dataFn)) {
       Object.assign(this.data, callWithErrorHandling(dataFn.bind(this.target), this, 'data function'))
     }
-    reactive(this.data)
+    reactive(this.processIgnoreReactive(this.data))
     proxy(this.target, this.data, undefined, false, this.createProxyConflictHandler('data'))
     this.collectLocalKeys(this.data)
   }
@@ -329,6 +369,55 @@ export default class MpxProxy {
     }
   }
 
+  initProvide () {
+    const provideOpt = this.options.provide
+    if (provideOpt) {
+      const provided = isFunction(provideOpt)
+        ? callWithErrorHandling(provideOpt.bind(this.target), this, 'provide function')
+        : provideOpt
+      if (!isObject(provided)) {
+        return
+      }
+      Object.keys(provided).forEach(key => {
+        provide(key, provided[key])
+      })
+    }
+  }
+
+  initInject () {
+    const injectOpt = this.options.inject
+    if (injectOpt) {
+      this.resolveInject(injectOpt)
+    }
+  }
+
+  resolveInject (injectOpt) {
+    if (isArray(injectOpt)) {
+      const normalized = {}
+      for (let i = 0; i < injectOpt.length; i++) {
+        normalized[injectOpt[i]] = injectOpt[i]
+      }
+      injectOpt = normalized
+    }
+    const injectObj = {}
+    for (const key in injectOpt) {
+      const opt = injectOpt[key]
+      let injected
+      if (isObject(opt)) {
+        if ('default' in opt) {
+          injected = inject(opt.from || key, opt.default, true)
+        } else {
+          injected = inject(opt.from || key)
+        }
+      } else {
+        injected = inject(opt)
+      }
+      injectObj[key] = injected
+    }
+    proxy(this.target, injectObj, undefined, false, this.createProxyConflictHandler('inject'))
+    this.collectLocalKeys(injectObj)
+  }
+
   watch (source, cb, options) {
     const target = this.target
     const getter = isString(source)
@@ -419,7 +508,7 @@ export default class MpxProxy {
       if (hasOwn(renderData, key)) {
         const data = renderData[key]
         const firstKey = getFirstKey(key)
-        if (!this.localKeysMap[firstKey]) {
+        if (!this.localKeysMap[firstKey] || (this.ignoreReactivePattern && this.ignoreReactivePattern.test(firstKey))) {
           continue
         }
         // 外部clone，用于只需要clone的场景

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

@@ -1,4 +1,4 @@
-import { isObject, isArray, dash2hump, isFunction, cached } from '@mpxjs/utils'
+import { isObject, isArray, dash2hump, isFunction, cached, getFocusedNavigation } from '@mpxjs/utils'
 import { Dimensions, StyleSheet } from 'react-native'
 
 function rpx (value) {
@@ -12,7 +12,8 @@ function vw (value) {
   return value * width / 100
 }
 function vh (value) {
-  const { height } = Dimensions.get('screen')
+  const navigation = getFocusedNavigation()
+  const height = navigation?.layout?.height || Dimensions.get('screen').height
   return value * height / 100
 }
 

package/src/platform/createApp.ios.js

@@ -1,6 +1,6 @@
 import transferOptions from '../core/transferOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp } from '@mpxjs/utils'
+import { makeMap, spreadProp, parseUrlQuery } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import * as wxLifecycle from '../platform/patch/wx/lifecycle'
 import Mpx from '../index'
@@ -40,7 +40,7 @@ function createAppInstance (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 +51,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
@@ -81,26 +90,48 @@ export default function createApp (option, config = {}) {
     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) {
@@ -113,7 +144,7 @@ export default function createApp (option, config = {}) {
       const changeSubscription = ReactNative.AppState.addEventListener('change', (currentState) => {
         if (currentState === 'active') {
           global.__mpxAppCbs.show.forEach((cb) => {
-            cb(options)
+            cb(global.__mpxEnterOptions)
           })
           global.__mpxAppFocusedState.value = 'show'
         } else if (currentState === 'inactive') {
@@ -138,19 +169,22 @@ export default function createApp (option, config = {}) {
       }
     }, [])
 
+    const { initialRouteName, initialParams } = initialRouteRef.current
     return createElement(SafeAreaProvider,
       null,
       createElement(NavigationContainer,
         {
-          ref: navigationRef,
           onStateChange,
           onUnhandledAction
         },
         createElement(Stack.Navigator,
           {
-            initialRouteName: firstPage
+            initialRouteName,
+            headerBackButtonDisplayMode: 'minimal',
+            headerMode: 'float',
+            gestureEnabled: true
           },
-          ...pageScreens
+          ...getPageScreens(initialRouteName, initialParams)
         )
       )
     )

package/src/platform/createApp.js

@@ -5,6 +5,7 @@ import { makeMap, spreadProp, isBrowser } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import * as webLifecycle from '../platform/patch/web/lifecycle'
 import Mpx from '../index'
+import { initAppProvides } from './export/apiInject'
 
 const webAppHooksMap = makeMap(mergeLifecycle(webLifecycle.LIFECYCLE).app)
 
@@ -14,7 +15,7 @@ function filterOptions (options, appData) {
     if (builtInKeysMap[key]) {
       return
     }
-    if (__mpx_mode__ === 'web' && !webAppHooksMap[key]) {
+    if (__mpx_mode__ === 'web' && !webAppHooksMap[key] && key !== 'provide') {
       appData[key] = options[key]
     } else {
       newOptions[key] = options[key]
@@ -87,6 +88,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/export/apiInject.js

@@ -0,0 +1,68 @@
+import { callWithErrorHandling, isFunction, isObject, warn } from '@mpxjs/utils'
+import { currentInstance } from '../../core/proxy'
+
+const providesMap = {
+  /** 全局 scope */
+  __app: Object.create(null),
+  /** 页面 scope */
+  __pages: Object.create(null)
+}
+
+global.__mpxProvidesMap = providesMap
+
+/** @internal createApp() 初始化应用层 scope provide */
+export function initAppProvides (appOptions) {
+  const provideOpt = appOptions.provide
+  if (provideOpt) {
+    const provided = isFunction(provideOpt)
+      ? callWithErrorHandling(provideOpt.bind(appOptions), appOptions, 'createApp provide function')
+      : provideOpt
+    if (isObject(provided)) {
+      providesMap.__app = provided
+    } else {
+      warn('App provides must be an object or a function that returns an object.')
+    }
+  }
+}
+
+function resolvePageId (context) {
+  if (context && isFunction(context.getPageId)) {
+    return context.getPageId()
+  }
+}
+
+function resolvePageProvides (context) {
+  const pageId = resolvePageId(context)
+  return providesMap.__pages[pageId] || (providesMap.__pages[pageId] = Object.create(null))
+}
+
+export function provide (key, value) {
+  const instance = currentInstance
+  if (!instance) {
+    warn('provide() can only be used inside setup().')
+    return
+  }
+  // 小程序无法实现组件父级引用，所以 provide scope 设置为组件所在页面
+  const provides = resolvePageProvides(instance.target)
+  provides[key] = value
+}
+
+export function inject (key, defaultValue, treatDefaultAsFactory = false) {
+  const instance = currentInstance
+  if (!instance) {
+    warn('inject() can only be used inside setup()')
+    return
+  }
+  const provides = resolvePageProvides(instance.target)
+  if (key in provides) {
+    return provides[key]
+  } else if (key in providesMap.__app) {
+    return providesMap.__app[key]
+  } else if (arguments.length > 1) {
+    return treatDefaultAsFactory && isFunction(defaultValue)
+      ? defaultValue.call(instance && instance.target)
+      : defaultValue
+  } else {
+    warn(`injection "${String(key)}" not found.`)
+  }
+}

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

@@ -0,0 +1 @@
+export { provide, inject } from 'vue'

package/src/platform/export/index.js

@@ -1,4 +1,3 @@
-
 export {
   watchEffect,
   watchSyncEffect,
@@ -43,3 +42,8 @@ export {
 export {
   useI18n
 } from '../../platform/builtInMixins/i18nMixin'
+
+export {
+  provide,
+  inject
+} from './apiInject'

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

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

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

@@ -1,7 +1,7 @@
 import MpxProxy from '../../../core/proxy'
 import builtInKeysMap from '../builtInKeysMap'
 import mergeOptions from '../../../core/mergeOptions'
-import { error, diffAndCloneA, hasOwn, noop } from '@mpxjs/utils'
+import { error, diffAndCloneA, hasOwn, noop, wrapMethodsWithErrorHandling } from '@mpxjs/utils'
 
 function transformApiForProxy (context, currentInject) {
   const rawSetData = context.setData.bind(context)
@@ -100,12 +100,25 @@ function filterOptions (options, type) {
       if (!hasOwn(newOptions, 'props')) {
         newOptions.props = Object.assign({}, options.props, options.properties)
       }
-    } else if (key === 'methods' && type === 'page') {
-      Object.assign(newOptions, options[key])
+    } else if (key === 'methods') {
+      const newMethods = wrapMethodsWithErrorHandling(options[key])
+      if (type === 'page') {
+        // 构造器为Page时抽取所有methods方法到顶层
+        Object.assign(newOptions, newMethods)
+      } else {
+        newOptions[key] = newMethods
+      }
+    } else if (key === 'behaviors') {
+      newOptions.mixins = options[key]
     } else {
       newOptions[key] = options[key]
     }
   })
+  if (newOptions.relations) {
+    // ali relations 需要设置 options.relations = true
+    newOptions.options = newOptions.options || {}
+    newOptions.options.relations = true
+  }
   return newOptions
 }
 

package/src/platform/patch/builtInKeysMap.js

@@ -7,6 +7,7 @@ if (__mpx_mode__ === 'web') {
   builtInKeys = [
     'proto',
     'mixins',
+    'initData',
     'mpxCustomKeysForBlend',
     'mpxConvertMode',
     'mpxFileResource',
@@ -20,8 +21,11 @@ if (__mpx_mode__ === 'web') {
     'dataFn',
     'proto',
     'mixins',
+    'initData',
     'watch',
     'computed',
+    'provide',
+    'inject',
     'mpxCustomKeysForBlend',
     'mpxConvertMode',
     'mpxFileResource',

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

@@ -1,14 +1,15 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment, cloneElement } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, 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, error, getByPath, collectDataset, hump2dash } from '@mpxjs/utils'
+import { hasOwn, isFunction, noop, isObject, 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 } from '@mpxjs/api-proxy'
+import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
+import { IntersectionObserverContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
 
 function getSystemInfo () {
   const window = ReactNative.Dimensions.get('window')
@@ -68,7 +69,7 @@ function getRootProps (props) {
   return rootProps
 }
 
-function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId }) {
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx }) {
   const instance = Object.create({
     setData (data, callback) {
       return this.__mpxProxy.forceUpdate(data, { sync: true }, callback)
@@ -183,8 +184,8 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
     createSelectorQuery () {
       return createSelectorQuery().in(this)
     },
-    createIntersectionObserver () {
-      error('createIntersectionObserver is not supported in react native, please use ref instead')
+    createIntersectionObserver (opt) {
+      return createIntersectionObserver(this, opt, intersectionCtx)
     },
     ...rawOptions.methods
   }, {
@@ -346,15 +347,17 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const components = Object.assign({}, rawOptions.components, currentInject.getComponents())
   const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
+  if (rawOptions.methods) rawOptions.methods = wrapMethodsWithErrorHandling(rawOptions.methods)
   const defaultOptions = memo(forwardRef((props, ref) => {
     const instanceRef = useRef(null)
     const propsRef = useRef(null)
+    const intersectionCtx = useContext(IntersectionObserverContext)
     const pageId = useContext(RouteContext)
     propsRef.current = props
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
-      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx })
     }
     const instance = instanceRef.current
     useImperativeHandle(ref, () => {
@@ -363,7 +366,21 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     const proxy = instance.__mpxProxy
 
-    proxy.callHook(REACTHOOKSEXEC)
+    let hooksResult = proxy.callHook(REACTHOOKSEXEC, [props])
+    if (isObject(hooksResult)) {
+      hooksResult = wrapMethodsWithErrorHandling(hooksResult, proxy)
+      if (isFirst) {
+        const onConflict = proxy.createProxyConflictHandler('react hooks result')
+        Object.keys(hooksResult).forEach((key) => {
+          if (key in proxy.target) {
+            onConflict(key)
+          }
+          proxy.target[key] = hooksResult[key]
+        })
+      } else {
+        Object.assign(proxy.target, hooksResult)
+      }
+    }
 
     useEffect(() => {
       if (!isFirst) {
@@ -389,6 +406,9 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     useEffect(() => {
       if (type === 'page') {
+        if (!global.__mpxAppLaunched && global.__mpxAppOnLaunch) {
+          global.__mpxAppOnLaunch(props.navigation)
+        }
         proxy.callHook(ONLOAD, [props.route.params || {}])
       }
       proxy.mounted()
@@ -413,74 +433,88 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     return root
   }))
 
+  if (rawOptions.options?.isCustomText) {
+    defaultOptions.isCustomText = true
+  }
+
   if (type === 'page') {
     const { Provider, useSafeAreaInsets, GestureHandlerRootView } = global.__navigationHelper
     const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
     const Page = ({ navigation, route }) => {
-      const rootRef = useRef(null)
       const currentPageId = useMemo(() => ++pageId, [])
+      const intersectionObservers = useRef({})
       usePageStatus(navigation, currentPageId)
 
       useLayoutEffect(() => {
-        rootRef.current?.measureInWindow((x, y, width, height) => {
-          navigation.layout = { x, y, width, height }
-        })
         const isCustom = pageConfig.navigationStyle === 'custom'
-        let opt = {}
+        const opt = {}
         if (__mpx_mode__ === 'android') {
-          opt = {
-            statusBarTranslucent: isCustom,
-            statusBarStyle: pageConfig.statusBarStyle, // 枚举值 'auto' | 'dark' | 'light' 控制statusbar字体颜色
-            statusBarColor: isCustom ? 'transparent' : pageConfig.statusBarColor // 控制statusbar背景颜色
-          }
-        } else if (__mpx_mode__ === 'ios') {
-          opt = {
-            headerBackTitleVisible: false
-          }
+          // opt = {
+          //   statusBarTranslucent: isCustom,
+          //   statusBarStyle: pageConfig.statusBarStyle, // 枚举值 'auto' | 'dark' | 'light' 控制statusbar字体颜色
+          //   statusBarColor: isCustom ? 'transparent' : pageConfig.statusBarColor // 控制statusbar背景颜色
+          // }
         }
         navigation.setOptions({
           headerShown: !isCustom,
-          headerShadowVisible: false,
-          headerTitle: pageConfig.navigationBarTitleText || '',
+          title: pageConfig.navigationBarTitleText || '',
           headerStyle: {
             backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
           },
-          headerTitleAlign: 'center',
+          // headerTitleAlign: 'center',
           headerTintColor: pageConfig.navigationBarTextStyle || 'white',
           ...opt
         })
       }, [])
 
+      const rootRef = useRef(null)
+      const onLayout = useCallback(() => {
+        rootRef.current?.measureInWindow((x, y, width, height) => {
+          navigation.layout = { x, y, width, height }
+        })
+      }, [])
+
       navigation.insets = useSafeAreaInsets()
 
       return createElement(GestureHandlerRootView,
         {
+          style: {
+            flex: 1
+          }
+        },
+        createElement(ReactNative.View, {
           style: {
             flex: 1,
             backgroundColor: pageConfig.backgroundColor || '#ffffff'
           },
-          ref: rootRef
+          ref: rootRef,
+          onLayout
         },
-        // todo custom portal host for active route
-        createElement(Provider,
-          null,
-          createElement(RouteContext.Provider,
-            {
-              value: currentPageId
-            },
-            createElement(defaultOptions,
+          createElement(Provider,
+            null,
+            createElement(RouteContext.Provider,
               {
-                navigation,
-                route,
-                id: currentPageId
-              }
+                value: currentPageId
+              },
+              createElement(IntersectionObserverContext.Provider,
+                {
+                  value: intersectionObservers.current
+                },
+                createElement(defaultOptions,
+                  {
+                    navigation,
+                    route,
+                    id: currentPageId
+                  }
+                )
+              )
             )
           )
         )
+        // todo custom portal host for active route
       )
     }
     return Page
   }
-
   return defaultOptions
 }

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

@@ -1,6 +1,6 @@
 import builtInKeysMap from '../builtInKeysMap'
 import mergeOptions from '../../../core/mergeOptions'
-import { diffAndCloneA, hasOwn } from '@mpxjs/utils'
+import { diffAndCloneA, hasOwn, wrapMethodsWithErrorHandling } from '@mpxjs/utils'
 import { getCurrentInstance as getCurrentVueInstance } from '../../export/index'
 import MpxProxy, { setCurrentInstance, unsetCurrentInstance } from '../../../core/proxy'
 import {
@@ -27,6 +27,8 @@ function filterOptions (options) {
           )
         }
       }
+    } else if (key === 'methods') {
+      newOptions[key] = wrapMethodsWithErrorHandling(options[key])
     } else {
       newOptions[key] = options[key]
     }
@@ -62,7 +64,7 @@ export function getDefaultOptions ({ type, rawOptions = {} }) {
       }
       const setupRes = rawSetup(props, newContext)
       unsetCurrentInstance(instance.__mpxProxy)
-      return setupRes
+      return wrapMethodsWithErrorHandling(setupRes, instance.__mpxProxy)
     }
   }
   const rootMixins = [{

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

@@ -1,4 +1,4 @@
-import { hasOwn, noop, isFunction } from '@mpxjs/utils'
+import { hasOwn, noop, isFunction, wrapMethodsWithErrorHandling } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
 import builtInKeysMap from '../builtInKeysMap'
 import mergeOptions from '../../../core/mergeOptions'
@@ -23,11 +23,13 @@ function transformProperties (properties) {
     } else {
       newFiled = Object.assign({}, rawFiled)
     }
-    newFiled.observer = function (value) {
+    const rawObserver = rawFiled?.observer
+    newFiled.observer = function (value, oldValue) {
       if (this.__mpxProxy) {
         this[key] = value
         this.__mpxProxy.propsUpdated()
       }
+      rawObserver && rawObserver.call(this, value, oldValue)
     }
     newProps[key] = newFiled
   })
@@ -138,9 +140,14 @@ export function filterOptions (options) {
       if (!hasOwn(newOptions, 'properties')) {
         newOptions.properties = transformProperties(Object.assign({}, options.props, options.properties))
       }
-    } else if (key === 'methods' && options.__pageCtor__) {
-      // 构造器为Page时抽取所有methods方法到顶层
-      Object.assign(newOptions, options[key])
+    } else if (key === 'methods') {
+      const newMethods = wrapMethodsWithErrorHandling(options[key])
+      if (options.__pageCtor__) {
+        // 构造器为Page时抽取所有methods方法到顶层
+        Object.assign(newOptions, newMethods)
+      } else {
+        newOptions[key] = newMethods
+      }
     } else {
       newOptions[key] = options[key]
     }

package/src/runtime/createFactory.js

@@ -6,6 +6,9 @@ const factoryMap = {
 
 module.exports = (type) => (...args) => {
   if (type === 'Behavior') {
+    if (__mpx_mode__ === 'ali') {
+      return Mixin.apply(null, args)
+    }
     if (args[0]) {
       Object.defineProperty(args[0], '__mpx_behaviors_to_mixins__', {
         configurable: true,

package/src/platform/builtInMixins/directiveHelperMixin.android.js

@@ -1,2 +0,0 @@
-import directiveHelperMixin from './directiveHelperMixin.ios'
-export default directiveHelperMixin

package/src/platform/builtInMixins/proxyEventMixin.android.js

@@ -1,2 +0,0 @@
-import proxyEventMixin from './proxyEventMixin.ios'
-export default proxyEventMixin

package/src/platform/builtInMixins/refsMixin.android.js

@@ -1,2 +0,0 @@
-import refsMixin from './refsMixin.ios'
-export default refsMixin

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

@@ -1,2 +0,0 @@
-import styleHelperMixin from './styleHelperMixin.ios'
-export default styleHelperMixin

package/src/platform/createApp.android.js

@@ -1,2 +0,0 @@
-import createApp from './createApp.ios'
-export default createApp

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

@@ -1 +0,0 @@
-export { getDefaultOptions } from './getDefaultOptions.ios'