mobx 7.0.1 → 7.0.2

package/dist/mobx.esm.js

@@ -1,3 +1,5 @@
+const __MOBX_DEV__ = process.env.NODE_ENV !== "production";
+
 const niceErrors = {
   0: `Invalid value for configuration 'enforceActions', expected 'never', 'always' or 'observed'`,
   1(annotationType, key) {
@@ -84,9 +86,9 @@ const niceErrors = {
     return `'${annotationType}' can only be used with 'makeObservable'`;
   }
 };
-const errors = process.env.NODE_ENV !== "production" ? niceErrors : {};
+const errors = __MOBX_DEV__ ? niceErrors : {};
 function die(error, ...args) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     let e = typeof error === "string" ? error : errors[error];
     if (typeof e === "function") e = e.apply(null, args);
     throw new Error(`[MobX] ${e}`);
@@ -246,7 +248,7 @@ function setFlag(flags, mask, newValue) {
 }
 
 function assert20223DecoratorType(context, types) {
-  if (process.env.NODE_ENV !== "production" && !types.includes(context.kind)) {
+  if (__MOBX_DEV__ && !types.includes(context.kind)) {
     die(`The decorator applied to '${String(context.name)}' cannot be used on a ${context.kind} element`);
   }
 }
@@ -257,7 +259,7 @@ class Atom {
    * Create a new atom. For debugging purposes it is recommended to give it a name.
    * The onBecomeObserved and onBecomeUnobserved callbacks can be used for resource management.
    */
-  constructor(name_ = process.env.NODE_ENV !== "production" ? "Atom@" + getNextId() : "Atom") {
+  constructor(name_ = __MOBX_DEV__ ? "Atom@" + getNextId() : "Atom") {
     this.name_ = void 0;
     this.flags_ = 0b000;
     // Allocated lazily on first observer to save memory.
@@ -412,7 +414,7 @@ function shallowEnhancer(v, _, name) {
       deep: false
     });
   }
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     die("The shallow modifier / decorator can only used in combination with arrays, objects, maps and sets");
   }
 }
@@ -421,7 +423,7 @@ function referenceEnhancer(newValue) {
   return newValue;
 }
 function refStructEnhancer(v, oldValue) {
-  if (process.env.NODE_ENV !== "production" && isObservable(v)) {
+  if (__MOBX_DEV__ && isObservable(v)) {
     die(`observable.struct should not be used with observable values`);
   }
   if (deepEqual(v, oldValue)) {
@@ -441,11 +443,11 @@ function isOverride(annotation) {
 }
 function make_$6(adm, key) {
   // Must not be plain object
-  if (process.env.NODE_ENV !== "production" && adm.isPlainObject_) {
+  if (__MOBX_DEV__ && adm.isPlainObject_) {
     die(`Cannot apply '${this.annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${this.annotationType_}' cannot be used on plain objects.`);
   }
   // Must override something
-  if (process.env.NODE_ENV !== "production" && !hasProp(adm.appliedAnnotations_, key)) {
+  if (__MOBX_DEV__ && !hasProp(adm.appliedAnnotations_, key)) {
     die(`'${adm.name_}.${key.toString()}' is annotated with '${this.annotationType_}', ` + `but no such annotated member was found on prototype.`);
   }
   return 0 /* MakeResult.Cancel */;
@@ -487,7 +489,7 @@ function extend_$4(adm, key, descriptor, proxyTrap) {
   return adm.defineProperty_(key, actionDescriptor, proxyTrap);
 }
 function decorateAction20223_(annotation, mthd, context) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     assert20223DecoratorType(context, ["method", "field"]);
   }
   const {
@@ -536,7 +538,7 @@ function assertActionDescriptor(adm, {
 }, key, {
   value
 }) {
-  if (process.env.NODE_ENV !== "production" && !isFunction(value)) {
+  if (__MOBX_DEV__ && !isFunction(value)) {
     die(`Cannot apply '${annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${annotationType_}' can only be used on properties with a function value.`);
   }
 }
@@ -604,7 +606,7 @@ function extend_$3(adm, key, descriptor, proxyTrap) {
 }
 function decorateFlow20223_(annotation, mthd, context) {
   var _annotation$options_;
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     assert20223DecoratorType(context, ["method"]);
   }
   const {
@@ -629,7 +631,7 @@ function assertFlowDescriptor(adm, {
 }, key, {
   value
 }) {
-  if (process.env.NODE_ENV !== "production" && !isFunction(value)) {
+  if (__MOBX_DEV__ && !isFunction(value)) {
     die(`Cannot apply '${annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${annotationType_}' can only be used on properties with a generator function value.`);
   }
 }
@@ -683,7 +685,7 @@ function extend_$2(adm, key, descriptor, proxyTrap) {
   }), proxyTrap);
 }
 function decorateComputed20223_(annotation, get, context) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     assert20223DecoratorType(context, ["getter"]);
   }
   const ann = annotation;
@@ -700,7 +702,7 @@ function decorateComputed20223_(annotation, get, context) {
       get,
       context: target
     });
-    options.name || (options.name = process.env.NODE_ENV !== "production" ? `${adm.name_}.${key.toString()}` : `ObservableObject.${key.toString()}`);
+    options.name || (options.name = __MOBX_DEV__ ? `${adm.name_}.${key.toString()}` : `ObservableObject.${key.toString()}`);
     return new ComputedValue(options);
   }
   addInitializer(function () {
@@ -734,7 +736,7 @@ function assertComputedDescriptor(adm, {
 }, key, {
   get
 }) {
-  if (process.env.NODE_ENV !== "production" && !get) {
+  if (__MOBX_DEV__ && !get) {
     die(`Cannot apply '${annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${annotationType_}' can only be used on getter(+setter) properties.`);
   }
 }
@@ -756,7 +758,7 @@ function extend_$1(adm, key, descriptor, proxyTrap) {
   return adm.defineObservableProperty_(key, descriptor.value, (_this$options_$enhanc = (_this$options_ = this.options_) == null ? void 0 : _this$options_.enhancer_) != null ? _this$options_$enhanc : deepEnhancer, proxyTrap);
 }
 function decorateObservable20223_(annotation, desc, context) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (context.kind === "field") {
       throw die(`Please use \`@observable accessor ${String(context.name)}\` instead of \`@observable ${String(context.name)}\``);
     }
@@ -778,7 +780,7 @@ function decorateObservable20223_(annotation, desc, context) {
     const adm = asObservableObject(target)[$mobx];
     ((_adm$lazyObservableKe = adm.lazyObservableKeys_) != null ? _adm$lazyObservableKe : adm.lazyObservableKeys_ = new Map()).set(name, () => {
       var _ann$options_$enhance, _ann$options_;
-      return new ObservableValue(value, (_ann$options_$enhance = (_ann$options_ = ann.options_) == null ? void 0 : _ann$options_.enhancer_) != null ? _ann$options_$enhance : deepEnhancer, process.env.NODE_ENV !== "production" ? `${adm.name_}.${name.toString()}` : `ObservableObject.${name.toString()}`, false);
+      return new ObservableValue(value, (_ann$options_$enhance = (_ann$options_ = ann.options_) == null ? void 0 : _ann$options_.enhancer_) != null ? _ann$options_$enhance : deepEnhancer, __MOBX_DEV__ ? `${adm.name_}.${name.toString()}` : `ObservableObject.${name.toString()}`, false);
     });
     return adm;
   }
@@ -802,7 +804,7 @@ function decorateObservable20223_(annotation, desc, context) {
 function assertObservableDescriptor(adm, {
   annotationType_
 }, key, descriptor) {
-  if (process.env.NODE_ENV !== "production" && !("value" in descriptor)) {
+  if (__MOBX_DEV__ && !("value" in descriptor)) {
     die(`Cannot apply '${annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${annotationType_}' cannot be used on getter/setter properties`);
   }
 }
@@ -893,7 +895,7 @@ function createDecoratorAnnotation(annotation, decorate) {
     if (context && typeof context.kind === "string") {
       return decorate(annotation, value, context);
     }
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       die(`Invalid arguments for \`${annotation.annotationType_}\``);
     }
     return undefined;
@@ -1021,7 +1023,7 @@ const computed = function computed(arg1, arg2) {
     return createComputedDecoratorAnnotation(createComputedAnnotation(COMPUTED, arg1));
   }
   // computed(expr, options?)
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isFunction(arg1)) {
       die("First argument to `computed` should be an expression.");
     }
@@ -1050,7 +1052,7 @@ const tmpNameDescriptor = {
   enumerable: false
 };
 function createAction(actionName, fn, autoAction = false, ref) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isFunction(fn)) {
       die("`action` can only be invoked on functions");
     }
@@ -1083,7 +1085,7 @@ function executeAction(actionName, canRunAsDerivation, fn, scope, args) {
 function _startAction(actionName, canRunAsDerivation,
 // true for autoAction
 scope, args) {
-  const notifySpy_ = process.env.NODE_ENV !== "production" && isSpyEnabled() && !!actionName;
+  const notifySpy_ = __MOBX_DEV__ && isSpyEnabled() && !!actionName;
   let startTime_ = 0;
   if (notifySpy_) {
     startTime_ = Date.now();
@@ -1101,12 +1103,12 @@ scope, args) {
   let prevAllowStateChanges_ = globalState.allowStateChanges; // by default preserve previous allow
   if (runAsAction) {
     untrackedStart();
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       prevAllowStateChanges_ = allowStateChangesStart(true);
     }
   }
   const prevAllowStateReads_ = globalState.allowStateReads;
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     allowStateReadsStart(true);
   }
   const runInfo = {
@@ -1130,7 +1132,7 @@ function _endAction(runInfo) {
   if (runInfo.error_ !== undefined) {
     globalState.suppressReactionErrors = true;
   }
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     allowStateChangesEnd(runInfo.prevAllowStateChanges_);
     allowStateReadsEnd(runInfo.prevAllowStateReads_);
   }
@@ -1138,7 +1140,7 @@ function _endAction(runInfo) {
   if (runInfo.runAsAction_) {
     untrackedEnd(runInfo.prevDerivation_);
   }
-  if (process.env.NODE_ENV !== "production" && runInfo.notifySpy_) {
+  if (__MOBX_DEV__ && runInfo.notifySpy_) {
     spyReportEnd({
       time: Date.now() - runInfo.startTime_
     });
@@ -1164,7 +1166,7 @@ function allowStateChangesEnd(prev) {
 
 const CREATE = "create";
 class ObservableValue extends Atom {
-  constructor(value, enhancer_, name_ = process.env.NODE_ENV !== "production" ? "ObservableValue@" + getNextId() : "ObservableValue", notifySpy = true, equals_ = compareDefault) {
+  constructor(value, enhancer_, name_ = __MOBX_DEV__ ? "ObservableValue@" + getNextId() : "ObservableValue", notifySpy = true, equals_ = compareDefault) {
     super(name_);
     this.enhancer_ = void 0;
     this.name_ = void 0;
@@ -1178,7 +1180,7 @@ class ObservableValue extends Atom {
     this.name_ = name_;
     this.equals_ = equals_;
     this.value_ = enhancer_(value, undefined, name_);
-    if (process.env.NODE_ENV !== "production" && notifySpy && isSpyEnabled()) {
+    if (__MOBX_DEV__ && notifySpy && isSpyEnabled()) {
       var _this$value_;
       // only notify spy if this is a stand-alone observable
       spyReport({
@@ -1200,8 +1202,8 @@ class ObservableValue extends Atom {
     const oldValue = this.value_;
     newValue = this.prepareNewValue_(newValue);
     if (newValue !== globalState.UNCHANGED) {
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart({
           type: UPDATE,
           object: this,
@@ -1212,7 +1214,7 @@ class ObservableValue extends Atom {
         });
       }
       this.setNewValue_(newValue);
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
     }
@@ -1310,9 +1312,9 @@ class ComputedValue {
       die(31);
     }
     this.derivation = options.get;
-    this.name_ = options.name || (process.env.NODE_ENV !== "production" ? "ComputedValue@" + getNextId() : "ComputedValue");
+    this.name_ = options.name || (__MOBX_DEV__ ? "ComputedValue@" + getNextId() : "ComputedValue");
     if (options.set) {
-      this.setter_ = createAction(process.env.NODE_ENV !== "production" ? this.name_ + "-setter" : "ComputedValue-setter", options.set);
+      this.setter_ = createAction(__MOBX_DEV__ ? this.name_ + "-setter" : "ComputedValue-setter", options.set);
     }
     this.equals_ = options.equals || compareDefault;
     this.scope_ = options.context;
@@ -1427,7 +1429,7 @@ class ComputedValue {
     const changed = wasSuspended || isCaughtException(oldValue) || isCaughtException(newValue) || !this.equals_(oldValue, newValue);
     if (changed) {
       this.value_ = newValue;
-      if (process.env.NODE_ENV !== "production" && isSpyEnabled()) {
+      if (__MOBX_DEV__ && isSpyEnabled()) {
         spyReport({
           observableKind: "computed",
           debugObjectName: this.name_,
@@ -1443,7 +1445,7 @@ class ComputedValue {
   computeValue_(track) {
     this.isComputing = true;
     // don't allow state changes during computation
-    const prev = process.env.NODE_ENV !== "production" ? allowStateChangesStart(false) : false;
+    const prev = __MOBX_DEV__ ? allowStateChangesStart(false) : false;
     let res;
     if (track) {
       res = trackDerivedFunction(this, this.derivation, this.scope_);
@@ -1458,7 +1460,7 @@ class ComputedValue {
         }
       }
     }
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       allowStateChangesEnd(prev);
     }
     this.isComputing = false;
@@ -1471,7 +1473,7 @@ class ComputedValue {
     }
   }
   warnAboutUntrackedRead_() {
-    if (!(process.env.NODE_ENV !== "production")) {
+    if (!__MOBX_DEV__) {
       return;
     }
     if (typeof this.requiresReaction_ === "boolean" ? this.requiresReaction_ : globalState.computedRequiresReaction) {
@@ -1521,7 +1523,7 @@ function shouldCompute(derivation) {
     case 1 /* IDerivationState_.POSSIBLY_STALE_ */:
       {
         // state propagation can occur outside of action/reactive context #2195
-        const prevAllowStateReads = process.env.NODE_ENV !== "production" ? allowStateReadsStart(true) : true;
+        const prevAllowStateReads = __MOBX_DEV__ ? allowStateReadsStart(true) : true;
         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;
@@ -1536,7 +1538,7 @@ function shouldCompute(derivation) {
               } catch (e) {
                 // we are not interested in the value *or* exception at this moment, but if there is one, notify all
                 untrackedEnd(prevUntracked);
-                if (process.env.NODE_ENV !== "production") {
+                if (__MOBX_DEV__) {
                   allowStateReadsEnd(prevAllowStateReads);
                 }
                 return true;
@@ -1547,7 +1549,7 @@ function shouldCompute(derivation) {
             // invariantShouldCompute(derivation)
             if (derivation.dependenciesState_ === 2 /* IDerivationState_.STALE_ */) {
               untrackedEnd(prevUntracked);
-              if (process.env.NODE_ENV !== "production") {
+              if (__MOBX_DEV__) {
                 allowStateReadsEnd(prevAllowStateReads);
               }
               return true;
@@ -1556,7 +1558,7 @@ function shouldCompute(derivation) {
         }
         changeDependenciesStateTo0(derivation);
         untrackedEnd(prevUntracked);
-        if (process.env.NODE_ENV !== "production") {
+        if (__MOBX_DEV__) {
           allowStateReadsEnd(prevAllowStateReads);
         }
         return false;
@@ -1567,7 +1569,7 @@ function isComputingDerivation() {
   return globalState.trackingDerivation !== null; // filter out actions inside computations
 }
 function checkIfStateModificationsAreAllowed(atom) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   }
   const hasObservers = !!atom.observers_ && atom.observers_.size > 0;
@@ -1577,7 +1579,7 @@ function checkIfStateModificationsAreAllowed(atom) {
   }
 }
 function checkIfStateReadsAreAllowed(observable) {
-  if (process.env.NODE_ENV !== "production" && !globalState.allowStateReads && globalState.observableRequiresReaction) {
+  if (__MOBX_DEV__ && !globalState.allowStateReads && globalState.observableRequiresReaction) {
     console.warn(`[mobx] Observable '${observable.name_}' being read outside a reactive context.`);
   }
 }
@@ -1587,7 +1589,7 @@ function checkIfStateReadsAreAllowed(observable) {
  * as observer of any of the accessed observables.
  */
 function trackDerivedFunction(derivation, f, context) {
-  const prevAllowStateReads = process.env.NODE_ENV !== "production" ? allowStateReadsStart(true) : true;
+  const prevAllowStateReads = __MOBX_DEV__ ? allowStateReadsStart(true) : true;
   changeDependenciesStateTo0(derivation);
   // Preallocate array; will be trimmed by bindDependencies.
   derivation.newObserving_ = new Array(
@@ -1613,13 +1615,13 @@ function trackDerivedFunction(derivation, f, context) {
   globalState.trackingDerivation = prevTracking;
   bindDependencies(derivation);
   warnAboutDerivationWithoutDependencies(derivation);
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     allowStateReadsEnd(prevAllowStateReads);
   }
   return result;
 }
 function warnAboutDerivationWithoutDependencies(derivation) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   }
   if (derivation.observing_.length !== 0) {
@@ -2136,7 +2138,7 @@ function propagateMaybeChanged(observable) {
 }
 
 class Reaction {
-  constructor(name_ = process.env.NODE_ENV !== "production" ? "Reaction@" + getNextId() : "Reaction", onInvalidate_, errorHandler_, requiresObservable_) {
+  constructor(name_ = __MOBX_DEV__ ? "Reaction@" + getNextId() : "Reaction", onInvalidate_, errorHandler_, requiresObservable_) {
     this.name_ = void 0;
     this.onInvalidate_ = void 0;
     this.errorHandler_ = void 0;
@@ -2206,7 +2208,7 @@ class Reaction {
         this.isTrackPending = true;
         try {
           this.onInvalidate_();
-          if (process.env.NODE_ENV !== "production" && this.isTrackPending && isSpyEnabled()) {
+          if (__MOBX_DEV__ && this.isTrackPending && isSpyEnabled()) {
             // onInvalidate didn't trigger track right away..
             spyReport({
               name: this.name_,
@@ -2227,9 +2229,9 @@ class Reaction {
       // console.warn("Reaction already disposed") // Note: Not a warning / error in mobx 4 either
     }
     startBatch();
-    const notify = process.env.NODE_ENV !== "production" && isSpyEnabled();
+    const notify = __MOBX_DEV__ && isSpyEnabled();
     let startTime;
-    if (process.env.NODE_ENV !== "production" && notify) {
+    if (__MOBX_DEV__ && notify) {
       startTime = Date.now();
       spyReportStart({
         name: this.name_,
@@ -2250,7 +2252,7 @@ class Reaction {
     if (isCaughtException(result)) {
       this.reportExceptionInDerivation_(result.cause);
     }
-    if (process.env.NODE_ENV !== "production" && notify) {
+    if (__MOBX_DEV__ && notify) {
       spyReportEnd({
         time: Date.now() - startTime
       });
@@ -2265,14 +2267,14 @@ class Reaction {
     if (globalState.disableErrorBoundaries) {
       throw error;
     }
-    const message = process.env.NODE_ENV !== "production" ? `[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: '${this}'` : `[mobx] uncaught error in '${this}'`;
+    const message = __MOBX_DEV__ ? `[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: '${this}'` : `[mobx] uncaught error in '${this}'`;
     if (!globalState.suppressReactionErrors) {
       console.error(message, error);
       /** If debugging brought you here, please, read the above message :-). Tnx! */
-    } else if (process.env.NODE_ENV !== "production") {
+    } else if (__MOBX_DEV__) {
       console.warn(`[mobx] (error in reaction '${this.name_}' suppressed, fix error of causing action below)`);
     } // prettier-ignore
-    if (process.env.NODE_ENV !== "production" && isSpyEnabled()) {
+    if (__MOBX_DEV__ && isSpyEnabled()) {
       spyReport({
         type: "error",
         name: this.name_,
@@ -2341,7 +2343,7 @@ function runReactionsHelper() {
   // we converge to no remaining reactions after a while.
   while (allReactions.length > 0) {
     if (++iterations === MAX_REACTION_ITERATIONS) {
-      console.error(process.env.NODE_ENV !== "production" ? `Reaction doesn't converge to a stable state after ${MAX_REACTION_ITERATIONS} iterations.` + ` Probably there is a cycle in the reactive function: ${allReactions[0]}` : `[mobx] cycle in reaction: ${allReactions[0]}`);
+      console.error(__MOBX_DEV__ ? `Reaction doesn't converge to a stable state after ${MAX_REACTION_ITERATIONS} iterations.` + ` Probably there is a cycle in the reactive function: ${allReactions[0]}` : `[mobx] cycle in reaction: ${allReactions[0]}`);
       allReactions.splice(0); // clear reactions
     }
     let remainingReactions = allReactions.splice(0);
@@ -2358,10 +2360,10 @@ function setReactionScheduler(fn) {
 }
 
 function isSpyEnabled() {
-  return process.env.NODE_ENV !== "production" && !!globalState.spyListeners.length;
+  return __MOBX_DEV__ && !!globalState.spyListeners.length;
 }
 function spyReport(event) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   } // dead code elimination can do the rest
   if (!globalState.spyListeners.length) {
@@ -2373,7 +2375,7 @@ function spyReport(event) {
   }
 }
 function spyReportStart(event) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   }
   const change = assign({}, event, {
@@ -2386,7 +2388,7 @@ const END_EVENT = {
   spyReportEnd: true
 };
 function spyReportEnd(change) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   }
   if (change) {
@@ -2399,7 +2401,7 @@ function spyReportEnd(change) {
   }
 }
 function spy(listener) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     console.warn(`[mobx.spy] Is a no-op in production builds`);
     return function () {};
   } else {
@@ -2449,7 +2451,7 @@ function createActionFactory(autoAction) {
         autoAction
       }));
     }
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       die("Invalid arguments for `action`");
     }
   };
@@ -2476,7 +2478,7 @@ function isAction(thing) {
  */
 function autorun(view, opts = EMPTY_OBJECT) {
   var _opts$name, _opts$signal;
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isFunction(view)) {
       die("Autorun expects a function as first argument");
     }
@@ -2484,7 +2486,7 @@ function autorun(view, opts = EMPTY_OBJECT) {
       die("Autorun does not accept actions since actions are untrackable");
     }
   }
-  const name = (_opts$name = opts == null ? void 0 : opts.name) != null ? _opts$name : process.env.NODE_ENV !== "production" ? view.name || "Autorun@" + getNextId() : "Autorun";
+  const name = (_opts$name = opts == null ? void 0 : opts.name) != null ? _opts$name : __MOBX_DEV__ ? view.name || "Autorun@" + getNextId() : "Autorun";
   const runSync = !opts.scheduler && !opts.delay;
   let reaction;
   if (runSync) {
@@ -2522,7 +2524,7 @@ function createSchedulerFromOptions(opts) {
 }
 function reaction(expression, effect, opts = EMPTY_OBJECT) {
   var _opts$name2, _opts$signal2;
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isFunction(expression) || !isFunction(effect)) {
       die("First and second argument to reaction should be functions");
     }
@@ -2530,7 +2532,7 @@ function reaction(expression, effect, opts = EMPTY_OBJECT) {
       die("Third argument of reactions should be an object");
     }
   }
-  const name = (_opts$name2 = opts.name) != null ? _opts$name2 : process.env.NODE_ENV !== "production" ? "Reaction@" + getNextId() : "Reaction";
+  const name = (_opts$name2 = opts.name) != null ? _opts$name2 : __MOBX_DEV__ ? "Reaction@" + getNextId() : "Reaction";
   const effectAction = action(name, opts.onError ? wrapErrorHandler(opts.onError, effect) : effect);
   const runSync = !opts.scheduler && !opts.delay;
   const scheduler = createSchedulerFromOptions(opts);
@@ -2628,7 +2630,7 @@ function configure(options) {
     }
   });
   globalState.allowStateReads = !globalState.observableRequiresReaction;
-  if (process.env.NODE_ENV !== "production" && globalState.disableErrorBoundaries === true) {
+  if (__MOBX_DEV__ && globalState.disableErrorBoundaries === true) {
     console.warn("WARNING: Debug feature only. MobX will NOT recover from errors when `disableErrorBoundaries` is enabled.");
   }
   if (options.reactionScheduler) {
@@ -2637,7 +2639,7 @@ function configure(options) {
 }
 
 function extendObservable(target, properties, annotations, options) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (arguments.length > 4) {
       die("'extendObservable' expected 2-4 arguments");
     }
@@ -2721,17 +2723,17 @@ const flow = /*#__PURE__*/assign(function flow(arg1, arg2) {
     return decorateFlow20223_(flowAnnotation, arg1, arg2);
   }
   // flow(fn)
-  if (process.env.NODE_ENV !== "production" && arguments.length !== 1) {
+  if (__MOBX_DEV__ && arguments.length !== 1) {
     die(`Flow expects single argument with generator function`);
   }
   const generator = arg1;
-  const name = generator.name || (process.env.NODE_ENV !== "production" ? "<unnamed flow>" : "flow");
+  const name = generator.name || (__MOBX_DEV__ ? "<unnamed flow>" : "flow");
   // Implementation based on https://github.com/tj/co/blob/master/index.js
   const res = function res() {
     const ctx = this;
     const args = arguments;
-    const runId = process.env.NODE_ENV !== "production" ? ++generatorId : 0;
-    const gen = action(process.env.NODE_ENV !== "production" ? `${name} - runid: ${runId} - init` : name, generator).apply(ctx, args);
+    const runId = __MOBX_DEV__ ? ++generatorId : 0;
+    const gen = action(__MOBX_DEV__ ? `${name} - runid: ${runId} - init` : name, generator).apply(ctx, args);
     let rejector;
     let pendingPromise = undefined;
     const promise = new Promise(function (resolve, reject) {
@@ -2741,7 +2743,7 @@ const flow = /*#__PURE__*/assign(function flow(arg1, arg2) {
         pendingPromise = undefined;
         let ret;
         try {
-          ret = action(process.env.NODE_ENV !== "production" ? `${name} - runid: ${runId} - yield ${stepId++}` : name, gen.next).call(gen, res);
+          ret = action(__MOBX_DEV__ ? `${name} - runid: ${runId} - yield ${stepId++}` : name, gen.next).call(gen, res);
         } catch (e) {
           return reject(e);
         }
@@ -2751,7 +2753,7 @@ const flow = /*#__PURE__*/assign(function flow(arg1, arg2) {
         pendingPromise = undefined;
         let ret;
         try {
-          ret = action(process.env.NODE_ENV !== "production" ? `${name} - runid: ${runId} - yield ${stepId++}` : name, gen.throw).call(gen, err);
+          ret = action(__MOBX_DEV__ ? `${name} - runid: ${runId} - yield ${stepId++}` : name, gen.throw).call(gen, err);
         } catch (e) {
           return reject(e);
         }
@@ -2771,7 +2773,7 @@ const flow = /*#__PURE__*/assign(function flow(arg1, arg2) {
       }
       onFulfilled(undefined); // kick off the process
     });
-    const cancelActionName = process.env.NODE_ENV !== "production" ? `${name} - runid: ${runId} - cancel` : name;
+    const cancelActionName = __MOBX_DEV__ ? `${name} - runid: ${runId} - cancel` : name;
     promise.cancel = action(cancelActionName, function () {
       try {
         if (pendingPromise) {
@@ -2812,14 +2814,14 @@ function interceptReads(thing, propOrHandler, handler) {
   if (isObservableMap(thing) || isObservableArray(thing) || isObservableValue(thing)) {
     target = getAdministration(thing);
   } else if (isObservableObject(thing)) {
-    if (process.env.NODE_ENV !== "production" && !isStringish(propOrHandler)) {
+    if (__MOBX_DEV__ && !isStringish(propOrHandler)) {
       return die(`InterceptReads can only be used with a specific property, not with an object in general`);
     }
     target = getAdministration(thing, propOrHandler);
-  } else if (process.env.NODE_ENV !== "production") {
+  } else if (__MOBX_DEV__) {
     return die(`Expected observable map, object or array as first array`);
   }
-  if (process.env.NODE_ENV !== "production" && target.dehancer !== undefined) {
+  if (__MOBX_DEV__ && target.dehancer !== undefined) {
     return die(`An intercept reader was already established`);
   }
   target.dehancer = typeof propOrHandler === "function" ? propOrHandler : handler;
@@ -2861,13 +2863,13 @@ function _isComputed(value, property) {
   return isComputedValue(atom);
 }
 function isComputed(value) {
-  if (process.env.NODE_ENV !== "production" && arguments.length > 1) {
+  if (__MOBX_DEV__ && arguments.length > 1) {
     return die(`isComputed expects only 1 argument. Use isComputedProp to inspect the observability of a property`);
   }
   return _isComputed(value);
 }
 function isComputedProp(value, propName) {
-  if (process.env.NODE_ENV !== "production" && !isStringish(propName)) {
+  if (__MOBX_DEV__ && !isStringish(propName)) {
     return die(`isComputed expected a property name as second argument`);
   }
   return _isComputed(value, propName);
@@ -2878,7 +2880,7 @@ function _isObservable(value, property) {
     return false;
   }
   if (property !== undefined) {
-    if (process.env.NODE_ENV !== "production" && (isObservableMap(value) || isObservableArray(value))) {
+    if (__MOBX_DEV__ && (isObservableMap(value) || isObservableArray(value))) {
       return die("isObservable(object, propertyName) is not supported for arrays and maps. Use map.has or array.length instead.");
     }
     if (isObservableObject(value)) {
@@ -2892,13 +2894,13 @@ function _isObservable(value, property) {
   return isObservableObject(value) || !!value[$mobx] || isAtom(value) || isReaction(value) || isComputedValue(value);
 }
 function isObservable(value) {
-  if (process.env.NODE_ENV !== "production" && arguments.length !== 1) {
+  if (__MOBX_DEV__ && arguments.length !== 1) {
     die(`isObservable expects only 1 argument. Use isObservableProp to inspect the observability of a property`);
   }
   return _isObservable(value);
 }
 function isObservableProp(value, propName) {
-  if (process.env.NODE_ENV !== "production" && !isStringish(propName)) {
+  if (__MOBX_DEV__ && !isStringish(propName)) {
     return die(`expected a property name as second argument`);
   }
   return _isObservable(value, propName);
@@ -3060,15 +3062,15 @@ function observeObservable(thing, listener, fireImmediately) {
       });
     }
   } else if (isObservableMap(thing)) {
-    if (process.env.NODE_ENV !== "production" && fireImmediately === true) {
+    if (__MOBX_DEV__ && fireImmediately === true) {
       die("`observe` doesn't support fireImmediately=true in combination with maps.");
     }
   } else if (isObservableSet(thing)) {
-    if (process.env.NODE_ENV !== "production" && fireImmediately === true) {
+    if (__MOBX_DEV__ && fireImmediately === true) {
       die("`observe` doesn't support fireImmediately=true in combination with sets.");
     }
   } else if (isObservableObject(thing)) {
-    if (process.env.NODE_ENV !== "production" && fireImmediately === true) {
+    if (__MOBX_DEV__ && fireImmediately === true) {
       die("`observe` doesn't support the fire immediately property for observable objects.");
     }
   } else {
@@ -3166,7 +3168,7 @@ function toJSHelper(source, __alreadySeen) {
  * Complex scenarios require custom solution, eg implementing `toJSON` or using `serializr` lib.
  */
 function toJS(source, options) {
-  if (process.env.NODE_ENV !== "production" && options) {
+  if (__MOBX_DEV__ && options) {
     die("toJS no longer supports options");
   }
   return toJSHelper(source, new Map());
@@ -3209,8 +3211,8 @@ function _when(predicate, effect, opts) {
       }
     }, opts.timeout);
   }
-  opts.name = process.env.NODE_ENV !== "production" ? opts.name || "When@" + getNextId() : "When";
-  const effectAction = createAction(process.env.NODE_ENV !== "production" ? opts.name + "-effect" : "When-effect", effect);
+  opts.name = __MOBX_DEV__ ? opts.name || "When@" + getNextId() : "When";
+  const effectAction = createAction(__MOBX_DEV__ ? opts.name + "-effect" : "When-effect", effect);
   // eslint-disable-next-line
   var disposer = autorun(r => {
     // predicate should not change state
@@ -3227,7 +3229,7 @@ function _when(predicate, effect, opts) {
 }
 function whenPromise(predicate, opts) {
   var _opts$signal;
-  if (process.env.NODE_ENV !== "production" && opts && opts.onError) {
+  if (__MOBX_DEV__ && opts && opts.onError) {
     return die(`the options 'onError' and 'promise' cannot be combined`);
   }
   if (opts != null && (_opts$signal = opts.signal) != null && _opts$signal.aborted) {
@@ -3375,7 +3377,7 @@ function makeObservable(target, annotations, options) {
 // proto[keysSymbol] = new Set<PropertyKey>()
 const keysSymbol = /*#__PURE__*/Symbol("mobx-keys");
 function makeAutoObservable(target, overrides, options) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isPlainObject(target) && !isPlainObject(Object.getPrototypeOf(target))) {
       die(`'makeAutoObservable' can only be used for classes that don't have a superclass`);
     }
@@ -3471,7 +3473,7 @@ const arrayTraps = {
   }
 };
 class ObservableArrayAdministration {
-  constructor(name = process.env.NODE_ENV !== "production" ? "ObservableArray@" + getNextId() : "ObservableArray", enhancer, owned_) {
+  constructor(name = __MOBX_DEV__ ? "ObservableArray@" + getNextId() : "ObservableArray", enhancer, owned_) {
     this.owned_ = void 0;
     this.atom_ = void 0;
     this.values_ = [];
@@ -3484,7 +3486,7 @@ class ObservableArrayAdministration {
     this.lastKnownLength_ = 0;
     this.owned_ = owned_;
     this.atom_ = new Atom(name);
-    this.enhancer_ = (newV, oldV) => enhancer(newV, oldV, process.env.NODE_ENV !== "production" ? name + "[..]" : "ObservableArray[..]");
+    this.enhancer_ = (newV, oldV) => enhancer(newV, oldV, __MOBX_DEV__ ? name + "[..]" : "ObservableArray[..]");
   }
   dehanceValue_(value) {
     if (this.dehancer !== undefined) {
@@ -3559,7 +3561,7 @@ class ObservableArrayAdministration {
       newItems = change.added;
     }
     newItems = newItems.length === 0 ? newItems : newItems.map(v => this.enhancer_(v, undefined));
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       const lengthDelta = newItems.length - deleteCount;
       this.updateArrayLength_(length, lengthDelta); // checks if internal array wasn't modified
     }
@@ -3589,7 +3591,7 @@ class ObservableArrayAdministration {
     }
   }
   notifyArrayChildUpdate_(index, newValue, oldValue) {
-    const notifySpy = process.env.NODE_ENV !== "production" && !this.owned_ && isSpyEnabled();
+    const notifySpy = __MOBX_DEV__ && !this.owned_ && isSpyEnabled();
     const notify = hasListeners(this);
     const change = notify || notifySpy ? {
       observableKind: "array",
@@ -3602,19 +3604,19 @@ class ObservableArrayAdministration {
     } : null;
     // The reason why this is on right hand side here (and not above), is this way the uglifier will drop it, but it won't
     // cause any runtime overhead in development mode without NODE_ENV set, unless spying is enabled
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportStart(change);
     }
     this.atom_.reportChanged();
     if (notify) {
       notifyListeners(this, change);
     }
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportEnd();
     }
   }
   notifyArraySplice_(index, added, removed) {
-    const notifySpy = process.env.NODE_ENV !== "production" && !this.owned_ && isSpyEnabled();
+    const notifySpy = __MOBX_DEV__ && !this.owned_ && isSpyEnabled();
     const notify = hasListeners(this);
     const change = notify || notifySpy ? {
       observableKind: "array",
@@ -3627,7 +3629,7 @@ class ObservableArrayAdministration {
       removedCount: removed.length,
       addedCount: added.length
     } : null;
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportStart(change);
     }
     this.atom_.reportChanged();
@@ -3635,7 +3637,7 @@ class ObservableArrayAdministration {
     if (notify) {
       notifyListeners(this, change);
     }
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportEnd();
     }
   }
@@ -3680,7 +3682,7 @@ class ObservableArrayAdministration {
     }
   }
 }
-function createObservableArray(initialValues, enhancer, name = process.env.NODE_ENV !== "production" ? "ObservableArray@" + getNextId() : "ObservableArray", owned = false) {
+function createObservableArray(initialValues, enhancer, name = __MOBX_DEV__ ? "ObservableArray@" + getNextId() : "ObservableArray", owned = false) {
   return initObservable(() => {
     const adm = new ObservableArrayAdministration(name, enhancer, owned);
     addHiddenFinalProp(adm.values_, $mobx, adm);
@@ -3855,7 +3857,7 @@ const DELETE = "delete";
 // just extend Map? See also https://gist.github.com/nestharus/13b4d74f2ef4a2f4357dbd3fc23c1e54
 // But: https://github.com/mobxjs/mobx/issues/1556
 class ObservableMap {
-  constructor(initialData, enhancer_ = deepEnhancer, name_ = process.env.NODE_ENV !== "production" ? "ObservableMap@" + getNextId() : "ObservableMap") {
+  constructor(initialData, enhancer_ = deepEnhancer, name_ = __MOBX_DEV__ ? "ObservableMap@" + getNextId() : "ObservableMap") {
     this.enhancer_ = void 0;
     this.name_ = void 0;
     this[$mobx] = ObservableMapMarker;
@@ -3869,7 +3871,7 @@ class ObservableMap {
     this.enhancer_ = enhancer_;
     this.name_ = name_;
     initObservable(() => {
-      this.keysAtom_ = createAtom(process.env.NODE_ENV !== "production" ? `${this.name_}.keys()` : "ObservableMap.keys()");
+      this.keysAtom_ = createAtom(__MOBX_DEV__ ? `${this.name_}.keys()` : "ObservableMap.keys()");
       this.data_ = new Map();
       this.hasMap_ = new Map();
       if (initialData) {
@@ -3886,7 +3888,7 @@ class ObservableMap {
     }
     let entry = this.hasMap_.get(key);
     if (!entry) {
-      const newEntry = entry = new ObservableValue(this.has_(key), referenceEnhancer, process.env.NODE_ENV !== "production" ? `${this.name_}.${stringifyKey(key)}?` : "ObservableMap.key?", false);
+      const newEntry = entry = new ObservableValue(this.has_(key), referenceEnhancer, __MOBX_DEV__ ? `${this.name_}.${stringifyKey(key)}?` : "ObservableMap.key?", false);
       this.hasMap_.set(key, newEntry);
       newEntry.onBUOL = new Set([() => this.hasMap_.delete(key)]);
     }
@@ -3926,7 +3928,7 @@ class ObservableMap {
       }
     }
     if (this.has_(key)) {
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const notify = hasListeners(this);
       const change = notify || notifySpy ? {
         observableKind: "map",
@@ -3936,7 +3938,7 @@ class ObservableMap {
         oldValue: this.data_.get(key).value_,
         name: key
       } : null;
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart(change);
       } // TODO fix type
       transaction(() => {
@@ -3950,7 +3952,7 @@ class ObservableMap {
       if (notify) {
         notifyListeners(this, change);
       }
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
       return true;
@@ -3961,7 +3963,7 @@ class ObservableMap {
     const observable = this.data_.get(key);
     newValue = observable.prepareNewValue_(newValue);
     if (newValue !== globalState.UNCHANGED) {
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const notify = hasListeners(this);
       const change = notify || notifySpy ? {
         observableKind: "map",
@@ -3972,14 +3974,14 @@ class ObservableMap {
         name: key,
         newValue
       } : null;
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart(change);
       } // TODO fix type
       observable.setNewValue_(newValue);
       if (notify) {
         notifyListeners(this, change);
       }
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
     }
@@ -3988,13 +3990,13 @@ class ObservableMap {
     checkIfStateModificationsAreAllowed(this.keysAtom_);
     transaction(() => {
       var _this$hasMap_$get2;
-      const observable = new ObservableValue(newValue, this.enhancer_, process.env.NODE_ENV !== "production" ? `${this.name_}.${stringifyKey(key)}` : "ObservableMap.key", false);
+      const observable = new ObservableValue(newValue, this.enhancer_, __MOBX_DEV__ ? `${this.name_}.${stringifyKey(key)}` : "ObservableMap.key", false);
       this.data_.set(key, observable);
       newValue = observable.value_; // value might have been changed
       (_this$hasMap_$get2 = this.hasMap_.get(key)) == null || _this$hasMap_$get2.setNewValue_(true);
       this.keysAtom_.reportChanged();
     });
-    const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+    const notifySpy = __MOBX_DEV__ && isSpyEnabled();
     const notify = hasListeners(this);
     const change = notify || notifySpy ? {
       observableKind: "map",
@@ -4004,13 +4006,13 @@ class ObservableMap {
       name: key,
       newValue
     } : null;
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportStart(change);
     } // TODO fix type
     if (notify) {
       notifyListeners(this, change);
     }
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportEnd();
     }
   }
@@ -4227,7 +4229,7 @@ function convertToMap(dataStructure) {
 
 const ObservableSetMarker = {};
 class ObservableSet {
-  constructor(initialData, enhancer = deepEnhancer, name_ = process.env.NODE_ENV !== "production" ? "ObservableSet@" + getNextId() : "ObservableSet") {
+  constructor(initialData, enhancer = deepEnhancer, name_ = __MOBX_DEV__ ? "ObservableSet@" + getNextId() : "ObservableSet") {
     this.name_ = void 0;
     this[$mobx] = ObservableSetMarker;
     this.data_ = new Set();
@@ -4288,7 +4290,7 @@ class ObservableSet {
         this.data_.add(this.enhancer_(value, undefined));
         this.atom_.reportChanged();
       });
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const notify = hasListeners(this);
       const change = notify || notifySpy ? {
         observableKind: "set",
@@ -4297,13 +4299,13 @@ class ObservableSet {
         object: this,
         newValue: value
       } : null;
-      if (notifySpy && process.env.NODE_ENV !== "production") {
+      if (notifySpy && __MOBX_DEV__) {
         spyReportStart(change);
       }
       if (notify) {
         notifyListeners(this, change);
       }
-      if (notifySpy && process.env.NODE_ENV !== "production") {
+      if (notifySpy && __MOBX_DEV__) {
         spyReportEnd();
       }
     }
@@ -4321,7 +4323,7 @@ class ObservableSet {
       }
     }
     if (this.has(value)) {
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const notify = hasListeners(this);
       const change = notify || notifySpy ? {
         observableKind: "set",
@@ -4330,7 +4332,7 @@ class ObservableSet {
         object: this,
         oldValue: value
       } : null;
-      if (notifySpy && process.env.NODE_ENV !== "production") {
+      if (notifySpy && __MOBX_DEV__) {
         spyReportStart(change);
       }
       transaction(() => {
@@ -4340,7 +4342,7 @@ class ObservableSet {
       if (notify) {
         notifyListeners(this, change);
       }
-      if (notifySpy && process.env.NODE_ENV !== "production") {
+      if (notifySpy && __MOBX_DEV__) {
         spyReportEnd();
       }
       return true;
@@ -4417,17 +4419,40 @@ class ObservableSet {
     if (isObservableSet(other)) {
       other = new Set(other);
     }
-    transaction(() => {
-      if (Array.isArray(other)) {
-        this.clear();
-        other.forEach(value => this.add(value));
-      } else if (isES6Set(other)) {
-        this.clear();
-        other.forEach(value => this.add(value));
-      } else if (other !== null && other !== undefined) {
-        die(41, other);
-      }
-    });
+    if (Array.isArray(other) || isES6Set(other)) {
+      // Only emit `delete`/`add` events (and `reportChanged`) for values that
+      // actually change, instead of clearing and re-adding everything. `add` and
+      // `delete` are already no-ops for values that are respectively already
+      // present or already absent, so we just need to avoid deleting values that
+      // are part of the replacement. See #3761.
+      transaction(() => {
+        // Collect the desired values for quick lookup. `other` is already a Set
+        // here when it was passed (or snapshotted from an observable set) as one,
+        // so reuse it rather than allocating another; arrays are wrapped (which
+        // also dedupes them).
+        const replacementValues = isES6Set(other) ? other : new Set(other);
+        // Short-circuit the trivial cases: an empty replacement is just a clear,
+        // and replacing into an empty set only needs the adds.
+        if (replacementValues.size === 0) {
+          this.clear();
+          return;
+        }
+        if (this.data_.size === 0) {
+          replacementValues.forEach(value => this.add(value));
+          return;
+        }
+        // Delete values that are not part of the replacement.
+        for (const value of this.data_.values()) {
+          if (!replacementValues.has(this.dehanceValue_(value))) {
+            this.delete(value);
+          }
+        }
+        // Add new values; values that are already present are a no-op.
+        replacementValues.forEach(value => this.add(value));
+      });
+    } else if (other !== null && other !== undefined) {
+      die(41, other);
+    }
     return this;
   }
   toJSON() {
@@ -4473,13 +4498,13 @@ class ObservableObjectAdministration {
     this.values_ = values_;
     this.name_ = name_;
     this.defaultAnnotation_ = defaultAnnotation_;
-    this.keysAtom_ = new Atom(process.env.NODE_ENV !== "production" ? `${this.name_}.keys` : "ObservableObject.keys");
+    this.keysAtom_ = new Atom(__MOBX_DEV__ ? `${this.name_}.keys` : "ObservableObject.keys");
     // Optimization: we use this frequently
     this.isPlainObject_ = isPlainObject(this.target_);
-    if (process.env.NODE_ENV !== "production" && !isAnnotation(this.defaultAnnotation_)) {
+    if (__MOBX_DEV__ && !isAnnotation(this.defaultAnnotation_)) {
       die(`defaultAnnotation must be valid annotation`);
     }
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       // Prepare structure for tracking which fields were already annotated
       this.appliedAnnotations_ = {};
     }
@@ -4542,7 +4567,7 @@ class ObservableObjectAdministration {
     // notify spy & observers
     if (newValue !== globalState.UNCHANGED) {
       const notify = hasListeners(this);
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const change = notify || notifySpy ? {
         type: UPDATE,
         observableKind: "object",
@@ -4552,14 +4577,14 @@ class ObservableObjectAdministration {
         name: key,
         newValue
       } : null;
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart(change);
       }
       observable.setNewValue_(newValue);
       if (notify) {
         notifyListeners(this, change);
       }
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
     }
@@ -4613,7 +4638,7 @@ class ObservableObjectAdministration {
     this.pendingKeys_ || (this.pendingKeys_ = new Map());
     let entry = this.pendingKeys_.get(key);
     if (!entry) {
-      entry = new ObservableValue(key in this.target_, referenceEnhancer, process.env.NODE_ENV !== "production" ? `${this.name_}.${stringifyKey(key)}?` : "ObservableObject.key?", false);
+      entry = new ObservableValue(key in this.target_, referenceEnhancer, __MOBX_DEV__ ? `${this.name_}.${stringifyKey(key)}?` : "ObservableObject.key?", false);
       this.pendingKeys_.set(key, entry);
     }
     return entry.get();
@@ -4729,7 +4754,7 @@ class ObservableObjectAdministration {
       } else {
         defineProperty(this.target_, key, descriptor);
       }
-      const observable = new ObservableValue(value, enhancer, process.env.NODE_ENV !== "production" ? `${this.name_}.${key.toString()}` : "ObservableObject.key", false);
+      const observable = new ObservableValue(value, enhancer, __MOBX_DEV__ ? `${this.name_}.${key.toString()}` : "ObservableObject.key", false);
       this.values_.set(key, observable);
       // Notify (value possibly changed by ObservableValue)
       this.notifyPropertyAddition_(key, observable.value_);
@@ -4761,7 +4786,7 @@ class ObservableObjectAdministration {
           return null;
         }
       }
-      options.name || (options.name = process.env.NODE_ENV !== "production" ? `${this.name_}.${key.toString()}` : "ObservableObject.key");
+      options.name || (options.name = __MOBX_DEV__ ? `${this.name_}.${key.toString()}` : "ObservableObject.key");
       options.context = this.proxy_ || this.target_;
       const cachedDescriptor = getCachedObservablePropDescriptor(key);
       const descriptor = {
@@ -4815,7 +4840,7 @@ class ObservableObjectAdministration {
       var _this$pendingKeys_;
       startBatch();
       const notify = hasListeners(this);
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const observable = this.values_.get(key);
       // Value needed for spies/listeners
       let value = undefined;
@@ -4833,7 +4858,7 @@ class ObservableObjectAdministration {
         delete this.target_[key];
       }
       // Allow re-annotating this field
-      if (process.env.NODE_ENV !== "production") {
+      if (__MOBX_DEV__) {
         delete this.appliedAnnotations_[key];
       }
       // Clear observable
@@ -4861,13 +4886,13 @@ class ObservableObjectAdministration {
           oldValue: value,
           name: key
         };
-        if (process.env.NODE_ENV !== "production" && notifySpy) {
+        if (__MOBX_DEV__ && notifySpy) {
           spyReportStart(change);
         }
         if (notify) {
           notifyListeners(this, change);
         }
-        if (process.env.NODE_ENV !== "production" && notifySpy) {
+        if (__MOBX_DEV__ && notifySpy) {
           spyReportEnd();
         }
       }
@@ -4879,7 +4904,7 @@ class ObservableObjectAdministration {
   notifyPropertyAddition_(key, value) {
     var _this$pendingKeys_2;
     const notify = hasListeners(this);
-    const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+    const notifySpy = __MOBX_DEV__ && isSpyEnabled();
     if (notify || notifySpy) {
       const change = notify || notifySpy ? {
         type: ADD,
@@ -4889,13 +4914,13 @@ class ObservableObjectAdministration {
         name: key,
         newValue: value
       } : null;
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart(change);
       }
       if (notify) {
         notifyListeners(this, change);
       }
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
     }
@@ -4920,19 +4945,19 @@ class ObservableObjectAdministration {
 }
 function asObservableObject(target, options) {
   var _options$name;
-  if (process.env.NODE_ENV !== "production" && options && isObservableObject(target)) {
+  if (__MOBX_DEV__ && options && isObservableObject(target)) {
     die(`Options can't be provided for already observable objects.`);
   }
   if (hasProp(target, $mobx)) {
-    if (process.env.NODE_ENV !== "production" && !(getAdministration(target) instanceof ObservableObjectAdministration)) {
+    if (__MOBX_DEV__ && !(getAdministration(target) instanceof ObservableObjectAdministration)) {
       die(`Cannot convert '${getDebugName(target)}' into observable object:` + `\nThe target is already observable of different type.` + `\nExtending builtins is not supported.`);
     }
     return target;
   }
-  if (process.env.NODE_ENV !== "production" && !Object.isExtensible(target)) {
+  if (__MOBX_DEV__ && !Object.isExtensible(target)) {
     die("Cannot make the designated object observable; it is not extensible");
   }
-  const name = (_options$name = options == null ? void 0 : options.name) != null ? _options$name : process.env.NODE_ENV !== "production" ? `${isPlainObject(target) ? "ObservableObject" : target.constructor.name}@${getNextId()}` : "ObservableObject";
+  const name = (_options$name = options == null ? void 0 : options.name) != null ? _options$name : __MOBX_DEV__ ? `${isPlainObject(target) ? "ObservableObject" : target.constructor.name}@${getNextId()}` : "ObservableObject";
   const adm = new ObservableObjectAdministration(target, new Map(), String(name), getAnnotationFromOptions(options));
   addHiddenProp(target, $mobx, adm);
   return target;
@@ -4955,20 +4980,20 @@ function isObservableObject(thing) {
   return false;
 }
 function recordAnnotationApplied(adm, annotation, key) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     adm.appliedAnnotations_[key] = annotation;
   }
 }
 function assertAnnotable(adm, annotation, key) {
   // Valid annotation
-  if (process.env.NODE_ENV !== "production" && !isAnnotation(annotation)) {
+  if (__MOBX_DEV__ && !isAnnotation(annotation)) {
     die(`Cannot annotate '${adm.name_}.${key.toString()}': Invalid annotation.`);
   }
   /*
   // Configurable, not sealed, not frozen
   // Possibly not needed, just a little better error then the one thrown by engine.
   // Cases where this would be useful the most (subclass field initializer) are not interceptable by this.
-  if (__DEV__) {
+  if (__MOBX_DEV__) {
       const configurable = getDescriptor(adm.target_, key)?.configurable
       const frozen = Object.isFrozen(adm.target_)
       const sealed = Object.isSealed(adm.target_)
@@ -4995,7 +5020,7 @@ function assertAnnotable(adm, annotation, key) {
   }
   */
   // Not annotated
-  if (process.env.NODE_ENV !== "production" && !isOverride(annotation) && hasProp(adm.appliedAnnotations_, key)) {
+  if (__MOBX_DEV__ && !isOverride(annotation) && hasProp(adm.appliedAnnotations_, key)) {
     const fieldName = `${adm.name_}.${key.toString()}`;
     const currentAnnotationType = adm.appliedAnnotations_[key].annotationType_;
     const requestedAnnotationType = annotation.annotationType_;
@@ -5087,13 +5112,13 @@ function getDebugName(thing, property) {
  */
 function initObservable(cb) {
   const derivation = untrackedStart();
-  const allowStateChanges = process.env.NODE_ENV !== "production" ? allowStateChangesStart(true) : true;
+  const allowStateChanges = __MOBX_DEV__ ? allowStateChangesStart(true) : true;
   startBatch();
   try {
     return cb();
   } finally {
     endBatch();
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       allowStateChangesEnd(allowStateChanges);
     }
     untrackedEnd(derivation);
@@ -5285,7 +5310,7 @@ function isAnnotation(thing) {
  * - utils/   Utility stuff.
  *
  */
-if (process.env.NODE_ENV !== "production") {
+if (__MOBX_DEV__) {
   const g = globalThis;
   ["Symbol", "Map", "Set", "Proxy"].forEach(m => {
     if (typeof g[m] === "undefined") {
@@ -5293,7 +5318,7 @@ if (process.env.NODE_ENV !== "production") {
     }
   });
 }
-if (process.env.NODE_ENV !== "production" && typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__ === "object") {
+if (__MOBX_DEV__ && typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__ === "object") {
   // See: https://github.com/andykog/mobx-devtools/
   __MOBX_DEVTOOLS_GLOBAL_HOOK__.injectMobx({
     spy,