@mpxjs/core 2.10.17 → 2.10.18-beta.2

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

@@ -3,25 +3,25 @@ import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../observer/effect'
 import { watch } from '../../observer/watch'
 import { del, reactive, set } from '../../observer/reactive'
-import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, dash2hump, callWithErrorHandling, wrapMethodsWithErrorHandling, error, setFocusedNavigation } from '@mpxjs/utils'
+import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, dash2hump, callWithErrorHandling, wrapMethodsWithErrorHandling, error, setFocusedNavigation, getDefaultValueByType } 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, hasPendingJob } from '../../observer/scheduler'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
-import MpxKeyboardAvoidingView from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view'
 import {
   IntersectionObserverContext,
   KeyboardAvoidContext,
   ProviderContext,
   RouteContext
 } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
-import { PortalHost, useSafeAreaInsets } from '../env/navigationHelper'
+import { PortalHost, useSafeAreaInsets, initialWindowMetrics } from '../env/navigationHelper'
 import { useInnerHeaderHeight } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
+import Mpx from '../../index'
 
 function getSystemInfo () {
-  const windowDimensions = ReactNative.Dimensions.get('window')
-  const screenDimensions = ReactNative.Dimensions.get('screen')
+  const windowDimensions = global.__mpxAppDimensionsInfo.window
+  const screenDimensions = global.__mpxAppDimensionsInfo.screen
   return {
     deviceOrientation: windowDimensions.width > windowDimensions.height ? 'landscape' : 'portrait',
     size: {
@@ -33,12 +33,13 @@ function getSystemInfo () {
   }
 }
 
-function createEffect (proxy, componentsMap) {
+function createEffect (proxy, componentsMap, rawOptions) {
   const update = proxy.update = () => {
     // react update props in child render(async), do not need exec pre render
     // if (proxy.propsUpdatedFlag) {
     //   proxy.updatePreRender()
     // }
+    // console.log(`[mpx] ${proxy.options?.mpxFileResource} 组件render响应时数据变更，开始修改stateVersion，驱动组件更新`)
     if (proxy.isMounted()) {
       proxy.callHook(BEFOREUPDATE)
       proxy.pendingUpdatedFlag = true
@@ -61,11 +62,18 @@ function createEffect (proxy, componentsMap) {
     return createElement(type, ...rest)
   }
 
+  const debugConfig = typeof global.__getMpxRenderEffectDebugRules === 'function'
+? global.__getMpxRenderEffectDebugRules(rawOptions.mpxFileResource)
+: {
+    debug: 1,
+    name: `MpxRenderEffect-${rawOptions.mpxFileResource || 'unknown'}`
+  }
+
   proxy.effect = new ReactiveEffect(() => {
     // reset instance
     proxy.target.__resetInstance()
     return callWithErrorHandling(proxy.target.__injectedRender.bind(proxy.target), proxy, 'render function', [innerCreateElement, getComponent])
-  }, () => queueJob(update), proxy.scope)
+  }, () => { return queueJob(update) }, proxy.scope, debugConfig.debug, debugConfig.name)
   // render effect允许自触发
   proxy.toggleRecurse(true)
 }
@@ -172,8 +180,8 @@ const instanceProto = {
               type: field
             }
           }
-          // 处理props默认值
-          propsData[key] = field.value
+          // 处理props默认值，没有显式设置value时根据type获取默认值，与微信小程序原生行为保持一致
+          propsData[key] = hasOwn(field, 'value') ? field.value : getDefaultValueByType(field.type)
         }
       }
     })
@@ -295,13 +303,18 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
       instance[key] = method.bind(instance)
     })
   }
