wip: onTrack/onTrigger debugger options

yyx990803 · yyx990803 · commit 075f215edfff · 2022-05-29T15:39:49.000+08:00
diff --git a/src/core/observer/array.ts b/src/core/observer/array.ts
@@ -3,6 +3,7 @@
  * dynamically accessing methods on Array prototype
  */
 
+import { TriggerOpTypes } from '../../v3'
 import { def } from '../util/index'
 
 const arrayProto = Array.prototype
@@ -39,7 +40,15 @@ methodsToPatch.forEach(function (method) {
     }
     if (inserted) ob.observeArray(inserted)
     // notify change
-    ob.dep.notify()
+    if (__DEV__) {
+      ob.dep.notify({
+        type: TriggerOpTypes.ARRAY_MUTATION,
+        target: this,
+        key: method
+      })
+    } else {
+      ob.dep.notify()
+    }
     return result
   })
 })
diff --git a/src/core/observer/index.ts b/src/core/observer/index.ts
@@ -15,7 +15,7 @@ import {
   isServerRendering,
   hasChanged
 } from '../util/index'
-import { isReadonly, isRef, TrackOpTypes } from '../../v3'
+import { isReadonly, isRef, TrackOpTypes, TriggerOpTypes } from '../../v3'
 
 const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
 
@@ -198,11 +198,22 @@ export function defineReactive(
         return
       } else if (isRef(value) && !isRef(newVal)) {
         value.value = newVal
+        return
       } else {
         val = newVal
       }
       childOb = !shallow && observe(newVal)
-      dep.notify()
+      if (__DEV__) {
+        dep.notify({
+          type: TriggerOpTypes.SET,
+          target: obj,
+          key,
+          newValue: newVal,
+          oldValue: value
+        })
+      } else {
+        dep.notify()
+      }
     }
   })
 
@@ -251,7 +262,17 @@ export function set(
     return val
   }
   defineReactive(ob.value, key, val)
-  ob.dep.notify()
+  if (__DEV__) {
+    ob.dep.notify({
+      type: TriggerOpTypes.ADD,
+      target: target,
+      key,
+      newValue: val,
+      oldValue: undefined
+    })
+  } else {
+    ob.dep.notify()
+  }
   return val
 }
 
