@mpxjs/core 2.10.17-beta.6 → 2.10.17-beta.8-effect-log

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.17-beta.6",
+  "version": "2.10.17-beta.8-effect-log",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",

package/src/core/proxy.js

@@ -166,6 +166,7 @@ export default class MpxProxy {
   }
 
   created () {
+    console.log('[mpx] create proxy instance')
     if (__mpx_dynamic_runtime__) {
       // 缓存上下文，在 destoryed 阶段删除
       contextMap.set(this.uid, this.target)
@@ -752,6 +753,13 @@ export default class MpxProxy {
     const moduleId = this.target.__moduleId
     const dynamicTarget = this.target.__dynamic
 
+    const debugConfig = typeof global.__getMpxRenderEffectDebugRules === 'function'
+      ? global.__getMpxRenderEffectDebugRules(this.options?.mpxFileResource)
+      : {
+          debug: 1,
+          name: `MpxRenderEffect-${this.options?.mpxFileResource || 'unknown'}`
+        }
+
     const effect = this.effect = new ReactiveEffect(() => {
       // pre render for props update
       if (this.propsUpdatedFlag) {
@@ -781,8 +789,9 @@ export default class MpxProxy {
       } else {
         this.render()
       }
-    }, () => queueJob(update), this.scope)
+    }, () => queueJob(update), this.scope, this.scope, debugConfig.debug, debugConfig.name)
 
+    console.log(`[mpx] ${this.options?.mpxFileResource} will initRender`)
     const update = this.update = effect.run.bind(effect)
     update.id = this.uid
     // render effect允许自触发

package/src/observer/array.js

@@ -32,7 +32,7 @@ export const arrayMethods = Object.create(arrayProto)
       }
       if (inserted) ob.observeArray(inserted)
       // notify change
-      ob.dep.notify()
+      ob.dep.notify(method, '[Array Method]', '[Array Method]', new Error('此时被通知变更').stack)
     }
     return result
   })

package/src/observer/computed.js

@@ -3,7 +3,7 @@ import Dep from './dep'
 import { createRef } from './ref'
 import { ReactiveEffect } from './effect'
 
