@mpxjs/core 2.9.70-alpha.1 → 2.9.70-alpha.3

package/@types/global.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.70-alpha.1",
+  "version": "2.9.70-alpha.3",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,12 +19,11 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": ">=2.9.69-alpha",
+    "@mpxjs/utils": "2.9.70-alpha.0",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
   "peerDependencies": {
-    "@ant-design/react-native": "^5.1.3",
     "@d11/react-native-fast-image": "^8.6.12",
     "@hummer/tenon-store": "^1.7.0",
     "@hummer/tenon-vue": "^1.5.1",
@@ -35,6 +34,7 @@
     "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",
@@ -62,13 +62,13 @@
     "react-native": {
       "optional": true
     },
-    "@react-navigation/native": {
+    "react-native-reanimated": {
       "optional": true
     },
-    "@react-navigation/stack": {
+    "@react-navigation/native": {
       "optional": true
     },
-    "@ant-design/react-native": {
+    "@react-navigation/native-stack": {
       "optional": true
     },
     "react-native-safe-area-context": {

package/src/convertor/wxToReact.js

@@ -5,7 +5,7 @@ import {
 import { implemented } from '../core/implement'
 
 // 暂不支持的wx选项，后期需要各种花式支持
-const unsupported = ['relations', 'moved', 'definitionFilter']
+const unsupported = ['moved', 'definitionFilter']
 
 function convertErrorDesc (key) {
   error(`Options.${key} is not supported in runtime conversion from wx to react native.`, global.currentResource)

package/src/core/mergeOptions.js

@@ -122,9 +122,10 @@ function extractObservers (options) {
   Object.keys(props).forEach(key => {
     const prop = props[key]
     if (prop && prop.observer) {
+      let callback = prop.observer
+      delete prop.observer
       mergeWatch(key, {
         handler (...rest) {
-          let callback = prop.observer
           if (typeof callback === 'string') {
             callback = this[callback]
           }
@@ -168,11 +169,7 @@ function extractObservers (options) {
               cb = this[cb]
             }
             if (typeof cb === 'function') {
-              if (keyPathArr.length < 2) {
-                val = [val]
-                old = [old]
-              }
-              cb.call(this, ...val, ...old)
+              Array.isArray(val) ? cb.call(this, ...val) : cb.call(this, val)
             }
           },
           deep,

package/src/core/proxy.js

@@ -1,4 +1,4 @@
-import { reactive, shallowReactive } from '../observer/reactive'
+import { reactive, defineReactive } from '../observer/reactive'
 import { ReactiveEffect, pauseTracking, resetTracking } from '../observer/effect'
 import { effectScope } from '../platform/export/index'
 import { watch } from '../observer/watch'
@@ -52,7 +52,7 @@ import {
 } from './innerLifecycle'
 import contextMap from '../dynamic/vnode/context'
 import { getAst } from '../dynamic/astCache'
-import { inject, provide } from '../platform/export/apiInject'
+import { inject, provide } from '../platform/export/inject'
 
 let uid = 0
 
@@ -112,7 +112,7 @@ export default class MpxProxy {
     this.uid = uid++
     this.name = options.name || ''
     this.options = options
-    this.ignoreReactivePattern = this.options.options?.ignoreReactivePattern
+    this.shallowReactivePattern = this.options.options?.shallowReactivePattern
     // beforeCreate -> created -> mounted -> unmounted
     this.state = BEFORECREATE
     this.ignoreProxyMap = makeMap(Mpx.config.ignoreProxyWhiteList)
@@ -146,10 +146,12 @@ export default class MpxProxy {
     this.initApi()
   }
 
-  processIgnoreReactive (obj) {
-    if (this.ignoreReactivePattern && isObject(obj)) {
+  processShallowReactive (obj) {
+    if (this.shallowReactivePattern && isObject(obj)) {
       Object.keys(obj).forEach((key) => {
-        if (this.ignoreReactivePattern.test(key)) {
+        if (this.shallowReactivePattern.test(key)) {
+          // 命中shallowReactivePattern的属性将其设置为 shallowReactive
+          defineReactive(obj, key, obj[key], true)
           Object.defineProperty(obj, key, {
             enumerable: true,
             // set configurable to false to skip defineReactive
@@ -170,6 +172,8 @@ export default class MpxProxy {
       // web中BEFORECREATE钩子通过vue的beforeCreate钩子单独驱动
       this.callHook(BEFORECREATE)
       setCurrentInstance(this)
+      this.parent = this.resolveParent()
+      this.provides = this.parent ? this.parent.provides : Object.create(null)
       // 在 props/data 初始化之前初始化 inject
       this.initInject()
       this.initProps()
@@ -194,6 +198,18 @@ export default class MpxProxy {
     }
   }
 
+  resolveParent () {
+    if (isReact) {
+      return {
+        provides: this.target.__parentProvides
+      }
+    }
+    if (isFunction(this.target.selectOwnerComponent)) {
+      const parent = this.target.selectOwnerComponent()
+      return parent ? parent.__mpxProxy : null
+    }
+  }
+
   createRenderTask (isEmptyRender) {
     if ((!this.isMounted() && this.currentRenderTask) || (this.isMounted() && isEmptyRender)) {
       return
@@ -233,16 +249,6 @@ export default class MpxProxy {
       // 页面/组件销毁清除上下文的缓存
       contextMap.remove(this.uid)
     }
-    if (!isWeb && this.options.__type__ === 'page') {
-      // 小程序页面销毁时移除对应的 provide
-      if (isFunction(this.target.getPageId)) {
-        const pageId = this.target.getPageId()
-        const providesMap = global.__mpxProvidesMap
-        if (providesMap.__pages[pageId]) {
-          delete providesMap.__pages[pageId]
-        }
-      }
-    }
     this.callHook(BEFOREUNMOUNT)
     this.scope?.stop()
     if (this.update) this.update.active = false
@@ -291,10 +297,10 @@ export default class MpxProxy {
     if (isReact) {
       // react模式下props内部对象透传无需深clone，依赖对象深层的数据响应触发子组件更新
       this.props = this.target.__getProps()
-      shallowReactive(this.processIgnoreReactive(this.props))
+      reactive(this.processShallowReactive(this.props))
     } else {
       this.props = diffAndCloneA(this.target.__getProps(this.options)).clone
-      reactive(this.processIgnoreReactive(this.props))
+      reactive(this.processShallowReactive(this.props))
     }
     proxy(this.target, this.props, undefined, false, this.createProxyConflictHandler('props'))
   }
@@ -334,7 +340,7 @@ export default class MpxProxy {
     if (isFunction(dataFn)) {
       Object.assign(this.data, callWithErrorHandling(dataFn.bind(this.target), this, 'data function'))
     }
-    reactive(this.processIgnoreReactive(this.data))
+    reactive(this.processShallowReactive(this.data))
     proxy(this.target, this.data, undefined, false, this.createProxyConflictHandler('data'))
     this.collectLocalKeys(this.data)
   }
@@ -515,7 +521,7 @@ export default class MpxProxy {
       if (hasOwn(renderData, key)) {
         const data = renderData[key]
         const firstKey = getFirstKey(key)
-        if (!this.localKeysMap[firstKey] || (this.ignoreReactivePattern && this.ignoreReactivePattern.test(firstKey))) {
+        if (!this.localKeysMap[firstKey]) {
           continue
         }
         // 外部clone，用于只需要clone的场景
@@ -762,7 +768,7 @@ export default class MpxProxy {
         }
         setByPath(this.target, key, data[key])
       })
-      this.forceUpdateData = data
+      Object.assign(this.forceUpdateData, data)
     } else {
       this.forceUpdateAll = true
     }

package/src/index.js

@@ -1,8 +1,7 @@
-import Vue from './external/vue'
+
 import { error, diffAndCloneA, hasOwn, makeMap } from '@mpxjs/utils'
 import { APIs, InstanceAPIs } from './platform/export/api'
-
-import { createI18n } from './platform/builtInMixins/i18nMixin'
+import { init } from './platform/env/index'
 
 export * from './platform/export/index'
 
@@ -156,12 +155,6 @@ Mpx.config = {
   rnConfig: {}
 }
 
-global.__mpx = Mpx
-
-if (__mpx_mode__ !== 'web') {
-  if (global.i18n) {
-    Mpx.i18n = createI18n(global.i18n)
-  }
-}
+init(Mpx)
 
 export default Mpx

package/src/observer/reactive.js

@@ -34,6 +34,7 @@ export class Observer {
 
   constructor (value, shallow) {
     this.value = value
+    this.shallow = shallow
     def(value, ObKey, this)
     if (Array.isArray(value)) {
       const augment = hasProto && arrayProtoAugment
@@ -120,7 +121,7 @@ export function defineReactive (obj, key, val, shallow) {
   const getter = property && property.get
   const setter = property && property.set
 
-  let childOb = !shallow && observe(val)
+  let childOb = shallow ? getObserver(val) : observe(val)
   Object.defineProperty(obj, key, {
     enumerable: true,
     configurable: true,
@@ -149,7 +150,7 @@ export function defineReactive (obj, key, val, shallow) {
       } else {
         val = newVal
       }
-      childOb = !shallow && observe(newVal)
+      childOb = shallow ? getObserver(newVal) : observe(newVal)
       dep.notify()
     }
   })
@@ -175,7 +176,7 @@ export function set (target, key, val) {
     target[key] = val
     return val
   }
-  defineReactive(ob.value, key, val)
+  defineReactive(ob.value, key, val, ob.shallow)
   ob.dep.notify()
   return val
 }

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

@@ -1,7 +1,10 @@
 export default function directiveHelperMixin () {
   return {
     methods: {
-      __getWxKey (item, key) {
+      __getWxKey (item, key, index) {
+        if (key === 'index') {
+          return index
+        }
         return key === '*this' ? item : item[key]
       }
     }

package/src/platform/builtInMixins/index.js

@@ -22,7 +22,8 @@ export default function getBuiltInMixins ({ type, rawOptions = {} }) {
       directiveHelperMixin(),
       styleHelperMixin(),
       refsMixin(),
-      i18nMixin()
+      i18nMixin(),
+      relationsMixin(type)
     ]
   } else if (__mpx_mode__ === 'web') {
     bulitInMixins = [

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

@@ -1,4 +1,5 @@
-import { setByPath } from '@mpxjs/utils'
+import { setByPath, error, parseDataset } from '@mpxjs/utils'
+import Mpx from '../../index'
 
 export default function proxyEventMixin () {
   return {
@@ -19,11 +20,58 @@ export default function proxyEventMixin () {
         const value = filterMethod ? (innerFilter[filterMethod] ? innerFilter[filterMethod](originValue) : typeof this[filterMethod] === 'function' && this[filterMethod]) : originValue
         setByPath(this, expr, value)
       },
-      __invokeHandler (eventName, $event) {
-        const handler = this[eventName]
-        if (handler && typeof handler === 'function') {
-          handler.call(this, $event)
+      __invoke (rawEvent, eventConfig = []) {
+        if (typeof Mpx.config.proxyEventHandler === 'function') {
+          try {
+            Mpx.config.proxyEventHandler(rawEvent)
+          } catch (e) {}
         }
+        const location = this.__mpxProxy.options.mpxFileResource
+
+        if (rawEvent.target && !rawEvent.target._datasetProcessed) {
+          const originalDataset = rawEvent.target.dataset
+          Object.defineProperty(rawEvent.target, 'dataset', {
+            get: () => parseDataset(originalDataset),
+            configurable: true,
+            enumerable: true
+          })
+          rawEvent.target._datasetProcessed = true
+        }
+        if (rawEvent.currentTarget && !rawEvent.currentTarget._datasetProcessed) {
+          const originalDataset = rawEvent.currentTarget.dataset
+          Object.defineProperty(rawEvent.currentTarget, 'dataset', {
+            get: () => parseDataset(originalDataset),
+            configurable: true,
+            enumerable: true
+          })
+          rawEvent.currentTarget._datasetProcessed = true
+        }
+
+        let returnedValue
+        eventConfig.forEach((item) => {
+          const callbackName = item[0]
+          if (callbackName) {
+            const params =
+              item.length > 1
+                ? item.slice(1).map((item) => {
+                    if (item === '__mpx_event__') {
+                      return rawEvent
+                    } else {
+                      return item
+                    }
+                  })
+                : [rawEvent]
+            if (typeof this[callbackName] === 'function') {
+              returnedValue = this[callbackName].apply(this, params)
+            } else {
+              error(
+                `Instance property [${callbackName}] is not function, please check.`,
+                location
+              )
+            }
+          }
+        })
+        return returnedValue
       }
     }
   }

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

@@ -0,0 +1,67 @@
+import { BEFORECREATE, MOUNTED, BEFOREUNMOUNT } from '../../core/innerLifecycle'
+
+const relationTypeMap = {
+  parent: 'child',
+  ancestor: 'descendant'
+}
+
+export default function relationsMixin (mixinType) {
+  if (mixinType === 'component') {
+    return {
+      [BEFORECREATE] () {
+        this.__relationNodesMap = {}
+      },
+      [MOUNTED] () {
+        this.__mpxExecRelations('linked')
+      },
+      [BEFOREUNMOUNT] () {
+        this.__mpxExecRelations('unlinked')
+        this.__relationNodesMap = {}
+      },
+      methods: {
+        getRelationNodes (path) {
+          return this.__relationNodesMap[path] || null
+        },
+        __mpxExecRelations (type) {
+          const relations = this.__mpxProxy.options.relations
+          const relationContext = this.__relation
+          const currentPath = this.__componentPath
+          if (relations && relationContext) {
+            Object.keys(relations).forEach((path) => {
+              const relation = relations[path]
+              const relationType = relation.type
+              if ((relationType === 'parent' || relationType === 'ancestor') && relationContext[path]) {
+                const target = relationContext[path]
+                const targetRelation = target.__mpxProxy.options.relations?.[currentPath]
+                if (targetRelation && targetRelation.type === relationTypeMap[relationType] && target.__componentPath === path) {
+                  if (type === 'linked') {
+                    this.__mpxLinkRelationNodes(target, currentPath)
+                  } else if (type === 'unlinked') {
+                    this.__mpxRemoveRelationNodes(target, currentPath)
+                  }
+                  if (typeof targetRelation[type] === 'function') {
+                    targetRelation[type].call(target, this)
+                  }
+                  if (typeof relation[type] === 'function') {
+                    relation[type].call(this, target)
+                  }
+                  this.__relationNodesMap[path] = [target]
+                }
+              }
+            })
+          }
+        },
+        __mpxLinkRelationNodes (target, path) {
+          target.__relationNodesMap[path] = target.__relationNodesMap[path] || [] // 父级绑定子级
+          target.__relationNodesMap[path].push(this)
+        },
+        __mpxRemoveRelationNodes (target, path) {
+          const relationNodesMap = target.__relationNodesMap
+          const arr = relationNodesMap[path] || []
+          const index = arr.indexOf(this)
+          if (index !== -1) arr.splice(index, 1)
+        }
+      }
+    }
+  }
+}

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

@@ -181,7 +181,7 @@ export default function styleHelperMixin () {
             } else if (appClassMap[className]) {
               // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
               Object.assign(result, appClassMap[className])
-            } else if (this.__props[className] && isObject(this.__props[className])) {
+            } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
               Object.assign(result, this.__props[className])
             }

package/src/platform/createApp.ios.js

@@ -1,12 +1,12 @@
 import transferOptions from '../core/transferOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp, parseUrlQuery, getFocusedNavigation, hasOwn, extend } from '@mpxjs/utils'
+import { makeMap, spreadProp, getFocusedNavigation, hasOwn } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 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 { ref } from '../observer/ref'
+import { initAppProvides } from './export/inject'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
@@ -29,22 +29,28 @@ function filterOptions (options, appData) {
   return newOptions
 }
 
-function createAppInstance (appData) {
-  return extend({}, Mpx.prototype, appData)
-}
-
-export default function createApp (option, config = {}) {
+export default function createApp (options) {
   const appData = {}
 
   const { NavigationContainer, createStackNavigator, SafeAreaProvider } = global.__navigationHelper
   // app选项目前不需要进行转换
-  const { rawOptions, currentInject } = transferOptions(option, 'app', false)
+  const { rawOptions, currentInject } = transferOptions(options, 'app', false)
+  initAppProvides(rawOptions.provide, rawOptions)
   const defaultOptions = filterOptions(spreadProp(rawOptions, 'methods'), appData)
-  defaultOptions.onAppInit && defaultOptions.onAppInit()
   // 在页面script执行前填充getApp()
   global.getApp = function () {
     return appData
   }
+
+  // 模拟小程序appInstance在热启动时不会重新创建的行为，在外部创建跟随js context的appInstance
+  const appInstance = Object.assign({}, appData, Mpx.prototype)
+
+  defaultOptions.onShow && global.__mpxAppCbs.show.push(defaultOptions.onShow.bind(appInstance))
+  defaultOptions.onHide && global.__mpxAppCbs.hide.push(defaultOptions.onHide.bind(appInstance))
+  defaultOptions.onError && global.__mpxAppCbs.error.push(defaultOptions.onError.bind(appInstance))
+  defaultOptions.onUnhandledRejection && global.__mpxAppCbs.rejection.push(defaultOptions.onUnhandledRejection.bind(appInstance))
+  defaultOptions.onAppInit && defaultOptions.onAppInit()
+
   const pages = currentInject.getPages() || {}
   const firstPage = currentInject.firstPage
   const Stack = createStackNavigator()
@@ -80,63 +86,51 @@ export default function createApp (option, config = {}) {
     }
   }
 
-  global.__mpxAppCbs = global.__mpxAppCbs || {
-    show: [],
-    hide: [],
-    error: []
-  }
-
   global.__mpxAppLaunched = false
-
-  global.__mpxAppFocusedState = ref('show')
   global.__mpxOptionsMap[currentInject.moduleId] = memo((props) => {
-    const instanceRef = useRef(null)
-    if (!instanceRef.current) {
-      instanceRef.current = createAppInstance(appData)
-    }
-    const instance = instanceRef.current
+    const firstRef = useRef(true)
     const initialRouteRef = useRef({
       initialRouteName: firstPage,
       initialParams: {}
     })
+    if (firstRef.current) {
+      // 热启动情况下，app会被销毁重建，将__mpxAppHotLaunched重置保障路由等初始化逻辑正确执行
+      global.__mpxAppHotLaunched = false
+      // 热启动情况下重置__mpxPagesMap避免页面销毁函数未及时执行时错误地引用到之前的navigation
+      global.__mpxPagesMap = {}
+      firstRef.current = false
+    }
+    if (!global.__mpxAppHotLaunched) {
+      const { initialRouteName, initialParams } = Mpx.config.rnConfig.parseAppProps?.(props) || {}
+      initialRouteRef.current.initialRouteName = initialRouteName || initialRouteRef.current.initialRouteName
+      initialRouteRef.current.initialParams = initialParams || initialRouteRef.current.initialParams
 
-    if (!global.__mpxAppLaunched) {
-      const parsed = Mpx.config.rnConfig.parseAppProps?.(props) || {}
-      if (parsed.url) {
-        const { path, queryObj } = parseUrlQuery(parsed.url)
-        Object.assign(initialRouteRef.current, {
-          initialRouteName: path.startsWith('/') ? path.slice(1) : path,
-          initialParams: queryObj
-        })
-      }
       global.__mpxAppOnLaunch = (navigation) => {
-        global.__mpxAppLaunched = true
         const state = navigation.getState()
         Mpx.config.rnConfig.onStateChange?.(state)
         const current = state.routes[state.index]
-        global.__mpxEnterOptions = {
+        const options = {
           path: current.name,
           query: current.params,
           scene: 0,
           shareTicket: '',
-          referrerInfo: {}
+          referrerInfo: {},
+          isLaunch: true
+        }
+        global.__mpxEnterOptions = options
+        if (!global.__mpxAppLaunched) {
+          global.__mpxLaunchOptions = options
+          defaultOptions.onLaunch && defaultOptions.onLaunch.call(appInstance, options)
         }
-        defaultOptions.onLaunch && defaultOptions.onLaunch.call(instance, global.__mpxEnterOptions)
-        defaultOptions.onShow && defaultOptions.onShow.call(instance, global.__mpxEnterOptions)
+        global.__mpxAppCbs.show.forEach((cb) => {
+          cb(options)
+        })
+        global.__mpxAppLaunched = true
+        global.__mpxAppHotLaunched = true
       }
     }
 
     useEffect(() => {
-      if (defaultOptions.onShow) {
-        global.__mpxAppCbs.show.push(defaultOptions.onShow.bind(instance))
-      }
-      if (defaultOptions.onHide) {
-        global.__mpxAppCbs.hide.push(defaultOptions.onHide.bind(instance))
-      }
-      if (defaultOptions.onError) {
-        global.__mpxAppCbs.error.push(defaultOptions.onError.bind(instance))
-      }
-
       const changeSubscription = ReactNative.AppState.addEventListener('change', (currentState) => {
         if (currentState === 'active') {
           let options = global.__mpxEnterOptions
@@ -158,7 +152,7 @@ export default function createApp (option, config = {}) {
           if (navigation && hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
             global.__mpxPageStatusMap[navigation.pageId] = 'show'
           }
-        } else if (currentState === 'inactive') {
+        } else if (currentState === 'inactive' || currentState === 'background') {
           global.__mpxAppCbs.hide.forEach((cb) => {
             cb()
           })
@@ -187,6 +181,19 @@ export default function createApp (option, config = {}) {
     }, [])
 
     const { initialRouteName, initialParams } = initialRouteRef.current
+    const headerBackImageSource = Mpx.config.rnConfig.headerBackImageSource || null
+    const navScreenOpts = {
+      // 7.x替换headerBackTitleVisible
+      // headerBackButtonDisplayMode: 'minimal',
+      headerBackTitleVisible: false,
+      // 安卓上会出现初始化时闪现导航条的问题
+      headerShown: false,
+      // 隐藏导航下的那条线
+      headerShadowVisible: false
+    }
+    if (headerBackImageSource) {
+      navScreenOpts.headerBackImageSource = headerBackImageSource
+    }
     return createElement(SafeAreaProvider,
       null,
       createElement(NavigationContainer,
@@ -197,13 +204,7 @@ export default function createApp (option, config = {}) {
         createElement(Stack.Navigator,
           {
             initialRouteName,
-            screenOptions: {
-              gestureEnabled: true,
-              // 7.x替换headerBackTitleVisible
-              // headerBackButtonDisplayMode: 'minimal',
-              headerBackTitleVisible: false,
-              headerMode: 'float'
-            }
+            screenOptions: navScreenOpts
           },
           ...getPageScreens(initialRouteName, initialParams)
         )