@mpxjs/core 2.9.65 → 2.9.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.65",
+  "version": "2.9.66",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -97,5 +97,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "24efa90e90b4d42c285ca61739cb9e4d0696976c"
+  "gitHead": "ff9eb06a3be28538870823cebf813ed56f39bbd7"
 }

package/src/core/proxy.js

@@ -106,6 +106,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 +136,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 阶段删除
@@ -208,6 +224,11 @@ export default class MpxProxy {
     if (this.update) this.update.active = false
     this.callHook(UNMOUNTED)
     this.state = UNMOUNTED
+    if (this._intersectionObservers) {
+      this._intersectionObservers.forEach((observer) => {
+        observer.disconnect()
+      })
+    }
   }
 
   isUnmounted () {
@@ -249,7 +270,7 @@ 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'))
   }
 
@@ -287,7 +308,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)
   }
@@ -419,7 +440,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/export/index.js

@@ -1,4 +1,3 @@
-
 export {
   watchEffect,
   watchSyncEffect,

package/src/platform/patch/builtInKeysMap.js

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

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 } 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
   }, {
@@ -349,12 +350,13 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   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, () => {
@@ -413,18 +415,19 @@ 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 = {}
         if (__mpx_mode__ === 'android') {
@@ -451,36 +454,54 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
         })
       }, [])
 
+      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/wx/getDefaultOptions.js

@@ -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
   })