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 6.0.0-rc.2 to 6.0.0-rc.3

2

CHANGELOG.md

@@ -29,2 +29,4 @@ # MobX-React Changelog

TODO: answer FAQ: https://twitter.com/winterbe_/status/1108768407925780482
### 5.4.3

@@ -31,0 +33,0 @@

872

dist/mobx-react.js

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

var e,r=require("react-dom"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("mobx");if(!t.useState)throw new Error("mobx-react-lite requires React with Hooks support");if(!o.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");var i=function(){};var a=!1;function u(){return a}var c=function(){return(c=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)};function s(e){return e.current?o.getDependencyTree(e.current):"<unknown>"}var f=[];function p(){var e=function(e,r){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var n,o,i=t.call(e),a=[];try{for(;(void 0===r||r-- >0)&&!(n=i.next()).done;)a.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(t=i.return)&&t.call(i)}finally{if(o)throw o.error}}return a}(t.useState(0),2)[1];return t.useCallback(function(){e(function(e){return e+1})},[])}function l(e,r){if(void 0===r&&(r="observed"),u())return e();var n,i,a=p(),c=t.useRef(null);if(c.current||(c.current=new o.Reaction("observer("+r+")",function(){a()})),t.useDebugValue(c,s),function(e){t.useEffect(function(){return e},f)}(function(){c.current.dispose()}),c.current.track(function(){try{n=e()}catch(e){i=e}}),i)throw c.current.dispose(),i;return n}function d(e,r){if(u())return e;var n,o,i,a=c({forwardRef:!1},r),s=e.displayName||e.name,f=function(r,t){return l(function(){return e(r,t)},s)};return n=t.memo(a.forwardRef?t.forwardRef(f):f),o=e,i=n,Object.keys(o).forEach(function(e){o.hasOwnProperty(e)&&!b[e]&&Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))}),n.displayName=s,n}var b={$$typeof:!0,render:!0,compare:!0,type:!0};function y(e){var r=e.children||e.render;return"function"!=typeof r?null:l(r)}function v(e,r,t,n,o){var i="function"==typeof e[r],a="function"==typeof e["children"===r?"render":"children"];return i&&a?new Error("MobX Observer: Do not use children and render in the same time in`"+t):i||a?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+t+"`, expected `function`.")}y.propTypes={children:v,render:v},y.displayName="Observer";var m=0;var w={};function O(e){return w[e]||(w[e]=function(e){if("function"==typeof Symbol)return Symbol(e);var r="__$mobx-react "+e+" ("+m+")";return m++,r}(e)),w[e]}function g(e,r){if(j(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!hasOwnProperty.call(r,t[o])||!j(e[t[o]],r[t[o]]))return!1;return!0}function j(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var x={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,propTypes:1};var P=!1,E=O("skipRender"),R=O("isForcingUpdate"),C="function"==typeof t.forwardRef&&t.forwardRef(function(e,r){}).$$typeof;function k(e,r,t){Object.hasOwnProperty.call(e,r)?e[r]=t:Object.defineProperty(e,r,{enumerable:!1,configurable:!0,writable:!0,value:t})}function _(e,r){return P&&console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."),this.state!==r||!g(this.props,e)}function S(e,r){var t=O("reactProp_"+r+"_valueHolder"),n=O("reactProp_"+r+"_atomHolder");function i(){return this[n]||k(this,n,o.createAtom("reactive "+r)),this[n]}Object.defineProperty(e,r,{configurable:!0,enumerable:!0,get:function(){return i.call(this).reportObserved(),this[t]},set:function(e){this[R]||g(this[t],e)?k(this,t,e):(k(this,t,e),k(this,E,!0),i.call(this).reportChanged(),k(this,E,!1))}})}function U(e){if(!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'"),C&&e.$$typeof===C){var r=e.render;if("function"!=typeof r)throw new Error("render property of ForwardRef was not a function");return t.forwardRef(function(){var e=arguments;return h(y,null,function(){return r.apply(void 0,e)})})}return"function"!=typeof e||e.prototype&&e.prototype.render||e.isReactClass||t.Component.isPrototypeOf(e)?function(e){var r=e.prototype||e;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==_)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=_;S(r,"props"),S(r,"state");var n=r.render;return r.render=function(){if(!this.baseRender){var e=n.bind(this);this.baseRender=function(){return e()}}return h(y,null,this.baseRender)},e}(e):d(e)}var T={children:!0,key:!0,ref:!0},A=t.createContext({}),M=function(e){function r(r,t){e.call(this,r,t),this.state=Object.assign({},t,D(r))}return e&&(r.__proto__=e),(r.prototype=Object.create(e&&e.prototype)).constructor=r,r.prototype.render=function(){return t.createElement(A.Provider,{value:this.state},t.Children.only(this.props.children))},r.getDerivedStateFromProps=function(e,r){if(!g(r,Object.assign({},r,D(e))))throw new Error("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children");return r},r}(t.Component);function D(e){var r={};if(!e)return r;for(var t in e)q(t)&&(r[t]=e[t]);return r}function q(e){return!T[e]&&"suppressChangedStoreWarning"!==e}function $(e,r,o,i){var a=function(e,r){var t,n=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";t=r?"inject-with-"+r+"("+n+")":"inject("+n+")";return t}(r,o),u=function(n){function o(){n.apply(this,arguments)}return n&&(o.__proto__=n),(o.prototype=Object.create(n&&n.prototype)).constructor=o,o.prototype.render=function(){var n=this.props,o=n.forwardRef,i=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===r.indexOf(n)&&(t[n]=e[n]);return t}(n,["forwardRef"]);return Object.assign(i,e(this.context||{},i)||{}),o&&!function(e){return!(e.prototype&&e.prototype.render)}(r)&&(i.ref=this.props.forwardRef),t.createElement(r,i)},o}(t.Component);u.contextType=A,i&&(u=U(u)),u.isMobxInjector=!0;var c,s,f=n.forwardRef(function(e,r){return n.createElement(u,Object.assign({},e,{forwardRef:r}))});return c=r,s=f,Object.keys(c).forEach(function(e){c.hasOwnProperty(e)&&!x[e]&&Object.defineProperty(s,e,Object.getOwnPropertyDescriptor(c,e))}),f.wrappedComponent=r,f.displayName=a,f}M.contextType=A;var I=O("disposeOnUnmount"),W=O("originalOnUnmount");function F(){var e=this;this[W]&&this[W](),this[I]&&(this[I].forEach(function(r){var t="string"==typeof r?e[r]:r;if(null!=t){if("function"!=typeof t)throw new Error("[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc.");t()}}),this[I]=[])}function N(e){function r(r,t,n,i,a,u){for(var c=[],s=arguments.length-6;s-- >0;)c[s]=arguments[s+6];return o.untracked(function(){return i=i||"<<anonymous>>",u=u||n,null==t[n]?r?new Error("The "+a+" `"+u+"` is marked as required in `"+i+"`, but its value is `"+(null===t[n]?"null":"undefined")+"`."):null:e.apply(void 0,[t,n,i,a,u].concat(c))})}var t=r.bind(null,!1);return t.isRequired=r.bind(null,!0),t}function H(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function X(e,r){return N(function(t,n,i,a,u){return o.untracked(function(){if(e&&H(t[n])===r.toLowerCase())return null;var a;switch(r){case"Array":a=o.isObservableArray;break;case"Object":a=o.isObservableObject;break;case"Map":a=o.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+r)}var c=t[n];if(!a(c)){var s=function(e){var r=H(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(c),f=e?" or javascript `"+r.toLowerCase()+"`":"";return new Error("Invalid prop `"+u+"` of type `"+s+"` supplied to `"+i+"`, expected `mobx.Observable"+r+"`"+f+".")}return null})})}function L(e,r){return N(function(t,n,i,a,u){for(var c=[],s=arguments.length-5;s-- >0;)c[s]=arguments[s+5];return o.untracked(function(){if("function"!=typeof r)return new Error("Property `"+u+"` of component `"+i+"` has invalid PropType notation.");var o=X(e,"Array")(t,n,i);if(o instanceof Error)return o;for(var s=t[n],f=0;f<s.length;f++)if((o=r.apply(void 0,[s,f,i,a,u+"["+f+"]"].concat(c)))instanceof Error)return o;return null})})}var V={observableArray:X(!1,"Array"),observableArrayOf:L.bind(null,!1),observableMap:X(!1,"Map"),observableObject:X(!1,"Object"),arrayOrObservableArray:X(!0,"Array"),arrayOrObservableArrayOf:L.bind(null,!0),objectOrObservableObject:X(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!o.observable)throw new Error("mobx-react requires mobx to be available");"function"==typeof r.unstable_batchedUpdates&&o.configure({reactionScheduler:r.unstable_batchedUpdates}),exports.useObservable=function(e){var r=t.useRef(null);return r.current||(r.current=o.observable(e)),r.current},exports.useComputed=function(e,r){return void 0===r&&(r=[]),t.useMemo(function(){return o.computed(e)},r).get()},exports.useDisposable=function(e,r){void 0===r&&(r=[]);var n=t.useRef(null),o=t.useRef(!1);function a(r){if(o.current)return i;if(!n.current){var t=e();if("function"!=typeof t){var a=new Error("generated disposer must be a function");return console.error(a),i}n.current=t}return function(){n.current&&(n.current(),n.current=null),r&&(o.current=!0)}}return t.useEffect(function(){return a(!1)},r),a(!0)},exports.useObserver=l,exports.Observer=y,exports.observer=U,exports.useStaticRendering=function(e){P=e,a=e},exports.Provider=M,exports.inject=function(){for(var e,r=[],t=arguments.length;t--;)r[t]=arguments[t];return"function"==typeof arguments[0]?(e=arguments[0],function(r){return $(e,r,e.name,!0)}):function(e){return $(function(e){return function(r,t){return e.forEach(function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}}),t}}(r),e,r.join("-"),!1)}},exports.disposeOnUnmount=function e(r,n){if(Array.isArray(n))return n.map(function(t){return e(r,t)});var o=Object.getPrototypeOf(r).constructor||Object.getPrototypeOf(r.constructor),i=Object.getPrototypeOf(r.constructor);if(o!==t.Component&&o!==t.PureComponent&&i!==t.Component&&i!==t.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof n&&"function"!=typeof n)throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var a=!!r[I];return(r[I]||(r[I]=[])).push(n),a||(r.componentWillUnmount&&(r[W]=r.componentWillUnmount),Object.defineProperty(r,"componentWillUnmount",{get:function(){return F},set:function(e){this[I].push(e),this[W]=void 0},configurable:!1,enumerable:!1})),"string"!=typeof n?n:void 0},exports.PropTypes=V;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var reactDom = require('react-dom');
var React = require('react');
var React__default = _interopDefault(React);
var mobx = require('mobx');
if (!React.useState) {
throw new Error("mobx-react-lite requires React with Hooks support");
}
if (!mobx.spy) {
throw new Error("mobx-react-lite requires mobx at least version 4 to be available");
}
function useObservable(initialValue) {
var observableRef = React.useRef(null);
if (!observableRef.current) {
observableRef.current = mobx.observable(initialValue);
}
return observableRef.current;
}
function useComputed(func, inputs) {
if (inputs === void 0) { inputs = []; }
var computed$$1 = React.useMemo(function () { return mobx.computed(func); }, inputs);
return computed$$1.get();
}
var doNothingDisposer = function () {
// empty
};
/**
* Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
* Returns the generated disposer for early disposal.
*
* @export
* @template D
* @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
* @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
* @returns {D}
*/
function useDisposable(disposerGenerator, inputs) {
if (inputs === void 0) { inputs = []; }
var disposerRef = React.useRef(null);
var earlyDisposedRef = React.useRef(false);
React.useEffect(function () {
return lazyCreateDisposer(false);
}, inputs);
function lazyCreateDisposer(earlyDisposal) {
// ensure that we won't create a new disposer if it was early disposed
if (earlyDisposedRef.current) {
return doNothingDisposer;
}
if (!disposerRef.current) {
var newDisposer = disposerGenerator();
if (typeof newDisposer !== "function") {
var error = new Error("generated disposer must be a function");
{
// tslint:disable-next-line:no-console
console.error(error);
return doNothingDisposer;
}
}
disposerRef.current = newDisposer;
}
return function () {
if (disposerRef.current) {
disposerRef.current();
disposerRef.current = null;
}
if (earlyDisposal) {
earlyDisposedRef.current = true;
}
};
}
return lazyCreateDisposer(true);
}
var globalIsUsingStaticRendering = false;
function useStaticRendering(enable) {
globalIsUsingStaticRendering = enable;
}
function isUsingStaticRendering() {
return globalIsUsingStaticRendering;
}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function printDebugValue(v) {
if (!v.current) {
return "<unknown>";
}
return mobx.getDependencyTree(v.current);
}
var EMPTY_ARRAY = [];
function useUnmount(fn) {
React.useEffect(function () { return fn; }, EMPTY_ARRAY);
}
function useForceUpdate() {
var _a = __read(React.useState(0), 2), setTick = _a[1];
var update = React.useCallback(function () {
setTick(function (tick) { return tick + 1; });
}, []);
return update;
}
function useObserver(fn, baseComponentName) {
if (baseComponentName === void 0) { baseComponentName = "observed"; }
if (isUsingStaticRendering()) {
return fn();
}
var forceUpdate = useForceUpdate();
var reaction = React.useRef(null);
if (!reaction.current) {
reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
forceUpdate();
});
}
React.useDebugValue(reaction, printDebugValue);
useUnmount(function () {
reaction.current.dispose();
});
// render the original component, but have the
// reaction track the observables, so that rendering
// can be invalidated (see above) once a dependency changes
var rendering;
var exception;
reaction.current.track(function () {
try {
rendering = fn();
}
catch (e) {
exception = e;
}
});
if (exception) {
reaction.current.dispose();
throw exception; // re-throw any exceptions catched during rendering
}
return rendering;
}
// n.b. base case is not used for actual typings or exported in the typing files
function observer(baseComponent, options) {
// The working of observer is explaind step by step in this talk: https://www.youtube.com/watch?v=cPF4iBedoF0&feature=youtu.be&t=1307
if (isUsingStaticRendering()) {
return baseComponent;
}
var realOptions = __assign({ forwardRef: false }, options);
var baseComponentName = baseComponent.displayName || baseComponent.name;
var wrappedComponent = function (props, ref) {
return useObserver(function () { return baseComponent(props, ref); }, baseComponentName);
};
// memo; we are not intested in deep updates
// in props; we assume that if deep objects are changed,
// this is in observables, which would have been tracked anyway
var memoComponent;
if (realOptions.forwardRef) {
// we have to use forwardRef here because:
// 1. it cannot go before memo, only after it
// 2. forwardRef converts the function into an actual component, so we can't let the baseComponent do it
// since it wouldn't be a callable function anymore
memoComponent = React.memo(React.forwardRef(wrappedComponent));
}
else {
memoComponent = React.memo(wrappedComponent);
}
copyStaticProperties(baseComponent, memoComponent);
memoComponent.displayName = baseComponentName;
return memoComponent;
}
// based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
var hoistBlackList = {
$$typeof: true,
render: true,
compare: true,
type: true
};
function copyStaticProperties(base, target) {
Object.keys(base).forEach(function (key) {
if (base.hasOwnProperty(key) && !hoistBlackList[key]) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
}
});
}
function ObserverComponent(_a) {
var children = _a.children, render = _a.render;
var component = children || render;
if (typeof component !== "function") {
return null;
}
return useObserver(component);
}
ObserverComponent.propTypes = {
children: ObserverPropsCheck,
render: ObserverPropsCheck
};
ObserverComponent.displayName = "Observer";
function ObserverPropsCheck(props, key, componentName, location, propFullName) {
var extraKey = key === "children" ? "render" : "children";
var hasProp = typeof props[key] === "function";
var hasExtraProp = typeof props[extraKey] === "function";
if (hasProp && hasExtraProp) {
return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);
}
if (hasProp || hasExtraProp) {
return null;
}
return new Error("Invalid prop `" +
propFullName +
"` of type `" +
typeof props[key] +
"` supplied to" +
" `" +
componentName +
"`, expected `function`.");
}
function isStateless(component) {
// `function() {}` has prototype, but `() => {}` doesn't
// `() => {}` via Babel has prototype too.
return !(component.prototype && component.prototype.render);
}
var symbolId = 0;
function createSymbol(name) {
if (typeof Symbol === "function") {
return Symbol(name);
}
var symbol = "__$mobx-react " + name + " (" + symbolId + ")";
symbolId++;
return symbol;
}
var createdSymbols = {};
function newSymbol(name) {
if (!createdSymbols[name]) {
createdSymbols[name] = createSymbol(name);
}
return createdSymbols[name];
}
function shallowEqual(objA, objB) {
//From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
if (is(objA, objB)) { return true; }
if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
return false;
}
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) { return false; }
for (var i = 0; i < keysA.length; i++) {
if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
return false;
}
}
return true;
}
function is(x, y) {
// From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
if (x === y) {
return x !== 0 || 1 / x === 1 / y;
} else {
return x !== x && y !== y;
}
} // based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
var hoistBlackList$1 = {
$$typeof: 1,
render: 1,
compare: 1,
type: 1,
childContextTypes: 1,
contextType: 1,
contextTypes: 1,
defaultProps: 1,
getDefaultProps: 1,
getDerivedStateFromError: 1,
getDerivedStateFromProps: 1,
mixins: 1,
propTypes: 1
};
function copyStaticProperties$1(base, target) {
Object.keys(base).forEach(function (key) {
if (base.hasOwnProperty(key) && !hoistBlackList$1[key]) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
}
});
}
var isUsingStaticRendering$1 = false;
var skipRenderKey = newSymbol("skipRender");
var isForcingUpdateKey = newSymbol("isForcingUpdate"); // Using react-is had some issues (and operates on elements, not on types), see #608 / #609
var ReactForwardRefSymbol = typeof React.forwardRef === "function" && React.forwardRef(function (_props, _ref) {})["$$typeof"];
/**
* Helper to set `prop` to `this` as non-enumerable (hidden prop)
* @param target
* @param prop
* @param value
*/
function setHiddenProp(target, prop, value) {
if (!Object.hasOwnProperty.call(target, prop)) {
Object.defineProperty(target, prop, {
enumerable: false,
configurable: true,
writable: true,
value: value
});
} else {
target[prop] = value;
}
}
function useStaticRendering$1(useStaticRendering$$1) {
isUsingStaticRendering$1 = useStaticRendering$$1;
useStaticRendering(useStaticRendering$$1);
}
function observerSCU(nextProps, nextState) {
if (isUsingStaticRendering$1) {
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.");
} // update on any state changes (as is the default)
if (this.state !== nextState) {
return true;
} // update if props are shallowly not equal, inspired by PureRenderMixin
// we could return just 'false' here, and avoid the `skipRender` checks etc
// however, it is nicer if lifecycle events are triggered like usually,
// so we return true here if props are shallowly modified.
return !shallowEqual(this.props, nextProps);
}
function makeObservableProp(target, propName) {
var valueHolderKey = newSymbol(("reactProp_" + propName + "_valueHolder"));
var atomHolderKey = newSymbol(("reactProp_" + propName + "_atomHolder"));
function getAtom() {
if (!this[atomHolderKey]) {
setHiddenProp(this, atomHolderKey, mobx.createAtom("reactive " + propName));
}
return this[atomHolderKey];
}
Object.defineProperty(target, propName, {
configurable: true,
enumerable: true,
get: function () {
getAtom.call(this).reportObserved();
return this[valueHolderKey];
},
set: function set(v) {
if (!this[isForcingUpdateKey] && !shallowEqual(this[valueHolderKey], v)) {
setHiddenProp(this, valueHolderKey, v);
setHiddenProp(this, skipRenderKey, true);
getAtom.call(this).reportChanged();
setHiddenProp(this, skipRenderKey, false);
} else {
setHiddenProp(this, valueHolderKey, v);
}
}
});
}
/**
* Observer function / decorator
*/
function observer$1(componentClass) {
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'");
} // TODO: still needed? (if func comp?)
// Unwrap forward refs into `<Observer>` component
// we need to unwrap the render, because it is the inner render that needs to be tracked,
// not the ForwardRef HoC
if (ReactForwardRefSymbol && componentClass["$$typeof"] === ReactForwardRefSymbol) {
var baseRender = componentClass.render;
if (typeof baseRender !== "function") { throw new Error("render property of ForwardRef was not a function"); }
return React.forwardRef(function ObserverForwardRef() {
var arguments$1 = arguments;
return h( ObserverComponent, null, function () { return baseRender.apply(undefined, arguments$1); } );
});
} // Function component
if (typeof componentClass === "function" && (!componentClass.prototype || !componentClass.prototype.render) && !componentClass.isReactClass && !React.Component.isPrototypeOf(componentClass)) {
return observer(componentClass);
}
return makeClassComponentObserver(componentClass);
}
function makeClassComponentObserver(componentClass) {
var target = componentClass.prototype || componentClass;
if (target.componentWillReact) { throw new Error("The componentWillReact life-cycle event is no longer supported"); }
if (componentClass.__proto__ !== React.PureComponent) {
if (!target.shouldComponentUpdate) { target.shouldComponentUpdate = observerSCU; }else if (target.shouldComponentUpdate !== observerSCU) { throw new Error("It is not allowed to use shouldComponentUpdate in observer based components."); }
}
makeObservableProp(target, "props");
makeObservableProp(target, "state");
var baseRender = target.render;
target.render = function renderWrapper() {
if (!this.baseRender) {
// safe the closure, as it won't change!
var bound = baseRender.bind(this);
this.baseRender = function () { return bound(); };
}
return h( ObserverComponent, null, this.baseRender );
};
return componentClass;
}
var specialReactKeys = {
children: true,
key: true,
ref: true
};
var MobXProviderContext = React.createContext({});
var Provider = /*@__PURE__*/(function (Component) {
function Provider(props, context) {
Component.call(this, props, context);
this.state = Object.assign({}, context,
grabStores(props));
}
if ( Component ) Provider.__proto__ = Component;
Provider.prototype = Object.create( Component && Component.prototype );
Provider.prototype.constructor = Provider;
Provider.prototype.render = function render () {
return React.createElement(MobXProviderContext.Provider, {
value: this.state
}, React.Children.only(this.props.children));
};
Provider.getDerivedStateFromProps = function getDerivedStateFromProps (nextProps, prevState) {
var newStores = Object.assign({}, prevState,
grabStores(nextProps)); // spread in prevState for the context based stores
if (!shallowEqual(prevState, newStores)) { throw new Error("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children"); }
return prevState; // because they didn't change, remember!
};
return Provider;
}(React.Component));
Provider.contextType = MobXProviderContext;
function grabStores(from) {
var res = {};
if (!from) { return res; }
for (var key in from) { if (validStoreName(key)) { res[key] = from[key]; } }
return res;
}
function validStoreName(key) {
return !specialReactKeys[key] && key !== "suppressChangedStoreWarning";
}
function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
/**
* Store Injection
*/
function createStoreInjector(grabStoresFn, component, injectNames, makeReactive) {
var displayName = getInjectName(component, injectNames);
var Injector = /*@__PURE__*/(function (Component) {
function Injector () {
Component.apply(this, arguments);
}
if ( Component ) Injector.__proto__ = Component;
Injector.prototype = Object.create( Component && Component.prototype );
Injector.prototype.constructor = Injector;
Injector.prototype.render = function render () {
var ref = this.props;
var forwardRef = ref.forwardRef;
var rest = objectWithoutProperties( ref, ["forwardRef"] );
var props = rest;
Object.assign(props, grabStoresFn(this.context || {}, props) || {});
if (forwardRef && !isStateless(component)) {
props.ref = this.props.forwardRef;
}
return React.createElement(component, props);
};
return Injector;
}(React.Component));
Injector.contextType = MobXProviderContext;
if (makeReactive) { Injector = observer$1(Injector); }
Injector.isMobxInjector = true; // assigned late to suppress observer warning
// Support forward refs
var InjectHocRef = React__default.forwardRef(function (props, ref) { return React__default.createElement(Injector, Object.assign({}, props,
{forwardRef: ref})); }); // Static fields from component should be visible on the generated Injector
copyStaticProperties$1(component, InjectHocRef);
InjectHocRef.wrappedComponent = component;
InjectHocRef.displayName = displayName;
return InjectHocRef;
}
function getInjectName(component, injectNames) {
var displayName;
var componentName = component.displayName || component.name || component.constructor && component.constructor.name || "Component";
if (injectNames) { displayName = "inject-with-" + injectNames + "(" + componentName + ")"; }else { displayName = "inject(" + componentName + ")"; }
return displayName;
}
function grabStoresByName(storeNames) {
return function (baseStores, nextProps) {
storeNames.forEach(function (storeName) {
if (storeName in nextProps // prefer props over stores
) { return; }
if (!(storeName in baseStores)) { throw new Error("MobX injector: Store '" + storeName + "' is not available! Make sure it is provided by some Provider"); }
nextProps[storeName] = baseStores[storeName];
});
return nextProps;
};
}
/**
* higher order component that injects stores to a child.
* takes either a varargs list of strings, which are stores read from the context,
* or a function that manually maps the available stores from the context to props:
* storesToProps(mobxStores, props, context) => newProps
*/
function inject(
/* fn(stores, nextProps) or ...storeNames */) {
var storeNames = [], len = arguments.length;
while ( len-- ) storeNames[ len ] = arguments[ len ];
var grabStoresFn;
if (typeof arguments[0] === "function") {
grabStoresFn = arguments[0];
return function (componentClass) { return createStoreInjector(grabStoresFn, componentClass, grabStoresFn.name, true); };
} else {
return function (componentClass) { return createStoreInjector(grabStoresByName(storeNames), componentClass, storeNames.join("-"), false); };
}
}
var storeKey = newSymbol("disposeOnUnmount");
var baseUnmountKey = newSymbol("originalOnUnmount");
function runDisposersOnWillUnmount() {
var this$1 = this;
if (this[baseUnmountKey]) { this[baseUnmountKey](); }
if (!this[storeKey]) {
// when disposeOnUnmount is only set to some instances of a component it will still patch the prototype
return;
}
this[storeKey].forEach(function (propKeyOrFunction) {
var prop = typeof propKeyOrFunction === "string" ? this$1[propKeyOrFunction] : propKeyOrFunction;
if (prop !== undefined && prop !== null) {
if (typeof prop !== "function") {
throw new Error("[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc.");
}
prop();
}
});
this[storeKey] = [];
}
function disposeOnUnmount(target, propertyKeyOrFunction) {
if (Array.isArray(propertyKeyOrFunction)) {
return propertyKeyOrFunction.map(function (fn) { return disposeOnUnmount(target, fn); });
}
var c = Object.getPrototypeOf(target).constructor || Object.getPrototypeOf(target.constructor);
var c2 = Object.getPrototypeOf(target.constructor);
if (!(c === React.Component || c === React.PureComponent || c2 === React.Component || c2 === React.PureComponent)) {
throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");
}
if (typeof propertyKeyOrFunction !== "string" && typeof propertyKeyOrFunction !== "function") {
throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");
} // add property key / function we want run (disposed) to the store
var componentWasAlreadyModified = !!target[storeKey];
var store = target[storeKey] || (target[storeKey] = []);
store.push(propertyKeyOrFunction); // tweak the component class componentWillUnmount if not done already
if (!componentWasAlreadyModified) {
// make sure original definition is invoked
if (target.componentWillUnmount) { target[baseUnmountKey] = target.componentWillUnmount; }
Object.defineProperty(target, "componentWillUnmount", {
get: function get() {
return runDisposersOnWillUnmount;
},
set: function set(fn) {
// this will happen if componentWillUnmount is being assigned after patching the prototype
this[storeKey].push(fn); // assigning a new local value to componentWillUnmount would hide the super implementation...
this[baseUnmountKey] = undefined;
},
configurable: false,
enumerable: false
});
} // return the disposer as is if invoked as a non decorator
if (typeof propertyKeyOrFunction !== "string") {
return propertyKeyOrFunction;
}
}
// Copied from React.PropTypes
function createChainableTypeChecker(validate) {
function checkType(isRequired, props, propName, componentName, location, propFullName) {
var rest = [], len = arguments.length - 6;
while ( len-- > 0 ) rest[ len ] = arguments[ len + 6 ];
return mobx.untracked(function () {
componentName = componentName || "<<anonymous>>";
propFullName = propFullName || propName;
if (props[propName] == null) {
if (isRequired) {
var actual = props[propName] === null ? "null" : "undefined";
return new Error("The " + location + " `" + propFullName + "` is marked as required " + "in `" + componentName + "`, but its value is `" + actual + "`.");
}
return null;
} else {
return validate.apply(void 0, [ props, propName, componentName, location, propFullName ].concat( rest ));
}
});
}
var chainedCheckType = checkType.bind(null, false);
chainedCheckType.isRequired = checkType.bind(null, true);
return chainedCheckType;
} // Copied from React.PropTypes
function isSymbol(propType, propValue) {
// Native Symbol.
if (propType === "symbol") {
return true;
} // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
if (propValue["@@toStringTag"] === "Symbol") {
return true;
} // Fallback for non-spec compliant Symbols which are polyfilled.
if (typeof Symbol === "function" && propValue instanceof Symbol) {
return true;
}
return false;
} // Copied from React.PropTypes
function getPropType(propValue) {
var propType = typeof propValue;
if (Array.isArray(propValue)) {
return "array";
}
if (propValue instanceof RegExp) {
// Old webkits (at least until Android 4.0) return 'function' rather than
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
// passes PropTypes.object.
return "object";
}
if (isSymbol(propType, propValue)) {
return "symbol";
}
return propType;
} // This handles more types than `getPropType`. Only used for error messages.
// Copied from React.PropTypes
function getPreciseType(propValue) {
var propType = getPropType(propValue);
if (propType === "object") {
if (propValue instanceof Date) {
return "date";
} else if (propValue instanceof RegExp) {
return "regexp";
}
}
return propType;
}
function createObservableTypeCheckerCreator(allowNativeType, mobxType) {
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
return mobx.untracked(function () {
if (allowNativeType) {
if (getPropType(props[propName]) === mobxType.toLowerCase()) { return null; }
}
var mobxChecker;
switch (mobxType) {
case "Array":
mobxChecker = mobx.isObservableArray;
break;
case "Object":
mobxChecker = mobx.isObservableObject;
break;
case "Map":
mobxChecker = mobx.isObservableMap;
break;
default:
throw new Error(("Unexpected mobxType: " + mobxType));
}
var propValue = props[propName];
if (!mobxChecker(propValue)) {
var preciseType = getPreciseType(propValue);
var nativeTypeExpectationMessage = allowNativeType ? " or javascript `" + mobxType.toLowerCase() + "`" : "";
return new Error("Invalid prop `" + propFullName + "` of type `" + preciseType + "` supplied to" + " `" + componentName + "`, expected `mobx.Observable" + mobxType + "`" + nativeTypeExpectationMessage + ".");
}
return null;
});
});
}
function createObservableArrayOfTypeChecker(allowNativeType, typeChecker) {
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
var rest = [], len = arguments.length - 5;
while ( len-- > 0 ) rest[ len ] = arguments[ len + 5 ];
return mobx.untracked(function () {
if (typeof typeChecker !== "function") {
return new Error("Property `" + propFullName + "` of component `" + componentName + "` has " + "invalid PropType notation.");
}
var error = createObservableTypeCheckerCreator(allowNativeType, "Array")(props, propName, componentName);
if (error instanceof Error) { return error; }
var propValue = props[propName];
for (var i = 0; i < propValue.length; i++) {
error = typeChecker.apply(void 0, [ propValue, i, componentName, location, propFullName + "[" + i + "]" ].concat( rest ));
if (error instanceof Error) { return error; }
}
return null;
});
});
}
var observableArray = createObservableTypeCheckerCreator(false, "Array");
var observableArrayOf = createObservableArrayOfTypeChecker.bind(null, false);
var observableMap = createObservableTypeCheckerCreator(false, "Map");
var observableObject = createObservableTypeCheckerCreator(false, "Object");
var arrayOrObservableArray = createObservableTypeCheckerCreator(true, "Array");
var arrayOrObservableArrayOf = createObservableArrayOfTypeChecker.bind(null, true);
var objectOrObservableObject = createObservableTypeCheckerCreator(true, "Object");
var PropTypes = {
observableArray: observableArray,
observableArrayOf: observableArrayOf,
observableMap: observableMap,
observableObject: observableObject,
arrayOrObservableArray: arrayOrObservableArray,
arrayOrObservableArrayOf: arrayOrObservableArrayOf,
objectOrObservableObject: objectOrObservableObject
};
if (!React.Component) { throw new Error("mobx-react requires React to be available"); }
if (!mobx.observable) { throw new Error("mobx-react requires mobx to be available"); }
if (typeof reactDom.unstable_batchedUpdates === "function") { mobx.configure({
reactionScheduler: reactDom.unstable_batchedUpdates
}); }
exports.useObservable = useObservable;
exports.useComputed = useComputed;
exports.useDisposable = useDisposable;
exports.useObserver = useObserver;
exports.Observer = ObserverComponent;
exports.observer = observer$1;
exports.useStaticRendering = useStaticRendering$1;
exports.Provider = Provider;
exports.inject = inject;
exports.disposeOnUnmount = disposeOnUnmount;
exports.PropTypes = PropTypes;
//# sourceMappingURL=mobx-react.js.map

