mobx-react 9.2.1 → 10.0.0

package/src/observer.tsx

@@ -7,17 +7,18 @@ import { IReactComponent } from "./types/IReactComponent"
 /**
  * Observer function / decorator
  */
-export function observer<T extends IReactComponent>(component: T, context: ClassDecoratorContext): void
+export function observer<T extends IReactComponent>(
+    component: T,
+    context: ClassDecoratorContext
+): void
 export function observer<T extends IReactComponent>(component: T): T
-export function observer<T extends IReactComponent>(component: T, context?: ClassDecoratorContext): T {
+export function observer<T extends IReactComponent>(
+    component: T,
+    context?: ClassDecoratorContext
+): T {
     if (context && context.kind !== "class") {
         throw new Error("The @observer decorator can be used on classes only")
     }
-    if (component["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`"
-        )
-    }
 
     if (
         Object.prototype.isPrototypeOf.call(React.Component, component) ||
@@ -27,6 +28,6 @@ export function observer<T extends IReactComponent>(component: T, context?: Clas
         return makeClassComponentObserver(component as React.ComponentClass<any, any>) as T
     } else {
         // Function component
-        return observerLite(component as React.FunctionComponent<any>) as T
+        return observerLite(component as React.FunctionComponent<any>) as unknown as T
     }
 }

package/src/utils/utils.ts

@@ -28,52 +28,6 @@ function is(x: any, y: any): boolean {
     }
 }
 
-// based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
-const hoistBlackList = {
-    $$typeof: 1,
-    render: 1,
-    compare: 1,
-    type: 1,
-    childContextTypes: 1,
-    contextType: 1,
-    contextTypes: 1,
-    defaultProps: 1,
-    getDefaultProps: 1,
-    getDerivedStateFromError: 1,
-    getDerivedStateFromProps: 1,
-    mixins: 1,
-    displayName: 1,
-    propTypes: 1
-}
-
-export function copyStaticProperties(base: object, target: object): void {
-    const protoProps = Object.getOwnPropertyNames(Object.getPrototypeOf(base))
-    Object.getOwnPropertyNames(base).forEach(key => {
-        if (!hoistBlackList[key] && protoProps.indexOf(key) === -1) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key)!)
-        }
-    })
-}
-
-/**
- * Helper to set `prop` to `this` as non-enumerable (hidden prop)
- * @param target
- * @param prop
- * @param value
- */
-export function setHiddenProp(target: object, prop: any, value: any): void {
-    if (!Object.hasOwnProperty.call(target, prop)) {
-        Object.defineProperty(target, prop, {
-            enumerable: false,
-            configurable: true,
-            writable: true,
-            value
-        })
-    } else {
-        target[prop] = value
-    }
-}
-
 /**
  * Utilities for patching componentWillUnmount, to make sure @disposeOnUnmount works correctly icm with user defined hooks
  * and the handler provided by mobx-react

package/batchingForReactDom.js

@@ -1 +0,0 @@
-require("mobx-react-lite/batchingForReactDom")

package/batchingForReactNative.js

@@ -1 +0,0 @@
-require("mobx-react-lite/batchingForReactNative")

package/batchingOptOut.js

@@ -1 +0,0 @@
-require("mobx-react-lite/batchingOptOut")

package/dist/Provider.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { IValueMap } from "./types/IValueMap";
-export declare const MobXProviderContext: React.Context<IValueMap>;
-export interface ProviderProps extends IValueMap {
-    children: React.ReactNode;
-}
-export declare function Provider(props: ProviderProps): React.JSX.Element;
-export declare namespace Provider {
-    var displayName: string;
-}

package/dist/disposeOnUnmount.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-type Disposer = () => void;
-/**
- * @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
- */
-export declare function disposeOnUnmount(target: React.Component<any, any>, propertyKey: PropertyKey): void;
-/**
- * @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
- */
-export declare function disposeOnUnmount<TF extends Disposer | Array<Disposer>>(target: React.Component<any, any>, fn: TF): TF;
-export {};

package/dist/inject.d.ts

@@ -1,6 +0,0 @@
-import { IReactComponent } from "./types/IReactComponent";
-import { IValueMap } from "./types/IValueMap";
-import { IWrappedComponent } from "./types/IWrappedComponent";
-import { IStoresToProps } from "./types/IStoresToProps";
-export declare function inject(...stores: Array<string>): <T extends IReactComponent<any>>(target: T) => T & (T extends IReactComponent<infer P> ? IWrappedComponent<P> : never);
-export declare function inject<S extends IValueMap = {}, P extends IValueMap = {}, I extends IValueMap = {}, C extends IValueMap = {}>(fn: IStoresToProps<S, P, I, C>): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>;

