mobx 6.2.0 → 6.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobx",
-    "version": "6.2.0",
+    "version": "6.3.3",
     "description": "Simple, scalable state management.",
     "source": "src/mobx.ts",
     "main": "dist/index.js",

package/src/api/autorun.ts

@@ -86,14 +86,14 @@ export function autorun(
     return reaction.getDisposer_()
 }
 
-export type IReactionOptions = IAutorunOptions & {
+export type IReactionOptions<T> = IAutorunOptions & {
     fireImmediately?: boolean
-    equals?: IEqualsComparer<any>
+    equals?: IEqualsComparer<T>
 }
 
 const run = (f: Lambda) => f()
 
-function createSchedulerFromOptions(opts: IReactionOptions) {
+function createSchedulerFromOptions(opts: IAutorunOptions) {
     return opts.scheduler
         ? opts.scheduler
         : opts.delay
@@ -104,7 +104,7 @@ function createSchedulerFromOptions(opts: IReactionOptions) {
 export function reaction<T>(
     expression: (r: IReactionPublic) => T,
     effect: (arg: T, prev: T, r: IReactionPublic) => void,
-    opts: IReactionOptions = EMPTY_OBJECT
+    opts: IReactionOptions<T> = EMPTY_OBJECT
 ): IReactionDisposer {
     if (__DEV__) {
         if (!isFunction(expression) || !isFunction(effect))
@@ -124,7 +124,7 @@ export function reaction<T>(
     let value: T
     let oldValue: T = undefined as any // only an issue with fireImmediately
 
-    const equals = (opts as any).compareStructural
+    const equals: IEqualsComparer<T> = (opts as any).compareStructural
         ? comparer.structural
         : opts.equals || comparer.default
 

package/src/api/flow.ts

@@ -6,7 +6,8 @@ import {
     Annotation,
     isStringish,
     storeAnnotation,
-    createFlowAnnotation
+    createFlowAnnotation,
+    createDecoratorAnnotation
 } from "../internal"
 
 export const FLOW = "flow"
@@ -28,9 +29,11 @@ interface Flow extends Annotation, PropertyDecorator {
     <R, Args extends any[]>(
         generator: (...args: Args) => Generator<any, R, any> | AsyncGenerator<any, R, any>
     ): (...args: Args) => CancellablePromise<R>
+    bound: Annotation & PropertyDecorator
 }
 
 const flowAnnotation = createFlowAnnotation("flow")
+const flowBoundAnnotation = createFlowAnnotation("flow.bound", { bound: true })
 
 export const flow: Flow = Object.assign(
     function flow(arg1, arg2?) {
@@ -123,6 +126,8 @@ export const flow: Flow = Object.assign(
     flowAnnotation
 )
 
+flow.bound = createDecoratorAnnotation(flowBoundAnnotation)
+
 function cancelPromise(promise) {
     if (isFunction(promise.cancel)) promise.cancel()
 }

package/src/api/object-api.ts

@@ -158,3 +158,17 @@ export function get(obj: any, key: any): any {
     }
     die(11)
 }
+
+export function apiDefineProperty(obj: Object, key: PropertyKey, descriptor: PropertyDescriptor) {
+    if (isObservableObject(obj)) {
+        return ((obj as any) as IIsObservableObject)[$mobx].defineProperty_(key, descriptor)
+    }
+    die(39)
+}
+
+export function apiOwnKeys(obj: Object) {
+    if (isObservableObject(obj)) {
+        return ((obj as any) as IIsObservableObject)[$mobx].ownKeys_()
+    }
+    die(38)
+}

package/src/api/observable.ts

@@ -60,14 +60,14 @@ export function asCreateObservableOptions(thing: any): CreateObservableOptions {
     return thing || defaultCreateObservableOptions
 }
 
-const observableAnnotation = createObservableAnnotation("observable")
-const observableRefAnnotation = createObservableAnnotation("observable.ref", {
+const observableAnnotation = createObservableAnnotation(OBSERVABLE)
+const observableRefAnnotation = createObservableAnnotation(OBSERVABLE_REF, {
     enhancer: referenceEnhancer
 })
-const observableShallowAnnotation = createObservableAnnotation("observable.shallow", {
+const observableShallowAnnotation = createObservableAnnotation(OBSERVABLE_SHALLOW, {
     enhancer: shallowEnhancer
 })
-const observableStructAnnotation = createObservableAnnotation("observable.struct", {
+const observableStructAnnotation = createObservableAnnotation(OBSERVABLE_STRUCT, {
     enhancer: refStructEnhancer
 })
 const observableDecoratorAnnotation = createDecoratorAnnotation(observableAnnotation)

package/src/api/tojs.ts

@@ -4,9 +4,9 @@ import {
     isObservableValue,
     isObservableMap,
     isObservableSet,
+    isComputedValue,
     die,
-    IIsObservableObject,
-    $mobx,
+    apiOwnKeys,
     objectPrototype
 } from "../internal"
 
@@ -24,7 +24,8 @@ function toJSHelper(source, __alreadySeen: Map<any, any>) {
     )
         return source
 
-    if (isObservableValue(source)) return toJSHelper(source.get(), __alreadySeen)
+    if (isObservableValue(source) || isComputedValue(source))
+        return toJSHelper(source.get(), __alreadySeen)
     if (__alreadySeen.has(source)) {
         return __alreadySeen.get(source)
     }
@@ -51,7 +52,7 @@ function toJSHelper(source, __alreadySeen: Map<any, any>) {
     } else {
         // must be observable object
         const res = cache(__alreadySeen, source, {})
-        ;((source as any) as IIsObservableObject)[$mobx].ownKeys_().forEach((key: any) => {
+        apiOwnKeys(source).forEach((key: any) => {
             if (objectPrototype.propertyIsEnumerable.call(source, key)) {
                 res[key] = toJSHelper(source[key], __alreadySeen)
             }

package/src/api/when.ts

@@ -33,10 +33,10 @@ export function when(predicate: any, arg1?: any, arg2?: any): any {
 function _when(predicate: () => boolean, effect: Lambda, opts: IWhenOptions): IReactionDisposer {
     let timeoutHandle: any
     if (typeof opts.timeout === "number") {
+        const error = new Error("WHEN_TIMEOUT")
         timeoutHandle = setTimeout(() => {
             if (!disposer[$mobx].isDisposed_) {
                 disposer()
-                const error = new Error("WHEN_TIMEOUT")
                 if (opts.onError) opts.onError(error)
                 else throw error
             }

package/src/core/computedvalue.ts

@@ -255,6 +255,11 @@ export class ComputedValue<T> implements IObservable, IComputedValue<T>, IDeriva
         if (!this.keepAlive_) {
             clearObserving(this)
             this.value_ = undefined // don't hold on to computed value!
+            if (__DEV__ && this.isTracing_ !== TraceMode.NONE) {
+                console.log(
+                    `[mobx.trace] Computed value '${this.name_}' was suspended and it will recompute on the next access.`
+                )
+            }
         }
     }
 
@@ -283,17 +288,14 @@ export class ComputedValue<T> implements IObservable, IComputedValue<T>, IDeriva
 
     warnAboutUntrackedRead_() {
         if (!__DEV__) return
-        if (this.requiresReaction_ === true) {
-            die(`[mobx] Computed value ${this.name_} is read outside a reactive context`)
-        }
         if (this.isTracing_ !== TraceMode.NONE) {
             console.log(
-                `[mobx.trace] '${this.name_}' is being read outside a reactive context. Doing a full recompute`
+                `[mobx.trace] Computed value '${this.name_}' is being read outside a reactive context. Doing a full recompute.`
             )
         }
-        if (globalState.computedRequiresReaction) {
+        if (globalState.computedRequiresReaction || this.requiresReaction_) {
             console.warn(
-                `[mobx] Computed value ${this.name_} is being read outside a reactive context. Doing a full recompute`
+                `[mobx] Computed value '${this.name_}' is being read outside a reactive context. Doing a full recompute.`
             )
         }
     }

package/src/core/derivation.ts

@@ -149,7 +149,9 @@ export function checkIfStateModificationsAreAllowed(atom: IAtom) {
 
 export function checkIfStateReadsAreAllowed(observable: IObservable) {
     if (__DEV__ && !globalState.allowStateReads && globalState.observableRequiresReaction) {
-        console.warn(`[mobx] Observable ${observable.name_} being read outside a reactive context`)
+        console.warn(
+            `[mobx] Observable '${observable.name_}' being read outside a reactive context.`
+        )
     }
 }
 
@@ -195,7 +197,7 @@ function warnAboutDerivationWithoutDependencies(derivation: IDerivation) {
 
     if (globalState.reactionRequiresObservable || derivation.requiresObservable_) {
         console.warn(
-            `[mobx] Derivation ${derivation.name_} is created/updated without reading any observable value`
+            `[mobx] Derivation '${derivation.name_}' is created/updated without reading any observable value.`
         )
     }
 }

package/src/errors.ts

@@ -3,6 +3,17 @@ const niceErrors = {
     1(annotationType, key: PropertyKey) {
         return `Cannot apply '${annotationType}' to '${key.toString()}': Field not found.`
     },
+    /*
+    2(prop) {
+        return `invalid decorator for '${prop.toString()}'`
+    },
+    3(prop) {
+        return `Cannot decorate '${prop.toString()}': action can only be used on properties with a function value.`
+    },
+    4(prop) {
+        return `Cannot decorate '${prop.toString()}': computed can only be used on getter properties.`
+    },
+    */
     5: "'keys()' can only be used on observable objects, arrays, sets and maps",
     6: "'values()' can only be used on observable objects, arrays, sets and maps",
     7: "'entries()' can only be used on observable objects, arrays and maps",
@@ -59,7 +70,9 @@ const niceErrors = {
     36: "isolateGlobalState should be called before MobX is running any reactions",
     37(method) {
         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"
 } as const
 
 const errors: typeof niceErrors = __DEV__ ? niceErrors : ({} as any)

package/src/mobx.ts

@@ -17,7 +17,7 @@
  */
 import { die } from "./errors"
 import { getGlobal } from "./utils/global"
-;["Symbol", "Map", "Set", "Symbol"].forEach(m => {
+;["Symbol", "Map", "Set"].forEach(m => {
     let g = getGlobal()
     if (typeof g[m] === "undefined") {
         die(`MobX requires global '${m}' to be available or polyfilled`)
@@ -100,6 +100,8 @@ export {
     remove,
     has,
     get,
+    apiOwnKeys as ownKeys,
+    apiDefineProperty as defineProperty,
     configure,
     onBecomeObserved,
     onBecomeUnobserved,

package/src/types/autoannotation.ts

@@ -58,7 +58,8 @@ function make_(
     // function on proto -> autoAction/flow
     if (source !== adm.target_ && typeof descriptor.value === "function") {
         if (isGenerator(descriptor.value)) {
-            return flow.make_(adm, key, descriptor, source)
+            const flowAnnotation = this.options_?.autoBind ? flow.bound : flow
+            return flowAnnotation.make_(adm, key, descriptor, source)
         }
         const actionAnnotation = this.options_?.autoBind ? autoAction.bound : autoAction
         return actionAnnotation.make_(adm, key, descriptor, source)

package/src/types/dynamicobject.ts

@@ -64,7 +64,7 @@ const objectProxyTraps: ProxyHandler<any> = {
     ownKeys(target: IIsObservableObject): PropertyKey[] {
         if (__DEV__ && globalState.trackingDerivation)
             warnAboutProxyRequirement(
-                "iterate keys to detect added / removed properties. Use `keys` from 'mobx' instead."
+                "iterate keys to detect added / removed properties. Use 'keys' from 'mobx' instead."
             )
         return getAdm(target).ownKeys_()
     },

package/src/types/flowannotation.ts

@@ -32,12 +32,16 @@ function make_(
             : MakeResult.Continue
     }
     // prototype
+    // bound - must annotate protos to support super.flow()
+    if (this.options_?.bound && !isFlow(adm.target_[key])) {
+        if (this.extend_(adm, key, descriptor, false) === null) return MakeResult.Cancel
+    }
     if (isFlow(descriptor.value)) {
         // A prototype could have been annotated already by other constructor,
         // rest of the proto chain must be annotated already
         return MakeResult.Break
     }
-    const flowDescriptor = createFlowDescriptor(adm, this, key, descriptor, false)
+    const flowDescriptor = createFlowDescriptor(adm, this, key, descriptor, false, false)
     defineProperty(source, key, flowDescriptor)
     return MakeResult.Continue
 }
@@ -48,7 +52,7 @@ function extend_(
     descriptor: PropertyDescriptor,
     proxyTrap: boolean
 ): boolean | null {
-    const flowDescriptor = createFlowDescriptor(adm, this, key, descriptor)
+    const flowDescriptor = createFlowDescriptor(adm, this, key, descriptor, this.options_?.bound)
     return adm.defineProperty_(key, flowDescriptor, proxyTrap)
 }
 
@@ -71,12 +75,17 @@ function createFlowDescriptor(
     annotation: Annotation,
     key: PropertyKey,
     descriptor: PropertyDescriptor,
+    bound: boolean,
     // provides ability to disable safeDescriptors for prototypes
     safeDescriptors: boolean = globalState.safeDescriptors
 ): PropertyDescriptor {
     assertFlowDescriptor(adm, annotation, key, descriptor)
+    let { value } = descriptor
+    if (bound) {
+        value = value.bind(adm.proxy_ ?? adm.target_)
+    }
     return {
-        value: flow(descriptor.value),
+        value: flow(value),
         // Non-configurable for classes
         // prevents accidental field redefinition in subclass
         configurable: safeDescriptors ? adm.isPlainObject_ : true,

package/src/utils/comparer.ts

@@ -17,7 +17,11 @@ function shallowComparer(a: any, b: any): boolean {
 }
 
 function defaultComparer(a: any, b: any): boolean {
-    return Object.is(a, b)
+    if (Object.is) return Object.is(a, b)
+
+    return a === b
+        ? a !== 0 || 1 / a === 1 / b
+        : a !== a && b !== b
 }
 
 export const comparer = {