mobx 4.12.0 → 4.14.1

package/lib/mobx.es6.js

@@ -4,8 +4,15 @@ const EMPTY_ARRAY = [];
 Object.freeze(EMPTY_ARRAY);
 const EMPTY_OBJECT = {};
 Object.freeze(EMPTY_OBJECT);
+const 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;
@@ -65,6 +72,20 @@ function isPlainObject(value) {
     const 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 (let i = 0; i < propNames.length; i++) {
         addHiddenProp(object, propNames[i], object[propNames[i]]);
@@ -118,15 +139,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(([key]) => 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) {
     const res = [];
@@ -153,13 +165,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;
 }
 
@@ -223,13 +235,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);
 }
 const comparer = {
     identity: identityComparer,
     structural: structuralComparer,
-    default: defaultComparer
+    default: defaultComparer,
+    shallow: shallowComparer
 };
 
 const enumerableDescriptorCache = {};
@@ -549,6 +565,275 @@ const 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 = {}));
+class CaughtException {
+    constructor(cause) {
+        this.cause = cause;
+        // Empty
+    }
+}
+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: {
+            const prevUntracked = untrackedStart(); // no need for those computeds to be reported, they will be picked up in trackDerivedFunction.
+            const obs = derivation.observing, l = obs.length;
+            for (let i = 0; i < l; i++) {
+                const 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) {
+    const 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) {
+    const 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;
+    const prevTracking = globalState.trackingDerivation;
+    globalState.trackingDerivation = derivation;
+    let 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");
+    const prevObserving = derivation.observing;
+    const observing = (derivation.observing = derivation.newObserving);
+    let 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
+    let i0 = 0, l = derivation.unboundDepsCount;
+    for (let i = 0; i < l; i++) {
+        const 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--) {
+        const 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--) {
+        const 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");
+    const obs = derivation.observing;
+    derivation.observing = [];
+    let i = obs.length;
+    while (i--)
+        removeObserver(obs[i], derivation);
+    derivation.dependenciesState = IDerivationState.NOT_TRACKING;
+}
+function untracked(action) {
+    const prev = untrackedStart();
+    const res = action();
+    untrackedEnd(prev);
+    return res;
+}
+function untrackedStart() {
+    const prev = globalState.trackingDerivation;
+    globalState.trackingDerivation = null;
+    return prev;
+}
+function untrackedEnd(prev) {
+    globalState.trackingDerivation = prev;
+}
+function allowStateReadsStart(allowStateReads) {
+    const 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;
+    const obs = derivation.observing;
+    let 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
+let currentActionId = 0;
+let nextActionId = 1;
 function createAction(actionName, fn) {
     if (process.env.NODE_ENV !== "production") {
         invariant(typeof fn === "function", "`action` can only be invoked on functions");
@@ -562,25 +847,19 @@ function createAction(actionName, fn) {
     return res;
 }
 function executeAction(actionName, fn, scope, args) {
-    const runInfo = startAction(actionName, fn, scope, args);
-    let shouldSupressReactionError = true;
+    const runInfo = _startAction(actionName, scope, args);
     try {
-        const 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) {
     const notifySpy = isSpyEnabled() && !!actionName;
     let startTime = 0;
     if (notifySpy) {
@@ -600,19 +879,35 @@ function startAction(actionName, fn, scope, args) {
     const prevDerivation = untrackedStart();
     startBatch();
     const prevAllowStateChanges = allowStateChangesStart(true);
-    return {
+    const prevAllowStateReads = allowStateReadsStart(true);
+    const runInfo = {
         prevDerivation,
         prevAllowStateChanges,
+        prevAllowStateReads,
         notifySpy,
-        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) {
     const prev = allowStateChangesStart(allowStateChanges);
@@ -847,350 +1142,112 @@ class ComputedValue {
         if (this.setter) {
             invariant(!this.isRunningSetter, `The setter of computed value '${this.name}' is trying to update itself. Did you intend to update an _observable_ value, instead of the computed property?`);
             this.isRunningSetter = true;
-            try {
-                this.setter.call(this.scope, value);
-            }
-            finally {
-                this.isRunningSetter = false;
-            }
-        }
-        else
-            invariant(false, process.env.NODE_ENV !== "production" &&
-                `[ComputedValue '${this.name}'] It is not possible to assign a new value to a computed value.`);
-    }
-    trackAndCompute() {
-        if (isSpyEnabled()) {
-            spyReport({
-                object: this.scope,
-                type: "compute",
-                name: this.name
-            });
-        }
-        const oldValue = this.value;
-        const wasSuspended = 
-        /* see #1208 */ this.dependenciesState === IDerivationState.NOT_TRACKING;
-        const newValue = this.computeValue(true);
-        const changed = wasSuspended ||
-            isCaughtException(oldValue) ||
-            isCaughtException(newValue) ||
-            !this.equals(oldValue, newValue);
-        if (changed) {
-            this.value = newValue;
-        }
-        return changed;
-    }
-    computeValue(track) {
-        this.isComputing = true;
-        globalState.computationDepth++;
-        let 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;
-    }
-    suspend() {
-        if (!this.keepAlive) {
-            clearObserving(this);
-            this.value = undefined; // don't hold on to computed value!
-        }
-    }
-    observe(listener, fireImmediately) {
-        let firstTime = true;
-        let prevValue = undefined;
-        return autorun(() => {
-            let newValue = this.get();
-            if (!firstTime || fireImmediately) {
-                const prevU = untrackedStart();
-                listener({
-                    type: "update",
-                    object: this,
-                    newValue,
-                    oldValue: prevValue
-                });
-                untrackedEnd(prevU);
-            }
-            firstTime = false;
-            prevValue = newValue;
-        });
-    }
-    warnAboutUntrackedRead() {
-        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`);
-        }
-    }
-    toJSON() {
-        return this.get();
-    }
-    toString() {
-        return `${this.name}[${this.derivation.toString()}]`;
-    }
-    valueOf() {
-        return toPrimitive(this.get());
-    }
-}
-ComputedValue.prototype[primitiveSymbol()] = ComputedValue.prototype.valueOf;
-const 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 = {}));
-class CaughtException {
-    constructor(cause) {
-        this.cause = cause;
-        // Empty
-    }
-}
-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: {
-            const prevUntracked = untrackedStart(); // no need for those computeds to be reported, they will be picked up in trackDerivedFunction.
-            const obs = derivation.observing, l = obs.length;
-            for (let i = 0; i < l; i++) {
-                const 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;
-                    }
-                }
+            try {
+                this.setter.call(this.scope, value);
+            }
+            finally {
+                this.isRunningSetter = false;
             }
-            changeDependenciesStateTo0(derivation);
-            untrackedEnd(prevUntracked);
-            return false;
         }
+        else
+            invariant(false, process.env.NODE_ENV !== "production" &&
+                `[ComputedValue '${this.name}'] It is not possible to assign a new value to a computed value.`);
     }
-}
-// 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) {
-    const 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;
-    const prevTracking = globalState.trackingDerivation;
-    globalState.trackingDerivation = derivation;
-    let result;
-    if (globalState.disableErrorBoundaries === true) {
-        result = f.call(context);
-    }
-    else {
-        try {
-            result = f.call(context);
+    trackAndCompute() {
+        if (isSpyEnabled()) {
+            spyReport({
+                object: this.scope,
+                type: "compute",
+                name: this.name
+            });
         }
-        catch (e) {
-            result = new CaughtException(e);
+        const oldValue = this.value;
+        const wasSuspended = 
+        /* see #1208 */ this.dependenciesState === IDerivationState.NOT_TRACKING;
+        const newValue = this.computeValue(true);
+        const changed = wasSuspended ||
+            isCaughtException(oldValue) ||
+            isCaughtException(newValue) ||
+            !this.equals(oldValue, newValue);
+        if (changed) {
+            this.value = newValue;
         }
+        return changed;
     }
-    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");
-    const prevObserving = derivation.observing;
-    const observing = (derivation.observing = derivation.newObserving);
-    let 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
-    let i0 = 0, l = derivation.unboundDepsCount;
-    for (let i = 0; i < l; i++) {
-        const dep = observing[i];
-        if (dep.diffValue === 0) {
-            dep.diffValue = 1;
-            if (i0 !== i)
-                observing[i0] = dep;
-            i0++;
+    computeValue(track) {
+        this.isComputing = true;
+        globalState.computationDepth++;
+        let res;
+        if (track) {
+            res = trackDerivedFunction(this, this.derivation, this.scope);
         }
-        // Upcast is 'safe' here, because if dep is IObservable, `dependenciesState` will be undefined,
-        // not hitting the condition
-        if (dep.dependenciesState > lowestNewObservingDerivationState) {
-            lowestNewObservingDerivationState = dep.dependenciesState;
+        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;
     }
-    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--) {
-        const dep = prevObserving[l];
-        if (dep.diffValue === 0) {
-            removeObserver(dep, derivation);
+    suspend() {
+        if (!this.keepAlive) {
+            clearObserving(this);
+            this.value = undefined; // don't hold on to computed value!
         }
-        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--) {
-        const dep = observing[i0];
-        if (dep.diffValue === 1) {
-            dep.diffValue = 0;
-            addObserver(dep, derivation);
+    observe(listener, fireImmediately) {
+        let firstTime = true;
+        let prevValue = undefined;
+        return autorun(() => {
+            let newValue = this.get();
+            if (!firstTime || fireImmediately) {
+                const prevU = untrackedStart();
+                listener({
+                    type: "update",
+                    object: this,
+                    newValue,
+                    oldValue: prevValue
+                });
+                untrackedEnd(prevU);
+            }
+            firstTime = false;
+            prevValue = newValue;
+        });
+    }
+    warnAboutUntrackedRead() {
+        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`);
         }
     }
-    // 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();
+    toJSON() {
+        return this.get();
+    }
+    toString() {
+        return `${this.name}[${this.derivation.toString()}]`;
+    }
+    valueOf() {
+        return toPrimitive(this.get());
     }
 }
-function clearObserving(derivation) {
-    // invariant(globalState.inBatch > 0, "INTERNAL ERROR clearObserving should be called only inside batch");
-    const obs = derivation.observing;
-    derivation.observing = [];
-    let i = obs.length;
-    while (i--)
-        removeObserver(obs[i], derivation);
-    derivation.dependenciesState = IDerivationState.NOT_TRACKING;
-}
-function untracked(action) {
-    const prev = untrackedStart();
-    const res = action();
-    untrackedEnd(prev);
-    return res;
-}
-function untrackedStart() {
-    const 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;
-    const obs = derivation.observing;
-    let i = obs.length;
-    while (i--)
-        obs[i].lowestObserverState = IDerivationState.UP_TO_DATE;
-}
+ComputedValue.prototype[primitiveSymbol()] = ComputedValue.prototype.valueOf;
+const isComputedValue = createInstanceofPredicate("ComputedValue", ComputedValue);
 
 /**
  * These values will persist if global state is reset
@@ -1200,6 +1257,9 @@ const persistentKeys = [
     "spyListeners",
     "enforceActions",
     "computedRequiresReaction",
+    "reactionRequiresObservable",
+    "observableRequiresReaction",
+    "allowStateReads",
     "disableErrorBoundaries",
     "runId",
     "UNCHANGED"
@@ -1260,6 +1320,11 @@ class MobXGlobals {
          * 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
          */
@@ -1276,6 +1341,16 @@ class MobXGlobals {
          * 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
@@ -1456,6 +1531,7 @@ function endBatch() {
     }
 }
 function reportObserved(observable) {
+    checkIfStateReadsAreAllowed(observable);
     const derivation = globalState.trackingDerivation;
     if (derivation !== null) {
         /**
@@ -1590,10 +1666,11 @@ function printDepTree(tree, lines, depth) {
 }
 
 class Reaction {
-    constructor(name = "Reaction@" + getNextId(), onInvalidate, errorHandler) {
+    constructor(name = "Reaction@" + getNextId(), onInvalidate, errorHandler, 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;
@@ -1935,7 +2012,7 @@ function autorun(view, opts = EMPTY_OBJECT) {
         // normal autorun
         reaction = new Reaction(name, function () {
             this.track(reactionRunner);
-        }, opts.onError);
+        }, opts.onError, opts.requiresObservable);
     }
     else {
         const scheduler = createSchedulerFromOptions(opts);
@@ -1950,7 +2027,7 @@ function autorun(view, opts = EMPTY_OBJECT) {
                         reaction.track(reactionRunner);
                 });
             }
-        }, opts.onError);
+        }, opts.onError, opts.requiresObservable);
     }
     function reactionRunner() {
         view(reaction);
@@ -1993,7 +2070,7 @@ function reaction(expression, effect, opts = EMPTY_OBJECT) {
             isScheduled = true;
             scheduler(reactionRunner);
         }
-    }, opts.onError);
+    }, opts.onError, opts.requiresObservable);
     function reactionRunner() {
         isScheduled = false; // Q: move into reaction runner?
         if (r.isDisposed)
@@ -2032,8 +2109,8 @@ function onBecomeUnobserved(thing, arg2, arg3) {
     return interceptHook("onBecomeUnobserved", thing, arg2, arg3);
 }
 function interceptHook(hook, thing, arg2, arg3) {
-    const atom = typeof arg2 === "string" ? getAtom(thing, arg2) : getAtom(thing);
-    const cb = typeof arg2 === "string" ? arg3 : arg2;
+    const atom = typeof arg3 === "function" ? getAtom(thing, arg2) : getAtom(thing);
+    const cb = typeof arg3 === "function" ? arg3 : arg2;
     const orig = atom[hook];
     if (typeof orig !== "function")
         return fail(process.env.NODE_ENV !== "production" && "Not an atom that can be (un)observed");
@@ -2047,7 +2124,7 @@ function interceptHook(hook, thing, arg2, arg3) {
 }
 
 function configure(options) {
-    const { enforceActions, computedRequiresReaction, computedConfigurable, disableErrorBoundaries, arrayBuffer, reactionScheduler } = options;
+    const { enforceActions, computedRequiresReaction, computedConfigurable, disableErrorBoundaries, arrayBuffer, reactionScheduler, reactionRequiresObservable, observableRequiresReaction } = options;
     if (options.isolateGlobalState === true) {
         isolateGlobalState();
     }
@@ -2077,6 +2154,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;
     }
@@ -3297,9 +3381,16 @@ class ObservableMap {
         return this._data.has(key);
     }
     has(key) {
-        if (this._hasMap.has(key))
-            return this._hasMap.get(key).get();
-        return this._updateHasMapEntry(key, false).get();
+        if (!globalState.trackingDerivation)
+            return this._has(key);
+        let entry = this._hasMap.get(key);
+        if (!entry) {
+            // todo: replace with atom (breaking change)
+            const newEntry = (entry = new ObservableValue(this._has(key), referenceEnhancer, `${this.name}.${stringifyKey(key)}?`, false));
+            this._hasMap.set(key, newEntry);
+            onBecomeUnobserved(newEntry, () => this._hasMap.delete(key));
+        }
+        return entry.get();
     }
     set(key, value) {
         const hasKey = this._has(key);
@@ -3361,16 +3452,10 @@ class ObservableMap {
         return false;
     }
     _updateHasMapEntry(key, value) {
-        // optimization; don't fill the hasMap if we are not observing, or remove entry if there are no observers anymore
         let 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;
     }
     _updateValue(key, newValue) {
         const observable = this._data.get(key);
@@ -3495,14 +3580,32 @@ class ObservableMap {
     }
     replace(values) {
         transaction(() => {
-            // 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
-            const newKeys = getMapLikeKeys(values);
+            const replacementMap = convertToMap(values);
             const oldKeys = this._keys;
-            const missingKeys = oldKeys.filter(k => newKeys.indexOf(k) === -1);
-            missingKeys.forEach(k => this.delete(k));
-            this.merge(values);
+            const newKeys = Array.from(replacementMap.keys());
+            let keysChanged = false;
+            for (let i = 0; i < oldKeys.length; i++) {
+                const 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((value, key) => {
+                // new key
+                if (!this._data.has(key)) {
+                    keysChanged = true;
+                }
+                this.set(key, value);
+            });
+            if (keysChanged) {
+                this._keys.replace(newKeys);
+            }
         });
         return this;
     }
@@ -4082,12 +4185,12 @@ function getDebugName(thing, property) {
 }
 
 const toString = Object.prototype.toString;
-function deepEqual(a, b) {
-    return eq(a, b);
+function deepEqual(a, b, 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)
@@ -4102,10 +4205,6 @@ function eq(a, b, aStack, bStack) {
     const 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);
@@ -4155,6 +4254,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.
@@ -4179,7 +4284,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;
         }
     }
@@ -4194,7 +4299,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;
         }
     }
@@ -4249,7 +4354,7 @@ try {
     process.env.NODE_ENV;
 }
 catch (e) {
-    const g = typeof window !== "undefined" ? window : global;
+    const g = getGlobal();
     if (typeof process === "undefined")
         g.process = {};
     g.process.env = {};
@@ -4318,4 +4423,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 };