mobx-react 5.3.6 → 5.4.3

package/custom.d.ts

@@ -1,140 +1,140 @@
-/**
- * Turns a React component or stateless render function into a reactive component.
- */
-import * as React from "react"
-
-export type IReactComponent<P = any> =
-    | React.StatelessComponent<P>
-    | React.ComponentClass<P>
-    | React.ClassicComponentClass<P>
-
-/**
- * Observer
- */
-
-// Deprecated: observer with with stores (as decorator)
-export function observer(stores: string[]): <T extends IReactComponent>(clazz: T) => void
-// Deprecated: observer with with stores
-export function observer<T extends IReactComponent>(stores: string[], clazz: T): T
-export function observer<T extends IReactComponent>(target: T): T
-
-/**
- * Inject
- */
-export type IValueMap = { [key: string]: any }
-export type IStoresToProps<
-    S extends IValueMap = {},
-    P extends IValueMap = {},
-    I extends IValueMap = {},
-    C extends IValueMap = {}
-> = (stores: S, nextProps: P, context: C) => I
-
-export type IWrappedComponent<P> = {
-    wrappedComponent: IReactComponent<P>
-    wrappedInstance: React.ReactInstance | undefined
-}
-
-// Ideally we would want to return React.ComponentClass<Partial<P>>,
-// but TS doesn't allow such things in decorators, like we do in the non-decorator version
-// See also #256
-export function inject(
-    ...stores: string[]
-): <T extends IReactComponent<any>>(
-    target: T
-) => T & (T extends IReactComponent<infer P> ? IWrappedComponent<P> : never)
-export function inject<S, P, I, C>(
-    fn: IStoresToProps<S, P, I, C>
-): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>
-
-// Ideal implementation:
-// export function inject
-// (
-// fn: IStoresToProps
-// ):
-// <P>(target: IReactComponent<P>) => IReactComponent<Partial<P>> & IWrappedComponent<IReactComponent<Partial<P>>>
-//
-// Or even better: (but that would require type inference to work other way around)
-// export function inject<P, I>
-// (
-// fn: IStoresToProps<any, P, I>
-// ):
-// <T extends IReactComponent<P & S>(target: T) => IReactComponent<P> & IWrappedComponent<T>
-
-/**
- * disposeOnUnmount
- */
-type Disposer = () => void
-export function disposeOnUnmount(target: React.Component<any, any>, propertyKey: string): void
-export function disposeOnUnmount<TF extends Disposer | Disposer[]>(
-    target: React.Component<any, any>,
-    fn: TF
-): TF
-
-/**
- * Utilities
- */
-export function onError(cb: (error: Error) => void): () => void
-
-export class Provider extends React.Component<any, {}> {}
-
-export class Observer extends React.Component<
-    {
-        children?: () => React.ReactNode
-        render?: () => React.ReactNode
-    },
-    {}
-> {}
-
-export function useStaticRendering(value: boolean): void
-
-/**
- * Enable dev tool support, makes sure that renderReport emits events.
- */
-export function trackComponents(): void
-
-export const renderReporter: RenderReporter
-
-export interface RenderReporter {
-    on(handler: (data: IRenderEvent) => void): void
-}
-
-export interface IRenderEvent {
-    event: "render" | "destroy"
-    renderTime?: number
-    totalTime?: number
-    component: React.ReactElement<any> // Component instance
-    node: any // DOMNode
-}
-
-/**
- * WeakMap DOMNode -> Component instance
- * @deprecated
- */
-export const componentByNodeRegistery: any
-/**
- * WeakMap DOMNode -> Component instance
- */
-export const componentByNodeRegistry: any
-
-/**
- * @deprecated, use PropTypes instead
- */
-export const propTypes: {
-    observableArray: React.Requireable<any>
-    observableArrayOf: (type: React.Validator<any>) => React.Requireable<any>
-    observableMap: React.Requireable<any>
-    observableObject: React.Requireable<any>
-    arrayOrObservableArray: React.Requireable<any>
-    arrayOrObservableArrayOf: (type: React.Validator<any>) => React.Requireable<any>
-    objectOrObservableObject: React.Requireable<any>
-}
-
-export const PropTypes: {
-    observableArray: React.Requireable<any>
-    observableArrayOf: (type: React.Validator<any>) => React.Requireable<any>
-    observableMap: React.Requireable<any>
-    observableObject: React.Requireable<any>
-    arrayOrObservableArray: React.Requireable<any>
-    arrayOrObservableArrayOf: (type: React.Validator<any>) => React.Requireable<any>
-    objectOrObservableObject: React.Requireable<any>
-}
+/**
+ * Turns a React component or stateless render function into a reactive component.
+ */
+import * as React from "react"
+
+export type IReactComponent<P = any> =
+    | React.StatelessComponent<P>
+    | React.ComponentClass<P>
+    | React.ClassicComponentClass<P>
+
+/**
+ * Observer
+ */
+
+// Deprecated: observer with with stores (as decorator)
+export function observer(stores: string[]): <T extends IReactComponent>(clazz: T) => void
+// Deprecated: observer with with stores
+export function observer<T extends IReactComponent>(stores: string[], clazz: T): T
+export function observer<T extends IReactComponent>(target: T): T
+
+/**
+ * Inject
+ */
+export type IValueMap = { [key: string]: any }
+export type IStoresToProps<
+    S extends IValueMap = {},
+    P extends IValueMap = {},
+    I extends IValueMap = {},
+    C extends IValueMap = {}
+> = (stores: S, nextProps: P, context: C) => I
+
+export type IWrappedComponent<P> = {
+    wrappedComponent: IReactComponent<P>
+    wrappedInstance: React.ReactInstance | undefined
+}
+
+// Ideally we would want to return React.ComponentClass<Partial<P>>,
+// but TS doesn't allow such things in decorators, like we do in the non-decorator version
+// See also #256
+export function inject(
+    ...stores: string[]
+): <T extends IReactComponent<any>>(
+    target: T
+) => T & (T extends IReactComponent<infer P> ? IWrappedComponent<P> : never)
+export function inject<S, P, I, C>(
+    fn: IStoresToProps<S, P, I, C>
+): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>
+
+// Ideal implementation:
+// export function inject
+// (
+// fn: IStoresToProps
+// ):
+// <P>(target: IReactComponent<P>) => IReactComponent<Partial<P>> & IWrappedComponent<IReactComponent<Partial<P>>>
+//
+// Or even better: (but that would require type inference to work other way around)
+// export function inject<P, I>
+// (
+// fn: IStoresToProps<any, P, I>
+// ):
+// <T extends IReactComponent<P & S>(target: T) => IReactComponent<P> & IWrappedComponent<T>
+
+/**
+ * disposeOnUnmount
+ */
+type Disposer = () => void
+export function disposeOnUnmount(target: React.Component<any, any>, propertyKey: string): void
+export function disposeOnUnmount<TF extends Disposer | Disposer[]>(
+    target: React.Component<any, any>,
+    fn: TF
+): TF
+
+/**
+ * Utilities
+ */
+export function onError(cb: (error: Error) => void): () => void
+
+export class Provider extends React.Component<any, {}> {}
+
+export class Observer extends React.Component<
+    {
+        children?: () => React.ReactNode
+        render?: () => React.ReactNode
+    },
+    {}
+> {}
+
+export function useStaticRendering(value: boolean): void
+
+/**
+ * Enable dev tool support, makes sure that renderReport emits events.
+ */
+export function trackComponents(): void
+
+export const renderReporter: RenderReporter
+
+export interface RenderReporter {
+    on(handler: (data: IRenderEvent) => void): void
+}
+
+export interface IRenderEvent {
+    event: "render" | "destroy"
+    renderTime?: number
+    totalTime?: number
+    component: React.ReactElement<any> // Component instance
+    node: any // DOMNode
+}
+
+/**
+ * WeakMap DOMNode -> Component instance
+ * @deprecated
+ */
+export const componentByNodeRegistery: any
+/**
+ * WeakMap DOMNode -> Component instance
+ */
+export const componentByNodeRegistry: any
+
+/**
+ * @deprecated, use PropTypes instead
+ */
+export const propTypes: {
+    observableArray: React.Requireable<any>
+    observableArrayOf: (type: React.Validator<any>) => React.Requireable<any>
+    observableMap: React.Requireable<any>
+    observableObject: React.Requireable<any>
+    arrayOrObservableArray: React.Requireable<any>
+    arrayOrObservableArrayOf: (type: React.Validator<any>) => React.Requireable<any>
+    objectOrObservableObject: React.Requireable<any>
+}
+
+export const PropTypes: {
+    observableArray: React.Requireable<any>
+    observableArrayOf: (type: React.Validator<any>) => React.Requireable<any>
+    observableMap: React.Requireable<any>
+    observableObject: React.Requireable<any>
+    arrayOrObservableArray: React.Requireable<any>
+    arrayOrObservableArrayOf: (type: React.Validator<any>) => React.Requireable<any>
+    objectOrObservableObject: React.Requireable<any>
+}

