test: 添加effect debug日志信息

Author: mackwang112

packages/core/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, 'this', new Error().stack)
     }
     return result
   })

packages/core/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
-  })
+  }, options.debug || 0, options.name || 'anonymous computed')
 
   return createRef({
     get: () => {

packages/core/src/observer/dep.js

@@ -26,11 +26,11 @@ export default class Dep {
     }
   }
 
-  notify () {
+  notify (key, value, stack) {
     // stabilize the subscriber list first
     const subs = this.subs.slice()
     for (let i = 0, l = subs.length; i < l; i++) {
-      subs[i].update()
+      subs[i].update(key, value, stack)
     }
   }
 }

packages/core/src/observer/effect.js

@@ -17,22 +17,54 @@ export function resetTracking () {
   shouldTrack = last === undefined ? true : last
 }
 
+global.__setMpxReactiveEffect = (value) => {}
+
 export class ReactiveEffect {
   active = true
   deps = []
   newDeps = []
   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().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().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)
   }
@@ -85,12 +117,16 @@ export class ReactiveEffect {
   }
 
   // same as trigger
-  update () {
+  update (key, value, stack) {
     // avoid dead cycle
     if (Dep.target !== this || this.allowRecurse) {
       if (this.pausedState !== PausedState.resumed) {
+        this.debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} pausedState will set to dirty with, from ${key}: ${value}`)
+        this.debug > 1 && console.log(stack)
         this.pausedState = PausedState.dirty
       } else {
+        this.debug > 0 && console.log(`[Mpx Effect] id:${this.id} name: ${this.name} will updated, from ${key}: ${value}`)
+        this.debug > 1 && console.log(stack)
         this.scheduler ? this.scheduler() : this.run()
       }
     }

packages/core/src/observer/reactive.js

@@ -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,
@@ -151,7 +153,7 @@ export function defineReactive (obj, key, val, shallow) {
         val = newVal
       }
       childOb = shallow ? getObserver(newVal) : observe(newVal)
-      dep.notify()
+      dep.notify(key, newVal, stack)
     }
   })
 }
@@ -177,7 +179,7 @@ export function set (target, key, val) {
     return val
   }
   defineReactive(ob.value, key, val, ob.shallow)
-  ob.dep.notify()
+  ob.dep.notify(key, val, new Error().stack)
   return val
 }
 
@@ -197,7 +199,7 @@ export function del (target, key) {
   if (!ob) {
     return
   }
-  ob.dep.notify()
+  ob.dep.notify(key, undefined, new Error().stack)
 }
 
 /**

packages/core/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, options.debug || 0, options.name || 'anonymous watch')
 
   if (cb) {
     if (immediate) {

packages/core/src/platform/patch/getDefaultOptions.ios.js

@@ -33,7 +33,7 @@ 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) {
@@ -65,7 +65,7 @@ function createEffect (proxy, componentsMap) {
     // 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, 1, `MpxRenderEffect-${rawOptions.mpxFileResource || 'unknown'}`)
   // render effect允许自触发
   proxy.toggleRecurse(true)
 }
@@ -332,7 +332,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 +348,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
   })
   // react数据响应组件更新管理器
   if (!proxy.effect) {
-    createEffect(proxy, componentsMap)
+    createEffect(proxy, componentsMap, rawOptions)
   }
 
   return instance