859

dist/mobx-react.module.js

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

import{unstable_batchedUpdates as r}from"react-dom";import e,{useState as t,useRef as n,useMemo as o,useEffect as i,useCallback as a,useDebugValue as u,memo as c,forwardRef as f,Component as s,PureComponent as p,Children as l,createContext as d,createElement as y}from"react";import{spy as b,observable as v,computed as m,getDependencyTree as w,Reaction as O,createAtom as g,isObservableArray as j,isObservableObject as x,isObservableMap as P,untracked as E,configure as R}from"mobx";if(!t)throw new Error("mobx-react-lite requires React with Hooks support");if(!b)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");function k(r){var e=n(null);return e.current||(e.current=v(r)),e.current}function _(r,e){return void 0===e&&(e=[]),o(function(){return m(r)},e).get()}var S=function(){};function C(r,e){void 0===e&&(e=[]);var t=n(null),o=n(!1);function a(e){if(o.current)return S;if(!t.current){var n=r();if("function"!=typeof n){var i=new Error("generated disposer must be a function");return console.error(i),S}t.current=n}return function(){t.current&&(t.current(),t.current=null),e&&(o.current=!0)}}return i(function(){return a(!1)},e),a(!0)}var U=!1;function T(){return U}var A=function(){return(A=Object.assign||function(r){for(var e,t=1,n=arguments.length;t<n;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}).apply(this,arguments)};function M(r){return r.current?w(r.current):"<unknown>"}var $=[];function D(){var r=function(r,e){var t="function"==typeof Symbol&&r[Symbol.iterator];if(!t)return r;var n,o,i=t.call(r),a=[];try{for(;(void 0===e||e-- >0)&&!(n=i.next()).done;)a.push(n.value)}catch(r){o={error:r}}finally{try{n&&!n.done&&(t=i.return)&&t.call(i)}finally{if(o)throw o.error}}return a}(t(0),2)[1];return a(function(){r(function(r){return r+1})},[])}function q(r,e){if(void 0===e&&(e="observed"),T())return r();var t,o,a=D(),c=n(null);if(c.current||(c.current=new O("observer("+e+")",function(){a()})),u(c,M),function(r){i(function(){return r},$)}(function(){c.current.dispose()}),c.current.track(function(){try{t=r()}catch(r){o=r}}),o)throw c.current.dispose(),o;return t}function I(r,e){if(T())return r;var t,n,o,i=A({forwardRef:!1},e),a=r.displayName||r.name,u=function(e,t){return q(function(){return r(e,t)},a)};return t=c(i.forwardRef?f(u):u),n=r,o=t,Object.keys(n).forEach(function(r){n.hasOwnProperty(r)&&!W[r]&&Object.defineProperty(o,r,Object.getOwnPropertyDescriptor(n,r))}),t.displayName=a,t}var W={$$typeof:!0,render:!0,compare:!0,type:!0};function F(r){var e=r.children||r.render;return"function"!=typeof e?null:q(e)}function N(r,e,t,n,o){var i="function"==typeof r[e],a="function"==typeof r["children"===e?"render":"children"];return i&&a?new Error("MobX Observer: Do not use children and render in the same time in`"+t):i||a?null:new Error("Invalid prop `"+o+"` of type `"+typeof r[e]+"` supplied to `"+t+"`, expected `function`.")}F.propTypes={children:N,render:N},F.displayName="Observer";var H=0;var X={};function L(r){return X[r]||(X[r]=function(r){if("function"==typeof Symbol)return Symbol(r);var e="__$mobx-react "+r+" ("+H+")";return H++,e}(r)),X[r]}function Y(r,e){if(z(r,e))return!0;if("object"!=typeof r||null===r||"object"!=typeof e||null===e)return!1;var t=Object.keys(r),n=Object.keys(e);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!hasOwnProperty.call(e,t[o])||!z(r[t[o]],e[t[o]]))return!1;return!0}function z(r,e){return r===e?0!==r||1/r==1/e:r!=r&&e!=e}var B={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,propTypes:1};var G=!1,J=L("skipRender"),K=L("isForcingUpdate"),Q="function"==typeof f&&f(function(r,e){}).$$typeof;function V(r,e,t){Object.hasOwnProperty.call(r,e)?r[e]=t:Object.defineProperty(r,e,{enumerable:!1,configurable:!0,writable:!0,value:t})}function Z(r){G=r,U=r}function rr(r,e){return G&&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!==e||!Y(this.props,r)}function er(r,e){var t=L("reactProp_"+e+"_valueHolder"),n=L("reactProp_"+e+"_atomHolder");function o(){return this[n]||V(this,n,g("reactive "+e)),this[n]}Object.defineProperty(r,e,{configurable:!0,enumerable:!0,get:function(){return o.call(this).reportObserved(),this[t]},set:function(r){this[K]||Y(this[t],r)?V(this,t,r):(V(this,t,r),V(this,J,!0),o.call(this).reportChanged(),V(this,J,!1))}})}function tr(r){if(!0===r.isMobxInjector&&console.warn("Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'"),Q&&r.$$typeof===Q){var e=r.render;if("function"!=typeof e)throw new Error("render property of ForwardRef was not a function");return f(function(){var r=arguments;return h(F,null,function(){return e.apply(void 0,r)})})}return"function"!=typeof r||r.prototype&&r.prototype.render||r.isReactClass||s.isPrototypeOf(r)?function(r){var e=r.prototype||r;if(e.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(r.__proto__!==p)if(e.shouldComponentUpdate){if(e.shouldComponentUpdate!==rr)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else e.shouldComponentUpdate=rr;er(e,"props"),er(e,"state");var t=e.render;return e.render=function(){if(!this.baseRender){var r=t.bind(this);this.baseRender=function(){return r()}}return h(F,null,this.baseRender)},r}(r):I(r)}var nr={children:!0,key:!0,ref:!0},or=d({}),ir=function(r){function e(e,t){r.call(this,e,t),this.state=Object.assign({},t,ar(e))}return r&&(e.__proto__=r),(e.prototype=Object.create(r&&r.prototype)).constructor=e,e.prototype.render=function(){return y(or.Provider,{value:this.state},l.only(this.props.children))},e.getDerivedStateFromProps=function(r,e){if(!Y(e,Object.assign({},e,ar(r))))throw new Error("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children");return e},e}(s);function ar(r){var e={};if(!r)return e;for(var t in r)ur(t)&&(e[t]=r[t]);return e}function ur(r){return!nr[r]&&"suppressChangedStoreWarning"!==r}function cr(r,t,n,o){var i=function(r,e){var t,n=r.displayName||r.name||r.constructor&&r.constructor.name||"Component";t=e?"inject-with-"+e+"("+n+")":"inject("+n+")";return t}(t,n),a=function(e){function n(){e.apply(this,arguments)}return e&&(n.__proto__=e),(n.prototype=Object.create(e&&e.prototype)).constructor=n,n.prototype.render=function(){var e=this.props,n=e.forwardRef,o=function(r,e){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&-1===e.indexOf(n)&&(t[n]=r[n]);return t}(e,["forwardRef"]);return Object.assign(o,r(this.context||{},o)||{}),n&&!function(r){return!(r.prototype&&r.prototype.render)}(t)&&(o.ref=this.props.forwardRef),y(t,o)},n}(s);a.contextType=or,o&&(a=tr(a)),a.isMobxInjector=!0;var u,c,f=e.forwardRef(function(r,t){return e.createElement(a,Object.assign({},r,{forwardRef:t}))});return u=t,c=f,Object.keys(u).forEach(function(r){u.hasOwnProperty(r)&&!B[r]&&Object.defineProperty(c,r,Object.getOwnPropertyDescriptor(u,r))}),f.wrappedComponent=t,f.displayName=i,f}function fr(){for(var r,e=[],t=arguments.length;t--;)e[t]=arguments[t];return"function"==typeof arguments[0]?(r=arguments[0],function(e){return cr(r,e,r.name,!0)}):function(r){return cr(function(r){return function(e,t){return r.forEach(function(r){if(!(r in t)){if(!(r in e))throw new Error("MobX injector: Store '"+r+"' is not available! Make sure it is provided by some Provider");t[r]=e[r]}}),t}}(e),r,e.join("-"),!1)}}ir.contextType=or;var sr=L("disposeOnUnmount"),pr=L("originalOnUnmount");function lr(){var r=this;this[pr]&&this[pr](),this[sr]&&(this[sr].forEach(function(e){var t="string"==typeof e?r[e]:e;if(null!=t){if("function"!=typeof t)throw new Error("[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc.");t()}}),this[sr]=[])}function dr(r,e){if(Array.isArray(e))return e.map(function(e){return dr(r,e)});var t=Object.getPrototypeOf(r).constructor||Object.getPrototypeOf(r.constructor),n=Object.getPrototypeOf(r.constructor);if(t!==s&&t!==p&&n!==s&&n!==p)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof e&&"function"!=typeof e)throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var o=!!r[sr];return(r[sr]||(r[sr]=[])).push(e),o||(r.componentWillUnmount&&(r[pr]=r.componentWillUnmount),Object.defineProperty(r,"componentWillUnmount",{get:function(){return lr},set:function(r){this[sr].push(r),this[pr]=void 0},configurable:!1,enumerable:!1})),"string"!=typeof e?e:void 0}function yr(r){function e(e,t,n,o,i,a){for(var u=[],c=arguments.length-6;c-- >0;)u[c]=arguments[c+6];return E(function(){return o=o||"<<anonymous>>",a=a||n,null==t[n]?e?new Error("The "+i+" `"+a+"` is marked as required in `"+o+"`, but its value is `"+(null===t[n]?"null":"undefined")+"`."):null:r.apply(void 0,[t,n,o,i,a].concat(u))})}var t=e.bind(null,!1);return t.isRequired=e.bind(null,!0),t}function br(r){var e=typeof r;return Array.isArray(r)?"array":r instanceof RegExp?"object":function(r,e){return"symbol"===r||"Symbol"===e["@@toStringTag"]||"function"==typeof Symbol&&e instanceof Symbol}(e,r)?"symbol":e}function hr(r,e){return yr(function(t,n,o,i,a){return E(function(){if(r&&br(t[n])===e.toLowerCase())return null;var i;switch(e){case"Array":i=j;break;case"Object":i=x;break;case"Map":i=P;break;default:throw new Error("Unexpected mobxType: "+e)}var u=t[n];if(!i(u)){var c=function(r){var e=br(r);if("object"===e){if(r instanceof Date)return"date";if(r instanceof RegExp)return"regexp"}return e}(u),f=r?" or javascript `"+e.toLowerCase()+"`":"";return new Error("Invalid prop `"+a+"` of type `"+c+"` supplied to `"+o+"`, expected `mobx.Observable"+e+"`"+f+".")}return null})})}function vr(r,e){return yr(function(t,n,o,i,a){for(var u=[],c=arguments.length-5;c-- >0;)u[c]=arguments[c+5];return E(function(){if("function"!=typeof e)return new Error("Property `"+a+"` of component `"+o+"` has invalid PropType notation.");var c=hr(r,"Array")(t,n,o);if(c instanceof Error)return c;for(var f=t[n],s=0;s<f.length;s++)if((c=e.apply(void 0,[f,s,o,i,a+"["+s+"]"].concat(u)))instanceof Error)return c;return null})})}var mr={observableArray:hr(!1,"Array"),observableArrayOf:vr.bind(null,!1),observableMap:hr(!1,"Map"),observableObject:hr(!1,"Object"),arrayOrObservableArray:hr(!0,"Array"),arrayOrObservableArrayOf:vr.bind(null,!0),objectOrObservableObject:hr(!0,"Object")};if(!s)throw new Error("mobx-react requires React to be available");if(!v)throw new Error("mobx-react requires mobx to be available");"function"==typeof r&&R({reactionScheduler:r});export{k as useObservable,_ as useComputed,C as useDisposable,q as useObserver,F as Observer,tr as observer,Z as useStaticRendering,ir as Provider,fr as inject,dr as disposeOnUnmount,mr as PropTypes};
import { unstable_batchedUpdates } from 'react-dom';
import React__default, { useState, useRef, useMemo, useEffect, useCallback, useDebugValue, memo, forwardRef, Component, PureComponent, Children, createContext, createElement } from 'react';
import { spy, observable, computed, getDependencyTree, Reaction, createAtom, isObservableArray, isObservableObject, isObservableMap, untracked, configure } from 'mobx';
if (!useState) {
throw new Error("mobx-react-lite requires React with Hooks support");
}
if (!spy) {
throw new Error("mobx-react-lite requires mobx at least version 4 to be available");
}
function useObservable(initialValue) {
var observableRef = useRef(null);
if (!observableRef.current) {
observableRef.current = observable(initialValue);
}
return observableRef.current;
}
function useComputed(func, inputs) {
if (inputs === void 0) { inputs = []; }
var computed$$1 = useMemo(function () { return computed(func); }, inputs);
return computed$$1.get();
}
var doNothingDisposer = function () {
// empty
};
/**
* Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
* Returns the generated disposer for early disposal.
*
* @export
* @template D
* @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
* @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
* @returns {D}
*/
function useDisposable(disposerGenerator, inputs) {
if (inputs === void 0) { inputs = []; }
var disposerRef = useRef(null);
var earlyDisposedRef = useRef(false);
useEffect(function () {
return lazyCreateDisposer(false);
}, inputs);
function lazyCreateDisposer(earlyDisposal) {
// ensure that we won't create a new disposer if it was early disposed
if (earlyDisposedRef.current) {
return doNothingDisposer;
}
if (!disposerRef.current) {
var newDisposer = disposerGenerator();
if (typeof newDisposer !== "function") {
var error = new Error("generated disposer must be a function");
{
// tslint:disable-next-line:no-console
console.error(error);
return doNothingDisposer;
}
}
disposerRef.current = newDisposer;
}
return function () {
if (disposerRef.current) {
disposerRef.current();
disposerRef.current = null;
}
if (earlyDisposal) {
earlyDisposedRef.current = true;
}
};
}
return lazyCreateDisposer(true);
}
var globalIsUsingStaticRendering = false;
function useStaticRendering(enable) {
globalIsUsingStaticRendering = enable;
}
function isUsingStaticRendering() {
return globalIsUsingStaticRendering;
}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function printDebugValue(v) {
if (!v.current) {
return "<unknown>";
}
return getDependencyTree(v.current);
}
var EMPTY_ARRAY = [];
function useUnmount(fn) {
useEffect(function () { return fn; }, EMPTY_ARRAY);
}
function useForceUpdate() {
var _a = __read(useState(0), 2), setTick = _a[1];
var update = useCallback(function () {
setTick(function (tick) { return tick + 1; });
}, []);
return update;
}
function useObserver(fn, baseComponentName) {
if (baseComponentName === void 0) { baseComponentName = "observed"; }
if (isUsingStaticRendering()) {
return fn();
}
var forceUpdate = useForceUpdate();
var reaction = useRef(null);
if (!reaction.current) {
reaction.current = new Reaction("observer(" + baseComponentName + ")", function () {
forceUpdate();
});
}
useDebugValue(reaction, printDebugValue);
useUnmount(function () {
reaction.current.dispose();
});
// render the original component, but have the
// reaction track the observables, so that rendering
// can be invalidated (see above) once a dependency changes
var rendering;
var exception;
reaction.current.track(function () {
try {
rendering = fn();
}
catch (e) {
exception = e;
}
});
if (exception) {
reaction.current.dispose();
throw exception; // re-throw any exceptions catched during rendering
}
return rendering;
}
// n.b. base case is not used for actual typings or exported in the typing files
function observer(baseComponent, options) {
// The working of observer is explaind step by step in this talk: https://www.youtube.com/watch?v=cPF4iBedoF0&feature=youtu.be&t=1307
if (isUsingStaticRendering()) {
return baseComponent;
}
var realOptions = __assign({ forwardRef: false }, options);
var baseComponentName = baseComponent.displayName || baseComponent.name;
var wrappedComponent = function (props, ref) {
return useObserver(function () { return baseComponent(props, ref); }, baseComponentName);
};
// memo; we are not intested in deep updates
// in props; we assume that if deep objects are changed,
// this is in observables, which would have been tracked anyway
var memoComponent;
if (realOptions.forwardRef) {
// we have to use forwardRef here because:
// 1. it cannot go before memo, only after it
// 2. forwardRef converts the function into an actual component, so we can't let the baseComponent do it
// since it wouldn't be a callable function anymore
memoComponent = memo(forwardRef(wrappedComponent));
}
else {
memoComponent = memo(wrappedComponent);
}
copyStaticProperties(baseComponent, memoComponent);
memoComponent.displayName = baseComponentName;
return memoComponent;
}
// based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
var hoistBlackList = {
$$typeof: true,
render: true,
compare: true,
type: true
};
function copyStaticProperties(base, target) {
Object.keys(base).forEach(function (key) {
if (base.hasOwnProperty(key) && !hoistBlackList[key]) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
}
});
}
function ObserverComponent(_a) {
var children = _a.children, render = _a.render;
var component = children || render;
if (typeof component !== "function") {
return null;
}
return useObserver(component);
}
ObserverComponent.propTypes = {
children: ObserverPropsCheck,
render: ObserverPropsCheck
};
ObserverComponent.displayName = "Observer";
function ObserverPropsCheck(props, key, componentName, location, propFullName) {
var extraKey = key === "children" ? "render" : "children";
var hasProp = typeof props[key] === "function";
var hasExtraProp = typeof props[extraKey] === "function";
if (hasProp && hasExtraProp) {
return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);
}
if (hasProp || hasExtraProp) {
return null;
}
return new Error("Invalid prop `" +
propFullName +
"` of type `" +
typeof props[key] +
"` supplied to" +
" `" +
componentName +
"`, expected `function`.");
}
function isStateless(component) {
// `function() {}` has prototype, but `() => {}` doesn't
// `() => {}` via Babel has prototype too.
return !(component.prototype && component.prototype.render);
}
var symbolId = 0;
function createSymbol(name) {
if (typeof Symbol === "function") {
return Symbol(name);
}
var symbol = "__$mobx-react " + name + " (" + symbolId + ")";
symbolId++;
return symbol;
}
var createdSymbols = {};
function newSymbol(name) {
if (!createdSymbols[name]) {
createdSymbols[name] = createSymbol(name);
}
return createdSymbols[name];
}
function shallowEqual(objA, objB) {
//From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
if (is(objA, objB)) { return true; }
if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
return false;
}
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) { return false; }
for (var i = 0; i < keysA.length; i++) {
if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
return false;
}
}
return true;
}
function is(x, y) {
// From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
if (x === y) {
return x !== 0 || 1 / x === 1 / y;
} else {
return x !== x && y !== y;
}
} // based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
var hoistBlackList$1 = {
$$typeof: 1,
render: 1,
compare: 1,
type: 1,
childContextTypes: 1,
contextType: 1,
contextTypes: 1,
defaultProps: 1,
getDefaultProps: 1,
getDerivedStateFromError: 1,
getDerivedStateFromProps: 1,
mixins: 1,
propTypes: 1
};
function copyStaticProperties$1(base, target) {
Object.keys(base).forEach(function (key) {
if (base.hasOwnProperty(key) && !hoistBlackList$1[key]) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
}
});
}
var isUsingStaticRendering$1 = false;
var skipRenderKey = newSymbol("skipRender");
var isForcingUpdateKey = newSymbol("isForcingUpdate"); // Using react-is had some issues (and operates on elements, not on types), see #608 / #609
var ReactForwardRefSymbol = typeof forwardRef === "function" && forwardRef(function (_props, _ref) {})["$$typeof"];
/**
* Helper to set `prop` to `this` as non-enumerable (hidden prop)
* @param target
* @param prop
* @param value
*/
function setHiddenProp(target, prop, value) {
if (!Object.hasOwnProperty.call(target, prop)) {
Object.defineProperty(target, prop, {
enumerable: false,
configurable: true,
writable: true,
value: value
});
} else {
target[prop] = value;
}
}
function useStaticRendering$1(useStaticRendering$$1) {
isUsingStaticRendering$1 = useStaticRendering$$1;
useStaticRendering(useStaticRendering$$1);
}
function observerSCU(nextProps, nextState) {
if (isUsingStaticRendering$1) {
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.");
} // update on any state changes (as is the default)
if (this.state !== nextState) {
return true;
} // update if props are shallowly not equal, inspired by PureRenderMixin
// we could return just 'false' here, and avoid the `skipRender` checks etc
// however, it is nicer if lifecycle events are triggered like usually,
// so we return true here if props are shallowly modified.
return !shallowEqual(this.props, nextProps);
}
function makeObservableProp(target, propName) {
var valueHolderKey = newSymbol(("reactProp_" + propName + "_valueHolder"));
var atomHolderKey = newSymbol(("reactProp_" + propName + "_atomHolder"));
function getAtom() {
if (!this[atomHolderKey]) {
setHiddenProp(this, atomHolderKey, createAtom("reactive " + propName));
}
return this[atomHolderKey];
}
Object.defineProperty(target, propName, {
configurable: true,
enumerable: true,
get: function () {
getAtom.call(this).reportObserved();
return this[valueHolderKey];
},
set: function set(v) {
if (!this[isForcingUpdateKey] && !shallowEqual(this[valueHolderKey], v)) {
setHiddenProp(this, valueHolderKey, v);
setHiddenProp(this, skipRenderKey, true);
getAtom.call(this).reportChanged();
setHiddenProp(this, skipRenderKey, false);
} else {
setHiddenProp(this, valueHolderKey, v);
}
}
});
}
/**
* Observer function / decorator
*/
function observer$1(componentClass) {
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'");
} // TODO: still needed? (if func comp?)
// Unwrap forward refs into `<Observer>` component
// we need to unwrap the render, because it is the inner render that needs to be tracked,
// not the ForwardRef HoC
if (ReactForwardRefSymbol && componentClass["$$typeof"] === ReactForwardRefSymbol) {
var baseRender = componentClass.render;
if (typeof baseRender !== "function") { throw new Error("render property of ForwardRef was not a function"); }
return forwardRef(function ObserverForwardRef() {
var arguments$1 = arguments;
return h( ObserverComponent, null, function () { return baseRender.apply(undefined, arguments$1); } );
});
} // Function component
if (typeof componentClass === "function" && (!componentClass.prototype || !componentClass.prototype.render) && !componentClass.isReactClass && !Component.isPrototypeOf(componentClass)) {
return observer(componentClass);
}
return makeClassComponentObserver(componentClass);
}
function makeClassComponentObserver(componentClass) {
var target = componentClass.prototype || componentClass;
if (target.componentWillReact) { throw new Error("The componentWillReact life-cycle event is no longer supported"); }
if (componentClass.__proto__ !== PureComponent) {
if (!target.shouldComponentUpdate) { target.shouldComponentUpdate = observerSCU; }else if (target.shouldComponentUpdate !== observerSCU) { throw new Error("It is not allowed to use shouldComponentUpdate in observer based components."); }
}
makeObservableProp(target, "props");
makeObservableProp(target, "state");
var baseRender = target.render;
target.render = function renderWrapper() {
if (!this.baseRender) {
// safe the closure, as it won't change!
var bound = baseRender.bind(this);
this.baseRender = function () { return bound(); };
}
return h( ObserverComponent, null, this.baseRender );
};
return componentClass;
}
var specialReactKeys = {
children: true,
key: true,
ref: true
};
var MobXProviderContext = createContext({});
var Provider = /*@__PURE__*/(function (Component$$1) {
function Provider(props, context) {
Component$$1.call(this, props, context);
this.state = Object.assign({}, context,
grabStores(props));
}
if ( Component$$1 ) Provider.__proto__ = Component$$1;
Provider.prototype = Object.create( Component$$1 && Component$$1.prototype );
Provider.prototype.constructor = Provider;
Provider.prototype.render = function render () {
return createElement(MobXProviderContext.Provider, {
value: this.state
}, Children.only(this.props.children));
};
Provider.getDerivedStateFromProps = function getDerivedStateFromProps (nextProps, prevState) {
var newStores = Object.assign({}, prevState,
grabStores(nextProps)); // spread in prevState for the context based stores
if (!shallowEqual(prevState, newStores)) { throw new Error("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children"); }
return prevState; // because they didn't change, remember!
};
return Provider;
}(Component));
Provider.contextType = MobXProviderContext;
function grabStores(from) {
var res = {};
if (!from) { return res; }
for (var key in from) { if (validStoreName(key)) { res[key] = from[key]; } }
return res;
}
function validStoreName(key) {
return !specialReactKeys[key] && key !== "suppressChangedStoreWarning";
}
function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
/**
* Store Injection
*/
function createStoreInjector(grabStoresFn, component, injectNames, makeReactive) {
var displayName = getInjectName(component, injectNames);
var Injector = /*@__PURE__*/(function (Component$$1) {
function Injector () {
Component$$1.apply(this, arguments);
}
if ( Component$$1 ) Injector.__proto__ = Component$$1;
Injector.prototype = Object.create( Component$$1 && Component$$1.prototype );
Injector.prototype.constructor = Injector;
Injector.prototype.render = function render () {
var ref = this.props;
var forwardRef$$1 = ref.forwardRef;
var rest = objectWithoutProperties( ref, ["forwardRef"] );
var props = rest;
Object.assign(props, grabStoresFn(this.context || {}, props) || {});
if (forwardRef$$1 && !isStateless(component)) {
props.ref = this.props.forwardRef;
}
return createElement(component, props);
};
return Injector;
}(Component));
Injector.contextType = MobXProviderContext;
if (makeReactive) { Injector = observer$1(Injector); }
Injector.isMobxInjector = true; // assigned late to suppress observer warning
// Support forward refs
var InjectHocRef = React__default.forwardRef(function (props, ref) { return React__default.createElement(Injector, Object.assign({}, props,
{forwardRef: ref})); }); // Static fields from component should be visible on the generated Injector
copyStaticProperties$1(component, InjectHocRef);
InjectHocRef.wrappedComponent = component;
InjectHocRef.displayName = displayName;
return InjectHocRef;
}
function getInjectName(component, injectNames) {
var displayName;
var componentName = component.displayName || component.name || component.constructor && component.constructor.name || "Component";
if (injectNames) { displayName = "inject-with-" + injectNames + "(" + componentName + ")"; }else { displayName = "inject(" + componentName + ")"; }
return displayName;
}
function grabStoresByName(storeNames) {
return function (baseStores, nextProps) {
storeNames.forEach(function (storeName) {
if (storeName in nextProps // prefer props over stores
) { return; }
if (!(storeName in baseStores)) { throw new Error("MobX injector: Store '" + storeName + "' is not available! Make sure it is provided by some Provider"); }
nextProps[storeName] = baseStores[storeName];
});
return nextProps;
};
}
/**
* higher order component that injects stores to a child.
* takes either a varargs list of strings, which are stores read from the context,
* or a function that manually maps the available stores from the context to props:
* storesToProps(mobxStores, props, context) => newProps
*/
function inject(
/* fn(stores, nextProps) or ...storeNames */) {
var storeNames = [], len = arguments.length;
while ( len-- ) storeNames[ len ] = arguments[ len ];
var grabStoresFn;
if (typeof arguments[0] === "function") {
grabStoresFn = arguments[0];
return function (componentClass) { return createStoreInjector(grabStoresFn, componentClass, grabStoresFn.name, true); };
} else {
return function (componentClass) { return createStoreInjector(grabStoresByName(storeNames), componentClass, storeNames.join("-"), false); };
}
}
var storeKey = newSymbol("disposeOnUnmount");
var baseUnmountKey = newSymbol("originalOnUnmount");
function runDisposersOnWillUnmount() {
var this$1 = this;
if (this[baseUnmountKey]) { this[baseUnmountKey](); }
if (!this[storeKey]) {
// when disposeOnUnmount is only set to some instances of a component it will still patch the prototype
return;
}
this[storeKey].forEach(function (propKeyOrFunction) {
var prop = typeof propKeyOrFunction === "string" ? this$1[propKeyOrFunction] : propKeyOrFunction;
if (prop !== undefined && prop !== null) {
if (typeof prop !== "function") {
throw new Error("[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc.");
}
prop();
}
});
this[storeKey] = [];
}
function disposeOnUnmount(target, propertyKeyOrFunction) {
if (Array.isArray(propertyKeyOrFunction)) {
return propertyKeyOrFunction.map(function (fn) { return disposeOnUnmount(target, fn); });
}
var c = Object.getPrototypeOf(target).constructor || Object.getPrototypeOf(target.constructor);
var c2 = Object.getPrototypeOf(target.constructor);
if (!(c === Component || c === PureComponent || c2 === Component || c2 === PureComponent)) {
throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");
}
if (typeof propertyKeyOrFunction !== "string" && typeof propertyKeyOrFunction !== "function") {
throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");
} // add property key / function we want run (disposed) to the store
var componentWasAlreadyModified = !!target[storeKey];
var store = target[storeKey] || (target[storeKey] = []);
store.push(propertyKeyOrFunction); // tweak the component class componentWillUnmount if not done already
if (!componentWasAlreadyModified) {
// make sure original definition is invoked
if (target.componentWillUnmount) { target[baseUnmountKey] = target.componentWillUnmount; }
Object.defineProperty(target, "componentWillUnmount", {
get: function get() {
return runDisposersOnWillUnmount;
},
set: function set(fn) {
// this will happen if componentWillUnmount is being assigned after patching the prototype
this[storeKey].push(fn); // assigning a new local value to componentWillUnmount would hide the super implementation...
this[baseUnmountKey] = undefined;
},
configurable: false,
enumerable: false
});
} // return the disposer as is if invoked as a non decorator
if (typeof propertyKeyOrFunction !== "string") {
return propertyKeyOrFunction;
}
}
// Copied from React.PropTypes
function createChainableTypeChecker(validate) {
function checkType(isRequired, props, propName, componentName, location, propFullName) {
var rest = [], len = arguments.length - 6;
while ( len-- > 0 ) rest[ len ] = arguments[ len + 6 ];
return untracked(function () {
componentName = componentName || "<<anonymous>>";
propFullName = propFullName || propName;
if (props[propName] == null) {
if (isRequired) {
var actual = props[propName] === null ? "null" : "undefined";
return new Error("The " + location + " `" + propFullName + "` is marked as required " + "in `" + componentName + "`, but its value is `" + actual + "`.");
}
return null;
} else {
return validate.apply(void 0, [ props, propName, componentName, location, propFullName ].concat( rest ));
}
});
}
var chainedCheckType = checkType.bind(null, false);
chainedCheckType.isRequired = checkType.bind(null, true);
return chainedCheckType;
} // Copied from React.PropTypes
function isSymbol(propType, propValue) {
// Native Symbol.
if (propType === "symbol") {
return true;
} // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
if (propValue["@@toStringTag"] === "Symbol") {
return true;
} // Fallback for non-spec compliant Symbols which are polyfilled.
if (typeof Symbol === "function" && propValue instanceof Symbol) {
return true;
}
return false;
} // Copied from React.PropTypes
function getPropType(propValue) {
var propType = typeof propValue;
if (Array.isArray(propValue)) {
return "array";
}
if (propValue instanceof RegExp) {
// Old webkits (at least until Android 4.0) return 'function' rather than
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
// passes PropTypes.object.
return "object";
}
if (isSymbol(propType, propValue)) {
return "symbol";
}
return propType;
} // This handles more types than `getPropType`. Only used for error messages.
// Copied from React.PropTypes
function getPreciseType(propValue) {
var propType = getPropType(propValue);
if (propType === "object") {
if (propValue instanceof Date) {
return "date";
} else if (propValue instanceof RegExp) {
return "regexp";
}
}
return propType;
}
function createObservableTypeCheckerCreator(allowNativeType, mobxType) {
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
return untracked(function () {
if (allowNativeType) {
if (getPropType(props[propName]) === mobxType.toLowerCase()) { return null; }
}
var mobxChecker;
switch (mobxType) {
case "Array":
mobxChecker = isObservableArray;
break;
case "Object":
mobxChecker = isObservableObject;
break;
case "Map":
mobxChecker = isObservableMap;
break;
default:
throw new Error(("Unexpected mobxType: " + mobxType));
}
var propValue = props[propName];
if (!mobxChecker(propValue)) {
var preciseType = getPreciseType(propValue);
var nativeTypeExpectationMessage = allowNativeType ? " or javascript `" + mobxType.toLowerCase() + "`" : "";
return new Error("Invalid prop `" + propFullName + "` of type `" + preciseType + "` supplied to" + " `" + componentName + "`, expected `mobx.Observable" + mobxType + "`" + nativeTypeExpectationMessage + ".");
}
return null;
});
});
}
function createObservableArrayOfTypeChecker(allowNativeType, typeChecker) {
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
var rest = [], len = arguments.length - 5;
while ( len-- > 0 ) rest[ len ] = arguments[ len + 5 ];
return untracked(function () {
if (typeof typeChecker !== "function") {
return new Error("Property `" + propFullName + "` of component `" + componentName + "` has " + "invalid PropType notation.");
}
var error = createObservableTypeCheckerCreator(allowNativeType, "Array")(props, propName, componentName);
if (error instanceof Error) { return error; }
var propValue = props[propName];
for (var i = 0; i < propValue.length; i++) {
error = typeChecker.apply(void 0, [ propValue, i, componentName, location, propFullName + "[" + i + "]" ].concat( rest ));
if (error instanceof Error) { return error; }
}
return null;
});
});
}
var observableArray = createObservableTypeCheckerCreator(false, "Array");
var observableArrayOf = createObservableArrayOfTypeChecker.bind(null, false);
var observableMap = createObservableTypeCheckerCreator(false, "Map");
var observableObject = createObservableTypeCheckerCreator(false, "Object");
var arrayOrObservableArray = createObservableTypeCheckerCreator(true, "Array");
var arrayOrObservableArrayOf = createObservableArrayOfTypeChecker.bind(null, true);
var objectOrObservableObject = createObservableTypeCheckerCreator(true, "Object");
var PropTypes = {
observableArray: observableArray,
observableArrayOf: observableArrayOf,
observableMap: observableMap,
observableObject: observableObject,
arrayOrObservableArray: arrayOrObservableArray,
arrayOrObservableArrayOf: arrayOrObservableArrayOf,
objectOrObservableObject: objectOrObservableObject
};
if (!Component) { throw new Error("mobx-react requires React to be available"); }
if (!observable) { throw new Error("mobx-react requires mobx to be available"); }
if (typeof unstable_batchedUpdates === "function") { configure({
reactionScheduler: unstable_batchedUpdates
}); }
export { useObservable, useComputed, useDisposable, useObserver, ObserverComponent as Observer, observer$1 as observer, useStaticRendering$1 as useStaticRendering, Provider, inject, disposeOnUnmount, PropTypes };
//# sourceMappingURL=mobx-react.module.js.map