package/custom.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('mobx')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'mobx'], factory) :
-  (factory((global.mobxReact = {}),global.React,global.mobx));
-}(this, (function (exports,React,mobx) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('mobx'), require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'mobx', 'react'], factory) :
+  (factory((global.mobxReact = {}),global.mobx,global.React));
+}(this, (function (exports,mobx,React) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
 
@@ -116,33 +116,35 @@
 
   var reactIs_production_min = createCommonjsModule(function (module, exports) {
   Object.defineProperty(exports,"__esModule",{value:!0});
-  var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.forward_ref"):60112,n=b?Symbol.for("react.placeholder"):60113;
-  function q(a){if("object"===typeof a&&null!==a){var p=a.$$typeof;switch(p){case c:switch(a=a.type,a){case l:case e:case g:case f:return a;default:switch(a=a&&a.$$typeof,a){case k:case m:case h:return a;default:return p}}case d:return p}}}exports.typeOf=q;exports.AsyncMode=l;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=m;exports.Fragment=e;exports.Profiler=g;exports.Portal=d;exports.StrictMode=f;
-  exports.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===l||a===g||a===f||a===n||"object"===typeof a&&null!==a&&("function"===typeof a.then||a.$$typeof===h||a.$$typeof===k||a.$$typeof===m)};exports.isAsyncMode=function(a){return q(a)===l};exports.isContextConsumer=function(a){return q(a)===k};exports.isContextProvider=function(a){return q(a)===h};exports.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};
-  exports.isForwardRef=function(a){return q(a)===m};exports.isFragment=function(a){return q(a)===e};exports.isProfiler=function(a){return q(a)===g};exports.isPortal=function(a){return q(a)===d};exports.isStrictMode=function(a){return q(a)===f};
+  var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,r=b?Symbol.for("react.memo"):
+  60115,t=b?Symbol.for("react.lazy"):60116;function u(a){if("object"===typeof a&&null!==a){var q=a.$$typeof;switch(q){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case h:return a;default:return q}}case d:return q}}}function v(a){return u(a)===m}exports.typeOf=u;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;
+  exports.Profiler=g;exports.Portal=d;exports.StrictMode=f;exports.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n)};exports.isAsyncMode=function(a){return v(a)||u(a)===l};exports.isConcurrentMode=v;exports.isContextConsumer=function(a){return u(a)===k};exports.isContextProvider=function(a){return u(a)===h};
+  exports.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return u(a)===n};exports.isFragment=function(a){return u(a)===e};exports.isProfiler=function(a){return u(a)===g};exports.isPortal=function(a){return u(a)===d};exports.isStrictMode=function(a){return u(a)===f};
   });
 
   unwrapExports(reactIs_production_min);
   var reactIs_production_min_1 = reactIs_production_min.typeOf;
   var reactIs_production_min_2 = reactIs_production_min.AsyncMode;
