mobx 7.0.0 → 7.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobx",
-    "version": "7.0.0",
+    "version": "7.0.2",
     "description": "Simple, scalable state management.",
     "source": "src/mobx.ts",
     "type": "commonjs",

package/src/core/atom.ts

@@ -30,7 +30,8 @@ const enum AtomFlags {
 export class Atom implements IAtom {
     private flags_ = 0b000
 
-    observers_ = new Set<IDerivation>()
+    // Allocated lazily on first observer to save memory.
+    observers_: Set<IDerivation> | null = null
 
     lastAccessedBy_ = 0
     lowestObserverState_ = IDerivationState_.NOT_TRACKING_

package/src/core/computedvalue.ts

@@ -14,6 +14,7 @@ import {
     globalState,
     isCaughtException,
     isSpyEnabled,
+    markObserved,
     propagateChangeConfirmed,
     propagateMaybeChanged,
     reportObserved,
@@ -84,7 +85,8 @@ export class ComputedValue<T> implements IObservable, IComputedValue<T>, IDeriva
     dependenciesState_ = IDerivationState_.NOT_TRACKING_
     observing_: IObservable[] = [] // nodes we are looking at. Our value depends on these nodes
     newObserving_ = null // during tracking it's an array with new observed observers
-    observers_ = new Set<IDerivation>()
+    // Lazily allocated on first observer - see Atom.observers_.
+    observers_: Set<IDerivation> | null = null
     runId_ = 0
     lastAccessedBy_ = 0
     lowestObserverState_ = IDerivationState_.UP_TO_DATE_
@@ -200,7 +202,7 @@ export class ComputedValue<T> implements IObservable, IComputedValue<T>, IDeriva
         if (
             globalState.inBatch === 0 &&
             // !globalState.trackingDerivatpion &&
-            this.observers_.size === 0 &&
+            (!this.observers_ || this.observers_.size === 0) &&
             !this.keepAlive_
         ) {
             if (shouldCompute(this)) {
@@ -210,6 +212,7 @@ export class ComputedValue<T> implements IObservable, IComputedValue<T>, IDeriva
                 endBatch()
             }
         } else {
+            const wasBeingObserved = this.isBeingObserved
             reportObserved(this)
             if (shouldCompute(this)) {
                 let prevTrackingContext = globalState.trackingContext
@@ -220,6 +223,10 @@ export class ComputedValue<T> implements IObservable, IComputedValue<T>, IDeriva
                     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_!

package/src/core/derivation.ts

@@ -134,7 +134,7 @@ export function checkIfStateModificationsAreAllowed(atom: IAtom) {
     if (!__DEV__) {
         return
     }
-    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 &&

package/src/core/globalstate.ts

@@ -82,6 +82,14 @@ export class MobXGlobals {
      */
     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).
+     */
+    isRunningUnobservations = false
+
     /**
      * Is it allowed to change observables at this point?
      * In general, MobX doesn't allow that when running computations and React.render.

package/src/core/observable.ts

@@ -26,7 +26,7 @@ export interface IObservable extends IDepTreeNode {
     lowestObserverState_: IDerivationState_ // Used to avoid redundant propagations
     isPendingUnobservation: boolean // Used to push itself to global.pendingUnobservations at most once per batch.
 
-    observers_: Set<IDerivation>
+    observers_: Set<IDerivation> | null
 
     onBUO(): void
     onBO(): void
@@ -36,11 +36,11 @@ export interface IObservable extends IDepTreeNode {
 }
 
 export function hasObservers(observable: IObservable): boolean {
-    return observable.observers_ && observable.observers_.size > 0
+    return !!observable.observers_ && observable.observers_.size > 0
 }
 
 export function getObservers(observable: IObservable): Set<IDerivation> {
-    return observable.observers_
+    return observable.observers_ ?? new Set()
 }
 
 // function invariantObservers(observable: IObservable) {
@@ -65,7 +65,7 @@ export function addObserver(observable: IObservable, node: IDerivation) {
     // invariant(observable._observers.indexOf(node) === -1, "INTERNAL ERROR add already added node");
     // invariantObservers(observable);
 
-    observable.observers_.add(node)
+    ;(observable.observers_ ??= new Set()).add(node)
     if (observable.lowestObserverState_ > node.dependenciesState_) {
         observable.lowestObserverState_ = node.dependenciesState_
     }
@@ -78,8 +78,12 @@ export function removeObserver(observable: IObservable, node: IDerivation) {
     // 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)
     }
@@ -108,27 +112,60 @@ export 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.
+ */
+export function markObserved(observable: IObservable) {
+    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_?.forEach(markObserved)
+}
+
 export function reportObserved(observable: IObservable): boolean {
     checkIfStateReadsAreAllowed(observable)
 
@@ -149,7 +186,10 @@ export function reportObserved(observable: IObservable): boolean {
             }
         }
         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)
     }
 
@@ -187,7 +227,7 @@ export function propagateChanged(observable: IObservable) {
     observable.lowestObserverState_ = IDerivationState_.STALE_
 
     // Ideally we use for..of here, but the downcompiled version is really slow...
-    observable.observers_.forEach(d => {
+    observable.observers_?.forEach(d => {
         if (d.dependenciesState_ === IDerivationState_.UP_TO_DATE_) {
             d.onBecomeStale_()
         }
@@ -204,7 +244,7 @@ export function propagateChangeConfirmed(observable: IObservable) {
     }
     observable.lowestObserverState_ = IDerivationState_.STALE_
 
-    observable.observers_.forEach(d => {
+    observable.observers_?.forEach(d => {
         if (d.dependenciesState_ === IDerivationState_.POSSIBLY_STALE_) {
             d.dependenciesState_ = IDerivationState_.STALE_
         } else if (
@@ -224,7 +264,7 @@ export function propagateMaybeChanged(observable: IObservable) {
     }
     observable.lowestObserverState_ = IDerivationState_.POSSIBLY_STALE_
 
-    observable.observers_.forEach(d => {
+    observable.observers_?.forEach(d => {
         if (d.dependenciesState_ === IDerivationState_.UP_TO_DATE_) {
             d.dependenciesState_ = IDerivationState_.POSSIBLY_STALE_
             d.onBecomeStale_()

package/src/types/modifiers.ts

@@ -22,6 +22,11 @@ export interface IEnhancer<T> {
 }
 
 export 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

package/src/types/observableset.ts

@@ -233,21 +233,11 @@ export class ObservableSet<T = any> implements Set<T>, IInterceptable<ISetWillCh
     }
 
     intersection<U>(otherSet: ReadonlySetLike<U> | Set<U>): Set<T & U> {
-        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<U>(otherSet: ReadonlySetLike<U> | Set<U>): Set<T | U> {
-        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<U>(otherSet: ReadonlySetLike<U>): Set<T> {
@@ -255,12 +245,7 @@ export class ObservableSet<T = any> implements Set<T>, IInterceptable<ISetWillCh
     }
 
     symmetricDifference<U>(otherSet: ReadonlySetLike<U> | Set<U>): Set<T | U> {
-        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: ReadonlySetLike<unknown>): boolean {
@@ -272,12 +257,7 @@ export class ObservableSet<T = any> implements Set<T>, IInterceptable<ISetWillCh
     }
 
     isDisjointFrom(otherSet: ReadonlySetLike<unknown> | Set<unknown>): boolean {
-        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: ObservableSet<T> | IObservableSetInitialValues<T>): ObservableSet<T> {
@@ -285,17 +265,42 @@ export class ObservableSet<T = any> implements Set<T>, IInterceptable<ISetWillCh
             other = new Set(other)
         }
 
-        transaction(() => {
-            if (Array.isArray(other)) {
-                this.clear()
-                other.forEach(value => this.add(value))
-            } else if (isES6Set(other)) {
-                this.clear()
-                other.forEach(value => this.add(value))
-            } else if (other !== null && other !== undefined) {
-                die(41, other)
-            }
-        })
+        if (Array.isArray(other) || isES6Set(other)) {
+            // Only emit `delete`/`add` events (and `reportChanged`) for values that
+            // actually change, instead of clearing and re-adding everything. `add` and
+            // `delete` are already no-ops for values that are respectively already
+            // present or already absent, so we just need to avoid deleting values that
+            // are part of the replacement. See #3761.
+            transaction(() => {
+                // Collect the desired values for quick lookup. `other` is already a Set
+                // here when it was passed (or snapshotted from an observable set) as one,
+                // so reuse it rather than allocating another; arrays are wrapped (which
+                // also dedupes them).
+                const replacementValues: Set<T> = isES6Set(other)
+                    ? other
+                    : new Set<T>(other as Iterable<T>)
+                // Short-circuit the trivial cases: an empty replacement is just a clear,
+                // and replacing into an empty set only needs the adds.
+                if (replacementValues.size === 0) {
+                    this.clear()
+                    return
+                }
+                if (this.data_.size === 0) {
+                    replacementValues.forEach(value => this.add(value))
+                    return
+                }
+                // Delete values that are not part of the replacement.
+                for (const value of this.data_.values()) {
+                    if (!replacementValues.has(this.dehanceValue_(value))) {
+                        this.delete(value)
+                    }
+                }
+                // Add new values; values that are already present are a no-op.
+                replacementValues.forEach(value => this.add(value))
+            })
+        } else if (other !== null && other !== undefined) {
+            die(41, other)
+        }
 
         return this
     }