Socket
Socket
Sign inDemoInstall

mobx

Package Overview
Dependencies
Maintainers
1
Versions
251
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mobx - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

6

CHANGELOG.md

@@ -0,1 +1,7 @@

# 2.0.1
* Undeprecated `observable(scalar)` (see 143)
* `expr` no longer prints incorrect deprecated messages (see 143)
* Requires `mobx` twice no longer fails.
# 2.0.0

@@ -2,0 +8,0 @@

31

lib/mobx.js

@@ -74,9 +74,16 @@ var __extends = (this && this.__extends) || function (d, b) {

exports.autorunAsync = autorunAsync;
function computed(target, key, baseDescriptor, options) {
if (arguments.length < 3 && typeof target === "function") {
return observable(target, key);
}
function computed(targetOrExpr, keyOrScope, baseDescriptor, options) {
if (arguments.length < 3 && typeof targetOrExpr === "function")
return computedExpr(targetOrExpr, keyOrScope);
return computedDecorator.apply(null, arguments);
}
exports.computed = computed;
function computedExpr(expr, scope) {
var _a = getValueModeFromValue(expr, ValueMode.Recursive), mode = _a[0], value = _a[1];
return new ComputedValue(value, scope, mode === ValueMode.Structure, value.name || "ComputedValue");
}
function computedDecorator(target, key, baseDescriptor, options) {
if (arguments.length === 1) {
var options_1 = target;
return function (target, key, baseDescriptor) { return computed.call(null, target, key, baseDescriptor, options_1); };
return function (target, key, baseDescriptor) { return computedDecorator.call(null, target, key, baseDescriptor, options_1); };
}

@@ -105,3 +112,2 @@ invariant(baseDescriptor && baseDescriptor.hasOwnProperty("get"), "@computed can only be used on getter functions, like: '@computed get myProps() { return ...; }'");

}
exports.computed = computed;
function throwingComputedValueSetter() {

@@ -150,3 +156,3 @@ throw new Error("[ComputedValue] It is not allowed to assign new values to computed properties.");

console.warn("[mobx.expr] 'expr' should only be used inside other reactive functions.");
return observable(expr, scope).get();
return computed(expr, scope).get();
}

@@ -320,10 +326,8 @@ exports.expr = expr;

case ValueType.ComplexObject:
observableIsDeprecated();
return new ObservableValue(value, mode);
case ValueType.ComplexFunction:
observableIsDeprecated();
throw new Error("[mobx.observable] To be able to make a function reactive it should not have arguments. If you need an observable reference to a function, use `observable(asReference(f))`");
case ValueType.ViewFunction:
observableIsDeprecated();
return new ComputedValue(value, keyOrScope, mode === ValueMode.Structure, value.name || "ComputedValue");
deprecated("Use `computed(expr)` instead of `observable(expr)`");
return computed(v, keyOrScope);
}

@@ -333,5 +337,2 @@ invariant(false, "Illegal State");

exports.observable = observable;
function observableIsDeprecated() {
deprecated("Invoking observable() on scalar values is deprecated. Use extendObservable or @observable instead.");
}
var ValueType;

@@ -653,3 +654,3 @@ (function (ValueType) {

throw new Error("[mobx] An incompatible version of mobservable is already loaded.");
if (global.__mobxGlobal && global.__mobxGlobal.version !== globalState.version)
if (global.__mobxGlobal && global.__mobxGlobal.version !== res.version)
throw new Error("[mobx] An incompatible version of mobx is already loaded.");

@@ -656,0 +657,0 @@ if (global.__mobxGlobal)

2

lib/mobx.min.js
/** MobX - (c) Michel Weststrate 2015, 2016 - MIT Licensed */
function Y(e,o){i(e,"autorun methods cannot have modifiers"),n("function"==typeof e,"autorun expects a function"),n(0===e.length,"autorun expects a function without arguments"),o&&(e=e.bind(o));var r=new R(e.name||"Autorun",function(){this.track(e)});return j()||t.inTransaction>0?t.pendingReactions.push(r):r.runReaction(),r.getDisposer()}function ee(r,o,t){var n=!1,e=Y(function(){r.call(t)&&(e?e():n=!0,o.call(t))});return n&&e(),e}function Xe(e,t,n){return g("`autorunUntil` is deprecated, please use `when`."),ee.apply(null,arguments)}function We(e,n,o){void 0===n&&(n=1),o&&(e=e.bind(o));var r=!1,t=new R(e.name||"AutorunAsync",function(){r||(r=!0,setTimeout(function(){r=!1,t.isDisposed||t.track(e)},n))});return t.runReaction(),t.getDisposer()}function J(r,t,i,a){if(arguments.length<3&&"function"==typeof r)return w(r,t);if(1===arguments.length){var u=r;return function(e,t,n){return J.call(null,e,t,n,u)}}n(i&&i.hasOwnProperty("get"),"@computed can only be used on getter functions, like: '@computed get myProps() { return ...; }'"),L(r,t);var o={},s=i.get;return n("object"==typeof r,"The @observable decorator can only be used on objects",t),n("function"==typeof s,"@observable expects a getter function if used on a property.",t),n(!i.set,"@observable properties cannot have a setter.",t),n(0===s.length,"@observable getter functions should not take arguments.",t),o.configurable=!0,o.enumerable=!1,o.get=function(){return A($(this,void 0,e.Recursive),t,a&&a.asStructure===!0?P(s):s),this[t]},o.set=Qe,i?o:void Object.defineProperty(r,t,o)}function Qe(){throw new Error("[ComputedValue] It is not allowed to assign new values to computed properties.")}function qe(e,r){n("function"==typeof e&&1===e.length,"createTransformer expects a function that accepts one argument");var t={},o=function(n){function o(t,r){n.call(this,function(){return e(r)},null,!1,"Transformer-"+e.name+"-"+t),this.sourceIdentifier=t,this.sourceObject=r}return T(o,n),o.prototype.onBecomeUnobserved=function(){var e=this.value;n.prototype.onBecomeUnobserved.call(this),delete t[this.sourceIdentifier],r&&r(e,this.sourceObject)},o}(p);return function(r){var n=Ye(r),e=t[n];return e?e.get():(e=t[n]=new o(n,r),e.get())}}function Ye(e){if(null===e||"object"!=typeof e)throw new Error("[mobx] transform expected some kind of object, got: "+e);var t=e.$transformId;return void 0===t?e.$transformId=h():t}function Je(e,t){return j()||console.warn("[mobx.expr] 'expr' should only be used inside other reactive functions."),w(e,t).get()}function fe(t){for(var o=[],r=1;r<arguments.length;r++)o[r-1]=arguments[r];return n(arguments.length>=2,"extendObservable expected 2 or more arguments"),n("object"==typeof t,"extendObservable expects an object as first argument"),n(!(t instanceof l),"extendObservable should not be used on maps, use map.merge instead"),o.forEach(function(r){n("object"==typeof r,"all arguments of extendObservable should be objects"),ve(t,r,e.Recursive,null)}),t}function ve(e,t,r,o){var i=$(e,o,r);for(var n in t)if(t.hasOwnProperty(n)){if(e===t&&!ae(e,n))continue;A(i,n,t[n])}return e}function ge(e,n){var r=t.allowStateChanges;t.allowStateChanges=e;var o=n();return t.allowStateChanges=r,o}function u(e,n,t){void 0===t&&(t=!1),c&&c.emit({id:e.id,name:e.name+"@"+e.id,node:e,state:n,changed:t})}function Ne(e){return W(e)}function W(e){var t={id:e.id,name:e.name+"@"+e.id};return e.observing&&e.observing.length&&(t.dependencies=be(e.observing).map(W)),t}function Ke(e){return re(e)}function re(e){var t={id:e.id,name:e.name+"@"+e.id};return e.observers&&e.observers.length&&(t.observers=be(e.observers).map(re)),t}function ze(n){var e=[],t=!1;return function(r){(n||r.changed)&&e.push(r),t||(t=!0,setTimeout(function(){console[console.table?"table":"dir"](e),e=[],t=!1},1))}}function Ge(e,t){void 0===e&&(e=!1),c||(c=new f);var n=t?function(n){(e||n.changed)&&t(n)}:ze(e),r=c.on(n);return me(function(){r(),0===c.listeners.length&&(c=null)})}function d(e,t){if(null===e||void 0===e)return!1;if(void 0!==t){if(e instanceof l||e instanceof o)throw new Error("[mobx.isObservable] isObservable(object, propertyName) is not supported for arrays and maps. Use map.has or array.length instead.");if(b(e)){var n=e.$mobx;return n.values&&!!n.values[t]}return!1}return!!e.$mobx||e instanceof S||e instanceof R||e instanceof p}function Be(s,r,t){if(n(arguments.length>=2&&arguments.length<=3,"Illegal decorator config",r),L(s,r),t&&t.hasOwnProperty("get"))return g("Using @observable on computed values is deprecated. Use @computed instead."),J.apply(null,arguments);var o={},i=void 0;return t&&(t.hasOwnProperty("value")?i=t.value:t.initializer&&(i=t.initializer(),"function"==typeof i&&(i=C(i)))),n("object"==typeof s,"The @observable decorator can only be used on objects",r),o.configurable=!0,o.enumerable=!0,o.get=function(){var t=this;return ge(!0,function(){A($(t,void 0,e.Recursive),r,i)}),this[r]},o.set=function(t){A($(this,void 0,e.Recursive),r,"function"==typeof t?C(t):t)},t?o:void Object.defineProperty(s,r,o)}function w(i,u){if("string"==typeof arguments[1])return Be.apply(null,arguments);if(n(1===arguments.length||2===arguments.length,"observable expects one or two arguments"),d(i))return i;var s=D(i,e.Recursive),o=s[0],t=s[1],c=o===e.Reference?r.Reference:Le(t);switch(c){case r.Array:case r.PlainObject:return x(t,o);case r.Reference:case r.ComplexObject:return K(),new a(t,o);case r.ComplexFunction:throw K(),new Error("[mobx.observable] To be able to make a function reactive it should not have arguments. If you need an observable reference to a function, use `observable(asReference(f))`");case r.ViewFunction:return K(),new p(t,u,o===e.Structure,t.name||"ComputedValue")}n(!1,"Illegal State")}function K(){g("Invoking observable() on scalar values is deprecated. Use extendObservable or @observable instead.")}function Le(e){return null===e||void 0===e?r.Reference:"function"==typeof e?e.length?r.ComplexFunction:r.ViewFunction:Array.isArray(e)||e instanceof o?r.Array:"object"==typeof e?v(e)?r.PlainObject:r.ComplexObject:r.Reference}function M(t,n,e,r){return"function"==typeof e?se(t,n,e,r):ie(t,n,e)}function ie(e,t,r){return E(e)?e.observe(t):z(e)?e.observe(t):b(e)?Oe(e,t,r):e instanceof a||e instanceof p?e.observe(t,r):v(e)?ie(w(e),t,r):void n(!1,"first argument of observe should be some observable value or plain object")}function se(e,t,r,o){var i="[mobx.observe] the provided observable map has no key with name: "+t;if(z(e)){if(!e._has(t))throw new Error(i);return M(e._data[t],r)}if(b(e)){if(!d(e,t))throw new Error(i);return M(e.$mobx.values[t],r,o)}return v(e)?(fe(e,{property:e[t]}),se(e,t,r,o)):void n(!1,"first argument of observe should be an (observable)object or observableMap if a property name is given")}function m(e,n,t){function s(r){return n&&t.push([e,r]),r}if(void 0===n&&(n=!0),void 0===t&&(t=null),n&&null===t&&(t=[]),n&&null!==e&&"object"==typeof e)for(var i=0,c=t.length;c>i;i++)if(t[i][0]===e)return t[i][1];if(!e)return e;if(Array.isArray(e)||e instanceof o){var r=s([]);return r.push.apply(r,e.map(function(e){return m(e,n,t)})),r}if(e instanceof l){var r=s({});return e.forEach(function(e,o){return r[o]=m(e,n,t)}),r}if("object"==typeof e&&v(e)){var r=s({});for(var u in e)e.hasOwnProperty(u)&&(r[u]=m(e[u],n,t));return r}return d(e)&&e.$mobx instanceof a?m(e(),n,t):e}function pe(e){n(e.isDirty,"atom not dirty"),e.isDirty=!1,u(e,"READY",!0),U(e,!0)}function j(){return t.derivationStack.length>0}function N(){n(t.allowStateChanges,"It is not allowed to change the state when a computed value is being evaluated. Use 'autorun' to create reactive functions with side-effects. Or use 'extras.allowStateChanges(true, block)' to supress this message.")}function Ue(e){1===++e.dependencyStaleCount&&(u(e,"STALE"),he(e))}function we(e,t){if(n(e.dependencyStaleCount>0,"unexpected ready notification"),t&&(e.dependencyChangeCount+=1),0===--e.dependencyStaleCount)if(e.dependencyChangeCount>0){e.dependencyChangeCount=0,u(e,"PENDING");var r=e.onDependenciesReady();U(e,r)}else u(e,"READY",!1),U(e,!1)}function Q(e,n){var r=e.observing;e.observing=[],t.derivationStack.push(e);var o=n();return Ie(e,r),o}function Ie(r,u){t.derivationStack.length-=1;for(var i=oe(r.observing,u),o=i[0],s=i[1],e=0,a=o.length;a>e;e++){var c=o[e];n(!X(r,c),"Cycle detected",r),De(o[e],r)}for(var e=0,a=s.length;a>e;e++)F(s[e],r)}function X(r,n){var e=n.observing;if(void 0===e)return!1;if(-1!==e.indexOf(n))return!0;for(var o=e.length,t=0;o>t;t++)if(X(r,e[t]))return!0;return!1}function h(){return++t.mobxGuid}function Fe(){}function Me(){var e=new te;for(var n in e)t[n]=e[n]}function De(e,r){var t=e.observers,n=t.length;t[n]=r,0===n&&e.onBecomeObserved()}function F(t,r){var e=t.observers,n=e.indexOf(r);-1!==n&&e.splice(n,1),0===e.length&&t.onBecomeUnobserved()}function I(n){if(!(t.inUntracked>0)){var o=t.derivationStack,i=o.length;if(i>0){var e=o[i-1].observing,r=e.length;e[r-1]!==n&&e[r-2]!==n&&(e[r]=n)}}}function he(e){var t=e.observers.slice();t.forEach(Ue),e.staleObservers=e.staleObservers.concat(t)}function U(e,t){e.staleObservers.splice(0).forEach(function(e){return we(e,t)})}function Pe(e){g("This feature is experimental and might be removed in a future minor release. Please report if you use this feature in production: https://github.com/mobxjs/mobx/issues/49"),t.inUntracked++;var n=e();return t.inUntracked--,n}function de(){if(!t.isRunningReactions){t.isRunningReactions=!0;for(var e=t.pendingReactions,o=0;e.length;){if(++o===Ve)throw new Error("Reaction doesn't converge to a stable state. Probably there is a cycle in the reactive function: "+e[0].toString());for(var r=e.splice(0),n=0,i=r.length;i>n;n++)r[n].runReaction()}t.isRunningReactions=!1}}function y(r,o){t.inTransaction+=1;var i=r.call(o);if(0===--t.inTransaction){for(var n=t.changedAtoms.splice(0),e=0,s=n.length;s>e;e++)pe(n[e]);de()}return i}function C(e){return new B(e)}function P(e){return new k(e)}function q(e){return new V(e)}function D(t,n){return t instanceof B?[e.Reference,t.value]:t instanceof k?[e.Structure,t.value]:t instanceof V?[e.Flat,t.value]:[n,t]}function Ae(t){return t===C?e.Reference:t===P?e.Structure:t===q?e.Flat:(n(void 0===t,"Cannot determine value mode from function. Please pass in one of these: mobx.asReference, mobx.asStructure or mobx.asFlat, got: "+t),e.Recursive)}function x(t,a,s){var r;if(d(t))return t;switch(a){case e.Reference:return t;case e.Flat:i(t,"Items inside 'asFlat' canont have modifiers"),r=e.Reference;break;case e.Structure:i(t,"Items inside 'asStructure' canont have modifiers"),r=e.Structure;break;case e.Recursive:o=D(t,e.Recursive),r=o[0],t=o[1];break;default:n(!1,"Illegal State")}return Array.isArray(t)&&Object.isExtensible(t)?ce(t,r,s):v(t)&&Object.isExtensible(t)?ve(t,t,r,s):t;var o}function i(e,t){if(e instanceof B||e instanceof k||e instanceof V)throw new Error("[mobx] asStructure / asReference / asFlat cannot be used here. "+t)}function Ze(e){return e.atom.reportObserved(),e.values.length}function $e(n,e){if("number"!=typeof e||0>e)throw new Error("[mobx.array] Out of range: "+e);var t=n.values.length;e!==t&&(e>t?s(n,t,0,new Array(e-t)):s(n,e,t-e))}function ne(n,t,e){if(t!==n.lastKnownLength)throw new Error("[mobx] Modification exception: the internal structure of an observable array was changed. Did you use peek() to change it?");N(),n.lastKnownLength+=e,e>0&&t+e>G&&ue(t+e)}function s(o,e,n,t){var r=o.values.length;if(!(void 0!==t&&0!==t.length||0!==n&&0!==r))return[];void 0===e?e=0:e>r?e=r:0>e&&(e=Math.max(0,r+e)),n=2===arguments.length?r-e:void 0===n||null===n?0:Math.max(0,Math.min(n,r-e)),t=void 0===t?O:t.map(o.makeChildReactive);var a=t.length-n;ne(o,r,a);var i=(s=o.values).splice.apply(s,[e,n].concat(t));return ke(o,e,i,t),i;var s}function Ee(t){return i(t,"Array values cannot have modifiers"),this.mode===e.Flat||this.mode===e.Reference?t:x(t,this.mode,this.atom.name+"@"+this.atom.id+" / ArrayEntry")}function _e(e,t,n){e.atom.reportChanged(),e.changeEvent&&e.changeEvent.emit({object:e.array,type:"update",index:t,oldValue:n})}function ke(e,r,t,n){(0!==t.length||0!==n.length)&&(e.atom.reportChanged(),e.changeEvent&&e.changeEvent.emit({object:e.array,type:"splice",index:r,addedCount:n.length,removed:t}))}function je(t){Object.defineProperty(o.prototype,""+t,{enumerable:!1,configurable:!1,set:function(n){var r=this.$mobx,o=r.values;if(i(n,"Modifiers cannot be used on array values. For non-reactive array values use makeReactive(asFlat(array))."),t<o.length){N();var a=o[t],u=r.mode===e.Structure?!_(a,n):a!==n;u&&(o[t]=r.makeChildReactive(n),_e(r,t,a))}else{if(t!==o.length)throw new Error("[mobx.array] Index out of bounds, "+t+" is larger than "+o.length);s(r,t,0,[n])}},get:function(){var e=this.$mobx;return e&&t<e.values.length?(e.atom.reportObserved(),e.values[t]):void 0}})}function ue(t){for(var e=G;t>e;e++)je(e);G=t}function ce(e,t,n){return new o(e,t,n)}function Ce(t){return g("fastArray is deprecated. Please use `observable(asFlat([]))`"),ce(t,e.Flat,null)}function E(e){return e instanceof o}function Se(e,t){return new l(e,t)}function z(e){return e instanceof l}function $(t,n,r){if(void 0===n&&(n="ObservableObject"),void 0===r&&(r=e.Recursive),t.$mobx){if(t.$mobx.type!==H)throw new Error("The given object is observable but not an observable object");return t.$mobx}var o={type:H,values:{},events:void 0,id:h(),target:t,name:n,mode:r};return Object.defineProperty(t,"$mobx",{enumerable:!1,configurable:!1,writable:!1,value:o}),o}function A(e,t,n){e.values[t]?e.target[t]=n:Te(e,t,n)}function Te(e,n,t){L(e.target,n);var r,o=e.name+"@"+e.id+' / Prop "'+n+'"';r="function"==typeof t&&0===t.length?new p(t,e.target,!1,o):t instanceof k&&"function"==typeof t.value&&0===t.value.length?new p(t.value,e.target,!0,o):new a(t,e.mode,o),e.values[n]=r,Object.defineProperty(e.target,n,{configurable:!0,enumerable:r instanceof a,get:function(){return r.get()},set:function(t){var o=r.get();r.set(t)&&void 0!==e.events&&e.events.emit({type:"update",object:this,name:n,oldValue:o})}}),void 0!==e.events&&e.events.emit({type:"add",object:e.target,name:n})}function Oe(e,r,o){n(b(e),"Expected observable object"),n(o!==!0,"`observe` doesn't support the fire immediately property for observable objects.");var t=e.$mobx;return void 0===t.events&&(t.events=new f),e.$mobx.events.on(r)}function b(e){return e&&e.$mobx&&e.$mobx.type===H}function n(t,n,e){if(!t)throw new Error("[mobx] Invariant failed: "+n+(e?" in '"+e+"'":""))}function g(e){-1===xe.indexOf(e)&&(xe.push(e),console.error("[mobx] Deprecated: "+e))}function me(t){var e=!1;return function(){return e?void 0:(e=!0,t.apply(this,arguments))}}function be(t){var e=[];return t.forEach(function(t){-1===e.indexOf(t)&&e.push(t)}),e}function v(e){return null!==e&&"object"==typeof e&&Object.getPrototypeOf(e)===Object.prototype}function le(n,e,t){return n?!_(e,t):e!==t}function Re(n,t){for(var e=0;e<t.length;e++)Object.defineProperty(n,t[e],{configurable:!0,writable:!0,enumerable:!1,value:n[t[e]]})}function ae(t,n){var e=Object.getOwnPropertyDescriptor(t,n);return!e||e.configurable!==!1&&e.writable!==!1}function L(t,e){n(ae(t,e),"Cannot make property '"+e+"' observable, it is not configurable and writable in the target object")}function _(e,t){if(null===e&&null===t)return!0;if(void 0===e&&void 0===t)return!0;var o=Array.isArray(e)||E(e);if(o!==(Array.isArray(t)||E(t)))return!1;if(o){if(e.length!==t.length)return!1;for(var n=e.length;n>=0;n--)if(!_(e[n],t[n]))return!1;return!0}if("object"==typeof e&&"object"==typeof t){if(null===e||null===t)return!1;if(Object.keys(e).length!==Object.keys(t).length)return!1;for(var r in e){if(!t.hasOwnProperty(r))return!1;if(!_(e[r],t[r]))return!1}return!0}return e===t}function oe(n,r){if(!r||!r.length)return[n,[]];if(!n||!n.length)return[[],r];for(var o=[],i=[],e=0,s=0,h=n.length,c=!1,t=0,a=0,l=r.length,u=!1,f=!1;!f&&!c;){if(!u){if(h>e&&l>t&&n[e]===r[t]){if(e++,t++,e===h&&t===l)return[o,i];continue}s=e,a=t,u=!0}a+=1,s+=1,a>=l&&(f=!0),s>=h&&(c=!0),c||n[s]!==r[t]?f||r[a]!==n[e]||(i.push.apply(i,r.slice(t,a)),t=a+1,e++,u=!1):(o.push.apply(o,n.slice(e,s)),e=s+1,t++,u=!1)}return o.push.apply(o,n.slice(e)),i.push.apply(i,r.slice(t)),[o,i]}var T=this&&this.__extends||function(t,e){function r(){this.constructor=t}for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)};Fe(),exports._={quickDiff:oe,resetGlobalState:Me},exports.extras={getDependencyTree:Ne,getObserverTree:Ke,trackTransitions:Ge,isComputingDerivation:j,allowStateChanges:ge},exports.autorun=Y,exports.when=ee,exports.autorunUntil=Xe,exports.autorunAsync=We,exports.computed=J,exports.createTransformer=qe,exports.expr=Je,exports.extendObservable=fe;var c=null;exports.isObservable=d,exports.observable=w;var r;!function(e){e[e.Reference=0]="Reference",e[e.PlainObject=1]="PlainObject",e[e.ComplexObject=2]="ComplexObject",e[e.Array=3]="Array",e[e.ViewFunction=4]="ViewFunction",e[e.ComplexFunction=5]="ComplexFunction"}(r||(r={})),exports.observe=M,exports.toJSON=m;var S=function(){function e(e,t,n){void 0===e&&(e="Atom"),void 0===t&&(t=ye),void 0===n&&(n=ye),this.name=e,this.onBecomeObserved=t,this.onBecomeUnobserved=n,this.id=h(),this.isDirty=!1,this.staleObservers=[],this.observers=[]}return e.prototype.reportObserved=function(){I(this)},e.prototype.reportChanged=function(){this.isDirty||(this.reportStale(),this.reportReady())},e.prototype.reportStale=function(){this.isDirty||(this.isDirty=!0,u(this,"STALE"),he(this))},e.prototype.reportReady=function(){n(this.isDirty,"atom not dirty"),t.inTransaction>0?t.changedAtoms.push(this):(pe(this),de())},e.prototype.toString=function(){return this.name+"@"+this.id},e}();exports.Atom=S;var p=function(){function e(n,r,i,e){var o=this;void 0===e&&(e="ComputedValue"),this.derivation=n,this.scope=r,this.compareStructural=i,this.name=e,this.id=h(),this.isLazy=!0,this.isComputing=!1,this.staleObservers=[],this.observers=[],this.observing=[],this.dependencyChangeCount=0,this.dependencyStaleCount=0,this.value=void 0,this.peek=function(){o.isComputing=!0,t.isComputingComputedValue++;var e=t.allowStateChanges;t.allowStateChanges=!1;var i=n.call(r);return t.allowStateChanges=e,t.isComputingComputedValue--,o.isComputing=!1,i}}return e.prototype.onBecomeObserved=function(){},e.prototype.onBecomeUnobserved=function(){for(var e=0,t=this.observing.length;t>e;e++)F(this.observing[e],this);this.observing=[],this.isLazy=!0,this.value=void 0},e.prototype.onDependenciesReady=function(){var e=this.trackAndCompute();return u(this,"READY",e),e},e.prototype.get=function(){if(n(!this.isComputing,"Cycle detected",this.derivation),this.dependencyStaleCount>0&&t.inTransaction>0)return this.peek();if(this.isLazy){if(!j())return this.peek();this.isLazy=!1,this.trackAndCompute(),I(this)}else I(this);return this.value},e.prototype.set=function(e){throw new Error("[ComputedValue '"+name+"'] It is not possible to assign a new value to a computed value.")},e.prototype.trackAndCompute=function(){var e=this.value;return this.value=Q(this,this.peek),le(this.compareStructural,this.value,e)},e.prototype.observe=function(n,r){var o=this,e=!0,t=void 0;return Y(function(){var i=o.get();(!e||r)&&n(i,t),e=!1,t=i})},e.prototype.toString=function(){return this.name+"@"+this.id+"["+this.derivation.toString()+"]"},e}(),te=function(){function e(){this.version=1,this.derivationStack=[],this.mobxGuid=0,this.inTransaction=0,this.inUntracked=0,this.isRunningReactions=!1,this.isComputingComputedValue=0,this.changedAtoms=[],this.pendingReactions=[],this.allowStateChanges=!0}return e}(),t=function(){var e=new te;if(global.__mobservableTrackingStack||global.__mobservableViewStack)throw new Error("[mobx] An incompatible version of mobservable is already loaded.");if(global.__mobxGlobal&&global.__mobxGlobal.version!==t.version)throw new Error("[mobx] An incompatible version of mobx is already loaded.");return global.__mobxGlobal?global.__mobxGlobal:global.__mobxGlobal=e}();exports.untracked=Pe;var R=function(){function e(e,t){void 0===e&&(e="Reaction"),this.name=e,this.onInvalidate=t,this.id=h(),this.staleObservers=O,this.observers=O,this.observing=[],this.dependencyChangeCount=0,this.dependencyStaleCount=0,this.isDisposed=!1,this._isScheduled=!1}return e.prototype.onBecomeObserved=function(){},e.prototype.onBecomeUnobserved=function(){},e.prototype.onDependenciesReady=function(){return this._isScheduled||(this._isScheduled=!0,t.pendingReactions.push(this)),!1},e.prototype.isScheduled=function(){return this.dependencyStaleCount>0||this._isScheduled},e.prototype.runReaction=function(){this.isDisposed||(this._isScheduled=!1,this.onInvalidate(),u(this,"READY",!0))},e.prototype.track=function(e){Q(this,e)},e.prototype.dispose=function(){if(!this.isDisposed){this.isDisposed=!0;for(var t=this.observing.splice(0),e=0,n=t.length;n>e;e++)F(t[e],this)}},e.prototype.getDisposer=function(){var e=this.dispose.bind(this);return e.$mobx=this,e},e.prototype.toString=function(){return"Reaction["+this.name+"]"},e}();exports.Reaction=R;var Ve=100;exports.transaction=y;var e;!function(e){e[e.Recursive=0]="Recursive",e[e.Reference=1]="Reference",e[e.Structure=2]="Structure",e[e.Flat=3]="Flat"}(e||(e={})),exports.asReference=C,exports.asStructure=P,exports.asFlat=q;var B=function(){function e(e){this.value=e,i(e,"Modifiers are not allowed to be nested")}return e}(),k=function(){function e(e){this.value=e,i(e,"Modifiers are not allowed to be nested")}return e}(),V=function(){function e(e){this.value=e,i(e,"Modifiers are not allowed to be nested")}return e}(),G=0,Z=function(){function e(){}return e}();Z.prototype=[];var o=function(t){function e(n,r,o){t.call(this);var e=this.$mobx={atom:new S(o||"ObservableArray"),values:void 0,changeEvent:void 0,lastKnownLength:0,mode:r,array:this,makeChildReactive:function(t){return Ee.call(e,t)}};Object.defineProperty(this,"$mobx",{enumerable:!1,configurable:!1,writable:!1}),n&&n.length?(ne(e,0,n.length),e.values=n.map(e.makeChildReactive)):e.values=[]}return T(e,t),e.prototype.observe=function(t,e){return void 0===e&&(e=!1),void 0===this.$mobx.changeEvent&&(this.$mobx.changeEvent=new f),e&&t({object:this,type:"splice",index:0,addedCount:this.$mobx.values.length,removed:[]}),this.$mobx.changeEvent.on(t)},e.prototype.clear=function(){return this.splice(0)},e.prototype.replace=function(e){return s(this.$mobx,0,this.$mobx.values.length,e)},e.prototype.toJSON=function(){return this.$mobx.atom.reportObserved(),this.$mobx.values.slice()},e.prototype.peek=function(){return this.$mobx.values},e.prototype.find=function(r,o,t){void 0===t&&(t=0),this.$mobx.atom.reportObserved();for(var n=this.$mobx.values,i=n.length,e=t;i>e;e++)if(r.call(o,n[e],e,this))return n[e];return null},e.prototype.splice=function(t,n){for(var r=[],e=2;e<arguments.length;e++)r[e-2]=arguments[e];switch(arguments.length){case 0:return[];case 1:return s(this.$mobx,t);case 2:return s(this.$mobx,t,n)}return s(this.$mobx,t,n,r)},e.prototype.push=function(){for(var t=[],e=0;e<arguments.length;e++)t[e-0]=arguments[e];return s(this.$mobx,this.$mobx.values.length,0,t),this.$mobx.values.length},e.prototype.pop=function(){return this.splice(Math.max(this.$mobx.values.length-1,0),1)[0]},e.prototype.shift=function(){return this.splice(0,1)[0]},e.prototype.unshift=function(){for(var t=[],e=0;e<arguments.length;e++)t[e-0]=arguments[e];return s(this.$mobx,0,0,t),this.$mobx.values.length},e.prototype.reverse=function(){this.$mobx.atom.reportObserved();var e=this.slice();return e.reverse.apply(e,arguments)},e.prototype.sort=function(t){this.$mobx.atom.reportObserved();var e=this.slice();return e.sort.apply(e,arguments)},e.prototype.remove=function(t){var e=this.$mobx.values.indexOf(t);return e>-1?(this.splice(e,1),!0):!1},e.prototype.toString=function(){return"[mobx.array] "+Array.prototype.toString.apply(this.$mobx.values,arguments)},e.prototype.toLocaleString=function(){return"[mobx.array] "+Array.prototype.toLocaleString.apply(this.$mobx.values,arguments)},e}(Z);Re(o.prototype,["constructor","clear","find","observe","pop","peek","push","remove","replace","reverse","shift","sort","splice","split","toJSON","toLocaleString","toString","unshift"]),Object.defineProperty(o.prototype,"length",{enumerable:!1,configurable:!0,get:function(){return Ze(this.$mobx)},set:function(e){$e(this.$mobx,e)}}),["concat","every","filter","forEach","indexOf","join","lastIndexOf","map","reduce","reduceRight","slice","some"].forEach(function(e){var t=Array.prototype[e];Object.defineProperty(o.prototype,e,{configurable:!1,writable:!0,enumerable:!1,value:function(){return this.$mobx.atom.reportObserved(),t.apply(this.$mobx.values,arguments)}})}),ue(1e3),exports.fastArray=Ce,exports.isObservableArray=E;var He={},l=function(){function t(t,n){var r=this;this.$mobx=He,this._data={},this._hasMap={},this._events=void 0,this.name="ObservableMap",this.id=h(),this._keys=new o(null,e.Reference,this.name+"@"+this.id+" / keys()"),this._valueMode=Ae(n),v(t)?this.merge(t):Array.isArray(t)&&t.forEach(function(e){var t=e[0],n=e[1];return r.set(t,n)})}return t.prototype._has=function(e){return"undefined"!=typeof this._data[e]},t.prototype.has=function(e){return this.isValidKey(e)?this._hasMap[e]?this._hasMap[e].get():this._updateHasMapEntry(e,!1).get():!1},t.prototype.set=function(e,n){var t=this;if(this.assertValidKey(e),i(n,"[mobx.map.set] Expected unwrapped value to be inserted to key '"+e+"'. If you need to use modifiers pass them as second argument to the constructor"),this._has(e)){var r=this._data[e].value,o=this._data[e].set(n);o&&this._events&&this._events.emit({type:"update",object:this,name:e,oldValue:r})}else y(function(){t._data[e]=new a(n,t._valueMode,t.name+"@"+t.id+' / Entry "'+e+'"'),t._updateHasMapEntry(e,!0),t._keys.push(e)}),this._events&&this._events.emit({type:"add",object:this,name:e})},t.prototype.delete=function(e){var t=this;if(this._has(e)){var n=this._data[e].value;y(function(){t._keys.remove(e),t._updateHasMapEntry(e,!1);var n=t._data[e];n.set(void 0),t._data[e]=void 0}),this._events&&this._events.emit({type:"delete",object:this,name:e,oldValue:n})}},t.prototype._updateHasMapEntry=function(n,r){var t=this._hasMap[n];return t?t.set(r):t=this._hasMap[n]=new a(r,e.Reference,this.name+"@"+this.id+' / Contains "'+n+'"'),t},t.prototype.get=function(e){return this.has(e)?this._data[e].get():void 0},t.prototype.keys=function(){return this._keys.slice()},t.prototype.values=function(){return this.keys().map(this.get,this)},t.prototype.entries=function(){var e=this;return this.keys().map(function(t){return[t,e.get(t)]})},t.prototype.forEach=function(e,t){var n=this;this.keys().forEach(function(r){return e.call(t,n.get(r),r)})},t.prototype.merge=function(e){var n=this;return y(function(){e instanceof t?e.keys().forEach(function(t){return n.set(t,e.get(t))}):Object.keys(e).forEach(function(t){return n.set(t,e[t])})}),this},t.prototype.clear=function(){var e=this;y(function(){e.keys().forEach(e.delete,e)})},Object.defineProperty(t.prototype,"size",{get:function(){return this._keys.length},enumerable:!0,configurable:!0}),t.prototype.toJs=function(){var t=this,e={};return this.keys().forEach(function(n){return e[n]=t.get(n)}),e},t.prototype.isValidKey=function(e){return null===e||void 0===e?!1:"string"!=typeof e&&"number"!=typeof e?!1:!0},t.prototype.assertValidKey=function(e){if(!this.isValidKey(e))throw new Error("[mobx.map] Invalid key: '"+e+"'")},t.prototype.toString=function(){var e=this;return"[mobx.map { "+this.keys().map(function(t){return t+": "+e.get(t)}).join(", ")+" }]"},t.prototype.observe=function(e){return this._events||(this._events=new f),this._events.on(e)},t}();exports.ObservableMap=l,exports.map=Se,exports.isObservableMap=z;var H={};exports.isObservableObject=b;var a=function(n){function t(o,i,t){void 0===t&&(t="ObservableValue"),n.call(this,t),this.mode=i,this.hasUnreportedChange=!1,this.events=null,this.value=void 0;var r=D(o,e.Recursive),s=r[0],a=r[1];this.mode===e.Recursive&&(this.mode=s),this.value=x(a,this.mode,this.name)}return T(t,n),t.prototype.set=function(t){i(t,"Modifiers cannot be used on non-initial values."),N();var n=this.value,r=le(this.mode===e.Structure,n,t);return r&&(this.value=x(t,this.mode,this.name),this.reportChanged(),this.events&&this.events.emit(t,n)),r},t.prototype.get=function(){return this.reportObserved(),this.value},t.prototype.observe=function(e,t){return this.events||(this.events=new f),t&&e(this.value,void 0),this.events.on(e)},t.prototype.toString=function(){return this.name+"@"+this.id+"["+this.value+"]"},t}(S),f=function(){function e(){this.listeners=[]}return e.prototype.emit=function(){for(var r=[],e=0;e<arguments.length;e++)r[e-0]=arguments[e];for(var n=this.listeners.slice(),t=0,o=n.length;o>t;t++)n[t].apply(null,arguments)},e.prototype.on=function(e){var t=this;return this.listeners.push(e),me(function(){var n=t.listeners.indexOf(e);-1!==n&&t.listeners.splice(n,1)})},e.prototype.once=function(t){var e=this.on(function(){e(),t.apply(this,arguments)});return e},e}();exports.SimpleEventEmitter=f;var O=[];Object.freeze(O);var xe=[],ye=function(){};
function U(e,i){o(e,"autorun methods cannot have modifiers"),n("function"==typeof e,"autorun expects a function"),n(0===e.length,"autorun expects a function without arguments"),i&&(e=e.bind(i));var r=new S(e.name||"Autorun",function(){this.track(e)});return O()||t.inTransaction>0?t.pendingReactions.push(r):r.runReaction(),r.getDisposer()}function ee(r,o,t){var n=!1,e=U(function(){r.call(t)&&(e?e():n=!0,o.call(t))});return n&&e(),e}function Xe(e,t,n){return m("`autorunUntil` is deprecated, please use `when`."),ee.apply(null,arguments)}function We(e,n,o){void 0===n&&(n=1),o&&(e=e.bind(o));var r=!1,t=new S(e.name||"AutorunAsync",function(){r||(r=!0,setTimeout(function(){r=!1,t.isDisposed||t.track(e)},n))});return t.runReaction(),t.getDisposer()}function _(e,t,n,r){return arguments.length<3&&"function"==typeof e?Qe(e,t):X.apply(null,arguments)}function Qe(r,o){var t=$(r,e.Recursive),i=t[0],n=t[1];return new p(n,o,i===e.Structure,n.name||"ComputedValue")}function X(i,t,o,a){if(1===arguments.length){var u=i;return function(e,t,n){return X.call(null,e,t,n,u)}}n(o&&o.hasOwnProperty("get"),"@computed can only be used on getter functions, like: '@computed get myProps() { return ...; }'"),D(i,t);var r={},s=o.get;return n("object"==typeof i,"The @observable decorator can only be used on objects",t),n("function"==typeof s,"@observable expects a getter function if used on a property.",t),n(!o.set,"@observable properties cannot have a setter.",t),n(0===s.length,"@observable getter functions should not take arguments.",t),r.configurable=!0,r.enumerable=!1,r.get=function(){return C(R(this,void 0,e.Recursive),t,a&&a.asStructure===!0?z(s):s),this[t]},r.set=Ye,o?r:void Object.defineProperty(i,t,r)}function Ye(){throw new Error("[ComputedValue] It is not allowed to assign new values to computed properties.")}function He(e,r){n("function"==typeof e&&1===e.length,"createTransformer expects a function that accepts one argument");var t={},o=function(n){function o(t,r){n.call(this,function(){return e(r)},null,!1,"Transformer-"+e.name+"-"+t),this.sourceIdentifier=t,this.sourceObject=r}return L(o,n),o.prototype.onBecomeUnobserved=function(){var e=this.value;n.prototype.onBecomeUnobserved.call(this),delete t[this.sourceIdentifier],r&&r(e,this.sourceObject)},o}(p);return function(r){var n=Ke(r),e=t[n];return e?e.get():(e=t[n]=new o(n,r),e.get())}}function Ke(e){if(null===e||"object"!=typeof e)throw new Error("[mobx] transform expected some kind of object, got: "+e);var t=e.$transformId;return void 0===t?e.$transformId=l():t}function ze(e,t){return O()||console.warn("[mobx.expr] 'expr' should only be used inside other reactive functions."),_(e,t).get()}function te(t){for(var o=[],r=1;r<arguments.length;r++)o[r-1]=arguments[r];return n(arguments.length>=2,"extendObservable expected 2 or more arguments"),n("object"==typeof t,"extendObservable expects an object as first argument"),n(!(t instanceof h),"extendObservable should not be used on maps, use map.merge instead"),o.forEach(function(r){n("object"==typeof r,"all arguments of extendObservable should be objects"),ne(t,r,e.Recursive,null)}),t}function ne(e,t,r,o){var i=R(e,o,r);for(var n in t)if(t.hasOwnProperty(n)){if(e===t&&!pe(e,n))continue;C(i,n,t[n])}return e}function oe(e,n){var r=t.allowStateChanges;t.allowStateChanges=e;var o=n();return t.allowStateChanges=r,o}function a(e,n,t){void 0===t&&(t=!1),c&&c.emit({id:e.id,name:e.name+"@"+e.id,node:e,state:n,changed:t})}function Ie(e){return ie(e)}function ie(e){var t={id:e.id,name:e.name+"@"+e.id};return e.observing&&e.observing.length&&(t.dependencies=be(e.observing).map(ie)),t}function Fe(e){return ae(e)}function ae(e){var t={id:e.id,name:e.name+"@"+e.id};return e.observers&&e.observers.length&&(t.observers=be(e.observers).map(ae)),t}function De(n){var e=[],t=!1;return function(r){(n||r.changed)&&e.push(r),t||(t=!0,setTimeout(function(){console[console.table?"table":"dir"](e),e=[],t=!1},1))}}function Pe(e,t){void 0===e&&(e=!1),c||(c=new f);var n=t?function(n){(e||n.changed)&&t(n)}:De(e),r=c.on(n);return me(function(){r(),0===c.listeners.length&&(c=null)})}function y(e,t){if(null===e||void 0===e)return!1;if(void 0!==t){if(e instanceof h||e instanceof i)throw new Error("[mobx.isObservable] isObservable(object, propertyName) is not supported for arrays and maps. Use map.has or array.length instead.");if(g(e)){var n=e.$mobx;return n.values&&!!n.values[t]}return!1}return!!e.$mobx||e instanceof w||e instanceof S||e instanceof p}function Ae(s,r,t){if(n(arguments.length>=2&&arguments.length<=3,"Illegal decorator config",r),D(s,r),t&&t.hasOwnProperty("get"))return m("Using @observable on computed values is deprecated. Use @computed instead."),_.apply(null,arguments);var o={},i=void 0;return t&&(t.hasOwnProperty("value")?i=t.value:t.initializer&&(i=t.initializer(),"function"==typeof i&&(i=A(i)))),n("object"==typeof s,"The @observable decorator can only be used on objects",r),o.configurable=!0,o.enumerable=!0,o.get=function(){var t=this;return oe(!0,function(){C(R(t,void 0,e.Recursive),r,i)}),this[r]},o.set=function(t){C(R(this,void 0,e.Recursive),r,"function"==typeof t?A(t):t)},t?o:void Object.defineProperty(s,r,o)}function fe(t,a){if("string"==typeof arguments[1])return Ae.apply(null,arguments);if(n(1===arguments.length||2===arguments.length,"observable expects one or two arguments"),y(t))return t;var s=$(t,e.Recursive),o=s[0],i=s[1],c=o===e.Reference?r.Reference:_e(i);switch(c){case r.Array:case r.PlainObject:return E(i,o);case r.Reference:case r.ComplexObject:return new u(i,o);case r.ComplexFunction:throw new Error("[mobx.observable] To be able to make a function reactive it should not have arguments. If you need an observable reference to a function, use `observable(asReference(f))`");case r.ViewFunction:return m("Use `computed(expr)` instead of `observable(expr)`"),_(t,a)}n(!1,"Illegal State")}function _e(e){return null===e||void 0===e?r.Reference:"function"==typeof e?e.length?r.ComplexFunction:r.ViewFunction:Array.isArray(e)||e instanceof i?r.Array:"object"==typeof e?v(e)?r.PlainObject:r.ComplexObject:r.Reference}function M(t,n,e,r){return"function"==typeof e?ge(t,n,e,r):J(t,n,e)}function J(e,t,r){return P(e)?e.observe(t):F(e)?e.observe(t):g(e)?Ve(e,t,r):e instanceof u||e instanceof p?e.observe(t,r):v(e)?J(fe(e),t,r):void n(!1,"first argument of observe should be some observable value or plain object")}function ge(e,t,r,o){var i="[mobx.observe] the provided observable map has no key with name: "+t;if(F(e)){if(!e._has(t))throw new Error(i);return M(e._data[t],r)}if(g(e)){if(!y(e,t))throw new Error(i);return M(e.$mobx.values[t],r,o)}return v(e)?(te(e,{property:e[t]}),ge(e,t,r,o)):void n(!1,"first argument of observe should be an (observable)object or observableMap if a property name is given")}function b(e,n,t){function s(r){return n&&t.push([e,r]),r}if(void 0===n&&(n=!0),void 0===t&&(t=null),n&&null===t&&(t=[]),n&&null!==e&&"object"==typeof e)for(var o=0,c=t.length;c>o;o++)if(t[o][0]===e)return t[o][1];if(!e)return e;if(Array.isArray(e)||e instanceof i){var r=s([]);return r.push.apply(r,e.map(function(e){return b(e,n,t)})),r}if(e instanceof h){var r=s({});return e.forEach(function(e,o){return r[o]=b(e,n,t)}),r}if("object"==typeof e&&v(e)){var r=s({});for(var a in e)e.hasOwnProperty(a)&&(r[a]=b(e[a],n,t));return r}return y(e)&&e.$mobx instanceof u?b(e(),n,t):e}function ye(e){n(e.isDirty,"atom not dirty"),e.isDirty=!1,a(e,"READY",!0),K(e,!0)}function O(){return t.derivationStack.length>0}function N(){n(t.allowStateChanges,"It is not allowed to change the state when a computed value is being evaluated. Use 'autorun' to create reactive functions with side-effects. Or use 'extras.allowStateChanges(true, block)' to supress this message.")}function we(e){1===++e.dependencyStaleCount&&(a(e,"STALE"),q(e))}function Se(e,t){if(n(e.dependencyStaleCount>0,"unexpected ready notification"),t&&(e.dependencyChangeCount+=1),0===--e.dependencyStaleCount)if(e.dependencyChangeCount>0){e.dependencyChangeCount=0,a(e,"PENDING");var r=e.onDependenciesReady();K(e,r)}else a(e,"READY",!1),K(e,!1)}function de(e,n){var r=e.observing;e.observing=[],t.derivationStack.push(e);var o=n();return Re(e,r),o}function Re(r,u){t.derivationStack.length-=1;for(var i=ue(r.observing,u),o=i[0],s=i[1],e=0,a=o.length;a>e;e++){var c=o[e];n(!he(r,c),"Cycle detected",r),Ze(o[e],r)}for(var e=0,a=s.length;a>e;e++)B(s[e],r)}function he(r,n){var e=n.observing;if(void 0===e)return!1;if(-1!==e.indexOf(n))return!0;for(var o=e.length,t=0;o>t;t++)if(he(r,e[t]))return!0;return!1}function l(){return++t.mobxGuid}function Le(){}function Ne(){var e=new se;for(var n in e)t[n]=e[n]}function Ze(e,r){var t=e.observers,n=t.length;t[n]=r,0===n&&e.onBecomeObserved()}function B(t,r){var e=t.observers,n=e.indexOf(r);-1!==n&&e.splice(n,1),0===e.length&&t.onBecomeUnobserved()}function G(n){if(!(t.inUntracked>0)){var o=t.derivationStack,i=o.length;if(i>0){var e=o[i-1].observing,r=e.length;e[r-1]!==n&&e[r-2]!==n&&(e[r]=n)}}}function q(e){var t=e.observers.slice();t.forEach(we),e.staleObservers=e.staleObservers.concat(t)}function K(e,t){e.staleObservers.splice(0).forEach(function(e){return Se(e,t)})}function Ce(e){m("This feature is experimental and might be removed in a future minor release. Please report if you use this feature in production: https://github.com/mobxjs/mobx/issues/49"),t.inUntracked++;var n=e();return t.inUntracked--,n}function Y(){if(!t.isRunningReactions){t.isRunningReactions=!0;for(var e=t.pendingReactions,o=0;e.length;){if(++o===Ue)throw new Error("Reaction doesn't converge to a stable state. Probably there is a cycle in the reactive function: "+e[0].toString());for(var r=e.splice(0),n=0,i=r.length;i>n;n++)r[n].runReaction()}t.isRunningReactions=!1}}function d(r,o){t.inTransaction+=1;var i=r.call(o);if(0===--t.inTransaction){for(var n=t.changedAtoms.splice(0),e=0,s=n.length;s>e;e++)ye(n[e]);Y()}return i}function A(e){return new H(e)}function z(e){return new k(e)}function Q(e){return new I(e)}function $(t,n){return t instanceof H?[e.Reference,t.value]:t instanceof k?[e.Structure,t.value]:t instanceof I?[e.Flat,t.value]:[n,t]}function qe(t){return t===A?e.Reference:t===z?e.Structure:t===Q?e.Flat:(n(void 0===t,"Cannot determine value mode from function. Please pass in one of these: mobx.asReference, mobx.asStructure or mobx.asFlat, got: "+t),e.Recursive)}function E(t,a,s){var r;if(y(t))return t;switch(a){case e.Reference:return t;case e.Flat:o(t,"Items inside 'asFlat' canont have modifiers"),r=e.Reference;break;case e.Structure:o(t,"Items inside 'asStructure' canont have modifiers"),r=e.Structure;break;case e.Recursive:i=$(t,e.Recursive),r=i[0],t=i[1];break;default:n(!1,"Illegal State")}return Array.isArray(t)&&Object.isExtensible(t)?le(t,r,s):v(t)&&Object.isExtensible(t)?ne(t,t,r,s):t;var i}function o(e,t){if(e instanceof H||e instanceof k||e instanceof I)throw new Error("[mobx] asStructure / asReference / asFlat cannot be used here. "+t)}function Ge(e){return e.atom.reportObserved(),e.values.length}function Be(n,e){if("number"!=typeof e||0>e)throw new Error("[mobx.array] Out of range: "+e);var t=n.values.length;e!==t&&(e>t?s(n,t,0,new Array(e-t)):s(n,e,t-e))}function re(n,t,e){if(t!==n.lastKnownLength)throw new Error("[mobx] Modification exception: the internal structure of an observable array was changed. Did you use peek() to change it?");N(),n.lastKnownLength+=e,e>0&&t+e>V&&ce(t+e)}function s(o,e,n,t){var r=o.values.length;if(!(void 0!==t&&0!==t.length||0!==n&&0!==r))return[];void 0===e?e=0:e>r?e=r:0>e&&(e=Math.max(0,r+e)),n=2===arguments.length?r-e:void 0===n||null===n?0:Math.max(0,Math.min(n,r-e)),t=void 0===t?j:t.map(o.makeChildReactive);var a=t.length-n;re(o,r,a);var i=(s=o.values).splice.apply(s,[e,n].concat(t));return Me(o,e,i,t),i;var s}function et(t){return o(t,"Array values cannot have modifiers"),this.mode===e.Flat||this.mode===e.Reference?t:E(t,this.mode,this.atom.name+"@"+this.atom.id+" / ArrayEntry")}function Te(e,t,n){e.atom.reportChanged(),e.changeEvent&&e.changeEvent.emit({object:e.array,type:"update",index:t,oldValue:n})}function Me(e,r,t,n){(0!==t.length||0!==n.length)&&(e.atom.reportChanged(),e.changeEvent&&e.changeEvent.emit({object:e.array,type:"splice",index:r,addedCount:n.length,removed:t}))}function $e(t){Object.defineProperty(i.prototype,""+t,{enumerable:!1,configurable:!1,set:function(n){var r=this.$mobx,i=r.values;if(o(n,"Modifiers cannot be used on array values. For non-reactive array values use makeReactive(asFlat(array))."),t<i.length){N();var a=i[t],u=r.mode===e.Structure?!x(a,n):a!==n;u&&(i[t]=r.makeChildReactive(n),Te(r,t,a))}else{if(t!==i.length)throw new Error("[mobx.array] Index out of bounds, "+t+" is larger than "+i.length);s(r,t,0,[n])}},get:function(){var e=this.$mobx;return e&&t<e.values.length?(e.atom.reportObserved(),e.values[t]):void 0}})}function ce(t){for(var e=V;t>e;e++)$e(e);V=t}function le(e,t,n){return new i(e,t,n)}function Ee(t){return m("fastArray is deprecated. Please use `observable(asFlat([]))`"),le(t,e.Flat,null)}function P(e){return e instanceof i}function ke(e,t){return new h(e,t)}function F(e){return e instanceof h}function R(t,n,r){if(void 0===n&&(n="ObservableObject"),void 0===r&&(r=e.Recursive),t.$mobx){if(t.$mobx.type!==T)throw new Error("The given object is observable but not an observable object");return t.$mobx}var o={type:T,values:{},events:void 0,id:l(),target:t,name:n,mode:r};return Object.defineProperty(t,"$mobx",{enumerable:!1,configurable:!1,writable:!1,value:o}),o}function C(e,t,n){e.values[t]?e.target[t]=n:Oe(e,t,n)}function Oe(e,n,t){D(e.target,n);var r,o=e.name+"@"+e.id+' / Prop "'+n+'"';r="function"==typeof t&&0===t.length?new p(t,e.target,!1,o):t instanceof k&&"function"==typeof t.value&&0===t.value.length?new p(t.value,e.target,!0,o):new u(t,e.mode,o),e.values[n]=r,Object.defineProperty(e.target,n,{configurable:!0,enumerable:r instanceof u,get:function(){return r.get()},set:function(t){var o=r.get();r.set(t)&&void 0!==e.events&&e.events.emit({type:"update",object:this,name:n,oldValue:o})}}),void 0!==e.events&&e.events.emit({type:"add",object:e.target,name:n})}function Ve(e,r,o){n(g(e),"Expected observable object"),n(o!==!0,"`observe` doesn't support the fire immediately property for observable objects.");var t=e.$mobx;return void 0===t.events&&(t.events=new f),e.$mobx.events.on(r)}function g(e){return e&&e.$mobx&&e.$mobx.type===T}function n(t,n,e){if(!t)throw new Error("[mobx] Invariant failed: "+n+(e?" in '"+e+"'":""))}function m(e){-1===W.indexOf(e)&&(W.push(e),console.error("[mobx] Deprecated: "+e))}function me(t){var e=!1;return function(){return e?void 0:(e=!0,t.apply(this,arguments))}}function be(t){var e=[];return t.forEach(function(t){-1===e.indexOf(t)&&e.push(t)}),e}function v(e){return null!==e&&"object"==typeof e&&Object.getPrototypeOf(e)===Object.prototype}function ve(n,e,t){return n?!x(e,t):e!==t}function je(n,t){for(var e=0;e<t.length;e++)Object.defineProperty(n,t[e],{configurable:!0,writable:!0,enumerable:!1,value:n[t[e]]})}function pe(t,n){var e=Object.getOwnPropertyDescriptor(t,n);return!e||e.configurable!==!1&&e.writable!==!1}function D(t,e){n(pe(t,e),"Cannot make property '"+e+"' observable, it is not configurable and writable in the target object")}function x(e,t){if(null===e&&null===t)return!0;if(void 0===e&&void 0===t)return!0;var o=Array.isArray(e)||P(e);if(o!==(Array.isArray(t)||P(t)))return!1;if(o){if(e.length!==t.length)return!1;for(var n=e.length;n>=0;n--)if(!x(e[n],t[n]))return!1;return!0}if("object"==typeof e&&"object"==typeof t){if(null===e||null===t)return!1;if(Object.keys(e).length!==Object.keys(t).length)return!1;for(var r in e){if(!t.hasOwnProperty(r))return!1;if(!x(e[r],t[r]))return!1}return!0}return e===t}function ue(n,r){if(!r||!r.length)return[n,[]];if(!n||!n.length)return[[],r];for(var o=[],i=[],e=0,s=0,h=n.length,c=!1,t=0,a=0,l=r.length,u=!1,f=!1;!f&&!c;){if(!u){if(h>e&&l>t&&n[e]===r[t]){if(e++,t++,e===h&&t===l)return[o,i];continue}s=e,a=t,u=!0}a+=1,s+=1,a>=l&&(f=!0),s>=h&&(c=!0),c||n[s]!==r[t]?f||r[a]!==n[e]||(i.push.apply(i,r.slice(t,a)),t=a+1,e++,u=!1):(o.push.apply(o,n.slice(e,s)),e=s+1,t++,u=!1)}return o.push.apply(o,n.slice(e)),i.push.apply(i,r.slice(t)),[o,i]}var L=this&&this.__extends||function(t,e){function r(){this.constructor=t}for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)};Le(),exports._={quickDiff:ue,resetGlobalState:Ne},exports.extras={getDependencyTree:Ie,getObserverTree:Fe,trackTransitions:Pe,isComputingDerivation:O,allowStateChanges:oe},exports.autorun=U,exports.when=ee,exports.autorunUntil=Xe,exports.autorunAsync=We,exports.computed=_,exports.createTransformer=He,exports.expr=ze,exports.extendObservable=te;var c=null;exports.isObservable=y,exports.observable=fe;var r;!function(e){e[e.Reference=0]="Reference",e[e.PlainObject=1]="PlainObject",e[e.ComplexObject=2]="ComplexObject",e[e.Array=3]="Array",e[e.ViewFunction=4]="ViewFunction",e[e.ComplexFunction=5]="ComplexFunction"}(r||(r={})),exports.observe=M,exports.toJSON=b;var w=function(){function e(e,t,n){void 0===e&&(e="Atom"),void 0===t&&(t=xe),void 0===n&&(n=xe),this.name=e,this.onBecomeObserved=t,this.onBecomeUnobserved=n,this.id=l(),this.isDirty=!1,this.staleObservers=[],this.observers=[]}return e.prototype.reportObserved=function(){G(this)},e.prototype.reportChanged=function(){this.isDirty||(this.reportStale(),this.reportReady())},e.prototype.reportStale=function(){this.isDirty||(this.isDirty=!0,a(this,"STALE"),q(this))},e.prototype.reportReady=function(){n(this.isDirty,"atom not dirty"),t.inTransaction>0?t.changedAtoms.push(this):(ye(this),Y())},e.prototype.toString=function(){return this.name+"@"+this.id},e}();exports.Atom=w;var p=function(){function e(n,r,i,e){var o=this;void 0===e&&(e="ComputedValue"),this.derivation=n,this.scope=r,this.compareStructural=i,this.name=e,this.id=l(),this.isLazy=!0,this.isComputing=!1,this.staleObservers=[],this.observers=[],this.observing=[],this.dependencyChangeCount=0,this.dependencyStaleCount=0,this.value=void 0,this.peek=function(){o.isComputing=!0,t.isComputingComputedValue++;var e=t.allowStateChanges;t.allowStateChanges=!1;var i=n.call(r);return t.allowStateChanges=e,t.isComputingComputedValue--,o.isComputing=!1,i}}return e.prototype.onBecomeObserved=function(){},e.prototype.onBecomeUnobserved=function(){for(var e=0,t=this.observing.length;t>e;e++)B(this.observing[e],this);this.observing=[],this.isLazy=!0,this.value=void 0},e.prototype.onDependenciesReady=function(){var e=this.trackAndCompute();return a(this,"READY",e),e},e.prototype.get=function(){if(n(!this.isComputing,"Cycle detected",this.derivation),this.dependencyStaleCount>0&&t.inTransaction>0)return this.peek();if(this.isLazy){if(!O())return this.peek();this.isLazy=!1,this.trackAndCompute(),G(this)}else G(this);return this.value},e.prototype.set=function(e){throw new Error("[ComputedValue '"+name+"'] It is not possible to assign a new value to a computed value.")},e.prototype.trackAndCompute=function(){var e=this.value;return this.value=de(this,this.peek),ve(this.compareStructural,this.value,e)},e.prototype.observe=function(n,r){var o=this,e=!0,t=void 0;return U(function(){var i=o.get();(!e||r)&&n(i,t),e=!1,t=i})},e.prototype.toString=function(){return this.name+"@"+this.id+"["+this.derivation.toString()+"]"},e}(),se=function(){function e(){this.version=1,this.derivationStack=[],this.mobxGuid=0,this.inTransaction=0,this.inUntracked=0,this.isRunningReactions=!1,this.isComputingComputedValue=0,this.changedAtoms=[],this.pendingReactions=[],this.allowStateChanges=!0}return e}(),t=function(){var e=new se;if(global.__mobservableTrackingStack||global.__mobservableViewStack)throw new Error("[mobx] An incompatible version of mobservable is already loaded.");if(global.__mobxGlobal&&global.__mobxGlobal.version!==e.version)throw new Error("[mobx] An incompatible version of mobx is already loaded.");return global.__mobxGlobal?global.__mobxGlobal:global.__mobxGlobal=e}();exports.untracked=Ce;var S=function(){function e(e,t){void 0===e&&(e="Reaction"),this.name=e,this.onInvalidate=t,this.id=l(),this.staleObservers=j,this.observers=j,this.observing=[],this.dependencyChangeCount=0,this.dependencyStaleCount=0,this.isDisposed=!1,this._isScheduled=!1}return e.prototype.onBecomeObserved=function(){},e.prototype.onBecomeUnobserved=function(){},e.prototype.onDependenciesReady=function(){return this._isScheduled||(this._isScheduled=!0,t.pendingReactions.push(this)),!1},e.prototype.isScheduled=function(){return this.dependencyStaleCount>0||this._isScheduled},e.prototype.runReaction=function(){this.isDisposed||(this._isScheduled=!1,this.onInvalidate(),a(this,"READY",!0))},e.prototype.track=function(e){de(this,e)},e.prototype.dispose=function(){if(!this.isDisposed){this.isDisposed=!0;for(var t=this.observing.splice(0),e=0,n=t.length;n>e;e++)B(t[e],this)}},e.prototype.getDisposer=function(){var e=this.dispose.bind(this);return e.$mobx=this,e},e.prototype.toString=function(){return"Reaction["+this.name+"]"},e}();exports.Reaction=S;var Ue=100;exports.transaction=d;var e;!function(e){e[e.Recursive=0]="Recursive",e[e.Reference=1]="Reference",e[e.Structure=2]="Structure",e[e.Flat=3]="Flat"}(e||(e={})),exports.asReference=A,exports.asStructure=z,exports.asFlat=Q;var H=function(){function e(e){this.value=e,o(e,"Modifiers are not allowed to be nested")}return e}(),k=function(){function e(e){this.value=e,o(e,"Modifiers are not allowed to be nested")}return e}(),I=function(){function e(e){this.value=e,o(e,"Modifiers are not allowed to be nested")}return e}(),V=0,Z=function(){function e(){}return e}();Z.prototype=[];var i=function(t){function e(n,r,o){t.call(this);var e=this.$mobx={atom:new w(o||"ObservableArray"),values:void 0,changeEvent:void 0,lastKnownLength:0,mode:r,array:this,makeChildReactive:function(t){return et.call(e,t)}};Object.defineProperty(this,"$mobx",{enumerable:!1,configurable:!1,writable:!1}),n&&n.length?(re(e,0,n.length),e.values=n.map(e.makeChildReactive)):e.values=[]}return L(e,t),e.prototype.observe=function(t,e){return void 0===e&&(e=!1),void 0===this.$mobx.changeEvent&&(this.$mobx.changeEvent=new f),e&&t({object:this,type:"splice",index:0,addedCount:this.$mobx.values.length,removed:[]}),this.$mobx.changeEvent.on(t)},e.prototype.clear=function(){return this.splice(0)},e.prototype.replace=function(e){return s(this.$mobx,0,this.$mobx.values.length,e)},e.prototype.toJSON=function(){return this.$mobx.atom.reportObserved(),this.$mobx.values.slice()},e.prototype.peek=function(){return this.$mobx.values},e.prototype.find=function(r,o,t){void 0===t&&(t=0),this.$mobx.atom.reportObserved();for(var n=this.$mobx.values,i=n.length,e=t;i>e;e++)if(r.call(o,n[e],e,this))return n[e];return null},e.prototype.splice=function(t,n){for(var r=[],e=2;e<arguments.length;e++)r[e-2]=arguments[e];switch(arguments.length){case 0:return[];case 1:return s(this.$mobx,t);case 2:return s(this.$mobx,t,n)}return s(this.$mobx,t,n,r)},e.prototype.push=function(){for(var t=[],e=0;e<arguments.length;e++)t[e-0]=arguments[e];return s(this.$mobx,this.$mobx.values.length,0,t),this.$mobx.values.length},e.prototype.pop=function(){return this.splice(Math.max(this.$mobx.values.length-1,0),1)[0]},e.prototype.shift=function(){return this.splice(0,1)[0]},e.prototype.unshift=function(){for(var t=[],e=0;e<arguments.length;e++)t[e-0]=arguments[e];return s(this.$mobx,0,0,t),this.$mobx.values.length},e.prototype.reverse=function(){this.$mobx.atom.reportObserved();var e=this.slice();return e.reverse.apply(e,arguments)},e.prototype.sort=function(t){this.$mobx.atom.reportObserved();var e=this.slice();return e.sort.apply(e,arguments)},e.prototype.remove=function(t){var e=this.$mobx.values.indexOf(t);return e>-1?(this.splice(e,1),!0):!1},e.prototype.toString=function(){return"[mobx.array] "+Array.prototype.toString.apply(this.$mobx.values,arguments)},e.prototype.toLocaleString=function(){return"[mobx.array] "+Array.prototype.toLocaleString.apply(this.$mobx.values,arguments)},e}(Z);je(i.prototype,["constructor","clear","find","observe","pop","peek","push","remove","replace","reverse","shift","sort","splice","split","toJSON","toLocaleString","toString","unshift"]),Object.defineProperty(i.prototype,"length",{enumerable:!1,configurable:!0,get:function(){return Ge(this.$mobx)},set:function(e){Be(this.$mobx,e)}}),["concat","every","filter","forEach","indexOf","join","lastIndexOf","map","reduce","reduceRight","slice","some"].forEach(function(e){var t=Array.prototype[e];Object.defineProperty(i.prototype,e,{configurable:!1,writable:!0,enumerable:!1,value:function(){return this.$mobx.atom.reportObserved(),t.apply(this.$mobx.values,arguments)}})}),ce(1e3),exports.fastArray=Ee,exports.isObservableArray=P;var Je={},h=function(){function t(t,n){var r=this;this.$mobx=Je,this._data={},this._hasMap={},this._events=void 0,this.name="ObservableMap",this.id=l(),this._keys=new i(null,e.Reference,this.name+"@"+this.id+" / keys()"),this._valueMode=qe(n),v(t)?this.merge(t):Array.isArray(t)&&t.forEach(function(e){var t=e[0],n=e[1];return r.set(t,n)})}return t.prototype._has=function(e){return"undefined"!=typeof this._data[e]},t.prototype.has=function(e){return this.isValidKey(e)?this._hasMap[e]?this._hasMap[e].get():this._updateHasMapEntry(e,!1).get():!1},t.prototype.set=function(e,n){var t=this;if(this.assertValidKey(e),o(n,"[mobx.map.set] Expected unwrapped value to be inserted to key '"+e+"'. If you need to use modifiers pass them as second argument to the constructor"),this._has(e)){var r=this._data[e].value,i=this._data[e].set(n);i&&this._events&&this._events.emit({type:"update",object:this,name:e,oldValue:r})}else d(function(){t._data[e]=new u(n,t._valueMode,t.name+"@"+t.id+' / Entry "'+e+'"'),t._updateHasMapEntry(e,!0),t._keys.push(e)}),this._events&&this._events.emit({type:"add",object:this,name:e})},t.prototype.delete=function(e){var t=this;if(this._has(e)){var n=this._data[e].value;d(function(){t._keys.remove(e),t._updateHasMapEntry(e,!1);var n=t._data[e];n.set(void 0),t._data[e]=void 0}),this._events&&this._events.emit({type:"delete",object:this,name:e,oldValue:n})}},t.prototype._updateHasMapEntry=function(n,r){var t=this._hasMap[n];return t?t.set(r):t=this._hasMap[n]=new u(r,e.Reference,this.name+"@"+this.id+' / Contains "'+n+'"'),t},t.prototype.get=function(e){return this.has(e)?this._data[e].get():void 0},t.prototype.keys=function(){return this._keys.slice()},t.prototype.values=function(){return this.keys().map(this.get,this)},t.prototype.entries=function(){var e=this;return this.keys().map(function(t){return[t,e.get(t)]})},t.prototype.forEach=function(e,t){var n=this;this.keys().forEach(function(r){return e.call(t,n.get(r),r)})},t.prototype.merge=function(e){var n=this;return d(function(){e instanceof t?e.keys().forEach(function(t){return n.set(t,e.get(t))}):Object.keys(e).forEach(function(t){return n.set(t,e[t])})}),this},t.prototype.clear=function(){var e=this;d(function(){e.keys().forEach(e.delete,e)})},Object.defineProperty(t.prototype,"size",{get:function(){return this._keys.length},enumerable:!0,configurable:!0}),t.prototype.toJs=function(){var t=this,e={};return this.keys().forEach(function(n){return e[n]=t.get(n)}),e},t.prototype.isValidKey=function(e){return null===e||void 0===e?!1:"string"!=typeof e&&"number"!=typeof e?!1:!0},t.prototype.assertValidKey=function(e){if(!this.isValidKey(e))throw new Error("[mobx.map] Invalid key: '"+e+"'")},t.prototype.toString=function(){var e=this;return"[mobx.map { "+this.keys().map(function(t){return t+": "+e.get(t)}).join(", ")+" }]"},t.prototype.observe=function(e){return this._events||(this._events=new f),this._events.on(e)},t}();exports.ObservableMap=h,exports.map=ke,exports.isObservableMap=F;var T={};exports.isObservableObject=g;var u=function(n){function t(o,i,t){void 0===t&&(t="ObservableValue"),n.call(this,t),this.mode=i,this.hasUnreportedChange=!1,this.events=null,this.value=void 0;var r=$(o,e.Recursive),s=r[0],a=r[1];this.mode===e.Recursive&&(this.mode=s),this.value=E(a,this.mode,this.name)}return L(t,n),t.prototype.set=function(t){o(t,"Modifiers cannot be used on non-initial values."),N();var n=this.value,r=ve(this.mode===e.Structure,n,t);return r&&(this.value=E(t,this.mode,this.name),this.reportChanged(),this.events&&this.events.emit(t,n)),r},t.prototype.get=function(){return this.reportObserved(),this.value},t.prototype.observe=function(e,t){return this.events||(this.events=new f),t&&e(this.value,void 0),this.events.on(e)},t.prototype.toString=function(){return this.name+"@"+this.id+"["+this.value+"]"},t}(w),f=function(){function e(){this.listeners=[]}return e.prototype.emit=function(){for(var r=[],e=0;e<arguments.length;e++)r[e-0]=arguments[e];for(var n=this.listeners.slice(),t=0,o=n.length;o>t;t++)n[t].apply(null,arguments)},e.prototype.on=function(e){var t=this;return this.listeners.push(e),me(function(){var n=t.listeners.indexOf(e);-1!==n&&t.listeners.splice(n,1)})},e.prototype.once=function(t){var e=this.on(function(){e(),t.apply(this,arguments)});return e},e}();exports.SimpleEventEmitter=f;var j=[];Object.freeze(j);var W=[],xe=function(){};
//# sourceMappingURL=lib/mobx.min.js.map

31

lib/mobx.umd.js

@@ -76,9 +76,16 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.mobx = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

exports.autorunAsync = autorunAsync;
function computed(target, key, baseDescriptor, options) {
if (arguments.length < 3 && typeof target === "function") {
return observable(target, key);
}
function computed(targetOrExpr, keyOrScope, baseDescriptor, options) {
if (arguments.length < 3 && typeof targetOrExpr === "function")
return computedExpr(targetOrExpr, keyOrScope);
return computedDecorator.apply(null, arguments);
}
exports.computed = computed;
function computedExpr(expr, scope) {
var _a = getValueModeFromValue(expr, ValueMode.Recursive), mode = _a[0], value = _a[1];
return new ComputedValue(value, scope, mode === ValueMode.Structure, value.name || "ComputedValue");
}
function computedDecorator(target, key, baseDescriptor, options) {
if (arguments.length === 1) {
var options_1 = target;
return function (target, key, baseDescriptor) { return computed.call(null, target, key, baseDescriptor, options_1); };
return function (target, key, baseDescriptor) { return computedDecorator.call(null, target, key, baseDescriptor, options_1); };
}

@@ -107,3 +114,2 @@ invariant(baseDescriptor && baseDescriptor.hasOwnProperty("get"), "@computed can only be used on getter functions, like: '@computed get myProps() { return ...; }'");

}
exports.computed = computed;
function throwingComputedValueSetter() {

@@ -152,3 +158,3 @@ throw new Error("[ComputedValue] It is not allowed to assign new values to computed properties.");

console.warn("[mobx.expr] 'expr' should only be used inside other reactive functions.");
return observable(expr, scope).get();
return computed(expr, scope).get();
}

@@ -322,10 +328,8 @@ exports.expr = expr;

case ValueType.ComplexObject:
observableIsDeprecated();
return new ObservableValue(value, mode);
case ValueType.ComplexFunction:
observableIsDeprecated();
throw new Error("[mobx.observable] To be able to make a function reactive it should not have arguments. If you need an observable reference to a function, use `observable(asReference(f))`");
case ValueType.ViewFunction:
observableIsDeprecated();
return new ComputedValue(value, keyOrScope, mode === ValueMode.Structure, value.name || "ComputedValue");
deprecated("Use `computed(expr)` instead of `observable(expr)`");
return computed(v, keyOrScope);
}

@@ -335,5 +339,2 @@ invariant(false, "Illegal State");

exports.observable = observable;
function observableIsDeprecated() {
deprecated("Invoking observable() on scalar values is deprecated. Use extendObservable or @observable instead.");
}
var ValueType;

@@ -655,3 +656,3 @@ (function (ValueType) {

throw new Error("[mobx] An incompatible version of mobservable is already loaded.");
if (global.__mobxGlobal && global.__mobxGlobal.version !== globalState.version)
if (global.__mobxGlobal && global.__mobxGlobal.version !== res.version)
throw new Error("[mobx] An incompatible version of mobx is already loaded.");

@@ -658,0 +659,0 @@ if (global.__mobxGlobal)

4

package.json
{
"name": "mobx",
"version": "2.0.0",
"version": "2.0.1",
"description": "Simple, scalable state management.",

@@ -16,3 +16,3 @@ "main": "lib/mobx.js",

"test-browser": "npm run small-build && ( browserify test/*.js | tape-run )",
"test-travis": "npm run test-browser && npm run use-minified && istanbul cover tape test/*.js test/perf/index.js",
"test-travis": "npm run test-browser && istanbul cover tape test/*.js test/perf/index.js && npm run use-minified && npm run tape",
"coverage": "npm run small-build && npm run build-tests && istanbul cover tape test/*.js test/perf/index.js && cat ./coverage/lcov.info|coveralls",

@@ -19,0 +19,0 @@ "build-tests": "npm run build-typescript-tests && npm run build-babel-tests",

217

README.md
# MobX
<img src="https://mobxjs.github.io/mobx/images/mobx.png" align="right" width="120px" />
## _Simple, scalable state management_
### _Simple, scalable state management._
[![Build Status](https://travis-ci.org/mobxjs/mobx.svg?branch=master)](https://travis-ci.org/mobxjs/mobx)

@@ -12,102 +10,173 @@ [![Coverage Status](https://coveralls.io/repos/mobxjs/mobx/badge.svg?branch=master&service=github)](https://coveralls.io/github/mobxjs/mobx?branch=master)

## MobX was formerly known as Mobservable.
To use install pre `2.0` `mobx*` compatible packages, use `mobservable` instead of `mobx`.
* Installation: `npm install mobx --save`. React bindings: `npm install mobx-react --save`
* [Ten minute, interactive MobX + React tutorial](https://mobxjs.github.io/mobx/getting-started.html)
* Api documentation (including ES5, ES6, Typescript examples): https://mobxjs.github.io/mobx
---
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).
The philosophy behind MobX is very simple:
_Everything that can be derived from the application state, should be derived. Automatically._
which includes the UI, data serialization, server communication, etc.
React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
Both React and MobX provide very optimal and unique solutions to common problems in application development. React provides mechanisms to optimally render UI by using a virtual DOM that reduces the number of costly DOM mutations. MobX provides mechanisms to optimally synchronize application state with your React components by using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale.
## MobX was formerly known as Mobservable.
To use install pre- 2.0 `mobx*` compatible packages, use `mobservable` instead of `mobx`.
See the [changelog](https://github.com/mobxjs/mobx/blob/master/CHANGELOG.md) for all the details.
<br/>
* New to MobX? Take the [five minute, interactive introduction](https://mobxjs.github.io/mobx/getting-started.html)
* [Official documentation](https://mobxjs.github.io/mobx/)
* MobX talk on [Reactive2015](https://www.youtube.com/watch?v=FEwLwiizlk0)
## Core concepts
MobX has a only few core concepts. The following snippets can be tried online using [JSFiddle](https://jsfiddle.net/mweststrate/wv3yopo0/) (or [without ES6 and JSX](https://jsfiddle.net/rubyred/3rL0183y/10/)).
## Introduction
### Observable state
MobX enables your data structures to become observable.
Next to that it can make your functions (or [React components](https://github.com/mobxjs/mobx-react)) reactive, so that they re-evaluate whenever relevant data is altered.
It's like Excel for JavaScript: any data structure can be turned into a 'data cell', and every function or user interface component can be turned into a 'formula' that updates automatically.
MobX is unopiniated about which data structures to use;
it can work with mutable objects, arrays, (cyclic) references, classes etc.
So that your actions, stores and user interface can remain KISS.
Besides that, it is [fast](https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/).
MobX adds observable capabilities to existing data structures like objects, arrays and class instances. This can simply be done by annotating your class properties with the [@observable](http://mobxjs.github.io/mobx/refguide/observable-decorator.html) decorator (ES2015), or by invoking the [`observable`](http://mobxjs.github.io/mobx/refguide/observable.html) or [`extendObservable`](http://mobxjs.github.io/mobx/refguide/extend-observable.html) functions (ES5). See [Language support](https://github.com/mobxjs/mobx/wiki/Language-Support) for language-specific examples.
## The essentials
```javascript
class Todo {
id = Math.random();
@observable title = "";
@observable finished = false;
}
```
MobX can be summarized in two functions that will fundamentally simplify the way you write React applications.
Let's start by building a really really simple timer application:
Using `@observable` is like turning a value into a spreadsheet cell. But unlike spreadsheets, these values can be not just primitive values, but references, objects and arrays as well. You can even [define your own](http://mobxjs.github.io/mobx/refguide/extending.html) observable data sources.
### Reactive derivations
With MobX you can simply define derived values that will update automatically when relevant data is modified. For example by using the [`@computed`](http://mobxjs.github.io/mobx/refguide/computed-decorator.html) decorator or by using parameterless functions as property values in `extendObservable`.
```javascript
var timerData = mobx.observable({
secondsPassed: 0
});
class TodoList {
@observable todos = [];
@computed get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.finished).length;
}
}
```
MobX will ensure that `unfinishedTodoCount` is updated automatically when a todo is added or when one of the `finished` properties is modified.
Computations like these can very well be compared with formulas in spreadsheet programs like MS Excel. They update automatically whenever, and only when, needed.
setInterval(function() {
timerData.secondsPassed++;
}, 1000);
### Reactions
var Timer = mobx.observer(React.createClass({
render: function() {
return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
}
}));
Reactions are similar to a computed value, but instead of producing a new value, a reaction produces a side effect for things like printing to the console, making network requests, incrementally updating the React component tree to patch the DOM, etc. In short, reactions bridge [reactive](https://en.wikipedia.org/wiki/Reactive_programming) and [imperative](https://en.wikipedia.org/wiki/Imperative_programming) programming.
React.render(<Timer timerData={timerData} />, document.body);
If you are using React, you can turn your (stateless function) components into reactive components by simply adding the [`@observer`](http://mobxjs.github.io/mobx/refguide/observer-component.html) decorator from the `mobx-react` package onto them.
```javascript
import React, {Component} from 'react';
import {observer} from "mobx-react";
@observer
class TodoListView extends Component {
render() {
return <div>
<ul>
{this.props.todoList.todos.map(todo =>
<TodoView todo={todo} key={todo.id} />
)}
</ul>
Tasks left: {this.props.todoList.unfinishedTodoCount}
</div>
}
}
const TodoView = observer(({todo}) =>
<li>
<input
type="checkbox"
checked={todo.finished}
onClick={() => todo.finished = !todo.finished}
/>{todo.title}
</li>
);
const store = new TodoList();
React.render(<TodoListView todoList={store} />, document.getElementById('mount'));
```
In the example above the `timerData` data structure is made observable and the `Timer` component is turned into an `observer`.
MobX will automatically track all relations between _observable data_ and _observing functions (or components)_ so that the minimum amount of observers is updated to keep all observers fresh.
`observer` turns React (function) components into derivations of the data they render.
Its as simple as that. In the example above the `Timer` will automatically update each time the property `timerData.secondsPassed` is altered. This is because setter notifies the Timer observer.
The actual interesting thing about this approach are the things that are *not* in the code:
Also, reactions can be created using the [`autorun`](http://mobxjs.github.io/mobx/refguide/autorun.html), [`autorunAsync`](http://mobxjs.github.io/mobx/refguide/autorun-async.html) or [`when`](http://mobxjs.github.io/mobx/refguide/when.html) functions to fit your specific situations.
* The `setInterval` method didn't alter. It still treats `timerData` as a plain JS object.
* If the `Timer` component would be somewhere deep in our app; only the `Timer` would be re-rendered. Nothing else (sideways data loading).
* There are no subscriptions of any kind that need to be managed.
* There is no forced UI update in our 'controller'.
* There is no state in the component. Timer is a dumb component.
* This approach is unobtrusive; you are not forced to apply certain techniques like keeping all data denormalized and immutable.
* There is no higher order component that needs configuration; no scopes, lenses or cursors.
* There is no magic context being passed through components.
When using MobX there are no smart or dumb components.
All components render smartly but are defined in a dumb manner. MobX will simple make sure the components are always re-rendered whenever needed,
but also no more than that.
So the `onClick` handler in the above example will force the proper `TodoView` to render,
and it will cause the `TodoListView` to render if the number of unfinished tasks has changed.
### Notice
Unlike Object.observe, you cannot track added properties. So remeber to initialize any property you want to observe. Null values work if you don't have any value yet.
Observing added properties is impossible to achieve without native Proxy support or dirty checking.
However, if you would remove the `Tasks left` line (or put it into a separate component), the `TodoListView` will no longer re-render when ticking a box.
You can verify this yourself by changing the [JSFiddle](https://jsfiddle.net/mweststrate/wv3yopo0/).
## Getting started
### Actions
* `npm install mobx --save`.
* For (Native) React apps `npm install mobx-react --save` as well. You might also be interested in the [dev tools for React and MobX](https://github.com/mobxjs/mobx-react-devtools).
* [Five minute interactive introduction to MobX and React](https://mobxjs.github.io/mobx/getting-started.html)
Unlike many flux frameworks, MobX is unopinionated about how user events should be handled.
This can be done in a Flux like manner.
Or by processing events using RxJS.
Or by simply handling events in the most straightforward way possible, as demonstrated in the above `onClick` handler.
In the end it all boils down to: Somehow the state should be updated.
After updating the state, `MobX` will take care of the rest, in an efficient, glitch-free manner.
So simple statements like below are enough to automatically update the user interface.
There is no technical need for firing events, calling dispatcher or what more.
A React component is in the end nothing more than a fancy representation of your state.
A derivation that will be managed by MobX.
## Top level api
```javascript
store.todos.push(
new Todo("Get Coffee"),
new Todo("Write simpler code")
);
store.todos[0].finished = true;
```
For the full api, see the [API documentation](https://mobxjs.github.io/mobx/refguide/observable.html).
This is an overview of most important functions available in the `mobx` namespace:
## MobX: Simple and scalable
**observable(value, options?)**
The `observable` function is the swiss knife of mobx and enriches any data structure or function with observable capabilities.
MobX is one of the least obtrusive libraries you can use for state management. That makes the `MobX` approach not just simple, but very scalable as well:
**autorun(function)**
Turns a function into an observer so that it will automatically be re-evaluated if any data values it uses changes.
### Using classes and real references
With MobX you don't need to normalize your data. This makes the library very suitable for very complex domain models (At Mendix for example ~500 different domain classes in a single application).
**observer(reactJsComponent)**
The `observer` function (and ES6 decorator) from the `mobx-react` turns any Reactjs component into a reactive one.
From there on it will responds automatically to any relevant change in _observable_ data that was used by its render method.
### Referential integrity is guaranteed
Since data doesn't need to be normalized, and MobX automatically tracks the relations between state and derivations, you get referential integrity for free. Rendering something that is accessed through three levels of indirection? No problem, MobX will track them and re-render whenever one of the references changes. As a result staleness bugs are a thing of the past. As a programmer you might forget that changing some data might influence an seemingly unrelated component in a corner case. MobX won't forget.
## Examples
### Simpler actions are easier to maintain
As demonstrated above, modifying state when using MobX is very straightforward. You simply write down your intentions. MobX will take care of the rest.
* Online: Live edit the Todo example from the [introduction](https://mobxjs.github.io/mobx/getting-started.html#demo).
* Online: Simple timer example on [JSFiddle](https://jsfiddle.net/mweststrate/wgbe4guu/).
* Repo: [Minimal boilerplate repostory](https://github.com/mobxjs/mobx-react-boilerplate).
* Repo: [Full TodoMVC implementation](https://github.com/mobxjs/mobx-react-todomvc).
* External example: The ports of the _Notes_ and _Kanban_ [examples of the "SurviveJS - Webpack and React"](https://github.com/survivejs/mobx-demo).
### Fine grained observability is efficient
MobX builds a graph of all the derivations in your application to find the least number of re-computations that is needed to prevent staleness. "Derive everything" might sound expensive, MobX builds a virtual derivation graph to minimize the number of recomputations needed to keep derivations in sync with the state. In fact, when testing MobX at Mendix we found out that using this library to track the relations in our code is often a lot more efficient then pushing changes through our application by using handwritten events or "smart" selector based container components.
The simple reason is that MobX will establish far more fine grained 'listeners' on your data then you would do as a programmer.
Secondly MobX sees the causality between derivations so it can order them in such a way that no derivation has to run twice or introduces a glitch.
How that works? See this [in-depth explanation of MobX](https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254#.a2j1rww8g).
## Philosophy
### Easy interoperability
MobX works plain javascript structures. Due to it's unobtrusiveness it works with most javascript libraries out of the box, without needing MobX specific library flavors.
So you can simple keep using your existing router-, data fetching and utility libraries like `react-router`, `director`, `superagent`, `lodash` etc.
For the same reason you can use it out of the box both server- and client side, in isomorphic applications and with react-native.
The result of this is that you often need to learn less new concepts when using MobX in comparison to other state management solutions.
* [Official homepage introduction](http://mobxjs.github.io/mobx/)
## Credits
MobX is inspired by reactive programming principles as found in spreadsheets. It is inspired by MVVM frameworks like in MeteorJS tracker, knockout and Vue.js. But MobX brings Transparent Functional Reactive Programming to the next level and provides a stand alone implementation. It implements TFRP in a glitch-free, synchronous, predictable and efficient manner.
A ton of credits for [Mendix](https://github.com/mendix), for providing the flexibility and support to maintain MobX and the chance to proof the philosophy of MobX in a real, complex, performance critical applications.
And finally kudo's for all the people that believed in, tried and validated MobX.
## Further examples and documentation
* [Full API documentation](http://mobxjs.github.io/mobx/)
* Five minute, [interactive introduction](https://mobxjs.github.io/mobx/getting-started.html) (with just ES5)
* Boilerplate and example projects for ES5, Babel, Typescript can be found in the [MobX](https://github.com/mobxjs) organization on github.
Blogs & Videos:
* [Reactive 2015 Conference Talk on MobX (mobservable): React, transparent reactive programming and mutable data structures](https://www.youtube.com/watch?v=FEwLwiizlk0)
* [Making React reactive: the pursuit of high performing, easily maintainable React apps](https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/)
* [Becoming fully reactive: an in-depth explanation of Mobservable](https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254#.a2j1rww8g)
* [Pure rendering in the light of time and state](https://medium.com/@mweststrate/pure-rendering-in-the-light-of-time-and-state-4b537d8d40b1)
* [SurviveJS interview on MobX, React and Flux](http://survivejs.com/blog/mobservable-interview/)
* [Pure rendering in the light of time and state](https://medium.com/@mweststrate/pure-rendering-in-the-light-of-time-and-state-4b537d8d40b1)
MobX is inspired by Microsoft Excel and existing TFRP implementations like MeteorJS tracker, knockout and Vue.js.
## What others are saying...

@@ -127,5 +196,7 @@

More testimonials from people using MobX in production can be found on [medium: functional reactive flux blog](https://medium.com/@kenneth_chau/the-2-fundamental-laws-of-flux-and-the-functional-reactive-flux-c9368ac008d3#.h41y0i22h), [hacker news](https://news.ycombinator.com/item?id=11181980), [reddit 1](https://www.reddit.com/r/reactjs/comments/46m2zg/has_anybody_used_mobservable_for_their_react/), [reddit 2](https://www.reddit.com/r/javascript/comments/47omi9/mobx_20_previously_mobservable_has_been_released/) or on twitter under the [#mobx](https://twitter.com/search?q=mobx&src=typd) and [#mobservable](https://twitter.com/search?q=mobservable&src=typd) hashtags.
## Contributing
* Feel free to send pr requests.
* Feel free to send pull requests.
* Use `npm test` to run the basic test suite, `npm run coverage` for the test suite with coverage and `npm run perf` for the performance tests.
lib/mobx.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