-  var reactIs_production_min_3 = reactIs_production_min.ContextConsumer;
-  var reactIs_production_min_4 = reactIs_production_min.ContextProvider;
-  var reactIs_production_min_5 = reactIs_production_min.Element;
-  var reactIs_production_min_6 = reactIs_production_min.ForwardRef;
-  var reactIs_production_min_7 = reactIs_production_min.Fragment;
-  var reactIs_production_min_8 = reactIs_production_min.Profiler;
-  var reactIs_production_min_9 = reactIs_production_min.Portal;
-  var reactIs_production_min_10 = reactIs_production_min.StrictMode;
-  var reactIs_production_min_11 = reactIs_production_min.isValidElementType;
-  var reactIs_production_min_12 = reactIs_production_min.isAsyncMode;
-  var reactIs_production_min_13 = reactIs_production_min.isContextConsumer;
-  var reactIs_production_min_14 = reactIs_production_min.isContextProvider;
-  var reactIs_production_min_15 = reactIs_production_min.isElement;
-  var reactIs_production_min_16 = reactIs_production_min.isForwardRef;
-  var reactIs_production_min_17 = reactIs_production_min.isFragment;
-  var reactIs_production_min_18 = reactIs_production_min.isProfiler;
-  var reactIs_production_min_19 = reactIs_production_min.isPortal;
-  var reactIs_production_min_20 = reactIs_production_min.isStrictMode;
+  var reactIs_production_min_3 = reactIs_production_min.ConcurrentMode;
+  var reactIs_production_min_4 = reactIs_production_min.ContextConsumer;
+  var reactIs_production_min_5 = reactIs_production_min.ContextProvider;
+  var reactIs_production_min_6 = reactIs_production_min.Element;
+  var reactIs_production_min_7 = reactIs_production_min.ForwardRef;
+  var reactIs_production_min_8 = reactIs_production_min.Fragment;
+  var reactIs_production_min_9 = reactIs_production_min.Profiler;
+  var reactIs_production_min_10 = reactIs_production_min.Portal;
+  var reactIs_production_min_11 = reactIs_production_min.StrictMode;
+  var reactIs_production_min_12 = reactIs_production_min.isValidElementType;
+  var reactIs_production_min_13 = reactIs_production_min.isAsyncMode;
+  var reactIs_production_min_14 = reactIs_production_min.isConcurrentMode;
+  var reactIs_production_min_15 = reactIs_production_min.isContextConsumer;
+  var reactIs_production_min_16 = reactIs_production_min.isContextProvider;
+  var reactIs_production_min_17 = reactIs_production_min.isElement;
+  var reactIs_production_min_18 = reactIs_production_min.isForwardRef;
+  var reactIs_production_min_19 = reactIs_production_min.isFragment;
+  var reactIs_production_min_20 = reactIs_production_min.isProfiler;
+  var reactIs_production_min_21 = reactIs_production_min.isPortal;
+  var reactIs_production_min_22 = reactIs_production_min.isStrictMode;
 
   var reactIs = createCommonjsModule(function (module) {
 
@@ -151,22 +153,19 @@
   }
   });
 