package/dist/propTypes.d.ts

@@ -1,9 +0,0 @@
-export declare const PropTypes: {
-    observableArray: import("react").Requireable<any>;
-    observableArrayOf: (typeChecker: import("react").Validator<any>) => import("react").Requireable<any>;
-    observableMap: import("react").Requireable<any>;
-    observableObject: import("react").Requireable<any>;
-    arrayOrObservableArray: import("react").Requireable<any>;
-    arrayOrObservableArrayOf: (typeChecker: import("react").Validator<any>) => import("react").Requireable<any>;
-    objectOrObservableObject: import("react").Requireable<any>;
-};

package/dist/types/IStoresToProps.d.ts

@@ -1,2 +0,0 @@
-import { IValueMap } from "./IValueMap";
-export type IStoresToProps<S extends IValueMap = {}, P extends IValueMap = {}, I extends IValueMap = {}, C extends IValueMap = {}> = (stores: S, nextProps: P, context?: C) => I;

package/dist/types/IValueMap.d.ts

@@ -1 +0,0 @@
-export type IValueMap = Record<string, any>;

package/dist/types/IWrappedComponent.d.ts

@@ -1,4 +0,0 @@
-import { IReactComponent } from "./IReactComponent";
-export type IWrappedComponent<P> = {
-    wrappedComponent: IReactComponent<P>;
-};

package/src/Provider.tsx

@@ -1,29 +0,0 @@
-import React from "react"
-import { shallowEqual } from "./utils/utils"
-import { IValueMap } from "./types/IValueMap"
-
-export const MobXProviderContext = React.createContext<IValueMap>({})
-
-export interface ProviderProps extends IValueMap {
-    children: React.ReactNode
-}
-
-export function Provider(props: ProviderProps) {
-    const { children, ...stores } = props
-    const parentValue = React.useContext(MobXProviderContext)
-    const mutableProviderRef = React.useRef({ ...parentValue, ...stores })
-    const value = mutableProviderRef.current
-
-    if (__DEV__) {
-        const newValue = { ...value, ...stores } // spread in previous state for the context based stores
-        if (!shallowEqual(value, newValue)) {
-            throw new Error(
-                "MobX Provider: The set of provided stores has changed. See: https://github.com/mobxjs/mobx-react#the-set-of-provided-stores-has-changed-error."
-            )
-        }
-    }
-
-    return <MobXProviderContext.Provider value={value}>{children}</MobXProviderContext.Provider>
-}
-
-Provider.displayName = "MobXProvider"

package/src/disposeOnUnmount.ts

