@mpxjs/core 2.9.73 → 2.10.1

package/@types/global.d.ts

@@ -1,5 +1,5 @@
 // declaration for mpx mode
-declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd'
+declare let __mpx_mode__: 'wx' | 'ali' | 'swan' | 'qq' | 'tt' | 'web' | 'dd' | 'qa' | 'jd' | 'android' | 'ios' | 'harmony'
 
 // declaration for mpx env
 declare let __mpx_env__: string

package/@types/index.d.ts

@@ -266,7 +266,7 @@ interface MpxConfig {
   observeClassInstance: boolean | Array<AnyConstructor>
   errorHandler: (msg: String, location: String, e: Error) => any | null
   warnHandler: (msg: String, location: String, e: Error) => any | null
-  proxyEventHandler: (e: WechatMiniprogram.CustomEvent) => any | null
+  proxyEventHandler: (e: WechatMiniprogram.CustomEvent, target: ComponentIns<{}, {}, {}, {}, []>) => any | null
   setDataHandler: (data: object, target: ComponentIns<{}, {}, {}, {}, []>) => any | null
   forceFlushSync: boolean,
   webRouteConfig: object,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.73",
+  "version": "2.10.1",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,24 +19,25 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.73",
+    "@mpxjs/utils": "^2.10.0",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
   "peerDependencies": {
-    "@d11/react-native-fast-image": "^8.6.12",
+    "@d11/react-native-fast-image": "*",
     "@mpxjs/api-proxy": "^2.9.0",
     "@mpxjs/store": "^2.9.0",
-    "@react-navigation/native": "^7.0.3",
-    "@react-navigation/stack": "^7.0.4",
+    "@react-navigation/native": "*",
+    "@react-navigation/native-stack": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-gesture-handler": "^2.19.0",
-    "react-native-linear-gradient": "^2.8.3",
-    "react-native-reanimated": "^3.15.2",
-    "react-native-safe-area-context": "^4.14.0",
-    "react-native-screens": "^4.1.0",
-    "react-native-webview": "^13.10.5",
+    "react-native-gesture-handler": "*",
+    "react-native-linear-gradient": "*",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-screens": "*",
+    "react-native-video": "*",
+    "react-native-webview": "*",
     "vue": "^2.7.10",
     "vue-demi": "^0.14.6",
     "vue-i18n": "^8.27.2",
@@ -67,7 +68,7 @@
     "@react-navigation/native": {
       "optional": true
     },
-    "@react-navigation/stack": {
+    "@react-navigation/native-stack": {
       "optional": true
     },
     "react-native-safe-area-context": {
@@ -87,6 +88,9 @@
     },
     "@d11/react-native-fast-image": {
       "optional": true
+    },
+    "react-native-video": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -105,5 +109,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "296482bcb03ab01081a96dcb41ce37df393c3281"
+  "gitHead": "7e4f9ab5528f1ab0ae08fdfad1bfbbb445088848"
 }

package/src/observer/scheduler.js

@@ -1,4 +1,4 @@
-import { warn, isArray, callWithErrorHandling, isDev } from '@mpxjs/utils'
+import { warn, isArray, callWithErrorHandling, isDev, isReact } from '@mpxjs/utils'
 import Mpx from '../index'
 
 let isFlushing = false
@@ -47,6 +47,14 @@ function findInsertionIndex (id) {
 }
 
 export function nextTick (fn) {
+  if (isReact) {
+    const p = new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(fn && fn.call(this))
+      })
+    })
+    return p
+  }
   const p = currentFlushPromise || resolvedPromise
   return fn ? p.then(this ? fn.bind(this) : fn) : p
 }

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