-  var _ReactIs$ForwardRef;
-
-  function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
   /**
    * Copyright 2015, Yahoo! Inc.
    * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
    */
 
-
   var REACT_STATICS = {
       childContextTypes: true,
+      contextType: true,
       contextTypes: true,
       defaultProps: true,
       displayName: true,
       getDefaultProps: true,
+      getDerivedStateFromError: true,
       getDerivedStateFromProps: true,
       mixins: true,
       propTypes: true,
@@ -183,7 +182,16 @@
       arity: true
   };
 
-  var TYPE_STATICS = _defineProperty$1({}, reactIs.ForwardRef, (_ReactIs$ForwardRef = {}, _defineProperty$1(_ReactIs$ForwardRef, '$$typeof', true), _defineProperty$1(_ReactIs$ForwardRef, 'render', true), _ReactIs$ForwardRef));
+  var FORWARD_REF_STATICS = {
+      '$$typeof': true,
+      render: true,
+      defaultProps: true,
+      displayName: true,
+      propTypes: true
+  };
+
+  var TYPE_STATICS = {};
+  TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
 
   var defineProperty = Object.defineProperty;
   var getOwnPropertyNames = Object.getOwnPropertyNames;
@@ -567,8 +575,8 @@
       configurable: true,
       enumerable: true
     }
-    /**
-     * Store Injection
+    /**
+     * Store Injection
      */
 
   };
@@ -652,11 +660,11 @@
       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
+  /**
+   * 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
    */
 
 
