mobx 6.10.2 → 6.11.0

package/dist/mobx.umd.development.js

@@ -9,16 +9,16 @@
       1: function _(annotationType, key) {
         return "Cannot apply '" + annotationType + "' to '" + key.toString() + "': Field not found.";
       },
-      /*
-      2(prop) {
-          return `invalid decorator for '${prop.toString()}'`
-      },
-      3(prop) {
-          return `Cannot decorate '${prop.toString()}': action can only be used on properties with a function value.`
-      },
-      4(prop) {
-          return `Cannot decorate '${prop.toString()}': computed can only be used on getter properties.`
-      },
+      /*
+      2(prop) {
+          return `invalid decorator for '${prop.toString()}'`
+      },
+      3(prop) {
+          return `Cannot decorate '${prop.toString()}': action can only be used on properties with a function value.`
+      },
+      4(prop) {
+          return `Cannot decorate '${prop.toString()}': computed can only be used on getter properties.`
+      },
       */
       5: "'keys()' can only be used on observable objects, arrays, sets and maps",
       6: "'values()' can only be used on observable objects, arrays, sets and maps",
@@ -133,8 +133,8 @@
     function getNextId() {
       return ++globalState.mobxGuid;
     }
-    /**
-     * Makes sure that the provided function is invoked at most once.
+    /**
+     * Makes sure that the provided function is invoked at most once.
      */
     function once(func) {
       var invoked = false;
@@ -215,8 +215,8 @@
       return thing instanceof Set;
     }
     var hasGetOwnPropertySymbols = typeof Object.getOwnPropertySymbols !== "undefined";
-    /**
-     * Returns the following: own enumerable keys and symbols.
+    /**
+     * Returns the following: own enumerable keys and symbols.
      */
     function getPlainObjectKeys(object) {
       var keys = Object.keys(object);
@@ -359,20 +359,24 @@
     }
 
     var storedAnnotationsSymbol = /*#__PURE__*/Symbol("mobx-stored-annotations");
-    /**
-     * Creates a function that acts as
-     * - decorator
-     * - annotation object
+    /**
+     * Creates a function that acts as
+     * - decorator
+     * - annotation object
      */
     function createDecoratorAnnotation(annotation) {
       function decorator(target, property) {
-        storeAnnotation(target, property, annotation);
+        if (is20223Decorator(property)) {
+          return annotation.decorate_20223_(target, property);
+        } else {
+          storeAnnotation(target, property, annotation);
+        }
       }
       return Object.assign(decorator, annotation);
     }
-    /**
-     * Stores annotation to prototype,
-     * so it can be inspected later by `makeObservable` called from constructor
+    /**
+     * Stores annotation to prototype,
+     * so it can be inspected later by `makeObservable` called from constructor
      */
     function storeAnnotation(prototype, key, annotation) {
       if (!hasProp(prototype, storedAnnotationsSymbol)) {
@@ -398,27 +402,37 @@
         die("Cannot apply '@" + requestedAnnotationType + "' to '" + fieldName + "':" + ("\nThe field is already decorated with '@" + currentAnnotationType + "'.") + "\nRe-decorating fields is not allowed." + "\nUse '@override' decorator for methods overridden by subclass.");
       }
     }
-    /**
-     * Collects annotations from prototypes and stores them on target (instance)
+    /**
+     * Collects annotations from prototypes and stores them on target (instance)
      */
     function collectStoredAnnotations(target) {
       if (!hasProp(target, storedAnnotationsSymbol)) {
-        if ( !target[storedAnnotationsSymbol]) {
-          die("No annotations were passed to makeObservable, but no decorated members have been found either");
-        }
+        // if (__DEV__ && !target[storedAnnotationsSymbol]) {
+        //     die(
+        //         `No annotations were passed to makeObservable, but no decorated members have been found either`
+        //     )
+        // }
         // We need a copy as we will remove annotation from the list once it's applied.
         addHiddenProp(target, storedAnnotationsSymbol, _extends({}, target[storedAnnotationsSymbol]));
       }
       return target[storedAnnotationsSymbol];
     }
+    function is20223Decorator(context) {
+      return typeof context == "object" && typeof context["kind"] == "string";
+    }
+    function assert20223DecoratorType(context, types) {
+      if ( !types.includes(context.kind)) {
+        die("The decorator applied to '" + String(context.name) + "' cannot be used on a " + context.kind + " element");
+      }
+    }
 
     var $mobx = /*#__PURE__*/Symbol("mobx administration");
     var Atom = /*#__PURE__*/function () {
       // for effective unobserving. BaseAtom has true, for extra optimization, so its onBecomeUnobserved never gets called, because it's not needed
 
-      /**
-       * 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.
+      /**
+       * 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.
        */
       function Atom(name_) {
         if (name_ === void 0) {
@@ -453,15 +467,15 @@
           });
         }
       }
-      /**
-       * Invoke this method to notify mobx that your atom has been used somehow.
-       * Returns true if there is currently a reactive context.
+      /**
+       * Invoke this method to notify mobx that your atom has been used somehow.
+       * Returns true if there is currently a reactive context.
        */;
       _proto.reportObserved = function reportObserved$1() {
         return reportObserved(this);
       }
