perf(doura): invalidate api snapshot on view dirty

Author: liximomo

packages/doura/src/core/__tests__/views.test.ts

@@ -973,17 +973,21 @@ describe('createView', () => {
 
       const child = modelMgr.getModel(childModel)
       const parent = modelMgr.getModel(parentModel)
+      const parentInternal = (modelMgr as any)._models.get('parent')
 
       // Initial: parent view reads child.count = 0
       const api1 = parent.$getApi()
       expect(api1.childCount).toBe(0)
+      expect(parentInternal._api).toBe(api1)
 
       // Mutate child
       child.inc()
+      expect(parentInternal._api).toBe(null)
       await nextTick()
 
       // Parent's $getApi() should return updated view reflecting child.count = 1
       const api2 = parent.$getApi()
+      expect(api2).not.toBe(api1)
       expect(api2.childCount).toBe(1)
     })
   })

packages/doura/src/core/model.ts

@@ -11,6 +11,7 @@ import { warn } from '../warning'
 import {
   view as reactiveView,
   type View,
+  type ViewOptions,
   effectScope,
   type EffectScope,
   draft,
@@ -207,7 +208,6 @@ export class ModelInternal<M extends Model = Model> {
   models: Record<string, ModelInstance<any>>
   modelProxies: Record<string, ModelInstance<any>>
   viewInstances: ViewExt[] = []
-  private _modelViews: ViewExt[] = []
   accessContext: AccessContext
 
   stateRef: {
@@ -250,6 +250,7 @@ export class ModelInternal<M extends Model = Model> {
     this.isolate = this.isolate.bind(this)
     this.getApi = this.getApi.bind(this)
     this._update = this._update.bind(this)
+    this._invalidateApiSnapshot = this._invalidateApiSnapshot.bind(this)
     this._flushQueryListeners = this._flushQueryListeners.bind(this)
 
     this.options = model
@@ -367,17 +368,6 @@ export class ModelInternal<M extends Model = Model> {
   }
 
   getApi() {
-    // Invalidate cache if any model-defined view is dirty (e.g. from
-    // cross-model dependency changes that bypass _setState).
-    if (this._api !== null) {
-      for (let i = 0; i < this._modelViews.length; i++) {
-        if (this._modelViews[i].dirty) {
-          this._api = null
-          break
-        }
-      }
-    }
-
     if (this._api === null) {
       const data = Object.create(this._apiProto)
       this._api = Object.assign(data, this._currentState, this.views)
@@ -431,7 +421,7 @@ export class ModelInternal<M extends Model = Model> {
     })
   }
 
-  createView(viewFn: (s: any) => any): ViewExt {
+  createView(viewFn: (s: any) => any, options: ViewOptions = {}): ViewExt {
     let view!: ViewExt
     this.effectScope.run(() => {
       view = reactiveView(() => {
@@ -458,7 +448,7 @@ export class ModelInternal<M extends Model = Model> {
         } finally {
           this.accessContext = oldCtx
         }
-      }) as ViewExt
+      }, options) as ViewExt
     })
 
     view.getSnapshot = () => {
@@ -535,7 +525,7 @@ export class ModelInternal<M extends Model = Model> {
   destroy() {
     // reset props
     this._destroyed = true
-    this._api = null
+    this._invalidateApiSnapshot()
     this._lastDraftToSnapshot = new WeakMap()
 
     this._currentState = null
@@ -572,8 +562,12 @@ export class ModelInternal<M extends Model = Model> {
     return this._queryHashScope
   }
 
-  private _setState(newState: ModelStateFromModel<M>) {
+  private _invalidateApiSnapshot() {
     this._api = null
+  }
+
+  private _setState(newState: ModelStateFromModel<M>) {
+    this._invalidateApiSnapshot()
     this._currentState = newState
     this.stateValue = this.stateRef.value
   }
@@ -683,8 +677,9 @@ export class ModelInternal<M extends Model = Model> {
       for (const viewName of Object.keys(views)) {
         this._cacheAccess(viewName, AccessTypes.VIEW)
         const viewFn = views[viewName]
-        const view = this.createView(viewFn)
-        this._modelViews.push(view)
+        const view = this.createView(viewFn, {
+          onDirty: this._invalidateApiSnapshot,
+        })
         Object.defineProperty(this.views, viewName, {
           configurable: true,
           enumerable: true,

packages/doura/src/reactivity/__tests__/view.test.ts

@@ -42,6 +42,52 @@ describe('reactivity/view', () => {
     expect(getter).toHaveBeenCalledTimes(2)
   })
 
+  it('should not call onDirty on creation or first read', () => {
+    const value = draft({ foo: 0 })
+    const onDirty = jest.fn()
+    const cValue = view(() => value.foo, { onDirty })
+
+    expect(onDirty).not.toHaveBeenCalled()
+    expect(cValue.value).toBe(0)
+    expect(onDirty).not.toHaveBeenCalled()
+  })
+
+  it('should call onDirty once when becoming dirty', () => {
+    const value = draft({ foo: 0 })
+    const onDirty = jest.fn()
+    const cValue = view(() => value.foo, { onDirty })
+
+    expect(cValue.value).toBe(0)
+    value.foo = 1
+    expect(onDirty).toHaveBeenCalledTimes(1)
+
+    value.foo = 2
+    expect(onDirty).toHaveBeenCalledTimes(1)
+
+    expect(cValue.value).toBe(2)
+    value.foo = 3
+    expect(onDirty).toHaveBeenCalledTimes(2)
+  })
+
+  it('should call onDirty before dependent effects rerun', () => {
+    const value = draft({ foo: 0 })
+    const events: string[] = []
+    const cValue = view(() => value.foo, {
+      onDirty: () => {
+        events.push('dirty')
+      },
+    })
+
+    effect(() => {
+      events.push(`effect:${cValue.value}`)
+    })
+    expect(events).toEqual(['effect:0'])
+
+    events.length = 0
+    value.foo = 1
+    expect(events).toEqual(['dirty', 'effect:1'])
+  })
+
   it('should trigger effect', () => {
     const value = draft<{ foo?: number }>({})
     const cValue = view(() => value.foo)

packages/doura/src/reactivity/index.ts

@@ -7,7 +7,7 @@ export {
   markRaw,
   markStrict,
 } from './common'
-export { View, view, ViewGetter } from './view'
+export { View, view, ViewGetter, ViewOptions } from './view'
 export { draft, snapshot, watch, resetDraftChildren } from './draft'
 export { ReactiveEffect, pauseTracking, resetTracking } from './effect'
 export { EffectScope, effectScope } from './effectScope'

packages/doura/src/reactivity/view.ts

@@ -13,6 +13,7 @@ export interface View<T = any> {
 
 export interface ViewOptions {
   disableCache?: boolean
+  onDirty?: () => void
 }
 
 export type ViewGetter<T> = (...args: any[]) => T
@@ -30,10 +31,14 @@ export class ViewImpl<T> {
 
   private _cacheable: boolean
 
-  constructor(getter: ViewGetter<T>, { disableCache = false }: ViewOptions) {
+  constructor(
+    getter: ViewGetter<T>,
+    { disableCache = false, onDirty }: ViewOptions
+  ) {
     this.effect = new ReactiveEffect(getter, () => {
       if (!this.dirty) {
         this.dirty = true
+        onDirty?.()
         triggerView(this)
       }
     })