@mpxjs/core 2.9.59 → 2.9.64

package/@types/global.d.ts

@@ -8,4 +8,4 @@ declare let __mpx_env__: string
 declare module '*?resolve' {
   const resourcePath: string
   export default resourcePath
-}
+}

package/@types/index.d.ts

@@ -7,10 +7,8 @@
 /// <reference path="./global.d.ts" />
 /// <reference path="./node.d.ts" />
 
-// @ts-ignore
 import { GetComputedType } from '@mpxjs/store'
 
-// @ts-ignore
 export * from '@mpxjs/store'
 
 // utils
@@ -34,17 +32,17 @@ type Data = object | (() => object)
 export type PropType<T> = {
   __type: T
 } & (
-  T extends String
+    T extends string
     ? StringConstructor
     : T extends number
-      ? NumberConstructor
-      : T extends boolean
-        ? BooleanConstructor
-        : T extends any[]
-          ? ArrayConstructor
-          : T extends object
-            ? ObjectConstructor
-            : never
+    ? NumberConstructor
+    : T extends boolean
+    ? BooleanConstructor
+    : T extends any[]
+    ? ArrayConstructor
+    : T extends object
+    ? ObjectConstructor
+    : never
   )
 
 type FullPropType<T> = {
@@ -85,10 +83,10 @@ type GetDataType<T> = T extends () => any ? ReturnType<T> : T
 
 type GetPropsType<T extends Properties> = {
   readonly [K in keyof T]: T[K] extends FullPropType<infer V>
-    ? V
-    : T[K] extends PropType<infer V>
-      ? V
-      : WechatMiniprogram.Component.PropertyToData<T[K]>
+  ? V
+  : T[K] extends PropType<infer V>
+  ? V
+  : WechatMiniprogram.Component.PropertyToData<T[K]>
 }
 
 type RequiredPropertyNames<T> = {
@@ -246,7 +244,7 @@ export function injectMixins (mixins: object | Array<object>, options?: MixinTyp
 // export function watch (expr: string | (() => any), handler: WatchHandler | WatchOptWithHandler, options?: WatchOpt): () => void
 
 interface AnyConstructor {
-  new (...args: any[]): any
+  new(...args: any[]): any
 
   prototype: any
 }
@@ -266,6 +264,7 @@ interface MpxConfig {
   setDataHandler: (data: object, target: ComponentIns<{}, {}, {}, {}, []>) => any | null
   forceFlushSync: boolean,
   webRouteConfig: object,
+  webConfig: object,
   webviewConfig?: WebviewConfig
 }
 
@@ -285,9 +284,9 @@ export type Plugin = PluginInstallFunction | {
   install: PluginInstallFunction
 }
 
-export type PluginFunction<T extends Plugin> = T extends PluginInstallFunction ? T : T extends { install: infer U } ? U : never;
+export type PluginFunction<T extends Plugin> = T extends PluginInstallFunction ? T : T extends { install: infer U } ? U : never
 
-export type PluginFunctionParams<T extends PluginInstallFunction> = T extends (app: any, ...args: infer P) => any ? P : [];
+export type PluginFunctionParams<T extends PluginInstallFunction> = T extends (app: any, ...args: infer P) => any ? P : []
 
 export interface Mpx {
   getMixin: typeof getMixin
@@ -297,7 +296,7 @@ export interface Mpx {
   observable: typeof observable
   watch: typeof watch
 
-  use <T extends Plugin = Plugin>(plugin: T, ...rest: PluginFunctionParams<PluginFunction<T>>): Mpx
+  use<T extends Plugin = Plugin> (plugin: T, ...rest: PluginFunctionParams<PluginFunction<T>>): Mpx
 
   implement (name: string, options?: ImplementOptions): void
 
@@ -376,8 +375,8 @@ export interface RefUnwrapBailTypes {
 export type UnwrapRef<T> = T extends ShallowRef<infer V>
   ? V
   : T extends Ref<infer V>
-    ? UnwrapRefSimple<V>
-    : UnwrapRefSimple<T>
+  ? UnwrapRefSimple<V>
+  : UnwrapRefSimple<T>
 
 export type UnwrapRefSimple<T> = T extends | Function
   | CollectionTypes
@@ -386,10 +385,10 @@ export type UnwrapRefSimple<T> = T extends | Function
   | RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
   ? T
   : T extends Array<any>
-    ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
-    : T extends object & { [ShallowReactiveMarker]?: never } // not a shallowReactive
-      ? { [P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]> }
-      : T
+  ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
+  : T extends object & { [ShallowReactiveMarker]?: never } // not a shallowReactive
+  ? { [P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]> }
+  : T
 
 // If the the type T accepts type "any", output type Y, otherwise output type N.
 // https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
@@ -426,9 +425,7 @@ export interface ComputedRef<T = any> extends WritableComputedRef<T> {
   [ComputedRefSymbol]: true
 }
 
-export interface WritableComputedRef<T> extends Ref<T> {
-  // readonly effect: ReactiveEffect<T>
-}
+export type WritableComputedRef<T> = Ref<T>
 
 type WatchCallback<T> = (
   value: T,
@@ -462,7 +459,6 @@ interface EffectScope {
   resume (ignoreDirty?: boolean): void
 }
 
-
 type StringObj = {
   [k: string]: string | StringObj
 }
@@ -489,7 +485,6 @@ interface UseI18n {
   mergeLocaleMessage (locale: string, messages: StringObj): void
 }
 
-
 export function ref<T extends object> (
   value: T
 ): [T] extends [Ref] ? T : Ref<UnwrapRef<T>>
@@ -529,7 +524,6 @@ export function computed<T> (
   options: WritableComputedOptions<T>
 ): WritableComputedRef<T>
 
-
 export function watchEffect (
   effect: (onCleanup: (cleanupFn: () => void) => void) => void,
   options?: WatchEffectOptions
@@ -545,7 +539,6 @@ export function watchPostEffect (
   options?: WatchEffectOptions
 ): void
 
-
 export function watch<T extends MultiWatchSources> (
   sources: [...T],
   callback: WatchCallback<{
@@ -572,13 +565,9 @@ export function watch<T extends Reactive<object>> ( // for reactive value
 ): () => void
 
 export function effectScope (detached?: boolean): EffectScope
-
 export function getCurrentScope (): EffectScope | undefined
-
 export function onScopeDispose (fn: () => void): void
-
 export function set<T extends object> (target: T, key: string | number, value: any): void
-
 export function del<T extends object> (target: T, key: keyof T): void
 
 // nextTick
@@ -586,43 +575,25 @@ export function nextTick (fn: () => any): void
 
 // lifecycle
 export function onBeforeMount (callback: () => void): void
-
 export function onMounted (callback: () => void): void
-
 export function onBeforeUpdate (callback: () => void): void
-
 export function onUpdated (callback: () => void): void
-
 export function onBeforeUnmount (callback: () => void): void
-
 export function onUnmounted (callback: () => void): void
-
 export function onLoad<T extends Record<string, string | undefined>> (callback: (query: T) => void): void
-
-// wechat dose not have generics
-// export function onLoad (callback: WechatMiniprogram.Page.ILifetime['onLoad']): void
-
 export function onShow (callback: WechatMiniprogram.Page.ILifetime['onShow']): void
-
 export function onHide (callback: WechatMiniprogram.Page.ILifetime['onHide']): void
-
 export function onResize (callback: WechatMiniprogram.Page.ILifetime['onResize']): void
-
 export function onPullDownRefresh (callback: WechatMiniprogram.Page.ILifetime['onPullDownRefresh']): void
-
 export function onReachBottom (callback: WechatMiniprogram.Page.ILifetime['onReachBottom']): void
-
 export function onShareAppMessage (callback: WechatMiniprogram.Page.ILifetime['onShareAppMessage']): void
-
 export function onShareTimeline (callback: WechatMiniprogram.Page.ILifetime['onShareTimeline']): void
-
 export function onAddToFavorites (callback: WechatMiniprogram.Page.ILifetime['onAddToFavorites']): void
-
 export function onPageScroll (callback: WechatMiniprogram.Page.ILifetime['onPageScroll']): void
-
 export function onTabItemTap (callback: WechatMiniprogram.Page.ILifetime['onTabItemTap']): void
-
 export function onSaveExitState (callback: () => void): void
+export function onServerPrefetch (callback: () => any): void
+export function onReactHooksExec (callback: () => void): void
 
 // get instance
 export function getCurrentInstance<T extends ComponentIns<{}, {}, {}>> (): { proxy: T, [x: string]: any }
@@ -672,6 +643,8 @@ export const ONLOAD: string
 export const ONSHOW: string
 export const ONHIDE: string
 export const ONRESIZE: string
+export const SERVERPREFETCH: string
+export const REACTHOOKSEXEC: string
 
 declare global {
   const defineProps: (<T extends Properties = {}>(props: T) => Readonly<GetPropsType<T>>) & (<T>() => Readonly<T>)

package/@types/node.d.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 declare let global: Record<string, any> // in web, we use global varible to do some things, here to declare
 
 type Dict<T> = {
@@ -7,7 +6,6 @@ type Dict<T> = {
 
 type EnvType = Dict<string>
 
-// @ts-ignore
 declare let process: {
   env: EnvType
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.59",
+  "version": "2.9.64",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.59",
+    "@mpxjs/utils": "^2.9.64",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -31,7 +31,9 @@
     "@react-navigation/native-stack": "^6.9.26",
     "react": "*",
     "react-native": "*",
+    "react-native-gesture-handler": "^2.19.0",
     "react-native-safe-area-context": "^4.10.1",
+    "react-native-webview": "^13.10.5",
     "vue": "^2.7.10",
     "vue-demi": "^0.14.6",
     "vue-i18n": "^8.27.2",
@@ -67,6 +69,12 @@
     },
     "react-native-safe-area-context": {
       "optional": true
+    },
+    "react-native-webview": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -85,5 +93,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "aa001c11cc7b21772fc6f9f5bcdd13118fc6d67c"
+  "gitHead": "803334dc0e600f219d514c27461aa7663b7a6653"
 }

package/src/convertor/wxToReact.js

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

package/src/core/innerLifecycle.js

@@ -11,6 +11,7 @@ export const ONSHOW = '__onShow__'
 export const ONHIDE = '__onHide__'
 export const ONRESIZE = '__onResize__'
 export const SERVERPREFETCH = '__serverPrefetch__'
+export const REACTHOOKSEXEC = '__reactHooksExec__'
 
 export const INNER_LIFECYCLES = [
   BEFORECREATE,
@@ -21,6 +22,7 @@ export const INNER_LIFECYCLES = [
   UPDATED,
   BEFOREUNMOUNT,
   SERVERPREFETCH,
+  REACTHOOKSEXEC,
   UNMOUNTED,
   ONLOAD,
   ONSHOW,

package/src/core/mergeOptions.js

@@ -354,7 +354,7 @@ function transformHOOKS (options) {
     const componentHooksMap = makeMap(convertRule.lifecycle.component)
     for (const key in options) {
       // 使用Component创建page实例，页面专属生命周期&自定义方法需写在methods内部
-      if (typeof options[key] === 'function' && key !== 'dataFn' && key !== 'setup' && key !== 'serverPrefetch' && !componentHooksMap[key]) {
+      if (typeof options[key] === 'function' && key !== 'dataFn' && key !== 'setup' && !componentHooksMap[key]) {
         if (!options.methods) options.methods = {}
         options.methods[key] = options[key]
         delete options[key]

package/src/core/proxy.js

@@ -42,7 +42,8 @@ import {
   ONLOAD,
   ONSHOW,
   ONHIDE,
-  ONRESIZE
+  ONRESIZE,
+  REACTHOOKSEXEC
 } from './innerLifecycle'
 import contextMap from '../dynamic/vnode/context'
 import { getAst } from '../dynamic/astCache'
@@ -498,11 +499,28 @@ export default class MpxProxy {
     return result
   }
 
-  doRenderWithVNode (vnode) {
+  doRenderWithVNode (vnode, cb) {
+    const renderTask = this.createRenderTask()
+    let callback = cb
+    // mounted之后才会触发BEFOREUPDATE/UPDATED
+    if (this.isMounted()) {
+      this.callHook(BEFOREUPDATE)
+      callback = () => {
+        cb && cb()
+        this.callHook(UPDATED)
+        renderTask && renderTask.resolve()
+      }
+    }
     if (!this._vnode) {
-      this.target.__render({ r: vnode })
+      this._vnode = diffAndCloneA(vnode).clone
+      pauseTracking()
+      // 触发渲染时暂停数据响应追踪，避免误收集到子组件的数据依赖
+      this.target.__render({ r: vnode }, callback)
+      resetTracking()
     } else {
-      let diffPath = diffAndCloneA(vnode, this._vnode).diffData
+      const result = diffAndCloneA(vnode, this._vnode)
+      this._vnode = result.clone
+      let diffPath = result.diffData
       if (!isEmptyObject(diffPath)) {
         // 构造 diffPath 数据
         diffPath = Object.keys(diffPath).reduce((preVal, curVal) => {
@@ -510,11 +528,11 @@ export default class MpxProxy {
           preVal[key] = diffPath[curVal]
           return preVal
         }, {})
-        this.target.__render(diffPath)
+        pauseTracking()
+        this.target.__render(diffPath, callback)
+        resetTracking()
       }
     }
-    // 缓存本地的 vnode 用以下一次 diff
-    this._vnode = diffAndCloneA(vnode).clone
   }
 
   doRender (data, cb) {
@@ -734,6 +752,7 @@ export const onShow = createHook(ONSHOW)
 export const onHide = createHook(ONHIDE)
 export const onResize = createHook(ONRESIZE)
 export const onServerPrefetch = createHook(SERVERPREFETCH)
+export const onReactHooksExec = createHook(REACTHOOKSEXEC)
 export const onPullDownRefresh = createHook('__onPullDownRefresh__')
 export const onReachBottom = createHook('__onReachBottom__')
 export const onShareAppMessage = createHook('__onShareAppMessage__')

package/src/index.js

@@ -29,11 +29,12 @@ export {
   UPDATED,
   BEFOREUNMOUNT,
   UNMOUNTED,
-  SERVERPREFETCH,
   ONLOAD,
   ONSHOW,
   ONHIDE,
-  ONRESIZE
+  ONRESIZE,
+  SERVERPREFETCH,
+  REACTHOOKSEXEC
 } from './core/innerLifecycle'
 
 export {
@@ -43,7 +44,6 @@ export {
   onUpdated,
   onBeforeUnmount,
   onUnmounted,
-  onServerPrefetch,
   onLoad,
   onShow,
   onHide,
@@ -55,7 +55,9 @@ export {
   onAddToFavorites,
   onPageScroll,
   onTabItemTap,
-  onSaveExitState
+  onSaveExitState,
+  onServerPrefetch,
+  onReactHooksExec
 } from './core/proxy'
 
 export { getMixin } from './core/mergeOptions'
@@ -136,19 +138,21 @@ Mpx.config = {
   ignoreProxyWhiteList: ['id', 'dataset', 'data'],
   observeClassInstance: false,
   errorHandler: null,
+  warnHandler: null,
   proxyEventHandler: null,
   setDataHandler: null,
   forceFlushSync: false,
   webRouteConfig: {},
+  webConfig: {},
   /*
     支持两个属性
     hostWhitelists Array 类型 支持h5域名白名单安全校验
     apiImplementations webview JSSDK接口 例如getlocation
    */
   webviewConfig: {},
-   /**
-   * react-native 相关配置，用于挂载事件等，如 onShareAppMessage
-   */
+  /**
+  * react-native 相关配置，用于挂载事件等，如 onShareAppMessage
+  */
   rnConfig: {}
 }
 

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

@@ -1,14 +1,8 @@
-import { warn, type } from '@mpxjs/utils'
 export default function directiveHelperMixin () {
   return {
     methods: {
       __getWxKey (item, key) {
-        const value = key === '*this' ? item : item[key]
-        if (typeof value === 'string' || typeof value === 'number') {
-          return value
-        } else {
-          warn(`wx:key's value should return a string or a number, received: ${type(value)}`, this.__mpxProxy.options.mpxFileResource)
-        }
+        return key === '*this' ? item : item[key]
       }
     }
   }

package/src/platform/builtInMixins/index.js

@@ -14,13 +14,13 @@ import { dynamicRefsMixin, dynamicRenderHelperMixin, dynamicSlotMixin } from '..
 import styleHelperMixin from './styleHelperMixin'
 import directiveHelperMixin from './directiveHelperMixin'
 
-export default function getBuiltInMixins (options, type) {
+export default function getBuiltInMixins ({ type, rawOptions = {} }) {
   let bulitInMixins
   if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
     bulitInMixins = [
       proxyEventMixin(),
       directiveHelperMixin(),
-      styleHelperMixin(type),
+      styleHelperMixin(),
       refsMixin(),
       i18nMixin()
     ]
@@ -46,7 +46,7 @@ export default function getBuiltInMixins (options, type) {
       relationsMixin(type)
     ]
     // 此为纯增强类mixins，原生模式下不需要注入
-    if (!options.__nativeRender__) {
+    if (!rawOptions.__nativeRender__) {
       bulitInMixins = bulitInMixins.concat([
         renderHelperMixin(),
         showMixin(type),

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

@@ -1,76 +1,55 @@
-import { BEFORECREATE, CREATED } from '../../core/innerLifecycle'
+import { BEFORECREATE } from '../../core/innerLifecycle'
 import { createSelectorQuery } from '@mpxjs/api-proxy'
-import { computed } from '../../observer/computed'
 
 export default function getRefsMixin () {
   return {
     [BEFORECREATE] () {
       this.__refs = {}
       this.$refs = {}
-    },
-    // __getRefs强依赖数据响应，需要在CREATED中执行
-    [CREATED] () {
       this.__getRefs()
     },
     methods: {
       __getRefs () {
         const refs = this.__getRefsData() || []
         const target = this
-        this.__selectorMap = computed(() => {
-          const selectorMap = {}
-          refs.forEach(({ key, type, sKeys }) => {
-            // sKeys 是使用 wx:ref 没有值的标记场景，支持运行时的 createSelectorQuery 的使用
-            if (sKeys) {
-              sKeys.forEach((item = {}) => {
-                const computedKey = item.key
-                const prefix = item.prefix
-                const selectors = this[computedKey] || ''
-                selectors.trim().split(/\s+/).forEach(item => {
-                  const selector = prefix + item
-                  selectorMap[selector] = selectorMap[selector] || []
-                  selectorMap[selector].push({ type, key })
-                })
-              })
-            } else {
-              selectorMap[key] = selectorMap[key] || []
-              selectorMap[key].push({ type, key })
+        refs.forEach(({ key, type, all }) => {
+          Object.defineProperty(this.$refs, key, {
+            enumerable: true,
+            configurable: true,
+            get () {
+              if (type === 'component') {
+                return all ? target.selectAllComponents(key) : target.selectComponent(key)
+              } else {
+                return createSelectorQuery().in(target).select(key, all)
+              }
             }
           })
-          return selectorMap
         })
-        refs.forEach(({ key, type, all, sKeys }) => {
-          // 如果没有 sKey 说明使用的是 wx:ref="xxx" 的场景
-          if (!sKeys) {
-            Object.defineProperty(this.$refs, key, {
-              enumerable: true,
-              configurable: true,
-              get () {
-                const refs = target.__refs[key] || []
-                if (type === 'component') {
-                  return all ? refs : refs[0]
-                } else {
-                  return createSelectorQuery().in(target).select(key, all)
-                }
+      },
+      __getRefVal (type, selectorsConf) {
+        return (instance) => {
+          if (instance) {
+            selectorsConf.forEach((item = []) => {
+              const [prefix, selectors = ''] = item
+              if (selectors) {
+                selectors.trim().split(/\s+/).forEach(selector => {
+                  const refKey = prefix + selector
+                  this.__refs[refKey] = this.__refs[refKey] || []
+                  this.__refs[refKey].push({ type, instance })
+                })
               }
             })
           }
-        })
-      },
-      __getRefVal (key) {
-        if (!this.__refs[key]) {
-          this.__refs[key] = []
         }
-        return (instance) => instance && this.__refs[key].push(instance)
       },
       __selectRef (selector, refType, all = false) {
-        const splitedSelector = selector.match(/(#|\.)?\w+/g) || []
+        const splitedSelector = selector.match(/(#|\.)?[^.#]+/g) || []
         const refsArr = splitedSelector.map(selector => {
-          const selectorMap = this.__selectorMap?.value[selector] || []
+          const refs = this.__refs[selector] || []
           const res = []
-          selectorMap.forEach(({ type, key }) => {
+          refs.forEach(({ type, instance }) => {
             if (type === refType) {
-              const _refs = this.__refs[key] || []
-              res.push(..._refs)
+              res.push(instance)
             }
           })
           return res

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

@@ -1,8 +1,59 @@
-import { isObject, isArray, dash2hump, isFunction } from '@mpxjs/utils'
-import { Dimensions } from 'react-native'
+import { isObject, isArray, dash2hump, isFunction, cached } from '@mpxjs/utils'
+import { Dimensions, StyleSheet } from 'react-native'
 
-function concat (a, b) {
-  return a ? b ? (a + ' ' + b) : a : (b || '')
+function rpx (value) {
+  const { width } = Dimensions.get('screen')
+  // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
+  // px = rpx * (750 / 屏幕宽度)
+  return value * width / 750
+}
+function vw (value) {
+  const { width } = Dimensions.get('screen')
+  return value * width / 100
+}
+function vh (value) {
+  const { height } = Dimensions.get('screen')
+  return value * height / 100
+}
+
+global.__unit = {
+  rpx,
+  vw,
+  vh
+}
+global.__hairlineWidth = StyleSheet.hairlineWidth
+
+const escapeReg = /[()[\]{}#!.:,%'"+$]/g
+const escapeMap = {
+  '(': '_pl_',
+  ')': '_pr_',
+  '[': '_bl_',
+  ']': '_br_',
+  '{': '_cl_',
+  '}': '_cr_',
+  '#': '_h_',
+  '!': '_i_',
+  '/': '_s_',
+  '.': '_d_',
+  ':': '_c_',
+  ',': '_2c_',
+  '%': '_p_',
+  '\'': '_q_',
+  '"': '_dq_',
+  '+': '_a_',
+  $: '_si_'
+}
+
+const mpEscape = cached((str) => {
+  return str.replace(escapeReg, function (match) {
+    if (escapeMap[match]) return escapeMap[match]
+    // unknown escaped
+    return '_u_'
+  })
+})
+
+function concat (a = '', b = '') {
+  return a ? b ? (a + ' ' + b) : a : b
 }
 
 function stringifyArray (value) {
@@ -41,10 +92,12 @@ function stringifyDynamicClass (value) {
 
 const listDelimiter = /;(?![^(]*[)])/g
 const propertyDelimiter = /:(.+)/
-const rpxRegExp = /^\s*(-?\d+(\.\d+)?)rpx\s*$/
-const pxRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
+const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
+const hairlineRegExp = /^\s*hairlineWidth\s*$/
+const varRegExp = /^--/
 
-function parseStyleText (cssText) {
+const parseStyleText = cached((cssText = '') => {
   const res = {}
   const arr = cssText.split(listDelimiter)
   for (let i = 0; i < arr.length; i++) {
@@ -52,13 +105,14 @@ function parseStyleText (cssText) {
     if (item) {
       const tmp = item.split(propertyDelimiter)
       if (tmp.length > 1) {
-        const k = dash2hump(tmp[0].trim())
+        let k = tmp[0].trim()
+        k = varRegExp.test(k) ? k : dash2hump(k)
         res[k] = tmp[1].trim()
       }
     }
   }
   return res
-}
+})
 
 function normalizeDynamicStyle (value) {
   if (!value) return {}
@@ -79,65 +133,61 @@ function mergeObjectArray (arr) {
   return res
 }
 
-function transformStyleObj (context, styleObj) {
+function transformStyleObj (styleObj) {
   const keys = Object.keys(styleObj)
   const transformed = {}
   keys.forEach((prop) => {
-    // todo 检测不支持的prop
     let value = styleObj[prop]
     let matched
-    if ((matched = pxRegExp.exec(value))) {
+    if ((matched = numberRegExp.exec(value))) {
       value = +matched[1]
-    } else if ((matched = rpxRegExp.exec(value))) {
-      value = context.__rpx(+matched[1])
+    } else if ((matched = unitRegExp.exec(value))) {
+      value = global.__unit[matched[2]](+matched[1])
+    } else if (hairlineRegExp.test(value)) {
+      value = StyleSheet.hairlineWidth
     }
-    // todo 检测不支持的value
     transformed[prop] = value
   })
   return transformed
 }
 
-export default function styleHelperMixin (type) {
+export default function styleHelperMixin () {
   return {
     methods: {
-      __rpx (value) {
-        const { width } = Dimensions.get('screen')
-        // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
-        // px = rpx * (750 / 屏幕宽度)
-        return value * width / 750
-      },
       __getClass (staticClass, dynamicClass) {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
-      __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, show) {
-        // todo 每次返回新对象会导致react memo优化失效，需要考虑优化手段
-        const result = []
+      __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
+        const result = {}
         const classMap = {}
-        if (type === 'page' && isFunction(global.__getAppClassMap)) {
-          Object.assign(classMap, global.__getAppClassMap.call(this))
+        // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
+        if (isFunction(global.__getAppClassMap)) {
+          Object.assign(classMap, global.__getAppClassMap())
         }
         if (isFunction(this.__getClassMap)) {
           Object.assign(classMap, this.__getClassMap())
         }
+
         if (staticClass || dynamicClass) {
-          const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
+          // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
+          const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
           classString.split(/\s+/).forEach((className) => {
             if (classMap[className]) {
-              result.push(classMap[className])
-            } else if (this.props[className]) {
-              // externalClasses必定以数组形式传递下来
-              result.push(...this.props[className])
+              Object.assign(result, classMap[className])
+            } else if (this.props[className] && isObject(this.props[className])) {
+              // externalClasses必定以对象形式传递下来
+              Object.assign(result, this.props[className])
             }
           })
         }
 
         if (staticStyle || dynamicStyle) {
-          const styleObj = Object.assign(parseStyleText(staticStyle), normalizeDynamicStyle(dynamicStyle))
-          result.push(transformStyleObj(this, styleObj))
+          const styleObj = Object.assign({}, parseStyleText(staticStyle), normalizeDynamicStyle(dynamicStyle))
+          Object.assign(result, transformStyleObj(styleObj))
         }
 
-        if (show === false) {
-          result.push({
+        if (hide) {
+          Object.assign(result, {
             display: 'none'
           })
         }

package/src/platform/createApp.ios.js

@@ -133,7 +133,7 @@ export default function createApp (option, config = {}) {
         global.__mpxAppFocusedState.value = `resize${count++}`
       })
       return () => {
-        changeSubscription()
+        changeSubscription && changeSubscription.remove()
         resizeSubScription && resizeSubScription.remove()
       }
     }, [])

package/src/platform/patch/index.js

@@ -58,7 +58,7 @@ export default function createFactory (type) {
     // 不接受mixin中的setup配置
     // 注入内建的mixins, 内建mixin是按原始平台编写的，所以合并规则和rootMixins保持一致
     // 将合并后的用户定义的rawOptions传入获取当前应该注入的内建mixins
-    rawOptions.mixins = getBuiltInMixins(rawOptions, type)
+    rawOptions.mixins = getBuiltInMixins({ type, rawOptions, currentInject })
     const defaultOptions = getDefaultOptions({ type, rawOptions, currentInject })
     if (__mpx_mode__ === 'web' || __mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
       global.__mpxOptionsMap = global.__mpxOptionsMap || {}

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

@@ -1,11 +1,11 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, 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 } from '@mpxjs/utils'
+import { hasOwn, isFunction, noop, isObject, error, getByPath, collectDataset, hump2dash } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
-import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE } from '../../../core/innerLifecycle'
+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'
@@ -24,20 +24,7 @@ function getSystemInfo () {
   }
 }
 
-function getRootProps (props) {
-  const rootProps = {}
-  for (const key in props) {
-    if (hasOwn(props, key)) {
-      const match = /^(bind|catch|capture-bind|capture-catch|style):?(.*?)(?:\.(.*))?$/.exec(key)
-      if (match) {
-        rootProps[key] = props[key]
-      }
-    }
-  }
-  return rootProps
-}
-
-function createEffect (proxy, components, props) {
+function createEffect (proxy, components) {
   const update = proxy.update = () => {
     // pre render for props update
     if (proxy.propsUpdatedFlag) {
@@ -57,56 +44,80 @@ function createEffect (proxy, components, props) {
     return components[tagName] || getByPath(ReactNative, tagName)
   }
   proxy.effect = new ReactiveEffect(() => {
-    return proxy.target.__injectedRender(createElement, getComponent, getRootProps(props))
+    // reset instance
+    proxy.target.__resetInstance()
+    return proxy.target.__injectedRender(createElement, getComponent)
   }, () => queueJob(update), proxy.scope)
 }
 
-function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components }) {
+function getRootProps (props) {
+  const rootProps = {}
+  for (const key in props) {
+    if (hasOwn(props, key)) {
+      const match = /^(bind|catch|capture-bind|capture-catch|style|enable-var):?(.*?)(?:\.(.*))?$/.exec(key)
+      if (match) {
+        rootProps[key] = props[key]
+      }
+    }
+  }
+  return rootProps
+}
+
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components, pageId }) {
   const instance = Object.create({
     setData (data, callback) {
       return this.__mpxProxy.forceUpdate(data, { sync: true }, callback)
     },
+    getPageId () {
+      return pageId
+    },
     __getProps () {
-      const propsData = {}
       const props = propsRef.current
+      const propsData = {}
       Object.keys(validProps).forEach((key) => {
         if (hasOwn(props, key)) {
           propsData[key] = props[key]
         } else {
-          let field = validProps[key]
-          if (isFunction(field) || field === null) {
-            field = {
-              type: field
+          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
+              }
             }
+            // 处理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 && child.props && child.props.slot === name) {
+            if (child?.props?.slot === name) {
               result.push(child)
             }
           })
         } else {
-          if (children && children.props && children.props.slot === name) {
+          if (children?.props?.slot === name) {
             result.push(children)
           }
         }
         return result.filter(item => {
-          if (this.__dispatchedSlotSet.has(item)) {
-            return false
-          } else {
-            this.__dispatchedSlotSet.add(item)
-            return true
-          }
+          if (!isObject(item) || this.__dispatchedSlotSet.has(item)) return false
+          this.__dispatchedSlotSet.add(item)
+          return true
         })
       }
       return null
@@ -204,17 +215,13 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
   const proxy = instance.__mpxProxy = new MpxProxy(rawOptions, instance)
   proxy.created()
 
-  if (type === 'page') {
-    proxy.callHook(ONLOAD, [props.route.params || {}])
-  }
-
   Object.assign(proxy, {
     onStoreChange: null,
     // eslint-disable-next-line symbol-description
     stateVersion: Symbol(),
     subscribe: (onStoreChange) => {
       if (!proxy.effect) {
-        createEffect(proxy, components, propsRef.current)
+        createEffect(proxy, components)
         // eslint-disable-next-line symbol-description
         proxy.stateVersion = Symbol()
       }
@@ -231,7 +238,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
   })
   // react数据响应组件更新管理器
   if (!proxy.effect) {
-    createEffect(proxy, components, propsRef.current)
+    createEffect(proxy, components)
   }
 
   return instance
@@ -253,7 +260,7 @@ function hasPageHook (mpxProxy, hookNames) {
   })
 }
 
-const routeContext = createContext(null)
+const RouteContext = createContext(null)
 
 const triggerPageStatusHook = (mpxProxy, event) => {
   mpxProxy.callHook(event === 'show' ? ONSHOW : ONHIDE)
@@ -277,13 +284,7 @@ const triggerResizeEvent = (mpxProxy) => {
   }
 }
 
-function usePageContext (mpxProxy, instance) {
-  const { pageId } = useContext(routeContext) || {}
-
-  instance.getPageId = () => {
-    return pageId
-  }
-
+function usePageEffect (mpxProxy, pageId) {
   useEffect(() => {
     let unWatch
     const hasShowHook = hasPageHook(mpxProxy, [ONSHOW, 'show'])
@@ -300,7 +301,6 @@ function usePageContext (mpxProxy, instance) {
         })
       }
     }
-
     return () => {
       unWatch && unWatch()
     }
@@ -343,45 +343,53 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
   const defaultOptions = memo(forwardRef((props, ref) => {
     const instanceRef = useRef(null)
-    const propsRef = useRef(props)
+    const propsRef = useRef(null)
+    const pageId = useContext(RouteContext)
+    propsRef.current = props
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
-      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components, pageId })
     }
     const instance = instanceRef.current
-    // reset instance
-    instance.__refs = {}
-    instance.__dispatchedSlotSet = new WeakSet()
     useImperativeHandle(ref, () => {
       return instance
     })
-    const proxy = instance.__mpxProxy
 
-    if (!isFirst) {
-      // 处理props更新
-      propsRef.current = props
-      Object.keys(props).forEach(key => {
-        if (hasOwn(validProps, key)) {
-          instance[key] = props[key]
-        }
-      })
-      proxy.propsUpdated()
-    }
+    const proxy = instance.__mpxProxy
 
-    usePageContext(proxy, instance)
+    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]
+            }
+          }
+        })
+      }
       if (proxy.pendingUpdatedFlag) {
         proxy.pendingUpdatedFlag = false
         proxy.callHook(UPDATED)
       }
     })
 
+    usePageEffect(proxy, pageId)
+
     useEffect(() => {
+      if (type === 'page') {
+        proxy.callHook(ONLOAD, [props.route.params || {}])
+      }
       proxy.mounted()
       return () => {
         proxy.unmounted()
+        proxy.target.__resetInstance()
         if (type === 'page') {
           delete global.__mpxPagesMap[props.route.key]
         }
@@ -390,11 +398,18 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     useSyncExternalStore(proxy.subscribe, proxy.getSnapshot)
 
-    return proxy.effect.run()
+    const root = rawOptions.options?.disableMemo ? proxy.effect.run() : useMemo(() => proxy.effect.run(), [proxy.stateVersion])
+    if (root) {
+      const rootProps = getRootProps(props)
+      rootProps.style = { ...root.props.style, ...rootProps.style }
+      // update root props
+      return cloneElement(root, rootProps)
+    }
+    return root
   }))
 
   if (type === 'page') {
-    const { Provider, useSafeAreaInsets } = global.__navigationHelper
+    const { Provider, useSafeAreaInsets, GestureHandlerRootView } = global.__navigationHelper
     const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
     const Page = ({ navigation, route }) => {
       const currentPageId = useMemo(() => ++pageId, [])
@@ -411,31 +426,30 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
         })
       }, [])
 
-      const insets = useSafeAreaInsets()
-      const safeAreaPadding = {
-        paddingTop: insets.top,
-        paddingLeft: insets.left
-      }
+      navigation.insets = useSafeAreaInsets()
 
-      return createElement(Provider,
-        null,
-        createElement(ReactNative.View,
-          {
-            style: {
-              ...pageConfig.navigationStyle === 'custom' && safeAreaPadding,
-              ...ReactNative.StyleSheet.absoluteFillObject,
-              backgroundColor: pageConfig.backgroundColor || '#ffffff'
-            }
+      return createElement(GestureHandlerRootView,
+        {
+          style: {
+            flex: 1,
+            backgroundColor: pageConfig.backgroundColor || '#ffffff'
           },
-          createElement(routeContext.Provider,
+          onLayout (e) {
+            navigation.layout = e.nativeEvent.layout
+          }
+        },
+        // todo custom portal host for active route
+        createElement(Provider,
+          null,
+          createElement(RouteContext.Provider,
             {
-              value: { pageId: currentPageId }
+              value: currentPageId
             },
             createElement(defaultOptions,
               {
                 navigation,
                 route,
-                pageConfig
+                id: currentPageId
               }
             )
           )

package/src/platform/patch/wx/lifecycle.js

@@ -5,7 +5,9 @@ import {
   ONSHOW,
   ONHIDE,
   ONLOAD,
-  ONRESIZE
+  ONRESIZE,
+  SERVERPREFETCH,
+  REACTHOOKSEXEC
 } from '../../../core/innerLifecycle'
 
 const APP_HOOKS = [
@@ -16,6 +18,7 @@ const APP_HOOKS = [
   'onPageNotFound',
   'onUnhandledRejection',
   'onThemeChange',
+  'onSSRAppCreated',
   'onAppInit'
 ]
 
@@ -43,7 +46,9 @@ const COMPONENT_HOOKS = [
   'moved',
   'detached',
   'pageShow',
-  'pageHide'
+  'pageHide',
+  'serverPrefetch',
+  'reactHooksExec'
 ]
 
 export const lifecycleProxyMap = {
@@ -54,7 +59,9 @@ export const lifecycleProxyMap = {
   [ONSHOW]: ['pageShow', 'onShow'],
   [ONHIDE]: ['pageHide', 'onHide'],
   [ONLOAD]: ['onLoad'],
-  [ONRESIZE]: ['onResize']
+  [ONRESIZE]: ['onResize'],
+  [SERVERPREFETCH]: ['serverPrefetch'],
+  [REACTHOOKSEXEC]: ['reactHooksExec']
 }
 
 export const LIFECYCLE = {