mobx 6.10.2 → 6.11.0-pre

package/dist/mobx.esm.js

@@ -3,16 +3,16 @@ var niceErrors = {
   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",
@@ -128,8 +128,8 @@ function warnAboutProxyRequirement(msg) {
 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;
@@ -210,8 +210,8 @@ function isES6Set(thing) {
   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);
@@ -354,20 +354,24 @@ function _toPropertyKey(arg) {
 }
 
 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)) {
@@ -393,27 +397,37 @@ function assertNotDecorated(prototype, annotation, key) {
     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 (process.env.NODE_ENV !== "production" && !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 (process.env.NODE_ENV !== "production" && !types.includes(context.kind)) {
+    die("Decorator may not be used like this");
+  }
+}
 
 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) {
@@ -448,15 +462,15 @@ var Atom = /*#__PURE__*/function () {
       });
     }
   }
-  /**
-   * 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) {
@@ -604,7 +618,8 @@ var OVERRIDE = "override";
 var override = /*#__PURE__*/createDecoratorAnnotation({
   annotationType_: OVERRIDE,
   make_: make_,
-  extend_: extend_
+  extend_: extend_,
+  decorate_20223_: decorate_20223_
 });
 function isOverride(annotation) {
   return annotation.annotationType_ === OVERRIDE;
@@ -618,47 +633,87 @@ function make_(adm, key) {
   if (process.env.NODE_ENV !== "production" && !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) {
+  if (process.env.NODE_ENV !== "production") {
+    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;
@@ -699,32 +754,33 @@ function createFlowAnnotation(name, options) {
     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) {
@@ -732,6 +788,26 @@ function extend_$2(adm, key, descriptor, proxyTrap) {
   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;
+  if (process.env.NODE_ENV !== "production") {
+    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;
@@ -776,11 +852,12 @@ function createComputedAnnotation(name, options) {
     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) {
@@ -790,6 +867,26 @@ function extend_$3(adm, key, descriptor, proxyTrap) {
     set: descriptor.set
   }), proxyTrap);
 }
+function decorate_20223_$3(get, context) {
+  if (process.env.NODE_ENV !== "production") {
+    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 = process.env.NODE_ENV !== "production" ? adm.name_ + "." + key.toString() : "ObservableObject." + 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;
@@ -803,11 +900,12 @@ function createObservableAnnotation(name, options) {
     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) {
@@ -815,6 +913,58 @@ function extend_$4(adm, key, descriptor, proxyTrap) {
   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 (process.env.NODE_ENV !== "production") {
+    assert20223DecoratorType(context, ["accessor", "field"]);
+  }
+  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;
+  }
+  // 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.
+  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, process.env.NODE_ENV !== "production" ? adm.name_ + "." + name.toString() : "ObservableObject." + 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 (process.env.NODE_ENV !== "production" && !("value" in descriptor)) {
@@ -829,7 +979,8 @@ function createAutoAnnotation(options) {
     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) {
@@ -847,14 +998,14 @@ function make_$5(adm, key, descriptor, source) {
       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") {
@@ -901,6 +1052,9 @@ function extend_$5(adm, key, descriptor, proxyTrap) {
   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";
@@ -940,11 +1094,15 @@ function getEnhancerFromAnnotation(annotation) {
   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);
@@ -1014,11 +1172,15 @@ var computedAnnotation = /*#__PURE__*/createComputedAnnotation(COMPUTED);
 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);
@@ -1305,24 +1467,24 @@ var ObservableValue = /*#__PURE__*/function (_Atom) {
 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 () {
@@ -1333,17 +1495,17 @@ var ComputedValue = /*#__PURE__*/function () {
 
   // 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_;
@@ -1402,9 +1564,9 @@ var ComputedValue = /*#__PURE__*/function () {
       });
     }
   }
-  /**
-   * 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_) {
@@ -1587,16 +1749,16 @@ var CaughtException = function CaughtException(cause) {
 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_) {
@@ -1663,10 +1825,10 @@ function checkIfStateReadsAreAllowed(observable) {
     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);
@@ -1707,10 +1869,10 @@ function warnAboutDerivationWithoutDependencies(derivation) {
     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");
@@ -1801,9 +1963,9 @@ function allowStateReadsStart(allowStateReads) {
 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_) {
@@ -1817,8 +1979,8 @@ function changeDependenciesStateTo0(derivation) {
   }
 }
 
-/**
- * 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() {
@@ -1894,9 +2056,9 @@ function isolateGlobalState() {
 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();
@@ -1963,10 +2125,10 @@ function queueForUnobservation(observable) {
     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) {
@@ -2002,10 +2164,10 @@ function reportObserved(observable) {
   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_;
@@ -2035,12 +2197,12 @@ function reportObserved(observable) {
 //             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) {
@@ -2160,8 +2322,8 @@ var Reaction = /*#__PURE__*/function () {
   _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_) {
@@ -2294,10 +2456,10 @@ function onReactionError(handler) {
     }
   };
 }
-/**
- * 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) {
@@ -2421,6 +2583,10 @@ function createActionFactory(autoAction) {
     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);
@@ -2451,11 +2617,11 @@ function isAction(thing) {
   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;
@@ -2711,6 +2877,10 @@ var flowBoundAnnotation = /*#__PURE__*/createFlowAnnotation("flow.bound", {
   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);
@@ -3097,11 +3267,11 @@ function toJSHelper(source, __alreadySeen) {
     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 (process.env.NODE_ENV !== "production" && options) {
@@ -3141,12 +3311,12 @@ function getAtomFromArgs(args) {
   }
 }
 
-/**
- * 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) {
@@ -3734,11 +3904,11 @@ var arrayExtensions = {
   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++) {
@@ -3810,10 +3980,10 @@ var arrayExtensions = {
     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);
@@ -4253,10 +4423,10 @@ var ObservableMap = /*#__PURE__*/function () {
   _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 (process.env.NODE_ENV !== "production" && fireImmediately === true) {
@@ -4632,12 +4802,12 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     }
     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) {
@@ -4682,9 +4852,9 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     }
     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) {
@@ -4712,10 +4882,10 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
       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;
         }
       }
@@ -4723,12 +4893,12 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     }
     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) {
@@ -4747,11 +4917,11 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     }
     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) {
@@ -4903,11 +5073,11 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     }
     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) {
@@ -4996,10 +5166,10 @@ var ObservableObjectAdministration = /*#__PURE__*/function () {
     }
     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 (process.env.NODE_ENV !== "production" && fireImmediately === true) {
@@ -5102,35 +5272,35 @@ function assertAnnotable(adm, annotation, key) {
   if (process.env.NODE_ENV !== "production" && !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 (process.env.NODE_ENV !== "production" && !isOverride(annotation) && hasProp(adm.appliedAnnotations_, key)) {
@@ -5154,10 +5324,10 @@ var safariPrototypeSetterInheritanceBug = /*#__PURE__*/function () {
   /*#__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
@@ -5354,11 +5524,11 @@ function getDebugName(thing, property) {
   }
   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();
@@ -5540,22 +5710,22 @@ function isAnnotation(thing) {
   );
 }
 
-/**
- * (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();