@@ -1,111 +0,0 @@
-import React from "react"
-import { patch } from "./utils/utils"
-
-const reactMajorVersion = Number.parseInt(React.version.split(".")[0])
-let warnedAboutDisposeOnUnmountDeprecated = false
-
-type Disposer = () => void
-
-const protoStoreKey = Symbol("disposeOnUnmountProto")
-const instStoreKey = Symbol("disposeOnUnmountInst")
-
-function runDisposersOnWillUnmount() {
-    ;[...(this[protoStoreKey] || []), ...(this[instStoreKey] || [])].forEach(propKeyOrFunction => {
-        const prop =
-            typeof propKeyOrFunction === "string" ? this[propKeyOrFunction] : propKeyOrFunction
-        if (prop !== undefined && prop !== null) {
-            if (Array.isArray(prop)) prop.map(f => f())
-            else prop()
-        }
-    })
-}
-
-/**
- * @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
- */
-export function disposeOnUnmount(target: React.Component<any, any>, propertyKey: PropertyKey): void
-
-/**
- * @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
- */
-export function disposeOnUnmount<TF extends Disposer | Array<Disposer>>(
-    target: React.Component<any, any>,
-    fn: TF
-): TF
-
-/**
- * @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
- */
-export function disposeOnUnmount(
-    target: React.Component<any, any>,
-    propertyKeyOrFunction: PropertyKey | Disposer | Array<Disposer>
-): PropertyKey | Disposer | Array<Disposer> | void {
-    if (Array.isArray(propertyKeyOrFunction)) {
-        return propertyKeyOrFunction.map(fn => disposeOnUnmount(target, fn))
-    }
-
-    if (!warnedAboutDisposeOnUnmountDeprecated) {
-        if (reactMajorVersion >= 18) {
-            console.error(
-                "[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."
-            )
-        } else {
-            console.warn(
-                "[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."
-            )
-        }
-        warnedAboutDisposeOnUnmountDeprecated = true
-    }
-
-    const c = Object.getPrototypeOf(target).constructor
-    const c2 = Object.getPrototypeOf(target.constructor)
-    // Special case for react-hot-loader
-    const c3 = Object.getPrototypeOf(Object.getPrototypeOf(target))
-    if (
-        !(
-            c === React.Component ||
-            c === React.PureComponent ||
-            c2 === React.Component ||
-            c2 === React.PureComponent ||
-            c3 === React.Component ||
-            c3 === 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" &&
-        !Array.isArray(propertyKeyOrFunction)
-    ) {
-        throw new Error(
-            "[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function."
-        )
-    }
-
-    // decorator's target is the prototype, so it doesn't have any instance properties like props
-    const isDecorator = typeof propertyKeyOrFunction === "string"
-
-    // add property key / function we want run (disposed) to the store
-    const componentWasAlreadyModified = !!target[protoStoreKey] || !!target[instStoreKey]
-    const store = isDecorator
-        ? // decorators are added to the prototype store
-          target[protoStoreKey] || (target[protoStoreKey] = [])
-        : // functions are added to the instance store
-          target[instStoreKey] || (target[instStoreKey] = [])
-
-    store.push(propertyKeyOrFunction)
-
-    // tweak the component class componentWillUnmount if not done already
-    if (!componentWasAlreadyModified) {
-        patch(target, "componentWillUnmount", runDisposersOnWillUnmount)
-    }
-
-    // return the disposer as is if invoked as a non decorator
-    if (typeof propertyKeyOrFunction !== "string") {
-        return propertyKeyOrFunction
-    }
-}

package/src/inject.ts

@@ -1,107 +0,0 @@
-import React from "react"
-import { observer } from "./observer"
-import { copyStaticProperties } from "./utils/utils"
-import { MobXProviderContext } from "./Provider"
-import { IReactComponent } from "./types/IReactComponent"
-import { IValueMap } from "./types/IValueMap"
-import { IWrappedComponent } from "./types/IWrappedComponent"
-import { IStoresToProps } from "./types/IStoresToProps"
-
-/**
- * Store Injection
- */
-function createStoreInjector(
-    grabStoresFn: IStoresToProps,
-    component: IReactComponent<any>,
-    injectNames: string,
-    makeReactive: boolean
-): IReactComponent<any> {
-    // Support forward refs
-    let Injector: IReactComponent<any> = React.forwardRef((props, ref) => {
-        const newProps = { ...props }
-        const context = React.useContext(MobXProviderContext)
-        Object.assign(newProps, grabStoresFn(context || {}, newProps) || {})
-
-        if (ref) {
-            newProps.ref = ref
-        }
-
-        return React.createElement(component, newProps)
-    })
-
-    if (makeReactive) Injector = observer(Injector)
-    Injector["isMobxInjector"] = true // assigned late to suppress observer warning
-
-    // Static fields from component should be visible on the generated Injector
-    copyStaticProperties(component, Injector)
-    Injector["wrappedComponent"] = component
-    Injector.displayName = getInjectName(component, injectNames)
-    return Injector
-}
-
-function getInjectName(component: IReactComponent<any>, injectNames: string): string {
-    let displayName
-    const 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: Array<string>
-): (
-    baseStores: IValueMap,
-    nextProps: React.ClassAttributes<any>
-) => React.PropsWithRef<any> | undefined {
-    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
-    }
-}
-
-export function inject(
-    ...stores: Array<string>
-): <T extends IReactComponent<any>>(
-    target: T
-) => T & (T extends IReactComponent<infer P> ? IWrappedComponent<P> : never)
-export function inject<S extends IValueMap = {}, P extends IValueMap = {}, I extends IValueMap = {}, C extends IValueMap = {}>(
-    fn: IStoresToProps<S, P, I, C>
-): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>
-
-/**
- * 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
- */
-export function inject(/* fn(stores, nextProps) or ...storeNames */ ...storeNames: Array<any>) {
-    if (typeof arguments[0] === "function") {
-        let grabStoresFn = arguments[0]
-        return (componentClass: React.ComponentClass<any, any>) =>
-            createStoreInjector(grabStoresFn, componentClass, grabStoresFn.name, true)
-    } else {
-        return (componentClass: React.ComponentClass<any, any>) =>
-            createStoreInjector(
-                grabStoresByName(storeNames),
-                componentClass,
-                storeNames.join("-"),
-                false
-            )
-    }
-}

package/src/propTypes.ts

