@mpxjs/core 2.9.66 → 2.9.69-beta.0

package/src/platform/patch/{react/getDefaultOptions.ios.js → getDefaultOptions.ios.js}

@@ -1,15 +1,15 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment, cloneElement } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, useState, useCallback, createElement, memo, forwardRef, useImperativeHandle, useContext, 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, getByPath, collectDataset, hump2dash } 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 { ReactiveEffect } from '../../observer/effect'
+import { watch } from '../../observer/watch'
+import { reactive, set, del } from '../../observer/reactive'
+import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, callWithErrorHandling, 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, hasPendingJob } from '../../observer/scheduler'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
-import { IntersectionObserverContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
+import { IntersectionObserverContext, RouteContext, KeyboardAvoidContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
 
 function getSystemInfo () {
   const window = ReactNative.Dimensions.get('window')
@@ -27,15 +27,14 @@ function getSystemInfo () {
 
 function createEffect (proxy, components) {
   const update = proxy.update = () => {
-    // pre render for props update
-    if (proxy.propsUpdatedFlag) {
-      proxy.updatePreRender()
-    }
+    // react update props in child render(async), do not need exec pre render
+    // if (proxy.propsUpdatedFlag) {
+    //   proxy.updatePreRender()
+    // }
     if (proxy.isMounted()) {
       proxy.callHook(BEFOREUPDATE)
       proxy.pendingUpdatedFlag = true
     }
-    // eslint-disable-next-line symbol-description
     proxy.stateVersion = Symbol()
     proxy.onStoreChange && proxy.onStoreChange()
   }
@@ -49,11 +48,14 @@ function createEffect (proxy, components) {
     if (!type) return null
     return createElement(type, ...rest)
   }
+
   proxy.effect = new ReactiveEffect(() => {
     // reset instance
     proxy.target.__resetInstance()
-    return proxy.target.__injectedRender(innerCreateElement, getComponent)
+    return callWithErrorHandling(proxy.target.__injectedRender.bind(proxy.target), proxy, 'render function', [innerCreateElement, getComponent])
   }, () => queueJob(update), proxy.scope)
+  // render effect允许自触发
+  proxy.toggleRecurse(true)
 }
 
 function getRootProps (props) {
@@ -69,126 +71,132 @@ function getRootProps (props) {
   return rootProps
 }
 
-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)
-    },
-    getPageId () {
-      return pageId
-    },
-    __getProps () {
-      const props = propsRef.current
-      const propsData = {}
-      Object.keys(validProps).forEach((key) => {
-        if (hasOwn(props, key)) {
-          propsData[key] = props[key]
+const instanceProto = {
+  setData (data, callback) {
+    return this.__mpxProxy.forceUpdate(data, { sync: true }, callback)
+  },
+  triggerEvent (eventName, eventDetail) {
+    const props = this.__props
+    const handler = props && (props['bind' + eventName] || props['catch' + eventName] || props['capture-bind' + eventName] || props['capture-catch' + eventName])
+    if (handler && typeof handler === 'function') {
+      const timeStamp = +new Date()
+      const dataset = collectDataset(props)
+      const id = props.id || ''
+      const eventObj = {
+        type: eventName,
+        timeStamp,
+        target: {
+          id,
+          dataset,
+          targetDataset: dataset
+        },
+        currentTarget: {
+          id,
+          dataset
+        },
+        detail: eventDetail
+      }
+      handler.call(this, eventObj)
+    }
+  },
+  getPageId () {
+    return this.__pageId
+  },
+  selectComponent (selector) {
+    return this.__selectRef(selector, 'component')
+  },
+  selectAllComponents (selector) {
+    return this.__selectRef(selector, 'component', true)
+  },
+  createSelectorQuery () {
+    return createSelectorQuery().in(this)
+  },
+  createIntersectionObserver (opt) {
+    return createIntersectionObserver(this, opt, this.__intersectionCtx)
+  },
+  __resetInstance () {
+    this.__refs = {}
+    this.__dispatchedSlotSet = new WeakSet()
+  },
+  __iter (val, fn) {
+    let i, l, keys, key
+    const result = []
+    if (isArray(val) || typeof val === 'string') {
+      for (i = 0, l = val.length; i < l; i++) {
+        result.push(fn.call(this, val[i], i))
+      }
+    } else if (typeof val === 'number') {
+      for (i = 0; i < val; i++) {
+        result.push(fn.call(this, i + 1, i))
+      }
+    } else if (isObject(val)) {
+      keys = Object.keys(val)
+      for (i = 0, l = keys.length; i < l; i++) {
+        key = keys[i]
+        result.push(fn.call(this, val[key], key, i))
+      }
+    }
+    return result
+  },
+  __getProps () {
+    const props = this.__props
+    const validProps = this.__validProps
+    const propsData = {}
+    Object.keys(validProps).forEach((key) => {
+      if (hasOwn(props, key)) {
+        propsData[key] = props[key]
+      } else {
+        const altKey = hump2dash(key)
+        if (hasOwn(props, altKey)) {
+          propsData[key] = props[altKey]
         } else {
-          const altKey = hump2dash(key)
-          if (hasOwn(props, altKey)) {
-            propsData[key] = props[altKey]
-          } else {
-            let field = validProps[key]
-            if (isFunction(field) || field === null) {
-              field = {
-                type: field
-              }
+          let field = validProps[key]
+          if (isFunction(field) || field === null) {
+            field = {
+              type: field
             }
-            // 处理props默认值
-            propsData[key] = field.value
           }
+          // 处理props默认值
+          propsData[key] = field.value
         }
-      })
-      return propsData
-    },
-    __resetInstance () {
-      this.__refs = {}
-      this.__dispatchedSlotSet = new WeakSet()
-    },
-    __getSlot (name) {
-      const { children } = propsRef.current
-      if (children) {
-        const result = []
-        if (Array.isArray(children)) {
-          children.forEach(child => {
-            if (child?.props?.slot === name) {
-              result.push(child)
-            }
-          })
-        } else {
-          if (children?.props?.slot === name) {
-            result.push(children)
+      }
+    })
+    return propsData
+  },
+  __getSlot (name, slot) {
+    const { children } = this.__props
+    if (children) {
+      let result = []
+      if (isArray(children) && !hasOwn(children, '__slot')) {
+        children.forEach(child => {
+          if (hasOwn(child, '__slot')) {
+            if (child.__slot === name) result.push(...child)
+          } else if (child?.props?.slot === name) {
+            result.push(child)
           }
-        }
-        return result.filter(item => {
-          if (!isObject(item) || this.__dispatchedSlotSet.has(item)) return false
-          this.__dispatchedSlotSet.add(item)
-          return true
         })
-      }
-      return null
-    },
-    __injectedRender: currentInject.render || noop,
-    __getRefsData: currentInject.getRefsData || noop,
-    // render helper
-    _i (val, fn) {
-      let i, l, keys, key
-      const result = []
-      if (Array.isArray(val) || typeof val === 'string') {
-        for (i = 0, l = val.length; i < l; i++) {
-          result.push(fn.call(this, val[i], i))
-        }
-      } else if (typeof val === 'number') {
-        for (i = 0; i < val; i++) {
-          result.push(fn.call(this, i + 1, i))
-        }
-      } else if (isObject(val)) {
-        keys = Object.keys(val)
-        for (i = 0, l = keys.length; i < l; i++) {
-          key = keys[i]
-          result.push(fn.call(this, val[key], key, i))
+      } else {
+        if (hasOwn(children, '__slot')) {
+          if (children.__slot === name) result.push(...children)
+        } else if (children?.props?.slot === name) {
+          result.push(children)
         }
       }
+      result = result.filter(item => {
+        if (!isObject(item) || this.__dispatchedSlotSet.has(item)) return false
+        this.__dispatchedSlotSet.add(item)
+        return true
+      })
+      if (!result.length) return null
+      result.__slot = slot
       return result
-    },
-    triggerEvent (eventName, eventDetail) {
-      const props = propsRef.current
-      const handler = props && (props['bind' + eventName] || props['catch' + eventName] || props['capture-bind' + eventName] || props['capture-catch' + eventName])
-      if (handler && typeof handler === 'function') {
-        const timeStamp = +new Date()
-        const dataset = collectDataset(props)
-        const id = props.id || ''
-        const eventObj = {
-          type: eventName,
-          timeStamp,
-          target: {
-            id,
-            dataset,
-            targetDataset: dataset
-          },
-          currentTarget: {
-            id,
-            dataset
-          },
-          detail: eventDetail
-        }
-        handler.call(this, eventObj)
-      }
-    },
-    selectComponent (selector) {
-      return this.__selectRef(selector, 'component')
-    },
-    selectAllComponents (selector) {
-      return this.__selectRef(selector, 'component', true)
-    },
-    createSelectorQuery () {
-      return createSelectorQuery().in(this)
-    },
-    createIntersectionObserver (opt) {
-      return createIntersectionObserver(this, opt, intersectionCtx)
-    },
-    ...rawOptions.methods
-  }, {
+    }
+    return null
+  }
+}
+
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId, intersectionCtx }) {
+  const instance = Object.create(instanceProto, {
     dataset: {
       get () {
         const props = propsRef.current
@@ -203,18 +211,55 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
       },
       enumerable: true
     },
-    props: {
+    __props: {
       get () {
         return propsRef.current
       },
-      enumerable: true
+      enumerable: false
+    },
+    __pageId: {
+      get () {
+        return pageId
+      },
+      enumerable: false
+    },
+    __intersectionCtx: {
+      get () {
+        return intersectionCtx
+      },
+      enumerable: false
+    },
+    __validProps: {
+      get () {
+        return validProps
+      },
+      enumerable: false
+    },
+    __injectedRender: {
+      get () {
+        return currentInject.render || noop
+      },
+      enumerable: false
+    },
+    __getRefsData: {
+      get () {
+        return currentInject.getRefsData || noop
+      },
+      enumerable: false
     }
   })
 
-  const props = propsRef.current
+  // bind this & assign methods
+  if (rawOptions.methods) {
+    Object.entries(rawOptions.methods).forEach(([key, method]) => {
+      instance[key] = method.bind(instance)
+    })
+  }
 
   if (type === 'page') {
+    const props = propsRef.current
     instance.route = props.route.name
+    global.__mpxPagesMap = global.__mpxPagesMap || {}
     global.__mpxPagesMap[props.route.key] = [instance, props.navigation]
   }
 
@@ -223,12 +268,10 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
 
   Object.assign(proxy, {
     onStoreChange: null,
-    // eslint-disable-next-line symbol-description
     stateVersion: Symbol(),
     subscribe: (onStoreChange) => {
       if (!proxy.effect) {
         createEffect(proxy, components)
-        // eslint-disable-next-line symbol-description
         proxy.stateVersion = Symbol()
       }
       proxy.onStoreChange = onStoreChange
@@ -266,8 +309,6 @@ function hasPageHook (mpxProxy, hookNames) {
   })
 }
 
-const RouteContext = createContext(null)
-
 const triggerPageStatusHook = (mpxProxy, event) => {
   mpxProxy.callHook(event === 'show' ? ONSHOW : ONHIDE)
   const pageLifetimes = mpxProxy.options.pageLifetimes
@@ -297,8 +338,8 @@ function usePageEffect (mpxProxy, pageId) {
     const hasHideHook = hasPageHook(mpxProxy, [ONHIDE, 'hide'])
     const hasResizeHook = hasPageHook(mpxProxy, [ONRESIZE, 'resize'])
     if (hasShowHook || hasHideHook || hasResizeHook) {
-      if (hasOwn(pageStatusContext, pageId)) {
-        unWatch = watch(() => pageStatusContext[pageId], (newVal) => {
+      if (hasOwn(pageStatusMap, pageId)) {
+        unWatch = watch(() => pageStatusMap[pageId], (newVal) => {
           if (newVal === 'show' || newVal === 'hide') {
             triggerPageStatusHook(mpxProxy, newVal)
           } else if (/^resize/.test(newVal)) {
@@ -313,32 +354,28 @@ function usePageEffect (mpxProxy, pageId) {
   }, [])
 }
 
-const pageStatusContext = reactive({})
 let pageId = 0
+const pageStatusMap = global.__mpxPageStatusMap = reactive({})
 
 function usePageStatus (navigation, pageId) {
-  let isFocused = true
-  set(pageStatusContext, pageId, '')
+  navigation.pageId = pageId
+  set(pageStatusMap, pageId, '')
   useEffect(() => {
     const focusSubscription = navigation.addListener('focus', () => {
-      pageStatusContext[pageId] = 'show'
-      isFocused = true
+      pageStatusMap[pageId] = 'show'
     })
     const blurSubscription = navigation.addListener('blur', () => {
-      pageStatusContext[pageId] = 'hide'
-      isFocused = false
+      pageStatusMap[pageId] = 'hide'
     })
     const unWatchAppFocusedState = watch(global.__mpxAppFocusedState, (value) => {
-      if (isFocused) {
-        pageStatusContext[pageId] = value
-      }
+      pageStatusMap[pageId] = value
     })
 
     return () => {
       focusSubscription()
       blurSubscription()
       unWatchAppFocusedState()
-      del(pageStatusContext, pageId)
+      del(pageStatusMap, pageId)
     }
   }, [navigation])
 }
@@ -347,6 +384,7 @@ 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)
@@ -365,22 +403,37 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     const proxy = instance.__mpxProxy
 
-    proxy.callHook(REACTHOOKSEXEC)
-
-    useEffect(() => {
-      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]
-            }
+    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)
       }
+    }
+
+    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]
+          }
+        }
+      })
+    }
+
+    useEffect(() => {
       if (proxy.pendingUpdatedFlag) {
         proxy.pendingUpdatedFlag = false
         proxy.callHook(UPDATED)
@@ -391,6 +444,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()
@@ -405,10 +461,21 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     useSyncExternalStore(proxy.subscribe, proxy.getSnapshot)
 
-    const root = rawOptions.options?.disableMemo ? proxy.effect.run() : useMemo(() => proxy.effect.run(), [proxy.stateVersion])
-    if (root) {
+    if ((rawOptions.options?.disableMemo)) {
+      proxy.memoVersion = Symbol()
+    }
+
+    const finalMemoVersion = useMemo(() => {
+      if (!hasPendingJob(proxy.update)) {
+        proxy.finalMemoVersion = Symbol()
+      }
+      return proxy.finalMemoVersion
+    }, [proxy.stateVersion, proxy.memoVersion])
+
+    const root = useMemo(() => proxy.effect.run(), [finalMemoVersion])
+    if (root && root.props.ishost) {
       const rootProps = getRootProps(props)
-      rootProps.style = { ...root.props.style, ...rootProps.style }
+      rootProps.style = Object.assign({}, root.props.style, rootProps.style)
       // update root props
       return cloneElement(root, rootProps)
     }
@@ -423,35 +490,27 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     const { Provider, useSafeAreaInsets, GestureHandlerRootView } = 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'
-        let 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
-          }
-        }
         navigation.setOptions({
           headerShown: !isCustom,
-          headerShadowVisible: false,
-          headerTitle: pageConfig.navigationBarTitleText || '',
+          title: pageConfig.navigationBarTitleText || '',
           headerStyle: {
             backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
           },
-          headerTitleAlign: 'center',
-          headerTintColor: pageConfig.navigationBarTextStyle || 'white',
-          ...opt
+          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)
+        }
       }, [])
 
       const rootRef = useRef(null)
@@ -461,6 +520,30 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
         })
       }, [])
 
+      const withKeyboardAvoidingView = (element) => {
+        if (__mpx_mode__ === 'ios') {
+          return createElement(KeyboardAvoidContext.Provider,
+            {
+              value: setEnabled
+            },
+            createElement(ReactNative.KeyboardAvoidingView,
+              {
+                style: {
+                  flex: 1
+                },
+                contentContainerStyle: {
+                  flex: 1
+                },
+                behavior: 'position',
+                enabled
+              },
+              element
+            )
+          )
+        }
+        return element
+      }
+
       navigation.insets = useSafeAreaInsets()
 
       return createElement(GestureHandlerRootView,
@@ -469,37 +552,40 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
             flex: 1
           }
         },
-        createElement(ReactNative.View, {
-          style: {
-            flex: 1,
-            backgroundColor: pageConfig.backgroundColor || '#ffffff'
-          },
-          ref: rootRef,
-          onLayout
-        },
-          createElement(Provider,
-            null,
+        withKeyboardAvoidingView(
+          createElement(ReactNative.View,
+            {
+              style: {
+                flex: 1,
+                backgroundColor: pageConfig.backgroundColor || '#ffffff'
+              },
+              ref: rootRef,
+              onLayout
+            },
             createElement(RouteContext.Provider,
               {
                 value: currentPageId
               },
               createElement(IntersectionObserverContext.Provider,
-              {
-                value: intersectionObservers.current
-              },
-                createElement(defaultOptions,
-                  {
-                    navigation,
-                    route,
-                    id: currentPageId
-                  }
+                {
+                  value: intersectionObservers.current
+                },
+                createElement(Provider,
+                  null,
+                  createElement(defaultOptions,
+                    {
+                      navigation,
+                      route,
+                      id: currentPageId
+                    }
+                  )
                 )
               )
             )
           )
         )
-        // todo custom portal host for active route
       )
+      // todo custom portal host for active route
     }
     return Page
   }