mobx 6.9.1 → 6.10.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # mobx
 
+## 6.10.1
+
+### Patch Changes
+
+-   [`3ceeb865`](https://github.com/mobxjs/mobx/commit/3ceeb8651e328c4c7211c875696b3f5269fea834) [#3732](https://github.com/mobxjs/mobx/pull/3732) Thanks [@urugator](https://github.com/urugator)! - - fix: #3728: Observable initialization updates state version.
+    -   fix: Observable set initialization violates `enforceActions: "always"`.
+    -   fix: Changing keys of observable object does not respect `enforceActions`.
+
+## 6.10.0
+
+### Minor Changes
+
+-   [`bebd5f05`](https://github.com/mobxjs/mobx/commit/bebd5f0507a109145f401c78630ed9d59e4a1101) [#3727](https://github.com/mobxjs/mobx/pull/3727) Thanks [@rluvaton](https://github.com/rluvaton)! - Added support for `signal` (AbortSignal) in `autorun`, `reaction` and sync `when` options to dispose them
+
+### Patch Changes
+
+-   [`55f78ddc`](https://github.com/mobxjs/mobx/commit/55f78ddc20e84f38a7aa88b99a51ad994e558241) [#3717](https://github.com/mobxjs/mobx/pull/3717) Thanks [@liucan233](https://github.com/liucan233)! - remove proxy option for makeObservable and makeAutoObservable
+
 ## 6.9.1
 
 ### Patch Changes

package/dist/api/autorun.d.ts

@@ -1,4 +1,4 @@
-import { IEqualsComparer, IReactionDisposer, IReactionPublic } from "../internal";
+import { IEqualsComparer, IReactionDisposer, IReactionPublic, GenericAbortSignal } from "../internal";
 export interface IAutorunOptions {
     delay?: number;
     name?: string;
@@ -9,6 +9,7 @@ export interface IAutorunOptions {
     requiresObservable?: boolean;
     scheduler?: (callback: () => void) => any;
     onError?: (error: any) => void;
+    signal?: GenericAbortSignal;
 }
 /**
  * Creates a named reactive view and keeps it alive, so that the view is always

package/dist/api/makeObservable.d.ts

@@ -1,5 +1,6 @@
 import { AnnotationsMap, CreateObservableOptions } from "../internal";
 declare type NoInfer<T> = [T][T extends any ? 0 : never];
-export declare function makeObservable<T extends object, AdditionalKeys extends PropertyKey = never>(target: T, annotations?: AnnotationsMap<T, NoInfer<AdditionalKeys>>, options?: CreateObservableOptions): T;
-export declare function makeAutoObservable<T extends object, AdditionalKeys extends PropertyKey = never>(target: T, overrides?: AnnotationsMap<T, NoInfer<AdditionalKeys>>, options?: CreateObservableOptions): T;
+declare type MakeObservableOptions = Omit<CreateObservableOptions, "proxy">;
+export declare function makeObservable<T extends object, AdditionalKeys extends PropertyKey = never>(target: T, annotations?: AnnotationsMap<T, NoInfer<AdditionalKeys>>, options?: MakeObservableOptions): T;
+export declare function makeAutoObservable<T extends object, AdditionalKeys extends PropertyKey = never>(target: T, overrides?: AnnotationsMap<T, NoInfer<AdditionalKeys>>, options?: MakeObservableOptions): T;
 export {};

package/dist/api/when.d.ts

@@ -1,10 +1,4 @@
-import { IReactionDisposer, Lambda } from "../internal";
-interface GenericAbortSignal {
-    readonly aborted: boolean;
-    onabort?: ((...args: any) => any) | null;
-    addEventListener?: (...args: any) => any;
-    removeEventListener?: (...args: any) => any;
-}
+import { IReactionDisposer, Lambda, GenericAbortSignal } from "../internal";
 export interface IWhenOptions {
     name?: string;
     timeout?: number;
@@ -15,4 +9,3 @@ export declare function when(predicate: () => boolean, opts?: IWhenOptions): Pro
     cancel(): void;
 };
 export declare function when(predicate: () => boolean, effect: Lambda, opts?: IWhenOptions): IReactionDisposer;
-export {};

package/dist/core/atom.d.ts

@@ -2,13 +2,14 @@ import { IDerivationState_, IObservable, IDerivation, Lambda } from "../internal
 export declare const $mobx: unique symbol;
 export interface IAtom extends IObservable {
     reportObserved(): boolean;
-    reportChanged(): any;
+    reportChanged(): void;
 }
 export declare class Atom implements IAtom {
     name_: string;
     isPendingUnobservation_: boolean;
     isBeingObserved_: boolean;
     observers_: Set<IDerivation>;
+    batchId_: number;
     diffValue_: number;
     lastAccessedBy_: number;
     lowestObserverState_: IDerivationState_;

package/dist/core/globalstate.d.ts

@@ -37,6 +37,11 @@ export declare class MobXGlobals {
      * Are we in a batch block? (and how many of them)
      */
     inBatch: number;
+    /**
+     * ID of the latest batch. Used to suppress reportChanged of newly created atoms.
+     * Note the value persists even after batch ended.
+     */
+    batchId: number;
     /**
      * Observables that don't have observers anymore, and are about to be
      * suspended, unless somebody else accesses it in the same batch

package/dist/core/reaction.d.ts

@@ -1,4 +1,4 @@
-import { IDerivation, IDerivationState_, IObservable, Lambda, TraceMode } from "../internal";
+import { IDerivation, IDerivationState_, IObservable, Lambda, TraceMode, GenericAbortSignal } from "../internal";
 /**
  * Reactions are a special kind of derivations. Several things distinguishes them from normal reactive computations
  *
@@ -52,7 +52,7 @@ export declare class Reaction implements IDerivation, IReactionPublic {
     track(fn: () => void): void;
     reportExceptionInDerivation_(error: any): void;
     dispose(): void;
-    getDisposer_(): IReactionDisposer;
+    getDisposer_(abortSignal?: GenericAbortSignal): IReactionDisposer;
     toString(): string;
     trace(enterBreakPoint?: boolean): void;
 }

package/dist/internal.d.ts

@@ -11,6 +11,7 @@ export * from "./types/flowannotation";
 export * from "./types/computedannotation";
 export * from "./types/observableannotation";
 export * from "./types/autoannotation";
+export * from "./types/generic-abort-signal";
 export * from "./api/observable";
 export * from "./api/computed";
 export * from "./core/action";

package/dist/mobx.cjs.development.js

@@ -426,12 +426,14 @@ var Atom = /*#__PURE__*/function () {
     this.isPendingUnobservation_ = false;
     this.isBeingObserved_ = false;
     this.observers_ = new Set();
+    this.batchId_ = void 0;
     this.diffValue_ = 0;
     this.lastAccessedBy_ = 0;
     this.lowestObserverState_ = IDerivationState_.NOT_TRACKING_;
     this.onBOL = void 0;
     this.onBUOL = void 0;
     this.name_ = name_;
+    this.batchId_ = globalState.inBatch ? globalState.batchId : NaN;
   }
   // onBecomeObservedListeners
   var _proto = Atom.prototype;
@@ -460,6 +462,12 @@ var Atom = /*#__PURE__*/function () {
    * Invoke this method _after_ this method has changed to signal mobx that all its observers should invalidate.
    */;
   _proto.reportChanged = function reportChanged() {
+    if (globalState.inBatch && this.batchId_ === globalState.batchId) {
+      // Called from the same batch this atom was created in.
+      return;
+    }
+    // Avoids the possibility of hitting the same globalState.batchId when it cycled through all integers (necessary?)
+    this.batchId_ = NaN;
     startBatch();
     propagateChanged(this);
     // We could update state version only at the end of batch,
@@ -993,7 +1001,9 @@ var observableFactories = {
     return new ObservableSet(initialValues, getEnhancerFromOptions(o), o.name);
   },
   object: function object(props, decorators, options) {
-    return extendObservable(globalState.useProxies === false || (options == null ? void 0 : options.proxy) === false ? asObservableObject({}, options) : asDynamicObservableObject({}, options), props, decorators);
+    return initObservable(function () {
+      return extendObservable(globalState.useProxies === false || (options == null ? void 0 : options.proxy) === false ? asObservableObject({}, options) : asDynamicObservableObject({}, options), props, decorators);
+    });
   },
   ref: /*#__PURE__*/createDecoratorAnnotation(observableRefAnnotation),
   shallow: /*#__PURE__*/createDecoratorAnnotation(observableShallowAnnotation),
@@ -1815,6 +1825,7 @@ var MobXGlobals = function MobXGlobals() {
   this.runId = 0;
   this.mobxGuid = 0;
   this.inBatch = 0;
+  this.batchId = Number.MIN_SAFE_INTEGER;
   this.pendingUnobservations = [];
   this.pendingReactions = [];
   this.isRunningReactions = false;
@@ -1954,6 +1965,9 @@ function queueForUnobservation(observable) {
  * Avoids unnecessary recalculations.
  */
 function startBatch() {
+  if (globalState.inBatch === 0) {
+    globalState.batchId = globalState.batchId < Number.MAX_SAFE_INTEGER ? globalState.batchId + 1 : Number.MIN_SAFE_INTEGER;
+  }
   globalState.inBatch++;
 }
 function endBatch() {
@@ -2246,10 +2260,15 @@ var Reaction = /*#__PURE__*/function () {
       }
     }
   };
-  _proto.getDisposer_ = function getDisposer_() {
-    var r = this.dispose.bind(this);
-    r[$mobx] = this;
-    return r;
+  _proto.getDisposer_ = function getDisposer_(abortSignal) {
+    var _this2 = this;
+    var dispose = function dispose() {
+      _this2.dispose();
+      abortSignal == null ? void 0 : abortSignal.removeEventListener == null ? void 0 : abortSignal.removeEventListener("abort", dispose);
+    };
+    abortSignal == null ? void 0 : abortSignal.addEventListener == null ? void 0 : abortSignal.addEventListener("abort", dispose);
+    dispose[$mobx] = this;
+    return dispose;
   };
   _proto.toString = function toString() {
     return "Reaction[" + this.name_ + "]";
@@ -2423,7 +2442,7 @@ function isAction(thing) {
  * @returns disposer function, which can be used to stop the view from being updated in the future.
  */
 function autorun(view, opts) {
-  var _opts$name, _opts;
+  var _opts$name, _opts, _opts2, _opts2$signal, _opts3;
   if (opts === void 0) {
     opts = EMPTY_OBJECT;
   }
@@ -2462,8 +2481,10 @@ function autorun(view, opts) {
   function reactionRunner() {
     view(reaction);
   }
-  reaction.schedule_();
-  return reaction.getDisposer_();
+  if (!((_opts2 = opts) != null && (_opts2$signal = _opts2.signal) != null && _opts2$signal.aborted)) {
+    reaction.schedule_();
+  }
+  return reaction.getDisposer_((_opts3 = opts) == null ? void 0 : _opts3.signal);
 }
 var run = function run(f) {
   return f();
@@ -2474,7 +2495,7 @@ function createSchedulerFromOptions(opts) {
   } : run;
 }
 function reaction(expression, effect, opts) {
-  var _opts$name2;
+  var _opts$name2, _opts4, _opts4$signal, _opts5;
   if (opts === void 0) {
     opts = EMPTY_OBJECT;
   }
@@ -2524,8 +2545,10 @@ function reaction(expression, effect, opts) {
     }
     firstTime = false;
   }
-  r.schedule_();
-  return r.getDisposer_();
+  if (!((_opts4 = opts) != null && (_opts4$signal = _opts4.signal) != null && _opts4$signal.aborted)) {
+    r.schedule_();
+  }
+  return r.getDisposer_((_opts5 = opts) == null ? void 0 : _opts5.signal);
 }
 function wrapErrorHandler(errorHandler, baseFn) {
   return function () {
@@ -2620,17 +2643,14 @@ function extendObservable(target, properties, annotations, options) {
   }
   // Pull descriptors first, so we don't have to deal with props added by administration ($mobx)
   var descriptors = getOwnPropertyDescriptors(properties);
-  var adm = asObservableObject(target, options)[$mobx];
-  startBatch();
-  try {
+  initObservable(function () {
+    var adm = asObservableObject(target, options)[$mobx];
     ownKeys(descriptors).forEach(function (key) {
       adm.extend_(key, descriptors[key],
       // must pass "undefined" for { key: undefined }
       !annotations ? true : key in annotations ? annotations[key] : true);
     });
-  } finally {
-    endBatch();
-  }
+  });
   return target;
 }
 
@@ -3316,10 +3336,9 @@ function notifyListeners(listenable, change) {
 }
 
 function makeObservable(target, annotations, options) {
-  var adm = asObservableObject(target, options)[$mobx];
-  startBatch();
-  try {
+  initObservable(function () {
     var _annotations;
+    var adm = asObservableObject(target, options)[$mobx];
     if ("development" !== "production" && annotations && target[storedAnnotationsSymbol]) {
       die("makeObservable second arg must be nullish when using decorators. Mixing @decorator syntax with annotations is not supported.");
     }
@@ -3329,9 +3348,7 @@ function makeObservable(target, annotations, options) {
     ownKeys(annotations).forEach(function (key) {
       return adm.make_(key, annotations[key]);
     });
-  } finally {
-    endBatch();
-  }
+  });
   return target;
 }
 // proto[keysSymbol] = new Set<PropertyKey>()
@@ -3350,26 +3367,23 @@ function makeAutoObservable(target, overrides, options) {
   if (isPlainObject(target)) {
     return extendObservable(target, target, overrides, options);
   }
-  var adm = asObservableObject(target, options)[$mobx];
-  // Optimization: cache keys on proto
-  // Assumes makeAutoObservable can be called only once per object and can't be used in subclass
-  if (!target[keysSymbol]) {
-    var proto = Object.getPrototypeOf(target);
-    var keys = new Set([].concat(ownKeys(target), ownKeys(proto)));
-    keys["delete"]("constructor");
-    keys["delete"]($mobx);
-    addHiddenProp(proto, keysSymbol, keys);
-  }
-  startBatch();
-  try {
+  initObservable(function () {
+    var adm = asObservableObject(target, options)[$mobx];
+    // Optimization: cache keys on proto
+    // Assumes makeAutoObservable can be called only once per object and can't be used in subclass
+    if (!target[keysSymbol]) {
+      var proto = Object.getPrototypeOf(target);
+      var keys = new Set([].concat(ownKeys(target), ownKeys(proto)));
+      keys["delete"]("constructor");
+      keys["delete"]($mobx);
+      addHiddenProp(proto, keysSymbol, keys);
+    }
     target[keysSymbol].forEach(function (key) {
       return adm.make_(key,
       // must pass "undefined" for { key: undefined }
       !overrides ? true : key in overrides ? overrides[key] : true);
     });
-  } finally {
-    endBatch();
-  }
+  });
   return target;
 }
 
@@ -3677,16 +3691,16 @@ function createObservableArray(initialValues, enhancer, name, owned) {
     owned = false;
   }
   assertProxies();
-  var adm = new ObservableArrayAdministration(name, enhancer, owned, false);
-  addHiddenFinalProp(adm.values_, $mobx, adm);
-  var proxy = new Proxy(adm.values_, arrayTraps);
-  adm.proxy_ = proxy;
-  if (initialValues && initialValues.length) {
-    var prev = allowStateChangesStart(true);
-    adm.spliceWithArray_(0, 0, initialValues);
-    allowStateChangesEnd(prev);
-  }
-  return proxy;
+  return initObservable(function () {
+    var adm = new ObservableArrayAdministration(name, enhancer, owned, false);
+    addHiddenFinalProp(adm.values_, $mobx, adm);
+    var proxy = new Proxy(adm.values_, arrayTraps);
+    adm.proxy_ = proxy;
+    if (initialValues && initialValues.length) {
+      adm.spliceWithArray_(0, 0, initialValues);
+    }
+    return proxy;
+  });
 }
 // eslint-disable-next-line
 var arrayExtensions = {
@@ -3882,11 +3896,13 @@ var ObservableMap = /*#__PURE__*/function () {
     if (!isFunction(Map)) {
       die(18);
     }
-    this.keysAtom_ = createAtom( this.name_ + ".keys()" );
-    this.data_ = new Map();
-    this.hasMap_ = new Map();
-    allowStateChanges(true, function () {
-      _this.merge(initialData);
+    initObservable(function () {
+      _this.keysAtom_ = createAtom("development" !== "production" ? _this.name_ + ".keys()" : "ObservableMap.keys()");
+      _this.data_ = new Map();
+      _this.hasMap_ = new Map();
+      if (initialData) {
+        _this.merge(initialData);
+      }
     });
   }
   var _proto = ObservableMap.prototype;
@@ -4270,6 +4286,7 @@ _Symbol$iterator$1 = Symbol.iterator;
 _Symbol$toStringTag$1 = Symbol.toStringTag;
 var ObservableSet = /*#__PURE__*/function () {
   function ObservableSet(initialData, enhancer, name_) {
+    var _this = this;
     if (enhancer === void 0) {
       enhancer = deepEnhancer;
     }
@@ -4288,13 +4305,15 @@ var ObservableSet = /*#__PURE__*/function () {
     if (!isFunction(Set)) {
       die(22);
     }
-    this.atom_ = createAtom(this.name_);
     this.enhancer_ = function (newV, oldV) {
       return enhancer(newV, oldV, name_);
     };
-    if (initialData) {
-      this.replace(initialData);
-    }
+    initObservable(function () {
+      _this.atom_ = createAtom(_this.name_);
+      if (initialData) {
+        _this.replace(initialData);
+      }
+    });
   }
   var _proto = ObservableSet.prototype;
   _proto.dehanceValue_ = function dehanceValue_(value) {
@@ -4304,12 +4323,12 @@ var ObservableSet = /*#__PURE__*/function () {
     return value;
   };
   _proto.clear = function clear() {
-    var _this = this;
+    var _this2 = this;
     transaction(function () {
       untracked(function () {
-        for (var _iterator = _createForOfIteratorHelperLoose(_this.data_.values()), _step; !(_step = _iterator()).done;) {
+        for (var _iterator = _createForOfIteratorHelperLoose(_this2.data_.values()), _step; !(_step = _iterator()).done;) {
           var value = _step.value;
-          _this["delete"](value);
+          _this2["delete"](value);
         }
       });
     });
@@ -4321,7 +4340,7 @@ var ObservableSet = /*#__PURE__*/function () {
     }
   };
   _proto.add = function add(value) {
-    var _this2 = this;
+    var _this3 = this;
     checkIfStateModificationsAreAllowed(this.atom_);
     if (hasInterceptors(this)) {
       var change = interceptChange(this, {
@@ -4338,8 +4357,8 @@ var ObservableSet = /*#__PURE__*/function () {
 
     if (!this.has(value)) {
       transaction(function () {
-        _this2.data_.add(_this2.enhancer_(value, undefined));
-        _this2.atom_.reportChanged();
+        _this3.data_.add(_this3.enhancer_(value, undefined));
+        _this3.atom_.reportChanged();
       });
       var notifySpy =  isSpyEnabled();
       var notify = hasListeners(this);
@@ -4363,7 +4382,7 @@ var ObservableSet = /*#__PURE__*/function () {
     return this;
   };
   _proto["delete"] = function _delete(value) {
-    var _this3 = this;
+    var _this4 = this;
     if (hasInterceptors(this)) {
       var change = interceptChange(this, {
         type: DELETE,
@@ -4388,8 +4407,8 @@ var ObservableSet = /*#__PURE__*/function () {
         spyReportStart(_change2);
       }
       transaction(function () {
-        _this3.atom_.reportChanged();
-        _this3.data_["delete"](value);
+        _this4.atom_.reportChanged();
+        _this4.data_["delete"](value);
       });
       if (notify) {
         notifyListeners(this, _change2);
@@ -4442,20 +4461,20 @@ var ObservableSet = /*#__PURE__*/function () {
     });
   };
   _proto.replace = function replace(other) {
-    var _this4 = this;
+    var _this5 = this;
     if (isObservableSet(other)) {
       other = new Set(other);
     }
     transaction(function () {
       if (Array.isArray(other)) {
-        _this4.clear();
+        _this5.clear();
         other.forEach(function (value) {
-          return _this4.add(value);
+          return _this5.add(value);
         });
       } else if (isES6Set(other)) {
-        _this4.clear();
+        _this5.clear();
         other.forEach(function (value) {
-          return _this4.add(value);
+          return _this5.add(value);
         });
       } else if (other !== null && other !== undefined) {
         die("Cannot initialize set from " + other);
@@ -4719,6 +4738,7 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     if (proxyTrap === void 0) {
       proxyTrap = false;
     }
+    checkIfStateModificationsAreAllowed(this.keysAtom_);
     try {
       startBatch();
       // Delete
@@ -4766,6 +4786,7 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     if (proxyTrap === void 0) {
       proxyTrap = false;
     }
+    checkIfStateModificationsAreAllowed(this.keysAtom_);
     try {
       startBatch();
       // Delete
@@ -4817,6 +4838,7 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     if (proxyTrap === void 0) {
       proxyTrap = false;
     }
+    checkIfStateModificationsAreAllowed(this.keysAtom_);
     try {
       startBatch();
       // Delete
@@ -4872,6 +4894,7 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     if (proxyTrap === void 0) {
       proxyTrap = false;
     }
+    checkIfStateModificationsAreAllowed(this.keysAtom_);
     // No such prop
     if (!hasProp(this.target_, key)) {
       return true;
@@ -5101,6 +5124,17 @@ function assertAnnotable(adm, annotation, key) {
 
 // Bug in safari 9.* (or iOS 9 safari mobile). See #364
 var ENTRY_0 = /*#__PURE__*/createArrayEntryDescriptor(0);
+var safariPrototypeSetterInheritanceBug = /*#__PURE__*/function () {
+  var v = false;
+  var p = {};
+  Object.defineProperty(p, "0", {
+    set: function set() {
+      v = true;
+    }
+  });
+  /*#__PURE__*/Object.create(p)["0"] = 1;
+  return v === false;
+}();
 /**
  * This array buffer contains two lists of properties, so that all arrays
  * can recycle their property definitions, which significantly improves performance of creating
@@ -5133,20 +5167,20 @@ var LegacyObservableArray = /*#__PURE__*/function (_StubArray, _Symbol$toStringT
       owned = false;
     }
     _this = _StubArray.call(this) || this;
-    var adm = new ObservableArrayAdministration(name, enhancer, owned, true);
-    adm.proxy_ = _assertThisInitialized(_this);
-    addHiddenFinalProp(_assertThisInitialized(_this), $mobx, adm);
-    if (initialValues && initialValues.length) {
-      var prev = allowStateChangesStart(true);
-      // @ts-ignore
-      _this.spliceWithArray(0, 0, initialValues);
-      allowStateChangesEnd(prev);
-    }
-    {
-      // Seems that Safari won't use numeric prototype setter untill any * numeric property is
-      // defined on the instance. After that it works fine, even if this property is deleted.
-      Object.defineProperty(_assertThisInitialized(_this), "0", ENTRY_0);
-    }
+    initObservable(function () {
+      var adm = new ObservableArrayAdministration(name, enhancer, owned, true);
+      adm.proxy_ = _assertThisInitialized(_this);
+      addHiddenFinalProp(_assertThisInitialized(_this), $mobx, adm);
+      if (initialValues && initialValues.length) {
+        // @ts-ignore
+        _this.spliceWithArray(0, 0, initialValues);
+      }
+      if (safariPrototypeSetterInheritanceBug) {
+        // Seems that Safari won't use numeric prototype setter untill any * numeric property is
+        // defined on the instance. After that it works fine, even if this property is deleted.
+        Object.defineProperty(_assertThisInitialized(_this), "0", ENTRY_0);
+      }
+    });
     return _this;
   }
   var _proto = LegacyObservableArray.prototype;
@@ -5301,6 +5335,24 @@ function getDebugName(thing, property) {
   }
   return named.name_;
 }
+/**
+ * Helper function for initializing observable structures, it applies:
+ * 1. allowStateChanges so we don't violate enforceActions.
+ * 2. untracked so we don't accidentaly subscribe to anything observable accessed during init in case the observable is created inside derivation.
+ * 3. batch to avoid state version updates
+ */
+function initObservable(cb) {
+  var derivation = untrackedStart();
+  var allowStateChanges = allowStateChangesStart(true);
+  startBatch();
+  try {
+    return cb();
+  } finally {
+    endBatch();
+    allowStateChangesEnd(allowStateChanges);
+    untrackedEnd(derivation);
+  }
+}
 
 var toString = objectPrototype.toString;
 function deepEqual(a, b, depth) {