mobx 6.3.2 → 6.3.6

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # mobx
 
+## 6.3.6
+
+### Patch Changes
+
+-   [`49468204`](https://github.com/mobxjs/mobx/commit/49468204d3bc28d15dbf383c0b7f874ca26dff30) [#3162](https://github.com/mobxjs/mobx/pull/3162) Thanks [@upsuper](https://github.com/upsuper)! - Have cancelled when reject with an error rather than a string
+
+*   [`4afb1ec2`](https://github.com/mobxjs/mobx/commit/4afb1ec24427cf8e1f768d0c6fc49d0f44f4ab8e) [#3154](https://github.com/mobxjs/mobx/pull/3154) Thanks [@urugator](https://github.com/urugator)! - `makeObservable` throws when mixing @decorator syntax with annotations
+
+## 6.3.5
+
+### Patch Changes
+
+-   [`4ac6b454`](https://github.com/mobxjs/mobx/commit/4ac6b45473c2e3b07c8e683cd395bc5edfaa8e15) [#3146](https://github.com/mobxjs/mobx/pull/3146) Thanks [@urugator](https://github.com/urugator)! - fix #3109: spy: computed shouldn't report update unless the value changed
+
+## 6.3.4
+
+### Patch Changes
+
+-   [`0dbf3eb6`](https://github.com/mobxjs/mobx/commit/0dbf3eb6eecfa9cd6cd9dc7d707e8d70927e79bf) [#3141](https://github.com/mobxjs/mobx/pull/3141) Thanks [@urugator](https://github.com/urugator)! - [spy: bound actions report correct object](https://github.com/mobxjs/mobx/discussions/3140)
+
+## 6.3.3
+
+### Patch Changes
+
+-   [`d78a1592`](https://github.com/mobxjs/mobx/commit/d78a15929052b96698b3355a0b4c8335750422db) [#2902](https://github.com/mobxjs/mobx/pull/2902) Thanks [@z3rog](https://github.com/z3rog)! - chore: observable use internal constants
+
+*   [`db21d85f`](https://github.com/mobxjs/mobx/commit/db21d85fcd41c6c142998f53e722ee0a0e9b5c18) [#2998](https://github.com/mobxjs/mobx/pull/2998) Thanks [@urugator](https://github.com/urugator)! - `trace()`: log when computed becomes suspended
+    `requiresReaction` warns instead of throwing
+
+-   [`b9fa119c`](https://github.com/mobxjs/mobx/commit/b9fa119c90e23d4b327763189f24c00be2fb2c26) [#3056](https://github.com/mobxjs/mobx/pull/3056) Thanks [@upsuper](https://github.com/upsuper)! - Create WHEN_TIMEOUT error earlier to capture useful stack
+
+*   [`99491ec2`](https://github.com/mobxjs/mobx/commit/99491ec2d315a3a01cdbe40d9a24d920a09cbd0e) [#2972](https://github.com/mobxjs/mobx/pull/2972) Thanks [@kk-gjyang](https://github.com/kk-gjyang)! - Polyfill `Object.is` for old/unsupported browsers
+
+-   [`0d28db8a`](https://github.com/mobxjs/mobx/commit/0d28db8a0ba99f5cce744bb83b5bd88ec45a7e41) [#2927](https://github.com/mobxjs/mobx/pull/2927) Thanks [@upsuper](https://github.com/upsuper)! - Give proper typing to opts.equals of reaction
+
+*   [`c6dc925c`](https://github.com/mobxjs/mobx/commit/c6dc925c6cf7eeff9237ee07c55927a7bbc14cb7) [#2985](https://github.com/mobxjs/mobx/pull/2985) Thanks [@fecqs](https://github.com/fecqs)! - Remove duplicate global property check
+
 ## 6.3.2
 
 ### Patch Changes

package/README.md

@@ -17,7 +17,7 @@ _Simple, scalable state management._
 
 MobX is made possible by the generosity of the sponsors below, and many other [individual backers](docs/backers-sponsors.md#backers). Sponsoring directly impacts the longevity of this project.
 
-**🥇Gold sponsors (\$3000+ total contribution):** <br/>
+**🥇 Gold sponsors (\$3000+ total contribution):** <br/>
 <a href="https://mendix.com/"><img src="https://mobx.js.org/assets/mendix-logo.png" align="center" width="100" title="Mendix" alt="Mendix" /></a>
 <a href="https://frontendmasters.com/"><img src="https://mobx.js.org/assets/frontendmasters.jpg" align="center" width="100" title="Frontend Masters" alt="Frontend Masters"></a>
 <a href="https://opensource.facebook.com/"><img src="https://mobx.js.org/assets/fbos.jpeg" align="center" width="100" title="Facebook Open Source" alt="Facebook Open Source" /></a>
@@ -26,7 +26,7 @@ MobX is made possible by the generosity of the sponsors below, and many other [i
 <a href="https://coinbase.com/"><img src="https://mobx.js.org/assets/coinbase.jpeg" align="center" width="100" title="Coinbase" alt="Coinbase" /></a>
 <a href="https://www.canva.com/"><img src="https://mobx.js.org/assets/canva.png" align="center" width="100" title="Canva" alt="Canva" /></a>
 
-**🥈Silver sponsors (\$100+ pm):**<br/>
+**🥈 Silver sponsors (\$100+ per month):**<br/>
 <a href="https://www.codefirst.co.uk/"><img src="https://mobx.js.org/assets/codefirst.png" align="center" width="100" title="CodeFirst" alt="CodeFirst"/></a>
 <a href="https://www.dcsl.com/"><img src="https://mobx.js.org/assets/dcsl.png" align="center" width="100" title="DCSL Guidesmiths" alt="DCSL Guidesmiths"/></a>
 <a href="https://www.bugsnag.com/platforms/react-error-reporting?utm_source=MobX&utm_medium=Website&utm_content=open-source&utm_campaign=2019-community&utm_term=20190913"><img src="https://mobx.js.org/assets/bugsnag.jpg" align="center" width="100" title="Bugsnag" alt="Bugsnag"/></a>
@@ -34,7 +34,7 @@ MobX is made possible by the generosity of the sponsors below, and many other [i
 <a href="https://modulz.app/"><img src="https://mobx.js.org/assets/modulz.png" align="center" width="100" title="Modulz" alt="Modulz"/></a>
 <a href="https://space307.com/?utm_source=sponsorship&utm_medium=mobx&utm_campaign=readme"><img src="https://mobx.js.org/assets/space307.png" align="center" width="100" title="Space307" alt="Space307"/></a>
 
-**🥉Bronze sponsors (\$500+ total contributions):**<br/>
+**🥉 Bronze sponsors (\$500+ total contributions):**<br/>
 <a href="https://mantro.net/jobs/warlock"><img src="https://mobx.js.org/assets/mantro.png" align="center" width="100" title="mantro GmbH" alt="mantro GmbH"></a>
 <a href="https://www.algolia.com/"><img src="https://mobx.js.org/assets/algolia.jpg" align="center" width="100" title="Algolia" alt="Algolia" /></a>
 <a href="https://talentplot.com/"><img src="https://mobx.js.org/assets/talentplot.png" align="center" width="100" title="talentplot" alt="talentplot"></a>
@@ -136,7 +136,7 @@ Changes in the observable state are propagated precisely to all _computations_ a
 
 This conceptual picture can be applied to the above example, or any other application using MobX.
 
-To learn about the core concepts of MobX using a larger example, check out [The gist of MobX](docs/the-gist-of-mobx.md) section, or take the [10 minute interactive introduction to MobX and React](https://mobx.js.org/getting-started).
+To learn about the core concepts of MobX using a larger example, check out [The gist of MobX](https://mobx.js.org/the-gist-of-mobx.html) section, or take the [10 minute interactive introduction to MobX and React](https://mobx.js.org/getting-started).
 The philosophy and benefits of the mental model provided by MobX are also described in great detail in the blog posts [UI as an afterthought](https://michel.codes/blogs/ui-as-an-afterthought) and [How to decouple state and UI (a.k.a. you don’t need componentWillMount)](https://hackernoon.com/how-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37).
 
 <div class="cheat"><a href="https://gum.co/fSocU"><button title="Download the MobX 6 cheat sheet and sponsor the project">Download the MobX 6 cheat sheet</button></a></div>

package/dist/api/autorun.d.ts

@@ -17,8 +17,8 @@ export interface IAutorunOptions {
  * @returns disposer function, which can be used to stop the view from being updated in the future.
  */
 export declare function autorun(view: (r: IReactionPublic) => any, opts?: IAutorunOptions): IReactionDisposer;
-export declare type IReactionOptions = IAutorunOptions & {
-    fireImmediately?: boolean;
-    equals?: IEqualsComparer<any>;
+export declare type IReactionOptions<T, FireImmediately extends boolean> = IAutorunOptions & {
+    fireImmediately?: FireImmediately;
+    equals?: IEqualsComparer<T>;
 };
-export declare function reaction<T>(expression: (r: IReactionPublic) => T, effect: (arg: T, prev: T, r: IReactionPublic) => void, opts?: IReactionOptions): IReactionDisposer;
+export declare function reaction<T, FireImmediately extends boolean = false>(expression: (r: IReactionPublic) => T, effect: (arg: T, prev: FireImmediately extends true ? T | undefined : T, r: IReactionPublic) => void, opts?: IReactionOptions<T, FireImmediately>): IReactionDisposer;

package/dist/mobx.cjs.development.js

@@ -514,7 +514,8 @@ function shallowComparer(a, b) {
 }
 
 function defaultComparer(a, b) {
-  return Object.is(a, b);
+  if (Object.is) return Object.is(a, b);
+  return a === b ? a !== 0 || 1 / a === 1 / b : a !== a && b !== b;
 }
 
 var comparer = {
@@ -674,7 +675,7 @@ function assertActionDescriptor(adm, _ref, key, _ref2) {
 
 function createActionDescriptor(adm, annotation, key, descriptor, // provides ability to disable safeDescriptors for prototypes
 safeDescriptors) {
-  var _annotation$options_, _annotation$options_$, _annotation$options_2, _annotation$options_$2, _annotation$options_3;
+  var _annotation$options_, _annotation$options_$, _annotation$options_2, _annotation$options_$2, _annotation$options_3, _annotation$options_4, _adm$proxy_2;
 
   if (safeDescriptors === void 0) {
     safeDescriptors = globalState.safeDescriptors;
@@ -690,7 +691,8 @@ safeDescriptors) {
   }
 
   return {
-    value: createAction((_annotation$options_$ = (_annotation$options_2 = annotation.options_) == null ? void 0 : _annotation$options_2.name) != null ? _annotation$options_$ : key.toString(), value, (_annotation$options_$2 = (_annotation$options_3 = annotation.options_) == null ? void 0 : _annotation$options_3.autoAction) != null ? _annotation$options_$2 : false),
+    value: createAction((_annotation$options_$ = (_annotation$options_2 = annotation.options_) == null ? void 0 : _annotation$options_2.name) != null ? _annotation$options_$ : key.toString(), value, (_annotation$options_$2 = (_annotation$options_3 = annotation.options_) == null ? void 0 : _annotation$options_3.autoAction) != null ? _annotation$options_$2 : false, // https://github.com/mobxjs/mobx/discussions/3140
+    ((_annotation$options_4 = annotation.options_) == null ? void 0 : _annotation$options_4.bound) ? (_adm$proxy_2 = adm.proxy_) != null ? _adm$proxy_2 : adm.target_ : undefined),
     // Non-configurable for classes
     // prevents accidental field redefinition in subclass
     configurable: safeDescriptors ? adm.isPlainObject_ : true,
@@ -959,6 +961,10 @@ function extend_$5(adm, key, descriptor, proxyTrap) {
   return observableAnnotation.extend_(adm, key, descriptor, proxyTrap);
 }
 
+var OBSERVABLE = "observable";
+var OBSERVABLE_REF = "observable.ref";
+var OBSERVABLE_SHALLOW = "observable.shallow";
+var OBSERVABLE_STRUCT = "observable.struct"; // Predefined bags of create observable options, to avoid allocating temporarily option objects
 // in the majority of cases
 
 var defaultCreateObservableOptions = {
@@ -971,14 +977,14 @@ Object.freeze(defaultCreateObservableOptions);
 function asCreateObservableOptions(thing) {
   return thing || defaultCreateObservableOptions;
 }
-var observableAnnotation = /*#__PURE__*/createObservableAnnotation("observable");
-var observableRefAnnotation = /*#__PURE__*/createObservableAnnotation("observable.ref", {
+var observableAnnotation = /*#__PURE__*/createObservableAnnotation(OBSERVABLE);
+var observableRefAnnotation = /*#__PURE__*/createObservableAnnotation(OBSERVABLE_REF, {
   enhancer: referenceEnhancer
 });
-var observableShallowAnnotation = /*#__PURE__*/createObservableAnnotation("observable.shallow", {
+var observableShallowAnnotation = /*#__PURE__*/createObservableAnnotation(OBSERVABLE_SHALLOW, {
   enhancer: shallowEnhancer
 });
-var observableStructAnnotation = /*#__PURE__*/createObservableAnnotation("observable.struct", {
+var observableStructAnnotation = /*#__PURE__*/createObservableAnnotation(OBSERVABLE_STRUCT, {
   enhancer: refStructEnhancer
 });
 var observableDecoratorAnnotation = /*#__PURE__*/createDecoratorAnnotation(observableAnnotation);
@@ -1533,22 +1539,21 @@ var ComputedValue = /*#__PURE__*/function () {
     /* see #1208 */
     this.dependenciesState_ === IDerivationState_.NOT_TRACKING_;
     var newValue = this.computeValue_(true);
-
-    if ( isSpyEnabled()) {
-      spyReport({
-        observableKind: "computed",
-        debugObjectName: this.name_,
-        object: this.scope_,
-        type: "update",
-        oldValue: this.value_,
-        newValue: newValue
-      });
-    }
-
     var changed = wasSuspended || isCaughtException(oldValue) || isCaughtException(newValue) || !this.equals_(oldValue, newValue);
 
     if (changed) {
       this.value_ = newValue;
+
+      if ( isSpyEnabled()) {
+        spyReport({
+          observableKind: "computed",
+          debugObjectName: this.name_,
+          object: this.scope_,
+          type: "update",
+          oldValue: oldValue,
+          newValue: newValue
+        });
+      }
     }
 
     return changed;
@@ -1583,6 +1588,10 @@ var ComputedValue = /*#__PURE__*/function () {
     if (!this.keepAlive_) {
       clearObserving(this);
       this.value_ = undefined; // don't hold on to computed value!
+
+      if ( this.isTracing_ !== TraceMode.NONE) {
+        console.log("[mobx.trace] Computed value '" + this.name_ + "' was suspended and it will recompute on the next access.");
+      }
     }
   };
 
@@ -1615,16 +1624,12 @@ var ComputedValue = /*#__PURE__*/function () {
 
   _proto.warnAboutUntrackedRead_ = function warnAboutUntrackedRead_() {
 
-    if (this.requiresReaction_ === true) {
-      die("[mobx] Computed value " + this.name_ + " is read outside a reactive context");
-    }
-
     if (this.isTracing_ !== TraceMode.NONE) {
-      console.log("[mobx.trace] '" + this.name_ + "' is being read outside a reactive context. Doing a full recompute");
+      console.log("[mobx.trace] Computed value '" + this.name_ + "' is being read outside a reactive context. Doing a full recompute.");
     }
 
-    if (globalState.computedRequiresReaction) {
-      console.warn("[mobx] Computed value " + this.name_ + " is being read outside a reactive context. Doing a full recompute");
+    if (globalState.computedRequiresReaction || this.requiresReaction_) {
+      console.warn("[mobx] Computed value '" + this.name_ + "' is being read outside a reactive context. Doing a full recompute.");
     }
   };
 
@@ -1757,7 +1762,7 @@ function checkIfStateModificationsAreAllowed(atom) {
 }
 function checkIfStateReadsAreAllowed(observable) {
   if ( !globalState.allowStateReads && globalState.observableRequiresReaction) {
-    console.warn("[mobx] Observable " + observable.name_ + " being read outside a reactive context");
+    console.warn("[mobx] Observable '" + observable.name_ + "' being read outside a reactive context.");
   }
 }
 /**
@@ -1801,7 +1806,7 @@ function warnAboutDerivationWithoutDependencies(derivation) {
   if (derivation.observing_.length !== 0) return;
 
   if (globalState.reactionRequiresObservable || derivation.requiresObservable_) {
-    console.warn("[mobx] Derivation " + derivation.name_ + " is created/updated without reading any observable value");
+    console.warn("[mobx] Derivation '" + derivation.name_ + "' is created/updated without reading any observable value.");
   }
 }
 /**
@@ -1967,6 +1972,8 @@ var globalState = /*#__PURE__*/function () {
   if (global.__mobxGlobals && global.__mobxGlobals.version !== new MobXGlobals().version) canMergeGlobalState = false;
 
   if (!canMergeGlobalState) {
+    // Because this is a IIFE we need to let isolateCalled a chance to change
+    // so we run it after the event loop completed at least 1 iteration
     setTimeout(function () {
       if (!isolateCalled) {
         die(35);
@@ -2214,8 +2221,7 @@ function printDepTree(tree, lines, depth) {
     return;
   }
 
-  lines.push("" + new Array(depth).join("\t") + tree.name); // MWE: not the fastest, but the easiest way :)
-
+  lines.push("" + "\t".repeat(depth - 1) + tree.name);
   if (tree.dependencies) tree.dependencies.forEach(function (child) {
     return printDepTree(child, lines, depth + 1);
   });
@@ -2646,8 +2652,7 @@ function reaction(expression, effect, opts) {
   var firstTime = true;
   var isScheduled = false;
   var value;
-  var oldValue = undefined; // only an issue with fireImmediately
-
+  var oldValue;
   var equals = opts.compareStructural ? comparer.structural : opts.equals || comparer["default"];
   var r = new Reaction(name, function () {
     if (firstTime || runSync) {
@@ -2763,7 +2768,7 @@ function extendObservable(target, properties, annotations, options) {
     if (arguments.length > 4) die("'extendObservable' expected 2-4 arguments");
     if (typeof target !== "object") die("'extendObservable' expects an object as first argument");
     if (isObservableMap(target)) die("'extendObservable' should not be used on maps, use map.merge instead");
-    if (!isPlainObject(properties)) die("'extendObservabe' only accepts plain objects as second argument");
+    if (!isPlainObject(properties)) die("'extendObservable' only accepts plain objects as second argument");
     if (isObservable(properties) || isObservable(annotations)) die("Extending an object with another observable (object) is not supported");
   } // Pull descriptors first, so we don't have to deal with props added by administration ($mobx)
 
@@ -2954,14 +2959,14 @@ function interceptProperty(thing, property, handler) {
 }
 
 function _isComputed(value, property) {
-  if (property !== undefined) {
-    if (isObservableObject(value) === false) return false;
-    if (!value[$mobx].values_.has(property)) return false;
-    var atom = getAtom(value, property);
-    return isComputedValue(atom);
+  if (property === undefined) {
+    return isComputedValue(value);
   }
 
-  return isComputedValue(value);
+  if (isObservableObject(value) === false) return false;
+  if (!value[$mobx].values_.has(property)) return false;
+  var atom = getAtom(value, property);
+  return isComputedValue(atom);
 }
 function isComputed(value) {
   if ( arguments.length > 1) return die("isComputed expects only 1 argument. Use isComputedProp to inspect the observability of a property");
@@ -3285,10 +3290,10 @@ function _when(predicate, effect, opts) {
   var timeoutHandle;
 
   if (typeof opts.timeout === "number") {
+    var error = new Error("WHEN_TIMEOUT");
     timeoutHandle = setTimeout(function () {
       if (!disposer[$mobx].isDisposed_) {
         disposer();
-        var error = new Error("WHEN_TIMEOUT");
         if (opts.onError) opts.onError(error);else throw error;
       }
     }, opts.timeout);
@@ -3320,7 +3325,7 @@ function whenPromise(predicate, opts) {
 
     cancel = function cancel() {
       disposer();
-      reject("WHEN_CANCELLED");
+      reject(new Error("WHEN_CANCELLED"));
     };
   });
   res.cancel = cancel;
@@ -3451,7 +3456,11 @@ function makeObservable(target, annotations, options) {
   try {
     var _annotations;
 
-    // Default to decorators
+    if ("development" !== "production" && annotations && target[storedAnnotationsSymbol]) {
+      die("makeObservable second arg must be nullish when using decorators. Mixing @decorator syntax with annotations is not supported.");
+    } // Default to decorators
+
+
     (_annotations = annotations) != null ? _annotations : annotations = collectStoredAnnotations(target); // Annotate
 
     ownKeys(annotations).forEach(function (key) {
@@ -3612,7 +3621,7 @@ var ObservableArrayAdministration = /*#__PURE__*/function () {
   };
 
   _proto.setArrayLength_ = function setArrayLength_(newLength) {
-    if (typeof newLength !== "number" || newLength < 0) die("Out of range: " + newLength);
+    if (typeof newLength !== "number" || isNaN(newLength) || newLength < 0) die("Out of range: " + newLength);
     var currentLength = this.values_.length;
     if (newLength === currentLength) return;else if (newLength > currentLength) {
       var newItems = new Array(newLength - currentLength);
@@ -4101,9 +4110,11 @@ var ObservableMap = /*#__PURE__*/function () {
 
       if ( notifySpy) spyReportStart(_change);
       transaction(function () {
+        var _this2$hasMap_$get;
+
         _this2.keysAtom_.reportChanged();
 
-        _this2.updateHasMapEntry_(key, false);
+        (_this2$hasMap_$get = _this2.hasMap_.get(key)) == null ? void 0 : _this2$hasMap_$get.setNewValue_(false);
 
         var observable = _this2.data_.get(key);
 
@@ -4119,14 +4130,6 @@ var ObservableMap = /*#__PURE__*/function () {
     return false;
   };
 
-  _proto.updateHasMapEntry_ = function updateHasMapEntry_(key, value) {
-    var entry = this.hasMap_.get(key);
-
-    if (entry) {
-      entry.setNewValue_(value);
-    }
-  };
-
   _proto.updateValue_ = function updateValue_(key, newValue) {
     var observable = this.data_.get(key);
     newValue = observable.prepareNewValue_(newValue);
@@ -4155,13 +4158,15 @@ var ObservableMap = /*#__PURE__*/function () {
 
     checkIfStateModificationsAreAllowed(this.keysAtom_);
     transaction(function () {
+      var _this3$hasMap_$get;
+
       var observable = new ObservableValue(newValue, _this3.enhancer_,  _this3.name_ + "." + stringifyKey(key) , false);
 
       _this3.data_.set(key, observable);
 
       newValue = observable.value_; // value might have been changed
 
-      _this3.updateHasMapEntry_(key, true);
+      (_this3$hasMap_$get = _this3.hasMap_.get(key)) == null ? void 0 : _this3$hasMap_$get.setNewValue_(true);
 
       _this3.keysAtom_.reportChanged();
     });
@@ -5738,7 +5743,7 @@ function isAnnotation(thing) {
  * - utils/   Utility stuff.
  *
  */
-["Symbol", "Map", "Set", "Symbol"].forEach(function (m) {
+["Symbol", "Map", "Set"].forEach(function (m) {
   var g = getGlobal();
 
   if (typeof g[m] === "undefined") {