@@ -6,7 +6,7 @@ export default function proxyEventMixin () {
     __invoke (rawEvent, eventConfig = []) {
       if (typeof Mpx.config.proxyEventHandler === 'function') {
         try {
-          Mpx.config.proxyEventHandler(rawEvent)
+          Mpx.config.proxyEventHandler(rawEvent, this)
         } catch (e) {
         }
       }

package/src/platform/builtInMixins/proxyEventMixin.js

@@ -12,7 +12,7 @@ export default function proxyEventMixin () {
     __invoke ($event) {
       if (typeof Mpx.config.proxyEventHandler === 'function') {
         try {
-          Mpx.config.proxyEventHandler($event)
+          Mpx.config.proxyEventHandler($event, this)
         } catch (e) {
         }
       }

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

@@ -23,7 +23,7 @@ export default function proxyEventMixin () {
       __invoke (rawEvent, eventConfig = []) {
         if (typeof Mpx.config.proxyEventHandler === 'function') {
           try {
-            Mpx.config.proxyEventHandler(rawEvent)
+            Mpx.config.proxyEventHandler(rawEvent, this)
           } catch (e) {}
         }
         const location = this.__mpxProxy.options.mpxFileResource

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

@@ -4,6 +4,7 @@ import { createSelectorQuery } from '@mpxjs/api-proxy'
 export default function getRefsMixin () {
   return {
     [BEFORECREATE] () {
+      this.__refCache = {}
       this.__refs = {}
       this.$refs = {}
       this.__getRefs()
@@ -26,21 +27,30 @@ export default function getRefsMixin () {
           })
         })
       },
-      __getRefVal (type, selectorsConf) {
-        return (instance) => {
-          if (instance) {
+      __getRefVal (type, selectorsConf, refFnId) {
+        if (!this.__refCache[refFnId]) {
+          this.__refCache[refFnId] = (instance) => {
             selectorsConf.forEach((item = []) => {
               const [prefix, selectors = ''] = item
               if (selectors) {
                 selectors.trim().split(/\s+/).forEach(selector => {
                   const refKey = prefix + selector
+                  const refVal = { type, instance, refFnId }
                   this.__refs[refKey] = this.__refs[refKey] || []
-                  this.__refs[refKey].push({ type, instance })
+                  if (instance) { // mount
+                    this.__refs[refKey].push(refVal)
+                  } else { // unmount
+                    const index = this.__refs[refKey].findIndex(item => item.refFnId === refFnId)
+                    if (index > -1) {
+                      this.__refs[refKey].splice(index, 1)
+                    }
+                  }
                 })
               }
             })
           }
         }
+        return this.__refCache[refFnId]
       },
       __selectRef (selector, refType, all = false) {
         const splitedSelector = selector.match(/(#|\.)?[^.#]+/g) || []

package/src/platform/createApp.ios.js

@@ -6,7 +6,6 @@ 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 { initAppProvides } from './export/inject'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
@@ -182,19 +181,20 @@ export default function createApp (options) {
     }, [])
 
     const { initialRouteName, initialParams } = initialRouteRef.current
-    const headerBackImageProps = Mpx.config.rnConfig.headerBackImageProps || null
+    const headerBackImageSource = Mpx.config.rnConfig.headerBackImageSource || null
     const navScreenOpts = {
       // 7.x替换headerBackTitleVisible
       // headerBackButtonDisplayMode: 'minimal',
       headerBackTitleVisible: false,
       // 安卓上会出现初始化时闪现导航条的问题
-      headerShown: false
+      headerShown: false,
+      // 隐藏导航下的那条线
+      headerShadowVisible: false
     }
-    if (headerBackImageProps) {
-      navScreenOpts.headerBackImage = () => {
-        return createElement(Image, headerBackImageProps)
-      }
+    if (headerBackImageSource) {
+      navScreenOpts.headerBackImageSource = headerBackImageSource
     }
+
     return createElement(SafeAreaProvider,
       null,
       createElement(NavigationContainer,

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

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useState, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, Fragment, cloneElement, createContext } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, Fragment, cloneElement, createContext } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../observer/effect'
 import { watch } from '../../observer/watch'
@@ -10,6 +10,7 @@ import mergeOptions from '../../core/mergeOptions'
 import { queueJob, hasPendingJob } from '../../observer/scheduler'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
 import { IntersectionObserverContext, RouteContext, KeyboardAvoidContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
+import KeyboardAvoidingView from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/KeyboardAvoidingView'
 
 const ProviderContext = createContext(null)
 
@@ -44,7 +45,8 @@ function createEffect (proxy, components) {
   const getComponent = (tagName) => {
     if (!tagName) return null
     if (tagName === 'block') return Fragment
-    return components[tagName] || getByPath(ReactNative, tagName)
+    const appComponents = global.__getAppComponents?.() || {}
+    return components[tagName] || appComponents[tagName] || getByPath(ReactNative, tagName)
   }
   const innerCreateElement = (type, ...rest) => {
     if (!type) return null
@@ -115,7 +117,6 @@ const instanceProto = {
     return createIntersectionObserver(this, opt, this.__intersectionCtx)
   },
   __resetInstance () {
-    this.__refs = {}
     this.__dispatchedSlotSet = new WeakSet()
   },
   __iter (val, fn) {
@@ -442,7 +443,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     const instanceRef = useRef(null)
     const propsRef = useRef(null)
     const intersectionCtx = useContext(IntersectionObserverContext)
-    const pageId = useContext(RouteContext)
+    const { pageId } = useContext(RouteContext) || {}
     const parentProvides = useContext(ProviderContext)
     let relation = null
     if (hasDescendantRelation || hasAncestorRelation) {
@@ -566,33 +567,27 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   }
 
   if (type === 'page') {
-    const { Provider, useSafeAreaInsets, GestureHandlerRootView } = global.__navigationHelper
+    const { PortalHost, useSafeAreaInsets, GestureHandlerRootView, useHeaderHeight } = global.__navigationHelper
     const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
     const Page = ({ navigation, route }) => {
-      const [enabled, setEnabled] = useState(true)
       const currentPageId = useMemo(() => ++pageId, [])
       const intersectionObservers = useRef({})
       usePageStatus(navigation, currentPageId)
-
       useLayoutEffect(() => {
         const isCustom = pageConfig.navigationStyle === 'custom'
-        navigation.setOptions({
+        navigation.setOptions(Object.assign({
           headerShown: !isCustom,
           title: pageConfig.navigationBarTitleText || '',
           headerStyle: {
             backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
           },
-          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)
-        }
+          headerTintColor: pageConfig.navigationBarTextStyle || 'white',
+          statusBarTranslucent: true
+        }, __mpx_mode__ === 'android' ? { statusBarStyle: pageConfig.statusBarStyle || 'light' } : {}))
       }, [])
 
       const rootRef = useRef(null)
+      const keyboardAvoidRef = useRef({ cursorSpacing: 0, ref: null })
       const onLayout = useCallback(() => {
         rootRef.current?.measureInWindow((x, y, width, height) => {
           navigation.layout = { x, y, width, height }
@@ -600,34 +595,34 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       }, [])
 
       const withKeyboardAvoidingView = (element) => {
-        if (__mpx_mode__ === 'ios') {
-          return createElement(KeyboardAvoidContext.Provider,
+        return createElement(KeyboardAvoidContext.Provider,
+          {
+            value: keyboardAvoidRef
+          },
+          createElement(KeyboardAvoidingView,
             {
-              value: setEnabled
-            },
-            createElement(ReactNative.KeyboardAvoidingView,
-              {
-                style: {
-                  flex: 1
-                },
-                contentContainerStyle: {
-                  flex: 1
-                },
-                behavior: 'position',
-                enabled
+              style: {
+                flex: 1
               },
-              element
-            )
+              contentContainerStyle: {
+                flex: 1
+              }
+            },
+            element
           )
-        }
-        return element
+        )
       }
 
       navigation.insets = useSafeAreaInsets()
 
       return createElement(GestureHandlerRootView,
         {
-          style: {
+          // https://github.com/software-mansion/react-native-reanimated/issues/6639 因存在此问题，iOS在页面上进行定宽来暂时规避
+          style: __mpx_mode__ === 'ios' && pageConfig.navigationStyle !== 'custom'
+          ? {
+            height: ReactNative.Dimensions.get('screen').height - useHeaderHeight()
+          }
+          : {
             flex: 1
           }
         },
@@ -643,13 +638,16 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
             },
             createElement(RouteContext.Provider,
               {
-                value: currentPageId
+                value: {
+                  pageId: currentPageId,
+                  navigation
+                }
               },
               createElement(IntersectionObserverContext.Provider,
                 {
                   value: intersectionObservers.current
                 },
-                createElement(Provider,
+                createElement(PortalHost,
                   null,
                   createElement(defaultOptions,
                     {

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

@@ -92,8 +92,8 @@ export function getDefaultOptions ({ type, rawOptions = {} }) {
         this.__mpxProxy.callHook(UNMOUNTED)
       }
     },
-    serverPrefetch () {
-      if (this.__mpxProxy) return this.__mpxProxy.callHook(SERVERPREFETCH)
+    serverPrefetch (...args) {
+      if (this.__mpxProxy) return this.__mpxProxy.callHook(SERVERPREFETCH, args)
     }
   }]
   // 为了在builtMixin中可以使用某些rootMixin实现的特性（如数据响应等），此处builtInMixin在rootMixin之后执行，但是当builtInMixin使用存在对应内建生命周期的目标平台声明周期写法时，可能会出现用户生命周期比builtInMixin中的生命周期先执行的情况，为了避免这种情况发生，builtInMixin应该尽可能使用内建生命周期来编写