mobx 4.12.0 → 4.14.1

package/lib/mobx.module.js

@@ -67,8 +67,15 @@ var EMPTY_ARRAY = [];
 Object.freeze(EMPTY_ARRAY);
 var EMPTY_OBJECT = {};
 Object.freeze(EMPTY_OBJECT);
+var mockGlobal = {};
 function getGlobal() {
-    return typeof window !== "undefined" ? window : global;
+    if (typeof window !== "undefined") {
+        return window;
+    }
+    if (typeof global !== "undefined") {
+        return global;
+    }
+    return mockGlobal;
 }
 function getNextId() {
     return ++globalState.mobxGuid;
@@ -128,6 +135,20 @@ function isPlainObject(value) {
     var proto = Object.getPrototypeOf(value);
     return proto === Object.prototype || proto === null;
 }
+function convertToMap(dataStructure) {
+    if (isES6Map(dataStructure) || isObservableMap(dataStructure)) {
+        return dataStructure;
+    }
+    else if (Array.isArray(dataStructure)) {
+        return new Map(dataStructure);
+    }
+    else if (isPlainObject(dataStructure)) {
+        return new Map(Object.entries(dataStructure));
+    }
+    else {
+        return fail("Cannot convert to map from '" + dataStructure + "'");
+    }
+}
 function makeNonEnumerable(object, propNames) {
     for (var i = 0; i < propNames.length; i++) {
         addHiddenProp(object, propNames[i], object[propNames[i]]);
@@ -181,18 +202,6 @@ function isES6Map(thing) {
 function isES6Set(thing) {
     return thing instanceof Set;
 }
-function getMapLikeKeys(map) {
-    if (isPlainObject(map))
-        return Object.keys(map);
-    if (Array.isArray(map))
-        return map.map(function (_a) {
-            var _b = __read(_a, 1), key = _b[0];
-            return key;
-        });
-    if (isES6Map(map) || isObservableMap(map))
-        return iteratorToArray(map.keys());
-    return fail("Cannot get keys from '" + map + "'");
-}
 // use Array.from in Mobx 5
 function iteratorToArray(it) {
     var res = [];
@@ -219,13 +228,13 @@ function declareIterator(prototType, iteratorFactory) {
     addHiddenFinalProp(prototType, iteratorSymbol(), iteratorFactory);
 }
 function makeIterable(iterator) {
-    iterator[iteratorSymbol()] = self;
+    iterator[iteratorSymbol()] = getSelf;
     return iterator;
 }
 function toStringTagSymbol() {
     return (typeof Symbol === "function" && Symbol.toStringTag) || "@@toStringTag";
 }
-function self() {
+function getSelf() {
     return this;
 }
 
@@ -293,13 +302,17 @@ function identityComparer(a, b) {
 function structuralComparer(a, b) {
     return deepEqual(a, b);
 }
+function shallowComparer(a, b) {
+    return deepEqual(a, b, 1);
+}
 function defaultComparer(a, b) {
     return areBothNaN(a, b) || identityComparer(a, b);
 }
 var comparer = {
     identity: identityComparer,
     structural: structuralComparer,
-    default: defaultComparer
+    default: defaultComparer,
+    shallow: shallowComparer
 };
 
 var enumerableDescriptorCache = {};
@@ -619,6 +632,276 @@ var computed = function computed(arg1, arg2, arg3) {
 };
 computed.struct = computedStructDecorator;
 
+var IDerivationState;
+(function (IDerivationState) {
+    // before being run or (outside batch and not being observed)
+    // at this point derivation is not holding any data about dependency tree
+    IDerivationState[IDerivationState["NOT_TRACKING"] = -1] = "NOT_TRACKING";
+    // no shallow dependency changed since last computation
+    // won't recalculate derivation
+    // this is what makes mobx fast
+    IDerivationState[IDerivationState["UP_TO_DATE"] = 0] = "UP_TO_DATE";
+    // some deep dependency changed, but don't know if shallow dependency changed
+    // will require to check first if UP_TO_DATE or POSSIBLY_STALE
+    // currently only ComputedValue will propagate POSSIBLY_STALE
+    //
+    // having this state is second big optimization:
+    // don't have to recompute on every dependency change, but only when it's needed
+    IDerivationState[IDerivationState["POSSIBLY_STALE"] = 1] = "POSSIBLY_STALE";
+    // A shallow dependency has changed since last computation and the derivation
+    // will need to recompute when it's needed next.
+    IDerivationState[IDerivationState["STALE"] = 2] = "STALE";
+})(IDerivationState || (IDerivationState = {}));
+var TraceMode;
+(function (TraceMode) {
+    TraceMode[TraceMode["NONE"] = 0] = "NONE";
+    TraceMode[TraceMode["LOG"] = 1] = "LOG";
+    TraceMode[TraceMode["BREAK"] = 2] = "BREAK";
+})(TraceMode || (TraceMode = {}));
+var CaughtException = /** @class */ (function () {
+    function CaughtException(cause) {
+        this.cause = cause;
+        // Empty
+    }
+    return CaughtException;
+}());
+function isCaughtException(e) {
+    return e instanceof CaughtException;
+}
+/**
+ * Finds out whether any dependency of the derivation has actually changed.
+ * If dependenciesState is 1 then it will recalculate dependencies,
+ * if any dependency changed it will propagate it by changing dependenciesState to 2.
+ *
+ * By iterating over the dependencies in the same order that they were reported and
+ * stopping on the first change, all the recalculations are only called for ComputedValues
+ * that will be tracked by derivation. That is because we assume that if the first x
+ * dependencies of the derivation doesn't change then the derivation should run the same way
+ * up until accessing x-th dependency.
+ */
+function shouldCompute(derivation) {
+    switch (derivation.dependenciesState) {
+        case IDerivationState.UP_TO_DATE:
+            return false;
+        case IDerivationState.NOT_TRACKING:
+        case IDerivationState.STALE:
+            return true;
+        case IDerivationState.POSSIBLY_STALE: {
+            var prevUntracked = untrackedStart(); // no need for those computeds to be reported, they will be picked up in trackDerivedFunction.
+            var obs = derivation.observing, l = obs.length;
+            for (var i = 0; i < l; i++) {
+                var obj = obs[i];
+                if (isComputedValue(obj)) {
+                    if (globalState.disableErrorBoundaries) {
+                        obj.get();
+                    }
+                    else {
+                        try {
+                            obj.get();
+                        }
+                        catch (e) {
+                            // we are not interested in the value *or* exception at this moment, but if there is one, notify all
+                            untrackedEnd(prevUntracked);
+                            return true;
+                        }
+                    }
+                    // if ComputedValue `obj` actually changed it will be computed and propagated to its observers.
+                    // and `derivation` is an observer of `obj`
+                    // invariantShouldCompute(derivation)
+                    if (derivation.dependenciesState === IDerivationState.STALE) {
+                        untrackedEnd(prevUntracked);
+                        return true;
+                    }
+                }
+            }
+            changeDependenciesStateTo0(derivation);
+            untrackedEnd(prevUntracked);
+            return false;
+        }
+    }
+}
+// function invariantShouldCompute(derivation: IDerivation) {
+//     const newDepState = (derivation as any).dependenciesState
+//     if (
+//         process.env.NODE_ENV === "production" &&
+//         (newDepState === IDerivationState.POSSIBLY_STALE ||
+//             newDepState === IDerivationState.NOT_TRACKING)
+//     )
+//         fail("Illegal dependency state")
+// }
+function isComputingDerivation() {
+    return globalState.trackingDerivation !== null; // filter out actions inside computations
+}
+function checkIfStateModificationsAreAllowed(atom) {
+    var hasObservers = atom.observers.length > 0;
+    // Should never be possible to change an observed observable from inside computed, see #798
+    if (globalState.computationDepth > 0 && hasObservers)
+        fail(process.env.NODE_ENV !== "production" &&
+            "Computed values are not allowed to cause side effects by changing observables that are already being observed. Tried to modify: " + atom.name);
+    // Should not be possible to change observed state outside strict mode, except during initialization, see #563
+    if (!globalState.allowStateChanges && (hasObservers || globalState.enforceActions === "strict"))
+        fail(process.env.NODE_ENV !== "production" &&
+            (globalState.enforceActions
+                ? "Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: "
+                : "Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, the render function of a React component? Tried to modify: ") +
+                atom.name);
+}
+function checkIfStateReadsAreAllowed(observable) {
+    if (process.env.NODE_ENV !== "production" &&
+        !globalState.allowStateReads &&
+        globalState.observableRequiresReaction) {
+        console.warn("[mobx] Observable " + observable.name + " being read outside a reactive context");
+    }
+}
+/**
+ * Executes the provided function `f` and tracks which observables are being accessed.
+ * The tracking information is stored on the `derivation` object and the derivation is registered
+ * as observer of any of the accessed observables.
+ */
+function trackDerivedFunction(derivation, f, context) {
+    var prevAllowStateReads = allowStateReadsStart(true);
+    // pre allocate array allocation + room for variation in deps
+    // array will be trimmed by bindDependencies
+    changeDependenciesStateTo0(derivation);
+    derivation.newObserving = new Array(derivation.observing.length + 100);
+    derivation.unboundDepsCount = 0;
+    derivation.runId = ++globalState.runId;
+    var prevTracking = globalState.trackingDerivation;
+    globalState.trackingDerivation = derivation;
+    var result;
+    if (globalState.disableErrorBoundaries === true) {
+        result = f.call(context);
+    }
+    else {
+        try {
+            result = f.call(context);
+        }
+        catch (e) {
+            result = new CaughtException(e);
+        }
+    }
+    globalState.trackingDerivation = prevTracking;
+    bindDependencies(derivation);
+    if (derivation.observing.length === 0) {
+        warnAboutDerivationWithoutDependencies(derivation);
+    }
+    allowStateReadsEnd(prevAllowStateReads);
+    return result;
+}
+function warnAboutDerivationWithoutDependencies(derivation) {
+    if (process.env.NODE_ENV === "production")
+        return;
+    if (globalState.reactionRequiresObservable || derivation.requiresObservable) {
+        console.warn("[mobx] Derivation " + derivation.name + " is created/updated without reading any observable value");
+    }
+}
+/**
+ * diffs newObserving with observing.
+ * update observing to be newObserving with unique observables
+ * notify observers that become observed/unobserved
+ */
+function bindDependencies(derivation) {
+    // invariant(derivation.dependenciesState !== IDerivationState.NOT_TRACKING, "INTERNAL ERROR bindDependencies expects derivation.dependenciesState !== -1");
+    var prevObserving = derivation.observing;
+    var observing = (derivation.observing = derivation.newObserving);
+    var lowestNewObservingDerivationState = IDerivationState.UP_TO_DATE;
+    // Go through all new observables and check diffValue: (this list can contain duplicates):
+    //   0: first occurrence, change to 1 and keep it
+    //   1: extra occurrence, drop it
+    var i0 = 0, l = derivation.unboundDepsCount;
+    for (var i = 0; i < l; i++) {
+        var dep = observing[i];
+        if (dep.diffValue === 0) {
+            dep.diffValue = 1;
+            if (i0 !== i)
+                observing[i0] = dep;
+            i0++;
+        }
+        // Upcast is 'safe' here, because if dep is IObservable, `dependenciesState` will be undefined,
+        // not hitting the condition
+        if (dep.dependenciesState > lowestNewObservingDerivationState) {
+            lowestNewObservingDerivationState = dep.dependenciesState;
+        }
+    }
+    observing.length = i0;
+    derivation.newObserving = null; // newObserving shouldn't be needed outside tracking (statement moved down to work around FF bug, see #614)
+    // Go through all old observables and check diffValue: (it is unique after last bindDependencies)
+    //   0: it's not in new observables, unobserve it
+    //   1: it keeps being observed, don't want to notify it. change to 0
+    l = prevObserving.length;
+    while (l--) {
+        var dep = prevObserving[l];
+        if (dep.diffValue === 0) {
+            removeObserver(dep, derivation);
+        }
+        dep.diffValue = 0;
+    }
+    // Go through all new observables and check diffValue: (now it should be unique)
+    //   0: it was set to 0 in last loop. don't need to do anything.
+    //   1: it wasn't observed, let's observe it. set back to 0
+    while (i0--) {
+        var dep = observing[i0];
+        if (dep.diffValue === 1) {
+            dep.diffValue = 0;
+            addObserver(dep, derivation);
+        }
+    }
+    // Some new observed derivations may become stale during this derivation computation
+    // so they have had no chance to propagate staleness (#916)
+    if (lowestNewObservingDerivationState !== IDerivationState.UP_TO_DATE) {
+        derivation.dependenciesState = lowestNewObservingDerivationState;
+        derivation.onBecomeStale();
+    }
+}
+function clearObserving(derivation) {
+    // invariant(globalState.inBatch > 0, "INTERNAL ERROR clearObserving should be called only inside batch");
+    var obs = derivation.observing;
+    derivation.observing = [];
+    var i = obs.length;
+    while (i--)
+        removeObserver(obs[i], derivation);
+    derivation.dependenciesState = IDerivationState.NOT_TRACKING;
+}
+function untracked(action) {
+    var prev = untrackedStart();
+    var res = action();
+    untrackedEnd(prev);
+    return res;
+}
+function untrackedStart() {
+    var prev = globalState.trackingDerivation;
+    globalState.trackingDerivation = null;
+    return prev;
+}
+function untrackedEnd(prev) {
+    globalState.trackingDerivation = prev;
+}
+function allowStateReadsStart(allowStateReads) {
+    var prev = globalState.allowStateReads;
+    globalState.allowStateReads = allowStateReads;
+    return prev;
+}
+function allowStateReadsEnd(prev) {
+    globalState.allowStateReads = prev;
+}
+/**
+ * needed to keep `lowestObserverState` correct. when changing from (2 or 1) to 0
+ *
+ */
+function changeDependenciesStateTo0(derivation) {
+    if (derivation.dependenciesState === IDerivationState.UP_TO_DATE)
+        return;
+    derivation.dependenciesState = IDerivationState.UP_TO_DATE;
+    var obs = derivation.observing;
+    var i = obs.length;
+    while (i--)
+        obs[i].lowestObserverState = IDerivationState.UP_TO_DATE;
+}
+
+// we don't use globalState for these in order to avoid possible issues with multiple
+// mobx versions
+var currentActionId = 0;
+var nextActionId = 1;
 function createAction(actionName, fn) {
     if (process.env.NODE_ENV !== "production") {
         invariant(typeof fn === "function", "`action` can only be invoked on functions");
@@ -632,25 +915,19 @@ function createAction(actionName, fn) {
     return res;
 }
 function executeAction(actionName, fn, scope, args) {
-    var runInfo = startAction(actionName, fn, scope, args);
-    var shouldSupressReactionError = true;
+    var runInfo = _startAction(actionName, scope, args);
     try {
-        var res = fn.apply(scope, args);
-        shouldSupressReactionError = false;
-        return res;
+        return fn.apply(scope, args);
+    }
+    catch (err) {
+        runInfo.error = err;
+        throw err;
     }
     finally {
-        if (shouldSupressReactionError) {
-            globalState.suppressReactionErrors = shouldSupressReactionError;
-            endAction(runInfo);
-            globalState.suppressReactionErrors = false;
-        }
-        else {
-            endAction(runInfo);
-        }
+        _endAction(runInfo);
     }
 }
-function startAction(actionName, fn, scope, args) {
+function _startAction(actionName, scope, args) {
     var notifySpy = isSpyEnabled() && !!actionName;
     var startTime = 0;
     if (notifySpy) {
@@ -670,19 +947,35 @@ function startAction(actionName, fn, scope, args) {
     var prevDerivation = untrackedStart();
     startBatch();
     var prevAllowStateChanges = allowStateChangesStart(true);
-    return {
+    var prevAllowStateReads = allowStateReadsStart(true);
+    var runInfo = {
         prevDerivation: prevDerivation,
         prevAllowStateChanges: prevAllowStateChanges,
+        prevAllowStateReads: prevAllowStateReads,
         notifySpy: notifySpy,
-        startTime: startTime
+        startTime: startTime,
+        actionId: nextActionId++,
+        parentActionId: currentActionId
     };
+    currentActionId = runInfo.actionId;
+    return runInfo;
 }
-function endAction(runInfo) {
+function _endAction(runInfo) {
+    if (currentActionId !== runInfo.actionId) {
+        fail("invalid action stack. did you forget to finish an action?");
+    }
+    currentActionId = runInfo.parentActionId;
+    if (runInfo.error !== undefined) {
+        globalState.suppressReactionErrors = true;
+    }
     allowStateChangesEnd(runInfo.prevAllowStateChanges);
+    allowStateReadsEnd(runInfo.prevAllowStateReads);
     endBatch();
     untrackedEnd(runInfo.prevDerivation);
-    if (runInfo.notifySpy)
+    if (runInfo.notifySpy) {
         spyReportEnd({ time: Date.now() - runInfo.startTime });
+    }
+    globalState.suppressReactionErrors = false;
 }
 function allowStateChanges(allowStateChanges, func) {
     var prev = allowStateChangesStart(allowStateChanges);
@@ -938,338 +1231,99 @@ var ComputedValue = /** @class */ (function () {
         if (isSpyEnabled()) {
             spyReport({
                 object: this.scope,
-                type: "compute",
-                name: this.name
-            });
-        }
-        var oldValue = this.value;
-        var wasSuspended = 
-        /* see #1208 */ this.dependenciesState === IDerivationState.NOT_TRACKING;
-        var newValue = this.computeValue(true);
-        var changed = wasSuspended ||
-            isCaughtException(oldValue) ||
-            isCaughtException(newValue) ||
-            !this.equals(oldValue, newValue);
-        if (changed) {
-            this.value = newValue;
-        }
-        return changed;
-    };
-    ComputedValue.prototype.computeValue = function (track) {
-        this.isComputing = true;
-        globalState.computationDepth++;
-        var res;
-        if (track) {
-            res = trackDerivedFunction(this, this.derivation, this.scope);
-        }
-        else {
-            if (globalState.disableErrorBoundaries === true) {
-                res = this.derivation.call(this.scope);
-            }
-            else {
-                try {
-                    res = this.derivation.call(this.scope);
-                }
-                catch (e) {
-                    res = new CaughtException(e);
-                }
-            }
-        }
-        globalState.computationDepth--;
-        this.isComputing = false;
-        return res;
-    };
-    ComputedValue.prototype.suspend = function () {
-        if (!this.keepAlive) {
-            clearObserving(this);
-            this.value = undefined; // don't hold on to computed value!
-        }
-    };
-    ComputedValue.prototype.observe = function (listener, fireImmediately) {
-        var _this = this;
-        var firstTime = true;
-        var prevValue = undefined;
-        return autorun(function () {
-            var newValue = _this.get();
-            if (!firstTime || fireImmediately) {
-                var prevU = untrackedStart();
-                listener({
-                    type: "update",
-                    object: _this,
-                    newValue: newValue,
-                    oldValue: prevValue
-                });
-                untrackedEnd(prevU);
-            }
-            firstTime = false;
-            prevValue = newValue;
-        });
-    };
-    ComputedValue.prototype.warnAboutUntrackedRead = function () {
-        if (process.env.NODE_ENV === "production")
-            return;
-        if (this.requiresReaction === true) {
-            fail("[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");
-        }
-        if (globalState.computedRequiresReaction) {
-            console.warn("[mobx] Computed value " + this.name + " is being read outside a reactive context. Doing a full recompute");
-        }
-    };
-    ComputedValue.prototype.toJSON = function () {
-        return this.get();
-    };
-    ComputedValue.prototype.toString = function () {
-        return this.name + "[" + this.derivation.toString() + "]";
-    };
-    ComputedValue.prototype.valueOf = function () {
-        return toPrimitive(this.get());
-    };
-    return ComputedValue;
-}());
-ComputedValue.prototype[primitiveSymbol()] = ComputedValue.prototype.valueOf;
-var isComputedValue = createInstanceofPredicate("ComputedValue", ComputedValue);
-
-var IDerivationState;
-(function (IDerivationState) {
-    // before being run or (outside batch and not being observed)
-    // at this point derivation is not holding any data about dependency tree
-    IDerivationState[IDerivationState["NOT_TRACKING"] = -1] = "NOT_TRACKING";
-    // no shallow dependency changed since last computation
-    // won't recalculate derivation
-    // this is what makes mobx fast
-    IDerivationState[IDerivationState["UP_TO_DATE"] = 0] = "UP_TO_DATE";
-    // some deep dependency changed, but don't know if shallow dependency changed
-    // will require to check first if UP_TO_DATE or POSSIBLY_STALE
-    // currently only ComputedValue will propagate POSSIBLY_STALE
-    //
-    // having this state is second big optimization:
-    // don't have to recompute on every dependency change, but only when it's needed
-    IDerivationState[IDerivationState["POSSIBLY_STALE"] = 1] = "POSSIBLY_STALE";
-    // A shallow dependency has changed since last computation and the derivation
-    // will need to recompute when it's needed next.
-    IDerivationState[IDerivationState["STALE"] = 2] = "STALE";
-})(IDerivationState || (IDerivationState = {}));
-var TraceMode;
-(function (TraceMode) {
-    TraceMode[TraceMode["NONE"] = 0] = "NONE";
-    TraceMode[TraceMode["LOG"] = 1] = "LOG";
-    TraceMode[TraceMode["BREAK"] = 2] = "BREAK";
-})(TraceMode || (TraceMode = {}));
-var CaughtException = /** @class */ (function () {
-    function CaughtException(cause) {
-        this.cause = cause;
-        // Empty
-    }
-    return CaughtException;
-}());
-function isCaughtException(e) {
-    return e instanceof CaughtException;
-}
-/**
- * Finds out whether any dependency of the derivation has actually changed.
- * If dependenciesState is 1 then it will recalculate dependencies,
- * if any dependency changed it will propagate it by changing dependenciesState to 2.
- *
- * By iterating over the dependencies in the same order that they were reported and
- * stopping on the first change, all the recalculations are only called for ComputedValues
- * that will be tracked by derivation. That is because we assume that if the first x
- * dependencies of the derivation doesn't change then the derivation should run the same way
- * up until accessing x-th dependency.
- */
-function shouldCompute(derivation) {
-    switch (derivation.dependenciesState) {
-        case IDerivationState.UP_TO_DATE:
-            return false;
-        case IDerivationState.NOT_TRACKING:
-        case IDerivationState.STALE:
-            return true;
-        case IDerivationState.POSSIBLY_STALE: {
-            var prevUntracked = untrackedStart(); // no need for those computeds to be reported, they will be picked up in trackDerivedFunction.
-            var obs = derivation.observing, l = obs.length;
-            for (var i = 0; i < l; i++) {
-                var obj = obs[i];
-                if (isComputedValue(obj)) {
-                    if (globalState.disableErrorBoundaries) {
-                        obj.get();
-                    }
-                    else {
-                        try {
-                            obj.get();
-                        }
-                        catch (e) {
-                            // we are not interested in the value *or* exception at this moment, but if there is one, notify all
-                            untrackedEnd(prevUntracked);
-                            return true;
-                        }
-                    }
-                    // if ComputedValue `obj` actually changed it will be computed and propagated to its observers.
-                    // and `derivation` is an observer of `obj`
-                    // invariantShouldCompute(derivation)
-                    if (derivation.dependenciesState === IDerivationState.STALE) {
-                        untrackedEnd(prevUntracked);
-                        return true;
-                    }
-                }
-            }
-            changeDependenciesStateTo0(derivation);
-            untrackedEnd(prevUntracked);
-            return false;
+                type: "compute",
+                name: this.name
+            });
         }
-    }
-}
-// function invariantShouldCompute(derivation: IDerivation) {
-//     const newDepState = (derivation as any).dependenciesState
-//     if (
-//         process.env.NODE_ENV === "production" &&
-//         (newDepState === IDerivationState.POSSIBLY_STALE ||
-//             newDepState === IDerivationState.NOT_TRACKING)
-//     )
-//         fail("Illegal dependency state")
-// }
-function isComputingDerivation() {
-    return globalState.trackingDerivation !== null; // filter out actions inside computations
-}
-function checkIfStateModificationsAreAllowed(atom) {
-    var hasObservers = atom.observers.length > 0;
-    // Should never be possible to change an observed observable from inside computed, see #798
-    if (globalState.computationDepth > 0 && hasObservers)
-        fail(process.env.NODE_ENV !== "production" &&
-            "Computed values are not allowed to cause side effects by changing observables that are already being observed. Tried to modify: " + atom.name);
-    // Should not be possible to change observed state outside strict mode, except during initialization, see #563
-    if (!globalState.allowStateChanges && (hasObservers || globalState.enforceActions === "strict"))
-        fail(process.env.NODE_ENV !== "production" &&
-            (globalState.enforceActions
-                ? "Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: "
-                : "Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, the render function of a React component? Tried to modify: ") +
-                atom.name);
-}
-/**
- * Executes the provided function `f` and tracks which observables are being accessed.
- * The tracking information is stored on the `derivation` object and the derivation is registered
- * as observer of any of the accessed observables.
- */
-function trackDerivedFunction(derivation, f, context) {
-    // pre allocate array allocation + room for variation in deps
-    // array will be trimmed by bindDependencies
-    changeDependenciesStateTo0(derivation);
-    derivation.newObserving = new Array(derivation.observing.length + 100);
-    derivation.unboundDepsCount = 0;
-    derivation.runId = ++globalState.runId;
-    var prevTracking = globalState.trackingDerivation;
-    globalState.trackingDerivation = derivation;
-    var result;
-    if (globalState.disableErrorBoundaries === true) {
-        result = f.call(context);
-    }
-    else {
-        try {
-            result = f.call(context);
+        var oldValue = this.value;
+        var wasSuspended = 
+        /* see #1208 */ this.dependenciesState === IDerivationState.NOT_TRACKING;
+        var newValue = this.computeValue(true);
+        var changed = wasSuspended ||
+            isCaughtException(oldValue) ||
+            isCaughtException(newValue) ||
+            !this.equals(oldValue, newValue);
+        if (changed) {
+            this.value = newValue;
         }
-        catch (e) {
-            result = new CaughtException(e);
+        return changed;
+    };
+    ComputedValue.prototype.computeValue = function (track) {
+        this.isComputing = true;
+        globalState.computationDepth++;
+        var res;
+        if (track) {
+            res = trackDerivedFunction(this, this.derivation, this.scope);
         }
-    }
-    globalState.trackingDerivation = prevTracking;
-    bindDependencies(derivation);
-    return result;
-}
-/**
- * diffs newObserving with observing.
- * update observing to be newObserving with unique observables
- * notify observers that become observed/unobserved
- */
-function bindDependencies(derivation) {
-    // invariant(derivation.dependenciesState !== IDerivationState.NOT_TRACKING, "INTERNAL ERROR bindDependencies expects derivation.dependenciesState !== -1");
-    var prevObserving = derivation.observing;
-    var observing = (derivation.observing = derivation.newObserving);
-    var lowestNewObservingDerivationState = IDerivationState.UP_TO_DATE;
-    // Go through all new observables and check diffValue: (this list can contain duplicates):
-    //   0: first occurrence, change to 1 and keep it
-    //   1: extra occurrence, drop it
-    var i0 = 0, l = derivation.unboundDepsCount;
-    for (var i = 0; i < l; i++) {
-        var dep = observing[i];
-        if (dep.diffValue === 0) {
-            dep.diffValue = 1;
-            if (i0 !== i)
-                observing[i0] = dep;
-            i0++;
+        else {
+            if (globalState.disableErrorBoundaries === true) {
+                res = this.derivation.call(this.scope);
+            }
+            else {
+                try {
+                    res = this.derivation.call(this.scope);
+                }
+                catch (e) {
+                    res = new CaughtException(e);
+                }
+            }
         }
-        // Upcast is 'safe' here, because if dep is IObservable, `dependenciesState` will be undefined,
-        // not hitting the condition
-        if (dep.dependenciesState > lowestNewObservingDerivationState) {
-            lowestNewObservingDerivationState = dep.dependenciesState;
+        globalState.computationDepth--;
+        this.isComputing = false;
+        return res;
+    };
+    ComputedValue.prototype.suspend = function () {
+        if (!this.keepAlive) {
+            clearObserving(this);
+            this.value = undefined; // don't hold on to computed value!
         }
-    }
-    observing.length = i0;
-    derivation.newObserving = null; // newObserving shouldn't be needed outside tracking (statement moved down to work around FF bug, see #614)
-    // Go through all old observables and check diffValue: (it is unique after last bindDependencies)
-    //   0: it's not in new observables, unobserve it
-    //   1: it keeps being observed, don't want to notify it. change to 0
-    l = prevObserving.length;
-    while (l--) {
-        var dep = prevObserving[l];
-        if (dep.diffValue === 0) {
-            removeObserver(dep, derivation);
+    };
+    ComputedValue.prototype.observe = function (listener, fireImmediately) {
+        var _this = this;
+        var firstTime = true;
+        var prevValue = undefined;
+        return autorun(function () {
+            var newValue = _this.get();
+            if (!firstTime || fireImmediately) {
+                var prevU = untrackedStart();
+                listener({
+                    type: "update",
+                    object: _this,
+                    newValue: newValue,
+                    oldValue: prevValue
+                });
+                untrackedEnd(prevU);
+            }
+            firstTime = false;
+            prevValue = newValue;
+        });
+    };
+    ComputedValue.prototype.warnAboutUntrackedRead = function () {
+        if (process.env.NODE_ENV === "production")
+            return;
+        if (this.requiresReaction === true) {
+            fail("[mobx] Computed value " + this.name + " is read outside a reactive context");
         }
-        dep.diffValue = 0;
-    }
-    // Go through all new observables and check diffValue: (now it should be unique)
-    //   0: it was set to 0 in last loop. don't need to do anything.
-    //   1: it wasn't observed, let's observe it. set back to 0
-    while (i0--) {
-        var dep = observing[i0];
-        if (dep.diffValue === 1) {
-            dep.diffValue = 0;
-            addObserver(dep, derivation);
+        if (this.isTracing !== TraceMode.NONE) {
+            console.log("[mobx.trace] '" + this.name + "' is being read outside a reactive context. Doing a full recompute");
         }
-    }
-    // Some new observed derivations may become stale during this derivation computation
-    // so they have had no chance to propagate staleness (#916)
-    if (lowestNewObservingDerivationState !== IDerivationState.UP_TO_DATE) {
-        derivation.dependenciesState = lowestNewObservingDerivationState;
-        derivation.onBecomeStale();
-    }
-}
-function clearObserving(derivation) {
-    // invariant(globalState.inBatch > 0, "INTERNAL ERROR clearObserving should be called only inside batch");
-    var obs = derivation.observing;
-    derivation.observing = [];
-    var i = obs.length;
-    while (i--)
-        removeObserver(obs[i], derivation);
-    derivation.dependenciesState = IDerivationState.NOT_TRACKING;
-}
-function untracked(action) {
-    var prev = untrackedStart();
-    var res = action();
-    untrackedEnd(prev);
-    return res;
-}
-function untrackedStart() {
-    var prev = globalState.trackingDerivation;
-    globalState.trackingDerivation = null;
-    return prev;
-}
-function untrackedEnd(prev) {
-    globalState.trackingDerivation = prev;
-}
-/**
- * needed to keep `lowestObserverState` correct. when changing from (2 or 1) to 0
- *
- */
-function changeDependenciesStateTo0(derivation) {
-    if (derivation.dependenciesState === IDerivationState.UP_TO_DATE)
-        return;
-    derivation.dependenciesState = IDerivationState.UP_TO_DATE;
-    var obs = derivation.observing;
-    var i = obs.length;
-    while (i--)
-        obs[i].lowestObserverState = IDerivationState.UP_TO_DATE;
-}
+        if (globalState.computedRequiresReaction) {
+            console.warn("[mobx] Computed value " + this.name + " is being read outside a reactive context. Doing a full recompute");
+        }
+    };
+    ComputedValue.prototype.toJSON = function () {
+        return this.get();
+    };
+    ComputedValue.prototype.toString = function () {
+        return this.name + "[" + this.derivation.toString() + "]";
+    };
+    ComputedValue.prototype.valueOf = function () {
+        return toPrimitive(this.get());
+    };
+    return ComputedValue;
+}());
+ComputedValue.prototype[primitiveSymbol()] = ComputedValue.prototype.valueOf;
+var isComputedValue = createInstanceofPredicate("ComputedValue", ComputedValue);
 
 /**
  * These values will persist if global state is reset
@@ -1279,6 +1333,9 @@ var persistentKeys = [
     "spyListeners",
     "enforceActions",
     "computedRequiresReaction",
+    "reactionRequiresObservable",
+    "observableRequiresReaction",
+    "allowStateReads",
     "disableErrorBoundaries",
     "runId",
     "UNCHANGED"
@@ -1339,6 +1396,11 @@ var MobXGlobals = /** @class */ (function () {
          * To ensure that those functions stay pure.
          */
         this.allowStateChanges = true;
+        /**
+         * Is it allowed to read observables at this point?
+         * Used to hold the state needed for `observableRequiresReaction`
+         */
+        this.allowStateReads = true;
         /**
          * If strict mode is enabled, state changes are by default not allowed
          */
@@ -1355,6 +1417,16 @@ var MobXGlobals = /** @class */ (function () {
          * Warn if computed values are accessed outside a reactive context
          */
         this.computedRequiresReaction = false;
+        /**
+         * (Experimental)
+         * Warn if you try to create to derivation / reactive context without accessing any observable.
+         */
+        this.reactionRequiresObservable = false;
+        /**
+         * (Experimental)
+         * Warn if observables are accessed outside a reactive context
+         */
+        this.observableRequiresReaction = false;
         /**
          * Allows overwriting of computed properties, useful in tests but not prod as it can cause
          * memory leaks. See https://github.com/mobxjs/mobx/issues/1867
@@ -1536,6 +1608,7 @@ function endBatch() {
     }
 }
 function reportObserved(observable) {
+    checkIfStateReadsAreAllowed(observable);
     var derivation = globalState.trackingDerivation;
     if (derivation !== null) {
         /**
@@ -1656,11 +1729,13 @@ function printDepTree(tree, lines, depth) {
 }
 
 var Reaction = /** @class */ (function () {
-    function Reaction(name, onInvalidate, errorHandler) {
+    function Reaction(name, onInvalidate, errorHandler, requiresObservable) {
         if (name === void 0) { name = "Reaction@" + getNextId(); }
+        if (requiresObservable === void 0) { requiresObservable = false; }
         this.name = name;
         this.onInvalidate = onInvalidate;
         this.errorHandler = errorHandler;
+        this.requiresObservable = requiresObservable;
         this.observing = []; // nodes we are looking at. Our value depends on these nodes
         this.newObserving = [];
         this.dependenciesState = IDerivationState.NOT_TRACKING;
@@ -2006,7 +2081,7 @@ function autorun(view, opts) {
         // normal autorun
         reaction = new Reaction(name, function () {
             this.track(reactionRunner);
-        }, opts.onError);
+        }, opts.onError, opts.requiresObservable);
     }
     else {
         var scheduler_1 = createSchedulerFromOptions(opts);
@@ -2021,7 +2096,7 @@ function autorun(view, opts) {
                         reaction.track(reactionRunner);
                 });
             }
-        }, opts.onError);
+        }, opts.onError, opts.requiresObservable);
     }
     function reactionRunner() {
         view(reaction);
@@ -2065,7 +2140,7 @@ function reaction(expression, effect, opts) {
             isScheduled = true;
             scheduler(reactionRunner);
         }
-    }, opts.onError);
+    }, opts.onError, opts.requiresObservable);
     function reactionRunner() {
         isScheduled = false; // Q: move into reaction runner?
         if (r.isDisposed)
@@ -2104,8 +2179,8 @@ function onBecomeUnobserved(thing, arg2, arg3) {
     return interceptHook("onBecomeUnobserved", thing, arg2, arg3);
 }
 function interceptHook(hook, thing, arg2, arg3) {
-    var atom = typeof arg2 === "string" ? getAtom(thing, arg2) : getAtom(thing);
-    var cb = typeof arg2 === "string" ? arg3 : arg2;
+    var atom = typeof arg3 === "function" ? getAtom(thing, arg2) : getAtom(thing);
+    var cb = typeof arg3 === "function" ? arg3 : arg2;
     var orig = atom[hook];
     if (typeof orig !== "function")
         return fail(process.env.NODE_ENV !== "production" && "Not an atom that can be (un)observed");
@@ -2119,7 +2194,7 @@ function interceptHook(hook, thing, arg2, arg3) {
 }
 
 function configure(options) {
-    var enforceActions = options.enforceActions, computedRequiresReaction = options.computedRequiresReaction, computedConfigurable = options.computedConfigurable, disableErrorBoundaries = options.disableErrorBoundaries, arrayBuffer = options.arrayBuffer, reactionScheduler = options.reactionScheduler;
+    var enforceActions = options.enforceActions, computedRequiresReaction = options.computedRequiresReaction, computedConfigurable = options.computedConfigurable, disableErrorBoundaries = options.disableErrorBoundaries, arrayBuffer = options.arrayBuffer, reactionScheduler = options.reactionScheduler, reactionRequiresObservable = options.reactionRequiresObservable, observableRequiresReaction = options.observableRequiresReaction;
     if (options.isolateGlobalState === true) {
         isolateGlobalState();
     }
@@ -2149,6 +2224,13 @@ function configure(options) {
     if (computedRequiresReaction !== undefined) {
         globalState.computedRequiresReaction = !!computedRequiresReaction;
     }
+    if (reactionRequiresObservable !== undefined) {
+        globalState.reactionRequiresObservable = !!reactionRequiresObservable;
+    }
+    if (observableRequiresReaction !== undefined) {
+        globalState.observableRequiresReaction = !!observableRequiresReaction;
+        globalState.allowStateReads = !globalState.observableRequiresReaction;
+    }
     if (computedConfigurable !== undefined) {
         globalState.computedConfigurable = !!computedConfigurable;
     }
@@ -3404,9 +3486,17 @@ var ObservableMap = /** @class */ (function () {
         return this._data.has(key);
     };
     ObservableMap.prototype.has = function (key) {
-        if (this._hasMap.has(key))
-            return this._hasMap.get(key).get();
-        return this._updateHasMapEntry(key, false).get();
+        var _this = this;
+        if (!globalState.trackingDerivation)
+            return this._has(key);
+        var entry = this._hasMap.get(key);
+        if (!entry) {
+            // todo: replace with atom (breaking change)
+            var newEntry = (entry = new ObservableValue(this._has(key), referenceEnhancer, this.name + "." + stringifyKey(key) + "?", false));
+            this._hasMap.set(key, newEntry);
+            onBecomeUnobserved(newEntry, function () { return _this._hasMap.delete(key); });
+        }
+        return entry.get();
     };
     ObservableMap.prototype.set = function (key, value) {
         var hasKey = this._has(key);
@@ -3469,16 +3559,10 @@ var ObservableMap = /** @class */ (function () {
         return false;
     };
     ObservableMap.prototype._updateHasMapEntry = function (key, value) {
-        // optimization; don't fill the hasMap if we are not observing, or remove entry if there are no observers anymore
         var entry = this._hasMap.get(key);
         if (entry) {
             entry.setNewValue(value);
         }
-        else {
-            entry = new ObservableValue(value, referenceEnhancer, this.name + "." + stringifyKey(key) + "?", false);
-            this._hasMap.set(key, entry);
-        }
-        return entry;
     };
     ObservableMap.prototype._updateValue = function (key, newValue) {
         var observable = this._data.get(key);
@@ -3611,14 +3695,32 @@ var ObservableMap = /** @class */ (function () {
     ObservableMap.prototype.replace = function (values) {
         var _this = this;
         transaction(function () {
-            // grab all the keys that are present in the new map but not present in the current map
-            // and delete them from the map, then merge the new map
-            // this will cause reactions only on changed values
-            var newKeys = getMapLikeKeys(values);
+            var replacementMap = convertToMap(values);
             var oldKeys = _this._keys;
-            var missingKeys = oldKeys.filter(function (k) { return newKeys.indexOf(k) === -1; });
-            missingKeys.forEach(function (k) { return _this.delete(k); });
-            _this.merge(values);
+            var newKeys = Array.from(replacementMap.keys());
+            var keysChanged = false;
+            for (var i = 0; i < oldKeys.length; i++) {
+                var oldKey = oldKeys[i];
+                // key order change
+                if (oldKeys.length === newKeys.length && oldKey !== newKeys[i]) {
+                    keysChanged = true;
+                }
+                // deleted key
+                if (!replacementMap.has(oldKey)) {
+                    keysChanged = true;
+                    _this.delete(oldKey);
+                }
+            }
+            replacementMap.forEach(function (value, key) {
+                // new key
+                if (!_this._data.has(key)) {
+                    keysChanged = true;
+                }
+                _this.set(key, value);
+            });
+            if (keysChanged) {
+                _this._keys.replace(newKeys);
+            }
         });
         return this;
     };
@@ -4222,12 +4324,13 @@ function getDebugName(thing, property) {
 }
 
 var toString = Object.prototype.toString;
-function deepEqual(a, b) {
-    return eq(a, b);
+function deepEqual(a, b, depth) {
+    if (depth === void 0) { depth = -1; }
+    return eq(a, b, depth);
 }
 // Copied from https://github.com/jashkenas/underscore/blob/5c237a7c682fb68fd5378203f0bf22dce1624854/underscore.js#L1186-L1289
 // Internal recursive comparison function for `isEqual`.
-function eq(a, b, aStack, bStack) {
+function eq(a, b, depth, aStack, bStack) {
     // Identical objects are equal. `0 === -0`, but they aren't identical.
     // See the [Harmony `egal` proposal](http://wiki.ecmascript.org/doku.php?id=harmony:egal).
     if (a === b)
@@ -4242,10 +4345,6 @@ function eq(a, b, aStack, bStack) {
     var type = typeof a;
     if (type !== "function" && type !== "object" && typeof b != "object")
         return false;
-    return deepEq(a, b, aStack, bStack);
-}
-// Internal recursive comparison function for `isEqual`.
-function deepEq(a, b, aStack, bStack) {
     // Unwrap any wrapped objects.
     a = unwrap(a);
     b = unwrap(b);
@@ -4295,6 +4394,12 @@ function deepEq(a, b, aStack, bStack) {
             return false;
         }
     }
+    if (depth === 0) {
+        return false;
+    }
+    else if (depth < 0) {
+        depth = -1;
+    }
     // Assume equality for cyclic structures. The algorithm for detecting cyclic
     // structures is adapted from ES 5.1 section 15.12.3, abstract operation `JO`.
     // Initializing stack of traversed objects.
@@ -4319,7 +4424,7 @@ function deepEq(a, b, aStack, bStack) {
             return false;
         // Deep compare the contents, ignoring non-numeric properties.
         while (length--) {
-            if (!eq(a[length], b[length], aStack, bStack))
+            if (!eq(a[length], b[length], depth - 1, aStack, bStack))
                 return false;
         }
     }
@@ -4334,7 +4439,7 @@ function deepEq(a, b, aStack, bStack) {
         while (length--) {
             // Deep compare each member
             key = keys[length];
-            if (!(has$1(b, key) && eq(a[key], b[key], aStack, bStack)))
+            if (!(has$1(b, key) && eq(a[key], b[key], depth - 1, aStack, bStack)))
                 return false;
         }
     }
@@ -4389,7 +4494,7 @@ try {
     process.env.NODE_ENV;
 }
 catch (e) {
-    var g = typeof window !== "undefined" ? window : global;
+    var g = getGlobal();
     if (typeof process === "undefined")
         g.process = {};
     g.process.env = {};
@@ -4458,4 +4563,4 @@ if (process.env.NODE_ENV !== "production" &&
     });
 }
 
-export { $mobx, IDerivationState, ObservableMap, ObservableSet, Reaction, allowStateChanges as _allowStateChanges, allowStateChangesInsideComputed as _allowStateChangesInsideComputed, getAdministration as _getAdministration, getGlobalState as _getGlobalState, interceptReads as _interceptReads, isComputingDerivation as _isComputingDerivation, resetGlobalState as _resetGlobalState, action, autorun, comparer, computed, configure, createAtom, decorate, entries, extendObservable, extendShallowObservable, flow, get, getAtom, getDebugName, getDependencyTree, getObserverTree, has, intercept, isAction, isArrayLike, isObservableValue as isBoxedObservable, isComputed, isComputedProp, isObservable, isObservableArray, isObservableMap, isObservableObject, isObservableProp, isObservableSet, keys, observable, observe, onBecomeObserved, onBecomeUnobserved, onReactionError, reaction, remove, runInAction, set, spy, toJS, trace, transaction, untracked, values, when };
+export { $mobx, IDerivationState, ObservableMap, ObservableSet, Reaction, allowStateChanges as _allowStateChanges, allowStateChangesInsideComputed as _allowStateChangesInsideComputed, _endAction, getAdministration as _getAdministration, getGlobalState as _getGlobalState, interceptReads as _interceptReads, isComputingDerivation as _isComputingDerivation, resetGlobalState as _resetGlobalState, _startAction, action, autorun, comparer, computed, configure, createAtom, decorate, entries, extendObservable, extendShallowObservable, flow, get, getAtom, getDebugName, getDependencyTree, getObserverTree, has, intercept, isAction, isArrayLike, isObservableValue as isBoxedObservable, isComputed, isComputedProp, isObservable, isObservableArray, isObservableMap, isObservableObject, isObservableProp, isObservableSet, keys, observable, observe, onBecomeObserved, onBecomeUnobserved, onReactionError, reaction, remove, runInAction, set, spy, toJS, trace, transaction, untracked, values, when };