mobx 6.11.0 → 6.12.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # mobx
 
+## 6.12.1
+
+### Patch Changes
+
+-   [`620f78c7`](https://github.com/mobxjs/mobx/commit/620f78c74e66bc532a96e28b26fd2d0ed1b67d54) [#3812](https://github.com/mobxjs/mobx/pull/3812) Thanks [@barroij](https://github.com/barroij)! - Prevent `reaction` from heeping a Reference to the OldValue that would prevent GC.
+
+*   [`6111b093`](https://github.com/mobxjs/mobx/commit/6111b0939d0d3c0d46dc325ba6bbd5f740a161d3) [#3833](https://github.com/mobxjs/mobx/pull/3833) Thanks [@realyze](https://github.com/realyze)! - Reduce memory overhead of tracking dependencies
+
+## 6.12.0
+
+### Minor Changes
+
+-   [`ec5db592`](https://github.com/mobxjs/mobx/commit/ec5db592d7756826c31e710b1c759d7e9406b153) [#3792](https://github.com/mobxjs/mobx/pull/3792) Thanks [@tonyraoul](https://github.com/tonyraoul)! - Improve observablearray proxy pefromance for es2023.array and es2022.array methods
+
+### Patch Changes
+
+-   [`86616c11`](https://github.com/mobxjs/mobx/commit/86616c11c108a511331eb05e55c08fc2c5a23f4d) [#3654](https://github.com/mobxjs/mobx/pull/3654) Thanks [@ahoisl](https://github.com/ahoisl)! - fix: action transparently forwards toString of underlying function
+
 ## 6.11.0
 
 ### Minor Changes

package/README.md

@@ -23,36 +23,36 @@ Documentation can be found at **[mobx.js.org](https://mobx.js.org/)**.
 
 MobX is made possible by the generosity of the sponsors below, and many other [individual backers](https://github.com/mobxjs/mobx/blob/main/docs/backers-sponsors.md#backers). Sponsoring directly impacts the longevity of this project.
 
-**🥇 Gold sponsors (\$3000+ total contribution):** <br/>
-<a href="https://mendix.com/"><img src="https://mobx.js.org/assets/mendix-logo.png" align="center" width="100" title="Mendix" alt="Mendix" /></a>
+**🥇 Gold sponsors (\$2500+ total contribution):**
+
+<br/>
 <a href="https://www.guilded.gg/"><img src="https://mobx.js.org/assets/guilded.jpg" align="center" width="100" title="Guilded" alt="Guilded" /></a>
 <a href="https://www.getparallax.com/"><img src="https://mobx.js.org/assets/parallax.png" align="center" width="100" title="Parallax" alt="Parallax" /></a>
-<a href="https://frontendmasters.com/"><img src="https://mobx.js.org/assets/frontendmasters.jpg" align="center" width="100" title="Frontend Masters" alt="Frontend Masters"></a>
 <a href="https://www.one-beyond.com"><img src="https://mobx.js.org/assets/dcsl.png" align="center" width="100" title="One Beyond" alt="One Beyond"/></a>
+<a href="https://frontendmasters.com/"><img src="https://mobx.js.org/assets/frontendmasters.jpg" align="center" width="100" title="Frontend Masters" alt="Frontend Masters"></a>
 <a href="http://auctionfrontier.com/"><img src="https://mobx.js.org/assets/auctionfrontier.jpeg" align="center" width="100" title="Auction Frontier" alt="Auction Frontier"></a>
 <a href="https://www.codefirst.co.uk/"><img src="https://mobx.js.org/assets/codefirst.png" align="center" width="100" title="CodeFirst" alt="CodeFirst"/></a>
 <a href="https://modulz.app/"><img src="https://mobx.js.org/assets/modulz.png" align="center" width="100" title="Modulz" alt="Modulz"/></a>
 <a href="https://coinbase.com/"><img src="https://mobx.js.org/assets/coinbase.jpeg" align="center" width="100" title="Coinbase" alt="Coinbase" /></a>
 <a href="https://curology.com/blog/tech"><img src="https://mobx.js.org/assets/curology.png" align="center" width="100" title="Curology" alt="Curology"/></a>
-<a href="https://opensource.facebook.com/"><img src="https://mobx.js.org/assets/fbos.jpeg" align="center" width="100" title="Facebook Open Source" alt="Facebook Open Source" /></a>
+<a href="https://mendix.com/"><img src="https://mobx.js.org/assets/mendix-logo.png" align="center" width="100" title="Mendix" alt="Mendix" /></a>
 <a href="https://www.canva.com/"><img src="https://mobx.js.org/assets/canva.svg" align="center" width="100" title="Canva" alt="Canva" /></a>
-
-**🥈 Silver sponsors (\$100+ per month):**<br/>
-
+<a href="https://opensource.facebook.com/"><img src="https://mobx.js.org/assets/fbos.jpeg" align="center" width="100" title="Facebook Open Source" alt="Facebook Open Source" /></a>
 <a href="https://casinosites.ltd.uk/?utm_source=sponsorship&utm_medium=mobx&utm_campaign=readme"><img src="https://mobx.js.org/assets/casino2.png" align="center" width="100" title="Casino Sites" alt="Casino Sites"/></a>
-<a href="https://upper.co/?utm_source=github_mobxjs_sponsorship&utm_medium=paid_acquisition&utm_campaign=sponsorship"><img src="https://mobx.js.org/assets/upper.png" align="center" width="100" title="UPPER" alt="UPPER"/></a>
-<a href="https://www.easeus.com/?utm_source=github_mobxjs_sponsorship&utm_medium=readme&utm_campaign=sponsorship"><img src="https://mobx.js.org/assets/easeus.png" align="center" width="100" title="EaseUS" alt="EaseUS"/></a>
-
-**🥉 Bronze sponsors (\$500+ total contributions):**<br/>
 <a href="https://www.bugsnag.com/platforms/react-error-reporting?utm_source=MobX&utm_medium=Website&utm_content=open-source&utm_campaign=2019-community&utm_term=20190913"><img src="https://mobx.js.org/assets/bugsnag.jpg" align="center" width="100" title="Bugsnag" alt="Bugsnag"/></a>
-<a href="https://space307.com/?utm_source=sponsorship&utm_medium=mobx&utm_campaign=readme"><img src="https://mobx.js.org/assets/space307.png" align="center" width="100" title="Space307" alt="Space307"/></a>
+
+**🥈 Silver sponsors (\$500+ total contributions):**<br/>
+
 <a href="https://mantro.net/jobs/warlock"><img src="https://mobx.js.org/assets/mantro.png" align="center" width="100" title="mantro GmbH" alt="mantro GmbH"></a>
+<a href="https://www.xh.com/"><img src="https://mobx.js.org/assets/xh.png" align="center" width="100" title="Extremely Heavy" alt="Extremely Heavy" /></a>
 <a href="https://www.algolia.com/"><img src="https://mobx.js.org/assets/algolia.jpg" align="center" width="100" title="Algolia" alt="Algolia" /></a>
-<a href="https://talentplot.com/"><img src="https://mobx.js.org/assets/talentplot.png" align="center" width="100" title="talentplot" alt="talentplot"></a>
-<a href="https://careers.dazn.com/"><img src="https://mobx.js.org/assets/dazn.png" align="center" width="100" title="DAZN" alt="DAZN"></a>
+<a href="https://space307.com/?utm_source=sponsorship&utm_medium=mobx&utm_campaign=readme"><img src="https://mobx.js.org/assets/space307.png" align="center" width="100" title="Space307" alt="Space307"/></a>
 <a href="https://blokt.com/"><img src="https://mobx.js.org/assets/blokt.jpg" align="center" width="100" title="Blokt" alt="Blokt"/></a>
+<a href="https://upper.co/?utm_source=github_mobxjs_sponsorship&utm_medium=paid_acquisition&utm_campaign=sponsorship"><img src="https://mobx.js.org/assets/upper.png" align="center" width="100" title="UPPER" alt="UPPER"/></a>
+<a href="https://careers.dazn.com/"><img src="https://mobx.js.org/assets/dazn.png" align="center" width="100" title="DAZN" alt="DAZN"></a>
+<a href="https://talentplot.com/"><img src="https://mobx.js.org/assets/talentplot.png" align="center" width="100" title="talentplot" alt="talentplot"></a>
 
----
+## <a href="https://www.easeus.com/?utm_source=github_mobxjs_sponsorship&utm_medium=readme&utm_campaign=sponsorship"><img src="https://mobx.js.org/assets/easeus.png" align="center" width="100" title="EaseUS" alt="EaseUS"/></a>
 
 ## Introduction
 
@@ -106,26 +106,22 @@ So what does code that uses MobX look like?
 import React from "react"
 import ReactDOM from "react-dom"
 import { makeAutoObservable } from "mobx"
-import { observer } from "mobx-react"
+import { observer } from "mobx-react-lite"
 
 // Model the application state.
-class Timer {
-    secondsPassed = 0
-
-    constructor() {
-        makeAutoObservable(this)
-    }
-
-    increase() {
-        this.secondsPassed += 1
-    }
-
-    reset() {
-        this.secondsPassed = 0
-    }
+function createTimer() {
+    return makeAutoObservable({
+        secondsPassed: 0,
+        increase() {
+            this.secondsPassed += 1
+        },
+        reset() {
+            this.secondsPassed = 0
+        }
+    })
 }
 
-const myTimer = new Timer()
+const myTimer = createTimer()
 
 // Build a "user interface" that uses the observable state.
 const TimerView = observer(({ timer }) => (

package/dist/core/atom.d.ts

@@ -9,7 +9,6 @@ export declare class Atom implements IAtom {
     isPendingUnobservation_: boolean;
     isBeingObserved_: boolean;
     observers_: Set<IDerivation>;
-    batchId_: number;
     diffValue_: number;
     lastAccessedBy_: number;
     lowestObserverState_: IDerivationState_;

package/dist/core/globalstate.d.ts

@@ -37,11 +37,6 @@ export declare class MobXGlobals {
      * Are we in a batch block? (and how many of them)
      */
     inBatch: number;
-    /**
-     * ID of the latest batch. Used to suppress reportChanged of newly created atoms.
-     * Note the value persists even after batch ended.
-     */
-    batchId: number;
     /**
      * Observables that don't have observers anymore, and are about to be
      * suspended, unless somebody else accesses it in the same batch
@@ -106,10 +101,6 @@ export declare class MobXGlobals {
      * configurable: true
      */
     safeDescriptors: boolean;
-    /**
-     * Changes with each state update, used by useSyncExternalStore
-     */
-    stateVersion: number;
 }
 export declare let globalState: MobXGlobals;
 export declare function isolateGlobalState(): void;

package/dist/mobx.cjs.development.js

@@ -440,14 +440,12 @@ var Atom = /*#__PURE__*/function () {
     this.isPendingUnobservation_ = false;
     this.isBeingObserved_ = false;
     this.observers_ = new Set();
-    this.batchId_ = void 0;
     this.diffValue_ = 0;
     this.lastAccessedBy_ = 0;
     this.lowestObserverState_ = IDerivationState_.NOT_TRACKING_;
     this.onBOL = void 0;
     this.onBUOL = void 0;
     this.name_ = name_;
-    this.batchId_ = globalState.inBatch ? globalState.batchId : NaN;
   }
   // onBecomeObservedListeners
   var _proto = Atom.prototype;
@@ -476,13 +474,6 @@ var Atom = /*#__PURE__*/function () {
    * Invoke this method _after_ this method has changed to signal mobx that all its observers should invalidate.
    */;
   _proto.reportChanged = function reportChanged() {
-    if (!globalState.inBatch || this.batchId_ !== globalState.batchId) {
-      // We could update state version only at the end of batch,
-      // but we would still have to switch some global flag here to signal a change.
-      globalState.stateVersion = globalState.stateVersion < Number.MAX_SAFE_INTEGER ? globalState.stateVersion + 1 : Number.MIN_SAFE_INTEGER;
-      // Avoids the possibility of hitting the same globalState.batchId when it cycled through all integers (necessary?)
-      this.batchId_ = NaN;
-    }
     startBatch();
     propagateChanged(this);
     endBatch();
@@ -1235,6 +1226,9 @@ function createAction(actionName, fn, autoAction, ref) {
     return executeAction(actionName, autoAction, fn, ref || this, arguments);
   }
   res.isMobxAction = true;
+  res.toString = function () {
+    return fn.toString();
+  };
   if (isFunctionNameConfigurable) {
     tmpNameDescriptor.value = actionName;
     defineProperty(res, "name", tmpNameDescriptor);
@@ -1826,10 +1820,12 @@ function checkIfStateReadsAreAllowed(observable) {
  */
 function trackDerivedFunction(derivation, f, context) {
   var prevAllowStateReads = allowStateReadsStart(true);
-  // pre allocate array allocation + room for variation in deps
-  // array will be trimmed by bindDependencies
   changeDependenciesStateTo0(derivation);
-  derivation.newObserving_ = new Array(derivation.observing_.length + 100);
+  // Preallocate array; will be trimmed by bindDependencies.
+  derivation.newObserving_ = new Array(
+  // Reserve constant space for initial dependencies, dynamic space otherwise.
+  // See https://github.com/mobxjs/mobx/pull/3833
+  derivation.runId_ === 0 ? 100 : derivation.observing_.length);
   derivation.unboundDepsCount_ = 0;
   derivation.runId_ = ++globalState.runId;
   var prevTracking = globalState.trackingDerivation;
@@ -1982,7 +1978,6 @@ var MobXGlobals = function MobXGlobals() {
   this.runId = 0;
   this.mobxGuid = 0;
   this.inBatch = 0;
-  this.batchId = Number.MIN_SAFE_INTEGER;
   this.pendingUnobservations = [];
   this.pendingReactions = [];
   this.isRunningReactions = false;
@@ -1999,7 +1994,6 @@ var MobXGlobals = function MobXGlobals() {
   this.useProxies = true;
   this.verifyProxies = false;
   this.safeDescriptors = true;
-  this.stateVersion = Number.MIN_SAFE_INTEGER;
 };
 var canMergeGlobalState = true;
 var isolateCalled = false;
@@ -2122,9 +2116,6 @@ function queueForUnobservation(observable) {
  * Avoids unnecessary recalculations.
  */
 function startBatch() {
-  if (globalState.inBatch === 0) {
-    globalState.batchId = globalState.batchId < Number.MAX_SAFE_INTEGER ? globalState.batchId + 1 : Number.MIN_SAFE_INTEGER;
-  }
   globalState.inBatch++;
 }
 function endBatch() {
@@ -2675,7 +2666,6 @@ function reaction(expression, effect, opts) {
   var firstTime = true;
   var isScheduled = false;
   var value;
-  var oldValue;
   var equals = opts.compareStructural ? comparer.structural : opts.equals || comparer["default"];
   var r = new Reaction(name, function () {
     if (firstTime || runSync) {
@@ -2691,12 +2681,12 @@ function reaction(expression, effect, opts) {
       return;
     }
     var changed = false;
+    var oldValue = value;
     r.track(function () {
       var nextValue = allowStateChanges(false, function () {
         return expression(r);
       });
       changed = firstTime || !equals(value, nextValue);
-      oldValue = value;
       value = nextValue;
     });
     if (firstTime && opts.fireImmediately) {
@@ -3961,6 +3951,7 @@ var arrayExtensions = {
  * Without this, everything works as well, but this works
  * faster as everything works on unproxied values
  */
+addArrayExtension("at", simpleFunc);
 addArrayExtension("concat", simpleFunc);
 addArrayExtension("flat", simpleFunc);
 addArrayExtension("includes", simpleFunc);
@@ -3970,15 +3961,21 @@ addArrayExtension("lastIndexOf", simpleFunc);
 addArrayExtension("slice", simpleFunc);
 addArrayExtension("toString", simpleFunc);
 addArrayExtension("toLocaleString", simpleFunc);
+addArrayExtension("toSorted", simpleFunc);
+addArrayExtension("toSpliced", simpleFunc);
+addArrayExtension("with", simpleFunc);
 // map
 addArrayExtension("every", mapLikeFunc);
 addArrayExtension("filter", mapLikeFunc);
 addArrayExtension("find", mapLikeFunc);
 addArrayExtension("findIndex", mapLikeFunc);
+addArrayExtension("findLast", mapLikeFunc);
+addArrayExtension("findLastIndex", mapLikeFunc);
 addArrayExtension("flatMap", mapLikeFunc);
 addArrayExtension("forEach", mapLikeFunc);
 addArrayExtension("map", mapLikeFunc);
 addArrayExtension("some", mapLikeFunc);
+addArrayExtension("toReversed", mapLikeFunc);
 // reduce
 addArrayExtension("reduce", reduceLikeFunc);
 addArrayExtension("reduceRight", reduceLikeFunc);
@@ -3996,7 +3993,7 @@ function simpleFunc(funcName) {
     return dehancedValues[funcName].apply(dehancedValues, arguments);
   };
 }
-// Make sure callbacks recieve correct array arg #2326
+// Make sure callbacks receive correct array arg #2326
 function mapLikeFunc(funcName) {
   return function (callback, thisArg) {
     var _this2 = this;
@@ -4008,7 +4005,7 @@ function mapLikeFunc(funcName) {
     });
   };
 }
-// Make sure callbacks recieve correct array arg #2326
+// Make sure callbacks receive correct array arg #2326
 function reduceLikeFunc(funcName) {
   return function () {
     var _this3 = this;
@@ -5341,7 +5338,7 @@ var LegacyObservableArray = /*#__PURE__*/function (_StubArray, _Symbol$toStringT
         _this.spliceWithArray(0, 0, initialValues);
       }
       if (safariPrototypeSetterInheritanceBug) {
-        // Seems that Safari won't use numeric prototype setter untill any * numeric property is
+        // Seems that Safari won't use numeric prototype setter until any * numeric property is
         // defined on the instance. After that it works fine, even if this property is deleted.
         Object.defineProperty(_assertThisInitialized(_this), "0", ENTRY_0);
       }