-      /**
-       * Invoke this method _after_ this method has changed to signal mobx that all its observers should invalidate.
+      /**
+       * 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) {
@@ -609,7 +623,8 @@
     var override = /*#__PURE__*/createDecoratorAnnotation({
       annotationType_: OVERRIDE,
       make_: make_,
-      extend_: extend_
+      extend_: extend_,
+      decorate_20223_: decorate_20223_
     });
     function isOverride(annotation) {
       return annotation.annotationType_ === OVERRIDE;
@@ -623,47 +638,87 @@
       if ( !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 /* Cancel */;
+      return 0 /* MakeResult.Cancel */;
     }
 
     function extend_(adm, key, descriptor, proxyTrap) {
       die("'" + this.annotationType_ + "' can only be used with 'makeObservable'");
     }
+    function decorate_20223_(desc, context) {
+      console.warn("'" + this.annotationType_ + "' cannot be used with decorators - this is a no-op");
+    }
 
     function createActionAnnotation(name, options) {
       return {
         annotationType_: name,
         options_: options,
         make_: make_$1,
-        extend_: extend_$1
+        extend_: extend_$1,
+        decorate_20223_: decorate_20223_$1
       };
     }
     function make_$1(adm, key, descriptor, source) {
       var _this$options_;
       // bound
       if ((_this$options_ = this.options_) != null && _this$options_.bound) {
-        return this.extend_(adm, key, descriptor, false) === null ? 0 /* Cancel */ : 1 /* Break */;
+        return this.extend_(adm, key, descriptor, false) === null ? 0 /* MakeResult.Cancel */ : 1 /* MakeResult.Break */;
       }
       // own
       if (source === adm.target_) {
-        return this.extend_(adm, key, descriptor, false) === null ? 0 /* Cancel */ : 2 /* Continue */;
+        return this.extend_(adm, key, descriptor, false) === null ? 0 /* MakeResult.Cancel */ : 2 /* MakeResult.Continue */;
       }
       // prototype
       if (isAction(descriptor.value)) {
         // A prototype could have been annotated already by other constructor,
         // rest of the proto chain must be annotated already
-        return 1 /* Break */;
+        return 1 /* MakeResult.Break */;
       }
 
       var actionDescriptor = createActionDescriptor(adm, this, key, descriptor, false);
       defineProperty(source, key, actionDescriptor);
-      return 2 /* Continue */;
+      return 2 /* MakeResult.Continue */;
     }
 
     function extend_$1(adm, key, descriptor, proxyTrap) {
       var actionDescriptor = createActionDescriptor(adm, this, key, descriptor);
       return adm.defineProperty_(key, actionDescriptor, proxyTrap);
     }
+    function decorate_20223_$1(mthd, context) {
+      {
+        assert20223DecoratorType(context, ["method", "field"]);
+      }
+      var kind = context.kind,
+        name = context.name,
+        addInitializer = context.addInitializer;
+      var ann = this;
+      var _createAction = function _createAction(m) {
+        var _ann$options_$name, _ann$options_, _ann$options_$autoAct, _ann$options_2;
+        return createAction((_ann$options_$name = (_ann$options_ = ann.options_) == null ? void 0 : _ann$options_.name) != null ? _ann$options_$name : name.toString(), m, (_ann$options_$autoAct = (_ann$options_2 = ann.options_) == null ? void 0 : _ann$options_2.autoAction) != null ? _ann$options_$autoAct : false);
+      };
+      // Backwards/Legacy behavior, expects makeObservable(this)
+      if (kind == "field") {
+        addInitializer(function () {
+          storeAnnotation(this, name, ann);
+        });
+        return;
+      }
+      if (kind == "method") {
+        var _this$options_2;
+        if (!isAction(mthd)) {
+          mthd = _createAction(mthd);
+        }
+        if ((_this$options_2 = this.options_) != null && _this$options_2.bound) {
+          addInitializer(function () {
+            var self = this;
+            var bound = self[name].bind(self);
+            bound.isMobxAction = true;
+            self[name] = bound;
+          });
+        }
+        return mthd;
+      }
+      die("Cannot apply '" + ann.annotationType_ + "' to '" + String(name) + "' (kind: " + kind + "):" + ("\n'" + ann.annotationType_ + "' can only be used on properties with a function value."));
+    }
     function assertActionDescriptor(adm, _ref, key, _ref2) {
       var annotationType_ = _ref.annotationType_;
       var value = _ref2.value;
@@ -704,32 +759,33 @@
         annotationType_: name,
         options_: options,
         make_: make_$2,
-        extend_: extend_$2
+        extend_: extend_$2,
+        decorate_20223_: decorate_20223_$2
       };
     }
     function make_$2(adm, key, descriptor, source) {
       var _this$options_;
       // own
       if (source === adm.target_) {
-        return this.extend_(adm, key, descriptor, false) === null ? 0 /* Cancel */ : 2 /* Continue */;
+        return this.extend_(adm, key, descriptor, false) === null ? 0 /* MakeResult.Cancel */ : 2 /* MakeResult.Continue */;
       }
       // prototype
       // bound - must annotate protos to support super.flow()
       if ((_this$options_ = this.options_) != null && _this$options_.bound && (!hasProp(adm.target_, key) || !isFlow(adm.target_[key]))) {
         if (this.extend_(adm, key, descriptor, false) === null) {
-          return 0 /* Cancel */;
+          return 0 /* MakeResult.Cancel */;
         }
       }
 
       if (isFlow(descriptor.value)) {
         // A prototype could have been annotated already by other constructor,
         // rest of the proto chain must be annotated already
-        return 1 /* Break */;
+        return 1 /* MakeResult.Break */;
       }
 
       var flowDescriptor = createFlowDescriptor(adm, this, key, descriptor, false, false);
       defineProperty(source, key, flowDescriptor);
-      return 2 /* Continue */;
+      return 2 /* MakeResult.Continue */;
     }
 
     function extend_$2(adm, key, descriptor, proxyTrap) {
@@ -737,6 +793,26 @@
       var flowDescriptor = createFlowDescriptor(adm, this, key, descriptor, (_this$options_2 = this.options_) == null ? void 0 : _this$options_2.bound);
       return adm.defineProperty_(key, flowDescriptor, proxyTrap);
     }