859

dist/mobx-react.rn.module.js

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

import{unstable_batchedUpdates as r}from"react-native";import e,{useState as t,useRef as n,useMemo as o,useEffect as i,useCallback as a,useDebugValue as u,memo as c,forwardRef as f,Component as s,PureComponent as p,Children as l,createContext as d,createElement as y}from"react";import{spy as b,observable as v,computed as m,getDependencyTree as w,Reaction as O,createAtom as g,isObservableArray as j,isObservableObject as x,isObservableMap as P,untracked as E,configure as R}from"mobx";if(!t)throw new Error("mobx-react-lite requires React with Hooks support");if(!b)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");function k(r){var e=n(null);return e.current||(e.current=v(r)),e.current}function _(r,e){return void 0===e&&(e=[]),o(function(){return m(r)},e).get()}var S=function(){};function C(r,e){void 0===e&&(e=[]);var t=n(null),o=n(!1);function a(e){if(o.current)return S;if(!t.current){var n=r();if("function"!=typeof n){var i=new Error("generated disposer must be a function");return console.error(i),S}t.current=n}return function(){t.current&&(t.current(),t.current=null),e&&(o.current=!0)}}return i(function(){return a(!1)},e),a(!0)}var U=!1;function T(){return U}var A=function(){return(A=Object.assign||function(r){for(var e,t=1,n=arguments.length;t<n;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}).apply(this,arguments)};function M(r){return r.current?w(r.current):"<unknown>"}var $=[];function D(){var r=function(r,e){var t="function"==typeof Symbol&&r[Symbol.iterator];if(!t)return r;var n,o,i=t.call(r),a=[];try{for(;(void 0===e||e-- >0)&&!(n=i.next()).done;)a.push(n.value)}catch(r){o={error:r}}finally{try{n&&!n.done&&(t=i.return)&&t.call(i)}finally{if(o)throw o.error}}return a}(t(0),2)[1];return a(function(){r(function(r){return r+1})},[])}function q(r,e){if(void 0===e&&(e="observed"),T())return r();var t,o,a=D(),c=n(null);if(c.current||(c.current=new O("observer("+e+")",function(){a()})),u(c,M),function(r){i(function(){return r},$)}(function(){c.current.dispose()}),c.current.track(function(){try{t=r()}catch(r){o=r}}),o)throw c.current.dispose(),o;return t}function I(r,e){if(T())return r;var t,n,o,i=A({forwardRef:!1},e),a=r.displayName||r.name,u=function(e,t){return q(function(){return r(e,t)},a)};return t=c(i.forwardRef?f(u):u),n=r,o=t,Object.keys(n).forEach(function(r){n.hasOwnProperty(r)&&!W[r]&&Object.defineProperty(o,r,Object.getOwnPropertyDescriptor(n,r))}),t.displayName=a,t}var W={$$typeof:!0,render:!0,compare:!0,type:!0};function F(r){var e=r.children||r.render;return"function"!=typeof e?null:q(e)}function N(r,e,t,n,o){var i="function"==typeof r[e],a="function"==typeof r["children"===e?"render":"children"];return i&&a?new Error("MobX Observer: Do not use children and render in the same time in`"+t):i||a?null:new Error("Invalid prop `"+o+"` of type `"+typeof r[e]+"` supplied to `"+t+"`, expected `function`.")}F.propTypes={children:N,render:N},F.displayName="Observer";var H=0;var X={};function L(r){return X[r]||(X[r]=function(r){if("function"==typeof Symbol)return Symbol(r);var e="__$mobx-react "+r+" ("+H+")";return H++,e}(r)),X[r]}function Y(r,e){if(z(r,e))return!0;if("object"!=typeof r||null===r||"object"!=typeof e||null===e)return!1;var t=Object.keys(r),n=Object.keys(e);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!hasOwnProperty.call(e,t[o])||!z(r[t[o]],e[t[o]]))return!1;return!0}function z(r,e){return r===e?0!==r||1/r==1/e:r!=r&&e!=e}var B={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,propTypes:1};var G=!1,J=L("skipRender"),K=L("isForcingUpdate"),Q="function"==typeof f&&f(function(r,e){}).$$typeof;function V(r,e,t){Object.hasOwnProperty.call(r,e)?r[e]=t:Object.defineProperty(r,e,{enumerable:!1,configurable:!0,writable:!0,value:t})}function Z(r){G=r,U=r}function rr(r,e){return G&&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!==e||!Y(this.props,r)}function er(r,e){var t=L("reactProp_"+e+"_valueHolder"),n=L("reactProp_"+e+"_atomHolder");function o(){return this[n]||V(this,n,g("reactive "+e)),this[n]}Object.defineProperty(r,e,{configurable:!0,enumerable:!0,get:function(){return o.call(this).reportObserved(),this[t]},set:function(r){this[K]||Y(this[t],r)?V(this,t,r):(V(this,t,r),V(this,J,!0),o.call(this).reportChanged(),V(this,J,!1))}})}function tr(r){if(!0===r.isMobxInjector&&console.warn("Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'"),Q&&r.$$typeof===Q){var e=r.render;if("function"!=typeof e)throw new Error("render property of ForwardRef was not a function");return f(function(){var r=arguments;return h(F,null,function(){return e.apply(void 0,r)})})}return"function"!=typeof r||r.prototype&&r.prototype.render||r.isReactClass||s.isPrototypeOf(r)?function(r){var e=r.prototype||r;if(e.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(r.__proto__!==p)if(e.shouldComponentUpdate){if(e.shouldComponentUpdate!==rr)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else e.shouldComponentUpdate=rr;er(e,"props"),er(e,"state");var t=e.render;return e.render=function(){if(!this.baseRender){var r=t.bind(this);this.baseRender=function(){return r()}}return h(F,null,this.baseRender)},r}(r):I(r)}var nr={children:!0,key:!0,ref:!0},or=d({}),ir=function(r){function e(e,t){r.call(this,e,t),this.state=Object.assign({},t,ar(e))}return r&&(e.__proto__=r),(e.prototype=Object.create(r&&r.prototype)).constructor=e,e.prototype.render=function(){return y(or.Provider,{value:this.state},l.only(this.props.children))},e.getDerivedStateFromProps=function(r,e){if(!Y(e,Object.assign({},e,ar(r))))throw new Error("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children");return e},e}(s);function ar(r){var e={};if(!r)return e;for(var t in r)ur(t)&&(e[t]=r[t]);return e}function ur(r){return!nr[r]&&"suppressChangedStoreWarning"!==r}function cr(r,t,n,o){var i=function(r,e){var t,n=r.displayName||r.name||r.constructor&&r.constructor.name||"Component";t=e?"inject-with-"+e+"("+n+")":"inject("+n+")";return t}(t,n),a=function(e){function n(){e.apply(this,arguments)}return e&&(n.__proto__=e),(n.prototype=Object.create(e&&e.prototype)).constructor=n,n.prototype.render=function(){var e=this.props,n=e.forwardRef,o=function(r,e){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&-1===e.indexOf(n)&&(t[n]=r[n]);return t}(e,["forwardRef"]);return Object.assign(o,r(this.context||{},o)||{}),n&&!function(r){return!(r.prototype&&r.prototype.render)}(t)&&(o.ref=this.props.forwardRef),y(t,o)},n}(s);a.contextType=or,o&&(a=tr(a)),a.isMobxInjector=!0;var u,c,f=e.forwardRef(function(r,t){return e.createElement(a,Object.assign({},r,{forwardRef:t}))});return u=t,c=f,Object.keys(u).forEach(function(r){u.hasOwnProperty(r)&&!B[r]&&Object.defineProperty(c,r,Object.getOwnPropertyDescriptor(u,r))}),f.wrappedComponent=t,f.displayName=i,f}function fr(){for(var r,e=[],t=arguments.length;t--;)e[t]=arguments[t];return"function"==typeof arguments[0]?(r=arguments[0],function(e){return cr(r,e,r.name,!0)}):function(r){return cr(function(r){return function(e,t){return r.forEach(function(r){if(!(r in t)){if(!(r in e))throw new Error("MobX injector: Store '"+r+"' is not available! Make sure it is provided by some Provider");t[r]=e[r]}}),t}}(e),r,e.join("-"),!1)}}ir.contextType=or;var sr=L("disposeOnUnmount"),pr=L("originalOnUnmount");function lr(){var r=this;this[pr]&&this[pr](),this[sr]&&(this[sr].forEach(function(e){var t="string"==typeof e?r[e]:e;if(null!=t){if("function"!=typeof t)throw new Error("[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc.");t()}}),this[sr]=[])}function dr(r,e){if(Array.isArray(e))return e.map(function(e){return dr(r,e)});var t=Object.getPrototypeOf(r).constructor||Object.getPrototypeOf(r.constructor),n=Object.getPrototypeOf(r.constructor);if(t!==s&&t!==p&&n!==s&&n!==p)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof e&&"function"!=typeof e)throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var o=!!r[sr];return(r[sr]||(r[sr]=[])).push(e),o||(r.componentWillUnmount&&(r[pr]=r.componentWillUnmount),Object.defineProperty(r,"componentWillUnmount",{get:function(){return lr},set:function(r){this[sr].push(r),this[pr]=void 0},configurable:!1,enumerable:!1})),"string"!=typeof e?e:void 0}function yr(r){function e(e,t,n,o,i,a){for(var u=[],c=arguments.length-6;c-- >0;)u[c]=arguments[c+6];return E(function(){return o=o||"<<anonymous>>",a=a||n,null==t[n]?e?new Error("The "+i+" `"+a+"` is marked as required in `"+o+"`, but its value is `"+(null===t[n]?"null":"undefined")+"`."):null:r.apply(void 0,[t,n,o,i,a].concat(u))})}var t=e.bind(null,!1);return t.isRequired=e.bind(null,!0),t}function br(r){var e=typeof r;return Array.isArray(r)?"array":r instanceof RegExp?"object":function(r,e){return"symbol"===r||"Symbol"===e["@@toStringTag"]||"function"==typeof Symbol&&e instanceof Symbol}(e,r)?"symbol":e}function hr(r,e){return yr(function(t,n,o,i,a){return E(function(){if(r&&br(t[n])===e.toLowerCase())return null;var i;switch(e){case"Array":i=j;break;case"Object":i=x;break;case"Map":i=P;break;default:throw new Error("Unexpected mobxType: "+e)}var u=t[n];if(!i(u)){var c=function(r){var e=br(r);if("object"===e){if(r instanceof Date)return"date";if(r instanceof RegExp)return"regexp"}return e}(u),f=r?" or javascript `"+e.toLowerCase()+"`":"";return new Error("Invalid prop `"+a+"` of type `"+c+"` supplied to `"+o+"`, expected `mobx.Observable"+e+"`"+f+".")}return null})})}function vr(r,e){return yr(function(t,n,o,i,a){for(var u=[],c=arguments.length-5;c-- >0;)u[c]=arguments[c+5];return E(function(){if("function"!=typeof e)return new Error("Property `"+a+"` of component `"+o+"` has invalid PropType notation.");var c=hr(r,"Array")(t,n,o);if(c instanceof Error)return c;for(var f=t[n],s=0;s<f.length;s++)if((c=e.apply(void 0,[f,s,o,i,a+"["+s+"]"].concat(u)))instanceof Error)return c;return null})})}var mr={observableArray:hr(!1,"Array"),observableArrayOf:vr.bind(null,!1),observableMap:hr(!1,"Map"),observableObject:hr(!1,"Object"),arrayOrObservableArray:hr(!0,"Array"),arrayOrObservableArrayOf:vr.bind(null,!0),objectOrObservableObject:hr(!0,"Object")};if(!s)throw new Error("mobx-react requires React to be available");if(!v)throw new Error("mobx-react requires mobx to be available");"function"==typeof r&&R({reactionScheduler:r});export{k as useObservable,_ as useComputed,C as useDisposable,q as useObserver,F as Observer,tr as observer,Z as useStaticRendering,ir as Provider,fr as inject,dr as disposeOnUnmount,mr as PropTypes};
import { unstable_batchedUpdates } from 'react-dom';
import React__default, { useState, useRef, useMemo, useEffect, useCallback, useDebugValue, memo, forwardRef, Component, PureComponent, Children, createContext, createElement } from 'react';
import { spy, observable, computed, getDependencyTree, Reaction, createAtom, isObservableArray, isObservableObject, isObservableMap, untracked, configure } from 'mobx';
if (!useState) {
throw new Error("mobx-react-lite requires React with Hooks support");
}
if (!spy) {
throw new Error("mobx-react-lite requires mobx at least version 4 to be available");
}
function useObservable(initialValue) {
var observableRef = useRef(null);
if (!observableRef.current) {
observableRef.current = observable(initialValue);
}
return observableRef.current;
}
function useComputed(func, inputs) {
if (inputs === void 0) { inputs = []; }
var computed$$1 = useMemo(function () { return computed(func); }, inputs);
return computed$$1.get();
}
var doNothingDisposer = function () {
// empty
};
/**
* Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
* Returns the generated disposer for early disposal.
*
* @export
* @template D
* @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
* @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
* @returns {D}
*/
function useDisposable(disposerGenerator, inputs) {
if (inputs === void 0) { inputs = []; }
var disposerRef = useRef(null);
var earlyDisposedRef = useRef(false);
useEffect(function () {
return lazyCreateDisposer(false);
}, inputs);
function lazyCreateDisposer(earlyDisposal) {
// ensure that we won't create a new disposer if it was early disposed
if (earlyDisposedRef.current) {
return doNothingDisposer;
}
if (!disposerRef.current) {
var newDisposer = disposerGenerator();
if (typeof newDisposer !== "function") {
var error = new Error("generated disposer must be a function");
{
// tslint:disable-next-line:no-console
console.error(error);
return doNothingDisposer;
}
}
disposerRef.current = newDisposer;
}
return function () {
if (disposerRef.current) {
disposerRef.current();
disposerRef.current = null;
}
if (earlyDisposal) {
earlyDisposedRef.current = true;
}
};
}
return lazyCreateDisposer(true);
}
var globalIsUsingStaticRendering = false;
function useStaticRendering(enable) {
globalIsUsingStaticRendering = enable;
}
function isUsingStaticRendering() {
return globalIsUsingStaticRendering;
}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function printDebugValue(v) {
if (!v.current) {
return "<unknown>";
}
return getDependencyTree(v.current);
}
var EMPTY_ARRAY = [];
function useUnmount(fn) {
useEffect(function () { return fn; }, EMPTY_ARRAY);
}
function useForceUpdate() {
var _a = __read(useState(0), 2), setTick = _a[1];
var update = useCallback(function () {
setTick(function (tick) { return tick + 1; });
}, []);
return update;
}
function useObserver(fn, baseComponentName) {
if (baseComponentName === void 0) { baseComponentName = "observed"; }
if (isUsingStaticRendering()) {
return fn();
}
var forceUpdate = useForceUpdate();
var reaction = useRef(null);
if (!reaction.current) {
reaction.current = new Reaction("observer(" + baseComponentName + ")", function () {
forceUpdate();
});
}
useDebugValue(reaction, printDebugValue);
useUnmount(function () {
reaction.current.dispose();
});
// render the original component, but have the
// reaction track the observables, so that rendering
// can be invalidated (see above) once a dependency changes
var rendering;
var exception;
reaction.current.track(function () {
try {
rendering = fn();
}
catch (e) {
exception = e;
}
});
if (exception) {
reaction.current.dispose();
throw exception; // re-throw any exceptions catched during rendering
}
return rendering;
}
// n.b. base case is not used for actual typings or exported in the typing files
function observer(baseComponent, options) {
// The working of observer is explaind step by step in this talk: https://www.youtube.com/watch?v=cPF4iBedoF0&feature=youtu.be&t=1307
if (isUsingStaticRendering()) {
return baseComponent;
}
var realOptions = __assign({ forwardRef: false }, options);
var baseComponentName = baseComponent.displayName || baseComponent.name;
var wrappedComponent = function (props, ref) {
return useObserver(function () { return baseComponent(props, ref); }, baseComponentName);
};
// memo; we are not intested in deep updates
// in props; we assume that if deep objects are changed,
// this is in observables, which would have been tracked anyway
var memoComponent;
if (realOptions.forwardRef) {
// we have to use forwardRef here because:
// 1. it cannot go before memo, only after it
// 2. forwardRef converts the function into an actual component, so we can't let the baseComponent do it
// since it wouldn't be a callable function anymore
memoComponent = memo(forwardRef(wrappedComponent));
}
else {
memoComponent = memo(wrappedComponent);
}
copyStaticProperties(baseComponent, memoComponent);
memoComponent.displayName = baseComponentName;
return memoComponent;
}
// based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
var hoistBlackList = {
$$typeof: true,
render: true,
compare: true,
type: true
};
function copyStaticProperties(base, target) {
Object.keys(base).forEach(function (key) {
if (base.hasOwnProperty(key) && !hoistBlackList[key]) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
}
});
}
function ObserverComponent(_a) {
var children = _a.children, render = _a.render;
var component = children || render;
if (typeof component !== "function") {
return null;
}
return useObserver(component);
}
ObserverComponent.propTypes = {
children: ObserverPropsCheck,
render: ObserverPropsCheck
};
ObserverComponent.displayName = "Observer";
function ObserverPropsCheck(props, key, componentName, location, propFullName) {
var extraKey = key === "children" ? "render" : "children";
var hasProp = typeof props[key] === "function";
var hasExtraProp = typeof props[extraKey] === "function";
if (hasProp && hasExtraProp) {
return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);
}
if (hasProp || hasExtraProp) {
return null;
}
return new Error("Invalid prop `" +
propFullName +
"` of type `" +
typeof props[key] +
"` supplied to" +
" `" +
componentName +
"`, expected `function`.");
}
function isStateless(component) {
// `function() {}` has prototype, but `() => {}` doesn't
// `() => {}` via Babel has prototype too.
return !(component.prototype && component.prototype.render);
}
var symbolId = 0;
function createSymbol(name) {
if (typeof Symbol === "function") {
return Symbol(name);
}
var symbol = "__$mobx-react " + name + " (" + symbolId + ")";
symbolId++;
return symbol;
}
var createdSymbols = {};
function newSymbol(name) {
if (!createdSymbols[name]) {
createdSymbols[name] = createSymbol(name);
}
return createdSymbols[name];
}
function shallowEqual(objA, objB) {
//From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
if (is(objA, objB)) { return true; }
if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
return false;
}
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) { return false; }
for (var i = 0; i < keysA.length; i++) {
if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
return false;
}
}
return true;
}
function is(x, y) {
// From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
if (x === y) {
return x !== 0 || 1 / x === 1 / y;
} else {
return x !== x && y !== y;
}
} // based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
var hoistBlackList$1 = {
$$typeof: 1,
render: 1,
compare: 1,
type: 1,
childContextTypes: 1,
contextType: 1,
contextTypes: 1,
defaultProps: 1,
getDefaultProps: 1,
getDerivedStateFromError: 1,
getDerivedStateFromProps: 1,
mixins: 1,
propTypes: 1
};
function copyStaticProperties$1(base, target) {
Object.keys(base).forEach(function (key) {
if (base.hasOwnProperty(key) && !hoistBlackList$1[key]) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
}
});
}
var isUsingStaticRendering$1 = false;
var skipRenderKey = newSymbol("skipRender");
var isForcingUpdateKey = newSymbol("isForcingUpdate"); // Using react-is had some issues (and operates on elements, not on types), see #608 / #609
var ReactForwardRefSymbol = typeof forwardRef === "function" && forwardRef(function (_props, _ref) {})["$$typeof"];
/**
* Helper to set `prop` to `this` as non-enumerable (hidden prop)
* @param target
* @param prop
* @param value
*/
function setHiddenProp(target, prop, value) {
if (!Object.hasOwnProperty.call(target, prop)) {
Object.defineProperty(target, prop, {
enumerable: false,
configurable: true,
writable: true,
value: value
});
} else {
target[prop] = value;
}
}
function useStaticRendering$1(useStaticRendering$$1) {
isUsingStaticRendering$1 = useStaticRendering$$1;
useStaticRendering(useStaticRendering$$1);
}
function observerSCU(nextProps, nextState) {
if (isUsingStaticRendering$1) {
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.");
} // update on any state changes (as is the default)
if (this.state !== nextState) {
return true;
} // update if props are shallowly not equal, inspired by PureRenderMixin
// we could return just 'false' here, and avoid the `skipRender` checks etc
// however, it is nicer if lifecycle events are triggered like usually,
// so we return true here if props are shallowly modified.
return !shallowEqual(this.props, nextProps);
}
function makeObservableProp(target, propName) {
var valueHolderKey = newSymbol(("reactProp_" + propName + "_valueHolder"));
var atomHolderKey = newSymbol(("reactProp_" + propName + "_atomHolder"));
function getAtom() {
if (!this[atomHolderKey]) {
setHiddenProp(this, atomHolderKey, createAtom("reactive " + propName));
}
return this[atomHolderKey];
}
Object.defineProperty(target, propName, {
configurable: true,
enumerable: true,
get: function () {
getAtom.call(this).reportObserved();
return this[valueHolderKey];
},
set: function set(v) {
if (!this[isForcingUpdateKey] && !shallowEqual(this[valueHolderKey], v)) {
setHiddenProp(this, valueHolderKey, v);
setHiddenProp(this, skipRenderKey, true);
getAtom.call(this).reportChanged();
setHiddenProp(this, skipRenderKey, false);
} else {
setHiddenProp(this, valueHolderKey, v);
}
}
});
}
/**
* Observer function / decorator
*/
function observer$1(componentClass) {
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'");
} // TODO: still needed? (if func comp?)
// Unwrap forward refs into `<Observer>` component
// we need to unwrap the render, because it is the inner render that needs to be tracked,
// not the ForwardRef HoC
if (ReactForwardRefSymbol && componentClass["$$typeof"] === ReactForwardRefSymbol) {
var baseRender = componentClass.render;
if (typeof baseRender !== "function") { throw new Error("render property of ForwardRef was not a function"); }
return forwardRef(function ObserverForwardRef() {
var arguments$1 = arguments;
return h( ObserverComponent, null, function () { return baseRender.apply(undefined, arguments$1); } );
});
} // Function component
if (typeof componentClass === "function" && (!componentClass.prototype || !componentClass.prototype.render) && !componentClass.isReactClass && !Component.isPrototypeOf(componentClass)) {
return observer(componentClass);
}
return makeClassComponentObserver(componentClass);
}
function makeClassComponentObserver(componentClass) {
var target = componentClass.prototype || componentClass;
if (target.componentWillReact) { throw new Error("The componentWillReact life-cycle event is no longer supported"); }
if (componentClass.__proto__ !== PureComponent) {
if (!target.shouldComponentUpdate) { target.shouldComponentUpdate = observerSCU; }else if (target.shouldComponentUpdate !== observerSCU) { throw new Error("It is not allowed to use shouldComponentUpdate in observer based components."); }
}
makeObservableProp(target, "props");
makeObservableProp(target, "state");
var baseRender = target.render;
target.render = function renderWrapper() {
if (!this.baseRender) {
// safe the closure, as it won't change!
var bound = baseRender.bind(this);
this.baseRender = function () { return bound(); };
}
return h( ObserverComponent, null, this.baseRender );
};
return componentClass;
}
var specialReactKeys = {
children: true,
key: true,
ref: true
};
var MobXProviderContext = createContext({});
var Provider = /*@__PURE__*/(function (Component$$1) {
function Provider(props, context) {
Component$$1.call(this, props, context);
this.state = Object.assign({}, context,
grabStores(props));
}
if ( Component$$1 ) Provider.__proto__ = Component$$1;
Provider.prototype = Object.create( Component$$1 && Component$$1.prototype );
Provider.prototype.constructor = Provider;
Provider.prototype.render = function render () {
return createElement(MobXProviderContext.Provider, {
value: this.state
}, Children.only(this.props.children));
};
Provider.getDerivedStateFromProps = function getDerivedStateFromProps (nextProps, prevState) {
var newStores = Object.assign({}, prevState,
grabStores(nextProps)); // spread in prevState for the context based stores
if (!shallowEqual(prevState, newStores)) { throw new Error("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children"); }
return prevState; // because they didn't change, remember!
};
return Provider;
}(Component));
Provider.contextType = MobXProviderContext;
function grabStores(from) {
var res = {};
if (!from) { return res; }
for (var key in from) { if (validStoreName(key)) { res[key] = from[key]; } }
return res;
}
function validStoreName(key) {
return !specialReactKeys[key] && key !== "suppressChangedStoreWarning";
}
function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
/**
* Store Injection
*/
function createStoreInjector(grabStoresFn, component, injectNames, makeReactive) {
var displayName = getInjectName(component, injectNames);
var Injector = /*@__PURE__*/(function (Component$$1) {
function Injector () {
Component$$1.apply(this, arguments);
}
if ( Component$$1 ) Injector.__proto__ = Component$$1;
Injector.prototype = Object.create( Component$$1 && Component$$1.prototype );
Injector.prototype.constructor = Injector;
Injector.prototype.render = function render () {
var ref = this.props;
var forwardRef$$1 = ref.forwardRef;
var rest = objectWithoutProperties( ref, ["forwardRef"] );
var props = rest;
Object.assign(props, grabStoresFn(this.context || {}, props) || {});
if (forwardRef$$1 && !isStateless(component)) {
props.ref = this.props.forwardRef;
}
return createElement(component, props);
};
return Injector;
}(Component));
Injector.contextType = MobXProviderContext;
if (makeReactive) { Injector = observer$1(Injector); }
Injector.isMobxInjector = true; // assigned late to suppress observer warning
// Support forward refs
var InjectHocRef = React__default.forwardRef(function (props, ref) { return React__default.createElement(Injector, Object.assign({}, props,
{forwardRef: ref})); }); // Static fields from component should be visible on the generated Injector
copyStaticProperties$1(component, InjectHocRef);
InjectHocRef.wrappedComponent = component;
InjectHocRef.displayName = displayName;
return InjectHocRef;
}
function getInjectName(component, injectNames) {
var displayName;
var componentName = component.displayName || component.name || component.constructor && component.constructor.name || "Component";
if (injectNames) { displayName = "inject-with-" + injectNames + "(" + componentName + ")"; }else { displayName = "inject(" + componentName + ")"; }
return displayName;
}
function grabStoresByName(storeNames) {
return function (baseStores, nextProps) {
storeNames.forEach(function (storeName) {
if (storeName in nextProps // prefer props over stores
) { return; }
if (!(storeName in baseStores)) { throw new Error("MobX injector: Store '" + storeName + "' is not available! Make sure it is provided by some Provider"); }
nextProps[storeName] = baseStores[storeName];
});
return nextProps;
};
}
/**
* higher order component that injects stores to a child.
* takes either a varargs list of strings, which are stores read from the context,
* or a function that manually maps the available stores from the context to props:
* storesToProps(mobxStores, props, context) => newProps
*/
function inject(
/* fn(stores, nextProps) or ...storeNames */) {
var storeNames = [], len = arguments.length;
while ( len-- ) storeNames[ len ] = arguments[ len ];
var grabStoresFn;
if (typeof arguments[0] === "function") {
grabStoresFn = arguments[0];
return function (componentClass) { return createStoreInjector(grabStoresFn, componentClass, grabStoresFn.name, true); };
} else {
return function (componentClass) { return createStoreInjector(grabStoresByName(storeNames), componentClass, storeNames.join("-"), false); };
}
}
var storeKey = newSymbol("disposeOnUnmount");
var baseUnmountKey = newSymbol("originalOnUnmount");
function runDisposersOnWillUnmount() {
var this$1 = this;
if (this[baseUnmountKey]) { this[baseUnmountKey](); }
if (!this[storeKey]) {
// when disposeOnUnmount is only set to some instances of a component it will still patch the prototype
return;
}
this[storeKey].forEach(function (propKeyOrFunction) {
var prop = typeof propKeyOrFunction === "string" ? this$1[propKeyOrFunction] : propKeyOrFunction;
if (prop !== undefined && prop !== null) {
if (typeof prop !== "function") {
throw new Error("[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc.");
}
prop();
}
});
this[storeKey] = [];
}
function disposeOnUnmount(target, propertyKeyOrFunction) {
if (Array.isArray(propertyKeyOrFunction)) {
return propertyKeyOrFunction.map(function (fn) { return disposeOnUnmount(target, fn); });
}
var c = Object.getPrototypeOf(target).constructor || Object.getPrototypeOf(target.constructor);
var c2 = Object.getPrototypeOf(target.constructor);
if (!(c === Component || c === PureComponent || c2 === Component || c2 === PureComponent)) {
throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");
}
if (typeof propertyKeyOrFunction !== "string" && typeof propertyKeyOrFunction !== "function") {
throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");
} // add property key / function we want run (disposed) to the store
var componentWasAlreadyModified = !!target[storeKey];
var store = target[storeKey] || (target[storeKey] = []);
store.push(propertyKeyOrFunction); // tweak the component class componentWillUnmount if not done already
if (!componentWasAlreadyModified) {
// make sure original definition is invoked
if (target.componentWillUnmount) { target[baseUnmountKey] = target.componentWillUnmount; }
Object.defineProperty(target, "componentWillUnmount", {
get: function get() {
return runDisposersOnWillUnmount;
},
set: function set(fn) {
// this will happen if componentWillUnmount is being assigned after patching the prototype
this[storeKey].push(fn); // assigning a new local value to componentWillUnmount would hide the super implementation...
this[baseUnmountKey] = undefined;
},
configurable: false,
enumerable: false
});
} // return the disposer as is if invoked as a non decorator
if (typeof propertyKeyOrFunction !== "string") {
return propertyKeyOrFunction;
}
}
// Copied from React.PropTypes
function createChainableTypeChecker(validate) {
function checkType(isRequired, props, propName, componentName, location, propFullName) {
var rest = [], len = arguments.length - 6;
while ( len-- > 0 ) rest[ len ] = arguments[ len + 6 ];
return untracked(function () {
componentName = componentName || "<<anonymous>>";
propFullName = propFullName || propName;
if (props[propName] == null) {
if (isRequired) {
var actual = props[propName] === null ? "null" : "undefined";
return new Error("The " + location + " `" + propFullName + "` is marked as required " + "in `" + componentName + "`, but its value is `" + actual + "`.");
}
return null;
} else {
return validate.apply(void 0, [ props, propName, componentName, location, propFullName ].concat( rest ));
}
});
}
var chainedCheckType = checkType.bind(null, false);
chainedCheckType.isRequired = checkType.bind(null, true);
return chainedCheckType;
} // Copied from React.PropTypes
function isSymbol(propType, propValue) {
// Native Symbol.
if (propType === "symbol") {
return true;
} // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
if (propValue["@@toStringTag"] === "Symbol") {
return true;
} // Fallback for non-spec compliant Symbols which are polyfilled.
if (typeof Symbol === "function" && propValue instanceof Symbol) {
return true;
}
return false;
} // Copied from React.PropTypes
function getPropType(propValue) {
var propType = typeof propValue;
if (Array.isArray(propValue)) {
return "array";
}
if (propValue instanceof RegExp) {
// Old webkits (at least until Android 4.0) return 'function' rather than
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
// passes PropTypes.object.
return "object";
}
if (isSymbol(propType, propValue)) {
return "symbol";
}
return propType;
} // This handles more types than `getPropType`. Only used for error messages.
// Copied from React.PropTypes
function getPreciseType(propValue) {
var propType = getPropType(propValue);
if (propType === "object") {
if (propValue instanceof Date) {
return "date";
} else if (propValue instanceof RegExp) {
return "regexp";
}
}
return propType;
}
function createObservableTypeCheckerCreator(allowNativeType, mobxType) {
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
return untracked(function () {
if (allowNativeType) {
if (getPropType(props[propName]) === mobxType.toLowerCase()) { return null; }
}
var mobxChecker;
switch (mobxType) {
case "Array":
mobxChecker = isObservableArray;
break;
case "Object":
mobxChecker = isObservableObject;
break;
case "Map":
mobxChecker = isObservableMap;
break;
default:
throw new Error(("Unexpected mobxType: " + mobxType));
}
var propValue = props[propName];
if (!mobxChecker(propValue)) {
var preciseType = getPreciseType(propValue);
var nativeTypeExpectationMessage = allowNativeType ? " or javascript `" + mobxType.toLowerCase() + "`" : "";
return new Error("Invalid prop `" + propFullName + "` of type `" + preciseType + "` supplied to" + " `" + componentName + "`, expected `mobx.Observable" + mobxType + "`" + nativeTypeExpectationMessage + ".");
}
return null;
});
});
}
function createObservableArrayOfTypeChecker(allowNativeType, typeChecker) {
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
var rest = [], len = arguments.length - 5;
while ( len-- > 0 ) rest[ len ] = arguments[ len + 5 ];
return untracked(function () {
if (typeof typeChecker !== "function") {
return new Error("Property `" + propFullName + "` of component `" + componentName + "` has " + "invalid PropType notation.");
}
var error = createObservableTypeCheckerCreator(allowNativeType, "Array")(props, propName, componentName);
if (error instanceof Error) { return error; }
var propValue = props[propName];
for (var i = 0; i < propValue.length; i++) {
error = typeChecker.apply(void 0, [ propValue, i, componentName, location, propFullName + "[" + i + "]" ].concat( rest ));
if (error instanceof Error) { return error; }
}
return null;
});
});
}
var observableArray = createObservableTypeCheckerCreator(false, "Array");
var observableArrayOf = createObservableArrayOfTypeChecker.bind(null, false);
var observableMap = createObservableTypeCheckerCreator(false, "Map");
var observableObject = createObservableTypeCheckerCreator(false, "Object");
var arrayOrObservableArray = createObservableTypeCheckerCreator(true, "Array");
var arrayOrObservableArrayOf = createObservableArrayOfTypeChecker.bind(null, true);
var objectOrObservableObject = createObservableTypeCheckerCreator(true, "Object");
var PropTypes = {
observableArray: observableArray,
observableArrayOf: observableArrayOf,
observableMap: observableMap,
observableObject: observableObject,
arrayOrObservableArray: arrayOrObservableArray,
arrayOrObservableArrayOf: arrayOrObservableArrayOf,
objectOrObservableObject: objectOrObservableObject
};
if (!Component) { throw new Error("mobx-react requires React to be available"); }
if (!observable) { throw new Error("mobx-react requires mobx to be available"); }
if (typeof unstable_batchedUpdates === "function") { configure({
reactionScheduler: unstable_batchedUpdates
}); }
export { useObservable, useComputed, useDisposable, useObserver, ObserverComponent as Observer, observer$1 as observer, useStaticRendering$1 as useStaticRendering, Provider, inject, disposeOnUnmount, PropTypes };
//# sourceMappingURL=mobx-react.module.js.map

