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

package/dist/reactivity.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/reactivity v3.5.0-beta.2
+* @vue/reactivity v3.5.0-beta.3
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -805,14 +805,14 @@ function iterator(self, method, wrapValue) {
 const arrayProto = Array.prototype;
 function apply(self, method, fn, thisArg, wrappedRetFn, args) {
   const arr = shallowReadArray(self);
-  let methodFn;
-  if ((methodFn = arr[method]) !== arrayProto[method]) {
-    return methodFn.apply(arr, args);
+  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 needsWrap = false;
   let wrappedFn = fn;
   if (arr !== self) {
-    needsWrap = !isShallow(self);
     if (needsWrap) {
       wrappedFn = function(item, index) {
         return fn.call(this, toReactive(item), index, self);
@@ -1682,6 +1682,228 @@ 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);
+  } else if (!failSilently) {
+    warn(
+      `onWatcherCleanup() was called when there was no active watcher to associate with.`
+    );
+  }
+}
+function watch(source, cb, options = shared.EMPTY_OBJ) {
+  const { immediate, deep, once, scheduler, augmentJob, call } = options;
+  const warnInvalidSource = (s) => {
+    (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 = (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 {
+        warnInvalidSource(s);
+      }
+    });
+  } 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;
+    warnInvalidSource(source);
+  }
+  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);
+    }
+  };
+  {
+    effect.onTrack = options.onTrack;
+    effect.onTrigger = options.onTrigger;
+  }
+  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;
@@ -1691,12 +1913,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;
@@ -1705,6 +1929,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;
@@ -1724,6 +1949,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.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* @vue/reactivity v3.5.0-beta.2
+* @vue/reactivity v3.5.0-beta.3
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -746,14 +746,14 @@ function iterator(self, method, wrapValue) {
 const arrayProto = Array.prototype;
 function apply(self, method, fn, thisArg, wrappedRetFn, args) {
   const arr = shallowReadArray(self);
-  let methodFn;
-  if ((methodFn = arr[method]) !== arrayProto[method]) {
-    return methodFn.apply(arr, args);
+  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 needsWrap = false;
   let wrappedFn = fn;
   if (arr !== self) {
-    needsWrap = !isShallow(self);
     if (needsWrap) {
       wrappedFn = function(item, index) {
         return fn.call(this, toReactive(item), index, self);
@@ -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

@@ -707,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;
+