+    function decorate_20223_$2(mthd, context) {
+      var _this$options_3;
+      {
+        assert20223DecoratorType(context, ["method"]);
+      }
+      var name = context.name,
+        addInitializer = context.addInitializer;
+      if (!isFlow(mthd)) {
+        mthd = flow(mthd);
+      }
+      if ((_this$options_3 = this.options_) != null && _this$options_3.bound) {
+        addInitializer(function () {
+          var self = this;
+          var bound = self[name].bind(self);
+          bound.isMobXFlow = true;
+          self[name] = bound;
+        });
+      }
+      return mthd;
+    }
     function assertFlowDescriptor(adm, _ref, key, _ref2) {
       var annotationType_ = _ref.annotationType_;
       var value = _ref2.value;
@@ -781,11 +857,12 @@
         annotationType_: name,
         options_: options,
         make_: make_$3,
-        extend_: extend_$3
+        extend_: extend_$3,
+        decorate_20223_: decorate_20223_$3
       };
     }
     function make_$3(adm, key, descriptor) {
-      return this.extend_(adm, key, descriptor, false) === null ? 0 /* Cancel */ : 1 /* Break */;
+      return this.extend_(adm, key, descriptor, false) === null ? 0 /* MakeResult.Cancel */ : 1 /* MakeResult.Break */;
     }
 
     function extend_$3(adm, key, descriptor, proxyTrap) {
@@ -795,6 +872,26 @@
         set: descriptor.set
       }), proxyTrap);
     }
+    function decorate_20223_$3(get, context) {
+      {
+        assert20223DecoratorType(context, ["getter"]);
+      }
+      var ann = this;
+      var key = context.name,
+        addInitializer = context.addInitializer;
+      addInitializer(function () {
+        var adm = asObservableObject(this)[$mobx];
+        var options = _extends({}, ann.options_, {
+          get: get,
+          context: this
+        });
+        options.name || (options.name =  adm.name_ + "." + key.toString() );
+        adm.values_.set(key, new ComputedValue(options));
+      });
+      return function () {
+        return this[$mobx].getObservablePropValue_(key);
+      };
+    }
     function assertComputedDescriptor(adm, _ref, key, _ref2) {
       var annotationType_ = _ref.annotationType_;
       var get = _ref2.get;
@@ -808,11 +905,12 @@
         annotationType_: name,
         options_: options,
         make_: make_$4,
-        extend_: extend_$4
+        extend_: extend_$4,
+        decorate_20223_: decorate_20223_$4
       };
     }
     function make_$4(adm, key, descriptor) {
-      return this.extend_(adm, key, descriptor, false) === null ? 0 /* Cancel */ : 1 /* Break */;
+      return this.extend_(adm, key, descriptor, false) === null ? 0 /* MakeResult.Cancel */ : 1 /* MakeResult.Break */;
     }
 
     function extend_$4(adm, key, descriptor, proxyTrap) {
@@ -820,6 +918,55 @@
       assertObservableDescriptor(adm, this, key, descriptor);
       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 decorate_20223_$4(desc, context) {
+      {
+        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;
+      // 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_;
+        var adm = asObservableObject(target)[$mobx];
+        var observable = new ObservableValue(value, (_ann$options_$enhance = (_ann$options_ = ann.options_) == null ? void 0 : _ann$options_.enhancer) != null ? _ann$options_$enhance : deepEnhancer,  adm.name_ + "." + name.toString() , false);
+        adm.values_.set(name, observable);
+        initializedObjects.add(target);
+      }
+      if (kind == "accessor") {
+        return {
+          get: function get() {
+            if (!initializedObjects.has(this)) {
+              initializeObservable(this, desc.get.call(this));
+            }
+            return this[$mobx].getObservablePropValue_(name);
+          },
+          set: function set(value) {
+            if (!initializedObjects.has(this)) {
+              initializeObservable(this, value);
+            }
+            return this[$mobx].setObservablePropValue_(name, value);
+          },
+          init: function init(value) {
+            if (!initializedObjects.has(this)) {
+              initializeObservable(this, value);
+            }
+            return value;
+          }
+        };
+      }
+      return;
+    }
     function assertObservableDescriptor(adm, _ref, key, descriptor) {
       var annotationType_ = _ref.annotationType_;
       if ( !("value" in descriptor)) {
@@ -834,7 +981,8 @@
         annotationType_: AUTO,
         options_: options,
         make_: make_$5,
-        extend_: extend_$5
+        extend_: extend_$5,
+        decorate_20223_: decorate_20223_$5
       };
     }
     function make_$5(adm, key, descriptor, source) {
@@ -852,14 +1000,14 @@
           return adm.defineProperty_(key, {
             configurable: globalState.safeDescriptors ? adm.isPlainObject_ : true,
             set: set
-          }) === null ? 0 /* Cancel */ : 2 /* Continue */;
+          }) === null ? 0 /* MakeResult.Cancel */ : 2 /* MakeResult.Continue */;
         }
         // proto
         defineProperty(source, key, {
           configurable: true,
           set: set
         });
