@mpxjs/core 2.9.64 → 2.9.66

package/@types/index.d.ts

@@ -114,7 +114,7 @@ interface Context {
   refs: ObjectOf<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>
   asyncRefs: ObjectOf<Promise<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>>
 
-  forceUpdate (params?: object, callback?: () => void): void
+  forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
 
   selectComponent: ReplaceWxComponentIns['selectComponent']
   selectAllComponents: ReplaceWxComponentIns['selectAllComponents']
@@ -183,7 +183,7 @@ export interface MpxComponentIns {
 
   $watch (expr: string | (() => any), handler: WatchHandler | WatchOptWithHandler, options?: WatchOpt): () => void
 
-  $forceUpdate (params?: object, callback?: () => void): void
+  $forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
 
   $nextTick (fn: () => void): void
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.64",
+  "version": "2.9.66",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.64",
+    "@mpxjs/utils": "^2.9.65",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -32,6 +32,7 @@
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^2.19.0",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-safe-area-context": "^4.10.1",
     "react-native-webview": "^13.10.5",
     "vue": "^2.7.10",
@@ -75,6 +76,9 @@
     },
     "react-native-gesture-handler": {
       "optional": true
+    },
+    "react-native-linear-gradient": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -93,5 +97,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "803334dc0e600f219d514c27461aa7663b7a6653"
+  "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/pageScrollMixin.web.js

@@ -14,23 +14,21 @@ function refreshMs () {
   }
 }
 
-let loading = null
-
 function showLoading (vm) {
   const { backgroundColor = 'transparent', backgroundTextStyle = 'dark' } = vm.$options.__mpxPageConfig
-  loading = document.createElement('div')
-  loading.className = 'pull-down-loading'
-  loading.style.cssText = `background-color: ${backgroundColor};`
+  vm.__mpxloading = document.createElement('div')
+  vm.__mpxloading.className = 'pull-down-loading'
+  vm.__mpxloading.style.cssText = `background-color: ${backgroundColor};`
   const dot = document.createElement('div')
   dot.className = `dot-flashing ${backgroundTextStyle}`
-  loading.append(dot)
-  vm.$el.prepend(loading)
+  vm.__mpxloading.append(dot)
+  vm.$el.prepend(vm.__mpxloading)
 }
 
 function hideLoading (vm) {
-  if (loading) {
-    vm.$el.removeChild(loading)
-    loading = null
+  if (vm.__mpxloading) {
+    vm.$el.removeChild(vm.__mpxloading)
+    vm.__mpxloading = null
   }
 }
 

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,16 +12,30 @@ 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
 }
 
-global.__unit = {
+const unit = {
   rpx,
   vw,
   vh
 }
-global.__hairlineWidth = StyleSheet.hairlineWidth
+
+function formatValue (value) {
+  let matched
+  if ((matched = numberRegExp.exec(value))) {
+    value = +matched[1]
+  } else if ((matched = unitRegExp.exec(value))) {
+    value = unit[matched[2]](+matched[1])
+  } else if (hairlineRegExp.test(value)) {
+    value = StyleSheet.hairlineWidth
+  }
+  return value
+}
+
+global.__formatValue = formatValue
 
 const escapeReg = /[()[\]{}#!.:,%'"+$]/g
 const escapeMap = {
@@ -97,7 +111,8 @@ const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 
-const parseStyleText = cached((cssText = '') => {
+const parseStyleText = cached((cssText) => {
+  if (typeof cssText !== 'string') return cssText
   const res = {}
   const arr = cssText.split(listDelimiter)
   for (let i = 0; i < arr.length; i++) {
@@ -134,19 +149,9 @@ function mergeObjectArray (arr) {
 }
 
 function transformStyleObj (styleObj) {
-  const keys = Object.keys(styleObj)
   const transformed = {}
-  keys.forEach((prop) => {
-    let value = styleObj[prop]
-    let matched
-    if ((matched = numberRegExp.exec(value))) {
-      value = +matched[1]
-    } else if ((matched = unitRegExp.exec(value))) {
-      value = global.__unit[matched[2]](+matched[1])
-    } else if (hairlineRegExp.test(value)) {
-      value = StyleSheet.hairlineWidth
-    }
-    transformed[prop] = value
+  Object.keys(styleObj).forEach((prop) => {
+    transformed[prop] = formatValue(styleObj[prop])
   })
   return transformed
 }

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')
@@ -40,13 +41,18 @@ function createEffect (proxy, components) {
   }
   update.id = proxy.uid
   const getComponent = (tagName) => {
+    if (!tagName) return null
     if (tagName === 'block') return Fragment
     return components[tagName] || getByPath(ReactNative, tagName)
   }
+  const innerCreateElement = (type, ...rest) => {
+    if (!type) return null
+    return createElement(type, ...rest)
+  }
   proxy.effect = new ReactiveEffect(() => {
     // reset instance
     proxy.target.__resetInstance()
-    return proxy.target.__injectedRender(createElement, getComponent)
+    return proxy.target.__injectedRender(innerCreateElement, getComponent)
   }, () => queueJob(update), proxy.scope)
 }
 
@@ -63,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)
@@ -178,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
   }, {
@@ -344,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, () => {
@@ -408,21 +415,49 @@ 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 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: pageConfig.navigationStyle !== 'custom',
+          headerShown: !isCustom,
+          headerShadowVisible: false,
           headerTitle: pageConfig.navigationBarTitleText || '',
           headerStyle: {
             backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
           },
-          headerTintColor: pageConfig.navigationBarTextStyle || 'white'
+          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 }
         })
       }, [])
 
@@ -430,34 +465,43 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
       return createElement(GestureHandlerRootView,
         {
+          style: {
+            flex: 1
+          }
+        },
+        createElement(ReactNative.View, {
           style: {
             flex: 1,
             backgroundColor: pageConfig.backgroundColor || '#ffffff'
           },
-          onLayout (e) {
-            navigation.layout = e.nativeEvent.layout
-          }
+          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
   })