874

dist/mobx-react.umd.js

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

!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react-dom"),require("react"),require("mobx")):"function"==typeof define&&define.amd?define(["exports","react-dom","react","mobx"],r):r(e.mobxReact={},e.ReactDOM,e.React,e.mobx)}(this,function(e,r,t,n){var o="default"in t?t.default:t;if(!t.useState)throw new Error("mobx-react-lite requires React with Hooks support");if(!n.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");var i=function(){};var a=!1;function u(){return a}var c=function(){return(c=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)};function s(e){return e.current?n.getDependencyTree(e.current):"<unknown>"}var f=[];function p(){var e=function(e,r){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var n,o,i=t.call(e),a=[];try{for(;(void 0===r||r-- >0)&&!(n=i.next()).done;)a.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(t=i.return)&&t.call(i)}finally{if(o)throw o.error}}return a}(t.useState(0),2)[1];return t.useCallback(function(){e(function(e){return e+1})},[])}function l(e,r){if(void 0===r&&(r="observed"),u())return e();var o,i,a=p(),c=t.useRef(null);if(c.current||(c.current=new n.Reaction("observer("+r+")",function(){a()})),t.useDebugValue(c,s),function(e){t.useEffect(function(){return e},f)}(function(){c.current.dispose()}),c.current.track(function(){try{o=e()}catch(e){i=e}}),i)throw c.current.dispose(),i;return o}function d(e,r){if(u())return e;var n,o,i,a=c({forwardRef:!1},r),s=e.displayName||e.name,f=function(r,t){return l(function(){return e(r,t)},s)};return n=t.memo(a.forwardRef?t.forwardRef(f):f),o=e,i=n,Object.keys(o).forEach(function(e){o.hasOwnProperty(e)&&!b[e]&&Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))}),n.displayName=s,n}var b={$$typeof:!0,render:!0,compare:!0,type:!0};function y(e){var r=e.children||e.render;return"function"!=typeof r?null:l(r)}function v(e,r,t,n,o){var i="function"==typeof e[r],a="function"==typeof e["children"===r?"render":"children"];return i&&a?new Error("MobX Observer: Do not use children and render in the same time in`"+t):i||a?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+t+"`, expected `function`.")}y.propTypes={children:v,render:v},y.displayName="Observer";var m=0;var w={};function O(e){return w[e]||(w[e]=function(e){if("function"==typeof Symbol)return Symbol(e);var r="__$mobx-react "+e+" ("+m+")";return m++,r}(e)),w[e]}function g(e,r){if(j(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!hasOwnProperty.call(r,t[o])||!j(e[t[o]],r[t[o]]))return!1;return!0}function j(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var x={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,propTypes:1};var P=!1,R=O("skipRender"),E=O("isForcingUpdate"),C="function"==typeof t.forwardRef&&t.forwardRef(function(e,r){}).$$typeof;function k(e,r,t){Object.hasOwnProperty.call(e,r)?e[r]=t:Object.defineProperty(e,r,{enumerable:!1,configurable:!0,writable:!0,value:t})}function _(e,r){return P&&console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."),this.state!==r||!g(this.props,e)}function S(e,r){var t=O("reactProp_"+r+"_valueHolder"),o=O("reactProp_"+r+"_atomHolder");function i(){return this[o]||k(this,o,n.createAtom("reactive "+r)),this[o]}Object.defineProperty(e,r,{configurable:!0,enumerable:!0,get:function(){return i.call(this).reportObserved(),this[t]},set:function(e){this[E]||g(this[t],e)?k(this,t,e):(k(this,t,e),k(this,R,!0),i.call(this).reportChanged(),k(this,R,!1))}})}function U(e){if(!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'"),C&&e.$$typeof===C){var r=e.render;if("function"!=typeof r)throw new Error("render property of ForwardRef was not a function");return t.forwardRef(function(){var e=arguments;return h(y,null,function(){return r.apply(void 0,e)})})}return"function"!=typeof e||e.prototype&&e.prototype.render||e.isReactClass||t.Component.isPrototypeOf(e)?function(e){var r=e.prototype||e;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==_)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=_;S(r,"props"),S(r,"state");var n=r.render;return r.render=function(){if(!this.baseRender){var e=n.bind(this);this.baseRender=function(){return e()}}return h(y,null,this.baseRender)},e}(e):d(e)}var T={children:!0,key:!0,ref:!0},A=t.createContext({}),M=function(e){function r(r,t){e.call(this,r,t),this.state=Object.assign({},t,D(r))}return e&&(r.__proto__=e),(r.prototype=Object.create(e&&e.prototype)).constructor=r,r.prototype.render=function(){return t.createElement(A.Provider,{value:this.state},t.Children.only(this.props.children))},r.getDerivedStateFromProps=function(e,r){if(!g(r,Object.assign({},r,D(e))))throw new Error("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children");return r},r}(t.Component);function D(e){var r={};if(!e)return r;for(var t in e)q(t)&&(r[t]=e[t]);return r}function q(e){return!T[e]&&"suppressChangedStoreWarning"!==e}function $(e,r,n,i){var a=function(e,r){var t,n=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";t=r?"inject-with-"+r+"("+n+")":"inject("+n+")";return t}(r,n),u=function(n){function o(){n.apply(this,arguments)}return n&&(o.__proto__=n),(o.prototype=Object.create(n&&n.prototype)).constructor=o,o.prototype.render=function(){var n=this.props,o=n.forwardRef,i=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===r.indexOf(n)&&(t[n]=e[n]);return t}(n,["forwardRef"]);return Object.assign(i,e(this.context||{},i)||{}),o&&!function(e){return!(e.prototype&&e.prototype.render)}(r)&&(i.ref=this.props.forwardRef),t.createElement(r,i)},o}(t.Component);u.contextType=A,i&&(u=U(u)),u.isMobxInjector=!0;var c,s,f=o.forwardRef(function(e,r){return o.createElement(u,Object.assign({},e,{forwardRef:r}))});return c=r,s=f,Object.keys(c).forEach(function(e){c.hasOwnProperty(e)&&!x[e]&&Object.defineProperty(s,e,Object.getOwnPropertyDescriptor(c,e))}),f.wrappedComponent=r,f.displayName=a,f}M.contextType=A;var I=O("disposeOnUnmount"),W=O("originalOnUnmount");function F(){var e=this;this[W]&&this[W](),this[I]&&(this[I].forEach(function(r){var t="string"==typeof r?e[r]:r;if(null!=t){if("function"!=typeof t)throw new Error("[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc.");t()}}),this[I]=[])}function N(e){function r(r,t,o,i,a,u){for(var c=[],s=arguments.length-6;s-- >0;)c[s]=arguments[s+6];return n.untracked(function(){return i=i||"<<anonymous>>",u=u||o,null==t[o]?r?new Error("The "+a+" `"+u+"` is marked as required in `"+i+"`, but its value is `"+(null===t[o]?"null":"undefined")+"`."):null:e.apply(void 0,[t,o,i,a,u].concat(c))})}var t=r.bind(null,!1);return t.isRequired=r.bind(null,!0),t}function H(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function X(e,r){return N(function(t,o,i,a,u){return n.untracked(function(){if(e&&H(t[o])===r.toLowerCase())return null;var a;switch(r){case"Array":a=n.isObservableArray;break;case"Object":a=n.isObservableObject;break;case"Map":a=n.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+r)}var c=t[o];if(!a(c)){var s=function(e){var r=H(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(c),f=e?" or javascript `"+r.toLowerCase()+"`":"";return new Error("Invalid prop `"+u+"` of type `"+s+"` supplied to `"+i+"`, expected `mobx.Observable"+r+"`"+f+".")}return null})})}function L(e,r){return N(function(t,o,i,a,u){for(var c=[],s=arguments.length-5;s-- >0;)c[s]=arguments[s+5];return n.untracked(function(){if("function"!=typeof r)return new Error("Property `"+u+"` of component `"+i+"` has invalid PropType notation.");var n=X(e,"Array")(t,o,i);if(n instanceof Error)return n;for(var s=t[o],f=0;f<s.length;f++)if((n=r.apply(void 0,[s,f,i,a,u+"["+f+"]"].concat(c)))instanceof Error)return n;return null})})}var V={observableArray:X(!1,"Array"),observableArrayOf:L.bind(null,!1),observableMap:X(!1,"Map"),observableObject:X(!1,"Object"),arrayOrObservableArray:X(!0,"Array"),arrayOrObservableArrayOf:L.bind(null,!0),objectOrObservableObject:X(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!n.observable)throw new Error("mobx-react requires mobx to be available");"function"==typeof r.unstable_batchedUpdates&&n.configure({reactionScheduler:r.unstable_batchedUpdates}),e.useObservable=function(e){var r=t.useRef(null);return r.current||(r.current=n.observable(e)),r.current},e.useComputed=function(e,r){return void 0===r&&(r=[]),t.useMemo(function(){return n.computed(e)},r).get()},e.useDisposable=function(e,r){void 0===r&&(r=[]);var n=t.useRef(null),o=t.useRef(!1);function a(r){if(o.current)return i;if(!n.current){var t=e();if("function"!=typeof t){var a=new Error("generated disposer must be a function");return console.error(a),i}n.current=t}return function(){n.current&&(n.current(),n.current=null),r&&(o.current=!0)}}return t.useEffect(function(){return a(!1)},r),a(!0)},e.useObserver=l,e.Observer=y,e.observer=U,e.useStaticRendering=function(e){P=e,a=e},e.Provider=M,e.inject=function(){for(var e,r=[],t=arguments.length;t--;)r[t]=arguments[t];return"function"==typeof arguments[0]?(e=arguments[0],function(r){return $(e,r,e.name,!0)}):function(e){return $(function(e){return function(r,t){return e.forEach(function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}}),t}}(r),e,r.join("-"),!1)}},e.disposeOnUnmount=function e(r,n){if(Array.isArray(n))return n.map(function(t){return e(r,t)});var o=Object.getPrototypeOf(r).constructor||Object.getPrototypeOf(r.constructor),i=Object.getPrototypeOf(r.constructor);if(o!==t.Component&&o!==t.PureComponent&&i!==t.Component&&i!==t.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof n&&"function"!=typeof n)throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var a=!!r[I];return(r[I]||(r[I]=[])).push(n),a||(r.componentWillUnmount&&(r[W]=r.componentWillUnmount),Object.defineProperty(r,"componentWillUnmount",{get:function(){return F},set:function(e){this[I].push(e),this[W]=void 0},configurable:!1,enumerable:!1})),"string"!=typeof n?n:void 0},e.PropTypes=V});
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react-dom'), require('react'), require('mobx')) :
typeof define === 'function' && define.amd ? define(['exports', 'react-dom', 'react', 'mobx'], factory) :
(factory((global.mobxReact = {}),global.ReactDOM,global.React,global.mobx));
}(this, (function (exports,reactDom,React,mobx) {
var React__default = 'default' in React ? React['default'] : React;
if (!React.useState) {
throw new Error("mobx-react-lite requires React with Hooks support");
}
if (!mobx.spy) {
throw new Error("mobx-react-lite requires mobx at least version 4 to be available");
}
function useObservable(initialValue) {
var observableRef = React.useRef(null);
if (!observableRef.current) {
observableRef.current = mobx.observable(initialValue);
}
return observableRef.current;
}
function useComputed(func, inputs) {
if (inputs === void 0) { inputs = []; }
var computed$$1 = React.useMemo(function () { return mobx.computed(func); }, inputs);
return computed$$1.get();
}
var doNothingDisposer = function () {
// empty
};
/**
* Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
* Returns the generated disposer for early disposal.
*
* @export
* @template D
* @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
* @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
* @returns {D}
*/
function useDisposable(disposerGenerator, inputs) {
if (inputs === void 0) { inputs = []; }
var disposerRef = React.useRef(null);
var earlyDisposedRef = React.useRef(false);
React.useEffect(function () {
return lazyCreateDisposer(false);
}, inputs);
function lazyCreateDisposer(earlyDisposal) {
// ensure that we won't create a new disposer if it was early disposed
if (earlyDisposedRef.current) {
return doNothingDisposer;
}
if (!disposerRef.current) {
var newDisposer = disposerGenerator();
if (typeof newDisposer !== "function") {
var error = new Error("generated disposer must be a function");
{
// tslint:disable-next-line:no-console
console.error(error);
return doNothingDisposer;
}
}
disposerRef.current = newDisposer;
}
return function () {
if (disposerRef.current) {
disposerRef.current();
disposerRef.current = null;
}
if (earlyDisposal) {
earlyDisposedRef.current = true;
}
};
}
return lazyCreateDisposer(true);
}
var globalIsUsingStaticRendering = false;
function useStaticRendering(enable) {
globalIsUsingStaticRendering = enable;
}
function isUsingStaticRendering() {
return globalIsUsingStaticRendering;
}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function printDebugValue(v) {
if (!v.current) {
return "<unknown>";
}
return mobx.getDependencyTree(v.current);
}
var EMPTY_ARRAY = [];
function useUnmount(fn) {
React.useEffect(function () { return fn; }, EMPTY_ARRAY);
}
function useForceUpdate() {
var _a = __read(React.useState(0), 2), setTick = _a[1];
var update = React.useCallback(function () {
setTick(function (tick) { return tick + 1; });
}, []);
return update;
}
function useObserver(fn, baseComponentName) {
if (baseComponentName === void 0) { baseComponentName = "observed"; }
if (isUsingStaticRendering()) {
return fn();
}
var forceUpdate = useForceUpdate();
var reaction = React.useRef(null);
if (!reaction.current) {
reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
forceUpdate();
});
}
React.useDebugValue(reaction, printDebugValue);
useUnmount(function () {
reaction.current.dispose();
});
// render the original component, but have the
// reaction track the observables, so that rendering
// can be invalidated (see above) once a dependency changes
var rendering;
var exception;
reaction.current.track(function () {
try {
rendering = fn();
}
catch (e) {
exception = e;
}
});
if (exception) {
reaction.current.dispose();
throw exception; // re-throw any exceptions catched during rendering
}
return rendering;
}
// n.b. base case is not used for actual typings or exported in the typing files
function observer(baseComponent, options) {
// The working of observer is explaind step by step in this talk: https://www.youtube.com/watch?v=cPF4iBedoF0&feature=youtu.be&t=1307
if (isUsingStaticRendering()) {
return baseComponent;
}
var realOptions = __assign({ forwardRef: false }, options);
var baseComponentName = baseComponent.displayName || baseComponent.name;
var wrappedComponent = function (props, ref) {
return useObserver(function () { return baseComponent(props, ref); }, baseComponentName);
};
// memo; we are not intested in deep updates
// in props; we assume that if deep objects are changed,
// this is in observables, which would have been tracked anyway
var memoComponent;
if (realOptions.forwardRef) {
// we have to use forwardRef here because:
// 1. it cannot go before memo, only after it
// 2. forwardRef converts the function into an actual component, so we can't let the baseComponent do it
// since it wouldn't be a callable function anymore
memoComponent = React.memo(React.forwardRef(wrappedComponent));
}
else {
memoComponent = React.memo(wrappedComponent);
}
copyStaticProperties(baseComponent, memoComponent);
memoComponent.displayName = baseComponentName;
return memoComponent;
}
// based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
var hoistBlackList = {
$$typeof: true,
render: true,
compare: true,
type: true
};
function copyStaticProperties(base, target) {
Object.keys(base).forEach(function (key) {
if (base.hasOwnProperty(key) && !hoistBlackList[key]) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
}
});
}
function ObserverComponent(_a) {
var children = _a.children, render = _a.render;
var component = children || render;
if (typeof component !== "function") {
return null;
}
return useObserver(component);
}
ObserverComponent.propTypes = {
children: ObserverPropsCheck,
render: ObserverPropsCheck
};
ObserverComponent.displayName = "Observer";
function ObserverPropsCheck(props, key, componentName, location, propFullName) {
var extraKey = key === "children" ? "render" : "children";
var hasProp = typeof props[key] === "function";
var hasExtraProp = typeof props[extraKey] === "function";
if (hasProp && hasExtraProp) {
return new Error("MobX Observer: Do not use children and render in the same time in`" + componentName);
}
if (hasProp || hasExtraProp) {
return null;
}
return new Error("Invalid prop `" +
propFullName +
"` of type `" +
typeof props[key] +
"` supplied to" +
" `" +
componentName +
"`, expected `function`.");
}
function isStateless(component) {
// `function() {}` has prototype, but `() => {}` doesn't
// `() => {}` via Babel has prototype too.
return !(component.prototype && component.prototype.render);
}
var symbolId = 0;
function createSymbol(name) {
if (typeof Symbol === "function") {
return Symbol(name);
}
var symbol = "__$mobx-react " + name + " (" + symbolId + ")";
symbolId++;
return symbol;
}
var createdSymbols = {};
function newSymbol(name) {
if (!createdSymbols[name]) {
createdSymbols[name] = createSymbol(name);
}
return createdSymbols[name];
}
function shallowEqual(objA, objB) {
//From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
if (is(objA, objB)) { return true; }
if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
return false;
}
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) { return false; }
for (var i = 0; i < keysA.length; i++) {
if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
return false;
}
}
return true;
}
function is(x, y) {
// From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
if (x === y) {
return x !== 0 || 1 / x === 1 / y;
} else {
return x !== x && y !== y;
}
} // based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
var hoistBlackList$1 = {
$$typeof: 1,
render: 1,
compare: 1,
type: 1,
childContextTypes: 1,
contextType: 1,
contextTypes: 1,
defaultProps: 1,
getDefaultProps: 1,
getDerivedStateFromError: 1,
getDerivedStateFromProps: 1,
mixins: 1,
propTypes: 1
};
function copyStaticProperties$1(base, target) {
Object.keys(base).forEach(function (key) {
if (base.hasOwnProperty(key) && !hoistBlackList$1[key]) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
}
});
}
var isUsingStaticRendering$1 = false;
var skipRenderKey = newSymbol("skipRender");
var isForcingUpdateKey = newSymbol("isForcingUpdate"); // Using react-is had some issues (and operates on elements, not on types), see #608 / #609
var ReactForwardRefSymbol = typeof React.forwardRef === "function" && React.forwardRef(function (_props, _ref) {})["$$typeof"];
/**
* Helper to set `prop` to `this` as non-enumerable (hidden prop)
* @param target
* @param prop
* @param value
*/
function setHiddenProp(target, prop, value) {
if (!Object.hasOwnProperty.call(target, prop)) {
Object.defineProperty(target, prop, {
enumerable: false,
configurable: true,
writable: true,
value: value
});
} else {
target[prop] = value;
}
}
function useStaticRendering$1(useStaticRendering$$1) {
isUsingStaticRendering$1 = useStaticRendering$$1;
useStaticRendering(useStaticRendering$$1);
}
function observerSCU(nextProps, nextState) {
if (isUsingStaticRendering$1) {
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.");
} // update on any state changes (as is the default)
if (this.state !== nextState) {
return true;
} // update if props are shallowly not equal, inspired by PureRenderMixin
// we could return just 'false' here, and avoid the `skipRender` checks etc
// however, it is nicer if lifecycle events are triggered like usually,
// so we return true here if props are shallowly modified.
return !shallowEqual(this.props, nextProps);
}
function makeObservableProp(target, propName) {
var valueHolderKey = newSymbol(("reactProp_" + propName + "_valueHolder"));
var atomHolderKey = newSymbol(("reactProp_" + propName + "_atomHolder"));
function getAtom() {
if (!this[atomHolderKey]) {
setHiddenProp(this, atomHolderKey, mobx.createAtom("reactive " + propName));
}
return this[atomHolderKey];
}
Object.defineProperty(target, propName, {
configurable: true,
enumerable: true,
get: function () {
getAtom.call(this).reportObserved();
return this[valueHolderKey];
},
set: function set(v) {
if (!this[isForcingUpdateKey] && !shallowEqual(this[valueHolderKey], v)) {
setHiddenProp(this, valueHolderKey, v);
setHiddenProp(this, skipRenderKey, true);
getAtom.call(this).reportChanged();
setHiddenProp(this, skipRenderKey, false);
} else {
setHiddenProp(this, valueHolderKey, v);
}
}
});
}
/**
* Observer function / decorator
*/
function observer$1(componentClass) {
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'");
} // TODO: still needed? (if func comp?)
// Unwrap forward refs into `<Observer>` component
// we need to unwrap the render, because it is the inner render that needs to be tracked,
// not the ForwardRef HoC
if (ReactForwardRefSymbol && componentClass["$$typeof"] === ReactForwardRefSymbol) {
var baseRender = componentClass.render;
if (typeof baseRender !== "function") { throw new Error("render property of ForwardRef was not a function"); }
return React.forwardRef(function ObserverForwardRef() {
var arguments$1 = arguments;
return h( ObserverComponent, null, function () { return baseRender.apply(undefined, arguments$1); } );
});
} // Function component
if (typeof componentClass === "function" && (!componentClass.prototype || !componentClass.prototype.render) && !componentClass.isReactClass && !React.Component.isPrototypeOf(componentClass)) {
return observer(componentClass);
}
return makeClassComponentObserver(componentClass);
}
function makeClassComponentObserver(componentClass) {
var target = componentClass.prototype || componentClass;
if (target.componentWillReact) { throw new Error("The componentWillReact life-cycle event is no longer supported"); }
if (componentClass.__proto__ !== React.PureComponent) {
if (!target.shouldComponentUpdate) { target.shouldComponentUpdate = observerSCU; }else if (target.shouldComponentUpdate !== observerSCU) { throw new Error("It is not allowed to use shouldComponentUpdate in observer based components."); }
}
makeObservableProp(target, "props");
makeObservableProp(target, "state");
var baseRender = target.render;
target.render = function renderWrapper() {
if (!this.baseRender) {
// safe the closure, as it won't change!
var bound = baseRender.bind(this);
this.baseRender = function () { return bound(); };
}
return h( ObserverComponent, null, this.baseRender );
};
return componentClass;
}
var specialReactKeys = {
children: true,
key: true,
ref: true
};
var MobXProviderContext = React.createContext({});
var Provider = /*@__PURE__*/(function (Component) {
function Provider(props, context) {
Component.call(this, props, context);
this.state = Object.assign({}, context,
grabStores(props));
}
if ( Component ) Provider.__proto__ = Component;
Provider.prototype = Object.create( Component && Component.prototype );
Provider.prototype.constructor = Provider;
Provider.prototype.render = function render () {
return React.createElement(MobXProviderContext.Provider, {
value: this.state
}, React.Children.only(this.props.children));
};
Provider.getDerivedStateFromProps = function getDerivedStateFromProps (nextProps, prevState) {
var newStores = Object.assign({}, prevState,
grabStores(nextProps)); // spread in prevState for the context based stores
if (!shallowEqual(prevState, newStores)) { throw new Error("MobX Provider: The set of provided stores has changed. Please avoid changing stores as the change might not propagate to all children"); }
return prevState; // because they didn't change, remember!
};
return Provider;
}(React.Component));
Provider.contextType = MobXProviderContext;
function grabStores(from) {
var res = {};
if (!from) { return res; }
for (var key in from) { if (validStoreName(key)) { res[key] = from[key]; } }
return res;
}
function validStoreName(key) {
return !specialReactKeys[key] && key !== "suppressChangedStoreWarning";
}
function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
/**
* Store Injection
*/
function createStoreInjector(grabStoresFn, component, injectNames, makeReactive) {
var displayName = getInjectName(component, injectNames);
var Injector = /*@__PURE__*/(function (Component) {
function Injector () {
Component.apply(this, arguments);
}
if ( Component ) Injector.__proto__ = Component;
Injector.prototype = Object.create( Component && Component.prototype );
Injector.prototype.constructor = Injector;
Injector.prototype.render = function render () {
var ref = this.props;
var forwardRef = ref.forwardRef;
var rest = objectWithoutProperties( ref, ["forwardRef"] );
var props = rest;
Object.assign(props, grabStoresFn(this.context || {}, props) || {});
if (forwardRef && !isStateless(component)) {
props.ref = this.props.forwardRef;
}
return React.createElement(component, props);
};
return Injector;
}(React.Component));
Injector.contextType = MobXProviderContext;
if (makeReactive) { Injector = observer$1(Injector); }
Injector.isMobxInjector = true; // assigned late to suppress observer warning
// Support forward refs
var InjectHocRef = React__default.forwardRef(function (props, ref) { return React__default.createElement(Injector, Object.assign({}, props,
{forwardRef: ref})); }); // Static fields from component should be visible on the generated Injector
copyStaticProperties$1(component, InjectHocRef);
InjectHocRef.wrappedComponent = component;
InjectHocRef.displayName = displayName;
return InjectHocRef;
}
function getInjectName(component, injectNames) {
var displayName;
var componentName = component.displayName || component.name || component.constructor && component.constructor.name || "Component";
if (injectNames) { displayName = "inject-with-" + injectNames + "(" + componentName + ")"; }else { displayName = "inject(" + componentName + ")"; }
return displayName;
}
function grabStoresByName(storeNames) {
return function (baseStores, nextProps) {
storeNames.forEach(function (storeName) {
if (storeName in nextProps // prefer props over stores
) { return; }
if (!(storeName in baseStores)) { throw new Error("MobX injector: Store '" + storeName + "' is not available! Make sure it is provided by some Provider"); }
nextProps[storeName] = baseStores[storeName];
});
return nextProps;
};
}
/**
* higher order component that injects stores to a child.
* takes either a varargs list of strings, which are stores read from the context,
* or a function that manually maps the available stores from the context to props:
* storesToProps(mobxStores, props, context) => newProps
*/
function inject(
/* fn(stores, nextProps) or ...storeNames */) {
var storeNames = [], len = arguments.length;
while ( len-- ) storeNames[ len ] = arguments[ len ];
var grabStoresFn;
if (typeof arguments[0] === "function") {
grabStoresFn = arguments[0];
return function (componentClass) { return createStoreInjector(grabStoresFn, componentClass, grabStoresFn.name, true); };
} else {
return function (componentClass) { return createStoreInjector(grabStoresByName(storeNames), componentClass, storeNames.join("-"), false); };
}
}
var storeKey = newSymbol("disposeOnUnmount");
var baseUnmountKey = newSymbol("originalOnUnmount");
function runDisposersOnWillUnmount() {
var this$1 = this;
if (this[baseUnmountKey]) { this[baseUnmountKey](); }
if (!this[storeKey]) {
// when disposeOnUnmount is only set to some instances of a component it will still patch the prototype
return;
}
this[storeKey].forEach(function (propKeyOrFunction) {
var prop = typeof propKeyOrFunction === "string" ? this$1[propKeyOrFunction] : propKeyOrFunction;
if (prop !== undefined && prop !== null) {
if (typeof prop !== "function") {
throw new Error("[mobx-react] disposeOnUnmount only works on functions such as disposers returned by reactions, autorun, etc.");
}
prop();
}
});
this[storeKey] = [];
}
function disposeOnUnmount(target, propertyKeyOrFunction) {
if (Array.isArray(propertyKeyOrFunction)) {
return propertyKeyOrFunction.map(function (fn) { return disposeOnUnmount(target, fn); });
}
var c = Object.getPrototypeOf(target).constructor || Object.getPrototypeOf(target.constructor);
var c2 = Object.getPrototypeOf(target.constructor);
if (!(c === React.Component || c === React.PureComponent || c2 === React.Component || c2 === React.PureComponent)) {
throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");
}
if (typeof propertyKeyOrFunction !== "string" && typeof propertyKeyOrFunction !== "function") {
throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");
} // add property key / function we want run (disposed) to the store
var componentWasAlreadyModified = !!target[storeKey];
var store = target[storeKey] || (target[storeKey] = []);
store.push(propertyKeyOrFunction); // tweak the component class componentWillUnmount if not done already
if (!componentWasAlreadyModified) {
// make sure original definition is invoked
if (target.componentWillUnmount) { target[baseUnmountKey] = target.componentWillUnmount; }
Object.defineProperty(target, "componentWillUnmount", {
get: function get() {
return runDisposersOnWillUnmount;
},
set: function set(fn) {
// this will happen if componentWillUnmount is being assigned after patching the prototype
this[storeKey].push(fn); // assigning a new local value to componentWillUnmount would hide the super implementation...
this[baseUnmountKey] = undefined;
},
configurable: false,
enumerable: false
});
} // return the disposer as is if invoked as a non decorator
if (typeof propertyKeyOrFunction !== "string") {
return propertyKeyOrFunction;
}
}
// Copied from React.PropTypes
function createChainableTypeChecker(validate) {
function checkType(isRequired, props, propName, componentName, location, propFullName) {
var rest = [], len = arguments.length - 6;
while ( len-- > 0 ) rest[ len ] = arguments[ len + 6 ];
return mobx.untracked(function () {
componentName = componentName || "<<anonymous>>";
propFullName = propFullName || propName;
if (props[propName] == null) {
if (isRequired) {
var actual = props[propName] === null ? "null" : "undefined";
return new Error("The " + location + " `" + propFullName + "` is marked as required " + "in `" + componentName + "`, but its value is `" + actual + "`.");
}
return null;
} else {
return validate.apply(void 0, [ props, propName, componentName, location, propFullName ].concat( rest ));
}
});
}
var chainedCheckType = checkType.bind(null, false);
chainedCheckType.isRequired = checkType.bind(null, true);
return chainedCheckType;
} // Copied from React.PropTypes
function isSymbol(propType, propValue) {
// Native Symbol.
if (propType === "symbol") {
return true;
} // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
if (propValue["@@toStringTag"] === "Symbol") {
return true;
} // Fallback for non-spec compliant Symbols which are polyfilled.
if (typeof Symbol === "function" && propValue instanceof Symbol) {
return true;
}
return false;
} // Copied from React.PropTypes
function getPropType(propValue) {
var propType = typeof propValue;
if (Array.isArray(propValue)) {
return "array";
}
if (propValue instanceof RegExp) {
// Old webkits (at least until Android 4.0) return 'function' rather than
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
// passes PropTypes.object.
return "object";
}
if (isSymbol(propType, propValue)) {
return "symbol";
}
return propType;
} // This handles more types than `getPropType`. Only used for error messages.
// Copied from React.PropTypes
function getPreciseType(propValue) {
var propType = getPropType(propValue);
if (propType === "object") {
if (propValue instanceof Date) {
return "date";
} else if (propValue instanceof RegExp) {
return "regexp";
}
}
return propType;
}
function createObservableTypeCheckerCreator(allowNativeType, mobxType) {
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
return mobx.untracked(function () {
if (allowNativeType) {
if (getPropType(props[propName]) === mobxType.toLowerCase()) { return null; }
}
var mobxChecker;
switch (mobxType) {
case "Array":
mobxChecker = mobx.isObservableArray;
break;
case "Object":
mobxChecker = mobx.isObservableObject;
break;
case "Map":
mobxChecker = mobx.isObservableMap;
break;
default:
throw new Error(("Unexpected mobxType: " + mobxType));
}
var propValue = props[propName];
if (!mobxChecker(propValue)) {
var preciseType = getPreciseType(propValue);
var nativeTypeExpectationMessage = allowNativeType ? " or javascript `" + mobxType.toLowerCase() + "`" : "";
return new Error("Invalid prop `" + propFullName + "` of type `" + preciseType + "` supplied to" + " `" + componentName + "`, expected `mobx.Observable" + mobxType + "`" + nativeTypeExpectationMessage + ".");
}
return null;
});
});
}
function createObservableArrayOfTypeChecker(allowNativeType, typeChecker) {
return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
var rest = [], len = arguments.length - 5;
while ( len-- > 0 ) rest[ len ] = arguments[ len + 5 ];
return mobx.untracked(function () {
if (typeof typeChecker !== "function") {
return new Error("Property `" + propFullName + "` of component `" + componentName + "` has " + "invalid PropType notation.");
}
var error = createObservableTypeCheckerCreator(allowNativeType, "Array")(props, propName, componentName);
if (error instanceof Error) { return error; }
var propValue = props[propName];
for (var i = 0; i < propValue.length; i++) {
error = typeChecker.apply(void 0, [ propValue, i, componentName, location, propFullName + "[" + i + "]" ].concat( rest ));
if (error instanceof Error) { return error; }
}
return null;
});
});
}
var observableArray = createObservableTypeCheckerCreator(false, "Array");
var observableArrayOf = createObservableArrayOfTypeChecker.bind(null, false);
var observableMap = createObservableTypeCheckerCreator(false, "Map");
var observableObject = createObservableTypeCheckerCreator(false, "Object");
var arrayOrObservableArray = createObservableTypeCheckerCreator(true, "Array");
var arrayOrObservableArrayOf = createObservableArrayOfTypeChecker.bind(null, true);
var objectOrObservableObject = createObservableTypeCheckerCreator(true, "Object");
var PropTypes = {
observableArray: observableArray,
observableArrayOf: observableArrayOf,
observableMap: observableMap,
observableObject: observableObject,
arrayOrObservableArray: arrayOrObservableArray,
arrayOrObservableArrayOf: arrayOrObservableArrayOf,
objectOrObservableObject: objectOrObservableObject
};
if (!React.Component) { throw new Error("mobx-react requires React to be available"); }
if (!mobx.observable) { throw new Error("mobx-react requires mobx to be available"); }
if (typeof reactDom.unstable_batchedUpdates === "function") { mobx.configure({
reactionScheduler: reactDom.unstable_batchedUpdates
}); }
exports.useObservable = useObservable;
exports.useComputed = useComputed;
exports.useDisposable = useDisposable;
exports.useObserver = useObserver;
exports.Observer = ObserverComponent;
exports.observer = observer$1;
exports.useStaticRendering = useStaticRendering$1;
exports.Provider = Provider;
exports.inject = inject;
exports.disposeOnUnmount = disposeOnUnmount;
exports.PropTypes = PropTypes;
})));
//# sourceMappingURL=mobx-react.umd.js.map

6

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

@@ -23,3 +23,3 @@ "source": "src/index.js",

"build": "yarn bundle && shx cp src/index.d.ts dist/mobx-react.d.ts && shx cp dist/mobx-react.module.js dist/mobx-react.rn.module.js && sed -i 's/\"react-dom\"/\"react-native\"/g' dist/mobx-react.rn.module.js",
"bundle": "microbundle --external mobx,react,react-dom --globals react-dom=ReactDOM,react=React --name mobxReact",
"bundle": "microbundle --external mobx,react,react-dom --globals react-dom=ReactDOM,react=React --name mobxReact --no-compress",
"watch": "jest --watch"

@@ -55,3 +55,3 @@ },

"lodash": "^4.17.4",
"microbundle": "^0.9.0",
"microbundle": "^0.11.0",
"mobx": "^5.0.0",

@@ -58,0 +58,0 @@ "prettier": "^1.7.2",

dist/mobx-react.js.map

Sorry, the diff of this file is not supported yet

dist/mobx-react.module.js.map

Sorry, the diff of this file is not supported yet

dist/mobx-react.umd.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