-
+  const loadParams = {}
   if (type === 'page') {
     const props = propsRef.current
     instance.route = props.route.name
     global.__mpxPagesMap = global.__mpxPagesMap || {}
     global.__mpxPagesMap[props.route.key] = [instance, props.navigation]
     setFocusedNavigation(props.navigation)
+
+    if (!global.__mpxAppHotLaunched && global.__mpxInitialRunParams) {
+      Object.assign(loadParams, global.__mpxInitialRunParams)
+    }
+    set(global.__mpxPageSizeCountMap, pageId, global.__mpxSizeCount)
     // App onLaunch 在 Page created 之前执行
     if (!global.__mpxAppHotLaunched && global.__mpxAppOnLaunch) {
       global.__mpxAppOnLaunch(props.navigation)
@@ -310,17 +323,16 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
 
   const proxy = instance.__mpxProxy = new MpxProxy(rawOptions, instance)
   proxy.created()
-
   if (type === 'page') {
     const props = propsRef.current
-    const loadParams = {}
-    // 此处拿到的props.route.params内属性的value被进行过了一次decode, 不符合预期，此处额外进行一次encode来与微信对齐
-    if (isObject(props.route.params)) {
-      for (const key in props.route.params) {
-        loadParams[key] = encodeURIComponent(props.route.params[key])
+    const decodedQuery = {}
+    const rawQuery = Object.assign({}, loadParams, props.route.params || {})
+    if (isObject(rawQuery)) {
+      for (const key in rawQuery) {
+        decodedQuery[key] = decodeURIComponent(rawQuery[key])
       }
     }
-    proxy.callHook(ONLOAD, [loadParams])
+    proxy.callHook(ONLOAD, [rawQuery, decodedQuery])
   }
 
   Object.assign(proxy, {
@@ -328,7 +340,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
     stateVersion: Symbol(),
     subscribe: (onStoreChange) => {
       if (!proxy.effect) {
-        createEffect(proxy, componentsMap)
+        createEffect(proxy, componentsMap, rawOptions)
         proxy.stateVersion = Symbol()
       }
       proxy.onStoreChange = onStoreChange
@@ -344,7 +356,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
   })
   // react数据响应组件更新管理器
   if (!proxy.effect) {
-    createEffect(proxy, componentsMap)
+    createEffect(proxy, componentsMap, rawOptions)
   }
 
   return instance
@@ -375,9 +387,18 @@ const triggerPageStatusHook = (mpxProxy, event) => {
   }
 }
 
-const triggerResizeEvent = (mpxProxy) => {
-  const type = mpxProxy.options.__type__
+const triggerResizeEvent = (mpxProxy, sizeRef) => {
+  const oldSize = sizeRef.current.size
   const systemInfo = getSystemInfo()
+  const newSize = systemInfo.size
+
+  if (oldSize && oldSize.windowWidth === newSize.windowWidth && oldSize.windowHeight === newSize.windowHeight) {
+    return
+  }
+
+  Object.assign(sizeRef.current, systemInfo)
+
+  const type = mpxProxy.options.__type__
   const target = mpxProxy.target
   mpxProxy.callHook(ONRESIZE, [systemInfo])
   if (type === 'page') {
@@ -388,7 +409,9 @@ const triggerResizeEvent = (mpxProxy) => {
   }
 }
 
-function usePageEffect (mpxProxy, pageId) {
+function usePageEffect (mpxProxy, pageId, type) {
+  const sizeRef = useRef(getSystemInfo())
+
   useEffect(() => {
     let unWatch
     const hasShowHook = hasPageHook(mpxProxy, [ONSHOW, 'show'])
@@ -399,21 +422,31 @@ function usePageEffect (mpxProxy, pageId) {
         unWatch = watch(() => pageStatusMap[pageId], (newVal) => {
           if (newVal === 'show' || newVal === 'hide') {
             triggerPageStatusHook(mpxProxy, newVal)
+            // 仅在尺寸确实变化时才触发resize事件
+            triggerResizeEvent(mpxProxy, sizeRef)
+
+            // 如果当前全局size与pagesize不一致，在show之后触发一次resize事件
+            if (type === 'page' && newVal === 'show' && global.__mpxPageSizeCountMap[pageId] !== global.__mpxSizeCount) {
+              // 刷新__mpxPageSizeCountMap, 每个页面仅会执行一次，直接驱动render刷新
+              global.__mpxPageSizeCountMap[pageId] = global.__mpxSizeCount
+            }
           } else if (/^resize/.test(newVal)) {
-            triggerResizeEvent(mpxProxy)
+            triggerResizeEvent(mpxProxy, sizeRef)
           }
         }, { sync: true })
       }
     }
     return () => {
       unWatch && unWatch()
+      if (type === 'page') {
+        del(global.__mpxPageSizeCountMap, pageId)
+      }
     }
   }, [])
 }
 
 let pageId = 0
 const pageStatusMap = global.__mpxPageStatusMap = reactive({})
-
 function usePageStatus (navigation, pageId) {
   navigation.pageId = pageId
   if (!hasOwn(pageStatusMap, pageId)) {
@@ -486,7 +519,17 @@ function getLayoutData (headerHeight) {
   // 在横屏状态下 screen.height = window.height + bottomVirtualHeight
   // 在正常状态   screen.height =  window.height + bottomVirtualHeight + statusBarHeight
   const isLandscape = screenDimensions.height < screenDimensions.width
-  const bottomVirtualHeight = isLandscape ? screenDimensions.height - windowDimensions.height : ((screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight) || 0)
+  let bottomVirtualHeight = 0
+  if (ReactNative.Platform.OS === 'android') {
+    if (isLandscape) {
+      bottomVirtualHeight = screenDimensions.height - windowDimensions.height
+    } else {
+      bottomVirtualHeight = initialWindowMetrics?.insets?.bottom || 0
+      if (typeof mpxGlobal.__mpx.config?.rnConfig?.getBottomVirtualHeight === 'function') {
+        bottomVirtualHeight = mpxGlobal.__mpx.config?.rnConfig?.getBottomVirtualHeight() || 0
+      }
+    }
+  }
   return {
     left: 0,
     top: headerHeight,
@@ -519,7 +562,7 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     navigation.layout = getLayoutData(headerHeight)
 
     useEffect(() => {
-      const dimensionListener = ReactNative.Dimensions.addEventListener('change', ({ screen }) => {
+      const dimensionListener = ReactNative.Dimensions.addEventListener('change', ({ window, screen }) => {
         navigation.layout = getLayoutData(headerHeight)
       })
       return () => dimensionListener?.remove()
@@ -529,6 +572,8 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     usePageStatus(navigation, currentPageId)
 
     const withKeyboardAvoidingView = (element) => {
+      if (currentPageConfig.disableKeyboardAvoiding) return element
+      const MpxKeyboardAvoidingView = require('@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view').default
       return createElement(KeyboardAvoidContext.Provider,
         {
           value: keyboardAvoidRef
@@ -549,39 +594,53 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     // android存在第一次打开insets都返回为0情况，后续会触发第二次渲染后正确
     navigation.insets = useSafeAreaInsets()
     return withKeyboardAvoidingView(
-        createElement(ReactNative.View,
+      createElement(ReactNative.View,
+        {
+          style: {
+            flex: 1,
+            // 页面容器背景色
+            backgroundColor: currentPageConfig?.backgroundColorContent || '#fff',
+            // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
+            overflow: 'hidden'
+          }
+        },
+        createElement(RouteContext.Provider,
+          {
+            value: routeContextValRef.current
+          },
+          createElement(IntersectionObserverContext.Provider,
             {
-              style: {
-                flex: 1,
-                // 页面容器背景色
-                backgroundColor: currentPageConfig?.backgroundColorContent || '#fff',
-                // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
-                overflow: 'hidden'
-              }
+              value: intersectionObservers.current
             },
-            createElement(RouteContext.Provider,
-                {
-                  value: routeContextValRef.current
-                },
-                createElement(IntersectionObserverContext.Provider,
-                    {
-                      value: intersectionObservers.current
-                    },
-                    createElement(PortalHost,
-                        null,
-                        createElement(WrappedComponent, {
-                          ...props,
-                          navigation,
-                          route,
-                          id: currentPageId
-                        })
-                    )
-                )
+            createElement(PortalHost,
+              null,
+              createElement(WrappedComponent, {
+                ...props,
+                navigation,
+                route,
+                id: currentPageId
+              })
             )
+          )
         )
+      )
     )
   }
 }
+
+function updateProps (instance, props, validProps) {
+  Object.keys(validProps).forEach((key) => {
+    if (hasOwn(props, key)) {
+      instance[key] = props[key]
+    } else {
+      const altKey = hump2dash(key)
+      if (hasOwn(props, altKey)) {
+        instance[key] = props[altKey]
+      }
+    }
+  })
+}
+
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const componentsMap = currentInject.componentsMap
@@ -634,16 +693,14 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     if (!isFirst) {
       // 处理props更新
-      Object.keys(validProps).forEach((key) => {
-        if (hasOwn(props, key)) {
-          instance[key] = props[key]
-        } else {
-          const altKey = hump2dash(key)
-          if (hasOwn(props, altKey)) {
-            instance[key] = props[altKey]
-          }
-        }
-      })
+      if (Mpx.config.forceFlushSync) {
+        // 避免开启forceFlushSync时react报错：Cannot update a component while rendering a different component
+        Promise.resolve().then(() => {
+          updateProps(instance, props, validProps)
+        })
+      } else {
+        updateProps(instance, props, validProps)
+      }
     }
 
     useEffect(() => {
@@ -653,7 +710,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       }
     })
 
-    usePageEffect(proxy, pageId)
+    usePageEffect(proxy, pageId, type)
     useEffect(() => {
       proxy.mounted()
       return () => {
@@ -676,6 +733,15 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       proxy.memoVersion = Symbol()
     }
 
+    // if (rawOptions.mpxFileResource.includes('nav.mpx')) {
+    //   const stateVersionChange = proxy.stateVersion === global.__mpxNavStateVersion
+    //   const memoVersionChange = proxy.memoVersion === global.__mpxNavMemoVersion
+    //   const propsChange = props === global.__mpxNavProps
+    //   console.log(`[mpx] nav.mpx render, stateVersionChange: ${stateVersionChange}, memoVersionChange: ${memoVersionChange}, propsChange: ${propsChange}`)
+    //   global.__mpxNavStateVersion = proxy.stateVersion
+    //   global.__mpxNavMemoVersion = proxy.memoVersion
+    //   global.__mpxNavProps = props
+    // }
     const finalMemoVersion = useMemo(() => {
       if (!hasPendingJob(proxy.update)) {
         proxy.finalMemoVersion = Symbol()