-        return 2 /* Continue */;
+        return 2 /* MakeResult.Continue */;
       }
       // function on proto -> autoAction/flow
       if (source !== adm.target_ && typeof descriptor.value === "function") {
@@ -906,6 +1054,9 @@
       var observableAnnotation = ((_this$options_6 = this.options_) == null ? void 0 : _this$options_6.deep) === false ? observable.ref : observable;
       return observableAnnotation.extend_(adm, key, descriptor, proxyTrap);
     }
+    function decorate_20223_$5(desc, context) {
+      die("'" + this.annotationType_ + "' cannot be used as a decorator");
+    }
 
     var OBSERVABLE = "observable";
     var OBSERVABLE_REF = "observable.ref";
@@ -945,11 +1096,15 @@
       var _annotation$options_$, _annotation$options_;
       return !annotation ? deepEnhancer : (_annotation$options_$ = (_annotation$options_ = annotation.options_) == null ? void 0 : _annotation$options_.enhancer) != null ? _annotation$options_$ : deepEnhancer;
     }
-    /**
-     * Turns an object, array or function into a reactive structure.
-     * @param v the value which should become observable.
+    /**
+     * Turns an object, array or function into a reactive structure.
+     * @param v the value which should become observable.
      */
     function createObservable(v, arg2, arg3) {
+      // @observable someProp; (2022.3 Decorators)
+      if (is20223Decorator(arg2)) {
+        return observableAnnotation.decorate_20223_(v, arg2);
+      }
       // @observable someProp;
       if (isStringish(arg2)) {
         storeAnnotation(v, arg2, observableAnnotation);
@@ -1019,11 +1174,15 @@
     var computedStructAnnotation = /*#__PURE__*/createComputedAnnotation(COMPUTED_STRUCT, {
       equals: comparer.structural
     });
-    /**
-     * Decorator for class properties: @computed get value() { return expr; }.
-     * For legacy purposes also invokable as ES5 observable created: `computed(() => expr)`;
+    /**
+     * 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) {
+      if (is20223Decorator(arg2)) {
+        // @computed (2022.3 Decorators)
+        return computedAnnotation.decorate_20223_(arg1, arg2);
+      }
       if (isStringish(arg2)) {
         // @computed
         return storeAnnotation(arg1, arg2, computedAnnotation);
@@ -1310,24 +1469,24 @@
     var isObservableValue = /*#__PURE__*/createInstanceofPredicate("ObservableValue", ObservableValue);
 
     var _Symbol$toPrimitive$1;
-    /**
-     * A node in the state dependency root that observes other nodes, and can be observed itself.
-     *
-     * 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()`.
-     *
-     * Implementation description:
-     * 1. First time it's being accessed it will compute and remember result
-     *    give back remembered result until 2. happens
-     * 2. First time any deep dependency change, propagate POSSIBLY_STALE to all observers, wait for 3.
-     * 3. When it's being accessed, recompute if any shallow dependency changed.
-     *    if result changed: propagate STALE to all observers, that were POSSIBLY_STALE from the last step.
-     *    go to step 2. either way
-     *
-     * If at any point it's outside batch and it isn't observed: reset everything and go to 1.
+    /**
+     * A node in the state dependency root that observes other nodes, and can be observed itself.
+     *
+     * 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()`.
+     *
+     * Implementation description:
+     * 1. First time it's being accessed it will compute and remember result
+     *    give back remembered result until 2. happens
+     * 2. First time any deep dependency change, propagate POSSIBLY_STALE to all observers, wait for 3.
+     * 3. When it's being accessed, recompute if any shallow dependency changed.
+     *    if result changed: propagate STALE to all observers, that were POSSIBLY_STALE from the last step.
+     *    go to step 2. either way
+     *
+     * If at any point it's outside batch and it isn't observed: reset everything and go to 1.
      */
     _Symbol$toPrimitive$1 = Symbol.toPrimitive;
     var ComputedValue = /*#__PURE__*/function () {
@@ -1338,17 +1497,17 @@
 
       // N.B: unminified as it is used by MST
 
-      /**
-       * Create a new computed value based on a function expression.
-       *
-       * The `name` property is for debug purposes only.
-       *
-       * 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 `structuralComparer` deeply compares the structure.
-       * Structural comparison can be convenient if you always produce a 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.
+      /**
+       * Create a new computed value based on a function expression.
+       *
+       * The `name` property is for debug purposes only.
+       *
+       * 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 `structuralComparer` deeply compares the structure.
+       * Structural comparison can be convenient if you always produce a 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(options) {
         this.dependenciesState_ = IDerivationState_.NOT_TRACKING_;
@@ -1407,9 +1566,9 @@
           });
         }
       }
-      /**
-       * Returns the current value of this computed value.
-       * Will evaluate its computation first if needed.
+      /**
+       * Returns the current value of this computed value.
+       * Will evaluate its computation first if needed.
        */;
       _proto.get = function get() {
         if (this.isComputing_) {
@@ -1589,16 +1748,16 @@
     function isCaughtException(e) {
       return e instanceof CaughtException;
     }
-    /**
-     * Finds out whether any dependency of the derivation has actually changed.
-     * If dependenciesState is 1 then it will recalculate dependencies,
-     * if any dependency changed it will propagate it by changing dependenciesState to 2.
-     *
-     * By iterating over the dependencies in the same order that they were reported and
-     * stopping on the first change, all the recalculations are only called for ComputedValues
-     * that will be tracked by derivation. That is because we assume that if the first x
-     * dependencies of the derivation doesn't change then the derivation should run the same way
-     * up until accessing x-th dependency.
+    /**
+     * Finds out whether any dependency of the derivation has actually changed.
+     * If dependenciesState is 1 then it will recalculate dependencies,
+     * if any dependency changed it will propagate it by changing dependenciesState to 2.
+     *
+     * By iterating over the dependencies in the same order that they were reported and
+     * stopping on the first change, all the recalculations are only called for ComputedValues
+     * that will be tracked by derivation. That is because we assume that if the first x
+     * dependencies of the derivation doesn't change then the derivation should run the same way
+     * up until accessing x-th dependency.
      */
     function shouldCompute(derivation) {
       switch (derivation.dependenciesState_) {
@@ -1662,10 +1821,10 @@
         console.warn("[mobx] Observable '" + observable.name_ + "' being read outside a reactive context.");
       }
     }
-    /**
-     * Executes the provided function `f` and tracks which observables are being accessed.
-     * The tracking information is stored on the `derivation` object and the derivation is registered
-     * as observer of any of the accessed observables.
+    /**
+     * Executes the provided function `f` and tracks which observables are being accessed.
+     * The tracking information is stored on the `derivation` object and the derivation is registered
+     * as observer of any of the accessed observables.
      */
     function trackDerivedFunction(derivation, f, context) {
       var prevAllowStateReads = allowStateReadsStart(true);
@@ -1703,10 +1862,10 @@
         console.warn("[mobx] Derivation '" + derivation.name_ + "' is created/updated without reading any observable value.");
       }
     }
-    /**
-     * diffs newObserving with observing.
-     * update observing to be newObserving with unique observables
-     * notify observers that become observed/unobserved
+    /**
+     * diffs newObserving with observing.
+     * update observing to be newObserving with unique observables
+     * notify observers that become observed/unobserved
      */
     function bindDependencies(derivation) {
       // invariant(derivation.dependenciesState !== IDerivationState.NOT_TRACKING, "INTERNAL ERROR bindDependencies expects derivation.dependenciesState !== -1");
@@ -1797,9 +1956,9 @@
     function allowStateReadsEnd(prev) {
       globalState.allowStateReads = prev;
     }
-    /**
-     * needed to keep `lowestObserverState` correct. when changing from (2 or 1) to 0
-     *
+    /**
+     * needed to keep `lowestObserverState` correct. when changing from (2 or 1) to 0
+     *
      */
     function changeDependenciesStateTo0(derivation) {
       if (derivation.dependenciesState_ === IDerivationState_.UP_TO_DATE_) {
@@ -1813,8 +1972,8 @@
       }
     }
 
-    /**
-     * These values will persist if global state is reset
+    /**
+     * These values will persist if global state is reset
      */
     var persistentKeys = ["mobxGuid", "spyListeners", "enforceActions", "computedRequiresReaction", "reactionRequiresObservable", "observableRequiresReaction", "allowStateReads", "disableErrorBoundaries", "runId", "UNCHANGED", "useProxies"];
     var MobXGlobals = function MobXGlobals() {
@@ -1890,9 +2049,9 @@
     function getGlobalState() {
       return globalState;
     }
-    /**
-     * For testing purposes only; this will break the internal state of existing observables,
-     * but can be used to get back at a stable state after throwing errors
+    /**
+     * For testing purposes only; this will break the internal state of existing observables,
+     * but can be used to get back at a stable state after throwing errors
      */
     function resetGlobalState() {
       var defaultGlobals = new MobXGlobals();
@@ -1959,10 +2118,10 @@
         globalState.pendingUnobservations.push(observable);
       }
     }
-    /**
-     * Batch starts a transaction, at least for purposes of memoizing ComputedValues when nothing else does.
-     * During a batch `onBecomeUnobserved` will be called at most once per observable.
-     * Avoids unnecessary recalculations.
+    /**
+     * Batch starts a transaction, at least for purposes of memoizing ComputedValues when nothing else does.
+     * During a batch `onBecomeUnobserved` will be called at most once per observable.
+     * Avoids unnecessary recalculations.
      */
     function startBatch() {
       if (globalState.inBatch === 0) {
@@ -1998,10 +2157,10 @@
       checkIfStateReadsAreAllowed(observable);
       var derivation = globalState.trackingDerivation;
       if (derivation !== null) {
-        /**
-         * Simple optimization, give each derivation run an unique id (runId)
-         * Check if last time this observable was accessed the same runId is used
-         * if this is the case, the relation is already known
+        /**
+         * Simple optimization, give each derivation run an unique id (runId)
+         * Check if last time this observable was accessed the same runId is used
+         * if this is the case, the relation is already known
          */
         if (derivation.runId_ !== observable.lastAccessedBy_) {
           observable.lastAccessedBy_ = derivation.runId_;
@@ -2031,12 +2190,12 @@
     //             observable.lowestObserverState
     //     )
     // }
-    /**
-     * NOTE: current propagation mechanism will in case of self reruning autoruns behave unexpectedly
-     * It will propagate changes to observers from previous run
-     * It's hard or maybe impossible (with reasonable perf) to get it right with current approach
-     * Hopefully self reruning autoruns aren't a feature people should depend on
-     * Also most basic use cases should be ok
+    /**
+     * NOTE: current propagation mechanism will in case of self reruning autoruns behave unexpectedly
+     * It will propagate changes to observers from previous run
+     * It's hard or maybe impossible (with reasonable perf) to get it right with current approach
+     * Hopefully self reruning autoruns aren't a feature people should depend on
+     * Also most basic use cases should be ok
      */
     // Called by Atom when its value changes
     function propagateChanged(observable) {
@@ -2156,8 +2315,8 @@
       _proto.isScheduled = function isScheduled() {
         return this.isScheduled_;
       }
-      /**
-       * internal, use schedule() if you intend to kick off a reaction
+      /**
+       * internal, use schedule() if you intend to kick off a reaction
        */;
       _proto.runReaction_ = function runReaction_() {
         if (!this.isDisposed_) {
@@ -2290,10 +2449,10 @@
         }
       };
     }
-    /**
-     * Magic number alert!
-     * Defines within how many times a reaction is allowed to re-trigger itself
-     * until it is assumed that this is gonna be a never ending loop...
+    /**
+     * Magic number alert!
+     * Defines within how many times a reaction is allowed to re-trigger itself
+     * until it is assumed that this is gonna be a never ending loop...
      */
     var MAX_REACTION_ITERATIONS = 100;
     var reactionScheduler = function reactionScheduler(f) {
@@ -2405,6 +2564,10 @@
         if (isFunction(arg2)) {
           return createAction(arg1, arg2, autoAction);
         }
+        // @action (2022.3 Decorators)
+        if (is20223Decorator(arg2)) {
+          return (autoAction ? autoActionAnnotation : actionAnnotation).decorate_20223_(arg1, arg2);
+        }
         // @action
         if (isStringish(arg2)) {
           return storeAnnotation(arg1, arg2, autoAction ? autoActionAnnotation : actionAnnotation);
@@ -2435,11 +2598,11 @@
       return isFunction(thing) && thing.isMobxAction === true;
     }
 
-    /**
-     * Creates a named reactive view and keeps it alive, so that the view is always
-     * updated if one of the dependencies changes, even when the view is not further used by something else.
-     * @param view The reactive view
-     * @returns disposer function, which can be used to stop the view from being updated in the future.
+    /**
+     * Creates a named reactive view and keeps it alive, so that the view is always
+     * updated if one of the dependencies changes, even when the view is not further used by something else.
+     * @param view The reactive view
+     * @returns disposer function, which can be used to stop the view from being updated in the future.
      */
     function autorun(view, opts) {
       var _opts$name, _opts, _opts2, _opts2$signal, _opts3;
@@ -2695,6 +2858,10 @@
       bound: true
     });
     var flow = /*#__PURE__*/Object.assign(function flow(arg1, arg2) {
+      // @flow (2022.3 Decorators)
+      if (is20223Decorator(arg2)) {
+        return flowAnnotation.decorate_20223_(arg1, arg2);
+      }
       // @flow
       if (isStringish(arg2)) {
         return storeAnnotation(arg1, arg2, flowAnnotation);
@@ -3081,11 +3248,11 @@
         return _res3;
       }
     }
-    /**
-     * Recursively converts an observable to it's non-observable native counterpart.
-     * It does NOT recurse into non-observables, these are left as they are, even if they contain observables.
-     * Computed and other non-enumerable properties are completely ignored.
-     * Complex scenarios require custom solution, eg implementing `toJSON` or using `serializr` lib.
+    /**
+     * Recursively converts an observable to it's non-observable native counterpart.
+     * It does NOT recurse into non-observables, these are left as they are, even if they contain observables.
+     * Computed and other non-enumerable properties are completely ignored.
+     * Complex scenarios require custom solution, eg implementing `toJSON` or using `serializr` lib.
      */
     function toJS(source, options) {
       if ( options) {
@@ -3122,12 +3289,12 @@
       }
     }
 
-    /**
-     * During a transaction no views are updated until the end of the transaction.
-     * The transaction will be run synchronously nonetheless.
-     *
-     * @param action a function that updates some reactive state
-     * @returns any value that was returned by the 'action' parameter.
+    /**
+     * During a transaction no views are updated until the end of the transaction.
+     * The transaction will be run synchronously nonetheless.
+     *
+     * @param action a function that updates some reactive state
+     * @returns any value that was returned by the 'action' parameter.
      */
     function transaction(action, thisArg) {
       if (thisArg === void 0) {
@@ -3715,11 +3882,11 @@
       toJSON: function toJSON() {
         return this.slice();
       },
-      /*
-       * 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
        */
       splice: function splice(index, deleteCount) {
         for (var _len = arguments.length, newItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
@@ -3791,10 +3958,10 @@
         return false;
       }
     };
-    /**
-     * Wrap function from prototype
-     * Without this, everything works as well, but this works
-     * faster as everything works on unproxied values
+    /**
+     * Wrap function from prototype
+     * Without this, everything works as well, but this works
+     * faster as everything works on unproxied values
      */
     addArrayExtension("concat", simpleFunc);
     addArrayExtension("flat", simpleFunc);
@@ -4234,10 +4401,10 @@
       _proto.toJSON = function toJSON() {
         return Array.from(this);
       };
-      /**
-       * 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
        */
       _proto.observe_ = function observe_(listener, fireImmediately) {
         if ( fireImmediately === true) {
@@ -4613,12 +4780,12 @@
         }
         return this.target_[key];
       }
-      /**
-       * @param {PropertyKey} key
-       * @param {any} value
-       * @param {Annotation|boolean} annotation true - use default annotation, false - copy as is
-       * @param {boolean} proxyTrap whether it's called from proxy trap
-       * @returns {boolean|null} true on success, false on failure (proxyTrap + non-configurable), null when cancelled by interceptor
+      /**
+       * @param {PropertyKey} key
+       * @param {any} value
+       * @param {Annotation|boolean} annotation true - use default annotation, false - copy as is
+       * @param {boolean} proxyTrap whether it's called from proxy trap
+       * @returns {boolean|null} true on success, false on failure (proxyTrap + non-configurable), null when cancelled by interceptor
        */;
       _proto.set_ = function set_(key, value, proxyTrap) {
         if (proxyTrap === void 0) {
@@ -4663,9 +4830,9 @@
         }
         return entry.get();
       }
-      /**
-       * @param {PropertyKey} key
-       * @param {Annotation|boolean} annotation true - use default annotation, false - ignore prop
+      /**
+       * @param {PropertyKey} key
+       * @param {Annotation|boolean} annotation true - use default annotation, false - ignore prop
        */;
       _proto.make_ = function make_(key, annotation) {
         if (annotation === true) {
@@ -4693,10 +4860,10 @@
           var descriptor = getDescriptor(source, key);
           if (descriptor) {
             var outcome = annotation.make_(this, key, descriptor, source);
-            if (outcome === 0 /* Cancel */) {
+            if (outcome === 0 /* MakeResult.Cancel */) {
               return;
             }
-            if (outcome === 1 /* Break */) {
+            if (outcome === 1 /* MakeResult.Break */) {
               break;
             }
           }
@@ -4704,12 +4871,12 @@
         }
         recordAnnotationApplied(this, annotation, key);
       }
-      /**
-       * @param {PropertyKey} key
-       * @param {PropertyDescriptor} descriptor
-       * @param {Annotation|boolean} annotation true - use default annotation, false - copy as is
-       * @param {boolean} proxyTrap whether it's called from proxy trap
-       * @returns {boolean|null} true on success, false on failure (proxyTrap + non-configurable), null when cancelled by interceptor
+      /**
+       * @param {PropertyKey} key
+       * @param {PropertyDescriptor} descriptor
+       * @param {Annotation|boolean} annotation true - use default annotation, false - copy as is
+       * @param {boolean} proxyTrap whether it's called from proxy trap
+       * @returns {boolean|null} true on success, false on failure (proxyTrap + non-configurable), null when cancelled by interceptor
        */;
       _proto.extend_ = function extend_(key, descriptor, annotation, proxyTrap) {
         if (proxyTrap === void 0) {
@@ -4728,11 +4895,11 @@
         }
         return outcome;
       }
-      /**
-       * @param {PropertyKey} key
-       * @param {PropertyDescriptor} descriptor
-       * @param {boolean} proxyTrap whether it's called from proxy trap
-       * @returns {boolean|null} true on success, false on failure (proxyTrap + non-configurable), null when cancelled by interceptor
+      /**
+       * @param {PropertyKey} key
+       * @param {PropertyDescriptor} descriptor
+       * @param {boolean} proxyTrap whether it's called from proxy trap
+       * @returns {boolean|null} true on success, false on failure (proxyTrap + non-configurable), null when cancelled by interceptor
        */;
       _proto.defineProperty_ = function defineProperty_(key, descriptor, proxyTrap) {
         if (proxyTrap === void 0) {
@@ -4884,11 +5051,11 @@
         }
         return true;
       }
-      /**
-       * @param {PropertyKey} key
-       * @param {PropertyDescriptor} descriptor
-       * @param {boolean} proxyTrap whether it's called from proxy trap
-       * @returns {boolean|null} true on success, false on failure (proxyTrap + non-configurable), null when cancelled by interceptor
+      /**
+       * @param {PropertyKey} key
+       * @param {PropertyDescriptor} descriptor
+       * @param {boolean} proxyTrap whether it's called from proxy trap
+       * @returns {boolean|null} true on success, false on failure (proxyTrap + non-configurable), null when cancelled by interceptor
        */;
       _proto.delete_ = function delete_(key, proxyTrap) {
         if (proxyTrap === void 0) {
@@ -4977,10 +5144,10 @@
         }
         return true;
       }
-      /**
-       * 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
        */;
       _proto.observe_ = function observe_(callback, fireImmediately) {
         if ( fireImmediately === true) {
@@ -5083,35 +5250,35 @@
       if ( !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__) {
-          const configurable = getDescriptor(adm.target_, key)?.configurable
-          const frozen = Object.isFrozen(adm.target_)
-          const sealed = Object.isSealed(adm.target_)
-          if (!configurable || frozen || sealed) {
-              const fieldName = `${adm.name_}.${key.toString()}`
-              const requestedAnnotationType = annotation.annotationType_
-              let error = `Cannot apply '${requestedAnnotationType}' to '${fieldName}':`
-              if (frozen) {
-                  error += `\nObject is frozen.`
-              }
-              if (sealed) {
-                  error += `\nObject is sealed.`
-              }
-              if (!configurable) {
-                  error += `\nproperty is not configurable.`
-                  // Mention only if caused by us to avoid confusion
-                  if (hasProp(adm.appliedAnnotations!, key)) {
-                      error += `\nTo prevent accidental re-definition of a field by a subclass, `
-                      error += `all annotated fields of non-plain objects (classes) are not configurable.`
-                  }
-              }
-              die(error)
-          }
-      }
+      /*
+      // 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__) {
+          const configurable = getDescriptor(adm.target_, key)?.configurable
+          const frozen = Object.isFrozen(adm.target_)
+          const sealed = Object.isSealed(adm.target_)
+          if (!configurable || frozen || sealed) {
+              const fieldName = `${adm.name_}.${key.toString()}`
+              const requestedAnnotationType = annotation.annotationType_
+              let error = `Cannot apply '${requestedAnnotationType}' to '${fieldName}':`
+              if (frozen) {
+                  error += `\nObject is frozen.`
+              }
+              if (sealed) {
+                  error += `\nObject is sealed.`
+              }
+              if (!configurable) {
+                  error += `\nproperty is not configurable.`
+                  // Mention only if caused by us to avoid confusion
+                  if (hasProp(adm.appliedAnnotations!, key)) {
+                      error += `\nTo prevent accidental re-definition of a field by a subclass, `
+                      error += `all annotated fields of non-plain objects (classes) are not configurable.`
+                  }
+              }
+              die(error)
+          }
+      }
       */
       // Not annotated
       if ( !isOverride(annotation) && hasProp(adm.appliedAnnotations_, key)) {
@@ -5135,10 +5302,10 @@
       /*#__PURE__*/Object.create(p)["0"] = 1;
       return v === false;
     }();
-    /**
-     * This array buffer contains two lists of properties, so that all arrays
-     * can recycle their property definitions, which significantly improves performance of creating
-     * properties on the fly.
+    /**
+     * This array buffer contains two lists of properties, so that all arrays
+     * can recycle their property definitions, which significantly improves performance of creating
+     * properties on the fly.
      */
     var OBSERVABLE_ARRAY_BUFFER_SIZE = 0;
     // Typescript workaround to make sure ObservableArray extends Array
@@ -5335,11 +5502,11 @@
       }
       return named.name_;
     }
-    /**
-     * Helper function for initializing observable structures, it applies:
-     * 1. allowStateChanges so we don't violate enforceActions.
-     * 2. untracked so we don't accidentaly subscribe to anything observable accessed during init in case the observable is created inside derivation.
-     * 3. batch to avoid state version updates
+    /**
+     * Helper function for initializing observable structures, it applies:
+     * 1. allowStateChanges so we don't violate enforceActions.
+     * 2. untracked so we don't accidentaly subscribe to anything observable accessed during init in case the observable is created inside derivation.
+     * 3. batch to avoid state version updates
      */
     function initObservable(cb) {
       var derivation = untrackedStart();
@@ -5521,22 +5688,22 @@
       );
     }
 
-    /**
-     * (c) Michel Weststrate 2015 - 2020
-     * MIT Licensed
-     *
-     * Welcome to the mobx sources! To get a global overview of how MobX internally works,
-     * this is a good place to start:
-     * https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254#.xvbh6qd74
-     *
-     * Source folders:
-     * ===============
-     *
-     * - api/     Most of the public static methods exposed by the module can be found here.
-     * - core/    Implementation of the MobX algorithm; atoms, derivations, reactions, dependency trees, optimizations. Cool stuff can be found here.
-     * - types/   All the magic that is need to have observable objects, arrays and values is in this folder. Including the modifiers like `asFlat`.
-     * - utils/   Utility stuff.
-     *
+    /**
+     * (c) Michel Weststrate 2015 - 2020
+     * MIT Licensed
+     *
+     * Welcome to the mobx sources! To get a global overview of how MobX internally works,
+     * this is a good place to start:
+     * https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254#.xvbh6qd74
+     *
+     * Source folders:
+     * ===============
+     *
+     * - api/     Most of the public static methods exposed by the module can be found here.
+     * - core/    Implementation of the MobX algorithm; atoms, derivations, reactions, dependency trees, optimizations. Cool stuff can be found here.
+     * - types/   All the magic that is need to have observable objects, arrays and values is in this folder. Including the modifiers like `asFlat`.
+     * - utils/   Utility stuff.
+     *
      */
     ["Symbol", "Map", "Set"].forEach(function (m) {
       var g = getGlobal();