feat: subscribe ops (#177)

* feat: subscribe ops

* add value in ops

* op includes prev value

* re-implement subscribeKey with new subscribe

* update size snapshot

Author: dai-shi

.size-snapshot.json

@@ -14,9 +14,9 @@
     }
   },
   "vanilla.js": {
-    "bundled": 5875,
-    "minified": 2857,
-    "gzipped": 1104,
+    "bundled": 6624,
+    "minified": 3127,
+    "gzipped": 1218,
     "treeshaked": {
       "rollup": {
         "code": 22,
@@ -28,9 +28,9 @@
     }
   },
   "utils.js": {
-    "bundled": 5867,
-    "minified": 2678,
-    "gzipped": 1197,
+    "bundled": 5769,
+    "minified": 2653,
+    "gzipped": 1202,
     "treeshaked": {
       "rollup": {
         "code": 45,

src/utils.ts

@@ -18,19 +18,16 @@ export const subscribeKey = <T extends object>(
   key: keyof T,
   callback: (value: T[typeof key]) => void,
   notifyInSync?: boolean
-) => {
-  let prevValue = proxyObject[key]
-  return subscribe(
+) =>
+  subscribe(
     proxyObject,
-    () => {
-      const nextValue = proxyObject[key]
-      if (!Object.is(prevValue, nextValue)) {
-        callback((prevValue = nextValue))
+    (ops) => {
+      if (ops.some((op) => op[1][0] === key)) {
+        callback(proxyObject[key])
       }
     },
     notifyInSync
   )
-}
 
 /**
  * devtools

src/vanilla.ts

@@ -29,6 +29,14 @@ const isSupportedObject = (x: unknown): x is object =>
 type ProxyObject = object
 const proxyCache = new WeakMap<object, ProxyObject>()
 
+type Path = (string | symbol)[]
+type Op =
+  | [op: 'set', path: Path, value: unknown, prevValue: unknown]
+  | [op: 'delete', path: Path, prevValue: unknown]
+  | [op: 'resolve', path: Path, value: unknown]
+  | [op: 'reject', path: Path, error: unknown]
+type Listener = (op: Op, nextVersion: number) => void
+
 let globalVersion = 1
 const snapshotCache = new WeakMap<
   object,
@@ -44,16 +52,34 @@ export const proxy = <T extends object>(initialObject: T = {} as T): T => {
     return found
   }
   let version = globalVersion
-  const listeners = new Set<(nextVersion: number) => void>()
-  const notifyUpdate = (nextVersion?: number) => {
+  const listeners = new Set<Listener>()
+  const notifyUpdate = (op: Op, nextVersion?: number) => {
     if (!nextVersion) {
       nextVersion = ++globalVersion
     }
     if (version !== nextVersion) {
       version = nextVersion
-      listeners.forEach((listener) => listener(nextVersion as number))
+      listeners.forEach((listener) => listener(op, nextVersion as number))
     }
   }
+  const propListeners = new Map<string | symbol, Listener>()
+  const getPropListener = (prop: string | symbol) => {
+    let propListener = propListeners.get(prop)
+    if (!propListener) {
+      propListener = (op, nextVersion) => {
+        const newOp: Op = [...op]
+        newOp[1] = [prop, ...(newOp[1] as Path)]
+        notifyUpdate(newOp, nextVersion)
+      }
+      propListeners.set(prop, propListener)
+    }
+    return propListener
+  }
+  const popPropListener = (prop: string | symbol) => {
+    const propListener = propListeners.get(prop)
+    propListeners.delete(prop)
+    return propListener
+  }
   const createSnapshot = (target: any, receiver: any) => {
     const cache = snapshotCache.get(receiver)
     if (cache?.[0] === version) {
@@ -111,11 +137,11 @@ export const proxy = <T extends object>(initialObject: T = {} as T): T => {
       const prevValue = target[prop]
       const childListeners = (prevValue as any)?.[LISTENERS]
       if (childListeners) {
-        childListeners.delete(notifyUpdate)
+        childListeners.delete(popPropListener(prop))
       }
       const deleted = Reflect.deleteProperty(target, prop)
       if (deleted) {
-        notifyUpdate()
+        notifyUpdate(['delete', [prop], prevValue])
       }
       return deleted
     },
@@ -126,7 +152,7 @@ export const proxy = <T extends object>(initialObject: T = {} as T): T => {
       }
       const childListeners = (prevValue as any)?.[LISTENERS]
       if (childListeners) {
-        childListeners.delete(notifyUpdate)
+        childListeners.delete(popPropListener(prop))
       }
       if (
         refSet.has(value) ||
@@ -138,12 +164,12 @@ export const proxy = <T extends object>(initialObject: T = {} as T): T => {
         target[prop] = value
           .then((v) => {
             target[prop][PROMISE_RESULT] = v
-            notifyUpdate()
+            notifyUpdate(['resolve', [prop], v])
             return v
           })
           .catch((e) => {
             target[prop][PROMISE_ERROR] = e
-            notifyUpdate()
+            notifyUpdate(['reject', [prop], e])
           })
       } else {
         value = getUntracked(value) || value
@@ -152,9 +178,9 @@ export const proxy = <T extends object>(initialObject: T = {} as T): T => {
         } else {
           target[prop] = proxy(value)
         }
-        target[prop][LISTENERS].add(notifyUpdate)
+        target[prop][LISTENERS].add(getPropListener(prop))
       }
-      notifyUpdate()
+      notifyUpdate(['set', [prop], value, prevValue])
       return true
     },
   })
@@ -186,7 +212,7 @@ export const getVersion = (proxyObject: any): number => {
 
 export const subscribe = (
   proxyObject: any,
-  callback: () => void,
+  callback: (ops: Op[]) => void,
   notifyInSync?: boolean
 ) => {
   if (
@@ -197,15 +223,17 @@ export const subscribe = (
     throw new Error('Please use proxy object')
   }
   let pendingVersion = 0
-  const listener = (nextVersion: number) => {
+  const ops: Op[] = []
+  const listener: Listener = (op, nextVersion) => {
+    ops.push(op)
     if (notifyInSync) {
-      callback()
+      callback(ops.splice(0))
       return
     }
     pendingVersion = nextVersion
     Promise.resolve().then(() => {
       if (nextVersion === pendingVersion) {
-        callback()
+        callback(ops.splice(0))
       }
     })
   }

tests/subscribe.test.tsx

@@ -1,4 +1,5 @@
 import { proxy, ref, subscribe } from '../src/index'
+import { subscribeKey } from '../src/utils'
 
 describe('subscribe', () => {
   it('should call subscription', async () => {
@@ -95,4 +96,74 @@ describe('subscribe', () => {
     await Promise.resolve()
     expect(handler).toBeCalledTimes(0)
   })
+
+  it('should notify ops', async () => {
+    const obj = proxy<{ count1: number; count2?: number }>({
+      count1: 0,
+      count2: 0,
+    })
+    const handler = jest.fn()
+
+    subscribe(obj, handler)
+
+    obj.count1 += 1
+    obj.count2 = 2
+
+    await Promise.resolve()
+    expect(handler).toBeCalledTimes(1)
+    expect(handler).lastCalledWith([
+      ['set', ['count1'], 1, 0],
+      ['set', ['count2'], 2, 0],
+    ])
+
+    delete obj.count2
+
+    await Promise.resolve()
+    expect(handler).toBeCalledTimes(2)
+    expect(handler).lastCalledWith([['delete', ['count2'], 2]])
+  })
+
+  it('should notify nested ops', async () => {
+    const obj = proxy<{ nested: { count?: number } }>({ nested: { count: 0 } })
+    const handler = jest.fn()
+
+    subscribe(obj, handler)
+
+    obj.nested.count = 1
+
+    await Promise.resolve()
+    expect(handler).toBeCalledTimes(1)
+    expect(handler).lastCalledWith([['set', ['nested', 'count'], 1, 0]])
+
+    delete obj.nested.count
+
+    await Promise.resolve()
+    expect(handler).toBeCalledTimes(2)
+    expect(handler).lastCalledWith([['delete', ['nested', 'count'], 1]])
+  })
+})
+
+describe('subscribeKey', () => {
+  it('should call subscription', async () => {
+    const obj = proxy({ count1: 0, count2: 0 })
+    const handler1 = jest.fn()
+    const handler2 = jest.fn()
+
+    subscribeKey(obj, 'count1', handler1)
+    subscribeKey(obj, 'count2', handler2)
+
+    obj.count1 += 10
+
+    await Promise.resolve()
+    expect(handler1).toBeCalledTimes(1)
+    expect(handler1).lastCalledWith(10)
+    expect(handler2).toBeCalledTimes(0)
+
+    obj.count2 += 20
+
+    await Promise.resolve()
+    expect(handler1).toBeCalledTimes(1)
+    expect(handler2).toBeCalledTimes(1)
+    expect(handler2).lastCalledWith(20)
+  })
 })