mobx 3.1.17 → 3.3.0

package/lib/mobx.module.js

@@ -107,7 +107,7 @@ var Atom = (function (_super) {
 var isAtom = createInstanceofPredicate("Atom", BaseAtom);
 
 function hasInterceptors(interceptable) {
-    return (interceptable.interceptors && interceptable.interceptors.length > 0);
+    return interceptable.interceptors && interceptable.interceptors.length > 0;
 }
 function registerInterceptor(interceptable, handler) {
     var interceptors = interceptable.interceptors || (interceptable.interceptors = []);
@@ -219,7 +219,11 @@ var MAX_SPLICE_SIZE = 10000; // See e.g. https://github.com/mobxjs/mobx/issues/8
 var safariPrototypeSetterInheritanceBug = (function () {
     var v = false;
     var p = {};
-    Object.defineProperty(p, "0", { set: function () { v = true; } });
+    Object.defineProperty(p, "0", {
+        set: function () {
+            v = true;
+        }
+    });
     Object.create(p)["0"] = 1;
     return v === false;
 })();
@@ -247,6 +251,32 @@ function inherit(ctor, proto) {
     }
 }
 inherit(StubArray, Array.prototype);
+// Weex freeze Array.prototype
+// Make them writeable and configurable in prototype chain
+// https://github.com/alibaba/weex/pull/1529
+if (Object.isFrozen(Array)) {
+    
+    [
+        "constructor",
+        "push",
+        "shift",
+        "concat",
+        "pop",
+        "unshift",
+        "replace",
+        "find",
+        "findIndex",
+        "splice",
+        "reverse",
+        "sort"
+    ].forEach(function (key) {
+        Object.defineProperty(StubArray.prototype, key, {
+            configurable: true,
+            writable: true,
+            value: Array.prototype[key]
+        });
+    });
+}
 var ObservableArrayAdministration = (function () {
     function ObservableArrayAdministration(name, enhancer, array, owned) {
         this.array = array;
@@ -255,7 +285,7 @@ var ObservableArrayAdministration = (function () {
         this.lastKnownLength = 0;
         this.interceptors = null;
         this.changeListeners = null;
-        this.atom = new BaseAtom(name || ("ObservableArray@" + getNextId()));
+        this.atom = new BaseAtom(name || "ObservableArray@" + getNextId());
         this.enhancer = function (newV, oldV) { return enhancer(newV, oldV, name + "[..]"); };
     }
     ObservableArrayAdministration.prototype.dehanceValue = function (value) {
@@ -358,7 +388,9 @@ var ObservableArrayAdministration = (function () {
         }
         else {
             var res = this.values.slice(index, index + deleteCount);
-            this.values = this.values.slice(0, index).concat(newItems, this.values.slice(index + deleteCount));
+            this.values = this.values
+                .slice(0, index)
+                .concat(newItems, this.values.slice(index + deleteCount));
             return res;
         }
         var _a;
@@ -366,11 +398,15 @@ var ObservableArrayAdministration = (function () {
     ObservableArrayAdministration.prototype.notifyArrayChildUpdate = function (index, newValue, oldValue) {
         var notifySpy = !this.owned && isSpyEnabled();
         var notify = hasListeners(this);
-        var change = notify || notifySpy ? {
-            object: this.array,
-            type: "update",
-            index: index, newValue: newValue, oldValue: oldValue
-        } : null;
+        var change = notify || notifySpy
+            ? {
+                object: this.array,
+                type: "update",
+                index: index,
+                newValue: newValue,
+                oldValue: oldValue
+            }
+            : null;
         if (notifySpy)
             spyReportStart(change);
         this.atom.reportChanged();
@@ -382,13 +418,17 @@ var ObservableArrayAdministration = (function () {
     ObservableArrayAdministration.prototype.notifyArraySplice = function (index, added, removed) {
         var notifySpy = !this.owned && isSpyEnabled();
         var notify = hasListeners(this);
-        var change = notify || notifySpy ? {
-            object: this.array,
-            type: "splice",
-            index: index, removed: removed, added: added,
-            removedCount: removed.length,
-            addedCount: added.length
-        } : null;
+        var change = notify || notifySpy
+            ? {
+                object: this.array,
+                type: "splice",
+                index: index,
+                removed: removed,
+                added: added,
+                removedCount: removed.length,
+                addedCount: added.length
+            }
+            : null;
         if (notifySpy)
             spyReportStart(change);
         this.atom.reportChanged();
@@ -434,7 +474,7 @@ var ObservableArray = (function (_super) {
             arrays[_i] = arguments[_i];
         }
         this.$mobx.atom.reportObserved();
-        return Array.prototype.concat.apply(this.peek(), arrays.map(function (a) { return isObservableArray(a) ? a.peek() : a; }));
+        return Array.prototype.concat.apply(this.peek(), arrays.map(function (a) { return (isObservableArray(a) ? a.peek() : a); }));
     };
     ObservableArray.prototype.replace = function (newItems) {
         return this.$mobx.spliceWithArray(0, this.$mobx.values.length, newItems);
@@ -470,11 +510,11 @@ var ObservableArray = (function (_super) {
         return -1;
     };
     /*
-        functions that do alter the internal structure of the array, (based on lib.es6.d.ts)
-        since these functions alter the inner structure of the array, the have side effects.
-        Because the have side effects, they should not be used in computed function,
-        and for that reason the do not call dependencyState.notifyObserved
-        */
+     * functions that do alter the internal structure of the array, (based on lib.es6.d.ts)
+     * since these functions alter the inner structure of the array, the have side effects.
+     * Because the have side effects, they should not be used in computed function,
+     * and for that reason the do not call dependencyState.notifyObserved
+     */
     ObservableArray.prototype.splice = function (index, deleteCount) {
         var newItems = [];
         for (var _i = 2; _i < arguments.length; _i++) {
@@ -556,10 +596,15 @@ var ObservableArray = (function (_super) {
         var oldItems = this.$mobx.values;
         var newItems;
         if (fromIndex < toIndex) {
-            newItems = oldItems.slice(0, fromIndex).concat(oldItems.slice(fromIndex + 1, toIndex + 1), [oldItems[fromIndex]], oldItems.slice(toIndex + 1));
+            newItems = oldItems.slice(0, fromIndex).concat(oldItems.slice(fromIndex + 1, toIndex + 1), [
+                oldItems[fromIndex]
+            ], oldItems.slice(toIndex + 1));
         }
         else {
-            newItems = oldItems.slice(0, toIndex).concat([oldItems[fromIndex]], oldItems.slice(toIndex, fromIndex), oldItems.slice(fromIndex + 1));
+            // toIndex < fromIndex
+            newItems = oldItems.slice(0, toIndex).concat([
+                oldItems[fromIndex]
+            ], oldItems.slice(toIndex, fromIndex), oldItems.slice(fromIndex + 1));
         }
         this.replace(newItems);
     };
@@ -571,7 +616,9 @@ var ObservableArray = (function (_super) {
                 impl.atom.reportObserved();
                 return impl.dehanceValue(impl.values[index]);
             }
-            console.warn("[mobx.array] Attempt to read an array index (" + index + ") that is out of bounds (" + impl.values.length + "). Please check length first. Out of bound indices will not be tracked by MobX");
+            console.warn("[mobx.array] Attempt to read an array index (" + index + ") that is out of bounds (" + impl
+                .values
+                .length + "). Please check length first. Out of bound indices will not be tracked by MobX");
         }
         return undefined;
     };
@@ -587,7 +634,8 @@ var ObservableArray = (function (_super) {
                 var change = interceptChange(adm, {
                     type: "update",
                     object: this,
-                    index: index, newValue: newValue
+                    index: index,
+                    newValue: newValue
                 });
                 if (!change)
                     return;
@@ -624,9 +672,6 @@ Object.defineProperty(ObservableArray.prototype, "length", {
         this.$mobx.setArrayLength(newLength);
     }
 });
-/**
- * Wrap function from prototype
- */
 [
     "every",
     "filter",
@@ -738,7 +783,8 @@ var ObservableValue = (function (_super) {
                 spyReportStart({
                     type: "update",
                     object: this,
-                    newValue: newValue, oldValue: oldValue
+                    newValue: newValue,
+                    oldValue: oldValue
                 });
             }
             this.setNewValue(newValue);
@@ -749,16 +795,18 @@ var ObservableValue = (function (_super) {
     ObservableValue.prototype.prepareNewValue = function (newValue) {
         checkIfStateModificationsAreAllowed(this);
         if (hasInterceptors(this)) {
-            var change = interceptChange(this, { object: this, type: "update", newValue: newValue });
+            var change = interceptChange(this, {
+                object: this,
+                type: "update",
+                newValue: newValue
+            });
             if (!change)
                 return UNCHANGED;
             newValue = change.newValue;
         }
         // apply modifier
         newValue = this.enhancer(newValue, this.value, this.name);
-        return this.value !== newValue
-            ? newValue
-            : UNCHANGED;
+        return this.value !== newValue ? newValue : UNCHANGED;
     };
     ObservableValue.prototype.setNewValue = function (newValue) {
         var oldValue = this.value;
@@ -768,7 +816,8 @@ var ObservableValue = (function (_super) {
             notifyListeners(this, {
                 type: "update",
                 object: this,
-                newValue: newValue, oldValue: oldValue
+                newValue: newValue,
+                oldValue: oldValue
             });
         }
     };
@@ -804,44 +853,43 @@ ObservableValue.prototype[primitiveSymbol()] = ObservableValue.prototype.valueOf
 var isObservableValue = createInstanceofPredicate("ObservableValue", ObservableValue);
 
 var messages = {
-    "m001": "It is not allowed to assign new values to @action fields",
-    "m002": "`runInAction` expects a function",
-    "m003": "`runInAction` expects a function without arguments",
-    "m004": "autorun expects a function",
-    "m005": "Warning: attempted to pass an action to autorun. Actions are untracked and will not trigger on state changes. Use `reaction` or wrap only your state modification code in an action.",
-    "m006": "Warning: attempted to pass an action to autorunAsync. Actions are untracked and will not trigger on state changes. Use `reaction` or wrap only your state modification code in an action.",
-    "m007": "reaction only accepts 2 or 3 arguments. If migrating from MobX 2, please provide an options object",
-    "m008": "wrapping reaction expression in `asReference` is no longer supported, use options object instead",
-    "m009": "@computed can only be used on getter functions, like: '@computed get myProps() { return ...; }'. It looks like it was used on a property.",
-    "m010": "@computed can only be used on getter functions, like: '@computed get myProps() { return ...; }'",
-    "m011": "First argument to `computed` should be an expression. If using computed as decorator, don't pass it arguments",
-    "m012": "computed takes one or two arguments if used as function",
-    "m013": "[mobx.expr] 'expr' should only be used inside other reactive functions.",
-    "m014": "extendObservable expected 2 or more arguments",
-    "m015": "extendObservable expects an object as first argument",
-    "m016": "extendObservable should not be used on maps, use map.merge instead",
-    "m017": "all arguments of extendObservable should be objects",
-    "m018": "extending an object with another observable (object) is not supported. Please construct an explicit propertymap, using `toJS` if need. See issue #540",
-    "m019": "[mobx.isObservable] isObservable(object, propertyName) is not supported for arrays and maps. Use map.has or array.length instead.",
-    "m020": "modifiers can only be used for individual object properties",
-    "m021": "observable expects zero or one arguments",
-    "m022": "@observable can not be used on getters, use @computed instead",
-    "m023": "Using `transaction` is deprecated, use `runInAction` or `(@)action` instead.",
-    "m024": "whyRun() can only be used if a derivation is active, or by passing an computed value / reaction explicitly. If you invoked whyRun from inside a computation; the computation is currently suspended but re-evaluating because somebody requested its value.",
-    "m025": "whyRun can only be used on reactions and computed values",
-    "m026": "`action` can only be invoked on functions",
-    "m028": "It is not allowed to set `useStrict` when a derivation is running",
-    "m029": "INTERNAL ERROR only onBecomeUnobserved shouldn't be called twice in a row",
-    "m030a": "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: ",
-    "m030b": "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: ",
-    "m031": "Computed values are not allowed to cause side effects by changing observables that are already being observed. Tried to modify: ",
-    "m032": "* This computation is suspended (not in use by any reaction) and won't run automatically.\n	Didn't expect this computation to be suspended at this point?\n	  1. Make sure this computation is used by a reaction (reaction, autorun, observer).\n	  2. Check whether you are using this computation synchronously (in the same stack as they reaction that needs it).",
-    "m033": "`observe` doesn't support the fire immediately property for observable maps.",
-    "m034": "`mobx.map` is deprecated, use `new ObservableMap` or `mobx.observable.map` instead",
-    "m035": "Cannot make the designated object observable; it is not extensible",
-    "m036": "It is not possible to get index atoms from arrays",
-    "m037": "Hi there! I'm sorry you have just run into an exception.\nIf your debugger ends up here, know that some reaction (like the render() of an observer component, autorun or reaction)\nthrew an exception and that mobx caught it, to avoid that it brings the rest of your application down.\nThe original cause of the exception (the code that caused this reaction to run (again)), is still in the stack.\n\nHowever, more interesting is the actual stack trace of the error itself.\nHopefully the error is an instanceof Error, because in that case you can inspect the original stack of the error from where it was thrown.\nSee `error.stack` property, or press the very subtle \"(...)\" link you see near the console.error message that probably brought you here.\nThat stack is more interesting than the stack of this console.error itself.\n\nIf the exception you see is an exception you created yourself, make sure to use `throw new Error(\"Oops\")` instead of `throw \"Oops\"`,\nbecause the javascript environment will only preserve the original stack trace in the first form.\n\nYou can also make sure the debugger pauses the next time this very same exception is thrown by enabling \"Pause on caught exception\".\n(Note that it might pause on many other, unrelated exception as well).\n\nIf that all doesn't help you out, feel free to open an issue https://github.com/mobxjs/mobx/issues!\n",
-    "m038": "Missing items in this list?\n    1. Check whether all used values are properly marked as observable (use isObservable to verify)\n    2. Make sure you didn't dereference values too early. MobX observes props, not primitives. E.g: use 'person.name' instead of 'name' in your computation.\n"
+    m001: "It is not allowed to assign new values to @action fields",
+    m002: "`runInAction` expects a function",
+    m003: "`runInAction` expects a function without arguments",
+    m004: "autorun expects a function",
+    m005: "Warning: attempted to pass an action to autorun. Actions are untracked and will not trigger on state changes. Use `reaction` or wrap only your state modification code in an action.",
+    m006: "Warning: attempted to pass an action to autorunAsync. Actions are untracked and will not trigger on state changes. Use `reaction` or wrap only your state modification code in an action.",
+    m007: "reaction only accepts 2 or 3 arguments. If migrating from MobX 2, please provide an options object",
+    m008: "wrapping reaction expression in `asReference` is no longer supported, use options object instead",
+    m009: "@computed can only be used on getter functions, like: '@computed get myProps() { return ...; }'. It looks like it was used on a property.",
+    m010: "@computed can only be used on getter functions, like: '@computed get myProps() { return ...; }'",
+    m011: "First argument to `computed` should be an expression. If using computed as decorator, don't pass it arguments",
+    m012: "computed takes one or two arguments if used as function",
+    m013: "[mobx.expr] 'expr' should only be used inside other reactive functions.",
+    m014: "extendObservable expected 2 or more arguments",
+    m015: "extendObservable expects an object as first argument",
+    m016: "extendObservable should not be used on maps, use map.merge instead",
+    m017: "all arguments of extendObservable should be objects",
+    m018: "extending an object with another observable (object) is not supported. Please construct an explicit propertymap, using `toJS` if need. See issue #540",
+    m019: "[mobx.isObservable] isObservable(object, propertyName) is not supported for arrays and maps. Use map.has or array.length instead.",
+    m020: "modifiers can only be used for individual object properties",
+    m021: "observable expects zero or one arguments",
+    m022: "@observable can not be used on getters, use @computed instead",
+    m024: "whyRun() can only be used if a derivation is active, or by passing an computed value / reaction explicitly. If you invoked whyRun from inside a computation; the computation is currently suspended but re-evaluating because somebody requested its value.",
+    m025: "whyRun can only be used on reactions and computed values",
+    m026: "`action` can only be invoked on functions",
+    m028: "It is not allowed to set `useStrict` when a derivation is running",
+    m029: "INTERNAL ERROR only onBecomeUnobserved shouldn't be called twice in a row",
+    m030a: "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: ",
+    m030b: "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: ",
+    m031: "Computed values are not allowed to cause side effects by changing observables that are already being observed. Tried to modify: ",
+    m032: "* This computation is suspended (not in use by any reaction) and won't run automatically.\n	Didn't expect this computation to be suspended at this point?\n	  1. Make sure this computation is used by a reaction (reaction, autorun, observer).\n	  2. Check whether you are using this computation synchronously (in the same stack as they reaction that needs it).",
+    m033: "`observe` doesn't support the fire immediately property for observable maps.",
+    m034: "`mobx.map` is deprecated, use `new ObservableMap` or `mobx.observable.map` instead",
+    m035: "Cannot make the designated object observable; it is not extensible",
+    m036: "It is not possible to get index atoms from arrays",
+    m037: "Hi there! I'm sorry you have just run into an exception.\nIf your debugger ends up here, know that some reaction (like the render() of an observer component, autorun or reaction)\nthrew an exception and that mobx caught it, to avoid that it brings the rest of your application down.\nThe original cause of the exception (the code that caused this reaction to run (again)), is still in the stack.\n\nHowever, more interesting is the actual stack trace of the error itself.\nHopefully the error is an instanceof Error, because in that case you can inspect the original stack of the error from where it was thrown.\nSee `error.stack` property, or press the very subtle \"(...)\" link you see near the console.error message that probably brought you here.\nThat stack is more interesting than the stack of this console.error itself.\n\nIf the exception you see is an exception you created yourself, make sure to use `throw new Error(\"Oops\")` instead of `throw \"Oops\"`,\nbecause the javascript environment will only preserve the original stack trace in the first form.\n\nYou can also make sure the debugger pauses the next time this very same exception is thrown by enabling \"Pause on caught exception\".\n(Note that it might pause on many other, unrelated exception as well).\n\nIf that all doesn't help you out, feel free to open an issue https://github.com/mobxjs/mobx/issues!\n",
+    m038: "Missing items in this list?\n    1. Check whether all used values are properly marked as observable (use isObservable to verify)\n    2. Make sure you didn't dereference values too early. MobX observes props, not primitives. E.g: use 'person.name' instead of 'name' in your computation.\n"
 };
 function getMessage(id) {
     return messages[id];
@@ -980,7 +1028,7 @@ function createClassPropertyDecorator(
                     }
                 }
             };
-            if (arguments.length < 3 || arguments.length === 5 && argLen < 3) {
+            if (arguments.length < 3 || (arguments.length === 5 && argLen < 3)) {
                 // Typescript target is ES3, so it won't define property for us
                 // or using Reflect.decorate polyfill, which will return no descriptor
                 // (see https://github.com/mobxjs/mobx/issues/333)
@@ -996,10 +1044,11 @@ function createClassPropertyDecorator(
             }
             var value_1 = descriptor.value, initializer_1 = descriptor.initializer;
             target.__mobxLazyInitializers.push(function (instance) {
-                onInitialize(instance, key, (initializer_1 ? initializer_1.call(instance) : value_1), customArgs, descriptor);
+                onInitialize(instance, key, initializer_1 ? initializer_1.call(instance) : value_1, customArgs, descriptor);
             });
             return {
-                enumerable: enumerable, configurable: true,
+                enumerable: enumerable,
+                configurable: true,
                 get: function () {
                     if (this.__mobxDidRunLazyInitializers !== true)
                         runLazyInitializers(this);
@@ -1022,7 +1071,9 @@ function createClassPropertyDecorator(
             /** Indirect invocation: @decorator(args) bla */
             var outerArgs = arguments;
             var argLen = arguments.length;
-            return function (target, key, descriptor) { return classPropertyDecorator(target, key, descriptor, outerArgs, argLen); };
+            return function (target, key, descriptor) {
+                return classPropertyDecorator(target, key, descriptor, outerArgs, argLen);
+            };
         };
     }
     return classPropertyDecorator;
@@ -1038,7 +1089,8 @@ function runLazyInitializers(instance) {
         return;
     if (instance.__mobxLazyInitializers) {
         addHiddenProp(instance, "__mobxDidRunLazyInitializers", true);
-        instance.__mobxDidRunLazyInitializers && instance.__mobxLazyInitializers.forEach(function (initializer) { return initializer(instance); });
+        instance.__mobxDidRunLazyInitializers &&
+            instance.__mobxLazyInitializers.forEach(function (initializer) { return initializer(instance); });
     }
 }
 function quacksLikeADecorator(args) {
@@ -1046,7 +1098,7 @@ function quacksLikeADecorator(args) {
 }
 
 var actionFieldDecorator = createClassPropertyDecorator(function (target, key, value, args, originalDescriptor) {
-    var actionName = (args && args.length === 1) ? args[0] : (value.name || key || "<unnamed action>");
+    var actionName = args && args.length === 1 ? args[0] : value.name || key || "<unnamed action>";
     var wrappedAction = action(actionName, value);
     addHiddenProp(target, key, wrappedAction);
 }, function (key) {
@@ -1088,6 +1140,9 @@ function namedActionDecorator(name) {
             descriptor.configurable = true;
             return descriptor;
         }
+        if (descriptor !== undefined && descriptor.get !== undefined) {
+            throw new Error("[mobx] action is not expected to be used with getters");
+        }
         // bound instance methods
         return actionFieldDecorator(name).apply(this, arguments);
     };
@@ -1112,6 +1167,27 @@ function defineBoundAction(target, propertyName, fn) {
     addHiddenProp(target, propertyName, res);
 }
 
+function identityComparer(a, b) {
+    return a === b;
+}
+function structuralComparer(a, b) {
+    if (typeof a === "number" && typeof b === "number" && isNaN(a) && isNaN(b)) {
+        return true;
+    }
+    return deepEqual(a, b);
+}
+function defaultComparer(a, b) {
+    if (typeof a === "number" && typeof b === "number" && isNaN(a) && isNaN(b)) {
+        return true;
+    }
+    return identityComparer(a, b);
+}
+var comparer = {
+    identity: identityComparer,
+    structural: structuralComparer,
+    default: defaultComparer
+};
+
 function autorun(arg1, arg2, arg3) {
     var name, view, scope;
     if (typeof arg1 === "string") {
@@ -1120,7 +1196,7 @@ function autorun(arg1, arg2, arg3) {
         scope = arg3;
     }
     else {
-        name = arg1.name || ("Autorun@" + getNextId());
+        name = arg1.name || "Autorun@" + getNextId();
         view = arg1;
         scope = arg2;
     }
@@ -1146,7 +1222,7 @@ function when(arg1, arg2, arg3, arg4) {
         scope = arg4;
     }
     else {
-        name = ("When@" + getNextId());
+        name = "When@" + getNextId();
         predicate = arg1;
         effect = arg2;
         scope = arg3;
@@ -1170,7 +1246,7 @@ function autorunAsync(arg1, arg2, arg3, arg4) {
         scope = arg4;
     }
     else {
-        name = arg1.name || ("AutorunAsync@" + getNextId());
+        name = arg1.name || "AutorunAsync@" + getNextId();
         func = arg1;
         delay = arg2;
         scope = arg3;
@@ -1191,7 +1267,9 @@ function autorunAsync(arg1, arg2, arg3, arg4) {
             }, delay);
         }
     });
-    function reactionRunner() { func(r); }
+    function reactionRunner() {
+        func(r);
+    }
     r.schedule();
     return r.getDisposer();
 }
@@ -1209,17 +1287,22 @@ function reaction(expression, effect, arg3) {
     else {
         opts = {};
     }
-    opts.name = opts.name || expression.name || effect.name || ("Reaction@" + getNextId());
+    opts.name =
+        opts.name || expression.name || effect.name || "Reaction@" + getNextId();
     opts.fireImmediately = arg3 === true || opts.fireImmediately === true;
     opts.delay = opts.delay || 0;
     opts.compareStructural = opts.compareStructural || opts.struct || false;
+    // TODO: creates ugly spy events, use `effect = (r) => runInAction(opts.name, () => effect(r))` instead
     effect = action(opts.name, opts.context ? effect.bind(opts.context) : effect);
     if (opts.context) {
         expression = expression.bind(opts.context);
     }
     var firstTime = true;
     var isScheduled = false;
-    var nextValue;
+    var value;
+    var equals = opts.equals
+        ? opts.equals
+        : opts.compareStructural || opts.struct ? comparer.structural : comparer.default;
     var r = new Reaction(opts.name, function () {
         if (firstTime || opts.delay < 1) {
             reactionRunner();
@@ -1237,14 +1320,14 @@ function reaction(expression, effect, arg3) {
             return;
         var changed = false;
         r.track(function () {
-            var v = expression(r);
-            changed = valueDidChange(opts.compareStructural, nextValue, v);
-            nextValue = v;
+            var nextValue = expression(r);
+            changed = firstTime || !equals(value, nextValue);
+            value = nextValue;
         });
         if (firstTime && opts.fireImmediately)
-            effect(nextValue, r);
+            effect(value, r);
         if (!firstTime && changed === true)
-            effect(nextValue, r);
+            effect(value, r);
         if (firstTime)
             firstTime = false;
     }
@@ -1255,7 +1338,9 @@ function reaction(expression, effect, arg3) {
 /**
  * A node in the state dependency root that observes other nodes, and can be observed itself.
  *
- * ComputedValue will remember result of the computation for duration of a batch, or being observed
+ * ComputedValue will remember the result of the computation for the duration of the batch, or
+ * while being observed.
+ *
  * During this time it will recompute only when one of its direct dependencies changed,
  * but only when it is being accessed with `ComputedValue.get()`.
  *
@@ -1275,15 +1360,17 @@ var ComputedValue = (function () {
      *
      * The `name` property is for debug purposes only.
      *
-     * The `compareStructural` property indicates whether the return values should be compared structurally.
-     * Normally, a computed value will not notify an upstream observer if a newly produced value is strictly equal to the previously produced value.
-     * However, enabling compareStructural can be convenient if you always produce an new aggregated object and don't want to notify observers if it is structurally the same.
+     * The `equals` property specifies the comparer function to use to determine if a newly produced
+     * value differs from the previous value. Two comparers are provided in the library; `defaultComparer`
+     * compares based on identity comparison (===), and `structualComparer` deeply compares the structure.
+     * Structural comparison can be convenient if you always produce an new aggregated object and
+     * don't want to notify observers if it is structurally the same.
      * This is useful for working with vectors, mouse coordinates etc.
      */
-    function ComputedValue(derivation, scope, compareStructural, name, setter) {
+    function ComputedValue(derivation, scope, equals, name, setter) {
         this.derivation = derivation;
         this.scope = scope;
-        this.compareStructural = compareStructural;
+        this.equals = equals;
         this.dependenciesState = IDerivationState.NOT_TRACKING;
         this.observing = []; // nodes we are looking at. Our value depends on these nodes
         this.newObserving = null; // during tracking it's an array with new observed observers
@@ -1296,7 +1383,7 @@ var ComputedValue = (function () {
         this.lowestObserverState = IDerivationState.UP_TO_DATE;
         this.unboundDepsCount = 0;
         this.__mapid = "#" + getNextId();
-        this.value = undefined;
+        this.value = new CaughtException(null);
         this.isComputing = false; // to check for cycles
         this.isRunningSetter = false;
         this.name = name || "ComputedValue@" + getNextId();
@@ -1317,9 +1404,9 @@ var ComputedValue = (function () {
     ComputedValue.prototype.get = function () {
         invariant(!this.isComputing, "Cycle detected in computation " + this.name, this.derivation);
         if (globalState.inBatch === 0) {
-            // just for small optimization, can be droped for simplicity
-            // computed called outside of any mobx stuff. batch observing shuold be enough, don't need tracking
-            // because it will never be called again inside this batch
+            // This is an minor optimization which could be omitted to simplify the code
+            // The computedValue is accessed outside of any mobx stuff. Batch observing should be enough and don't need
+            // tracking as it will never be called again inside this batch.
             startBatch();
             if (shouldCompute(this))
                 this.value = this.computeValue(false);
@@ -1344,7 +1431,8 @@ var ComputedValue = (function () {
     };
     ComputedValue.prototype.set = function (value) {
         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?");
+            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);
@@ -1354,7 +1442,8 @@ var ComputedValue = (function () {
             }
         }
         else
-            invariant(false, "[ComputedValue '" + this.name + "'] It is not possible to assign a new value to a computed value.");
+            invariant(false, "[ComputedValue '" + this
+                .name + "'] It is not possible to assign a new value to a computed value.");
     };
     ComputedValue.prototype.trackAndCompute = function () {
         if (isSpyEnabled()) {
@@ -1365,8 +1454,10 @@ var ComputedValue = (function () {
             });
         }
         var oldValue = this.value;
-        var newValue = this.value = this.computeValue(true);
-        return isCaughtException(newValue) || valueDidChange(this.compareStructural, newValue, oldValue);
+        var newValue = (this.value = this.computeValue(true));
+        return (isCaughtException(oldValue) ||
+            isCaughtException(newValue) ||
+            !this.equals(oldValue, newValue));
     };
     ComputedValue.prototype.computeValue = function (track) {
         this.isComputing = true;
@@ -1387,7 +1478,6 @@ var ComputedValue = (function () {
         this.isComputing = false;
         return res;
     };
-    
     ComputedValue.prototype.observe = function (listener, fireImmediately) {
         var _this = this;
         var firstTime = true;
@@ -1417,14 +1507,20 @@ var ComputedValue = (function () {
     ComputedValue.prototype.valueOf = function () {
         return toPrimitive(this.get());
     };
-    
     ComputedValue.prototype.whyRun = function () {
         var isTracking = Boolean(globalState.trackingDerivation);
         var observing = unique(this.isComputing ? this.newObserving : this.observing).map(function (dep) { return dep.name; });
         var observers = unique(getObservers(this).map(function (dep) { return dep.name; }));
-        return ("\nWhyRun? computation '" + this.name + "':\n * Running because: " + (isTracking ? "[active] the value of this computation is needed by a reaction" : this.isComputing ? "[get] The value of this computed was requested outside a reaction" : "[idle] not running at the moment") + "\n" +
-            (this.dependenciesState === IDerivationState.NOT_TRACKING ? getMessage("m032") :
-                " * This computation will re-run if any of the following observables changes:\n    " + joinStrings(observing) + "\n    " + ((this.isComputing && isTracking) ? " (... or any observable accessed during the remainder of the current run)" : "") + "\n\t" + getMessage("m038") + "\n\n  * If the outcome of this computation changes, the following observers will be re-run:\n    " + joinStrings(observers) + "\n"));
+        return ("\nWhyRun? computation '" + this.name + "':\n * Running because: " + (isTracking
+            ? "[active] the value of this computation is needed by a reaction"
+            : this.isComputing
+                ? "[get] The value of this computed was requested outside a reaction"
+                : "[idle] not running at the moment") + "\n" +
+            (this.dependenciesState === IDerivationState.NOT_TRACKING
+                ? getMessage("m032")
+                : " * This computation will re-run if any of the following observables changes:\n    " + joinStrings(observing) + "\n    " + (this.isComputing && isTracking
+                    ? " (... or any observable accessed during the remainder of the current run)"
+                    : "") + "\n\t" + getMessage("m038") + "\n\n  * If the outcome of this computation changes, the following observers will be re-run:\n    " + joinStrings(observers) + "\n"));
     };
     return ComputedValue;
 }());
@@ -1440,10 +1536,10 @@ var ObservableObjectAdministration = (function () {
         this.interceptors = null;
     }
     /**
-        * Observes this object. Triggers for the events 'add', 'update' and 'delete'.
-        * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe
-        * for callback details
-        */
+     * Observes this object. Triggers for the events 'add', 'update' and 'delete'.
+     * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe
+     * for callback details
+     */
     ObservableObjectAdministration.prototype.observe = function (callback, fireImmediately) {
         invariant(fireImmediately !== true, "`observe` doesn't support the fire immediately property for observable objects.");
         return registerListener(this, callback);
@@ -1454,7 +1550,7 @@ var ObservableObjectAdministration = (function () {
     return ObservableObjectAdministration;
 }());
 function asObservableObject(target, name) {
-    if (isObservableObject(target))
+    if (isObservableObject(target) && target.hasOwnProperty("$mobx"))
         return target.$mobx;
     invariant(Object.isExtensible(target), getMessage("m035"));
     if (!isPlainObject(target))
@@ -1466,7 +1562,7 @@ function asObservableObject(target, name) {
     return adm;
 }
 function defineObservablePropertyFromDescriptor(adm, propName, descriptor, defaultEnhancer) {
-    if (adm.values[propName]) {
+    if (adm.values[propName] && !isComputedValue(adm.values[propName])) {
         // already observable property
         invariant("value" in descriptor, "The property " + propName + " in " + adm.name + " is already observable, cannot redefine it as computed property");
         adm.target[propName] = descriptor.value; // the property setter will make 'value' reactive if needed.
@@ -1494,7 +1590,7 @@ function defineObservablePropertyFromDescriptor(adm, propName, descriptor, defau
     }
     else {
         // get x() { return 3 } set x(v) { }
-        defineComputedProperty(adm, propName, descriptor.get, descriptor.set, false, true);
+        defineComputedProperty(adm, propName, descriptor.get, descriptor.set, comparer.default, true);
     }
 }
 function defineObservableProperty(adm, propName, newValue, enhancer) {
@@ -1510,15 +1606,15 @@ function defineObservableProperty(adm, propName, newValue, enhancer) {
             return;
         newValue = change.newValue;
     }
-    var observable = adm.values[propName] = new ObservableValue(newValue, enhancer, adm.name + "." + propName, false);
+    var observable = (adm.values[propName] = new ObservableValue(newValue, enhancer, adm.name + "." + propName, false));
     newValue = observable.value; // observableValue might have changed it
     Object.defineProperty(adm.target, propName, generateObservablePropConfig(propName));
     notifyPropertyAddition(adm, adm.target, propName, newValue);
 }
-function defineComputedProperty(adm, propName, getter, setter, compareStructural, asInstanceProperty) {
+function defineComputedProperty(adm, propName, getter, setter, equals, asInstanceProperty) {
     if (asInstanceProperty)
         assertPropertyConfigurable(adm.target, propName);
-    adm.values[propName] = new ComputedValue(getter, adm.target, compareStructural, adm.name + "." + propName, setter);
+    adm.values[propName] = new ComputedValue(getter, adm.target, equals, adm.name + "." + propName, setter);
     if (asInstanceProperty) {
         Object.defineProperty(adm.target, propName, generateComputedPropConfig(propName));
     }
@@ -1534,28 +1630,30 @@ function defineComputedPropertyFromComputedValue(adm, propName, computedValue) {
 var observablePropertyConfigs = {};
 var computedPropertyConfigs = {};
 function generateObservablePropConfig(propName) {
-    return observablePropertyConfigs[propName] || (observablePropertyConfigs[propName] = {
-        configurable: true,
-        enumerable: true,
-        get: function () {
-            return this.$mobx.values[propName].get();
-        },
-        set: function (v) {
-            setPropertyValue(this, propName, v);
-        }
-    });
+    return (observablePropertyConfigs[propName] ||
+        (observablePropertyConfigs[propName] = {
+            configurable: true,
+            enumerable: true,
+            get: function () {
+                return this.$mobx.values[propName].get();
+            },
+            set: function (v) {
+                setPropertyValue(this, propName, v);
+            }
+        }));
 }
 function generateComputedPropConfig(propName) {
-    return computedPropertyConfigs[propName] || (computedPropertyConfigs[propName] = {
-        configurable: true,
-        enumerable: false,
-        get: function () {
-            return this.$mobx.values[propName].get();
-        },
-        set: function (v) {
-            return this.$mobx.values[propName].set(v);
-        }
-    });
+    return (computedPropertyConfigs[propName] ||
+        (computedPropertyConfigs[propName] = {
+            configurable: true,
+            enumerable: false,
+            get: function () {
+                return this.$mobx.values[propName].get();
+            },
+            set: function (v) {
+                return this.$mobx.values[propName].set(v);
+            }
+        }));
 }
 function setPropertyValue(instance, name, newValue) {
     var adm = instance.$mobx;
@@ -1565,7 +1663,8 @@ function setPropertyValue(instance, name, newValue) {
         var change = interceptChange(adm, {
             type: "update",
             object: instance,
-            name: name, newValue: newValue
+            name: name,
+            newValue: newValue
         });
         if (!change)
             return;
@@ -1576,12 +1675,15 @@ function setPropertyValue(instance, name, newValue) {
     if (newValue !== UNCHANGED) {
         var notify = hasListeners(adm);
         var notifySpy = isSpyEnabled();
-        var change = notify || notifySpy ? {
-            type: "update",
-            object: instance,
-            oldValue: observable.value,
-            name: name, newValue: newValue
-        } : null;
+        var change = notify || notifySpy
+            ? {
+                type: "update",
+                object: instance,
+                oldValue: observable.value,
+                name: name,
+                newValue: newValue
+            }
+            : null;
         if (notifySpy)
             spyReportStart(change);
         observable.setNewValue(newValue);
@@ -1594,10 +1696,14 @@ function setPropertyValue(instance, name, newValue) {
 function notifyPropertyAddition(adm, object, name, newValue) {
     var notify = hasListeners(adm);
     var notifySpy = isSpyEnabled();
-    var change = notify || notifySpy ? {
-        type: "add",
-        object: object, name: name, newValue: newValue
-    } : null;
+    var change = notify || notifySpy
+        ? {
+            type: "add",
+            object: object,
+            name: name,
+            newValue: newValue
+        }
+        : null;
     if (notifySpy)
         spyReportStart(change);
     if (notify)
@@ -1616,10 +1722,10 @@ function isObservableObject(thing) {
 }
 
 /**
-    * Returns true if the provided value is reactive.
-    * @param value object, function or array
-    * @param propertyName if propertyName is specified, checkes whether value.propertyName is reactive.
-    */
+ * Returns true if the provided value is reactive.
+ * @param value object, function or array
+ * @param property if property is specified, checks whether value.property is reactive.
+ */
 function isObservable(value, property) {
     if (value === null || value === undefined)
         return false;
@@ -1633,7 +1739,11 @@ function isObservable(value, property) {
         return false;
     }
     // For first check, see #701
-    return isObservableObject(value) || !!value.$mobx || isAtom(value) || isReaction(value) || isComputedValue(value);
+    return (isObservableObject(value) ||
+        !!value.$mobx ||
+        isAtom(value) ||
+        isReaction(value) ||
+        isComputedValue(value));
 }
 
 function createDecoratorForEnhancer(enhancer) {
@@ -1645,7 +1755,8 @@ function createDecoratorForEnhancer(enhancer) {
         defineObservableProperty(adm, name, baseValue, enhancer);
     }, function (name) {
         var observable = this.$mobx.values[name];
-        if (observable === undefined)
+        if (observable === undefined // See #505
+        )
             return undefined;
         return observable.get();
     }, function (name, value) {
@@ -1670,7 +1781,7 @@ function extendShallowObservable(target) {
 function extendObservableHelper(target, defaultEnhancer, properties) {
     invariant(arguments.length >= 2, getMessage("m014"));
     invariant(typeof target === "object", getMessage("m015"));
-    invariant(!(isObservableMap(target)), getMessage("m016"));
+    invariant(!isObservableMap(target), getMessage("m016"));
     properties.forEach(function (propSet) {
         invariant(typeof propSet === "object", getMessage("m017"));
         invariant(!isObservable(propSet), getMessage("m018"));
@@ -1699,7 +1810,7 @@ var deepStructDecorator = createDecoratorForEnhancer(deepStructEnhancer);
 var refStructDecorator = createDecoratorForEnhancer(refStructEnhancer);
 /**
  * Turns an object, array or function into a reactive structure.
- * @param value the value which should become observable.
+ * @param v the value which should become observable.
  */
 function createObservable(v) {
     if (v === void 0) { v = undefined; }
@@ -1817,7 +1928,7 @@ var observable = createObservable;
 // ES6 class methods aren't enumerable, can't use Object.keys
 Object.getOwnPropertyNames(IObservableFactories.prototype)
     .filter(function (name) { return name !== "constructor"; })
-    .forEach(function (name) { return observable[name] = IObservableFactories.prototype[name]; });
+    .forEach(function (name) { return (observable[name] = IObservableFactories.prototype[name]); });
 observable.deep.struct = observable.struct;
 observable.ref.struct = function () {
     if (arguments.length < 2) {
@@ -1915,7 +2026,6 @@ function refStructEnhancer(v, oldValue, name) {
  */
 function transaction(action, thisArg) {
     if (thisArg === void 0) { thisArg = undefined; }
-    deprecated(getMessage("m023"));
     return runInTransaction.apply(undefined, arguments);
 }
 function runInTransaction(action, thisArg) {
@@ -1989,12 +2099,14 @@ var ObservableMap = (function () {
         if (this._has(key)) {
             var notifySpy = isSpyEnabled();
             var notify = hasListeners(this);
-            var change = notify || notifySpy ? {
-                type: "delete",
-                object: this,
-                oldValue: this._data[key].value,
-                name: key
-            } : null;
+            var change = notify || notifySpy
+                ? {
+                    type: "delete",
+                    object: this,
+                    oldValue: this._data[key].value,
+                    name: key
+                }
+                : null;
             if (notifySpy)
                 spyReportStart(change);
             runInTransaction(function () {
@@ -2029,12 +2141,15 @@ var ObservableMap = (function () {
         if (newValue !== UNCHANGED) {
             var notifySpy = isSpyEnabled();
             var notify = hasListeners(this);
-            var change = notify || notifySpy ? {
-                type: "update",
-                object: this,
-                oldValue: observable$$1.value,
-                name: name, newValue: newValue
-            } : null;
+            var change = notify || notifySpy
+                ? {
+                    type: "update",
+                    object: this,
+                    oldValue: observable$$1.value,
+                    name: name,
+                    newValue: newValue
+                }
+                : null;
             if (notifySpy)
                 spyReportStart(change);
             observable$$1.setNewValue(newValue);
@@ -2047,19 +2162,21 @@ var ObservableMap = (function () {
     ObservableMap.prototype._addValue = function (name, newValue) {
         var _this = this;
         runInTransaction(function () {
-            var observable$$1 = _this._data[name] = new ObservableValue(newValue, _this.enhancer, _this.name + "." + name, false);
+            var observable$$1 = (_this._data[name] = new ObservableValue(newValue, _this.enhancer, _this.name + "." + name, false));
             newValue = observable$$1.value; // value might have been changed
             _this._updateHasMapEntry(name, true);
             _this._keys.push(name);
         });
         var notifySpy = isSpyEnabled();
         var notify = hasListeners(this);
-        var change = notify || notifySpy ? {
-            type: "add",
-            object: this,
-            name: name,
-            newValue: newValue
-        } : null;
+        var change = notify || notifySpy
+            ? {
+                type: "add",
+                object: this,
+                name: name,
+                newValue: newValue
+            }
+            : null;
         if (notifySpy)
             spyReportStart(change);
         if (notify)
@@ -2139,12 +2256,12 @@ var ObservableMap = (function () {
     });
     /**
      * Returns a shallow non observable object clone of this map.
-     * Note that the values migth still be observable. For a deep clone use mobx.toJS.
+     * Note that the values might still be observable. For a deep clone use mobx.toJS.
      */
     ObservableMap.prototype.toJS = function () {
         var _this = this;
         var res = {};
-        this.keys().forEach(function (key) { return res[key] = _this.get(key); });
+        this.keys().forEach(function (key) { return (res[key] = _this.get(key)); });
         return res;
     };
     ObservableMap.prototype.toJSON = function () {
@@ -2164,7 +2281,10 @@ var ObservableMap = (function () {
     };
     ObservableMap.prototype.toString = function () {
         var _this = this;
-        return this.name + "[{ " + this.keys().map(function (key) { return key + ": " + ("" + _this.get(key)); }).join(", ") + " }]";
+        return (this.name +
+            "[{ " +
+            this.keys().map(function (key) { return key + ": " + ("" + _this.get(key)); }).join(", ") +
+            " }]");
     };
     /**
      * Observes this object. Triggers for the events 'add', 'update' and 'delete'.
@@ -2193,7 +2313,7 @@ var isObservableMap = createInstanceofPredicate("ObservableMap", ObservableMap);
 var EMPTY_ARRAY = [];
 Object.freeze(EMPTY_ARRAY);
 function getGlobal() {
-    return global;
+    return typeof window !== "undefined" ? window : global;
 }
 function getNextId() {
     return ++globalState.mobxGuid;
@@ -2245,7 +2365,9 @@ function joinStrings(things, limit, separator) {
     if (!things)
         return "";
     var sliced = things.slice(0, limit);
-    return "" + sliced.join(separator) + (things.length > limit ? " (... and " + (things.length - limit) + "more)" : "");
+    return "" + sliced.join(separator) + (things.length > limit
+        ? " (... and " + (things.length - limit) + "more)"
+        : "");
 }
 function isObject(value) {
     return value !== null && typeof value === "object";
@@ -2267,14 +2389,6 @@ function objectAssign() {
     }
     return res;
 }
-function valueDidChange(compareStructural, oldValue, newValue) {
-    if (typeof oldValue === 'number' && isNaN(oldValue)) {
-        return typeof newValue !== 'number' || !isNaN(newValue);
-    }
-    return compareStructural
-        ? !deepEqual(oldValue, newValue)
-        : oldValue !== newValue;
-}
 var prototypeHasOwnProperty = Object.prototype.hasOwnProperty;
 function hasOwnProperty(object, propName) {
     return prototypeHasOwnProperty.call(object, propName);
@@ -2395,7 +2509,7 @@ function primitiveSymbol() {
     return (typeof Symbol === "function" && Symbol.toPrimitive) || "@@toPrimitive";
 }
 function toPrimitive(value) {
-    return value === null ? null : typeof value === "object" ? ("" + value) : value;
+    return value === null ? null : typeof value === "object" ? "" + value : value;
 }
 
 /**
@@ -2471,7 +2585,32 @@ var MobXGlobals = (function () {
     return MobXGlobals;
 }());
 var globalState = new MobXGlobals();
+var shareGlobalStateCalled = false;
+var runInIsolationCalled = false;
+var warnedAboutMultipleInstances = false;
+{
+    var global_1 = getGlobal();
+    if (!global_1.__mobxInstanceCount) {
+        global_1.__mobxInstanceCount = 1;
+    }
+    else {
+        global_1.__mobxInstanceCount++;
+        setTimeout(function () {
+            if (!shareGlobalStateCalled && !runInIsolationCalled && !warnedAboutMultipleInstances) {
+                warnedAboutMultipleInstances = true;
+                console.warn("[mobx] Warning: there are multiple mobx instances active. This might lead to unexpected results. See https://github.com/mobxjs/mobx/issues/1082 for details.");
+            }
+        });
+    }
+}
+function isolateGlobalState() {
+    runInIsolationCalled = true;
+    getGlobal().__mobxInstanceCount--;
+}
 function shareGlobalState() {
+    // TODO: remove in 4.0; just use peer dependencies instead.
+    deprecated("Using `shareGlobalState` is not recommended, use peer dependencies instead. See https://github.com/mobxjs/mobx/issues/1082 for details.");
+    shareGlobalStateCalled = true;
     var global = getGlobal();
     var ownState = globalState;
     /**
@@ -2515,13 +2654,14 @@ function addObserver(observable, node) {
     // invariantObservers(observable);
     var l = observable.observers.length;
     if (l) {
+        // because object assignment is relatively expensive, let's not store data about index 0.
         observable.observersIndexes[node.__mapid] = l;
     }
     observable.observers[l] = node;
     if (observable.lowestObserverState > node.dependenciesState)
         observable.lowestObserverState = node.dependenciesState;
     // invariantObservers(observable);
-    // invariant(observable._observers.indexOf(node) !== -1, "INTERNAL ERROR didnt add node");
+    // invariant(observable._observers.indexOf(node) !== -1, "INTERNAL ERROR didn't add node");
 }
 function removeObserver(observable, node) {
     // invariant(globalState.inBatch > 0, "INTERNAL ERROR, remove should be called only inside batch");
@@ -2536,10 +2676,12 @@ function removeObserver(observable, node) {
         // deleting from _observersIndexes is straight forward, to delete from _observers, let's swap `node` with last element
         var list = observable.observers;
         var map = observable.observersIndexes;
-        var filler = list.pop(); // get last element, which should fill the place of `node`, so the array doesnt have holes
+        var filler = list.pop(); // get last element, which should fill the place of `node`, so the array doesn't have holes
         if (filler !== node) {
+            // otherwise node was the last element, which already got removed from array
             var index = map[node.__mapid] || 0; // getting index of `node`. this is the only place we actually use map.
             if (index) {
+                // map store all indexes but 0, see comment in `addObserver`
                 map[filler.__mapid] = index;
             }
             else {
@@ -2555,7 +2697,7 @@ function removeObserver(observable, node) {
 function queueForUnobservation(observable) {
     if (!observable.isPendingUnobservation) {
         // invariant(globalState.inBatch > 0, "INTERNAL ERROR, remove should be called only inside batch");
-        // invariant(observable._observers.length === 0, "INTERNAL ERROR, shuold only queue for unobservation unobserved observables");
+        // invariant(observable._observers.length === 0, "INTERNAL ERROR, should only queue for unobservation unobserved observables");
         observable.isPendingUnobservation = true;
         globalState.pendingUnobservations.push(observable);
     }
@@ -2636,7 +2778,8 @@ function propagateChangeConfirmed(observable) {
         var d = observers[i];
         if (d.dependenciesState === IDerivationState.POSSIBLY_STALE)
             d.dependenciesState = IDerivationState.STALE;
-        else if (d.dependenciesState === IDerivationState.UP_TO_DATE)
+        else if (d.dependenciesState === IDerivationState.UP_TO_DATE // this happens during computing of `d`, just keep lowestObserverState up to date.
+        )
             observable.lowestObserverState = IDerivationState.UP_TO_DATE;
     }
     // invariantLOS(observable, "confirmed end");
@@ -2675,8 +2818,8 @@ var IDerivationState;
     // 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";
-    // shallow dependency changed
-    // will need to recompute when it's needed
+    // 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 CaughtException = (function () {
@@ -2690,20 +2833,23 @@ function isCaughtException(e) {
     return e instanceof CaughtException;
 }
 /**
- * Finds out wether any dependency of derivation actually changed
- * If dependenciesState is 1 it will recalculate dependencies,
+ * 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 dependencies in the same order they were reported and stoping on first change
- * all recalculations are called only for ComputedValues that will be tracked anyway by derivation.
- * That is because we assume that if first x dependencies of derivation doesn't change
- * than derivation shuold run the same way up until accessing x-th dependency.
+ * 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.UP_TO_DATE:
+            return false;
         case IDerivationState.NOT_TRACKING:
-        case IDerivationState.STALE: return true;
+        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;
@@ -2777,12 +2923,11 @@ function trackDerivedFunction(derivation, f, context) {
 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 observing = (derivation.observing = derivation.newObserving);
     var lowestNewObservingDerivationState = IDerivationState.UP_TO_DATE;
-    derivation.newObserving = null; // newObserving shouldn't be needed outside tracking
     // Go through all new observables and check diffValue: (this list can contain duplicates):
-    //   0: first occurence, change to 1 and keep it
-    //   1: extra occurence, drop it
+    //   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];
@@ -2799,6 +2944,7 @@ function bindDependencies(derivation) {
         }
     }
     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
@@ -2820,8 +2966,8 @@ function bindDependencies(derivation) {
             addObserver(dep, derivation);
         }
     }
-    // Some new observed derivations might become stale during this derivation computation
-    // so say had no chance to propagate staleness (#916)
+    // 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();
@@ -2953,7 +3099,7 @@ var Reaction = (function () {
         var message = "[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: '" + this;
         var messageToUser = getMessage("m037");
         console.error(message || messageToUser /* latter will not be true, make sure uglify doesn't remove */, error);
-        /** If debugging brough you here, please, read the above message :-). Tnx! */
+        /** If debugging brought you here, please, read the above message :-). Tnx! */
         if (isSpyEnabled()) {
             spyReport({
                 type: "error",
@@ -2968,8 +3114,9 @@ var Reaction = (function () {
         if (!this.isDisposed) {
             this.isDisposed = true;
             if (!this._isRunning) {
+                // if disposed while running, clean up later. Maybe not optimal, but rare case
                 startBatch();
-                clearObserving(this); // if disposed while running, clean up later. Maybe not optimal, but rare case
+                clearObserving(this);
                 endBatch();
             }
         }
@@ -2985,7 +3132,11 @@ var Reaction = (function () {
     };
     Reaction.prototype.whyRun = function () {
         var observing = unique(this._isRunning ? this.newObserving : this.observing).map(function (dep) { return dep.name; });
-        return ("\nWhyRun? reaction '" + this.name + "':\n * Status: [" + (this.isDisposed ? "stopped" : this._isRunning ? "running" : this.isScheduled() ? "scheduled" : "idle") + "]\n * This reaction will re-run if any of the following observables changes:\n    " + joinStrings(observing) + "\n    " + ((this._isRunning) ? " (... or any observable accessed during the remainder of the current run)" : "") + "\n\t" + getMessage("m038") + "\n");
+        return "\nWhyRun? reaction '" + this.name + "':\n * Status: [" + (this.isDisposed
+            ? "stopped"
+            : this._isRunning ? "running" : this.isScheduled() ? "scheduled" : "idle") + "]\n * This reaction will re-run if any of the following observables changes:\n    " + joinStrings(observing) + "\n    " + (this._isRunning
+            ? " (... or any observable accessed during the remainder of the current run)"
+            : "") + "\n\t" + getMessage("m038") + "\n";
     };
     return Reaction;
 }());
@@ -3024,8 +3175,8 @@ function runReactionsHelper() {
     // we converge to no remaining reactions after a while.
     while (allReactions.length > 0) {
         if (++iterations === MAX_REACTION_ITERATIONS) {
-            console.error("Reaction doesn't converge to a stable state after " + MAX_REACTION_ITERATIONS + " iterations."
-                + (" Probably there is a cycle in the reactive function: " + allReactions[0]));
+            console.error("Reaction doesn't converge to a stable state after " + MAX_REACTION_ITERATIONS + " iterations." +
+                (" Probably there is a cycle in the reactive function: " + allReactions[0]));
             allReactions.splice(0); // clear reactions
         }
         var remainingReactions = allReactions.splice(0);
@@ -3057,28 +3208,29 @@ function asMap(data) {
     return observable.map(data || {});
 }
 
-function createComputedDecorator(compareStructural) {
+function createComputedDecorator(equals) {
     return createClassPropertyDecorator(function (target, name, _, __, originalDescriptor) {
         invariant(typeof originalDescriptor !== "undefined", getMessage("m009"));
         invariant(typeof originalDescriptor.get === "function", getMessage("m010"));
         var adm = asObservableObject(target, "");
-        defineComputedProperty(adm, name, originalDescriptor.get, originalDescriptor.set, compareStructural, false);
+        defineComputedProperty(adm, name, originalDescriptor.get, originalDescriptor.set, equals, false);
     }, function (name) {
         var observable = this.$mobx.values[name];
-        if (observable === undefined)
+        if (observable === undefined // See #505
+        )
             return undefined;
         return observable.get();
     }, function (name, value) {
         this.$mobx.values[name].set(value);
     }, false, false);
 }
-var computedDecorator = createComputedDecorator(false);
-var computedStructDecorator = createComputedDecorator(true);
+var computedDecorator = createComputedDecorator(comparer.default);
+var computedStructDecorator = createComputedDecorator(comparer.structural);
 /**
  * Decorator for class properties: @computed get value() { return expr; }.
  * For legacy purposes also invokable as ES5 observable created: `computed(() => expr)`;
  */
-var computed = (function computed(arg1, arg2, arg3) {
+var computed = function computed(arg1, arg2, arg3) {
     if (typeof arg2 === "string") {
         return computedDecorator.apply(null, arguments);
     }
@@ -3086,9 +3238,13 @@ var computed = (function computed(arg1, arg2, arg3) {
     invariant(arguments.length < 3, getMessage("m012"));
     var opts = typeof arg2 === "object" ? arg2 : {};
     opts.setter = typeof arg2 === "function" ? arg2 : opts.setter;
-    return new ComputedValue(arg1, opts.context, opts.compareStructural || opts.struct || false, opts.name || arg1.name || "", opts.setter);
-});
+    var equals = opts.equals
+        ? opts.equals
+        : opts.compareStructural || opts.struct ? comparer.structural : comparer.default;
+    return new ComputedValue(arg1, opts.context, equals, opts.name || arg1.name || "", opts.setter);
+};
 computed.struct = computedStructDecorator;
+computed.equals = createComputedDecorator;
 
 function getAtom(thing, property) {
     if (typeof thing === "object" && thing !== null) {
@@ -3191,19 +3347,19 @@ function interceptProperty(thing, property, handler) {
 }
 
 /**
-    * expr can be used to create temporarily views inside views.
-    * This can be improved to improve performance if a value changes often, but usually doesn't affect the outcome of an expression.
-    *
-    * In the following example the expression prevents that a component is rerender _each time_ the selection changes;
-    * instead it will only rerenders when the current todo is (de)selected.
-    *
-    * reactiveComponent((props) => {
-    *     const todo = props.todo;
-    *     const isSelected = mobx.expr(() => props.viewState.selection === todo);
-    *     return <div className={isSelected ? "todo todo-selected" : "todo"}>{todo.title}</div>
-    * });
-    *
-    */
+ * expr can be used to create temporarily views inside views.
+ * This can be improved to improve performance if a value changes often, but usually doesn't affect the outcome of an expression.
+ *
+ * In the following example the expression prevents that a component is rerender _each time_ the selection changes;
+ * instead it will only rerenders when the current todo is (de)selected.
+ *
+ * reactiveComponent((props) => {
+ *     const todo = props.todo;
+ *     const isSelected = mobx.expr(() => props.viewState.selection === todo);
+ *     return <div className={isSelected ? "todo todo-selected" : "todo"}>{todo.title}</div>
+ * });
+ *
+ */
 function expr(expr, scope) {
     if (!isComputingDerivation())
         console.warn(getMessage("m013"));
@@ -3245,7 +3401,7 @@ function toJS(source, detectCycles, __alreadySeen) {
         }
         if (isObservableMap(source)) {
             var res_1 = cache({});
-            source.forEach(function (value, key) { return res_1[key] = toJS(value, detectCycles, __alreadySeen); });
+            source.forEach(function (value, key) { return (res_1[key] = toJS(value, detectCycles, __alreadySeen)); });
             return res_1;
         }
         if (isObservableValue(source))
@@ -3265,7 +3421,7 @@ function createTransformer(transformer, onCleanup) {
     var Transformer = (function (_super) {
         __extends(Transformer, _super);
         function Transformer(sourceIdentifier, sourceObject) {
-            var _this = _super.call(this, function () { return transformer(sourceObject); }, undefined, false, "Transformer-" + transformer.name + "-" + sourceIdentifier, undefined) || this;
+            var _this = _super.call(this, function () { return transformer(sourceObject); }, undefined, comparer.default, "Transformer-" + transformer.name + "-" + sourceIdentifier, undefined) || this;
             _this.sourceIdentifier = sourceIdentifier;
             _this.sourceObject = sourceObject;
             return _this;
@@ -3294,7 +3450,7 @@ function createTransformer(transformer, onCleanup) {
     };
 }
 function getMemoizationId(object) {
-    if (typeof object === 'string' || typeof object === 'number')
+    if (typeof object === "string" || typeof object === "number")
         return object;
     if (object === null || typeof object !== "object")
         throw new Error("[mobx] transform expected some kind of object or primitive value, got: " + object);
@@ -3405,6 +3561,7 @@ var extras = {
     onReactionError: onReactionError,
     reserveArrayBuffer: reserveArrayBuffer,
     resetGlobalState: resetGlobalState,
+    isolateGlobalState: isolateGlobalState,
     shareGlobalState: shareGlobalState,
     spyReport: spyReport,
     spyReportEnd: spyReportEnd,
@@ -3414,31 +3571,45 @@ var extras = {
 var everything = {
     Reaction: Reaction,
     untracked: untracked,
-    Atom: Atom, BaseAtom: BaseAtom,
-    useStrict: useStrict, isStrictModeEnabled: isStrictModeEnabled,
+    Atom: Atom,
+    BaseAtom: BaseAtom,
+    useStrict: useStrict,
+    isStrictModeEnabled: isStrictModeEnabled,
     spy: spy,
-    asReference: asReference, asFlat: asFlat, asStructure: asStructure, asMap: asMap,
+    comparer: comparer,
+    asReference: asReference,
+    asFlat: asFlat,
+    asStructure: asStructure,
+    asMap: asMap,
     isModifierDescriptor: isModifierDescriptor,
     isObservableObject: isObservableObject,
     isBoxedObservable: isObservableValue,
     isObservableArray: isObservableArray,
-    ObservableMap: ObservableMap, isObservableMap: isObservableMap, map: map,
+    ObservableMap: ObservableMap,
+    isObservableMap: isObservableMap,
+    map: map,
     transaction: transaction,
     observable: observable,
     computed: computed,
     isObservable: isObservable,
     isComputed: isComputed,
-    extendObservable: extendObservable, extendShallowObservable: extendShallowObservable,
+    extendObservable: extendObservable,
+    extendShallowObservable: extendShallowObservable,
     observe: observe,
     intercept: intercept,
-    autorun: autorun, autorunAsync: autorunAsync, when: when, reaction: reaction,
-    action: action, isAction: isAction, runInAction: runInAction,
+    autorun: autorun,
+    autorunAsync: autorunAsync,
+    when: when,
+    reaction: reaction,
+    action: action,
+    isAction: isAction,
+    runInAction: runInAction,
     expr: expr,
     toJS: toJS,
     createTransformer: createTransformer,
     whyRun: whyRun,
     isArrayLike: isArrayLike,
-    extras: extras,
+    extras: extras
 };
 var warnedAboutDefaultExport = false;
 var _loop_1 = function (p) {
@@ -3447,9 +3618,9 @@ var _loop_1 = function (p) {
         get: function () {
             if (!warnedAboutDefaultExport) {
                 warnedAboutDefaultExport = true;
-                console.warn('Using default export (`import mobx from \'mobx\'`) is deprecated ' +
-                    'and won’t work in mobx@4.0.0\n' +
-                    'Use `import * as mobx from \'mobx\'` instead');
+                console.warn("Using default export (`import mobx from 'mobx'`) is deprecated " +
+                    "and won’t work in mobx@4.0.0\n" +
+                    "Use `import * as mobx from 'mobx'` instead");
             }
             return val;
         }
@@ -3462,4 +3633,4 @@ if (typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__ === "object") {
     __MOBX_DEVTOOLS_GLOBAL_HOOK__.injectMobx({ spy: spy, extras: extras });
 }
 
-export { extras, Reaction, untracked, IDerivationState, Atom, BaseAtom, useStrict, isStrictModeEnabled, spy, asReference, asFlat, asStructure, asMap, isModifierDescriptor, isObservableObject, isObservableValue as isBoxedObservable, isObservableArray, ObservableMap, isObservableMap, map, transaction, observable, IObservableFactories, computed, isObservable, isComputed, extendObservable, extendShallowObservable, observe, intercept, autorun, autorunAsync, when, reaction, action, isAction, runInAction, expr, toJS, createTransformer, whyRun, isArrayLike };export default everything;
+export { extras, Reaction, untracked, IDerivationState, Atom, BaseAtom, useStrict, isStrictModeEnabled, spy, comparer, asReference, asFlat, asStructure, asMap, isModifierDescriptor, isObservableObject, isObservableValue as isBoxedObservable, isObservableArray, ObservableMap, isObservableMap, map, transaction, observable, IObservableFactories, computed, isObservable, isComputed, extendObservable, extendShallowObservable, observe, intercept, autorun, autorunAsync, when, reaction, action, isAction, runInAction, expr, toJS, createTransformer, whyRun, isArrayLike };export default everything;