-export function computed (getterOrOptions) {
+export function computed (getterOrOptions, options = {}) {
   let getter, setter
   if (isFunction(getterOrOptions)) {
     getter = getterOrOptions
@@ -17,7 +17,7 @@ export function computed (getterOrOptions) {
   let value
   const effect = new ReactiveEffect(getter, () => {
     dirty = true
-  })
+  }, undefined, options.debug || 0, options.name || 'anonymous computed')
 
   return createRef({
     get: () => {

package/src/observer/dep.js

@@ -7,30 +7,50 @@ let uid = 0
  * directives subscribing to it.
  */
 export default class Dep {
-  constructor () {
+  constructor (key) {
     this.id = uid++
     this.subs = []
+    this.addSubStacks = new Map()
+    this.key = key
   }
 
   addSub (sub) {
+    const addSubStack = new Error('此时被添加到订阅者列表').stack
+    this.addSubStacks.set(sub, addSubStack)
     this.subs.push(sub)
   }
 
   removeSub (sub) {
     remove(this.subs, sub)
+    this.addSubStacks.delete(sub)
   }
 
-  depend () {
+  depend (key, value) {
     if (Dep.target) {
-      Dep.target.addDep(this)
+      // if (this.key === 'link_params' || key === 'link_params') console.log(new Error('此时被依赖').stack)
+      Dep.target.addDep(this, key, value)
     }
   }
 
-  notify () {
+  notify (key, value, oldvalue, stack) {
     // stabilize the subscriber list first
     const subs = this.subs.slice()
+    try {
+      console.log('[Mpx Dep] notify ' +
+        this.subs.length +
+        ' subs, from ' +
+        key +
+        ': ' +
+        (typeof oldvalue === 'object' ? JSON.stringify(oldvalue) : oldvalue) +
+        ' -> ' +
+        (typeof value === 'object' ? JSON.stringify(value) : value) +
+        ', subs: ' +
+        subs.map(s => `id:${s.id} name:${s.name}`).join(', '))
+    } catch (e) {
+      // do nothing
+    }
     for (let i = 0, l = subs.length; i < l; i++) {
-      subs[i].update()
+      subs[i].update(key, value, oldvalue, stack, this.addSubStacks.get(subs[i]))
     }
   }
 }

package/src/observer/effect.js

@@ -17,6 +17,8 @@ export function resetTracking () {
   shouldTrack = last === undefined ? true : last
 }
 
+global.__setMpxReactiveEffect = (value) => {}
+
 export class ReactiveEffect {
   active = true
   deps = []
@@ -24,15 +26,45 @@ export class ReactiveEffect {
   depIds = new Set()
   newDepIds = new Set()
   allowRecurse = false
+  debug = 0
+  name = 'no-name'
 
   constructor (
     fn,
     scheduler,
-    scope
+    scope,
+    debug,
+    name
   ) {
+    this.debug = debug || 0
+    this.name = name || 'no-name'
     this.id = ++uid
-    this.fn = fn
-    this.scheduler = scheduler
+    this.fn = (...args) => {
+      this.debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} will run`)
+      this.debug > 1 && console.log(new Error('此时触发了run').stack)
+      const t = global.__setMpxReactiveEffect
+      global.__setMpxReactiveEffect = (option) => {
+        Object.entries(option).forEach(([key, value]) => {
+          this[key] = value
+        })
+      }
+      const result = fn(...args)
+      global.__setMpxReactiveEffect = t
+      return result
+    }
+    this.scheduler = (...args) => {
+      this.debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} will scheduled`)
+      this.debug > 1 && console.log(new Error('此时触发scheduler').stack)
+      const t = global.__setMpxReactiveEffect
+      global.__setMpxReactiveEffect = (option) => {
+        Object.entries(option).forEach(([key, value]) => {
+          this[key] = value
+        })
+      }
+      const result = scheduler(...args)
+      global.__setMpxReactiveEffect = t
+      return result
+    }
     this.pausedState = PausedState.resumed
     recordEffectScope(this, scope)
   }
@@ -53,14 +85,14 @@ export class ReactiveEffect {
   }
 
   // add dependency to this
-  addDep (dep) {
+  addDep (dep, key, value) {
     if (!shouldTrack) return
     const id = dep.id
     if (!this.newDepIds.has(id)) {
       this.newDepIds.add(id)
       this.newDeps.push(dep)
       if (!this.depIds.has(id)) {
-        dep.addSub(this)
+        dep.addSub(this, key, value)
       }
     }
   }
@@ -85,12 +117,20 @@ export class ReactiveEffect {
   }
 
   // same as trigger
-  update () {
+  update (key, value, stack, fromAddSubStack) {
+    const debugOptions = global.__getMpxReactiveEffectDebugRules?.(key, value)
+    const debug = debugOptions ? debugOptions.debug : this.debug
     // avoid dead cycle
     if (Dep.target !== this || this.allowRecurse) {
       if (this.pausedState !== PausedState.resumed) {
+        debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} pausedState will set to dirty with, from ${key}: ${typeof value === 'object' ? JSON.stringify(value) : value}`)
+        debug > 1 && console.log(stack)
+        debug > 2 && console.log(fromAddSubStack)
         this.pausedState = PausedState.dirty
       } else {
+        debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} will updated, from ${key}: ${typeof value === 'object' ? JSON.stringify(value) : value}`)
+        debug > 1 && console.log(stack)
+        debug > 2 && console.log(fromAddSubStack)
         this.scheduler ? this.scheduler() : this.run()
       }
     }

package/src/observer/reactive.js

@@ -110,7 +110,7 @@ function observe (value, shallow) {
  * Define a reactive property on an Object.
  */
 export function defineReactive (obj, key, val, shallow) {
-  const dep = new Dep()
+  const dep = new Dep(key)
 
   const property = Object.getOwnPropertyDescriptor(obj, key)
   if (property && property.configurable === false) {
@@ -121,6 +121,8 @@ export function defineReactive (obj, key, val, shallow) {
   const getter = property && property.get
   const setter = property && property.set
 
+  const stack = new Error().stack
+
   let childOb = shallow ? getObserver(val) : observe(val)
   Object.defineProperty(obj, key, {
     enumerable: true,
@@ -128,9 +130,9 @@ export function defineReactive (obj, key, val, shallow) {
     get: function reactiveGetter () {
       const value = getter ? getter.call(obj) : val
       if (Dep.target) {
-        dep.depend()
+        dep.depend(key, value)
         if (childOb) {
-          childOb.dep.depend()
+          childOb.dep.depend(key, value)
           if (Array.isArray(value)) {
             dependArray(value)
           }
@@ -140,10 +142,12 @@ export function defineReactive (obj, key, val, shallow) {
     },
     set: function reactiveSetter (newVal) {
       const value = getter ? getter.call(obj) : val
+      let oldVal = value
       if (!(shallow && isForceTrigger) && !hasChanged(newVal, value)) {
         return
       }
       if (!shallow && isRef(value) && !isRef(newVal)) {
+        oldVal = value.value
         value.value = newVal
       } else if (setter) {
         setter.call(obj, newVal)
@@ -151,7 +155,7 @@ export function defineReactive (obj, key, val, shallow) {
         val = newVal
       }
       childOb = shallow ? getObserver(newVal) : observe(newVal)
-      dep.notify()
+      dep.notify(key, newVal, oldVal, stack)
     }
   })
 }
@@ -176,8 +180,9 @@ export function set (target, key, val) {
     target[key] = val
     return val
   }
+  const oldVal = target[key]
   defineReactive(ob.value, key, val, ob.shallow)
-  ob.dep.notify()
+  ob.dep.notify(key, val, oldVal, new Error('此时被通知变更').stack)
   return val
 }
 
@@ -193,11 +198,12 @@ export function del (target, key) {
   if (!hasOwn(target, key)) {
     return
   }
+  const oldVal = target[key]
   delete target[key]
   if (!ob) {
     return
   }
-  ob.dep.notify()
+  ob.dep.notify(key, undefined, oldVal, new Error('此时被通知变更').stack)
 }
 
 /**
@@ -208,7 +214,7 @@ function dependArray (arr) {
   for (let i = 0, l = arr.length; i < l; i++) {
     const item = arr[i]
     const ob = getObserver(item)
-    ob && ob.dep.depend()
+    ob && ob.dep.depend(i, item)
     if (Array.isArray(item)) {
       dependArray(item)
     }

package/src/observer/watch.js

@@ -137,7 +137,7 @@ export function watch (source, cb, options = {}) {
 
   job.allowRecurse = !!cb
 
-  const effect = new ReactiveEffect(getter, scheduler)
+  const effect = new ReactiveEffect(getter, scheduler, undefined, options.debug || 0, options.name || 'anonymous watch')
 
   if (cb) {
     if (immediate) {

package/src/platform/env/navigationHelper.ios.js

@@ -1,7 +1,7 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { NavigationContainer, StackActions } from '@react-navigation/native'
 import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { SafeAreaProvider, useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 export {
@@ -11,5 +11,6 @@ export {
   GestureHandlerRootView,
   PortalHost,
   SafeAreaProvider,
-  useSafeAreaInsets
+  useSafeAreaInsets,
+  initialWindowMetrics
 }

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

@@ -16,7 +16,7 @@ import {
   ProviderContext,
   RouteContext
 } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
-import { PortalHost, useSafeAreaInsets } from '../env/navigationHelper'
+import { PortalHost, useSafeAreaInsets, initialWindowMetrics } from '../env/navigationHelper'
 import { useInnerHeaderHeight } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
 
 function getSystemInfo () {
@@ -33,12 +33,13 @@ function getSystemInfo () {
   }
 }
 
-function createEffect (proxy, componentsMap) {
+function createEffect (proxy, componentsMap, rawOptions) {
   const update = proxy.update = () => {
     // react update props in child render(async), do not need exec pre render
     // if (proxy.propsUpdatedFlag) {
     //   proxy.updatePreRender()
     // }
+    // console.log(`[mpx] ${proxy.options?.mpxFileResource} 组件render响应时数据变更，开始修改stateVersion，驱动组件更新`)
     if (proxy.isMounted()) {
       proxy.callHook(BEFOREUPDATE)
       proxy.pendingUpdatedFlag = true
@@ -61,11 +62,18 @@ function createEffect (proxy, componentsMap) {
     return createElement(type, ...rest)
   }
 
+  const debugConfig = typeof global.__getMpxRenderEffectDebugRules === 'function'
+? global.__getMpxRenderEffectDebugRules(rawOptions.mpxFileResource)
+: {
+    debug: 1,
+    name: `MpxRenderEffect-${rawOptions.mpxFileResource || 'unknown'}`
+  }
+
   proxy.effect = new ReactiveEffect(() => {
     // reset instance
     proxy.target.__resetInstance()
     return callWithErrorHandling(proxy.target.__injectedRender.bind(proxy.target), proxy, 'render function', [innerCreateElement, getComponent])
-  }, () => queueJob(update), proxy.scope)
+  }, () => { return queueJob(update) }, proxy.scope, debugConfig.debug, debugConfig.name)
   // render effect允许自触发
   proxy.toggleRecurse(true)
 }
@@ -332,7 +340,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
     stateVersion: Symbol(),
     subscribe: (onStoreChange) => {
       if (!proxy.effect) {
-        createEffect(proxy, componentsMap)
+        createEffect(proxy, componentsMap, rawOptions)
         proxy.stateVersion = Symbol()
       }
       proxy.onStoreChange = onStoreChange
@@ -348,7 +356,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
   })
   // react数据响应组件更新管理器
   if (!proxy.effect) {
-    createEffect(proxy, componentsMap)
+    createEffect(proxy, componentsMap, rawOptions)
   }
 
   return instance
@@ -509,7 +517,17 @@ function getLayoutData (headerHeight) {
   // 在横屏状态下 screen.height = window.height + bottomVirtualHeight
   // 在正常状态   screen.height =  window.height + bottomVirtualHeight + statusBarHeight
   const isLandscape = screenDimensions.height < screenDimensions.width
-  const bottomVirtualHeight = isLandscape ? screenDimensions.height - windowDimensions.height : ((screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight) || 0)
+  // const bottomVirtualHeight = isLandscape ? screenDimensions.height - windowDimensions.height : ((screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight) || 0)
+  let bottomVirtualHeight = 0
+  // 红米手机&魅族16T手机的screen.height = windowHeight + bottomVirtualHeight 导致计算出来的底部虚拟偏少。此部分端引擎同学进行修改中
+  // mpx临时兼容 bottomVirtualHeight取 initialWindowMetrics.inset.bottom 和 反算出来的bottomVirtualHeight的更大的值
+  if (ReactNative.Platform.OS === 'android') {
+    if (isLandscape) {
+      bottomVirtualHeight = screenDimensions.height - windowDimensions.height
+    } else {
+      bottomVirtualHeight = Math.max(screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight, initialWindowMetrics?.insets?.bottom || 0, 0)
+    }
+  }
   return {
     left: 0,
     top: headerHeight,