@@ -694,8 +702,8 @@
 
   var mobxAdminProperty = mobx.$mobx || "$mobx";
   var mobxIsUnmounted = newSymbol("isUnmounted");
-  /**
-   * dev tool support
+  /**
+   * dev tool support
    */
 
   var isDevtoolsEnabled = false;
@@ -705,12 +713,14 @@
   var componentByNodeRegistry = typeof WeakMap !== "undefined" ? new WeakMap() : undefined;
   var renderReporter = new EventEmitter();
   var skipRenderKey = newSymbol("skipRender");
-  var isForcingUpdateKey = newSymbol("isForcingUpdate");
-  /**
-   * Helper to set `prop` to `this` as non-enumerable (hidden prop)
-   * @param target
-   * @param prop
-   * @param value
+  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) {
@@ -750,13 +760,13 @@
   function useStaticRendering(useStaticRendering) {
     isUsingStaticRendering = useStaticRendering;
   }
-  /**
-   * Errors reporter
+  /**
+   * Errors reporter
    */
 
   var errorsReporter = new EventEmitter();
-  /**
-   * Utilities
+  /**
+   * Utilities
    */
 
   function patch$1(target, funcName) {
@@ -831,15 +841,15 @@
 
     var initialName = this.displayName || this.name || this.constructor && (this.constructor.displayName || this.constructor.name) || "<component>";
     var rootNodeID = this._reactInternalInstance && this._reactInternalInstance._rootNodeID || this._reactInternalInstance && this._reactInternalInstance._debugID || this._reactInternalFiber && this._reactInternalFiber._debugID;
-    /**
-     * If props are shallowly modified, react will render anyway,
-     * so atom.reportChanged() should not result in yet another re-render
+    /**
+     * If props are shallowly modified, react will render anyway,
+     * so atom.reportChanged() should not result in yet another re-render
      */
 
     setHiddenProp(this, skipRenderKey, false);
-    /**
-     * forceUpdate will re-assign this.props. We don't want that to cause a loop,
-     * so detect these changes
+    /**
+     * forceUpdate will re-assign this.props. We don't want that to cause a loop,
+     * so detect these changes
      */
 
     setHiddenProp(this, isForcingUpdateKey, false); // wire up reactive render
@@ -857,7 +867,7 @@
         if (_this2[mobxIsUnmounted] !== true) {
           // If we are unmounted at this point, componentWillReact() had a side effect causing the component to unmounted
           // TODO: remove this check? Then react will properly warn about the fact that this should not happen? See #73
-          // However, people also claim this migth happen during unit tests..
+          // However, people also claim this might happen during unit tests..
           var hasError = true;
 
           try {
@@ -876,8 +886,8 @@
     this.render = reactiveRender;
     return reactiveRender.call(this);
   }
-  /**
-   * ReactiveMixin
+  /**
+   * ReactiveMixin
    */
 
 
@@ -960,8 +970,8 @@
       }
     });
   }
-  /**
-   * Observer function / decorator
+  /**
+   * Observer function / decorator
    */
 
 
@@ -996,6 +1006,21 @@
 
     if (componentClass.__proto__ === React.PureComponent) {
       console.warn("Mobx observer: You are using 'observer' on React.PureComponent. These two achieve two opposite goals and should not be used together");
+    } // 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"); // TODO: do we need to hoist statics from baseRender to the forward ref?
+
+      return React.forwardRef(function ObserverForwardRef() {
+        var _arguments = arguments;
+        return React__default.createElement(Observer, null, function () {
+          return _baseRender.apply(undefined, _arguments);
+        });
+      });
     } // Stateless function component:
     // If it is function but doesn't seem to be a react class constructor,
     // wrap it to a react class automatically
@@ -1061,10 +1086,10 @@
     }
   }
 
-  var Observer = observer(function (_ref) {
-    var children = _ref.children,
-        observerInject = _ref.inject,
-        render = _ref.render;
+  var Observer = observer(function (_ref2) {
+    var children = _ref2.children,
+        observerInject = _ref2.inject,
+        render = _ref2.render;
     var component = children || render;
 
     if (typeof component === "undefined") {