Socket
Socket
Sign inDemoInstall

mobx-react

Package Overview
Dependencies
Maintainers
4
Versions
144
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mobx-react - npm Package Compare versions

Comparing version 8.0.0 to 9.0.0

13

CHANGELOG.md
# mobx-react
## 9.0.0
### Major Changes
- [`473cb3f5`](https://github.com/mobxjs/mobx/commit/473cb3f5fc8bf43abdd1c9c7857fe2820d2291fe) [#3718](https://github.com/mobxjs/mobx/pull/3718) Thanks [@mweststrate](https://github.com/mweststrate)! - - Fixed `observer` in `StrictMode` #3671
- **[BREAKING CHANGE]** Class component's `props`/`state`/`context` are no longer observable. Attempt to use these in any derivation other than component's `render` throws and error. For details see https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations
- Extending or applying `observer` classes is now explicitly forbidden
### Patch Changes
- Updated dependencies [[`58bb052c`](https://github.com/mobxjs/mobx/commit/58bb052ca41b8592e5bd5c3003b68ec52da53f33), [`473cb3f5`](https://github.com/mobxjs/mobx/commit/473cb3f5fc8bf43abdd1c9c7857fe2820d2291fe)]:
- mobx-react-lite@4.0.3
## 8.0.0

@@ -4,0 +17,0 @@

74

dist/mobxreact.cjs.development.js

@@ -144,2 +144,10 @@ 'use strict';

var isMobXReactObserverSymbol = /*#__PURE__*/Symbol("isMobXReactObserver");
var observablePropDescriptors;
{
observablePropDescriptors = {
props: /*#__PURE__*/createObservablePropDescriptor("props"),
state: /*#__PURE__*/createObservablePropDescriptor("state"),
context: /*#__PURE__*/createObservablePropDescriptor("context")
};
}
function getAdministration(component) {

@@ -157,7 +165,3 @@ var _component$administra;

props: undefined,
context: undefined,
propsAtom: mobx.createAtom("props"),
stateAtom: mobx.createAtom("state"),
contextAtom: mobx.createAtom("context"),
isUpdating: false
context: undefined
};

@@ -169,3 +173,3 @@ }

var displayName = getDisplayName(componentClass);
console.warn("The provided component class (" + displayName + ")\n has already been declared as an observer component.");
throw new Error("The provided component class (" + displayName + ") has already been declared as an observer component.");
} else {

@@ -185,11 +189,5 @@ componentClass[isMobXReactObserverSymbol] = true;

}
// this.props and this.state are made observable, just to make sure @computed fields that
// are defined inside the component, and which rely on state or props, re-compute if state or props change
// (otherwise the computed wouldn't update and become stale on props change, since props are not observable)
// However, this solution is not without it's own problems: https://github.com/mobxjs/mobx-react/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aobservable-props-or-not+
Object.defineProperties(prototype, {
props: observablePropsDescriptor,
state: observableStateDescriptor,
context: observableContextDescriptor
});
{
Object.defineProperties(prototype, observablePropDescriptors);
}
var originalRender = prototype.render;

@@ -209,4 +207,9 @@ if (typeof originalRender !== "function") {

};
patch(prototype, "componentDidMount", function () {
var originalComponentDidMount = prototype.componentDidMount;
prototype.componentDidMount = function () {
var _this = this;
if ( this.componentDidMount !== Object.getPrototypeOf(this).componentDidMount) {
var _displayName2 = getDisplayName(componentClass);
throw new Error("[mobx-react] `observer(" + _displayName2 + ").componentDidMount` must be defined on prototype." + "\n`componentDidMount = () => {}` or `componentDidMount = function() {}` is not supported.");
}
// `componentDidMount` may not be called at all. React can abandon the instance after `render`.

@@ -242,3 +245,5 @@ // That's why we use finalization registry to dispose reaction created during render.

}
});
return originalComponentDidMount == null ? void 0 : originalComponentDidMount.apply(this, arguments);
};
// TODO@major Overly complicated "patch" is only needed to support the deprecated @disposeOnUnmount
patch(prototype, "componentWillUnmount", function () {

@@ -294,7 +299,2 @@ var _admin$reaction;

return new mobx.Reaction(admin.name + ".render()", function () {
if (admin.isUpdating) {
// Reaction is suppressed when setting new state/props/context,
// this is when component is already being updated.
return;
}
if (!admin.mounted) {

@@ -307,4 +307,2 @@ // This is neccessary to avoid react warning about calling forceUpdate on component that isn't mounted yet.

try {
// forceUpdate sets new `props`, since we made it observable, it would `reportChanged`, causing a loop.
admin.isUpdating = true;
admin.forceUpdate == null ? void 0 : admin.forceUpdate();

@@ -315,4 +313,2 @@ } catch (error) {

admin.reaction = null;
} finally {
admin.isUpdating = false;
}

@@ -336,3 +332,2 @@ });

function createObservablePropDescriptor(key) {
var atomKey = key + "Atom";
return {

@@ -343,28 +338,13 @@ configurable: true,

var admin = getAdministration(this);
var prevReadState = mobx._allowStateReadsStart(true);
admin[atomKey].reportObserved();
mobx._allowStateReadsEnd(prevReadState);
var derivation = mobx._getGlobalState().trackingDerivation;
if (derivation && derivation !== admin.reaction) {
throw new Error("[mobx-react] Cannot read \"" + admin.name + "." + key + "\" in a reactive context, as it isn't observable.\n Please use component lifecycle method to copy the value into a local observable first.\n See https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations");
}
return admin[key];
},
set: function set(value) {
var admin = getAdministration(this);
// forceUpdate issued by reaction sets new props.
// It sets isUpdating to true to prevent loop.
if (!admin.isUpdating && !shallowEqual(admin[key], value)) {
admin[key] = value;
// This notifies all observers including our component,
// but we don't want to cause `forceUpdate`, because component is already updating,
// therefore supress component reaction.
admin.isUpdating = true;
admin[atomKey].reportChanged();
admin.isUpdating = false;
} else {
admin[key] = value;
}
getAdministration(this)[key] = value;
}
};
}
var observablePropsDescriptor = /*#__PURE__*/createObservablePropDescriptor("props");
var observableStateDescriptor = /*#__PURE__*/createObservablePropDescriptor("state");
var observableContextDescriptor = /*#__PURE__*/createObservablePropDescriptor("context");

@@ -371,0 +351,0 @@ /**

2

dist/mobxreact.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("mobx"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("mobx-react-lite");function i(e,r){if(a(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!a(e[t[o]],r[t[o]]))return!1;return!0}function a(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var s={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1},c=Symbol("patchMixins"),u=Symbol("patchedDefinition");function p(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function l(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];p.call.apply(p,[this,e,r].concat(n))}}function f(e,r,t){var n=function(e,r){var t=e[c]=e[c]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[u]){var i=function e(r,t,n,o,i){var a,s=l(i,o);return(a={})[u]=!0,a.get=function(){return s},a.set=function(i){if(this===r)s=l(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var b=Symbol("ObserverAdministration"),d=Symbol("isMobXReactObserver");function m(e){var t;return null!=(t=e[b])?t:e[b]={reaction:null,mounted:!1,forceUpdate:null,name:y(e.constructor),state:void 0,props:void 0,context:void 0,propsAtom:r.createAtom("props"),stateAtom:r.createAtom("state"),contextAtom:r.createAtom("context"),isUpdating:!1}}function y(e){return e.displayName||e.name||"<component>"}function v(e){var t=e.bind(this),n=m(this);return function(){n.reaction||(n.reaction=function(e){return new r.Reaction(e.name+".render()",(function(){if(!e.isUpdating&&e.mounted)try{e.isUpdating=!0,null==e.forceUpdate||e.forceUpdate()}catch(t){var r;null==(r=e.reaction)||r.dispose(),e.reaction=null}finally{e.isUpdating=!1}}))}(n),n.mounted||o._observerFinalizationRegistry.register(this,n,this));var e=void 0,i=void 0;if(n.reaction.track((function(){try{i=r._allowStateChanges(!1,t)}catch(r){e=r}})),e)throw e;return i}}function h(e,r){return o.isUsingStaticRendering()&&console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."),this.state!==r||!i(this.props,e)}function g(e){var t=e+"Atom";return{configurable:!0,enumerable:!0,get:function(){var n=m(this),o=r._allowStateReadsStart(!0);return n[t].reportObserved(),r._allowStateReadsEnd(o),n[e]},set:function(r){var n=m(this);n.isUpdating||i(n[e],r)?n[e]=r:(n[e]=r,n.isUpdating=!0,n[t].reportChanged(),n.isUpdating=!1)}}}var O=g("props"),j=g("state"),w=g("context");function x(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(t.Component,e)||Object.prototype.isPrototypeOf.call(t.PureComponent,e)?function(e){var r=e.prototype;if(e[d]){var n=y(e);console.warn("The provided component class ("+n+")\n has already been declared as an observer component.")}else e[d]=!0;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==h)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=h;Object.defineProperties(r,{props:O,state:j,context:w});var i=r.render;if("function"!=typeof i){var a=y(e);throw new Error("[mobx-react] class component ("+a+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}return r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:o.isUsingStaticRendering()?i:v.call(this,i)}),this.render()},f(r,"componentDidMount",(function(){var e=this,r=m(this);r.mounted=!0,o._observerFinalizationRegistry.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction||r.forceUpdate()})),f(r,"componentWillUnmount",(function(){var e;if(!o.isUsingStaticRendering()){var r=m(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1}})),e}(e):o.observer(e)}function P(){return(P=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var U=["children"],A=n.createContext({});function S(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,U),o=n.useContext(A),i=n.useRef(P({},o,t));return n.createElement(A.Provider,{value:i.current},r)}function R(e,r,t,o){var i,a,c,u=n.forwardRef((function(t,o){var i=P({},t),a=n.useContext(A);return Object.assign(i,e(a||{},i)||{}),o&&(i.ref=o),n.createElement(r,i)}));return o&&(u=x(u)),u.isMobxInjector=!0,i=r,a=u,c=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){s[e]||-1!==c.indexOf(e)||Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(i,e))})),u.wrappedComponent=r,u.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),u}function C(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}S.displayName="MobXProvider";var E=Number.parseInt(n.version.split(".")[0]),k=!1,M=Symbol("disposeOnUnmountProto"),T=Symbol("disposeOnUnmountInst");function _(){var e=this;[].concat(this[M]||[],this[T]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function D(e){function t(t,n,o,i,a,s){for(var c=arguments.length,u=new Array(c>6?c-6:0),p=6;p<c;p++)u[p-6]=arguments[p];return r.untracked((function(){return i=i||"<<anonymous>>",s=s||o,null==n[o]?t?new Error("The "+a+" `"+s+"` is marked as required in `"+i+"`, but its value is `"+(null===n[o]?"null":"undefined")+"`."):null:e.apply(void 0,[n,o,i,a,s].concat(u))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function q(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function I(e,t){return D((function(n,o,i,a,s){return r.untracked((function(){if(e&&q(n[o])===t.toLowerCase())return null;var a;switch(t){case"Array":a=r.isObservableArray;break;case"Object":a=r.isObservableObject;break;case"Map":a=r.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var c=n[o];if(!a(c)){var u=function(e){var r=q(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(c),p=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+s+"` of type `"+u+"` supplied to `"+i+"`, expected `mobx.Observable"+t+"`"+p+".")}return null}))}))}function N(e,t){return D((function(n,o,i,a,s){for(var c=arguments.length,u=new Array(c>5?c-5:0),p=5;p<c;p++)u[p-5]=arguments[p];return r.untracked((function(){if("function"!=typeof t)return new Error("Property `"+s+"` of component `"+i+"` has invalid PropType notation.");var r=I(e,"Array")(n,o,i,a,s);if(r instanceof Error)return r;for(var c=n[o],p=0;p<c.length;p++)if((r=t.apply(void 0,[c,p,i,a,s+"["+p+"]"].concat(u)))instanceof Error)return r;return null}))}))}var L={observableArray:I(!1,"Array"),observableArrayOf:N.bind(null,!1),observableMap:I(!1,"Map"),observableObject:I(!1,"Object"),arrayOrObservableArray:I(!0,"Array"),arrayOrObservableArrayOf:N.bind(null,!0),objectOrObservableObject:I(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!r.observable)throw new Error("mobx-react requires mobx to be available");Object.defineProperty(exports,"Observer",{enumerable:!0,get:function(){return o.Observer}}),Object.defineProperty(exports,"enableStaticRendering",{enumerable:!0,get:function(){return o.enableStaticRendering}}),Object.defineProperty(exports,"isUsingStaticRendering",{enumerable:!0,get:function(){return o.isUsingStaticRendering}}),Object.defineProperty(exports,"observerBatching",{enumerable:!0,get:function(){return o.observerBatching}}),Object.defineProperty(exports,"useAsObservableSource",{enumerable:!0,get:function(){return o.useAsObservableSource}}),Object.defineProperty(exports,"useLocalObservable",{enumerable:!0,get:function(){return o.useLocalObservable}}),Object.defineProperty(exports,"useLocalStore",{enumerable:!0,get:function(){return o.useLocalStore}}),Object.defineProperty(exports,"useObserver",{enumerable:!0,get:function(){return o.useObserver}}),Object.defineProperty(exports,"useStaticRendering",{enumerable:!0,get:function(){return o.useStaticRendering}}),exports.MobXProviderContext=A,exports.PropTypes=L,exports.Provider=S,exports.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));k||(E>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),k=!0);var o=Object.getPrototypeOf(r).constructor,i=Object.getPrototypeOf(r.constructor),a=Object.getPrototypeOf(Object.getPrototypeOf(r));if(o!==n.Component&&o!==n.PureComponent&&i!==n.Component&&i!==n.PureComponent&&a!==n.Component&&a!==n.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof t&&"function"!=typeof t&&!Array.isArray(t))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var s=!!r[M]||!!r[T];return("string"==typeof t?r[M]||(r[M]=[]):r[T]||(r[T]=[])).push(t),s||f(r,"componentWillUnmount",_),"string"!=typeof t?t:void 0},exports.inject=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return R(n,e,n.name,!0)}}return function(e){return R(C(r),e,r.join("-"),!1)}},exports.observer=x;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("mobx"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("mobx-react-lite");function i(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var a={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1},c=Symbol("patchMixins"),s=Symbol("patchedDefinition");function u(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function l(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];u.call.apply(u,[this,e,r].concat(n))}}function p(e,r,t){var n=function(e,r){var t=e[c]=e[c]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[s]){var i=function e(r,t,n,o,i){var a,c=l(i,o);return(a={})[s]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=l(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var f=Symbol("ObserverAdministration"),b=Symbol("isMobXReactObserver");function d(e){var r;return null!=(r=e[f])?r:e[f]={reaction:null,mounted:!1,forceUpdate:null,name:y(e.constructor),state:void 0,props:void 0,context:void 0}}function y(e){return e.displayName||e.name||"<component>"}function m(e){var t=e.bind(this),n=d(this);return function(){n.reaction||(n.reaction=function(e){return new r.Reaction(e.name+".render()",(function(){if(e.mounted)try{null==e.forceUpdate||e.forceUpdate()}catch(t){var r;null==(r=e.reaction)||r.dispose(),e.reaction=null}}))}(n),n.mounted||o._observerFinalizationRegistry.register(this,n,this));var e=void 0,i=void 0;if(n.reaction.track((function(){try{i=r._allowStateChanges(!1,t)}catch(r){e=r}})),e)throw e;return i}}function v(e,r){return o.isUsingStaticRendering()&&console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."),this.state!==r||!function(e,r){if(i(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!i(e[t[o]],r[t[o]]))return!1;return!0}(this.props,e)}function h(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(t.Component,e)||Object.prototype.isPrototypeOf.call(t.PureComponent,e)?function(e){var r=e.prototype;if(e[b]){var n=y(e);throw new Error("The provided component class ("+n+") has already been declared as an observer component.")}if(e[b]=!0,r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==v)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=v;var i=r.render;if("function"!=typeof i){var a=y(e);throw new Error("[mobx-react] class component ("+a+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:o.isUsingStaticRendering()?i:m.call(this,i)}),this.render()};var c=r.componentDidMount;return r.componentDidMount=function(){var e=this,r=d(this);return r.mounted=!0,o._observerFinalizationRegistry.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction||r.forceUpdate(),null==c?void 0:c.apply(this,arguments)},p(r,"componentWillUnmount",(function(){var e;if(!o.isUsingStaticRendering()){var r=d(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1}})),e}(e):o.observer(e)}function O(){return(O=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var g=["children"],j=n.createContext({});function w(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,g),o=n.useContext(j),i=n.useRef(O({},o,t));return n.createElement(j.Provider,{value:i.current},r)}function x(e,r,t,o){var i,c,s,u=n.forwardRef((function(t,o){var i=O({},t),a=n.useContext(j);return Object.assign(i,e(a||{},i)||{}),o&&(i.ref=o),n.createElement(r,i)}));return o&&(u=h(u)),u.isMobxInjector=!0,i=r,c=u,s=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){a[e]||-1!==s.indexOf(e)||Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(i,e))})),u.wrappedComponent=r,u.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),u}function P(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}w.displayName="MobXProvider";var S=Number.parseInt(n.version.split(".")[0]),C=!1,R=Symbol("disposeOnUnmountProto"),U=Symbol("disposeOnUnmountInst");function A(){var e=this;[].concat(this[R]||[],this[U]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function E(e){function t(t,n,o,i,a,c){for(var s=arguments.length,u=new Array(s>6?s-6:0),l=6;l<s;l++)u[l-6]=arguments[l];return r.untracked((function(){return i=i||"<<anonymous>>",c=c||o,null==n[o]?t?new Error("The "+a+" `"+c+"` is marked as required in `"+i+"`, but its value is `"+(null===n[o]?"null":"undefined")+"`."):null:e.apply(void 0,[n,o,i,a,c].concat(u))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function k(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function M(e,t){return E((function(n,o,i,a,c){return r.untracked((function(){if(e&&k(n[o])===t.toLowerCase())return null;var a;switch(t){case"Array":a=r.isObservableArray;break;case"Object":a=r.isObservableObject;break;case"Map":a=r.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var s=n[o];if(!a(s)){var u=function(e){var r=k(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(s),l=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+c+"` of type `"+u+"` supplied to `"+i+"`, expected `mobx.Observable"+t+"`"+l+".")}return null}))}))}function T(e,t){return E((function(n,o,i,a,c){for(var s=arguments.length,u=new Array(s>5?s-5:0),l=5;l<s;l++)u[l-5]=arguments[l];return r.untracked((function(){if("function"!=typeof t)return new Error("Property `"+c+"` of component `"+i+"` has invalid PropType notation.");var r=M(e,"Array")(n,o,i,a,c);if(r instanceof Error)return r;for(var s=n[o],l=0;l<s.length;l++)if((r=t.apply(void 0,[s,l,i,a,c+"["+l+"]"].concat(u)))instanceof Error)return r;return null}))}))}var D={observableArray:M(!1,"Array"),observableArrayOf:T.bind(null,!1),observableMap:M(!1,"Map"),observableObject:M(!1,"Object"),arrayOrObservableArray:M(!0,"Array"),arrayOrObservableArrayOf:T.bind(null,!0),objectOrObservableObject:M(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!r.observable)throw new Error("mobx-react requires mobx to be available");Object.defineProperty(exports,"Observer",{enumerable:!0,get:function(){return o.Observer}}),Object.defineProperty(exports,"enableStaticRendering",{enumerable:!0,get:function(){return o.enableStaticRendering}}),Object.defineProperty(exports,"isUsingStaticRendering",{enumerable:!0,get:function(){return o.isUsingStaticRendering}}),Object.defineProperty(exports,"observerBatching",{enumerable:!0,get:function(){return o.observerBatching}}),Object.defineProperty(exports,"useAsObservableSource",{enumerable:!0,get:function(){return o.useAsObservableSource}}),Object.defineProperty(exports,"useLocalObservable",{enumerable:!0,get:function(){return o.useLocalObservable}}),Object.defineProperty(exports,"useLocalStore",{enumerable:!0,get:function(){return o.useLocalStore}}),Object.defineProperty(exports,"useObserver",{enumerable:!0,get:function(){return o.useObserver}}),Object.defineProperty(exports,"useStaticRendering",{enumerable:!0,get:function(){return o.useStaticRendering}}),exports.MobXProviderContext=j,exports.PropTypes=D,exports.Provider=w,exports.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));C||(S>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),C=!0);var o=Object.getPrototypeOf(r).constructor,i=Object.getPrototypeOf(r.constructor),a=Object.getPrototypeOf(Object.getPrototypeOf(r));if(o!==n.Component&&o!==n.PureComponent&&i!==n.Component&&i!==n.PureComponent&&a!==n.Component&&a!==n.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof t&&"function"!=typeof t&&!Array.isArray(t))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var c=!!r[R]||!!r[U];return("string"==typeof t?r[R]||(r[R]=[]):r[U]||(r[U]=[])).push(t),c||p(r,"componentWillUnmount",A),"string"!=typeof t?t:void 0},exports.inject=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return x(n,e,n.name,!0)}}return function(e){return x(P(r),e,r.join("-"),!1)}},exports.observer=h;
//# sourceMappingURL=mobxreact.cjs.production.min.js.map

76

dist/mobxreact.esm.development.js

@@ -1,2 +0,2 @@

import { createAtom, _allowStateReadsStart, _allowStateReadsEnd, Reaction, _allowStateChanges, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
import { _getGlobalState, Reaction, _allowStateChanges, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
import React__default, { PureComponent, Component } from 'react';

@@ -138,2 +138,10 @@ import { isUsingStaticRendering, _observerFinalizationRegistry, observer as observer$1 } from 'mobx-react-lite';

var isMobXReactObserverSymbol = /*#__PURE__*/Symbol("isMobXReactObserver");
var observablePropDescriptors;
{
observablePropDescriptors = {
props: /*#__PURE__*/createObservablePropDescriptor("props"),
state: /*#__PURE__*/createObservablePropDescriptor("state"),
context: /*#__PURE__*/createObservablePropDescriptor("context")
};
}
function getAdministration(component) {

@@ -151,7 +159,3 @@ var _component$administra;

props: undefined,
context: undefined,
propsAtom: createAtom("props"),
stateAtom: createAtom("state"),
contextAtom: createAtom("context"),
isUpdating: false
context: undefined
};

@@ -163,3 +167,3 @@ }

var displayName = getDisplayName(componentClass);
console.warn("The provided component class (" + displayName + ")\n has already been declared as an observer component.");
throw new Error("The provided component class (" + displayName + ") has already been declared as an observer component.");
} else {

@@ -179,11 +183,5 @@ componentClass[isMobXReactObserverSymbol] = true;

}
// this.props and this.state are made observable, just to make sure @computed fields that
// are defined inside the component, and which rely on state or props, re-compute if state or props change
// (otherwise the computed wouldn't update and become stale on props change, since props are not observable)
// However, this solution is not without it's own problems: https://github.com/mobxjs/mobx-react/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aobservable-props-or-not+
Object.defineProperties(prototype, {
props: observablePropsDescriptor,
state: observableStateDescriptor,
context: observableContextDescriptor
});
{
Object.defineProperties(prototype, observablePropDescriptors);
}
var originalRender = prototype.render;

