mobx 6.11.0-pre → 6.12.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # mobx
 
+## 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
+
+-   [`c9260974`](https://github.com/mobxjs/mobx/commit/c9260974f726f58de0fd4974ea024c644d9b7c6f) [#3790](https://github.com/mobxjs/mobx/pull/3790) Thanks [@mweststrate](https://github.com/mweststrate)! - Added support for modern 2022.3 Decorators. [#3790](https://github.com/mobxjs/mobx/pull/3790)
+    -   [Installation / usage instruction](https://mobx.js.org/enabling-decorators.html).
+    -   [Introduction announcement](https://michel.codes/blogs/mobx-decorators)
+    -   Original PR by [@Matchlighter](https://github.com/Matchlighter) in [#3638](https://github.com/mobxjs/mobx/pull/3638),
+
 ## 6.10.2
 
 ### Patch Changes

package/README.md

@@ -23,42 +23,42 @@ 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://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>
 <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://www.canva.com/"><img src="https://mobx.js.org/assets/canva.png" align="center" width="100" title="Canva" alt="Canva" /></a>
-
-**🥈 Silver sponsors (\$100+ per month):**<br/>
-
 <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
 
 _Anything that can be derived from the application state, should be. Automatically._
 
-MobX is a battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming.
+MobX is a signal based, battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming.
 The philosophy behind MobX is simple:
 
 <div class="benefits">
@@ -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

@@ -420,7 +420,7 @@ function is20223Decorator(context) {
 }
 function assert20223DecoratorType(context, types) {
   if ( !types.includes(context.kind)) {
-    die("Decorator may not be used like this");
+    die("The decorator applied to '" + String(context.name) + "' cannot be used on a " + context.kind + " element");
   }
 }
 
@@ -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();
@@ -918,24 +909,21 @@ function extend_$4(adm, key, descriptor, proxyTrap) {
 }
 function decorate_20223_$4(desc, context) {
   {
-    assert20223DecoratorType(context, ["accessor", "field"]);
+    if (context.kind === "field") {
+      throw die("Please use `@observable accessor " + String(context.name) + "` instead of `@observable " + String(context.name) + "`");
+    }
+    assert20223DecoratorType(context, ["accessor"]);
   }
   var ann = this;
   var kind = context.kind,
-    name = context.name,
-    addInitializer = context.addInitializer;
-  // Backwards/Legacy behavior, expects makeObservable(this)
-  if (kind == "field") {
-    addInitializer(function () {
-      storeAnnotation(this, name, ann);
-    });
-    return;
-  }
+    name = context.name;
   // The laziness here is not ideal... It's a workaround to how 2022.3 Decorators are implemented:
   //   `addInitializer` callbacks are executed _before_ any accessors are defined (instead of the ideal-for-us right after each).
   //   This means that, if we were to do our stuff in an `addInitializer`, we'd attempt to read a private slot
   //   before it has been initialized. The runtime doesn't like that and throws a `Cannot read private member
   //   from an object whose class did not declare it` error.
+  // TODO: it seems that this will not be required anymore in the final version of the spec
+  // See TODO: link
   var initializedObjects = new WeakSet();
   function initializeObservable(target, value) {
     var _ann$options_$enhance, _ann$options_;
@@ -1238,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);
@@ -1985,7 +1976,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;
@@ -2002,7 +1992,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;
@@ -2125,9 +2114,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() {
@@ -3964,6 +3950,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);
@@ -3973,15 +3960,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);