@@ -289,7 +310,15 @@ export function del(target: Array<any> | Object, key: any) {
   if (!ob) {
     return
   }
-  ob.dep.notify()
+  if (__DEV__) {
+    ob.dep.notify({
+      type: TriggerOpTypes.DELETE,
+      target: target,
+      key
+    })
+  } else {
+    ob.dep.notify()
+  }
 }
 
 /**
diff --git a/src/v3/reactivity/operations.ts b/src/v3/reactivity/operations.ts
@@ -9,5 +9,6 @@ export const enum TrackOpTypes {
 export const enum TriggerOpTypes {
   SET = 'set',
   ADD = 'add',
-  DELETE = 'delete'
+  DELETE = 'delete',
+  ARRAY_MUTATION = 'array mutation'
 }
diff --git a/src/v3/reactivity/ref.ts b/src/v3/reactivity/ref.ts
@@ -7,7 +7,7 @@ import {
 import type { IfAny } from 'typescript/utils'
 import Dep from 'core/observer/dep'
 import { warn, isArray, def } from 'core/util'
-import { TrackOpTypes } from './operations'
+import { TrackOpTypes, TriggerOpTypes } from './operations'
 
 declare const RefSymbol: unique symbol
 export declare const RawSymbol: unique symbol
@@ -74,7 +74,16 @@ export function triggerRef(ref: Ref) {
   if (__DEV__ && !ref.dep) {
     warn(`received object is not a triggerable ref.`)
   }
-  ref.dep && ref.dep.notify()
+  if (__DEV__) {
+    ref.dep &&
+      ref.dep.notify({
+        type: TriggerOpTypes.SET,
+        target: ref,
+        key: 'value'
+      })
+  } else {
+    ref.dep && ref.dep.notify()
+  }
 }
 
 export function unref<T>(ref: T | Ref<T>): T {
@@ -104,7 +113,15 @@ export function customRef<T>(factory: CustomRefFactory<T>): Ref<T> {
       }
     },
     () => {
-      dep.notify()
+      if (__DEV__) {
+        dep.notify({
+          target: ref,
+          type: TriggerOpTypes.SET,
+          key: 'value'
+        })
+      } else {
+        dep.notify()
+      }
     }
   )
   const ref = {
diff --git a/test/unit/features/v3/apiWatch.spec.ts b/test/unit/features/v3/apiWatch.spec.ts
@@ -789,7 +789,6 @@ describe('api: watch', () => {
     const obj = reactive({ foo: 1 })
     const r = ref(2)
     const c = computed(() => r.value + 1)
-    // TODO computed & ref
     watchEffect(
       () => {
         dummy = obj.foo + r.value + c.value
@@ -818,43 +817,59 @@ describe('api: watch', () => {
     ])
   })
 
-  // it('onTrigger', async () => {
-  //   const events: DebuggerEvent[] = []
-  //   let dummy
-  //   const onTrigger = vi.fn((e: DebuggerEvent) => {
-  //     events.push(e)
-  //   })
-  //   const obj = reactive<{ foo?: number }>({ foo: 1 })
-  //   watchEffect(
-  //     () => {
-  //       dummy = obj.foo
-  //     },
-  //     { onTrigger }
-  //   )
-  //   await nextTick()
-  //   expect(dummy).toBe(1)
-
-  //   obj.foo!++
-  //   await nextTick()
-  //   expect(dummy).toBe(2)
-  //   expect(onTrigger).toHaveBeenCalledTimes(1)
-  //   expect(events[0]).toMatchObject({
-  //     type: TriggerOpTypes.SET,
-  //     key: 'foo',
-  //     oldValue: 1,
-  //     newValue: 2
-  //   })
-
-  //   delete obj.foo
-  //   await nextTick()
-  //   expect(dummy).toBeUndefined()
-  //   expect(onTrigger).toHaveBeenCalledTimes(2)
-  //   expect(events[1]).toMatchObject({
-  //     type: TriggerOpTypes.DELETE,
-  //     key: 'foo',
-  //     oldValue: 2
-  //   })
-  // })
+  it('onTrigger', async () => {
+    const events: DebuggerEvent[] = []
+    let dummy
+    const onTrigger = vi.fn((e: DebuggerEvent) => {
+      events.push(e)
+    })
+    const obj = reactive<{
+      foo: number
+      bar: any[]
+      baz: { qux?: number }
+    }>({ foo: 1, bar: [], baz: {} })
+
+    watchEffect(
+      () => {
+        dummy = obj.foo + (obj.bar[0] || 0) + (obj.baz.qux || 0)
+      },
+      { onTrigger }
+    )
+    await nextTick()
+    expect(dummy).toBe(1)
+
+    obj.foo++
+    await nextTick()
+    expect(dummy).toBe(2)
+    expect(onTrigger).toHaveBeenCalledTimes(1)
+    expect(events[0]).toMatchObject({
+      type: TriggerOpTypes.SET,
+      key: 'foo',
+      target: obj,
+      oldValue: 1,
+      newValue: 2
+    })
+
+    obj.bar.push(1)
+    await nextTick()
+    expect(dummy).toBe(3)
+    expect(onTrigger).toHaveBeenCalledTimes(2)
+    expect(events[1]).toMatchObject({
+      type: TriggerOpTypes.ARRAY_MUTATION,
+      target: obj.bar,
+      key: 'push'
+    })
+
+    set(obj.baz, 'qux', 1)
+    await nextTick()
+    expect(dummy).toBe(4)
+    expect(onTrigger).toHaveBeenCalledTimes(3)
+    expect(events[2]).toMatchObject({
+      type: TriggerOpTypes.ADD,
+      target: obj.baz,
+      key: 'qux'
+    })
+  })
 
   it('should work sync', () => {
     const v = ref(1)
diff --git a/test/unit/features/v3/reactivity/computed.spec.ts b/test/unit/features/v3/reactivity/computed.spec.ts
@@ -5,11 +5,12 @@ import {
   isReadonly,
   WritableComputedRef,
   DebuggerEvent,
-  TrackOpTypes
+  TrackOpTypes,
+  TriggerOpTypes
 } from 'v3'
 import { effect } from 'v3/reactivity/effect'
 import { nextTick } from 'core/util'
-// import { TrackOpTypes, TriggerOpTypes } from 'v3/reactivity/operations'
+import { set, del } from 'core/observer/index'
 
 describe('reactivity/computed', () => {
   it('should return updated value', () => {
@@ -252,40 +253,49 @@ describe('reactivity/computed', () => {
     ])
   })
 
-  // TODO
-  // it('debug: onTrigger', () => {
-  //   let events: DebuggerEvent[] = []
-  //   const onTrigger = vi.fn((e: DebuggerEvent) => {
-  //     events.push(e)
-  //   })
-  //   const obj = reactive({ foo: 1 })
-  //   const c = computed(() => obj.foo, { onTrigger })
-
-  //   // computed won't trigger compute until accessed
-  //   c.value
-
-  //   obj.foo++
-  //   expect(c.value).toBe(2)
-  //   expect(onTrigger).toHaveBeenCalledTimes(1)
-  //   expect(events[0]).toEqual({
-  //     effect: c.effect,
-  //     target: toRaw(obj),
-  //     type: TriggerOpTypes.SET,
-  //     key: 'foo',
-  //     oldValue: 1,
-  //     newValue: 2
-  //   })
-
-  //   // @ts-ignore
-  //   delete obj.foo
-  //   expect(c.value).toBeUndefined()
-  //   expect(onTrigger).toHaveBeenCalledTimes(2)
-  //   expect(events[1]).toEqual({
-  //     effect: c.effect,
-  //     target: toRaw(obj),
-  //     type: TriggerOpTypes.DELETE,
-  //     key: 'foo',
-  //     oldValue: 2
-  //   })
-  // })
+  it('debug: onTrigger', () => {
+    let events: DebuggerEvent[] = []
+    const onTrigger = vi.fn((e: DebuggerEvent) => {
+      events.push(e)
+    })
+    const obj = reactive({ foo: 1, bar: { baz: 2 } })
+    const c = computed(() => obj.foo + (obj.bar.baz || 0), { onTrigger })
+
+    // computed won't trigger compute until accessed
+    c.value
+
+    obj.foo++
+    expect(c.value).toBe(4)
+    expect(onTrigger).toHaveBeenCalledTimes(1)
+    expect(events[0]).toEqual({
+      effect: c.effect,
+      target: obj,
+      type: TriggerOpTypes.SET,
+      key: 'foo',
+      oldValue: 1,
+      newValue: 2
+    })
+
+    del(obj.bar, 'baz')
+    expect(c.value).toBe(2)
+    expect(onTrigger).toHaveBeenCalledTimes(2)
+    expect(events[1]).toEqual({
+      effect: c.effect,
+      target: obj.bar,
+      type: TriggerOpTypes.DELETE,
+      key: 'baz'
+    })
+
+    set(obj.bar, 'baz', 1)
+    expect(c.value).toBe(3)
+    expect(onTrigger).toHaveBeenCalledTimes(3)
+    expect(events[2]).toEqual({
+      effect: c.effect,
+      target: obj.bar,
+      type: TriggerOpTypes.ADD,
+      key: 'baz',
+      oldValue: undefined,
+      newValue: 1
+    })
+  })
 })
diff --git a/test/unit/features/v3/reactivity/ref.spec.ts b/test/unit/features/v3/reactivity/ref.spec.ts
@@ -10,7 +10,8 @@ import {
   Ref,
   isReactive,
   isShallow,
-  reactive
+  reactive,
+  computed
 } from 'v3'
 import { effect } from 'v3/reactivity/effect'
 
@@ -237,7 +238,7 @@ describe('reactivity/ref', () => {
 
   test('isRef', () => {
     expect(isRef(ref(1))).toBe(true)
-    // TODO expect(isRef(computed(() => 1))).toBe(true)
+    expect(isRef(computed(() => 1))).toBe(true)
 
     expect(isRef(0)).toBe(false)
     expect(isRef(1)).toBe(false)
diff --git a/typescript/component.d.ts b/typescript/component.d.ts
@@ -46,7 +46,10 @@ export declare class Component {
   $isServer: boolean
 
   // public methods
-  $mount: (el?: Element | string, hydrating?: boolean) => Component
+  $mount: (
+    el?: Element | string,
+    hydrating?: boolean
+  ) => Component & { [key: string]: any }
   $forceUpdate: () => void
   $destroy: () => void
   $set: <T>(
diff --git a/typescript/global-api.d.ts b/typescript/global-api.d.ts
@@ -1,6 +1,5 @@
 import { Config } from '../src/core/config'
 import { Component } from './component'
-import { ComponentOptions } from './options'
 
 declare interface GlobalAPI {
   // new(options?: any): Component
@@ -10,7 +9,7 @@ declare interface GlobalAPI {
   config: Config
   util: Object
 
-  extend: (options: typeof Component | ComponentOptions) => typeof Component
+  extend: (options: typeof Component | object) => typeof Component
   set: <T>(target: Object | Array<T>, key: string | number, value: T) => T
   delete: <T>(target: Object | Array<T>, key: string | number) => void
   nextTick: (fn: Function, context?: Object) => void | Promise<any>

Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,6 @@ export const enum TrackOpTypes {`
`9`	`9`	`export const enum TriggerOpTypes {`
`10`	`10`	`SET = 'set',`
`11`	`11`	`ADD = 'add',`
`12`		`- DELETE = 'delete'`
	`12`	`+ DELETE = 'delete',`
	`13`	`+ ARRAY_MUTATION = 'array mutation'`
`13`	`14`	`}`