@@ -203,4 +201,9 @@ if (typeof originalRender !== "function") {

};
patch(prototype, "componentDidMount", function () {
var originalComponentDidMount = prototype.componentDidMount;
prototype.componentDidMount = function () {
var _this = this;
if ( this.componentDidMount !== Object.getPrototypeOf(this).componentDidMount) {
var _displayName2 = getDisplayName(componentClass);
throw new Error("[mobx-react] `observer(" + _displayName2 + ").componentDidMount` must be defined on prototype." + "\n`componentDidMount = () => {}` or `componentDidMount = function() {}` is not supported.");
}
// `componentDidMount` may not be called at all. React can abandon the instance after `render`.

@@ -236,3 +239,5 @@ // That's why we use finalization registry to dispose reaction created during render.

}
});
return originalComponentDidMount == null ? void 0 : originalComponentDidMount.apply(this, arguments);
};
// TODO@major Overly complicated "patch" is only needed to support the deprecated @disposeOnUnmount
patch(prototype, "componentWillUnmount", function () {

@@ -288,7 +293,2 @@ var _admin$reaction;

return new Reaction(admin.name + ".render()", function () {
if (admin.isUpdating) {
// Reaction is suppressed when setting new state/props/context,
// this is when component is already being updated.
return;
}
if (!admin.mounted) {

@@ -301,4 +301,2 @@ // This is neccessary to avoid react warning about calling forceUpdate on component that isn't mounted yet.

try {
// forceUpdate sets new `props`, since we made it observable, it would `reportChanged`, causing a loop.
admin.isUpdating = true;
admin.forceUpdate == null ? void 0 : admin.forceUpdate();

@@ -309,4 +307,2 @@ } catch (error) {

admin.reaction = null;
} finally {
admin.isUpdating = false;
}

@@ -330,3 +326,2 @@ });

function createObservablePropDescriptor(key) {
var atomKey = key + "Atom";
return {

@@ -337,28 +332,13 @@ configurable: true,

var admin = getAdministration(this);
var prevReadState = _allowStateReadsStart(true);
admin[atomKey].reportObserved();
_allowStateReadsEnd(prevReadState);
var derivation = _getGlobalState().trackingDerivation;
if (derivation && derivation !== admin.reaction) {
throw new Error("[mobx-react] Cannot read \"" + admin.name + "." + key + "\" in a reactive context, as it isn't observable.\n Please use component lifecycle method to copy the value into a local observable first.\n See https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations");
}
return admin[key];
},
set: function set(value) {
var admin = getAdministration(this);
// forceUpdate issued by reaction sets new props.
// It sets isUpdating to true to prevent loop.
if (!admin.isUpdating && !shallowEqual(admin[key], value)) {
admin[key] = value;
// This notifies all observers including our component,
// but we don't want to cause `forceUpdate`, because component is already updating,
// therefore supress component reaction.
admin.isUpdating = true;
admin[atomKey].reportChanged();
admin.isUpdating = false;
} else {
admin[key] = value;
}
getAdministration(this)[key] = value;
}
};
}
var observablePropsDescriptor = /*#__PURE__*/createObservablePropDescriptor("props");
var observableStateDescriptor = /*#__PURE__*/createObservablePropDescriptor("state");
var observableContextDescriptor = /*#__PURE__*/createObservablePropDescriptor("context");

@@ -365,0 +345,0 @@ /**

76

dist/mobxreact.esm.js

@@ -1,2 +0,2 @@

import { createAtom, _allowStateReadsStart, _allowStateReadsEnd, Reaction, _allowStateChanges, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
import { _getGlobalState, Reaction, _allowStateChanges, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
import React__default, { PureComponent, Component } from 'react';

@@ -138,2 +138,10 @@ import { isUsingStaticRendering, _observerFinalizationRegistry, observer as observer$1 } from 'mobx-react-lite';

var isMobXReactObserverSymbol = /*#__PURE__*/Symbol("isMobXReactObserver");
var observablePropDescriptors;
if (process.env.NODE_ENV !== "production") {
observablePropDescriptors = {
props: /*#__PURE__*/createObservablePropDescriptor("props"),
state: /*#__PURE__*/createObservablePropDescriptor("state"),
context: /*#__PURE__*/createObservablePropDescriptor("context")
};
}
function getAdministration(component) {

@@ -151,7 +159,3 @@ var _component$administra;

props: undefined,
context: undefined,
propsAtom: createAtom("props"),
stateAtom: createAtom("state"),
contextAtom: createAtom("context"),
isUpdating: false
context: undefined
};

@@ -163,3 +167,3 @@ }

var displayName = getDisplayName(componentClass);
console.warn("The provided component class (" + displayName + ")\n has already been declared as an observer component.");
throw new Error("The provided component class (" + displayName + ") has already been declared as an observer component.");
} else {

@@ -179,11 +183,5 @@ componentClass[isMobXReactObserverSymbol] = true;

}
// this.props and this.state are made observable, just to make sure @computed fields that
// are defined inside the component, and which rely on state or props, re-compute if state or props change
// (otherwise the computed wouldn't update and become stale on props change, since props are not observable)
// However, this solution is not without it's own problems: https://github.com/mobxjs/mobx-react/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aobservable-props-or-not+
Object.defineProperties(prototype, {
props: observablePropsDescriptor,
state: observableStateDescriptor,
context: observableContextDescriptor
});
if (process.env.NODE_ENV !== "production") {
Object.defineProperties(prototype, observablePropDescriptors);
}
var originalRender = prototype.render;

