mobx 6.16.0 → 7.0.0

package/src/errors.ts

@@ -1,4 +1,4 @@
-const niceErrors = {
+export const niceErrors = {
     0: `Invalid value for configuration 'enforceActions', expected 'never', 'always' or 'observed'`,
     1(annotationType, key: PropertyKey) {
         return `Cannot apply '${annotationType}' to '${key.toString()}': Field not found.`
@@ -26,10 +26,6 @@ const niceErrors = {
     14: "Intercept handlers should return nothing or a change object",
     15: `Observable arrays cannot be frozen. If you're passing observables to 3rd party component/function that calls Object.freeze, pass copy instead: toJS(observable)`,
     16: `Modification exception: the internal structure of an observable array was changed.`,
-    17(index, length) {
-        return `[mobx.array] Index out of bounds, ${index} is larger than ${length}`
-    },
-    18: "mobx.map requires Map polyfill for the current browser. Check babel-polyfill or core-js/es6/map.js",
     19(other) {
         return "Cannot initialize from classes that inherit from Map: " + other.constructor.name
     },
@@ -39,7 +35,6 @@ const niceErrors = {
     21(dataStructure) {
         return `Cannot convert to map from '${dataStructure}'`
     },
-    22: "mobx.set requires Set polyfill for the current browser. Check babel-polyfill or core-js/es6/set.js",
     23: "It is not possible to get index atoms from arrays",
     24(thing) {
         return "Cannot obtain administration from " + thing
@@ -72,7 +67,25 @@ const niceErrors = {
         return `[mobx] \`observableArray.${method}()\` mutates the array in-place, which is not allowed inside a derivation. Use \`array.slice().${method}()\` instead`
     },
     38: "'ownKeys()' can only be used on observable objects",
-    39: "'defineProperty()' can only be used on observable objects"
+    39: "'defineProperty()' can only be used on observable objects",
+    40(length) {
+        return "Out of range: " + length
+    },
+    41(other) {
+        return "Cannot initialize set from " + other
+    },
+    42(key) {
+        return `Invalid index: '${key}'`
+    },
+    43(annotationType, name, kind) {
+        return (
+            `Cannot apply '${annotationType}' to '${name}' (kind: ${kind}):` +
+            `\n'${annotationType}' can only be used on properties with a function value.`
+        )
+    },
+    44(annotationType) {
+        return `'${annotationType}' can only be used with 'makeObservable'`
+    }
 } as const
 
 const errors: typeof niceErrors = __DEV__ ? niceErrors : ({} as any)
@@ -84,10 +97,8 @@ export function die(error: string | keyof typeof errors, ...args: any[]): never
         throw new Error(`[MobX] ${e}`)
     }
     throw new Error(
-        typeof error === "number"
-            ? `[MobX] minified error nr: ${error}${
-                  args.length ? " " + args.map(String).join(",") : ""
-              }. Find the full error at: https://github.com/mobxjs/mobx/blob/main/packages/mobx/src/errors.ts`
-            : `[MobX] ${error}`
+        `[MobX] minified error nr: ${error}${
+            args.length ? " " + args.map(String).join(",") : ""
+        }. See mobx.js.org/errors`
     )
 }

package/src/internal.ts

@@ -5,8 +5,7 @@ it will cause undefined errors (for example because super classes or local varia
 With this file that will still happen,
 but at least in this file we can magically reorder the imports with trial and error until the build succeeds again.
 */
-export * from "./utils/global"
-export * from "./errors"
+export { die } from "./errors"
 export * from "./utils/utils"
 export * from "./api/decorators"
 export * from "./core/atom"
@@ -43,7 +42,6 @@ export * from "./api/isobservable"
 export * from "./api/object-api"
 export * from "./api/observe"
 export * from "./api/tojs"
-export * from "./api/trace"
 export * from "./api/transaction"
 export * from "./api/when"
 export * from "./types/dynamicobject"
@@ -54,7 +52,6 @@ export * from "./types/observablearray"
 export * from "./types/observablemap"
 export * from "./types/observableset"
 export * from "./types/observableobject"
-export * from "./types/legacyobservablearray"
 export * from "./types/type-utils"
 export * from "./utils/eq"
 export * from "./utils/iterable"

package/src/mobx.ts

@@ -16,13 +16,14 @@
  *
  */
 import { die } from "./errors"
-import { getGlobal } from "./utils/global"
-;["Symbol", "Map", "Set"].forEach(m => {
-    let g = getGlobal()
-    if (typeof g[m] === "undefined") {
-        die(`MobX requires global '${m}' to be available or polyfilled`)
-    }
-})
+if (__DEV__) {
+    const g = globalThis as any
+    ;["Symbol", "Map", "Set", "Proxy"].forEach(m => {
+        if (typeof g[m] === "undefined") {
+            die(`MobX requires global '${m}' to be available or polyfilled`)
+        }
+    })
+}
 
 import { spy, getDebugName, $mobx } from "./internal"
 
@@ -38,7 +39,10 @@ export {
     spy,
     IComputedValue,
     IEqualsComparer,
-    comparer,
+    compareDefault,
+    compareIdentity,
+    compareStructural,
+    compareShallow,
     IEnhancer,
     IInterceptable,
     IInterceptor,
@@ -72,9 +76,14 @@ export {
     IObservableSetInitialValues,
     transaction,
     observable,
+    observableRef,
+    observableShallow,
+    observableDeep,
+    observableStruct,
     IObservableFactory,
     CreateObservableOptions,
     computed,
+    computedStruct,
     IComputedFactory,
     isObservable,
     isObservableProp,
@@ -90,6 +99,7 @@ export {
     when,
     IWhenOptions,
     action,
+    actionBound,
     isAction,
     runInAction,
     IActionFactory,
@@ -106,13 +116,13 @@ export {
     onBecomeObserved,
     onBecomeUnobserved,
     flow,
+    flowBound,
     isFlow,
     flowResult,
     CancellablePromise,
     FlowCancellationError,
     isFlowCancellationError,
     toJS,
-    trace,
     IObserverTree,
     IDependencyTree,
     getDependencyTree,
@@ -138,6 +148,7 @@ export {
     makeObservable,
     makeAutoObservable,
     autoAction as _autoAction,
+    autoActionBound as _autoActionBound,
     AnnotationsMap,
     AnnotationMapEntry,
     override
@@ -145,7 +156,7 @@ export {
 
 // Devtools support
 declare const __MOBX_DEVTOOLS_GLOBAL_HOOK__: { injectMobx: (any) => void }
-if (typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__ === "object") {
+if (__DEV__ && typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__ === "object") {
     // See: https://github.com/andykog/mobx-devtools/
     __MOBX_DEVTOOLS_GLOBAL_HOOK__.injectMobx({
         spy,

package/src/types/actionannotation.ts

@@ -16,8 +16,7 @@ export function createActionAnnotation(name: string, options?: object): Annotati
         annotationType_: name,
         options_: options,
         make_,
-        extend_,
-        decorate_20223_
+        extend_
     }
 }
 
@@ -62,12 +61,12 @@ function extend_(
     return adm.defineProperty_(key, actionDescriptor, proxyTrap)
 }
 
-function decorate_20223_(this: Annotation, mthd, context: DecoratorContext) {
+export function decorateAction20223_(annotation: Annotation, mthd, context: DecoratorContext) {
     if (__DEV__) {
         assert20223DecoratorType(context, ["method", "field"])
     }
     const { kind, name, addInitializer } = context
-    const ann = this
+    const ann = annotation
 
     const _createAction = m =>
         createAction(ann.options_?.name ?? name!.toString(), m, ann.options_?.autoAction ?? false)
@@ -91,7 +90,7 @@ function decorate_20223_(this: Annotation, mthd, context: DecoratorContext) {
             mthd = _createAction(mthd)
         }
 
-        if (this.options_?.bound) {
+        if (ann.options_?.bound) {
             addInitializer(function () {
                 const self = this as any
                 const bound = self[name].bind(self)
@@ -103,10 +102,7 @@ function decorate_20223_(this: Annotation, mthd, context: DecoratorContext) {
         return mthd
     }
 
-    die(
-        `Cannot apply '${ann.annotationType_}' to '${String(name)}' (kind: ${kind}):` +
-            `\n'${ann.annotationType_}' can only be used on properties with a function value.`
-    )
+    die(43, ann.annotationType_, String(name), kind)
 }
 
 function assertActionDescriptor(

package/src/types/autoannotation.ts

@@ -1,16 +1,18 @@
 import {
     ObservableObjectAdministration,
     observable,
+    observableRef,
     Annotation,
     defineProperty,
     createAction,
     globalState,
     flow,
+    flowBound,
     computed,
     autoAction,
+    autoActionBound,
     isGenerator,
     MakeResult,
-    die,
     isAction
 } from "../internal"
 
@@ -23,8 +25,7 @@ export function createAutoAnnotation(options?: object): Annotation {
         annotationType_: AUTO,
         options_: options,
         make_,
-        extend_,
-        decorate_20223_
+        extend_
     }
 }
 
@@ -63,16 +64,16 @@ function make_(
     // function on proto -> autoAction/flow
     if (source !== adm.target_ && typeof descriptor.value === "function") {
         if (isGenerator(descriptor.value)) {
-            const flowAnnotation = this.options_?.autoBind ? flow.bound : flow
+            const flowAnnotation = this.options_?.autoBind ? flowBound : flow
             return flowAnnotation.make_(adm, key, descriptor, source)
         }
-        const actionAnnotation = this.options_?.autoBind ? autoAction.bound : autoAction
+        const actionAnnotation = this.options_?.autoBind ? autoActionBound : autoAction
         return actionAnnotation.make_(adm, key, descriptor, source)
     }
     // other -> observable
     // Copy props from proto as well, see test:
     // "decorate should work with Object.create"
-    let observableAnnotation = this.options_?.deep === false ? observable.ref : observable
+    let observableAnnotation = this.options_?.deep === false ? observableRef : observable
     // if function respect autoBind option
     if (typeof descriptor.value === "function" && this.options_?.autoBind) {
         descriptor.value = descriptor.value.bind(adm.proxy_ ?? adm.target_)
@@ -107,10 +108,6 @@ function extend_(
     if (typeof descriptor.value === "function" && this.options_?.autoBind) {
         descriptor.value = descriptor.value.bind(adm.proxy_ ?? adm.target_)
     }
-    let observableAnnotation = this.options_?.deep === false ? observable.ref : observable
+    let observableAnnotation = this.options_?.deep === false ? observableRef : observable
     return observableAnnotation.extend_(adm, key, descriptor, proxyTrap)
 }
-
-function decorate_20223_(this: Annotation, desc, context: ClassGetterDecoratorContext) {
-    die(`'${this.annotationType_}' cannot be used as a decorator`)
-}

package/src/types/computedannotation.ts

@@ -6,7 +6,8 @@ import {
     assert20223DecoratorType,
     $mobx,
     asObservableObject,
-    ComputedValue
+    ComputedValue,
+    assign
 } from "../internal"
 
 export function createComputedAnnotation(name: string, options?: object): Annotation {
@@ -14,8 +15,7 @@ export function createComputedAnnotation(name: string, options?: object): Annota
         annotationType_: name,
         options_: options,
         make_,
-        extend_,
-        decorate_20223_
+        extend_
     }
 }
 
@@ -38,43 +38,62 @@ function extend_(
     assertComputedDescriptor(adm, this, key, descriptor)
     return adm.defineComputedProperty_(
         key,
-        {
-            ...this.options_,
+        assign({}, this.options_, {
             get: descriptor.get,
             set: descriptor.set
-        },
+        }),
         proxyTrap
     )
 }
 
-function decorate_20223_(this: Annotation, get, context: ClassGetterDecoratorContext) {
+export function decorateComputed20223_(
+    annotation: Annotation,
+    get,
+    context: ClassGetterDecoratorContext
+) {
     if (__DEV__) {
         assert20223DecoratorType(context, ["getter"])
     }
-    const ann = this
+    const ann = annotation
     const { name: key, addInitializer } = context
+    let computedValues: WeakMap<object, ComputedValue<any>> | undefined
 
     // Defer ComputedValue creation until first access — avoids allocating
     // ComputedValues for getters that are never read on a given instance.
     // The factory is materialised by ObservableObjectAdministration on demand.
+    function createComputedValue(target: object, adm: ObservableObjectAdministration) {
+        const options = assign({}, ann.options_, {
+            get,
+            context: target
+        })
+        options.name ||= __DEV__
+            ? `${adm.name_}.${key.toString()}`
+            : `ObservableObject.${key.toString()}`
+        return new ComputedValue(options)
+    }
+
     addInitializer(function () {
         const adm: ObservableObjectAdministration = asObservableObject(this)[$mobx]
-        const target = this
-        ;(adm.lazyComputedKeys_ ??= new Map()).set(key, () => {
-            const options = {
-                ...ann.options_,
-                get,
-                context: target
-            }
-            options.name ||= __DEV__
-                ? `${adm.name_}.${key.toString()}`
-                : `ObservableObject.${key.toString()}`
-            return new ComputedValue(options)
-        })
+        const target = this as object
+        const observable = adm.values_.get(key)
+        if (observable instanceof ComputedValue && observable.derivation !== get) {
+            adm.values_.delete(key)
+        }
+        ;(adm.lazyComputedKeys_ ??= new Map()).set(key, () => createComputedValue(target, adm))
     })
 
     return function () {
-        return this[$mobx].getObservablePropValue_(key)
+        const adm: ObservableObjectAdministration = this[$mobx]
+        const observable = adm.values_.get(key)
+        if (observable instanceof ComputedValue && observable.derivation !== get) {
+            let computed = computedValues?.get(this)
+            if (!computed) {
+                computed = createComputedValue(this, adm)
+                ;(computedValues ??= new WeakMap()).set(this, computed)
+            }
+            return computed.get()
+        }
+        return adm.getObservablePropValue_(key)
     }
 }
 

package/src/types/decorator_fills.ts

@@ -25,6 +25,10 @@ export type ClassFieldDecorator<This = any, Value extends (...p: any[]) => any =
     context: ClassFieldDecoratorContext<This, Value>
 ) => Value | void
 
+export type ClassMethodAndFieldDecorator = ClassMethodDecorator & ClassFieldDecorator
+
+export type ClassAccessorAndFieldDecorator = ClassAccessorDecorator & ClassFieldDecorator
+
 export type Decorator =
     | ClassAccessorDecorator
     | ClassGetterDecorator

package/src/types/dynamicobject.ts

@@ -2,11 +2,8 @@ import {
     $mobx,
     IIsObservableObject,
     ObservableObjectAdministration,
-    warnAboutProxyRequirement,
-    assertProxies,
     die,
     isStringish,
-    globalState,
     CreateObservableOptions,
     asObservableObject
 } from "../internal"
@@ -19,11 +16,6 @@ function getAdm(target): ObservableObjectAdministration {
 // and skip either the internal values map, or the base object with its property descriptors!
 const objectProxyTraps: ProxyHandler<any> = {
     has(target: IIsObservableObject, name: PropertyKey): boolean {
-        if (__DEV__ && globalState.trackingDerivation) {
-            warnAboutProxyRequirement(
-                "detect new properties using the 'in' operator. Use 'has' from 'mobx' instead."
-            )
-        }
         return getAdm(target).has_(name)
     },
     get(target: IIsObservableObject, name: PropertyKey): any {
@@ -33,20 +25,10 @@ const objectProxyTraps: ProxyHandler<any> = {
         if (!isStringish(name)) {
             return false
         }
-        if (__DEV__ && !getAdm(target).values_.has(name)) {
-            warnAboutProxyRequirement(
-                "add a new observable property through direct assignment. Use 'set' from 'mobx' instead."
-            )
-        }
         // null (intercepted) -> true (success)
         return getAdm(target).set_(name, value, true) ?? true
     },
     deleteProperty(target: IIsObservableObject, name: PropertyKey): boolean {
-        if (__DEV__) {
-            warnAboutProxyRequirement(
-                "delete properties from an observable object. Use 'remove' from 'mobx' instead."
-            )
-        }
         if (!isStringish(name)) {
             return false
         }
@@ -58,20 +40,10 @@ const objectProxyTraps: ProxyHandler<any> = {
         name: PropertyKey,
         descriptor: PropertyDescriptor
     ): boolean {
-        if (__DEV__) {
-            warnAboutProxyRequirement(
-                "define property on an observable object. Use 'defineProperty' from 'mobx' instead."
-            )
-        }
         // null (intercepted) -> true (success)
         return getAdm(target).defineProperty_(name, descriptor) ?? true
     },
     ownKeys(target: IIsObservableObject): ArrayLike<string | symbol> {
-        if (__DEV__ && globalState.trackingDerivation) {
-            warnAboutProxyRequirement(
-                "iterate keys to detect added / removed properties. Use 'keys' from 'mobx' instead."
-            )
-        }
         return getAdm(target).ownKeys_()
     },
     preventExtensions(target) {
@@ -83,7 +55,6 @@ export function asDynamicObservableObject(
     target: any,
     options?: CreateObservableOptions
 ): IIsObservableObject {
-    assertProxies()
     target = asObservableObject(target, options)
     return (target[$mobx].proxy_ ??= new Proxy(target, objectProxyTraps))
 }

package/src/types/flowannotation.ts

@@ -17,8 +17,7 @@ export function createFlowAnnotation(name: string, options?: object): Annotation
         annotationType_: name,
         options_: options,
         make_,
-        extend_,
-        decorate_20223_
+        extend_
     }
 }
 
@@ -63,7 +62,11 @@ function extend_(
     return adm.defineProperty_(key, flowDescriptor, proxyTrap)
 }
 
-function decorate_20223_(this: Annotation, mthd, context: ClassMethodDecoratorContext) {
+export function decorateFlow20223_(
+    annotation: Annotation,
+    mthd,
+    context: ClassMethodDecoratorContext
+) {
     if (__DEV__) {
         assert20223DecoratorType(context, ["method"])
     }
@@ -73,7 +76,7 @@ function decorate_20223_(this: Annotation, mthd, context: ClassMethodDecoratorCo
         mthd = flow(mthd)
     }
 
-    if (this.options_?.bound) {
+    if (annotation.options_?.bound) {
         addInitializer(function () {
             const self = this as any
             const bound = self[name].bind(self)

package/src/types/observableannotation.ts

@@ -15,8 +15,7 @@ export function createObservableAnnotation(name: string, options?: object): Anno
         annotationType_: name,
         options_: options,
         make_,
-        extend_,
-        decorate_20223_
+        extend_
     }
 }
 
@@ -40,13 +39,13 @@ function extend_(
     return adm.defineObservableProperty_(
         key,
         descriptor.value,
-        this.options_?.enhancer ?? deepEnhancer,
+        this.options_?.enhancer_ ?? deepEnhancer,
         proxyTrap
     )
 }
 
-function decorate_20223_(
-    this: Annotation,
+export function decorateObservable20223_(
+    annotation: Annotation,
     desc,
     context: ClassAccessorDecoratorContext | ClassFieldDecoratorContext
 ) {
@@ -61,7 +60,7 @@ function decorate_20223_(
         assert20223DecoratorType(context, ["accessor"])
     }
 
-    const ann = this
+    const ann = annotation
     const { kind, name } = context
 
     if (kind !== "accessor") {
@@ -78,7 +77,7 @@ function decorate_20223_(
             () =>
                 new ObservableValue(
                     value,
-                    ann.options_?.enhancer ?? deepEnhancer,
+                    ann.options_?.enhancer_ ?? deepEnhancer,
                     __DEV__
                         ? `${adm.name_}.${name.toString()}`
                         : `ObservableObject.${name.toString()}`,