mobx 7.0.0 → 7.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # mobx
 
+## 7.0.1
+
+### Patch Changes
+
+-   [`9444c624b957b489875e1c6b45deb290034ce4e9`](https://github.com/mobxjs/mobx/commit/9444c624b957b489875e1c6b45deb290034ce4e9) [#4694](https://github.com/mobxjs/mobx/pull/4694) Thanks [@mrpmohiburrahman](https://github.com/mrpmohiburrahman)! - fix: `onBecomeObserved` is now called for the dependencies of a computed that becomes observed while serving a cached value. Previously, observation only cascaded when the newly observed computed also happened to recompute, so an observable with a live observer chain up to a running reaction could still report itself as unobserved and never fire its hook.
+
+-   [`53bb83fdf455a4e606bb721ea10040ded7c57796`](https://github.com/mobxjs/mobx/commit/53bb83fdf455a4e606bb721ea10040ded7c57796) [#4683](https://github.com/mobxjs/mobx/pull/4683) Thanks [@gesposito](https://github.com/gesposito)! - perf: fast-path primitives in `deepEnhancer`. Writing a primitive into a deep observable no longer runs the observable/array/plain-object/Map/Set/function type checks; primitives can never be made observable, so they are returned immediately. Creating an observable array of primitives is ~4x faster, and observable Set/Map writes are ~20-25% faster in the perf suite.
+
+-   [`030498d6b2bfe4cc27340fed8c706177cb3b28e1`](https://github.com/mobxjs/mobx/commit/030498d6b2bfe4cc27340fed8c706177cb3b28e1) [#4684](https://github.com/mobxjs/mobx/pull/4684) Thanks [@a-y-ibrahim](https://github.com/a-y-ibrahim)! - Fix a stack overflow ("Maximum call stack size exceeded") that could occur when an `onBecomeUnobserved` handler disposes a `Reaction`. Disposing a `Reaction` re-enters `endBatch()`, which used to recurse into the same `pendingUnobservations` drain loop instead of letting the already-running outer loop pick up the newly queued items, causing unbounded stack depth for long enough chains.
+
+-   [`a9086076b9ead1a9c933215bffaa9b57d44f6829`](https://github.com/mobxjs/mobx/commit/a9086076b9ead1a9c933215bffaa9b57d44f6829) [#4681](https://github.com/mobxjs/mobx/pull/4681) Thanks [@spokodev](https://github.com/spokodev)! - Fix ObservableSet union, intersection and symmetricDifference to return results in receiver order, matching native Set, when the argument is a plain Set.
+
+-   [`c65a4e14cf48b42cb792dc4c64edbcf56234b32d`](https://github.com/mobxjs/mobx/commit/c65a4e14cf48b42cb792dc4c64edbcf56234b32d) [#4682](https://github.com/mobxjs/mobx/pull/4682) Thanks [@gesposito](https://github.com/gesposito)! - perf: lazily allocate the internal `observers_` Set. Atoms and computed values no longer allocate an empty `Set` upfront; it is created on first observer instead. Most atoms in large stores are never observed, so this saves roughly 160 bytes per unobserved atom (e.g. ~35% lower heap usage when hydrating 50k instances with 10 observable fields each).
+
 ## 7.0.0
 
 ### Major Changes

package/dist/core/atom.d.ts

@@ -7,7 +7,7 @@ export interface IAtom extends IObservable {
 export declare class Atom implements IAtom {
     name_: string;
     private flags_;
-    observers_: Set<IDerivation>;
+    observers_: Set<IDerivation> | null;
     lastAccessedBy_: number;
     lowestObserverState_: IDerivationState_;
     /**

package/dist/core/computedvalue.d.ts

@@ -24,7 +24,7 @@ export declare class ComputedValue<T> implements IObservable, IComputedValue<T>,
     dependenciesState_: IDerivationState_;
     observing_: IObservable[];
     newObserving_: null;
-    observers_: Set<IDerivation>;
+    observers_: Set<IDerivation> | null;
     runId_: number;
     lastAccessedBy_: number;
     lowestObserverState_: IDerivationState_;

package/dist/core/globalstate.d.ts

@@ -52,6 +52,13 @@ export declare class MobXGlobals {
      * Are we currently processing reactions?
      */
     isRunningReactions: boolean;
+    /**
+     * Are we currently draining pendingUnobservations in endBatch?
+     * An onBecomeUnobserved handler can dispose a Reaction, which calls
+     * startBatch/endBatch again; this guards against re-entering the same
+     * drain loop recursively (see endBatch in observable.ts).
+     */
+    isRunningUnobservations: boolean;
     /**
      * Is it allowed to change observables at this point?
      * In general, MobX doesn't allow that when running computations and React.render.

package/dist/core/observable.d.ts

@@ -14,7 +14,7 @@ export interface IObservable extends IDepTreeNode {
     isBeingObserved: boolean;
     lowestObserverState_: IDerivationState_;
     isPendingUnobservation: boolean;
-    observers_: Set<IDerivation>;
+    observers_: Set<IDerivation> | null;
     onBUO(): void;
     onBO(): void;
     onBUOL: Set<Lambda> | undefined;
@@ -32,6 +32,14 @@ export declare function queueForUnobservation(observable: IObservable): void;
  */
 export declare function startBatch(): void;
 export declare function endBatch(): void;
+/**
+ * Marks an observable as observed, cascading into the dependencies of a ComputedValue.
+ * Unobservation already cascades (`suspend_` -> `clearObserving`), observation normally
+ * only does so by accident: a newly observed computed usually recomputes and re-reports
+ * its dependencies. When it serves a cached value instead nothing re-reports them, so the
+ * transition has to be propagated by hand. See #4547.
+ */
+export declare function markObserved(observable: IObservable): void;
 export declare function reportObserved(observable: IObservable): boolean;
 /**
  * NOTE: current propagation mechanism will in case of self reruning autoruns behave unexpectedly

package/dist/mobx.cjs.development.js

@@ -263,7 +263,8 @@ class Atom {
   constructor(name_ = "Atom@" + getNextId() ) {
     this.name_ = void 0;
     this.flags_ = 0b000;
-    this.observers_ = new Set();
+    // Allocated lazily on first observer to save memory.
+    this.observers_ = null;
     this.lastAccessedBy_ = 0;
     this.lowestObserverState_ = -1 /* IDerivationState_.NOT_TRACKING_ */;
     // onBecomeObservedListeners
@@ -345,6 +346,10 @@ function compareShallow(a, b) {
 const compareDefault = Object.is;
 
 function deepEnhancer(v, _, name) {
+  // primitives can never be made observable; skip the type checks below
+  if (v === null || typeof v !== "object" && typeof v !== "function") {
+    return v;
+  }
   // it is an observable already, done
   if (isObservable(v)) {
     return v;
@@ -1285,7 +1290,8 @@ class ComputedValue {
     // nodes we are looking at. Our value depends on these nodes
     this.newObserving_ = null;
     // during tracking it's an array with new observed observers
-    this.observers_ = new Set();
+    // Lazily allocated on first observer - see Atom.observers_.
+    this.observers_ = null;
     this.runId_ = 0;
     this.lastAccessedBy_ = 0;
     this.lowestObserverState_ = 0 /* IDerivationState_.UP_TO_DATE_ */;
@@ -1368,9 +1374,9 @@ class ComputedValue {
     if (this.isComputing) {
       die(32, this.name_, this.derivation);
     }
-    if (globalState.inBatch === 0 &&
+    if (globalState.inBatch === 0 && (
     // !globalState.trackingDerivatpion &&
-    this.observers_.size === 0 && !this.keepAlive_) {
+    !this.observers_ || this.observers_.size === 0) && !this.keepAlive_) {
       if (shouldCompute(this)) {
         this.warnAboutUntrackedRead_();
         startBatch(); // See perf test 'computed memoization'
@@ -1378,6 +1384,7 @@ class ComputedValue {
         endBatch();
       }
     } else {
+      const wasBeingObserved = this.isBeingObserved;
       reportObserved(this);
       if (shouldCompute(this)) {
         let prevTrackingContext = globalState.trackingContext;
@@ -1388,6 +1395,10 @@ class ComputedValue {
           propagateChangeConfirmed(this);
         }
         globalState.trackingContext = prevTrackingContext;
+      } else if (!wasBeingObserved && this.isBeingObserved) {
+        // We just became observed while serving a cached value, so the getter
+        // won't run and won't re-report our dependencies. Cascade to them. #4547
+        this.observing_.forEach(markObserved);
       }
     }
     const result = this.value_;
@@ -1556,7 +1567,7 @@ function isComputingDerivation() {
   return globalState.trackingDerivation !== null; // filter out actions inside computations
 }
 function checkIfStateModificationsAreAllowed(atom) {
-  const hasObservers = atom.observers_.size > 0;
+  const hasObservers = !!atom.observers_ && atom.observers_.size > 0;
   // Should not be possible to change observed state outside strict mode, except during initialization, see #563
   if (!globalState.allowStateChanges && (hasObservers || globalState.enforceActions === "always")) {
     console.warn("[MobX] " + (globalState.enforceActions ? "Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: " : "Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, a computed value or the render function of a React component? You can wrap side effects in 'runInAction' (or decorate functions with 'action') if needed. Tried to modify: ") + atom.name_);
@@ -1779,6 +1790,13 @@ class MobXGlobals {
      * Are we currently processing reactions?
      */
     this.isRunningReactions = false;
+    /**
+     * Are we currently draining pendingUnobservations in endBatch?
+     * An onBecomeUnobserved handler can dispose a Reaction, which calls
+     * startBatch/endBatch again; this guards against re-entering the same
+     * drain loop recursively (see endBatch in observable.ts).
+     */
+    this.isRunningUnobservations = false;
     /**
      * Is it allowed to change observables at this point?
      * In general, MobX doesn't allow that when running computations and React.render.
@@ -1895,10 +1913,11 @@ function resetGlobalState() {
 }
 
 function hasObservers(observable) {
-  return observable.observers_ && observable.observers_.size > 0;
+  return !!observable.observers_ && observable.observers_.size > 0;
 }
 function getObservers(observable) {
-  return observable.observers_;
+  var _observable$observers;
+  return (_observable$observers = observable.observers_) != null ? _observable$observers : new Set();
 }
 // function invariantObservers(observable: IObservable) {
 //     const list = observable.observers
@@ -1918,10 +1937,8 @@ function getObservers(observable) {
 //     )
 // }
 function addObserver(observable, node) {
-  // invariant(node.dependenciesState !== -1, "INTERNAL ERROR, can add only dependenciesState !== -1");
-  // invariant(observable._observers.indexOf(node) === -1, "INTERNAL ERROR add already added node");
-  // invariantObservers(observable);
-  observable.observers_.add(node);
+  var _observable$observers2;
+  ((_observable$observers2 = observable.observers_) != null ? _observable$observers2 : observable.observers_ = new Set()).add(node);
   if (observable.lowestObserverState_ > node.dependenciesState_) {
     observable.lowestObserverState_ = node.dependenciesState_;
   }
@@ -1932,8 +1949,12 @@ function removeObserver(observable, node) {
   // invariant(globalState.inBatch > 0, "INTERNAL ERROR, remove should be called only inside batch");
   // invariant(observable._observers.indexOf(node) !== -1, "INTERNAL ERROR remove already removed node");
   // invariantObservers(observable);
-  observable.observers_.delete(node);
-  if (observable.observers_.size === 0) {
+  const observers = observable.observers_;
+  if (!observers) {
+    return;
+  }
+  observers.delete(node);
+  if (observers.size === 0) {
     // deleting last observer
     queueForUnobservation(observable);
   }
@@ -1959,26 +1980,59 @@ function endBatch() {
   if (--globalState.inBatch === 0) {
     runReactions();
     // the batch is actually about to finish, all unobserving should happen here.
-    const list = globalState.pendingUnobservations;
-    for (let i = 0; i < list.length; i++) {
-      const observable = list[i];
-      observable.isPendingUnobservation = false;
-      if (observable.observers_.size === 0) {
-        if (observable.isBeingObserved) {
-          // if this observable had reactive observers, trigger the hooks
-          observable.isBeingObserved = false;
-          observable.onBUO();
-        }
-        if (observable instanceof ComputedValue) {
-          // computed values are automatically teared down when the last observer leaves
-          // this process happens recursively, this computed might be the last observabe of another, etc..
-          observable.suspend_();
+    // Guard against re-entering this loop: an onBUO handler can dispose a Reaction,
+    // which calls startBatch/endBatch again while we're still iterating. Bail out of
+    // the nested call instead of recursing; the outer loop re-reads list.length on
+    // every iteration, so it picks up anything the nested dispose() pushes onto the
+    // same pendingUnobservations array.
+    if (!globalState.isRunningUnobservations) {
+      globalState.isRunningUnobservations = true;
+      try {
+        const list = globalState.pendingUnobservations;
+        for (let i = 0; i < list.length; i++) {
+          const observable = list[i];
+          observable.isPendingUnobservation = false;
+          if (!observable.observers_ || observable.observers_.size === 0) {
+            if (observable.isBeingObserved) {
+              // if this observable had reactive observers, trigger the hooks
+              observable.isBeingObserved = false;
+              observable.onBUO();
+            }
+            if (observable instanceof ComputedValue) {
+              // computed values are automatically teared down when the last observer leaves
+              // this process happens recursively, this computed might be the last observabe of another, etc..
+              observable.suspend_();
+            }
+          }
         }
+        globalState.pendingUnobservations = [];
+      } finally {
+        // Always release the guard, even if an onBUO handler (user code) threw,
+        // otherwise every future endBatch() would see isRunningUnobservations
+        // stuck true and silently stop draining pendingUnobservations forever.
+        globalState.isRunningUnobservations = false;
       }
     }
-    globalState.pendingUnobservations = [];
   }
 }
+/**
+ * Marks an observable as observed, cascading into the dependencies of a ComputedValue.
+ * Unobservation already cascades (`suspend_` -> `clearObserving`), observation normally
+ * only does so by accident: a newly observed computed usually recomputes and re-reports
+ * its dependencies. When it serves a cached value instead nothing re-reports them, so the
+ * transition has to be propagated by hand. See #4547.
+ */
+function markObserved(observable) {
+  var _observable$observing;
+  if (observable.isBeingObserved) {
+    return;
+  }
+  observable.isBeingObserved = true;
+  observable.onBO();
+  // No queueForUnobservation here: the observer links already exist, so the regular
+  // suspend_ -> clearObserving -> removeObserver teardown still delivers the onBUO.
+  (_observable$observing = observable.observing_) == null || _observable$observing.forEach(markObserved);
+}
 function reportObserved(observable) {
   checkIfStateReadsAreAllowed(observable);
   const derivation = globalState.trackingDerivation;
@@ -1998,7 +2052,7 @@ function reportObserved(observable) {
       }
     }
     return observable.isBeingObserved;
-  } else if (observable.observers_.size === 0 && globalState.inBatch > 0) {
+  } else if ((!observable.observers_ || observable.observers_.size === 0) && globalState.inBatch > 0) {
     queueForUnobservation(observable);
   }
   return false;
@@ -2025,13 +2079,14 @@ function reportObserved(observable) {
  */
 // Called by Atom when its value changes
 function propagateChanged(observable) {
+  var _observable$observers3;
   // invariantLOS(observable, "changed start");
   if (observable.lowestObserverState_ === 2 /* IDerivationState_.STALE_ */) {
     return;
   }
   observable.lowestObserverState_ = 2 /* IDerivationState_.STALE_ */;
   // Ideally we use for..of here, but the downcompiled version is really slow...
-  observable.observers_.forEach(d => {
+  (_observable$observers3 = observable.observers_) == null || _observable$observers3.forEach(d => {
     if (d.dependenciesState_ === 0 /* IDerivationState_.UP_TO_DATE_ */) {
       d.onBecomeStale_();
     }
@@ -2041,12 +2096,13 @@ function propagateChanged(observable) {
 }
 // Called by ComputedValue when it recalculate and its value changed
 function propagateChangeConfirmed(observable) {
+  var _observable$observers4;
   // invariantLOS(observable, "confirmed start");
   if (observable.lowestObserverState_ === 2 /* IDerivationState_.STALE_ */) {
     return;
   }
   observable.lowestObserverState_ = 2 /* IDerivationState_.STALE_ */;
-  observable.observers_.forEach(d => {
+  (_observable$observers4 = observable.observers_) == null || _observable$observers4.forEach(d => {
     if (d.dependenciesState_ === 1 /* IDerivationState_.POSSIBLY_STALE_ */) {
       d.dependenciesState_ = 2 /* IDerivationState_.STALE_ */;
     } else if (d.dependenciesState_ === 0 /* IDerivationState_.UP_TO_DATE_ */ // this happens during computing of `d`, just keep lowestObserverState up to date.
@@ -2058,12 +2114,13 @@ function propagateChangeConfirmed(observable) {
 }
 // Used by computed when its dependency changed, but we don't wan't to immediately recompute.
 function propagateMaybeChanged(observable) {
+  var _observable$observers5;
   // invariantLOS(observable, "maybe start");
   if (observable.lowestObserverState_ !== 0 /* IDerivationState_.UP_TO_DATE_ */) {
     return;
   }
   observable.lowestObserverState_ = 1 /* IDerivationState_.POSSIBLY_STALE_ */;
-  observable.observers_.forEach(d => {
+  (_observable$observers5 = observable.observers_) == null || _observable$observers5.forEach(d => {
     if (d.dependenciesState_ === 0 /* IDerivationState_.UP_TO_DATE_ */) {
       d.dependenciesState_ = 1 /* IDerivationState_.POSSIBLY_STALE_ */;
       d.onBecomeStale_();
@@ -4318,31 +4375,16 @@ class ObservableSet {
     });
   }
   intersection(otherSet) {
-    if (isES6Set(otherSet) && !isObservableSet(otherSet)) {
-      return otherSet.intersection(this);
-    } else {
-      const dehancedSet = new Set(this);
-      return dehancedSet.intersection(otherSet);
-    }
+    return new Set(this).intersection(otherSet);
   }
   union(otherSet) {
-    if (isES6Set(otherSet) && !isObservableSet(otherSet)) {
-      return otherSet.union(this);
-    } else {
-      const dehancedSet = new Set(this);
-      return dehancedSet.union(otherSet);
-    }
+    return new Set(this).union(otherSet);
   }
   difference(otherSet) {
     return new Set(this).difference(otherSet);
   }
   symmetricDifference(otherSet) {
-    if (isES6Set(otherSet) && !isObservableSet(otherSet)) {
-      return otherSet.symmetricDifference(this);
-    } else {
-      const dehancedSet = new Set(this);
-      return dehancedSet.symmetricDifference(otherSet);
-    }
+    return new Set(this).symmetricDifference(otherSet);
   }
   isSubsetOf(otherSet) {
     return new Set(this).isSubsetOf(otherSet);
@@ -4351,12 +4393,7 @@ class ObservableSet {
     return new Set(this).isSupersetOf(otherSet);
   }
   isDisjointFrom(otherSet) {
-    if (isES6Set(otherSet) && !isObservableSet(otherSet)) {
-      return otherSet.isDisjointFrom(this);
-    } else {
-      const dehancedSet = new Set(this);
-      return dehancedSet.isDisjointFrom(otherSet);
-    }
+    return new Set(this).isDisjointFrom(otherSet);
   }
   replace(other) {
     if (isObservableSet(other)) {