@vue/reactivity 3.5.0-beta.1 → 3.5.0-beta.3

package/dist/reactivity.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* @vue/reactivity v3.5.0-beta.1
+* @vue/reactivity v3.5.0-beta.3
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -144,10 +144,8 @@ const EffectFlags = {
   "16": "DIRTY",
   "ALLOW_RECURSE": 32,
   "32": "ALLOW_RECURSE",
-  "NO_BATCH": 64,
-  "64": "NO_BATCH",
-  "PAUSED": 128,
-  "128": "PAUSED"
+  "PAUSED": 64,
+  "64": "PAUSED"
 };
 const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
 class ReactiveEffect {
@@ -179,11 +177,11 @@ class ReactiveEffect {
     }
   }
   pause() {
-    this.flags |= 128;
+    this.flags |= 64;
   }
   resume() {
-    if (this.flags & 128) {
-      this.flags &= ~128;
+    if (this.flags & 64) {
+      this.flags &= ~64;
       if (pausedQueueEffects.has(this)) {
         pausedQueueEffects.delete(this);
         this.trigger();
@@ -197,9 +195,6 @@ class ReactiveEffect {
     if (this.flags & 2 && !(this.flags & 32)) {
       return;
     }
-    if (this.flags & 64) {
-      return this.trigger();
-    }
     if (!(this.flags & 8)) {
       this.flags |= 8;
       this.nextEffect = batchedEffect;
@@ -238,7 +233,7 @@ class ReactiveEffect {
     }
   }
   trigger() {
-    if (this.flags & 128) {
+    if (this.flags & 64) {
       pausedQueueEffects.add(this);
     } else if (this.scheduler) {
       this.scheduler();
@@ -268,6 +263,7 @@ function endBatch() {
     batchDepth--;
     return;
   }
+  batchDepth--;
   let error;
   while (batchedEffect) {
     let e = batchedEffect;
@@ -286,7 +282,6 @@ function endBatch() {
       e = next;
     }
   }
-  batchDepth--;
   if (error) throw error;
 }
 function prepareDeps(sub) {
@@ -658,26 +653,26 @@ const arrayInstrumentations = {
     });
   },
   every(fn, thisArg) {
-    return apply(this, "every", fn, thisArg);
+    return apply(this, "every", fn, thisArg, void 0, arguments);
   },
   filter(fn, thisArg) {
-    return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive));
+    return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive), arguments);
   },
   find(fn, thisArg) {
-    return apply(this, "find", fn, thisArg, toReactive);
+    return apply(this, "find", fn, thisArg, toReactive, arguments);
   },
   findIndex(fn, thisArg) {
-    return apply(this, "findIndex", fn, thisArg);
+    return apply(this, "findIndex", fn, thisArg, void 0, arguments);
   },
   findLast(fn, thisArg) {
-    return apply(this, "findLast", fn, thisArg, toReactive);
+    return apply(this, "findLast", fn, thisArg, toReactive, arguments);
   },
   findLastIndex(fn, thisArg) {
-    return apply(this, "findLastIndex", fn, thisArg);
+    return apply(this, "findLastIndex", fn, thisArg, void 0, arguments);
   },
   // flat, flatMap could benefit from ARRAY_ITERATE but are not straight-forward to implement
   forEach(fn, thisArg) {
-    return apply(this, "forEach", fn, thisArg);
+    return apply(this, "forEach", fn, thisArg, void 0, arguments);
   },
   includes(...args) {
     return searchProxy(this, "includes", args);
@@ -693,7 +688,7 @@ const arrayInstrumentations = {
     return searchProxy(this, "lastIndexOf", args);
   },
   map(fn, thisArg) {
-    return apply(this, "map", fn, thisArg);
+    return apply(this, "map", fn, thisArg, void 0, arguments);
   },
   pop() {
     return noTracking(this, "pop");
@@ -712,7 +707,7 @@ const arrayInstrumentations = {
   },
   // slice could use ARRAY_ITERATE but also seems to beg for range tracking
   some(fn, thisArg) {
-    return apply(this, "some", fn, thisArg);
+    return apply(this, "some", fn, thisArg, void 0, arguments);
   },
   splice(...args) {
     return noTracking(this, "splice", args);
@@ -748,12 +743,17 @@ function iterator(self, method, wrapValue) {
   }
   return iter;
 }
-function apply(self, method, fn, thisArg, wrappedRetFn) {
+const arrayProto = Array.prototype;
+function apply(self, method, fn, thisArg, wrappedRetFn, args) {
   const arr = shallowReadArray(self);
-  let needsWrap = false;
+  const needsWrap = arr !== self && !isShallow(self);
+  const methodFn = arr[method];
+  if (methodFn !== arrayProto[method]) {
+    const result2 = methodFn.apply(arr, args);
+    return needsWrap ? toReactive(result2) : result2;
+  }
   let wrappedFn = fn;
   if (arr !== self) {
-    needsWrap = !isShallow(self);
     if (needsWrap) {
       wrappedFn = function(item, index) {
         return fn.call(this, toReactive(item), index, self);
@@ -764,7 +764,7 @@ function apply(self, method, fn, thisArg, wrappedRetFn) {
       };
     }
   }
-  const result = arr[method](wrappedFn, thisArg);
+  const result = methodFn.call(arr, wrappedFn, thisArg);
   return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
 }
 function reduce(self, method, fn, args) {
@@ -1555,6 +1555,210 @@ const ReactiveFlags = {
   "IS_REF": "__v_isRef"
 };
 
+const WatchErrorCodes = {
+  "WATCH_GETTER": 2,
+  "2": "WATCH_GETTER",
+  "WATCH_CALLBACK": 3,
+  "3": "WATCH_CALLBACK",
+  "WATCH_CLEANUP": 4,
+  "4": "WATCH_CLEANUP"
+};
+const INITIAL_WATCHER_VALUE = {};
+const cleanupMap = /* @__PURE__ */ new WeakMap();
+let activeWatcher = void 0;
+function getCurrentWatcher() {
+  return activeWatcher;
+}
+function onWatcherCleanup(cleanupFn, failSilently = false, owner = activeWatcher) {
+  if (owner) {
+    let cleanups = cleanupMap.get(owner);
+    if (!cleanups) cleanupMap.set(owner, cleanups = []);
+    cleanups.push(cleanupFn);
+  }
+}
+function watch(source, cb, options = shared.EMPTY_OBJ) {
+  const { immediate, deep, once, scheduler, augmentJob, call } = options;
+  const reactiveGetter = (source2) => {
+    if (deep) return source2;
+    if (isShallow(source2) || deep === false || deep === 0)
+      return traverse(source2, 1);
+    return traverse(source2);
+  };
+  let effect;
+  let getter;
+  let cleanup;
+  let boundCleanup;
+  let forceTrigger = false;
+  let isMultiSource = false;
+  if (isRef(source)) {
+    getter = () => source.value;
+    forceTrigger = isShallow(source);
+  } else if (isReactive(source)) {
+    getter = () => reactiveGetter(source);
+    forceTrigger = true;
+  } else if (shared.isArray(source)) {
+    isMultiSource = true;
+    forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
+    getter = () => source.map((s) => {
+      if (isRef(s)) {
+        return s.value;
+      } else if (isReactive(s)) {
+        return reactiveGetter(s);
+      } else if (shared.isFunction(s)) {
+        return call ? call(s, 2) : s();
+      } else ;
+    });
+  } else if (shared.isFunction(source)) {
+    if (cb) {
+      getter = call ? () => call(source, 2) : source;
+    } else {
+      getter = () => {
+        if (cleanup) {
+          pauseTracking();
+          try {
+            cleanup();
+          } finally {
+            resetTracking();
+          }
+        }
+        const currentEffect = activeWatcher;
+        activeWatcher = effect;
+        try {
+          return call ? call(source, 3, [boundCleanup]) : source(boundCleanup);
+        } finally {
+          activeWatcher = currentEffect;
+        }
+      };
+    }
+  } else {
+    getter = shared.NOOP;
+  }
+  if (cb && deep) {
+    const baseGetter = getter;
+    const depth = deep === true ? Infinity : deep;
+    getter = () => traverse(baseGetter(), depth);
+  }
+  if (once) {
+    if (cb) {
+      const _cb = cb;
+      cb = (...args) => {
+        _cb(...args);
+        effect.stop();
+      };
+    } else {
+      const _getter = getter;
+      getter = () => {
+        _getter();
+        effect.stop();
+      };
+    }
+  }
+  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+  const job = (immediateFirstRun) => {
+    if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
+      return;
+    }
+    if (cb) {
+      const newValue = effect.run();
+      if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => shared.hasChanged(v, oldValue[i])) : shared.hasChanged(newValue, oldValue))) {
+        if (cleanup) {
+          cleanup();
+        }
+        const currentWatcher = activeWatcher;
+        activeWatcher = effect;
+        try {
+          const args = [
+            newValue,
+            // pass undefined as the old value when it's changed for the first time
+            oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
+            boundCleanup
+          ];
+          call ? call(cb, 3, args) : (
+            // @ts-expect-error
+            cb(...args)
+          );
+          oldValue = newValue;
+        } finally {
+          activeWatcher = currentWatcher;
+        }
+      }
+    } else {
+      effect.run();
+    }
+  };
+  if (augmentJob) {
+    augmentJob(job);
+  }
+  effect = new ReactiveEffect(getter);
+  effect.scheduler = scheduler ? () => scheduler(job, false) : job;
+  boundCleanup = (fn) => onWatcherCleanup(fn, false, effect);
+  cleanup = effect.onStop = () => {
+    const cleanups = cleanupMap.get(effect);
+    if (cleanups) {
+      if (call) {
+        call(cleanups, 4);
+      } else {
+        for (const cleanup2 of cleanups) cleanup2();
+      }
+      cleanupMap.delete(effect);
+    }
+  };
+  if (cb) {
+    if (immediate) {
+      job(true);
+    } else {
+      oldValue = effect.run();
+    }
+  } else if (scheduler) {
+    scheduler(job.bind(null, true), true);
+  } else {
+    effect.run();
+  }
+  const scope = getCurrentScope();
+  const watchHandle = () => {
+    effect.stop();
+    if (scope) {
+      shared.remove(scope.effects, effect);
+    }
+  };
+  watchHandle.pause = effect.pause.bind(effect);
+  watchHandle.resume = effect.resume.bind(effect);
+  watchHandle.stop = watchHandle;
+  return watchHandle;
+}
+function traverse(value, depth = Infinity, seen) {
+  if (depth <= 0 || !shared.isObject(value) || value["__v_skip"]) {
+    return value;
+  }
+  seen = seen || /* @__PURE__ */ new Set();
+  if (seen.has(value)) {
+    return value;
+  }
+  seen.add(value);
+  depth--;
+  if (isRef(value)) {
+    traverse(value.value, depth, seen);
+  } else if (shared.isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      traverse(value[i], depth, seen);
+    }
+  } else if (shared.isSet(value) || shared.isMap(value)) {
+    value.forEach((v) => {
+      traverse(v, depth, seen);
+    });
+  } else if (shared.isPlainObject(value)) {
+    for (const key in value) {
+      traverse(value[key], depth, seen);
+    }
+    for (const key of Object.getOwnPropertySymbols(value)) {
+      if (Object.prototype.propertyIsEnumerable.call(value, key)) {
+        traverse(value[key], depth, seen);
+      }
+    }
+  }
+  return value;
+}
+
 exports.ARRAY_ITERATE_KEY = ARRAY_ITERATE_KEY;
 exports.EffectFlags = EffectFlags;
 exports.EffectScope = EffectScope;
@@ -1564,12 +1768,14 @@ exports.ReactiveEffect = ReactiveEffect;
 exports.ReactiveFlags = ReactiveFlags;
 exports.TrackOpTypes = TrackOpTypes;
 exports.TriggerOpTypes = TriggerOpTypes;
+exports.WatchErrorCodes = WatchErrorCodes;
 exports.computed = computed;
 exports.customRef = customRef;
 exports.effect = effect;
 exports.effectScope = effectScope;
 exports.enableTracking = enableTracking;
 exports.getCurrentScope = getCurrentScope;
+exports.getCurrentWatcher = getCurrentWatcher;
 exports.isProxy = isProxy;
 exports.isReactive = isReactive;
 exports.isReadonly = isReadonly;
@@ -1578,6 +1784,7 @@ exports.isShallow = isShallow;
 exports.markRaw = markRaw;
 exports.onEffectCleanup = onEffectCleanup;
 exports.onScopeDispose = onScopeDispose;
+exports.onWatcherCleanup = onWatcherCleanup;
 exports.pauseTracking = pauseTracking;
 exports.proxyRefs = proxyRefs;
 exports.reactive = reactive;
@@ -1597,6 +1804,8 @@ exports.toRef = toRef;
 exports.toRefs = toRefs;
 exports.toValue = toValue;
 exports.track = track;
+exports.traverse = traverse;
 exports.trigger = trigger;
 exports.triggerRef = triggerRef;
 exports.unref = unref;
+exports.watch = watch;

package/dist/reactivity.d.ts

@@ -278,8 +278,7 @@ export declare enum EffectFlags {
     NOTIFIED = 8,
     DIRTY = 16,
     ALLOW_RECURSE = 32,
-    NO_BATCH = 64,
-    PAUSED = 128
+    PAUSED = 64
 }
 /**
  * Subscriber is a type that tracks (or subscribes to) a list of deps.
@@ -342,16 +341,20 @@ export declare function resetTracking(): void;
 export declare function onEffectCleanup(fn: () => void, failSilently?: boolean): void;
 
 declare const ComputedRefSymbol: unique symbol;
-export interface ComputedRef<T = any> extends WritableComputedRef<T> {
-    readonly value: T;
+declare const WritableComputedRefSymbol: unique symbol;
+interface BaseComputedRef<T, S = T> extends Ref<T, S> {
     [ComputedRefSymbol]: true;
-}
-export interface WritableComputedRef<T, S = T> extends Ref<T, S> {
     /**
      * @deprecated computed no longer uses effect
      */
     effect: ComputedRefImpl;
 }
+export interface ComputedRef<T = any> extends BaseComputedRef<T> {
+    readonly value: T;
+}
+export interface WritableComputedRef<T, S = T> extends BaseComputedRef<T, S> {
+    [WritableComputedRefSymbol]: true;
+}
 export type ComputedGetter<T> = (oldValue?: T) => T;
 export type ComputedSetter<T> = (newValue: T) => void;
 export interface WritableComputedOptions<T, S = T> {
@@ -704,3 +707,41 @@ export declare function reactiveReadArray<T>(array: T[]): T[];
  */
 export declare function shallowReadArray<T>(arr: T[]): T[];
 
+export declare enum WatchErrorCodes {
+    WATCH_GETTER = 2,
+    WATCH_CALLBACK = 3,
+    WATCH_CLEANUP = 4
+}
+type WatchEffect = (onCleanup: OnCleanup) => void;
+type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T);
+type WatchCallback<V = any, OV = any> = (value: V, oldValue: OV, onCleanup: OnCleanup) => any;
+type OnCleanup = (cleanupFn: () => void) => void;
+export interface WatchOptions<Immediate = boolean> extends DebuggerOptions {
+    immediate?: Immediate;
+    deep?: boolean | number;
+    once?: boolean;
+    scheduler?: WatchScheduler;
+    onWarn?: (msg: string, ...args: any[]) => void;
+}
+export type WatchStopHandle = () => void;
+export interface WatchHandle extends WatchStopHandle {
+    pause: () => void;
+    resume: () => void;
+    stop: () => void;
+}
+export type WatchScheduler = (job: () => void, isFirstRun: boolean) => void;
+/**
+ * Returns the current active effect if there is one.
+ */
+export declare function getCurrentWatcher(): ReactiveEffect<any> | undefined;
+/**
+ * Registers a cleanup callback on the current active effect. This
+ * registered cleanup callback will be invoked right before the
+ * associated effect re-runs.
+ *
+ * @param cleanupFn - The callback function to attach to the effect's cleanup.
+ */
+export declare function onWatcherCleanup(cleanupFn: () => void, failSilently?: boolean, owner?: ReactiveEffect | undefined): void;
+export declare function watch(source: WatchSource | WatchSource[] | WatchEffect | object, cb?: WatchCallback | null, options?: WatchOptions): WatchHandle;
+export declare function traverse(value: unknown, depth?: number, seen?: Set<unknown>): unknown;
+