@vue/reactivity 3.5.0-alpha.4 → 3.5.0-beta.1

package/dist/reactivity.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/reactivity v3.5.0-alpha.4
+* @vue/reactivity v3.5.0-beta.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -29,6 +29,7 @@ class EffectScope {
      * @internal
      */
     this.cleanups = [];
+    this._isPaused = false;
     this.parent = activeEffectScope;
     if (!detached && activeEffectScope) {
       this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
@@ -39,6 +40,37 @@ class EffectScope {
   get active() {
     return this._active;
   }
+  pause() {
+    if (this._active) {
+      this._isPaused = true;
+      if (this.scopes) {
+        for (let i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].pause();
+        }
+      }
+      for (let i = 0, l = this.effects.length; i < l; i++) {
+        this.effects[i].pause();
+      }
+    }
+  }
+  /**
+   * Resumes the effect scope, including all child scopes and effects.
+   */
+  resume() {
+    if (this._active) {
+      if (this._isPaused) {
+        this._isPaused = false;
+        if (this.scopes) {
+          for (let i = 0, l = this.scopes.length; i < l; i++) {
+            this.scopes[i].resume();
+          }
+        }
+        for (let i = 0, l = this.effects.length; i < l; i++) {
+          this.effects[i].resume();
+        }
+      }
+    }
+  }
   run(fn) {
     if (this._active) {
       const currentEffectScope = activeEffectScope;
@@ -123,8 +155,11 @@ const EffectFlags = {
   "ALLOW_RECURSE": 32,
   "32": "ALLOW_RECURSE",
   "NO_BATCH": 64,
-  "64": "NO_BATCH"
+  "64": "NO_BATCH",
+  "PAUSED": 128,
+  "128": "PAUSED"
 };
+const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
 class ReactiveEffect {
   constructor(fn) {
     this.fn = fn;
@@ -153,6 +188,18 @@ class ReactiveEffect {
       activeEffectScope.effects.push(this);
     }
   }
+  pause() {
+    this.flags |= 128;
+  }
+  resume() {
+    if (this.flags & 128) {
+      this.flags &= ~128;
+      if (pausedQueueEffects.has(this)) {
+        pausedQueueEffects.delete(this);
+        this.trigger();
+      }
+    }
+  }
   /**
    * @internal
    */
@@ -206,7 +253,9 @@ class ReactiveEffect {
     }
   }
   trigger() {
-    if (this.scheduler) {
+    if (this.flags & 128) {
+      pausedQueueEffects.add(this);
+    } else if (this.scheduler) {
       this.scheduler();
     } else {
       this.runIfDirty();
@@ -539,9 +588,15 @@ function addSub(link) {
   link.dep.subs = link;
 }
 const targetMap = /* @__PURE__ */ new WeakMap();
-const ITERATE_KEY = Symbol("Object iterate" );
-const MAP_KEY_ITERATE_KEY = Symbol("Map keys iterate" );
-const ARRAY_ITERATE_KEY = Symbol("Array iterate" );
+const ITERATE_KEY = Symbol(
+  "Object iterate" 
+);
+const MAP_KEY_ITERATE_KEY = Symbol(
+  "Map keys iterate" 
+);
+const ARRAY_ITERATE_KEY = Symbol(
+  "Array iterate" 
+);
 function track(target, type, key) {
   if (shouldTrack && activeSub) {
     let depsMap = targetMap.get(target);
@@ -665,19 +720,16 @@ const arrayInstrumentations = {
     return apply(this, "every", fn, thisArg);
   },
   filter(fn, thisArg) {
-    const result = apply(this, "filter", fn, thisArg);
-    return isProxy(this) && !isShallow(this) ? result.map(toReactive) : result;
+    return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive));
   },
   find(fn, thisArg) {
-    const result = apply(this, "find", fn, thisArg);
-    return isProxy(this) && !isShallow(this) ? toReactive(result) : result;
+    return apply(this, "find", fn, thisArg, toReactive);
   },
   findIndex(fn, thisArg) {
     return apply(this, "findIndex", fn, thisArg);
   },
   findLast(fn, thisArg) {
-    const result = apply(this, "findLast", fn, thisArg);
-    return isProxy(this) && !isShallow(this) ? toReactive(result) : result;
+    return apply(this, "findLast", fn, thisArg, toReactive);
   },
   findLastIndex(fn, thisArg) {
     return apply(this, "findLastIndex", fn, thisArg);
@@ -755,11 +807,13 @@ function iterator(self, method, wrapValue) {
   }
   return iter;
 }
-function apply(self, method, fn, thisArg) {
+function apply(self, method, fn, thisArg, wrappedRetFn) {
   const arr = shallowReadArray(self);
+  let needsWrap = false;
   let wrappedFn = fn;
   if (arr !== self) {
-    if (!isShallow(self)) {
+    needsWrap = !isShallow(self);
+    if (needsWrap) {
       wrappedFn = function(item, index) {
         return fn.call(this, toReactive(item), index, self);
       };
@@ -769,7 +823,8 @@ function apply(self, method, fn, thisArg) {
       };
     }
   }
-  return arr[method](wrappedFn, thisArg);
+  const result = arr[method](wrappedFn, thisArg);
+  return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
 }
 function reduce(self, method, fn, args) {
   const arr = shallowReadArray(self);
@@ -831,7 +886,7 @@ class BaseReactiveHandler {
       return isShallow2;
     } else if (key === "__v_raw") {
       if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
-      // this means the reciever is a user proxy of the reactive proxy
+      // this means the receiver is a user proxy of the reactive proxy
       Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
         return target;
       }
@@ -955,9 +1010,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
 }
 const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
 const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
-const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
-  true
-);
+const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(true);
 const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
 
 const toShallow = (value) => value;
@@ -1452,13 +1505,14 @@ function proxyRefs(objectWithRefs) {
 class CustomRefImpl {
   constructor(factory) {
     this["__v_isRef"] = true;
+    this._value = void 0;
     const dep = this.dep = new Dep();
     const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
     this._get = get;
     this._set = set;
   }
   get value() {
-    return this._get();
+    return this._value = this._get();
   }
   set value(newVal) {
     this._set(newVal);
@@ -1483,10 +1537,11 @@ class ObjectRefImpl {
     this._key = _key;
     this._defaultValue = _defaultValue;
     this["__v_isRef"] = true;
+    this._value = void 0;
   }
   get value() {
     const val = this._object[this._key];
-    return val === void 0 ? this._defaultValue : val;
+    return this._value = val === void 0 ? this._defaultValue : val;
   }
   set value(newVal) {
     this._object[this._key] = newVal;
@@ -1500,9 +1555,10 @@ class GetterRefImpl {
     this._getter = _getter;
     this["__v_isRef"] = true;
     this["__v_isReadonly"] = true;
+    this._value = void 0;
   }
   get value() {
-    return this._getter();
+    return this._value = this._getter();
   }
 }
 function toRef(source, key, defaultValue) {
@@ -1536,7 +1592,8 @@ class ComputedRefImpl {
     /**
      * @internal
      */
-    this["__v_isRef"] = true;
+    this.__v_isRef = true;
+    // TODO isolatedDeclarations "__v_isReadonly"
     // A computed is also a subscriber that tracks other deps
     /**
      * @internal

package/dist/reactivity.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* @vue/reactivity v3.5.0-alpha.4
+* @vue/reactivity v3.5.0-beta.1
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -25,6 +25,7 @@ class EffectScope {
      * @internal
      */
     this.cleanups = [];
+    this._isPaused = false;
     this.parent = activeEffectScope;
     if (!detached && activeEffectScope) {
       this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
@@ -35,6 +36,37 @@ class EffectScope {
   get active() {
     return this._active;
   }
+  pause() {
+    if (this._active) {
+      this._isPaused = true;
+      if (this.scopes) {
+        for (let i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].pause();
+        }
+      }
+      for (let i = 0, l = this.effects.length; i < l; i++) {
+        this.effects[i].pause();
+      }
+    }
+  }
+  /**
+   * Resumes the effect scope, including all child scopes and effects.
+   */
+  resume() {
+    if (this._active) {
+      if (this._isPaused) {
+        this._isPaused = false;
+        if (this.scopes) {
+          for (let i = 0, l = this.scopes.length; i < l; i++) {
+            this.scopes[i].resume();
+          }
+        }
+        for (let i = 0, l = this.effects.length; i < l; i++) {
+          this.effects[i].resume();
+        }
+      }
+    }
+  }
   run(fn) {
     if (this._active) {
       const currentEffectScope = activeEffectScope;
@@ -113,8 +145,11 @@ const EffectFlags = {
   "ALLOW_RECURSE": 32,
   "32": "ALLOW_RECURSE",
   "NO_BATCH": 64,
-  "64": "NO_BATCH"
+  "64": "NO_BATCH",
+  "PAUSED": 128,
+  "128": "PAUSED"
 };
+const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
 class ReactiveEffect {
   constructor(fn) {
     this.fn = fn;
@@ -143,6 +178,18 @@ class ReactiveEffect {
       activeEffectScope.effects.push(this);
     }
   }
+  pause() {
+    this.flags |= 128;
+  }
+  resume() {
+    if (this.flags & 128) {
+      this.flags &= ~128;
+      if (pausedQueueEffects.has(this)) {
+        pausedQueueEffects.delete(this);
+        this.trigger();
+      }
+    }
+  }
   /**
    * @internal
    */
@@ -191,7 +238,9 @@ class ReactiveEffect {
     }
   }
   trigger() {
-    if (this.scheduler) {
+    if (this.flags & 128) {
+      pausedQueueEffects.add(this);
+    } else if (this.scheduler) {
       this.scheduler();
     } else {
       this.runIfDirty();
@@ -491,9 +540,15 @@ function addSub(link) {
   link.dep.subs = link;
 }
 const targetMap = /* @__PURE__ */ new WeakMap();
-const ITERATE_KEY = Symbol("");
-const MAP_KEY_ITERATE_KEY = Symbol("");
-const ARRAY_ITERATE_KEY = Symbol("");
+const ITERATE_KEY = Symbol(
+  ""
+);
+const MAP_KEY_ITERATE_KEY = Symbol(
+  ""
+);
+const ARRAY_ITERATE_KEY = Symbol(
+  ""
+);
 function track(target, type, key) {
   if (shouldTrack && activeSub) {
     let depsMap = targetMap.get(target);
@@ -606,19 +661,16 @@ const arrayInstrumentations = {
     return apply(this, "every", fn, thisArg);
   },
   filter(fn, thisArg) {
-    const result = apply(this, "filter", fn, thisArg);
-    return isProxy(this) && !isShallow(this) ? result.map(toReactive) : result;
+    return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive));
   },
   find(fn, thisArg) {
-    const result = apply(this, "find", fn, thisArg);
-    return isProxy(this) && !isShallow(this) ? toReactive(result) : result;
+    return apply(this, "find", fn, thisArg, toReactive);
   },
   findIndex(fn, thisArg) {
     return apply(this, "findIndex", fn, thisArg);
   },
   findLast(fn, thisArg) {
-    const result = apply(this, "findLast", fn, thisArg);
-    return isProxy(this) && !isShallow(this) ? toReactive(result) : result;
+    return apply(this, "findLast", fn, thisArg, toReactive);
   },
   findLastIndex(fn, thisArg) {
     return apply(this, "findLastIndex", fn, thisArg);
@@ -696,11 +748,13 @@ function iterator(self, method, wrapValue) {
   }
   return iter;
 }
-function apply(self, method, fn, thisArg) {
+function apply(self, method, fn, thisArg, wrappedRetFn) {
   const arr = shallowReadArray(self);
+  let needsWrap = false;
   let wrappedFn = fn;
   if (arr !== self) {
-    if (!isShallow(self)) {
+    needsWrap = !isShallow(self);
+    if (needsWrap) {
       wrappedFn = function(item, index) {
         return fn.call(this, toReactive(item), index, self);
       };
@@ -710,7 +764,8 @@ function apply(self, method, fn, thisArg) {
       };
     }
   }
-  return arr[method](wrappedFn, thisArg);
+  const result = arr[method](wrappedFn, thisArg);
+  return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
 }
 function reduce(self, method, fn, args) {
   const arr = shallowReadArray(self);
@@ -772,7 +827,7 @@ class BaseReactiveHandler {
       return isShallow2;
     } else if (key === "__v_raw") {
       if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
-      // this means the reciever is a user proxy of the reactive proxy
+      // this means the receiver is a user proxy of the reactive proxy
       Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
         return target;
       }
@@ -884,9 +939,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
 }
 const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
 const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
-const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
-  true
-);
+const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(true);
 const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
 
 const toShallow = (value) => value;
@@ -1338,13 +1391,14 @@ function proxyRefs(objectWithRefs) {
 class CustomRefImpl {
   constructor(factory) {
     this["__v_isRef"] = true;
+    this._value = void 0;
     const dep = this.dep = new Dep();
     const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
     this._get = get;
     this._set = set;
   }
   get value() {
-    return this._get();
+    return this._value = this._get();
   }
   set value(newVal) {
     this._set(newVal);
@@ -1366,10 +1420,11 @@ class ObjectRefImpl {
     this._key = _key;
     this._defaultValue = _defaultValue;
     this["__v_isRef"] = true;
+    this._value = void 0;
   }
   get value() {
     const val = this._object[this._key];
-    return val === void 0 ? this._defaultValue : val;
+    return this._value = val === void 0 ? this._defaultValue : val;
   }
   set value(newVal) {
     this._object[this._key] = newVal;
@@ -1383,9 +1438,10 @@ class GetterRefImpl {
     this._getter = _getter;
     this["__v_isRef"] = true;
     this["__v_isReadonly"] = true;
+    this._value = void 0;
   }
   get value() {
-    return this._getter();
+    return this._value = this._getter();
   }
 }
 function toRef(source, key, defaultValue) {
@@ -1419,7 +1475,8 @@ class ComputedRefImpl {
     /**
      * @internal
      */
-    this["__v_isRef"] = true;
+    this.__v_isRef = true;
+    // TODO isolatedDeclarations "__v_isReadonly"
     // A computed is also a subscriber that tracks other deps
     /**
      * @internal

package/dist/reactivity.d.ts

@@ -22,8 +22,8 @@ export declare enum ReactiveFlags {
 
 export type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>;
 declare const ReactiveMarkerSymbol: unique symbol;
-export declare class ReactiveMarker {
-    private [ReactiveMarkerSymbol]?;
+export interface ReactiveMarker {
+    [ReactiveMarkerSymbol]?: void;
 }
 export type Reactive<T> = UnwrapNestedRefs<T> & (T extends readonly any[] ? ReactiveMarker : {});
 /**
@@ -278,7 +278,8 @@ export declare enum EffectFlags {
     NOTIFIED = 8,
     DIRTY = 16,
     ALLOW_RECURSE = 32,
-    NO_BATCH = 64
+    NO_BATCH = 64,
+    PAUSED = 128
 }
 /**
  * Subscriber is a type that tracks (or subscribes to) a list of deps.
@@ -292,6 +293,8 @@ export declare class ReactiveEffect<T = any> implements Subscriber, ReactiveEffe
     onTrack?: (event: DebuggerEvent) => void;
     onTrigger?: (event: DebuggerEvent) => void;
     constructor(fn: () => T);
+    pause(): void;
+    resume(): void;
     run(): T;
     stop(): void;
     trigger(): void;
@@ -343,7 +346,7 @@ export interface ComputedRef<T = any> extends WritableComputedRef<T> {
     readonly value: T;
     [ComputedRefSymbol]: true;
 }
-export interface WritableComputedRef<T> extends Ref<T> {
+export interface WritableComputedRef<T, S = T> extends Ref<T, S> {
     /**
      * @deprecated computed no longer uses effect
      */
@@ -351,9 +354,9 @@ export interface WritableComputedRef<T> extends Ref<T> {
 }
 export type ComputedGetter<T> = (oldValue?: T) => T;
 export type ComputedSetter<T> = (newValue: T) => void;
-export interface WritableComputedOptions<T> {
+export interface WritableComputedOptions<T, S = T> {
     get: ComputedGetter<T>;
-    set: ComputedSetter<T>;
+    set: ComputedSetter<S>;
 }
 /**
  * @private exported by @vue/reactivity for Vue core use, but not exported from
@@ -366,8 +369,8 @@ export declare class ComputedRefImpl<T = any> implements Subscriber {
     onTrack?: (event: DebuggerEvent) => void;
     onTrigger?: (event: DebuggerEvent) => void;
     constructor(fn: ComputedGetter<T>, setter: ComputedSetter<T> | undefined, isSSR: boolean);
-    get value(): any;
-    set value(newValue: any);
+    get value(): T;
+    set value(newValue: T);
 }
 /**
  * Takes a getter function and returns a readonly reactive ref object for the
@@ -403,12 +406,13 @@ export declare class ComputedRefImpl<T = any> implements Subscriber {
  * @see {@link https://vuejs.org/api/reactivity-core.html#computed}
  */
 export declare function computed<T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ComputedRef<T>;
-export declare function computed<T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions): WritableComputedRef<T>;
+export declare function computed<T, S = T>(options: WritableComputedOptions<T, S>, debugOptions?: DebuggerOptions): WritableComputedRef<T, S>;
 
 declare const RefSymbol: unique symbol;
 declare const RawSymbol: unique symbol;
-export interface Ref<T = any> {
-    value: T;
+export interface Ref<T = any, S = T> {
+    get value(): T;
+    set value(_: S);
     /**
      * Type differentiator only.
      * We need this to be in public d.ts but don't want it to show up in IDE
@@ -430,7 +434,7 @@ export declare function isRef<T>(r: Ref<T> | unknown): r is Ref<T>;
  * @param value - The object to wrap in the ref.
  * @see {@link https://vuejs.org/api/reactivity-core.html#ref}
  */
-export declare function ref<T>(value: T): Ref<UnwrapRef<T>>;
+export declare function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T>;
 export declare function ref<T = any>(): Ref<T | undefined>;
 declare const ShallowRefMarker: unique symbol;
 export type ShallowRef<T = any> = Ref<T> & {
@@ -481,8 +485,8 @@ export declare function shallowRef<T = any>(): ShallowRef<T | undefined>;
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#triggerref}
  */
 export declare function triggerRef(ref: Ref): void;
-export type MaybeRef<T = any> = T | Ref<T>;
-export type MaybeRefOrGetter<T = any> = MaybeRef<T> | (() => T);
+export type MaybeRef<T = any> = T | Ref<T> | ShallowRef<T> | WritableComputedRef<T>;
+export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T);
 /**
  * Returns the inner value if the argument is a ref, otherwise return the
  * argument itself. This is a sugar function for
@@ -499,7 +503,7 @@ export type MaybeRefOrGetter<T = any> = MaybeRef<T> | (() => T);
  * @param ref - Ref or plain value to be converted into the plain value.
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#unref}
  */
-export declare function unref<T>(ref: MaybeRef<T> | ComputedRef<T> | ShallowRef<T>): T;
+export declare function unref<T>(ref: MaybeRef<T> | ComputedRef<T>): T;
 /**
  * Normalizes values / refs / getters to values.
  * This is similar to {@link unref()}, except that it also normalizes getters.
@@ -516,7 +520,7 @@ export declare function unref<T>(ref: MaybeRef<T> | ComputedRef<T> | ShallowRef<
  * @param source - A getter, an existing ref, or a non-function value.
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#tovalue}
  */
-export declare function toValue<T>(source: MaybeRefOrGetter<T> | ComputedRef<T> | ShallowRef<T>): T;
+export declare function toValue<T>(source: MaybeRefOrGetter<T>): T;
 /**
  * Returns a proxy for the given object that shallowly unwraps properties that
  * are refs. If the object already is reactive, it's returned as-is. If not, a
@@ -653,8 +657,14 @@ export declare function trigger(target: object, type: TriggerOpTypes, key?: unkn
 
 export declare class EffectScope {
     detached: boolean;
+    private _isPaused;
     constructor(detached?: boolean);
     get active(): boolean;
+    pause(): void;
+    /**
+     * Resumes the effect scope, including all child scopes and effects.
+     */
+    resume(): void;
     run<T>(fn: () => T): T | undefined;
     stop(fromParent?: boolean): void;
 }