@@ -1,210 +0,0 @@
-import { isObservableArray, isObservableObject, isObservableMap, untracked } from "mobx"
-
-// Copied from React.PropTypes
-function createChainableTypeChecker(validator: React.Validator<any>): React.Requireable<any> {
-    function checkType(
-        isRequired: boolean,
-        props: any,
-        propName: string,
-        componentName: string,
-        location: string,
-        propFullName: string,
-        ...rest: any[]
-    ) {
-        return untracked(() => {
-            componentName = componentName || "<<anonymous>>"
-            propFullName = propFullName || propName
-            if (props[propName] == null) {
-                if (isRequired) {
-                    const 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 {
-                // @ts-ignore rest arg is necessary for some React internals - fails tests otherwise
-                return validator(props, propName, componentName, location, propFullName, ...rest)
-            }
-        })
-    }
-
-    const chainedCheckType: any = checkType.bind(null, false)
-    // Add isRequired to satisfy Requirable
-    chainedCheckType.isRequired = checkType.bind(null, true)
-    return chainedCheckType
-}
-
-// Copied from React.PropTypes
-function isSymbol(propType: any, propValue: any): boolean {
-    // 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: any): string {
-    const 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: any): string {
-    const propType = getPropType(propValue)
-    if (propType === "object") {
-        if (propValue instanceof Date) {
-            return "date"
-        } else if (propValue instanceof RegExp) {
-            return "regexp"
-        }
-    }
-    return propType
-}
-
-function createObservableTypeCheckerCreator(
-    allowNativeType: any,
-    mobxType: any
-): React.Requireable<any> {
-    return createChainableTypeChecker((props, propName, componentName, location, propFullName) => {
-        return untracked(() => {
-            if (allowNativeType) {
-                if (getPropType(props[propName]) === mobxType.toLowerCase()) return null
-            }
-            let 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}`)
-            }
-            const propValue = props[propName]
-            if (!mobxChecker(propValue)) {
-                const preciseType = getPreciseType(propValue)
-                const 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: boolean,
-    typeChecker: React.Validator<any>
-) {
-    return createChainableTypeChecker(
-        (props, propName, componentName, location, propFullName, ...rest) => {
-            return untracked(() => {
-                if (typeof typeChecker !== "function") {
-                    return new Error(
-                        "Property `" +
-                            propFullName +
-                            "` of component `" +
-                            componentName +
-                            "` has " +
-                            "invalid PropType notation."
-                    )
-                } else {
-                    let error = createObservableTypeCheckerCreator(allowNativeType, "Array")(
-                        props,
-                        propName,
-                        componentName,
-                        location,
-                        propFullName
-                    )
-
-                    if (error instanceof Error) return error
-                    const propValue = props[propName]
-                    for (let i = 0; i < propValue.length; i++) {
-                        error = (typeChecker as React.Validator<any>)(
-                            propValue,
-                            i as any,
-                            componentName,
-                            location,
-                            propFullName + "[" + i + "]",
-                            ...rest
-                        )
-                        if (error instanceof Error) return error
-                    }
-
-                    return null
-                }
-            })
-        }
-    )
-}
-
-const observableArray = createObservableTypeCheckerCreator(false, "Array")
-const observableArrayOf = createObservableArrayOfTypeChecker.bind(null, false)
-const observableMap = createObservableTypeCheckerCreator(false, "Map")
-const observableObject = createObservableTypeCheckerCreator(false, "Object")
-const arrayOrObservableArray = createObservableTypeCheckerCreator(true, "Array")
-const arrayOrObservableArrayOf = createObservableArrayOfTypeChecker.bind(null, true)
-const objectOrObservableObject = createObservableTypeCheckerCreator(true, "Object")
-
-export const PropTypes = {
-    observableArray,
-    observableArrayOf,
-    observableMap,
-    observableObject,
-    arrayOrObservableArray,
-    arrayOrObservableArrayOf,
-    objectOrObservableObject
-}

package/src/types/IStoresToProps.ts

@@ -1,7 +0,0 @@
-import { IValueMap } from "./IValueMap"
-export type IStoresToProps<
-    S extends IValueMap = {},
-    P extends IValueMap = {},
-    I extends IValueMap = {},
-    C extends IValueMap = {}
-> = (stores: S, nextProps: P, context?: C) => I

package/src/types/IValueMap.ts

@@ -1 +0,0 @@
-export type IValueMap = Record<string, any>

package/src/types/IWrappedComponent.ts

@@ -1,4 +0,0 @@
-import { IReactComponent } from "./IReactComponent"
-export type IWrappedComponent<P> = {
-    wrappedComponent: IReactComponent<P>
-}