@@ -203,4 +201,9 @@ if (typeof originalRender !== "function") {

};
patch(prototype, "componentDidMount", function () {
var originalComponentDidMount = prototype.componentDidMount;
prototype.componentDidMount = function () {
var _this = this;
if (process.env.NODE_ENV !== "production" && this.componentDidMount !== Object.getPrototypeOf(this).componentDidMount) {
var _displayName2 = getDisplayName(componentClass);
throw new Error("[mobx-react] `observer(" + _displayName2 + ").componentDidMount` must be defined on prototype." + "\n`componentDidMount = () => {}` or `componentDidMount = function() {}` is not supported.");
}
// `componentDidMount` may not be called at all. React can abandon the instance after `render`.

@@ -236,3 +239,5 @@ // That's why we use finalization registry to dispose reaction created during render.

}
});
return originalComponentDidMount == null ? void 0 : originalComponentDidMount.apply(this, arguments);
};
// TODO@major Overly complicated "patch" is only needed to support the deprecated @disposeOnUnmount
patch(prototype, "componentWillUnmount", function () {

@@ -288,7 +293,2 @@ var _admin$reaction;

return new Reaction(admin.name + ".render()", function () {
if (admin.isUpdating) {
// Reaction is suppressed when setting new state/props/context,
// this is when component is already being updated.
return;
}
if (!admin.mounted) {

@@ -301,4 +301,2 @@ // This is neccessary to avoid react warning about calling forceUpdate on component that isn't mounted yet.

try {
// forceUpdate sets new `props`, since we made it observable, it would `reportChanged`, causing a loop.
admin.isUpdating = true;
admin.forceUpdate == null ? void 0 : admin.forceUpdate();

@@ -309,4 +307,2 @@ } catch (error) {

admin.reaction = null;
} finally {
admin.isUpdating = false;
}

@@ -330,3 +326,2 @@ });

function createObservablePropDescriptor(key) {
var atomKey = key + "Atom";
return {

@@ -337,28 +332,13 @@ configurable: true,

var admin = getAdministration(this);
var prevReadState = _allowStateReadsStart(true);
admin[atomKey].reportObserved();
_allowStateReadsEnd(prevReadState);
var derivation = _getGlobalState().trackingDerivation;
if (derivation && derivation !== admin.reaction) {
throw new Error("[mobx-react] Cannot read \"" + admin.name + "." + key + "\" in a reactive context, as it isn't observable.\n Please use component lifecycle method to copy the value into a local observable first.\n See https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations");
}
return admin[key];
},
set: function set(value) {
var admin = getAdministration(this);
// forceUpdate issued by reaction sets new props.
// It sets isUpdating to true to prevent loop.
if (!admin.isUpdating && !shallowEqual(admin[key], value)) {
admin[key] = value;
// This notifies all observers including our component,
// but we don't want to cause `forceUpdate`, because component is already updating,
// therefore supress component reaction.
admin.isUpdating = true;
admin[atomKey].reportChanged();
admin.isUpdating = false;
} else {
admin[key] = value;
}
getAdministration(this)[key] = value;
}
};
}
var observablePropsDescriptor = /*#__PURE__*/createObservablePropDescriptor("props");
var observableStateDescriptor = /*#__PURE__*/createObservablePropDescriptor("state");
var observableContextDescriptor = /*#__PURE__*/createObservablePropDescriptor("context");

@@ -365,0 +345,0 @@ /**

2

dist/mobxreact.esm.production.min.js

@@ -1,2 +0,2 @@

import{createAtom as e,_allowStateReadsStart as r,_allowStateReadsEnd as t,Reaction as n,_allowStateChanges as o,untracked as i,isObservableMap as a,isObservableObject as c,isObservableArray as s,observable as u}from"mobx";import p,{PureComponent as l,Component as f}from"react";import{isUsingStaticRendering as d,_observerFinalizationRegistry as b,observer as m}from"mobx-react-lite";export{Observer,enableStaticRendering,isUsingStaticRendering,observerBatching,useAsObservableSource,useLocalObservable,useLocalStore,useObserver,useStaticRendering}from"mobx-react-lite";function y(e,r){if(v(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!v(e[t[o]],r[t[o]]))return!1;return!0}function v(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var h={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1},O=Symbol("patchMixins"),g=Symbol("patchedDefinition");function w(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function j(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];w.call.apply(w,[this,e,r].concat(n))}}function x(e,r,t){var n=function(e,r){var t=e[O]=e[O]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[g]){var i=function e(r,t,n,o,i){var a,c=j(i,o);return(a={})[g]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=j(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var P=Symbol("ObserverAdministration"),U=Symbol("isMobXReactObserver");function A(r){var t;return null!=(t=r[P])?t:r[P]={reaction:null,mounted:!1,forceUpdate:null,name:E(r.constructor),state:void 0,props:void 0,context:void 0,propsAtom:e("props"),stateAtom:e("state"),contextAtom:e("context"),isUpdating:!1}}function E(e){return e.displayName||e.name||"<component>"}function C(e){var r=e.bind(this),t=A(this);return function(){t.reaction||(t.reaction=function(e){return new n(e.name+".render()",(function(){if(!e.isUpdating&&e.mounted)try{e.isUpdating=!0,null==e.forceUpdate||e.forceUpdate()}catch(t){var r;null==(r=e.reaction)||r.dispose(),e.reaction=null}finally{e.isUpdating=!1}}))}(t),t.mounted||b.register(this,t,this));var e=void 0,i=void 0;if(t.reaction.track((function(){try{i=o(!1,r)}catch(r){e=r}})),e)throw e;return i}}function k(e,r){return d()&&console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."),this.state!==r||!y(this.props,e)}function S(e){var n=e+"Atom";return{configurable:!0,enumerable:!0,get:function(){var o=A(this),i=r(!0);return o[n].reportObserved(),t(i),o[e]},set:function(r){var t=A(this);t.isUpdating||y(t[e],r)?t[e]=r:(t[e]=r,t.isUpdating=!0,t[n].reportChanged(),t.isUpdating=!1)}}}var R=S("props"),M=S("state"),T=S("context");function D(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(f,e)||Object.prototype.isPrototypeOf.call(l,e)?function(e){var r=e.prototype;if(e[U]){var t=E(e);console.warn("The provided component class ("+t+")\n has already been declared as an observer component.")}else e[U]=!0;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==l)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==k)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=k;Object.defineProperties(r,{props:R,state:M,context:T});var n=r.render;if("function"!=typeof n){var o=E(e);throw new Error("[mobx-react] class component ("+o+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}return r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:d()?n:C.call(this,n)}),this.render()},x(r,"componentDidMount",(function(){var e=this,r=A(this);r.mounted=!0,b.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction||r.forceUpdate()})),x(r,"componentWillUnmount",(function(){var e;if(!d()){var r=A(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1}})),e}(e):m(e)}function I(){return(I=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var N=["children"],q=p.createContext({});function L(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,N),n=p.useContext(q),o=p.useRef(I({},n,t));return p.createElement(q.Provider,{value:o.current},r)}function W(e,r,t,n){var o,i,a,c=p.forwardRef((function(t,n){var o=I({},t),i=p.useContext(q);return Object.assign(o,e(i||{},o)||{}),n&&(o.ref=n),p.createElement(r,o)}));return n&&(c=D(c)),c.isMobxInjector=!0,o=r,i=c,a=Object.getOwnPropertyNames(Object.getPrototypeOf(o)),Object.getOwnPropertyNames(o).forEach((function(e){h[e]||-1!==a.indexOf(e)||Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))})),c.wrappedComponent=r,c.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),c}function _(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}function X(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return W(n,e,n.name,!0)}}return function(e){return W(_(r),e,r.join("-"),!1)}}L.displayName="MobXProvider";var F=Number.parseInt(p.version.split(".")[0]),$=!1,B=Symbol("disposeOnUnmountProto"),Y=Symbol("disposeOnUnmountInst");function z(){var e=this;[].concat(this[B]||[],this[Y]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function G(e,r){if(Array.isArray(r))return r.map((function(r){return G(e,r)}));$||(F>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),$=!0);var t=Object.getPrototypeOf(e).constructor,n=Object.getPrototypeOf(e.constructor),o=Object.getPrototypeOf(Object.getPrototypeOf(e));if(t!==p.Component&&t!==p.PureComponent&&n!==p.Component&&n!==p.PureComponent&&o!==p.Component&&o!==p.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof r&&"function"!=typeof r&&!Array.isArray(r))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var i=!!e[B]||!!e[Y];return("string"==typeof r?e[B]||(e[B]=[]):e[Y]||(e[Y]=[])).push(r),i||x(e,"componentWillUnmount",z),"string"!=typeof r?r:void 0}function H(e){function r(r,t,n,o,a,c){for(var s=arguments.length,u=new Array(s>6?s-6:0),p=6;p<s;p++)u[p-6]=arguments[p];return i((function(){return o=o||"<<anonymous>>",c=c||n,null==t[n]?r?new Error("The "+a+" `"+c+"` is marked as required in `"+o+"`, but its value is `"+(null===t[n]?"null":"undefined")+"`."):null:e.apply(void 0,[t,n,o,a,c].concat(u))}))}var t=r.bind(null,!1);return t.isRequired=r.bind(null,!0),t}function J(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function K(e,r){return H((function(t,n,o,u,p){return i((function(){if(e&&J(t[n])===r.toLowerCase())return null;var i;switch(r){case"Array":i=s;break;case"Object":i=c;break;case"Map":i=a;break;default:throw new Error("Unexpected mobxType: "+r)}var u=t[n];if(!i(u)){var l=function(e){var r=J(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(u),f=e?" or javascript `"+r.toLowerCase()+"`":"";return new Error("Invalid prop `"+p+"` of type `"+l+"` supplied to `"+o+"`, expected `mobx.Observable"+r+"`"+f+".")}return null}))}))}function Q(e,r){return H((function(t,n,o,a,c){for(var s=arguments.length,u=new Array(s>5?s-5:0),p=5;p<s;p++)u[p-5]=arguments[p];return i((function(){if("function"!=typeof r)return new Error("Property `"+c+"` of component `"+o+"` has invalid PropType notation.");var i=K(e,"Array")(t,n,o,a,c);if(i instanceof Error)return i;for(var s=t[n],p=0;p<s.length;p++)if((i=r.apply(void 0,[s,p,o,a,c+"["+p+"]"].concat(u)))instanceof Error)return i;return null}))}))}var V={observableArray:K(!1,"Array"),observableArrayOf:Q.bind(null,!1),observableMap:K(!1,"Map"),observableObject:K(!1,"Object"),arrayOrObservableArray:K(!0,"Array"),arrayOrObservableArrayOf:Q.bind(null,!0),objectOrObservableObject:K(!0,"Object")};if(!f)throw new Error("mobx-react requires React to be available");if(!u)throw new Error("mobx-react requires mobx to be available");export{q as MobXProviderContext,V as PropTypes,L as Provider,G as disposeOnUnmount,X as inject,D as observer};
import{Reaction as e,_allowStateChanges as r,untracked as t,isObservableMap as n,isObservableObject as o,isObservableArray as i,observable as a}from"mobx";import c,{PureComponent as s,Component as u}from"react";import{isUsingStaticRendering as l,_observerFinalizationRegistry as f,observer as p}from"mobx-react-lite";export{Observer,enableStaticRendering,isUsingStaticRendering,observerBatching,useAsObservableSource,useLocalObservable,useLocalStore,useObserver,useStaticRendering}from"mobx-react-lite";function d(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var b={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1},m=Symbol("patchMixins"),y=Symbol("patchedDefinition");function v(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function h(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];v.call.apply(v,[this,e,r].concat(n))}}function O(e,r,t){var n=function(e,r){var t=e[m]=e[m]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[y]){var i=function e(r,t,n,o,i){var a,c=h(i,o);return(a={})[y]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=h(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var g=Symbol("ObserverAdministration"),w=Symbol("isMobXReactObserver");function j(e){var r;return null!=(r=e[g])?r:e[g]={reaction:null,mounted:!1,forceUpdate:null,name:x(e.constructor),state:void 0,props:void 0,context:void 0}}function x(e){return e.displayName||e.name||"<component>"}function P(t){var n=t.bind(this),o=j(this);return function(){o.reaction||(o.reaction=function(r){return new e(r.name+".render()",(function(){if(r.mounted)try{null==r.forceUpdate||r.forceUpdate()}catch(t){var e;null==(e=r.reaction)||e.dispose(),r.reaction=null}}))}(o),o.mounted||f.register(this,o,this));var t=void 0,i=void 0;if(o.reaction.track((function(){try{i=r(!1,n)}catch(e){t=e}})),t)throw t;return i}}function E(e,r){return l()&&console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."),this.state!==r||!function(e,r){if(d(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!d(e[t[o]],r[t[o]]))return!1;return!0}(this.props,e)}function A(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(u,e)||Object.prototype.isPrototypeOf.call(s,e)?function(e){var r=e.prototype;if(e[w]){var t=x(e);throw new Error("The provided component class ("+t+") has already been declared as an observer component.")}if(e[w]=!0,r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==s)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==E)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=E;var n=r.render;if("function"!=typeof n){var o=x(e);throw new Error("[mobx-react] class component ("+o+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:l()?n:P.call(this,n)}),this.render()};var i=r.componentDidMount;return r.componentDidMount=function(){var e=this,r=j(this);return r.mounted=!0,f.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction||r.forceUpdate(),null==i?void 0:i.apply(this,arguments)},O(r,"componentWillUnmount",(function(){var e;if(!l()){var r=j(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1}})),e}(e):p(e)}function U(){return(U=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var C=["children"],k=c.createContext({});function S(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,C),n=c.useContext(k),o=c.useRef(U({},n,t));return c.createElement(k.Provider,{value:o.current},r)}function R(e,r,t,n){var o,i,a,s=c.forwardRef((function(t,n){var o=U({},t),i=c.useContext(k);return Object.assign(o,e(i||{},o)||{}),n&&(o.ref=n),c.createElement(r,o)}));return n&&(s=A(s)),s.isMobxInjector=!0,o=r,i=s,a=Object.getOwnPropertyNames(Object.getPrototypeOf(o)),Object.getOwnPropertyNames(o).forEach((function(e){b[e]||-1!==a.indexOf(e)||Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))})),s.wrappedComponent=r,s.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),s}function M(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}function D(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return R(n,e,n.name,!0)}}return function(e){return R(M(r),e,r.join("-"),!1)}}S.displayName="MobXProvider";var T=Number.parseInt(c.version.split(".")[0]),I=!1,N=Symbol("disposeOnUnmountProto"),q=Symbol("disposeOnUnmountInst");function L(){var e=this;[].concat(this[N]||[],this[q]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function W(e,r){if(Array.isArray(r))return r.map((function(r){return W(e,r)}));I||(T>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),I=!0);var t=Object.getPrototypeOf(e).constructor,n=Object.getPrototypeOf(e.constructor),o=Object.getPrototypeOf(Object.getPrototypeOf(e));if(t!==c.Component&&t!==c.PureComponent&&n!==c.Component&&n!==c.PureComponent&&o!==c.Component&&o!==c.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof r&&"function"!=typeof r&&!Array.isArray(r))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var i=!!e[N]||!!e[q];return("string"==typeof r?e[N]||(e[N]=[]):e[q]||(e[q]=[])).push(r),i||O(e,"componentWillUnmount",L),"string"!=typeof r?r:void 0}function _(e){function r(r,n,o,i,a,c){for(var s=arguments.length,u=new Array(s>6?s-6:0),l=6;l<s;l++)u[l-6]=arguments[l];return t((function(){return i=i||"<<anonymous>>",c=c||o,null==n[o]?r?new Error("The "+a+" `"+c+"` is marked as required in `"+i+"`, but its value is `"+(null===n[o]?"null":"undefined")+"`."):null:e.apply(void 0,[n,o,i,a,c].concat(u))}))}var n=r.bind(null,!1);return n.isRequired=r.bind(null,!0),n}function X(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function F(e,r){return _((function(a,c,s,u,l){return t((function(){if(e&&X(a[c])===r.toLowerCase())return null;var t;switch(r){case"Array":t=i;break;case"Object":t=o;break;case"Map":t=n;break;default:throw new Error("Unexpected mobxType: "+r)}var u=a[c];if(!t(u)){var f=function(e){var r=X(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(u),p=e?" or javascript `"+r.toLowerCase()+"`":"";return new Error("Invalid prop `"+l+"` of type `"+f+"` supplied to `"+s+"`, expected `mobx.Observable"+r+"`"+p+".")}return null}))}))}function $(e,r){return _((function(n,o,i,a,c){for(var s=arguments.length,u=new Array(s>5?s-5:0),l=5;l<s;l++)u[l-5]=arguments[l];return t((function(){if("function"!=typeof r)return new Error("Property `"+c+"` of component `"+i+"` has invalid PropType notation.");var t=F(e,"Array")(n,o,i,a,c);if(t instanceof Error)return t;for(var s=n[o],l=0;l<s.length;l++)if((t=r.apply(void 0,[s,l,i,a,c+"["+l+"]"].concat(u)))instanceof Error)return t;return null}))}))}var B={observableArray:F(!1,"Array"),observableArrayOf:$.bind(null,!1),observableMap:F(!1,"Map"),observableObject:F(!1,"Object"),arrayOrObservableArray:F(!0,"Array"),arrayOrObservableArrayOf:$.bind(null,!0),objectOrObservableObject:F(!0,"Object")};if(!u)throw new Error("mobx-react requires React to be available");if(!a)throw new Error("mobx-react requires mobx to be available");export{k as MobXProviderContext,B as PropTypes,S as Provider,W as disposeOnUnmount,D as inject,A as observer};
//# sourceMappingURL=mobxreact.esm.production.min.js.map

74

dist/mobxreact.umd.development.js

@@ -141,2 +141,10 @@ (function (global, factory) {

var isMobXReactObserverSymbol = /*#__PURE__*/Symbol("isMobXReactObserver");
var observablePropDescriptors;
{
observablePropDescriptors = {
props: /*#__PURE__*/createObservablePropDescriptor("props"),
state: /*#__PURE__*/createObservablePropDescriptor("state"),
context: /*#__PURE__*/createObservablePropDescriptor("context")
};
}
function getAdministration(component) {

@@ -154,7 +162,3 @@ var _component$administra;

props: undefined,
context: undefined,
propsAtom: mobx.createAtom("props"),
stateAtom: mobx.createAtom("state"),
contextAtom: mobx.createAtom("context"),
isUpdating: false
context: undefined
};

@@ -166,3 +170,3 @@ }

var displayName = getDisplayName(componentClass);
console.warn("The provided component class (" + displayName + ")\n has already been declared as an observer component.");
throw new Error("The provided component class (" + displayName + ") has already been declared as an observer component.");
} else {

@@ -182,11 +186,5 @@ componentClass[isMobXReactObserverSymbol] = true;

}
// this.props and this.state are made observable, just to make sure @computed fields that
// are defined inside the component, and which rely on state or props, re-compute if state or props change
// (otherwise the computed wouldn't update and become stale on props change, since props are not observable)
// However, this solution is not without it's own problems: https://github.com/mobxjs/mobx-react/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aobservable-props-or-not+
Object.defineProperties(prototype, {
props: observablePropsDescriptor,
state: observableStateDescriptor,
context: observableContextDescriptor
});
{
Object.defineProperties(prototype, observablePropDescriptors);
}
var originalRender = prototype.render;

