Socket
Socket
Sign inDemoInstall

mobx-react

Package Overview
Dependencies
Maintainers
3
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 4.0.0-beta.2 to 4.0.0-rc.1

61

CHANGELOG.md

@@ -7,3 +7,3 @@ # MobX-React Changelog

`inject(func)` is now reactive as well, that means that transformation in the selector function will be tracked, see [#111](https://github.com/mobxjs/mobx-react/issues/111)
`inject(func)` is now reactive as well, that means that transformations in the selector function will be tracked, see [#111](https://github.com/mobxjs/mobx-react/issues/111)

@@ -33,5 +33,31 @@ ```javascript

_N.B. note that in this specific case NameDisplayer doesn't have to be an `observer`, as it doesn't receive observables, but just plain data from the transformer function._
#### `this.props` and `this.state` in React components are now observables as well
A common cause of confusion were cases like:
```javascript
@observer class MyComponent() {
@computed upperCaseName() {
return this.props.user.name.toUpperCase()
}
render() {
return <h1>{this.upperCaseName}</h1>
}
}
```
This component would re-render if `user.name` was modified, but it would still render the previous user's name if a complete new user was received!
The reason for that is that in the above example the only observable tracked by the computed value is `user.name`, but not `this.props.user`.
So a change to the first would be picked up, but a change in `props` itself, assigning a new user, not.
Although this is technically correct, it was a source of confusion.
For that reason `this.state` and `this.props` are now automatically converted to observables in any `observer` based react component.
For more details, see [#136](https://github.com/mobxjs/mobx-react/pull/136) by @Strate
#### Better support for Server Side Rendering
Introduced `useStaticRendering(boolean)` to better support server-side rendering scenerios. See [#140](https://github.com/mobxjs/mobx-react/issues/140)
Introduced `useStaticRendering(boolean)` to better support server-side rendering scenarios. See [#140](https://github.com/mobxjs/mobx-react/issues/140)

@@ -42,3 +68,4 @@ #### Introduced `Observer` as alternative syntax to the `observer` decorator.

Introduced `Observer`. Can be used as alternative to the `observer` decorator. Marks a component region as reactiove. See the Readme / [#138](https://github.com/mobxjs/mobx-react/issues/138)
Introduced `Observer`. Can be used as alternative to the `observer` decorator. Marks a component region as reactive.
See the Readme / [#138](https://github.com/mobxjs/mobx-react/issues/138)
Example:

@@ -54,12 +81,36 @@

#### Using `observer` to inject stores is deprecated
The fact that `observer` could inject stores as well caused quite some confusion.
Because in some cases `observer` would return the original component (when not inject), but it would return a HoC when injecting.
To make this more consistent, you should always use `inject` to inject stores into a component. So use:
```
@inject("store1", "store2") @observer
class MyComponent extends React.Component {
```
or:
```
const MyComponent = inject("store1", "store2")(observer(props => rendering))
```
For more info see the related [discussion](https://github.com/mobxjs/mobx-react/commit/666577b41b7af8209839e7b243064a31c9951632#commitcomment-19773706)
#### Other improvements
* It is now possible to directly define `propTypes` and `defaultProps` on components wrapped with `inject` (or `observer(["stores"])`) again, see #120, #142. Removed the warnings for this, and instead improved the docs.
* Clean up data subscriptions if an error is thrown by an `observer` component, see [#134](https://github.com/mobxjs/mobx-react/pull/134) by @andykog
* Print warning when `inject` and `observer` are used in the wrong order, see #146, by @delaetthomas
* export `PropTypes` as well, fixes #153
* export `PropTypes` as well in typescript typings, fixes #153
* Add react as a peer dependency
* Added minified browser build: `index.min.js`, fixes #147
* Generate better component names when using `inject`
---
### 3.5.9
* Print warning when `inject` and `observer` are used in the wrong order, see #146, by @delaetthomas
### 3.5.8

@@ -66,0 +117,0 @@

248

custom.js

@@ -107,3 +107,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

var _Provider = __webpack_require__(9);
var _Provider = __webpack_require__(8);

@@ -134,3 +134,3 @@ Object.defineProperty(exports, 'Provider', {

var _propTypes = __webpack_require__(10);
var _propTypes = __webpack_require__(9);

@@ -213,2 +213,4 @@ var propTypes = _interopRequireWildcard(_propTypes);

var warnedAboutObserverInjectDeprecation = false;
// WeakMap<Node, Object>;

@@ -433,2 +435,6 @@ var componentByNodeRegistery = exports.componentByNodeRegistery = typeof WeakMap !== "undefined" ? new WeakMap() : undefined;

// component needs stores
if (!warnedAboutObserverInjectDeprecation) {
warnedAboutObserverInjectDeprecation = true;
console.warn('Mobx observer: Using observer to inject stores is deprecated since 4.0. Use `@inject("store1", "store2") @observer ComponentClass` or `inject("store1", "store2")(observer(componentClass))` instead of `@observer(["store1", "store2"]) ComponentClass`');
}
if (!arg2) {

@@ -440,3 +446,2 @@ // invoked as decorator

} else {
// TODO: deprecate this invocation style
return _inject2.default.apply(null, arg1)(observer(arg2));

@@ -447,3 +452,3 @@ }

if (componentClass.isInjector !== undefined && componentClass.isInjector) {
if (componentClass.isMobxInjector === true) {
console.warn('Mobx observer: You are trying to use \'observer\' on a component that already has \'inject\'. Please apply \'observer\' before applying \'inject\'');

@@ -564,3 +569,3 @@ }

/* WEBPACK VAR INJECTION */(function(process) {'use strict';
'use strict';

@@ -570,2 +575,5 @@ Object.defineProperty(exports, "__esModule", {

});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
exports.default = inject;

@@ -577,3 +585,3 @@

var _hoistNonReactStatics = __webpack_require__(8);
var _hoistNonReactStatics = __webpack_require__(7);

@@ -586,8 +594,35 @@ var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);

var injectorContextTypes = {
mobxStores: _react.PropTypes.object
};
Object.seal(injectorContextTypes);
var proxiedInjectorProps = {
contextTypes: {
get: function get() {
return injectorContextTypes;
},
set: function set(_) {
console.warn("Mobx Injector: you are trying to attach `contextTypes` on an component decorated with `inject` (or `observer`) HOC. Please specify the contextTypes on the wrapped component instead. It is accessible through the `wrappedComponent`");
},
configurable: true,
enumerable: false
},
isMobxInjector: {
value: true,
writable: true,
configurable: true,
enumerable: true
}
};
/**
* Store Injection
*/
function createStoreInjector(grabStoresFn, component) {
function createStoreInjector(grabStoresFn, component, injectNames) {
var displayName = "inject-" + (component.displayName || component.name || component.constructor && component.constructor.name || "Unknown");
if (injectNames) displayName += "-with-" + injectNames;
var Injector = _react2.default.createClass({
displayName: "MobXStoreInjector",
displayName: displayName,
render: function render() {

@@ -613,27 +648,9 @@ var _this = this;

Injector.isInjector = true;
Injector.contextTypes = { mobxStores: _react.PropTypes.object };
Injector.wrappedComponent = component;
injectStaticWarnings(Injector, component);
// Static fields from component should be visible on the generated Injector
(0, _hoistNonReactStatics2.default)(Injector, component);
return Injector;
}
function injectStaticWarnings(hoc, component) {
if (typeof process === "undefined" || !process.env || process.env.NODE_ENV === "production") return;
Injector.wrappedComponent = component;
Object.defineProperties(Injector, proxiedInjectorProps);
['propTypes', 'defaultProps', 'contextTypes'].forEach(function (prop) {
var propValue = hoc[prop];
Object.defineProperty(hoc, prop, {
set: function set(_) {
// enable for testing:
var name = component.displayName || component.name;
console.warn('Mobx Injector: you are trying to attach ' + prop + ' to HOC instead of ' + name + '. Use `wrappedComponent` property.');
},
get: function get() {
return propValue;
},
configurable: true
});
});
return Injector;
}

@@ -660,2 +677,4 @@

function inject() /* fn(stores, nextProps) or ...storeNames */{
var _arguments = arguments;
var grabStoresFn = void 0;

@@ -665,17 +684,26 @@ if (typeof arguments[0] === "function") {

return function (componentClass) {
var injected = createStoreInjector(grabStoresFn, componentClass);
injected.isMobxInjector = false; // supress warning
// mark the Injector as observer, to make it react to expressions in `grabStoresFn`,
// see #111
return (0, _observer.observer)(createStoreInjector(grabStoresFn, componentClass));
injected = (0, _observer.observer)(injected);
injected.isMobxInjector = true; // restore warning
return injected;
};
} else {
var storesNames = [];
for (var i = 0; i < arguments.length; i++) {
storesNames[i] = arguments[i];
}grabStoresFn = grabStoresByName(storesNames);
return function (componentClass) {
return createStoreInjector(grabStoresFn, componentClass);
};
var _ret = function () {
var storeNames = [];
for (var i = 0; i < _arguments.length; i++) {
storeNames[i] = _arguments[i];
}grabStoresFn = grabStoresByName(storeNames);
return {
v: function v(componentClass) {
return createStoreInjector(grabStoresFn, componentClass, storeNames.join("-"));
}
};
}();
if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
}
}
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(7)))

@@ -686,140 +714,2 @@ /***/ },

// shim for using process in browser
var process = module.exports = {};
// cached from whatever global is present so that test runners that stub it
// don't break things. But we need to wrap it in a try catch in case it is
// wrapped in strict mode code which doesn't define any globals. It's inside a
// function because try/catches deoptimize in certain engines.
var cachedSetTimeout;
var cachedClearTimeout;
(function () {
try {
cachedSetTimeout = setTimeout;
} catch (e) {
cachedSetTimeout = function () {
throw new Error('setTimeout is not defined');
}
}
try {
cachedClearTimeout = clearTimeout;
} catch (e) {
cachedClearTimeout = function () {
throw new Error('clearTimeout is not defined');
}
}
} ())
function runTimeout(fun) {
if (cachedSetTimeout === setTimeout) {
return setTimeout(fun, 0);
} else {
return cachedSetTimeout.call(null, fun, 0);
}
}
function runClearTimeout(marker) {
if (cachedClearTimeout === clearTimeout) {
clearTimeout(marker);
} else {
cachedClearTimeout.call(null, marker);
}
}
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = runTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
runClearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
runTimeout(drainQueue);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
/***/ },
/* 8 */
/***/ function(module, exports) {
/**

@@ -878,3 +768,3 @@ * Copyright 2015, Yahoo! Inc.

/***/ },
/* 9 */
/* 8 */
/***/ function(module, exports, __webpack_require__) {

@@ -957,3 +847,3 @@

/***/ },
/* 10 */
/* 9 */
/***/ function(module, exports, __webpack_require__) {

@@ -960,0 +850,0 @@

248

index.js

@@ -107,3 +107,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

var _Provider = __webpack_require__(9);
var _Provider = __webpack_require__(8);

@@ -134,3 +134,3 @@ Object.defineProperty(exports, 'Provider', {

var _propTypes = __webpack_require__(10);
var _propTypes = __webpack_require__(9);

@@ -213,2 +213,4 @@ var propTypes = _interopRequireWildcard(_propTypes);

var warnedAboutObserverInjectDeprecation = false;
// WeakMap<Node, Object>;

@@ -433,2 +435,6 @@ var componentByNodeRegistery = exports.componentByNodeRegistery = typeof WeakMap !== "undefined" ? new WeakMap() : undefined;

// component needs stores
if (!warnedAboutObserverInjectDeprecation) {
warnedAboutObserverInjectDeprecation = true;
console.warn('Mobx observer: Using observer to inject stores is deprecated since 4.0. Use `@inject("store1", "store2") @observer ComponentClass` or `inject("store1", "store2")(observer(componentClass))` instead of `@observer(["store1", "store2"]) ComponentClass`');
}
if (!arg2) {

@@ -440,3 +446,2 @@ // invoked as decorator

} else {
// TODO: deprecate this invocation style
return _inject2.default.apply(null, arg1)(observer(arg2));

@@ -447,3 +452,3 @@ }

if (componentClass.isInjector !== undefined && componentClass.isInjector) {
if (componentClass.isMobxInjector === true) {
console.warn('Mobx observer: You are trying to use \'observer\' on a component that already has \'inject\'. Please apply \'observer\' before applying \'inject\'');

@@ -563,3 +568,3 @@ }

/* WEBPACK VAR INJECTION */(function(process) {'use strict';
'use strict';

@@ -569,2 +574,5 @@ Object.defineProperty(exports, "__esModule", {

});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
exports.default = inject;

@@ -576,3 +584,3 @@

var _hoistNonReactStatics = __webpack_require__(8);
var _hoistNonReactStatics = __webpack_require__(7);

@@ -585,8 +593,35 @@ var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);

var injectorContextTypes = {
mobxStores: _react.PropTypes.object
};
Object.seal(injectorContextTypes);
var proxiedInjectorProps = {
contextTypes: {
get: function get() {
return injectorContextTypes;
},
set: function set(_) {
console.warn("Mobx Injector: you are trying to attach `contextTypes` on an component decorated with `inject` (or `observer`) HOC. Please specify the contextTypes on the wrapped component instead. It is accessible through the `wrappedComponent`");
},
configurable: true,
enumerable: false
},
isMobxInjector: {
value: true,
writable: true,
configurable: true,
enumerable: true
}
};
/**
* Store Injection
*/
function createStoreInjector(grabStoresFn, component) {
function createStoreInjector(grabStoresFn, component, injectNames) {
var displayName = "inject-" + (component.displayName || component.name || component.constructor && component.constructor.name || "Unknown");
if (injectNames) displayName += "-with-" + injectNames;
var Injector = _react2.default.createClass({
displayName: "MobXStoreInjector",
displayName: displayName,
render: function render() {

@@ -612,27 +647,9 @@ var _this = this;

Injector.isInjector = true;
Injector.contextTypes = { mobxStores: _react.PropTypes.object };
Injector.wrappedComponent = component;
injectStaticWarnings(Injector, component);
// Static fields from component should be visible on the generated Injector
(0, _hoistNonReactStatics2.default)(Injector, component);
return Injector;
}
function injectStaticWarnings(hoc, component) {
if (typeof process === "undefined" || !process.env || process.env.NODE_ENV === "production") return;
Injector.wrappedComponent = component;
Object.defineProperties(Injector, proxiedInjectorProps);
['propTypes', 'defaultProps', 'contextTypes'].forEach(function (prop) {
var propValue = hoc[prop];
Object.defineProperty(hoc, prop, {
set: function set(_) {
// enable for testing:
var name = component.displayName || component.name;
console.warn('Mobx Injector: you are trying to attach ' + prop + ' to HOC instead of ' + name + '. Use `wrappedComponent` property.');
},
get: function get() {
return propValue;
},
configurable: true
});
});
return Injector;
}

@@ -659,2 +676,4 @@

function inject() /* fn(stores, nextProps) or ...storeNames */{
var _arguments = arguments;
var grabStoresFn = void 0;

@@ -664,17 +683,26 @@ if (typeof arguments[0] === "function") {

return function (componentClass) {
var injected = createStoreInjector(grabStoresFn, componentClass);
injected.isMobxInjector = false; // supress warning
// mark the Injector as observer, to make it react to expressions in `grabStoresFn`,
// see #111
return (0, _observer.observer)(createStoreInjector(grabStoresFn, componentClass));
injected = (0, _observer.observer)(injected);
injected.isMobxInjector = true; // restore warning
return injected;
};
} else {
var storesNames = [];
for (var i = 0; i < arguments.length; i++) {
storesNames[i] = arguments[i];
}grabStoresFn = grabStoresByName(storesNames);
return function (componentClass) {
return createStoreInjector(grabStoresFn, componentClass);
};
var _ret = function () {
var storeNames = [];
for (var i = 0; i < _arguments.length; i++) {
storeNames[i] = _arguments[i];
}grabStoresFn = grabStoresByName(storeNames);
return {
v: function v(componentClass) {
return createStoreInjector(grabStoresFn, componentClass, storeNames.join("-"));
}
};
}();
if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
}
}
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(7)))

@@ -685,140 +713,2 @@ /***/ },

// shim for using process in browser
var process = module.exports = {};
// cached from whatever global is present so that test runners that stub it
// don't break things. But we need to wrap it in a try catch in case it is
// wrapped in strict mode code which doesn't define any globals. It's inside a
// function because try/catches deoptimize in certain engines.
var cachedSetTimeout;
var cachedClearTimeout;
(function () {
try {
cachedSetTimeout = setTimeout;
} catch (e) {
cachedSetTimeout = function () {
throw new Error('setTimeout is not defined');
}
}
try {
cachedClearTimeout = clearTimeout;
} catch (e) {
cachedClearTimeout = function () {
throw new Error('clearTimeout is not defined');
}
}
} ())
function runTimeout(fun) {
if (cachedSetTimeout === setTimeout) {
return setTimeout(fun, 0);
} else {
return cachedSetTimeout.call(null, fun, 0);
}
}
function runClearTimeout(marker) {
if (cachedClearTimeout === clearTimeout) {
clearTimeout(marker);
} else {
cachedClearTimeout.call(null, marker);
}
}
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = runTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
runClearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
runTimeout(drainQueue);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
/***/ },
/* 8 */
/***/ function(module, exports) {
/**

@@ -877,3 +767,3 @@ * Copyright 2015, Yahoo! Inc.

/***/ },
/* 9 */
/* 8 */
/***/ function(module, exports, __webpack_require__) {

@@ -956,3 +846,3 @@

/***/ },
/* 10 */
/* 9 */
/***/ function(module, exports, __webpack_require__) {

@@ -959,0 +849,0 @@

2

index.min.js

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

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("mobx"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["mobx","react","react-dom"],t):"object"==typeof exports?exports.mobxReact=t(require("mobx"),require("react"),require("react-dom")):e.mobxReact=t(e.mobx,e.React,e.ReactDOM)}(this,function(e,t,r){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.reactiveComponent=t.PropTypes=t.propTypes=t.inject=t.Provider=t.useStaticRendering=t.trackComponents=t.componentByNodeRegistery=t.renderReporter=t.Observer=t.observer=void 0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},a=arguments,u=r(1);Object.defineProperty(t,"observer",{enumerable:!0,get:function(){return u.observer}}),Object.defineProperty(t,"Observer",{enumerable:!0,get:function(){return u.Observer}}),Object.defineProperty(t,"renderReporter",{enumerable:!0,get:function(){return u.renderReporter}}),Object.defineProperty(t,"componentByNodeRegistery",{enumerable:!0,get:function(){return u.componentByNodeRegistery}}),Object.defineProperty(t,"trackComponents",{enumerable:!0,get:function(){return u.trackComponents}}),Object.defineProperty(t,"useStaticRendering",{enumerable:!0,get:function(){return u.useStaticRendering}});var c=r(9);Object.defineProperty(t,"Provider",{enumerable:!0,get:function(){return o(c).default}});var s=r(6);Object.defineProperty(t,"inject",{enumerable:!0,get:function(){return o(s).default}});var f=r(2),l=o(f),p=r(3),d=o(p),b=r(10),y=n(b),v=void 0;if(v="mobx-react",!l.default)throw new Error(v+" requires the MobX package");if(!d.default)throw new Error(v+" requires React to be available");t.propTypes=y,t.PropTypes=y,t.default=e.exports;t.reactiveComponent=function(){return console.warn("[mobx-react] `reactiveComponent` has been renamed to `observer` and will be removed in 1.1."),observer.apply(null,a)};"object"===("undefined"==typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__?"undefined":i(__MOBX_DEVTOOLS_GLOBAL_HOOK__))&&__MOBX_DEVTOOLS_GLOBAL_HOOK__.injectMobxReact(e.exports,l.default)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e){return m.default?m.default.findDOMNode(e):null}function i(e){var t=o(e);t&&j&&j.set(t,e),P.emit({event:"render",renderTime:e.__$mobRenderEnd-e.__$mobRenderStart,totalTime:Date.now()-e.__$mobRenderStart,component:e,node:t})}function a(){if("undefined"==typeof WeakMap)throw new Error("[mobx-react] tracking components is not supported in this browser.");x||(x=!0)}function u(e){_=e}function c(e,t){var r=e[t],n=T[t];r?e[t]=function(){r.apply(this,arguments),n.apply(this,arguments)}:e[t]=n}function s(e,t){if(null==e||null==t||"object"!==("undefined"==typeof e?"undefined":l(e))||"object"!==("undefined"==typeof t?"undefined":l(t)))return e!==t;var r=Object.keys(e);if(r.length!==Object.keys(t).length)return!0;for(var n=void 0,o=r.length-1;n=r[o];o--){var i=t[n];if(i!==e[n])return!0;if(i&&"object"===("undefined"==typeof i?"undefined":l(i))&&!d.default.isObservable(i))return!0}return!1}function f(e,t){if("string"==typeof e)throw new Error("Store names should be provided as array");if(Array.isArray(e))return t?w.default.apply(null,e)(f(t)):function(t){return f(e,t)};var r=e;if(void 0!==r.isInjector&&r.isInjector&&console.warn("Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'"),!("function"!=typeof r||r.prototype&&r.prototype.render||r.isReactClass||y.default.Component.isPrototypeOf(r)))return f(y.default.createClass({displayName:r.displayName||r.name,propTypes:r.propTypes,contextTypes:r.contextTypes,getDefaultProps:function(){return r.defaultProps},render:function(){return r.call(this,this.props,this.context)}}));if(!r)throw new Error("Please pass a valid component to 'observer'");var n=r.prototype||r;return["componentWillMount","componentWillUnmount","componentDidMount","componentDidUpdate"].forEach(function(e){c(n,e)}),n.shouldComponentUpdate||(n.shouldComponentUpdate=T.shouldComponentUpdate),r.isMobXReactObserver=!0,r}Object.defineProperty(t,"__esModule",{value:!0}),t.Observer=t.renderReporter=t.componentByNodeRegistery=void 0;var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};t.trackComponents=a,t.useStaticRendering=u,t.observer=f;var p=r(2),d=n(p),b=r(3),y=n(b),v=r(4),m=n(v),h=r(5),O=n(h),g=r(6),w=n(g),x=!1,_=!1,j=t.componentByNodeRegistery="undefined"!=typeof WeakMap?new WeakMap:void 0,P=t.renderReporter=new O.default,T={componentWillMount:function(){function e(e){var t=this[e],r=new d.default.Atom("reactive "+e);Object.defineProperty(this,e,{configurable:!0,enumerable:!0,get:function(){return r.reportObserved(),t},set:function(e){s(t,e)?(t=e,o=!0,r.reportChanged(),o=!1):t=e}})}var t=this;if(_!==!0){var r=this.displayName||this.name||this.constructor&&(this.constructor.displayName||this.constructor.name)||"<component>",n=this._reactInternalInstance&&this._reactInternalInstance._rootNodeID,o=!1;e.call(this,"props"),e.call(this,"state");var i=this.render.bind(this),a=null,u=!1,c=function(){return a=new d.default.Reaction(r+"#"+n+".render()",function(){if(!u&&(u=!0,"function"==typeof t.componentWillReact&&t.componentWillReact(),t.__$mobxIsUnmounted!==!0)){var e=!0;try{o||y.default.Component.prototype.forceUpdate.call(t),e=!1}finally{e&&a.dispose()}}}),f.$mobx=a,t.render=f,f()},f=function(){u=!1;var e=void 0;return a.track(function(){x&&(t.__$mobRenderStart=Date.now()),e=d.default.extras.allowStateChanges(!1,i),x&&(t.__$mobRenderEnd=Date.now())}),e};this.render=c}},componentWillUnmount:function(){if(_!==!0&&(this.render.$mobx&&this.render.$mobx.dispose(),this.__$mobxIsUnmounted=!0,x)){var e=o(this);e&&j&&j.delete(e),P.emit({event:"destroy",component:this,node:e})}},componentDidMount:function(){x&&i(this)},componentDidUpdate:function(){x&&i(this)},shouldComponentUpdate:function(e,t){return _&&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!==t?!0:s(this.props,e)}},S=t.Observer=f(function(e){var t=e.children;return t()});S.propTypes={children:y.default.PropTypes.func.isRequired}},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),o=function(){function e(){r(this,e),this.listeners=[]}return n(e,[{key:"on",value:function(e){var t=this;return this.listeners.push(e),function(){var r=t.listeners.indexOf(e);-1!==r&&t.listeners.splice(r,1)}}},{key:"emit",value:function(e){this.listeners.forEach(function(t){return t(e)})}}]),e}();t.default=o},function(e,t,r){(function(e){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){var r=s.default.createClass({displayName:"MobXStoreInjector",render:function(){var r=this,n={};for(var o in this.props)this.props.hasOwnProperty(o)&&(n[o]=this.props[o]);var i=e(this.context.mobxStores||{},n,this.context)||{};for(var a in i)n[a]=i[a];return n.ref=function(e){r.wrappedInstance=e},s.default.createElement(t,n)}});return r.isInjector=!0,r.contextTypes={mobxStores:c.PropTypes.object},r.wrappedComponent=t,i(r,t),(0,l.default)(r,t),r}function i(t,r){"undefined"!=typeof e&&e.env&&"production"!==e.env.NODE_ENV&&["propTypes","defaultProps","contextTypes"].forEach(function(e){var n=t[e];Object.defineProperty(t,e,{set:function(t){var n=r.displayName||r.name;console.warn("Mobx Injector: you are trying to attach "+e+" to HOC instead of "+n+". Use `wrappedComponent` property.")},get:function(){return n},configurable:!0})})}function a(e){return function(t,r){return e.forEach(function(e){if(!(e in r)){if(!(e in t))throw new Error("MobX observer: Store '"+e+"' is not available! Make sure it is provided by some Provider");r[e]=t[e]}}),r}}function u(){var e=void 0;if("function"==typeof arguments[0])return e=arguments[0],function(t){return(0,p.observer)(o(e,t))};for(var t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];return e=a(t),function(t){return o(e,t)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=u;var c=r(3),s=n(c),f=r(8),l=n(f),p=r(1)}).call(t,r(7))},function(e,t){function r(e){return c===setTimeout?setTimeout(e,0):c.call(null,e,0)}function n(e){s===clearTimeout?clearTimeout(e):s.call(null,e)}function o(){d&&l&&(d=!1,l.length?p=l.concat(p):b=-1,p.length&&i())}function i(){if(!d){var e=r(o);d=!0;for(var t=p.length;t;){for(l=p,p=[];++b<t;)l&&l[b].run();b=-1,t=p.length}l=null,d=!1,n(e)}}function a(e,t){this.fun=e,this.array=t}function u(){}var c,s,f=e.exports={};!function(){try{c=setTimeout}catch(e){c=function(){throw new Error("setTimeout is not defined")}}try{s=clearTimeout}catch(e){s=function(){throw new Error("clearTimeout is not defined")}}}();var l,p=[],d=!1,b=-1;f.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];p.push(new a(e,t)),1!==p.length||d||r(i)},a.prototype.run=function(){this.fun.apply(null,this.array)},f.title="browser",f.browser=!0,f.env={},f.argv=[],f.version="",f.versions={},f.on=u,f.addListener=u,f.once=u,f.off=u,f.removeListener=u,f.removeAllListeners=u,f.emit=u,f.binding=function(e){throw new Error("process.binding is not supported")},f.cwd=function(){return"/"},f.chdir=function(e){throw new Error("process.chdir is not supported")},f.umask=function(){return 0}},function(e,t){"use strict";var r={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},n={name:!0,length:!0,prototype:!0,caller:!0,arguments:!0,arity:!0},o="function"==typeof Object.getOwnPropertySymbols;e.exports=function(e,t,i){if("string"!=typeof t){var a=Object.getOwnPropertyNames(t);o&&(a=a.concat(Object.getOwnPropertySymbols(t)));for(var u=0;u<a.length;++u)if(!(r[a[u]]||n[a[u]]||i&&i[a[u]]))try{e[a[u]]=t[a[u]]}catch(c){}}return e}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),c=r(3),s=n(c),f={children:!0,key:!0,ref:!0},l=function(e){function t(){return o(this,t),i(this,Object.getPrototypeOf(t).apply(this,arguments))}return a(t,e),u(t,[{key:"render",value:function(){return s.default.Children.only(this.props.children)}},{key:"getChildContext",value:function(){var e={},t=this.context.mobxStores;if(t)for(var r in t)e[r]=t[r];for(var n in this.props)f[n]||(e[n]=this.props[n]);return{mobxStores:e}}},{key:"componentWillReceiveProps",value:function(e){Object.keys(e).length!==Object.keys(this.props).length&&console.warn("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children");for(var t in e)f[t]||this.props[t]===e[t]||console.warn("MobX Provider: Provided store '"+t+"' has changed. Please avoid replacing stores as the change might not propagate to all children")}}]),t}(c.Component);l.contextTypes={mobxStores:c.PropTypes.object},l.childContextTypes={mobxStores:c.PropTypes.object.isRequired},t.default=l},function(e,t,r){"use strict";function n(e){function t(t,r,n,o,i,a){for(var u=arguments.length,c=Array(u>6?u-6:0),s=6;u>s;s++)c[s-6]=arguments[s];return(0,f.untracked)(function(){if(o=o||"<<anonymous>>",a=a||n,null==r[n]){if(t){var u=null===r[n]?"null":"undefined";return new Error("The "+i+" `"+a+"` is marked as required in `"+o+"`, but its value is `"+u+"`.")}return null}return e.apply(void 0,[r,n,o,i,a].concat(c))})}var r=t.bind(null,!1);return r.isRequired=t.bind(null,!0),r}function o(e,t){return"symbol"===e?!0:"Symbol"===t["@@toStringTag"]?!0:"function"==typeof Symbol&&t instanceof Symbol}function i(e){var t="undefined"==typeof e?"undefined":s(e);return Array.isArray(e)?"array":e instanceof RegExp?"object":o(t,e)?"symbol":t}function a(e){var t=i(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function u(e,t){return n(function(r,n,o,u,c){return(0,f.untracked)(function(){if(e&&i(r[n])===t.toLowerCase())return null;var u=void 0;switch(t){case"Array":u=f.isObservableArray;break;case"Object":u=f.isObservableObject;break;case"Map":u=f.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var s=r[n];if(!u(s)){var l=a(s),p=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+c+"` of type `"+l+"` supplied to `"+o+"`, expected `mobx.Observable"+t+"`"+p+".")}return null})})}function c(e,t){return n(function(r,n,o,i,a){for(var c=arguments.length,s=Array(c>5?c-5:0),l=5;c>l;l++)s[l-5]=arguments[l];return(0,f.untracked)(function(){if("function"!=typeof t)return new Error("Property `"+a+"` of component `"+o+"` has invalid PropType notation.");var c=u(e,"Array")(r,n,o);if(c instanceof Error)return c;for(var f=r[n],l=0;l<f.length;l++)if(c=t.apply(void 0,[f,l,o,i,a+"["+l+"]"].concat(s)),c instanceof Error)return c;return null})})}Object.defineProperty(t,"__esModule",{value:!0}),t.objectOrObservableObject=t.arrayOrObservableArrayOf=t.arrayOrObservableArray=t.observableObject=t.observableMap=t.observableArrayOf=t.observableArray=void 0;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},f=r(2);t.observableArray=u(!1,"Array"),t.observableArrayOf=c.bind(null,!1),t.observableMap=u(!1,"Map"),t.observableObject=u(!1,"Object"),t.arrayOrObservableArray=u(!0,"Array"),t.arrayOrObservableArrayOf=c.bind(null,!0),t.objectOrObservableObject=u(!0,"Object")}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("mobx"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["mobx","react","react-dom"],t):"object"==typeof exports?exports.mobxReact=t(require("mobx"),require("react"),require("react-dom")):e.mobxReact=t(e.mobx,e.React,e.ReactDOM)}(this,function(e,t,r){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.reactiveComponent=t.PropTypes=t.propTypes=t.inject=t.Provider=t.useStaticRendering=t.trackComponents=t.componentByNodeRegistery=t.renderReporter=t.Observer=t.observer=void 0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},a=arguments,s=r(1);Object.defineProperty(t,"observer",{enumerable:!0,get:function(){return s.observer}}),Object.defineProperty(t,"Observer",{enumerable:!0,get:function(){return s.Observer}}),Object.defineProperty(t,"renderReporter",{enumerable:!0,get:function(){return s.renderReporter}}),Object.defineProperty(t,"componentByNodeRegistery",{enumerable:!0,get:function(){return s.componentByNodeRegistery}}),Object.defineProperty(t,"trackComponents",{enumerable:!0,get:function(){return s.trackComponents}}),Object.defineProperty(t,"useStaticRendering",{enumerable:!0,get:function(){return s.useStaticRendering}});var u=r(8);Object.defineProperty(t,"Provider",{enumerable:!0,get:function(){return o(u).default}});var c=r(6);Object.defineProperty(t,"inject",{enumerable:!0,get:function(){return o(c).default}});var f=r(2),l=o(f),p=r(3),d=o(p),b=r(9),y=n(b),m=void 0;if(m="mobx-react",!l.default)throw new Error(m+" requires the MobX package");if(!d.default)throw new Error(m+" requires React to be available");t.propTypes=y,t.PropTypes=y,t.default=e.exports;t.reactiveComponent=function(){return console.warn("[mobx-react] `reactiveComponent` has been renamed to `observer` and will be removed in 1.1."),observer.apply(null,a)};"object"===("undefined"==typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__?"undefined":i(__MOBX_DEVTOOLS_GLOBAL_HOOK__))&&__MOBX_DEVTOOLS_GLOBAL_HOOK__.injectMobxReact(e.exports,l.default)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e){return v.default?v.default.findDOMNode(e):null}function i(e){var t=o(e);t&&P&&P.set(t,e),M.emit({event:"render",renderTime:e.__$mobRenderEnd-e.__$mobRenderStart,totalTime:Date.now()-e.__$mobRenderStart,component:e,node:t})}function a(){if("undefined"==typeof WeakMap)throw new Error("[mobx-react] tracking components is not supported in this browser.");x||(x=!0)}function s(e){_=e}function u(e,t){var r=e[t],n=S[t];r?e[t]=function(){r.apply(this,arguments),n.apply(this,arguments)}:e[t]=n}function c(e,t){if(null==e||null==t||"object"!==("undefined"==typeof e?"undefined":l(e))||"object"!==("undefined"==typeof t?"undefined":l(t)))return e!==t;var r=Object.keys(e);if(r.length!==Object.keys(t).length)return!0;for(var n=void 0,o=r.length-1;n=r[o];o--){var i=t[n];if(i!==e[n])return!0;if(i&&"object"===("undefined"==typeof i?"undefined":l(i))&&!d.default.isObservable(i))return!0}return!1}function f(e,t){if("string"==typeof e)throw new Error("Store names should be provided as array");if(Array.isArray(e))return w||(w=!0,console.warn('Mobx observer: Using observer to inject stores is deprecated since 4.0. Use `@inject("store1", "store2") @observer ComponentClass` or `inject("store1", "store2")(observer(componentClass))` instead of `@observer(["store1", "store2"]) ComponentClass`')),t?j.default.apply(null,e)(f(t)):function(t){return f(e,t)};var r=e;if(r.isMobxInjector===!0&&console.warn("Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'"),!("function"!=typeof r||r.prototype&&r.prototype.render||r.isReactClass||y.default.Component.isPrototypeOf(r)))return f(y.default.createClass({displayName:r.displayName||r.name,propTypes:r.propTypes,contextTypes:r.contextTypes,getDefaultProps:function(){return r.defaultProps},render:function(){return r.call(this,this.props,this.context)}}));if(!r)throw new Error("Please pass a valid component to 'observer'");var n=r.prototype||r;return["componentWillMount","componentWillUnmount","componentDidMount","componentDidUpdate"].forEach(function(e){u(n,e)}),n.shouldComponentUpdate||(n.shouldComponentUpdate=S.shouldComponentUpdate),r.isMobXReactObserver=!0,r}Object.defineProperty(t,"__esModule",{value:!0}),t.Observer=t.renderReporter=t.componentByNodeRegistery=void 0;var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};t.trackComponents=a,t.useStaticRendering=s,t.observer=f;var p=r(2),d=n(p),b=r(3),y=n(b),m=r(4),v=n(m),h=r(5),O=n(h),g=r(6),j=n(g),x=!1,_=!1,w=!1,P=t.componentByNodeRegistery="undefined"!=typeof WeakMap?new WeakMap:void 0,M=t.renderReporter=new O.default,S={componentWillMount:function(){function e(e){var t=this[e],r=new d.default.Atom("reactive "+e);Object.defineProperty(this,e,{configurable:!0,enumerable:!0,get:function(){return r.reportObserved(),t},set:function(e){c(t,e)?(t=e,o=!0,r.reportChanged(),o=!1):t=e}})}var t=this;if(_!==!0){var r=this.displayName||this.name||this.constructor&&(this.constructor.displayName||this.constructor.name)||"<component>",n=this._reactInternalInstance&&this._reactInternalInstance._rootNodeID,o=!1;e.call(this,"props"),e.call(this,"state");var i=this.render.bind(this),a=null,s=!1,u=function(){return a=new d.default.Reaction(r+"#"+n+".render()",function(){if(!s&&(s=!0,"function"==typeof t.componentWillReact&&t.componentWillReact(),t.__$mobxIsUnmounted!==!0)){var e=!0;try{o||y.default.Component.prototype.forceUpdate.call(t),e=!1}finally{e&&a.dispose()}}}),f.$mobx=a,t.render=f,f()},f=function(){s=!1;var e=void 0;return a.track(function(){x&&(t.__$mobRenderStart=Date.now()),e=d.default.extras.allowStateChanges(!1,i),x&&(t.__$mobRenderEnd=Date.now())}),e};this.render=u}},componentWillUnmount:function(){if(_!==!0&&(this.render.$mobx&&this.render.$mobx.dispose(),this.__$mobxIsUnmounted=!0,x)){var e=o(this);e&&P&&P.delete(e),M.emit({event:"destroy",component:this,node:e})}},componentDidMount:function(){x&&i(this)},componentDidUpdate:function(){x&&i(this)},shouldComponentUpdate:function(e,t){return _&&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!==t?!0:c(this.props,e)}},R=t.Observer=f(function(e){var t=e.children;return t()});R.propTypes={children:y.default.PropTypes.func.isRequired}},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),o=function(){function e(){r(this,e),this.listeners=[]}return n(e,[{key:"on",value:function(e){var t=this;return this.listeners.push(e),function(){var r=t.listeners.indexOf(e);-1!==r&&t.listeners.splice(r,1)}}},{key:"emit",value:function(e){this.listeners.forEach(function(t){return t(e)})}}]),e}();t.default=o},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,r){var n="inject-"+(t.displayName||t.name||t.constructor&&t.constructor.name||"Unknown");r&&(n+="-with-"+r);var o=c.default.createClass({displayName:n,render:function(){var r=this,n={};for(var o in this.props)this.props.hasOwnProperty(o)&&(n[o]=this.props[o]);var i=e(this.context.mobxStores||{},n,this.context)||{};for(var a in i)n[a]=i[a];return n.ref=function(e){r.wrappedInstance=e},c.default.createElement(t,n)}});return(0,l.default)(o,t),o.wrappedComponent=t,Object.defineProperties(o,b),o}function i(e){return function(t,r){return e.forEach(function(e){if(!(e in r)){if(!(e in t))throw new Error("MobX observer: Store '"+e+"' is not available! Make sure it is provided by some Provider");r[e]=t[e]}}),r}}function a(){var e=arguments,t=void 0;if("function"==typeof arguments[0])return t=arguments[0],function(e){var r=o(t,e);return r.isMobxInjector=!1,r=(0,p.observer)(r),r.isMobxInjector=!0,r};var r=function(){for(var r=[],n=0;n<e.length;n++)r[n]=e[n];return t=i(r),{v:function(e){return o(t,e,r.join("-"))}}}();return"object"===("undefined"==typeof r?"undefined":s(r))?r.v:void 0}Object.defineProperty(t,"__esModule",{value:!0});var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};t.default=a;var u=r(3),c=n(u),f=r(7),l=n(f),p=r(1),d={mobxStores:u.PropTypes.object};Object.seal(d);var b={contextTypes:{get:function(){return d},set:function(e){console.warn("Mobx Injector: you are trying to attach `contextTypes` on an component decorated with `inject` (or `observer`) HOC. Please specify the contextTypes on the wrapped component instead. It is accessible through the `wrappedComponent`")},configurable:!0,enumerable:!1},isMobxInjector:{value:!0,writable:!0,configurable:!0,enumerable:!0}}},function(e,t){"use strict";var r={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},n={name:!0,length:!0,prototype:!0,caller:!0,arguments:!0,arity:!0},o="function"==typeof Object.getOwnPropertySymbols;e.exports=function(e,t,i){if("string"!=typeof t){var a=Object.getOwnPropertyNames(t);o&&(a=a.concat(Object.getOwnPropertySymbols(t)));for(var s=0;s<a.length;++s)if(!(r[a[s]]||n[a[s]]||i&&i[a[s]]))try{e[a[s]]=t[a[s]]}catch(u){}}return e}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(3),c=n(u),f={children:!0,key:!0,ref:!0},l=function(e){function t(){return o(this,t),i(this,Object.getPrototypeOf(t).apply(this,arguments))}return a(t,e),s(t,[{key:"render",value:function(){return c.default.Children.only(this.props.children)}},{key:"getChildContext",value:function(){var e={},t=this.context.mobxStores;if(t)for(var r in t)e[r]=t[r];for(var n in this.props)f[n]||(e[n]=this.props[n]);return{mobxStores:e}}},{key:"componentWillReceiveProps",value:function(e){Object.keys(e).length!==Object.keys(this.props).length&&console.warn("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children");for(var t in e)f[t]||this.props[t]===e[t]||console.warn("MobX Provider: Provided store '"+t+"' has changed. Please avoid replacing stores as the change might not propagate to all children")}}]),t}(u.Component);l.contextTypes={mobxStores:u.PropTypes.object},l.childContextTypes={mobxStores:u.PropTypes.object.isRequired},t.default=l},function(e,t,r){"use strict";function n(e){function t(t,r,n,o,i,a){for(var s=arguments.length,u=Array(s>6?s-6:0),c=6;s>c;c++)u[c-6]=arguments[c];return(0,f.untracked)(function(){if(o=o||"<<anonymous>>",a=a||n,null==r[n]){if(t){var s=null===r[n]?"null":"undefined";return new Error("The "+i+" `"+a+"` is marked as required in `"+o+"`, but its value is `"+s+"`.")}return null}return e.apply(void 0,[r,n,o,i,a].concat(u))})}var r=t.bind(null,!1);return r.isRequired=t.bind(null,!0),r}function o(e,t){return"symbol"===e?!0:"Symbol"===t["@@toStringTag"]?!0:"function"==typeof Symbol&&t instanceof Symbol}function i(e){var t="undefined"==typeof e?"undefined":c(e);return Array.isArray(e)?"array":e instanceof RegExp?"object":o(t,e)?"symbol":t}function a(e){var t=i(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function s(e,t){return n(function(r,n,o,s,u){return(0,f.untracked)(function(){if(e&&i(r[n])===t.toLowerCase())return null;var s=void 0;switch(t){case"Array":s=f.isObservableArray;break;case"Object":s=f.isObservableObject;break;case"Map":s=f.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var c=r[n];if(!s(c)){var l=a(c),p=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+u+"` of type `"+l+"` supplied to `"+o+"`, expected `mobx.Observable"+t+"`"+p+".")}return null})})}function u(e,t){return n(function(r,n,o,i,a){for(var u=arguments.length,c=Array(u>5?u-5:0),l=5;u>l;l++)c[l-5]=arguments[l];return(0,f.untracked)(function(){if("function"!=typeof t)return new Error("Property `"+a+"` of component `"+o+"` has invalid PropType notation.");var u=s(e,"Array")(r,n,o);if(u instanceof Error)return u;for(var f=r[n],l=0;l<f.length;l++)if(u=t.apply(void 0,[f,l,o,i,a+"["+l+"]"].concat(c)),u instanceof Error)return u;return null})})}Object.defineProperty(t,"__esModule",{value:!0}),t.objectOrObservableObject=t.arrayOrObservableArrayOf=t.arrayOrObservableArray=t.observableObject=t.observableMap=t.observableArrayOf=t.observableArray=void 0;var c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},f=r(2);t.observableArray=s(!1,"Array"),t.observableArrayOf=u.bind(null,!1),t.observableMap=s(!1,"Map"),t.observableObject=s(!1,"Object"),t.arrayOrObservableArray=s(!0,"Array"),t.arrayOrObservableArrayOf=u.bind(null,!0),t.objectOrObservableObject=s(!0,"Object")}])});

248

native.js

@@ -107,3 +107,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

var _Provider = __webpack_require__(9);
var _Provider = __webpack_require__(8);

@@ -134,3 +134,3 @@ Object.defineProperty(exports, 'Provider', {

var _propTypes = __webpack_require__(10);
var _propTypes = __webpack_require__(9);

@@ -213,2 +213,4 @@ var propTypes = _interopRequireWildcard(_propTypes);

var warnedAboutObserverInjectDeprecation = false;
// WeakMap<Node, Object>;

@@ -433,2 +435,6 @@ var componentByNodeRegistery = exports.componentByNodeRegistery = typeof WeakMap !== "undefined" ? new WeakMap() : undefined;

// component needs stores
if (!warnedAboutObserverInjectDeprecation) {
warnedAboutObserverInjectDeprecation = true;
console.warn('Mobx observer: Using observer to inject stores is deprecated since 4.0. Use `@inject("store1", "store2") @observer ComponentClass` or `inject("store1", "store2")(observer(componentClass))` instead of `@observer(["store1", "store2"]) ComponentClass`');
}
if (!arg2) {

@@ -440,3 +446,2 @@ // invoked as decorator

} else {
// TODO: deprecate this invocation style
return _inject2.default.apply(null, arg1)(observer(arg2));

@@ -447,3 +452,3 @@ }

if (componentClass.isInjector !== undefined && componentClass.isInjector) {
if (componentClass.isMobxInjector === true) {
console.warn('Mobx observer: You are trying to use \'observer\' on a component that already has \'inject\'. Please apply \'observer\' before applying \'inject\'');

@@ -564,3 +569,3 @@ }

/* WEBPACK VAR INJECTION */(function(process) {'use strict';
'use strict';

@@ -570,2 +575,5 @@ Object.defineProperty(exports, "__esModule", {

});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
exports.default = inject;

@@ -577,3 +585,3 @@

var _hoistNonReactStatics = __webpack_require__(8);
var _hoistNonReactStatics = __webpack_require__(7);

@@ -586,8 +594,35 @@ var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);

var injectorContextTypes = {
mobxStores: _react.PropTypes.object
};
Object.seal(injectorContextTypes);
var proxiedInjectorProps = {
contextTypes: {
get: function get() {
return injectorContextTypes;
},
set: function set(_) {
console.warn("Mobx Injector: you are trying to attach `contextTypes` on an component decorated with `inject` (or `observer`) HOC. Please specify the contextTypes on the wrapped component instead. It is accessible through the `wrappedComponent`");
},
configurable: true,
enumerable: false
},
isMobxInjector: {
value: true,
writable: true,
configurable: true,
enumerable: true
}
};
/**
* Store Injection
*/
function createStoreInjector(grabStoresFn, component) {
function createStoreInjector(grabStoresFn, component, injectNames) {
var displayName = "inject-" + (component.displayName || component.name || component.constructor && component.constructor.name || "Unknown");
if (injectNames) displayName += "-with-" + injectNames;
var Injector = _react2.default.createClass({
displayName: "MobXStoreInjector",
displayName: displayName,
render: function render() {

@@ -613,27 +648,9 @@ var _this = this;

Injector.isInjector = true;
Injector.contextTypes = { mobxStores: _react.PropTypes.object };
Injector.wrappedComponent = component;
injectStaticWarnings(Injector, component);
// Static fields from component should be visible on the generated Injector
(0, _hoistNonReactStatics2.default)(Injector, component);
return Injector;
}
function injectStaticWarnings(hoc, component) {
if (typeof process === "undefined" || !process.env || process.env.NODE_ENV === "production") return;
Injector.wrappedComponent = component;
Object.defineProperties(Injector, proxiedInjectorProps);
['propTypes', 'defaultProps', 'contextTypes'].forEach(function (prop) {
var propValue = hoc[prop];
Object.defineProperty(hoc, prop, {
set: function set(_) {
// enable for testing:
var name = component.displayName || component.name;
console.warn('Mobx Injector: you are trying to attach ' + prop + ' to HOC instead of ' + name + '. Use `wrappedComponent` property.');
},
get: function get() {
return propValue;
},
configurable: true
});
});
return Injector;
}

@@ -660,2 +677,4 @@

function inject() /* fn(stores, nextProps) or ...storeNames */{
var _arguments = arguments;
var grabStoresFn = void 0;

@@ -665,17 +684,26 @@ if (typeof arguments[0] === "function") {

return function (componentClass) {
var injected = createStoreInjector(grabStoresFn, componentClass);
injected.isMobxInjector = false; // supress warning
// mark the Injector as observer, to make it react to expressions in `grabStoresFn`,
// see #111
return (0, _observer.observer)(createStoreInjector(grabStoresFn, componentClass));
injected = (0, _observer.observer)(injected);
injected.isMobxInjector = true; // restore warning
return injected;
};
} else {
var storesNames = [];
for (var i = 0; i < arguments.length; i++) {
storesNames[i] = arguments[i];
}grabStoresFn = grabStoresByName(storesNames);
return function (componentClass) {
return createStoreInjector(grabStoresFn, componentClass);
};
var _ret = function () {
var storeNames = [];
for (var i = 0; i < _arguments.length; i++) {
storeNames[i] = _arguments[i];
}grabStoresFn = grabStoresByName(storeNames);
return {
v: function v(componentClass) {
return createStoreInjector(grabStoresFn, componentClass, storeNames.join("-"));
}
};
}();
if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
}
}
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(7)))

@@ -686,140 +714,2 @@ /***/ },

// shim for using process in browser
var process = module.exports = {};
// cached from whatever global is present so that test runners that stub it
// don't break things. But we need to wrap it in a try catch in case it is
// wrapped in strict mode code which doesn't define any globals. It's inside a
// function because try/catches deoptimize in certain engines.
var cachedSetTimeout;
var cachedClearTimeout;
(function () {
try {
cachedSetTimeout = setTimeout;
} catch (e) {
cachedSetTimeout = function () {
throw new Error('setTimeout is not defined');
}
}
try {
cachedClearTimeout = clearTimeout;
} catch (e) {
cachedClearTimeout = function () {
throw new Error('clearTimeout is not defined');
}
}
} ())
function runTimeout(fun) {
if (cachedSetTimeout === setTimeout) {
return setTimeout(fun, 0);
} else {
return cachedSetTimeout.call(null, fun, 0);
}
}
function runClearTimeout(marker) {
if (cachedClearTimeout === clearTimeout) {
clearTimeout(marker);
} else {
cachedClearTimeout.call(null, marker);
}
}
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;
function cleanUpNextTick() {
if (!draining || !currentQueue) {
return;
}
draining = false;
if (currentQueue.length) {
queue = currentQueue.concat(queue);
} else {
queueIndex = -1;
}
if (queue.length) {
drainQueue();
}
}
function drainQueue() {
if (draining) {
return;
}
var timeout = runTimeout(cleanUpNextTick);
draining = true;
var len = queue.length;
while(len) {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
}
currentQueue = null;
draining = false;
runClearTimeout(timeout);
}
process.nextTick = function (fun) {
var args = new Array(arguments.length - 1);
if (arguments.length > 1) {
for (var i = 1; i < arguments.length; i++) {
args[i - 1] = arguments[i];
}
}
queue.push(new Item(fun, args));
if (queue.length === 1 && !draining) {
runTimeout(drainQueue);
}
};
// v8 likes predictible objects
function Item(fun, array) {
this.fun = fun;
this.array = array;
}
Item.prototype.run = function () {
this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};
function noop() {}
process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;
process.binding = function (name) {
throw new Error('process.binding is not supported');
};
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };
/***/ },
/* 8 */
/***/ function(module, exports) {
/**

@@ -878,3 +768,3 @@ * Copyright 2015, Yahoo! Inc.

/***/ },
/* 9 */
/* 8 */
/***/ function(module, exports, __webpack_require__) {

@@ -957,3 +847,3 @@

/***/ },
/* 10 */
/* 9 */
/***/ function(module, exports, __webpack_require__) {

@@ -960,0 +850,0 @@

2

package.json
{
"name": "mobx-react",
"version": "4.0.0-beta.2",
"version": "4.0.0-rc.1",
"description": "React bindings for MobX. Create fully reactive components.",

@@ -5,0 +5,0 @@ "main": "index.js",

59

README.md

@@ -244,17 +244,2 @@ # mobx-react

#### Omitting inject
If you are using `inject` with just store names, and there are no other (third party) decorators on the same component,
you can pass the store names directly to `observer` as well, which will create an inject under the hood. (Mind the array notation!)
```javascript
var Button = observer(["color"], ({ color }) => {
/* ... etc ... */
}))
@observer(["session", "theme"])
class MyComponent extends React.Component {
// etc
}
```
#### Customizing inject

@@ -295,2 +280,43 @@

#### Using `propTypes` and `defaultProps` and other static properties in combination with `inject`
Inject wraps a new component around the component you pass into it.
This means that assigning a static property to the resulting component, will be applied to the HoC, and not to the original component.
So if you take the following example:
```javascript
const UserName = inject("userStore", ({ userStore, bold }) => someRendering())
UserName.propTypes = {
bold: PropTypes.boolean.isRequired,
userStore: PropTypes.object.isRequired // will always fail
}
```
The above propTypes are incorrect, `bold` needs to be provided by the caller of the `UserName` component and is checked by React.
However, `userStore` does not need to be required! Although it is required for the original stateless function component, it is not
required for the resulting inject component. After all, the whole point of that component is to provide that `userStore` itself.
So if you want to make assertions on the data that is being injected (either stores or data resulting from a mapper function), the propTypes
should be defined on the _wrapped_ component. Which is available through the static property `wrappedComponent` on the inject component:
```javascript
const UserName = inject("userStore", ({ userStore, bold }) => someRendering())
UserName.propTypes = {
bold: PropTypes.boolean.isRequired // could be defined either here ...
}
UserName.wrappedComponent.propTypes = {
// ... or here
userStore: PropTypes.object.isRequired // correct
}
```
The same principle applies to `defaultProps` and other static React properties.
Note that it is not allowed to redefine `contextTypes` on `inject` components (but is possible to define it on `wrappedComponent`)
Finally, mobx-react will automatically move non React related static properties from wrappedComponent to the inject component so that all static fields are
actually available to the outside world without needing `.wrappedComponent`.
#### Strongly typing inject

@@ -333,2 +359,5 @@

Bear in mind that using shallow rendering won't provide any useful results when testing injected components; only the injector will be rendered.
To test with shallow rendering, instantiate the `.wrappedComponent instead:`: `shallow(<Person.wrappedComponent />)`
## FAQ

@@ -335,0 +364,0 @@

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