wip

Author: johnsoncodehk

Diff for: packages/reactivity/src/watch.ts

@@ -13,7 +13,6 @@ import type { ComputedRef } from './computed'
 import { ReactiveFlags } from './constants'
 import {
   type DebuggerOptions,
-  type EffectScheduler,
   ReactiveEffect,
   cleanup,
   onCleanup,
@@ -119,42 +118,28 @@ export function onWatcherCleanup(
 }
 
 class WatcherEffect extends ReactiveEffect {
+  forceTrigger: boolean
+  isMultiSource: boolean
+  oldValue: any
+  boundCleanup: typeof onWatcherCleanup
+
   constructor(
     source: WatchSource | WatchSource[] | WatchEffect | object,
-    cb?: WatchCallback | null,
+    public cb?: WatchCallback<any, any> | null | undefined,
     public options: WatchOptions = EMPTY_OBJ,
   ) {
-    const { immediate, deep, once, scheduler, augmentJob, call } = options
-
-    const warnInvalidSource = (s: unknown) => {
-      ;(options.onWarn || warn)(
-        `Invalid watch source: `,
-        s,
-        `A watch source can only be a getter/effect function, a ref, ` +
-          `a reactive object, or an array of these types.`,
-      )
-    }
-
-    const reactiveGetter = (source: object) => {
-      // traverse will happen in wrapped getter below
-      if (deep) return source
-      // for `deep: false | 0` or shallow reactive, only traverse root-level properties
-      if (isShallow(source) || deep === false || deep === 0)
-        return traverse(source, 1)
-      // for `deep: undefined` on a reactive object, deeply traverse all properties
-      return traverse(source)
-    }
+    const { immediate, deep, once, scheduler, augmentJob, call, onWarn } =
+      options
 
     let getter: () => any
-    let boundCleanup: typeof onWatcherCleanup
     let forceTrigger = false
     let isMultiSource = false
 
     if (isRef(source)) {
       getter = () => source.value
       forceTrigger = isShallow(source)
     } else if (isReactive(source)) {
-      getter = () => reactiveGetter(source)
+      getter = () => reactiveGetter(source, deep)
       forceTrigger = true
     } else if (isArray(source)) {
       isMultiSource = true
@@ -164,11 +149,11 @@ class WatcherEffect extends ReactiveEffect {
           if (isRef(s)) {
             return s.value
           } else if (isReactive(s)) {
-            return reactiveGetter(s)
+            return reactiveGetter(s, deep)
           } else if (isFunction(s)) {
             return call ? call(s, WatchErrorCodes.WATCH_GETTER) : s()
           } else {
-            __DEV__ && warnInvalidSource(s)
+            __DEV__ && warnInvalidSource(s, onWarn)
           }
         })
     } else if (isFunction(source)) {
@@ -192,16 +177,18 @@ class WatcherEffect extends ReactiveEffect {
           activeWatcher = this
           try {
             return call
-              ? call(source, WatchErrorCodes.WATCH_CALLBACK, [boundCleanup])
-              : source(boundCleanup)
+              ? call(source, WatchErrorCodes.WATCH_CALLBACK, [
+                  this.boundCleanup,
+                ])
+              : source(this.boundCleanup)
           } finally {
             activeWatcher = currentEffect
           }
         }
       }
     } else {
       getter = NOOP
-      __DEV__ && warnInvalidSource(source)
+      __DEV__ && warnInvalidSource(source, onWarn)
     }
 
     if (cb && deep) {
@@ -211,6 +198,8 @@ class WatcherEffect extends ReactiveEffect {
     }
 
     super(getter)
+    this.forceTrigger = forceTrigger
+    this.isMultiSource = isMultiSource
 
     if (once && cb) {
       const _cb = cb
@@ -220,65 +209,23 @@ class WatcherEffect extends ReactiveEffect {
       }
     }
 
-    let oldValue: any = isMultiSource
+    this.cb = cb
+
+    this.oldValue = isMultiSource
       ? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
       : INITIAL_WATCHER_VALUE
 
-    const job = () => {
-      if (!this.dirty) {
-        return
-      }
-      if (cb) {
-        // watch(source, cb)
-        const newValue = this.run()
-        if (
-          deep ||
-          forceTrigger ||
-          (isMultiSource
-            ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
-            : hasChanged(newValue, oldValue))
-        ) {
-          // cleanup before running cb again
-          if (this.cleanups) {
-            cleanup(this, this.cleanups)
-          }
-          const currentWatcher = activeWatcher
-          activeWatcher = this
-          try {
-            const args = [
-              newValue,
-              // pass undefined as the old value when it's changed for the first time
-              oldValue === INITIAL_WATCHER_VALUE
-                ? undefined
-                : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
-                  ? []
-                  : oldValue,
-              boundCleanup,
-            ]
-            call
-              ? call(cb!, WatchErrorCodes.WATCH_CALLBACK, args)
-              : // @ts-expect-error
-                cb!(...args)
-            oldValue = newValue
-          } finally {
-            activeWatcher = currentWatcher
-          }
-        }
-      } else {
-        // watchEffect
-        this.run()
-      }
-    }
+    const job = this.scheduler.bind(this)
 
     if (augmentJob) {
       augmentJob(job)
     }
 
-    this.scheduler = scheduler
-      ? () => scheduler(job, false)
-      : (job as EffectScheduler)
+    if (scheduler) {
+      this.scheduler = () => scheduler(job, false)
+    }
 
-    boundCleanup = fn => onWatcherCleanup(fn, false, this)
+    this.boundCleanup = fn => onWatcherCleanup(fn, false, this)
 
     if (__DEV__) {
       this.onTrack = options.onTrack
@@ -290,14 +237,80 @@ class WatcherEffect extends ReactiveEffect {
       if (immediate) {
         job()
       } else {
-        oldValue = this.run()
+        this.oldValue = this.run()
       }
     } else if (scheduler) {
-      scheduler(job.bind(null), true)
+      scheduler(job, true)
     } else {
       this.run()
     }
   }
+
+  scheduler(): void {
+    if (!this.dirty) {
+      return
+    }
+    if (this.cb) {
+      // watch(source, cb)
+      const newValue = this.run()
+      const { deep, call } = this.options
+      if (
+        deep ||
+        this.forceTrigger ||
+        (this.isMultiSource
+          ? (newValue as any[]).some((v, i) => hasChanged(v, this.oldValue[i]))
+          : hasChanged(newValue, this.oldValue))
+      ) {
+        // cleanup before running cb again
+        if (this.cleanups) {
+          cleanup(this, this.cleanups)
+        }
+        const currentWatcher = activeWatcher
+        activeWatcher = this
+        try {
+          const args = [
+            newValue,
+            // pass undefined as the old value when it's changed for the first time
+            this.oldValue === INITIAL_WATCHER_VALUE
+              ? undefined
+              : this.isMultiSource && this.oldValue[0] === INITIAL_WATCHER_VALUE
+                ? []
+                : this.oldValue,
+            this.boundCleanup,
+          ]
+          call
+            ? call(this.cb, WatchErrorCodes.WATCH_CALLBACK, args)
+            : // @ts-expect-error
+              this.cb(...args)
+          this.oldValue = newValue
+        } finally {
+          activeWatcher = currentWatcher
+        }
+      }
+    } else {
+      // watchEffect
+      this.run()
+    }
+  }
+}
+
+function reactiveGetter(source: object, deep: WatchOptions['deep']): unknown {
+  // traverse will happen in wrapped getter below
+  if (deep) return source
+  // for `deep: false | 0` or shallow reactive, only traverse root-level properties
+  if (isShallow(source) || deep === false || deep === 0)
+    return traverse(source, 1)
+  // for `deep: undefined` on a reactive object, deeply traverse all properties
+  return traverse(source)
+}
+
+function warnInvalidSource(s: object, onWarn: WatchOptions['onWarn']): void {
+  ;(onWarn || warn)(
+    `Invalid watch source: `,
+    s,
+    `A watch source can only be a getter/effect function, a ref, ` +
+      `a reactive object, or an array of these types.`,
+  )
 }
 
 export function watch(