@@ -206,4 +204,9 @@ if (typeof originalRender !== "function") {

};
patch(prototype, "componentDidMount", function () {
var originalComponentDidMount = prototype.componentDidMount;
prototype.componentDidMount = function () {
var _this = this;
if ( this.componentDidMount !== Object.getPrototypeOf(this).componentDidMount) {
var _displayName2 = getDisplayName(componentClass);
throw new Error("[mobx-react] `observer(" + _displayName2 + ").componentDidMount` must be defined on prototype." + "\n`componentDidMount = () => {}` or `componentDidMount = function() {}` is not supported.");
}
// `componentDidMount` may not be called at all. React can abandon the instance after `render`.

@@ -239,3 +242,5 @@ // That's why we use finalization registry to dispose reaction created during render.

}
});
return originalComponentDidMount == null ? void 0 : originalComponentDidMount.apply(this, arguments);
};
// TODO@major Overly complicated "patch" is only needed to support the deprecated @disposeOnUnmount
patch(prototype, "componentWillUnmount", function () {

@@ -291,7 +296,2 @@ var _admin$reaction;

return new mobx.Reaction(admin.name + ".render()", function () {
if (admin.isUpdating) {
// Reaction is suppressed when setting new state/props/context,
// this is when component is already being updated.
return;
}
if (!admin.mounted) {

@@ -304,4 +304,2 @@ // This is neccessary to avoid react warning about calling forceUpdate on component that isn't mounted yet.

try {
// forceUpdate sets new `props`, since we made it observable, it would `reportChanged`, causing a loop.
admin.isUpdating = true;
admin.forceUpdate == null ? void 0 : admin.forceUpdate();

@@ -312,4 +310,2 @@ } catch (error) {

admin.reaction = null;
} finally {
admin.isUpdating = false;
}

@@ -333,3 +329,2 @@ });

function createObservablePropDescriptor(key) {
var atomKey = key + "Atom";
return {

@@ -340,28 +335,13 @@ configurable: true,

var admin = getAdministration(this);
var prevReadState = mobx._allowStateReadsStart(true);
admin[atomKey].reportObserved();
mobx._allowStateReadsEnd(prevReadState);
var derivation = mobx._getGlobalState().trackingDerivation;
if (derivation && derivation !== admin.reaction) {
throw new Error("[mobx-react] Cannot read \"" + admin.name + "." + key + "\" in a reactive context, as it isn't observable.\n Please use component lifecycle method to copy the value into a local observable first.\n See https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations");
}
return admin[key];
},
set: function set(value) {
var admin = getAdministration(this);
// forceUpdate issued by reaction sets new props.
// It sets isUpdating to true to prevent loop.
if (!admin.isUpdating && !shallowEqual(admin[key], value)) {
admin[key] = value;
// This notifies all observers including our component,
// but we don't want to cause `forceUpdate`, because component is already updating,
// therefore supress component reaction.
admin.isUpdating = true;
admin[atomKey].reportChanged();
admin.isUpdating = false;
} else {
admin[key] = value;
}
getAdministration(this)[key] = value;
}
};
}
var observablePropsDescriptor = /*#__PURE__*/createObservablePropDescriptor("props");
var observableStateDescriptor = /*#__PURE__*/createObservablePropDescriptor("state");
var observableContextDescriptor = /*#__PURE__*/createObservablePropDescriptor("context");

@@ -368,0 +348,0 @@ /**

2

dist/mobxreact.umd.production.min.js

@@ -1,2 +0,2 @@

!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react"),require("mobx-react-lite")):"function"==typeof define&&define.amd?define(["exports","mobx","react","mobx-react-lite"],r):r((e=e||self).mobxReact={},e.mobx,e.React,e.mobxReactLite)}(this,(function(e,r,t,n){"use strict";var o="default"in t?t.default:t;function i(e,r){if(a(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!a(e[t[o]],r[t[o]]))return!1;return!0}function a(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var c={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1},s=Symbol("patchMixins"),u=Symbol("patchedDefinition");function l(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function f(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];l.call.apply(l,[this,e,r].concat(n))}}function p(e,r,t){var n=function(e,r){var t=e[s]=e[s]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[u]){var i=function e(r,t,n,o,i){var a,c=f(i,o);return(a={})[u]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=f(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var b=Symbol("ObserverAdministration"),d=Symbol("isMobXReactObserver");function m(e){var t;return null!=(t=e[b])?t:e[b]={reaction:null,mounted:!1,forceUpdate:null,name:y(e.constructor),state:void 0,props:void 0,context:void 0,propsAtom:r.createAtom("props"),stateAtom:r.createAtom("state"),contextAtom:r.createAtom("context"),isUpdating:!1}}function y(e){return e.displayName||e.name||"<component>"}function v(e){var t=e.bind(this),o=m(this);return function(){o.reaction||(o.reaction=function(e){return new r.Reaction(e.name+".render()",(function(){if(!e.isUpdating&&e.mounted)try{e.isUpdating=!0,null==e.forceUpdate||e.forceUpdate()}catch(t){var r;null==(r=e.reaction)||r.dispose(),e.reaction=null}finally{e.isUpdating=!1}}))}(o),o.mounted||n._observerFinalizationRegistry.register(this,o,this));var e=void 0,i=void 0;if(o.reaction.track((function(){try{i=r._allowStateChanges(!1,t)}catch(r){e=r}})),e)throw e;return i}}function h(e,r){return n.isUsingStaticRendering()&&console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."),this.state!==r||!i(this.props,e)}function g(e){var t=e+"Atom";return{configurable:!0,enumerable:!0,get:function(){var n=m(this),o=r._allowStateReadsStart(!0);return n[t].reportObserved(),r._allowStateReadsEnd(o),n[e]},set:function(r){var n=m(this);n.isUpdating||i(n[e],r)?n[e]=r:(n[e]=r,n.isUpdating=!0,n[t].reportChanged(),n.isUpdating=!1)}}}var O=g("props"),j=g("state"),w=g("context");function P(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(t.Component,e)||Object.prototype.isPrototypeOf.call(t.PureComponent,e)?function(e){var r=e.prototype;if(e[d]){var o=y(e);console.warn("The provided component class ("+o+")\n has already been declared as an observer component.")}else e[d]=!0;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==h)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=h;Object.defineProperties(r,{props:O,state:j,context:w});var i=r.render;if("function"!=typeof i){var a=y(e);throw new Error("[mobx-react] class component ("+a+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}return r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:n.isUsingStaticRendering()?i:v.call(this,i)}),this.render()},p(r,"componentDidMount",(function(){var e=this,r=m(this);r.mounted=!0,n._observerFinalizationRegistry.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction||r.forceUpdate()})),p(r,"componentWillUnmount",(function(){var e;if(!n.isUsingStaticRendering()){var r=m(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1}})),e}(e):n.observer(e)}function x(){return(x=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var U=["children"],A=o.createContext({});function R(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,U),n=o.useContext(A),i=o.useRef(x({},n,t));return o.createElement(A.Provider,{value:i.current},r)}function S(e,r,t,n){var i,a,s,u=o.forwardRef((function(t,n){var i=x({},t),a=o.useContext(A);return Object.assign(i,e(a||{},i)||{}),n&&(i.ref=n),o.createElement(r,i)}));return n&&(u=P(u)),u.isMobxInjector=!0,i=r,a=u,s=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){c[e]||-1!==s.indexOf(e)||Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(i,e))})),u.wrappedComponent=r,u.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),u}function C(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}R.displayName="MobXProvider";var E=Number.parseInt(o.version.split(".")[0]),k=!1,M=Symbol("disposeOnUnmountProto"),T=Symbol("disposeOnUnmountInst");function _(){var e=this;[].concat(this[M]||[],this[T]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function D(e){function t(t,n,o,i,a,c){for(var s=arguments.length,u=new Array(s>6?s-6:0),l=6;l<s;l++)u[l-6]=arguments[l];return r.untracked((function(){return i=i||"<<anonymous>>",c=c||o,null==n[o]?t?new Error("The "+a+" `"+c+"` is marked as required in `"+i+"`, but its value is `"+(null===n[o]?"null":"undefined")+"`."):null:e.apply(void 0,[n,o,i,a,c].concat(u))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function q(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function I(e,t){return D((function(n,o,i,a,c){return r.untracked((function(){if(e&&q(n[o])===t.toLowerCase())return null;var a;switch(t){case"Array":a=r.isObservableArray;break;case"Object":a=r.isObservableObject;break;case"Map":a=r.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var s=n[o];if(!a(s)){var u=function(e){var r=q(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(s),l=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+c+"` of type `"+u+"` supplied to `"+i+"`, expected `mobx.Observable"+t+"`"+l+".")}return null}))}))}function N(e,t){return D((function(n,o,i,a,c){for(var s=arguments.length,u=new Array(s>5?s-5:0),l=5;l<s;l++)u[l-5]=arguments[l];return r.untracked((function(){if("function"!=typeof t)return new Error("Property `"+c+"` of component `"+i+"` has invalid PropType notation.");var r=I(e,"Array")(n,o,i,a,c);if(r instanceof Error)return r;for(var s=n[o],l=0;l<s.length;l++)if((r=t.apply(void 0,[s,l,i,a,c+"["+l+"]"].concat(u)))instanceof Error)return r;return null}))}))}var L={observableArray:I(!1,"Array"),observableArrayOf:N.bind(null,!1),observableMap:I(!1,"Map"),observableObject:I(!1,"Object"),arrayOrObservableArray:I(!0,"Array"),arrayOrObservableArrayOf:N.bind(null,!0),objectOrObservableObject:I(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!r.observable)throw new Error("mobx-react requires mobx to be available");Object.defineProperty(e,"Observer",{enumerable:!0,get:function(){return n.Observer}}),Object.defineProperty(e,"enableStaticRendering",{enumerable:!0,get:function(){return n.enableStaticRendering}}),Object.defineProperty(e,"isUsingStaticRendering",{enumerable:!0,get:function(){return n.isUsingStaticRendering}}),Object.defineProperty(e,"observerBatching",{enumerable:!0,get:function(){return n.observerBatching}}),Object.defineProperty(e,"useAsObservableSource",{enumerable:!0,get:function(){return n.useAsObservableSource}}),Object.defineProperty(e,"useLocalObservable",{enumerable:!0,get:function(){return n.useLocalObservable}}),Object.defineProperty(e,"useLocalStore",{enumerable:!0,get:function(){return n.useLocalStore}}),Object.defineProperty(e,"useObserver",{enumerable:!0,get:function(){return n.useObserver}}),Object.defineProperty(e,"useStaticRendering",{enumerable:!0,get:function(){return n.useStaticRendering}}),e.MobXProviderContext=A,e.PropTypes=L,e.Provider=R,e.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));k||(E>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),k=!0);var n=Object.getPrototypeOf(r).constructor,i=Object.getPrototypeOf(r.constructor),a=Object.getPrototypeOf(Object.getPrototypeOf(r));if(n!==o.Component&&n!==o.PureComponent&&i!==o.Component&&i!==o.PureComponent&&a!==o.Component&&a!==o.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof t&&"function"!=typeof t&&!Array.isArray(t))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var c=!!r[M]||!!r[T];return("string"==typeof t?r[M]||(r[M]=[]):r[T]||(r[T]=[])).push(t),c||p(r,"componentWillUnmount",_),"string"!=typeof t?t:void 0},e.inject=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return S(n,e,n.name,!0)}}return function(e){return S(C(r),e,r.join("-"),!1)}},e.observer=P,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react"),require("mobx-react-lite")):"function"==typeof define&&define.amd?define(["exports","mobx","react","mobx-react-lite"],r):r((e=e||self).mobxReact={},e.mobx,e.React,e.mobxReactLite)}(this,(function(e,r,t,n){"use strict";var o="default"in t?t.default:t;function i(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var a={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1},c=Symbol("patchMixins"),u=Symbol("patchedDefinition");function s(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function l(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];s.call.apply(s,[this,e,r].concat(n))}}function f(e,r,t){var n=function(e,r){var t=e[c]=e[c]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[u]){var i=function e(r,t,n,o,i){var a,c=l(i,o);return(a={})[u]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=l(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var p=Symbol("ObserverAdministration"),b=Symbol("isMobXReactObserver");function d(e){var r;return null!=(r=e[p])?r:e[p]={reaction:null,mounted:!1,forceUpdate:null,name:y(e.constructor),state:void 0,props:void 0,context:void 0}}function y(e){return e.displayName||e.name||"<component>"}function m(e){var t=e.bind(this),o=d(this);return function(){o.reaction||(o.reaction=function(e){return new r.Reaction(e.name+".render()",(function(){if(e.mounted)try{null==e.forceUpdate||e.forceUpdate()}catch(t){var r;null==(r=e.reaction)||r.dispose(),e.reaction=null}}))}(o),o.mounted||n._observerFinalizationRegistry.register(this,o,this));var e=void 0,i=void 0;if(o.reaction.track((function(){try{i=r._allowStateChanges(!1,t)}catch(r){e=r}})),e)throw e;return i}}function v(e,r){return n.isUsingStaticRendering()&&console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."),this.state!==r||!function(e,r){if(i(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!i(e[t[o]],r[t[o]]))return!1;return!0}(this.props,e)}function h(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(t.Component,e)||Object.prototype.isPrototypeOf.call(t.PureComponent,e)?function(e){var r=e.prototype;if(e[b]){var o=y(e);throw new Error("The provided component class ("+o+") has already been declared as an observer component.")}if(e[b]=!0,r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==v)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=v;var i=r.render;if("function"!=typeof i){var a=y(e);throw new Error("[mobx-react] class component ("+a+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:n.isUsingStaticRendering()?i:m.call(this,i)}),this.render()};var c=r.componentDidMount;return r.componentDidMount=function(){var e=this,r=d(this);return r.mounted=!0,n._observerFinalizationRegistry.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction||r.forceUpdate(),null==c?void 0:c.apply(this,arguments)},f(r,"componentWillUnmount",(function(){var e;if(!n.isUsingStaticRendering()){var r=d(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1}})),e}(e):n.observer(e)}function O(){return(O=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var g=["children"],j=o.createContext({});function w(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,g),n=o.useContext(j),i=o.useRef(O({},n,t));return o.createElement(j.Provider,{value:i.current},r)}function P(e,r,t,n){var i,c,u,s=o.forwardRef((function(t,n){var i=O({},t),a=o.useContext(j);return Object.assign(i,e(a||{},i)||{}),n&&(i.ref=n),o.createElement(r,i)}));return n&&(s=h(s)),s.isMobxInjector=!0,i=r,c=s,u=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){a[e]||-1!==u.indexOf(e)||Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(i,e))})),s.wrappedComponent=r,s.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),s}function x(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}w.displayName="MobXProvider";var R=Number.parseInt(o.version.split(".")[0]),S=!1,C=Symbol("disposeOnUnmountProto"),U=Symbol("disposeOnUnmountInst");function A(){var e=this;[].concat(this[C]||[],this[U]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function E(e){function t(t,n,o,i,a,c){for(var u=arguments.length,s=new Array(u>6?u-6:0),l=6;l<u;l++)s[l-6]=arguments[l];return r.untracked((function(){return i=i||"<<anonymous>>",c=c||o,null==n[o]?t?new Error("The "+a+" `"+c+"` is marked as required in `"+i+"`, but its value is `"+(null===n[o]?"null":"undefined")+"`."):null:e.apply(void 0,[n,o,i,a,c].concat(s))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function k(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function M(e,t){return E((function(n,o,i,a,c){return r.untracked((function(){if(e&&k(n[o])===t.toLowerCase())return null;var a;switch(t){case"Array":a=r.isObservableArray;break;case"Object":a=r.isObservableObject;break;case"Map":a=r.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var u=n[o];if(!a(u)){var s=function(e){var r=k(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(u),l=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+c+"` of type `"+s+"` supplied to `"+i+"`, expected `mobx.Observable"+t+"`"+l+".")}return null}))}))}function T(e,t){return E((function(n,o,i,a,c){for(var u=arguments.length,s=new Array(u>5?u-5:0),l=5;l<u;l++)s[l-5]=arguments[l];return r.untracked((function(){if("function"!=typeof t)return new Error("Property `"+c+"` of component `"+i+"` has invalid PropType notation.");var r=M(e,"Array")(n,o,i,a,c);if(r instanceof Error)return r;for(var u=n[o],l=0;l<u.length;l++)if((r=t.apply(void 0,[u,l,i,a,c+"["+l+"]"].concat(s)))instanceof Error)return r;return null}))}))}var D={observableArray:M(!1,"Array"),observableArrayOf:T.bind(null,!1),observableMap:M(!1,"Map"),observableObject:M(!1,"Object"),arrayOrObservableArray:M(!0,"Array"),arrayOrObservableArrayOf:T.bind(null,!0),objectOrObservableObject:M(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!r.observable)throw new Error("mobx-react requires mobx to be available");Object.defineProperty(e,"Observer",{enumerable:!0,get:function(){return n.Observer}}),Object.defineProperty(e,"enableStaticRendering",{enumerable:!0,get:function(){return n.enableStaticRendering}}),Object.defineProperty(e,"isUsingStaticRendering",{enumerable:!0,get:function(){return n.isUsingStaticRendering}}),Object.defineProperty(e,"observerBatching",{enumerable:!0,get:function(){return n.observerBatching}}),Object.defineProperty(e,"useAsObservableSource",{enumerable:!0,get:function(){return n.useAsObservableSource}}),Object.defineProperty(e,"useLocalObservable",{enumerable:!0,get:function(){return n.useLocalObservable}}),Object.defineProperty(e,"useLocalStore",{enumerable:!0,get:function(){return n.useLocalStore}}),Object.defineProperty(e,"useObserver",{enumerable:!0,get:function(){return n.useObserver}}),Object.defineProperty(e,"useStaticRendering",{enumerable:!0,get:function(){return n.useStaticRendering}}),e.MobXProviderContext=j,e.PropTypes=D,e.Provider=w,e.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));S||(R>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),S=!0);var n=Object.getPrototypeOf(r).constructor,i=Object.getPrototypeOf(r.constructor),a=Object.getPrototypeOf(Object.getPrototypeOf(r));if(n!==o.Component&&n!==o.PureComponent&&i!==o.Component&&i!==o.PureComponent&&a!==o.Component&&a!==o.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof t&&"function"!=typeof t&&!Array.isArray(t))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var c=!!r[C]||!!r[U];return("string"==typeof t?r[C]||(r[C]=[]):r[U]||(r[U]=[])).push(t),c||f(r,"componentWillUnmount",A),"string"!=typeof t?t:void 0},e.inject=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return P(n,e,n.name,!0)}}return function(e){return P(x(r),e,r.join("-"),!1)}},e.observer=h,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=mobxreact.umd.production.min.js.map

6

package.json
{
"name": "mobx-react",
"version": "8.0.0",
"version": "9.0.0",
"description": "React bindings for MobX. Create fully reactive components.",

@@ -39,3 +39,3 @@ "source": "src/index.ts",

"dependencies": {
"mobx-react-lite": "^4.0.0"
"mobx-react-lite": "^4.0.3"
},

@@ -56,3 +56,3 @@ "peerDependencies": {

"mobx": "^6.9.0",
"mobx-react-lite": "^4.0.0",
"mobx-react-lite": "^4.0.3",
"expose-gc": "^1.0.0"

@@ -59,0 +59,0 @@ },

97

README.md

@@ -18,6 +18,7 @@ # mobx-react

| NPM Version | Support MobX version | Supported React versions | Supports hook based components |
| NPM Version | Support MobX version | Supported React versions | Added support for: |
| ----------- | -------------------- | ------------------------ | -------------------------------------------------------------------------------- |
| v7 | 6.\* | >16.8 | Yes |
| v6 | 4.\* / 5.\* | >16.8 <18 | Yes |
| v8 | 6.\* | >16.8 | Hooks, React 18.2 in strict mode |
| v7 | 6.\* | >16.8 < 18.2 | Hooks |
| v6 | 4.\* / 5.\* | >16.8 <18 | Hooks |
| v5 | 4.\* / 5.\* | >0.13 <18 | No, but it is possible to use `<Observer>` sections inside hook based components |

@@ -61,6 +62,6 @@

When using component classes, `this.props` and `this.state` will be made observables, so the component will react to all changes in props and state that are used by `render`.
`shouldComponentUpdate` is not supported. As such, it is recommended that class components extend `React.PureComponent`. The `observer` will automatically patch non-pure class components with an internal implementation of `React.PureComponent` if necessary.
Extending `observer` class components is not supported. Always apply `observer` only on the last class in the inheritance chain.
See the [MobX](https://mobx.js.org/react-integration.html#react-integration) documentation for more details.

@@ -92,2 +93,88 @@

##### Note on using props and state in derivations
`mobx-react` version 6 and lower would automatically turn `this.state` and `this.props` into observables.
This has the benefit that computed properties and reactions were able to observe those.
However, since this pattern is fundamentally incompatible with `StrictMode` in React 18.2 and higher, this behavior has been removed in React 18.
As a result, we recommend to no longer mark properties as `@computed` in observer components if they depend on `this.state` or `this.props`.
```javascript
@observer
class Doubler extends React.Component<{ counter: number }> {
@computed // BROKEN! <-- @computed should be removed in mobx-react > 7
get doubleValue() {
// Changes to this.props will no longer be detected properly, to fix it,
// remove the @computed annotation.
return this.props * 2
}
render() {
return <div>{this.doubleValue}</div>
}
}
```
Similarly, reactions will no longer respond to `this.state` / `this.props`. This can be overcome by creating an observable copy:
```javascript
@observer
class Alerter extends React.Component<{ counter: number }> {
@observable observableCounter: number
reactionDisposer
constructor(props) {
this.observableCounter = counter
}
componentDidMount() {
// set up a reaction, by observing the observable,
// rather than the prop which is non-reactive:
this.reactionDisposer = autorun(() => {
if (this.observableCounter > 10) {
alert("Reached 10!")
}
})
}
componentDidUpdate() {
// sync the observable from props
this.observableCounter = this.props.counter
}
componentWillUnmount() {
this.reactionDisposer()
}
render() {
return <div>{this.props.counter}</div>
}
}
```
MobX-react will try to detect cases where `this.props`, `this.state` or `this.context` are used by any other derivation than the `render` method of the owning component and throw.
This is to make sure that neither computed properties, nor reactions, nor other components accidentally rely on those fields to be reactive.
This includes cases where a render callback is passed to a child, that will read from the props or state of a parent component.
As a result, passing a function that might later read a property of a parent in a reactive context will throw as well.
Instead, when using a callback function that is being passed to an `observer` based child, the capture should be captured locally first:
```javascript
@observer
class ChildWrapper extends React.Component<{ counter: number }> {
render() {
// Collapsible is an observer component that should respond to this.counter,
// if it is expanded
// BAD:
return <Collapsible onRenderContent={() => <h1>{this.props.counter}</h1>} />
// GOOD: (causes to pass down a fresh callback whenever counter changes,
// that doesn't depend on its parents props)
const counter = this.props.counter
return <Collapsible onRenderContent={() => <h1>{counter}</h1>} />
}
}
```
### `Observer`

@@ -94,0 +181,0 @@

104

src/observerClass.ts
import { PureComponent, Component, ComponentClass, ClassAttributes } from "react"
import {
createAtom,
_allowStateChanges,

@@ -8,4 +7,3 @@ Reaction,

_allowStateReadsEnd,
_getGlobalState,
IAtom
_getGlobalState
} from "mobx"

@@ -21,2 +19,11 @@ import {

let observablePropDescriptors: PropertyDescriptorMap
if (__DEV__) {
observablePropDescriptors = {
props: createObservablePropDescriptor("props"),
state: createObservablePropDescriptor("state"),
context: createObservablePropDescriptor("context")
}
}
type ObserverAdministration = {

@@ -27,12 +34,6 @@ reaction: Reaction | null // also serves as disposed flag

name: string
propsAtom: IAtom
stateAtom: IAtom
contextAtom: IAtom
// Used only on __DEV__
props: any
state: any
context: any
// Setting this.props causes forceUpdate, because this.props is observable.
// forceUpdate sets this.props.
// This flag is used to avoid the loop.
isUpdating: boolean
}

@@ -51,7 +52,3 @@

props: undefined,
context: undefined,
propsAtom: createAtom("props"),
stateAtom: createAtom("state"),
contextAtom: createAtom("context"),
isUpdating: false
context: undefined
})

@@ -67,5 +64,4 @@ }

const displayName = getDisplayName(componentClass)
console.warn(
`The provided component class (${displayName})
has already been declared as an observer component.`
throw new Error(
`The provided component class (${displayName}) has already been declared as an observer component.`
)

@@ -90,11 +86,5 @@ } else {

// this.props and this.state are made observable, just to make sure @computed fields that
// are defined inside the component, and which rely on state or props, re-compute if state or props change
// (otherwise the computed wouldn't update and become stale on props change, since props are not observable)
// However, this solution is not without it's own problems: https://github.com/mobxjs/mobx-react/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aobservable-props-or-not+
Object.defineProperties(prototype, {
props: observablePropsDescriptor,
state: observableStateDescriptor,
context: observableContextDescriptor
})
if (__DEV__) {
Object.defineProperties(prototype, observablePropDescriptors)
}

@@ -123,3 +113,12 @@ const originalRender = prototype.render

patch(prototype, "componentDidMount", function () {
const originalComponentDidMount = prototype.componentDidMount
prototype.componentDidMount = function () {
if (__DEV__ && this.componentDidMount !== Object.getPrototypeOf(this).componentDidMount) {
const displayName = getDisplayName(componentClass)
throw new Error(
`[mobx-react] \`observer(${displayName}).componentDidMount\` must be defined on prototype.` +
`\n\`componentDidMount = () => {}\` or \`componentDidMount = function() {}\` is not supported.`
)
}
// `componentDidMount` may not be called at all. React can abandon the instance after `render`.

@@ -158,4 +157,6 @@ // That's why we use finalization registry to dispose reaction created during render.

}
})
return originalComponentDidMount?.apply(this, arguments)
}
// TODO@major Overly complicated "patch" is only needed to support the deprecated @disposeOnUnmount
patch(prototype, "componentWillUnmount", function () {

@@ -218,8 +219,2 @@ if (isUsingStaticRendering()) {

return new Reaction(`${admin.name}.render()`, () => {
if (admin.isUpdating) {
// Reaction is suppressed when setting new state/props/context,
// this is when component is already being updated.
return
}
if (!admin.mounted) {

@@ -233,4 +228,2 @@ // This is neccessary to avoid react warning about calling forceUpdate on component that isn't mounted yet.

try {
// forceUpdate sets new `props`, since we made it observable, it would `reportChanged`, causing a loop.
admin.isUpdating = true
admin.forceUpdate?.()

@@ -240,4 +233,2 @@ } catch (error) {

admin.reaction = null
} finally {
admin.isUpdating = false
}

@@ -265,3 +256,2 @@ })

function createObservablePropDescriptor(key: "props" | "state" | "context") {
const atomKey = `${key}Atom`
return {

@@ -272,32 +262,16 @@ configurable: true,

const admin = getAdministration(this)
let prevReadState = _allowStateReadsStart(true)
admin[atomKey].reportObserved()
_allowStateReadsEnd(prevReadState)
const derivation = _getGlobalState().trackingDerivation
if (derivation && derivation !== admin.reaction) {
throw new Error(
`[mobx-react] Cannot read "${admin.name}.${key}" in a reactive context, as it isn't observable.
Please use component lifecycle method to copy the value into a local observable first.
See https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations`
)
}
return admin[key]
},
set(value) {
const admin = getAdministration(this)
// forceUpdate issued by reaction sets new props.
// It sets isUpdating to true to prevent loop.
if (!admin.isUpdating && !shallowEqual(admin[key], value)) {
admin[key] = value
// This notifies all observers including our component,
// but we don't want to cause `forceUpdate`, because component is already updating,
// therefore supress component reaction.
admin.isUpdating = true
admin[atomKey].reportChanged()
admin.isUpdating = false
} else {
admin[key] = value
}
getAdministration(this)[key] = value
}
}
}
const observablePropsDescriptor = createObservablePropDescriptor("props")
const observableStateDescriptor = createObservablePropDescriptor("state")
const observableContextDescriptor = createObservablePropDescriptor("context")
dist/mobxreact.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/mobxreact.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/mobxreact.esm.development.js.map

Sorry, the diff of this file is not supported yet

dist/mobxreact.esm.js.map

Sorry, the diff of this file is not supported yet

dist/mobxreact.esm.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/mobxreact.umd.development.js.map

Sorry, the diff of this file is not supported yet

dist/mobxreact.umd.production.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc