mobx 6.10.0 → 6.10.2

package/dist/types/type-utils.d.ts

@@ -2,3 +2,10 @@ import { IDepTreeNode } from "../internal";
 export declare function getAtom(thing: any, property?: PropertyKey): IDepTreeNode;
 export declare function getAdministration(thing: any, property?: string): any;
 export declare function getDebugName(thing: any, property?: string): string;
+/**
+ * Helper function for initializing observable structures, it applies:
+ * 1. allowStateChanges so we don't violate enforceActions.
+ * 2. untracked so we don't accidentaly subscribe to anything observable accessed during init in case the observable is created inside derivation.
+ * 3. batch to avoid state version updates
+ */
+export declare function initObservable<T>(cb: () => T): T;

package/package.json

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

package/src/api/extendobservable.ts

@@ -2,8 +2,6 @@ import {
     CreateObservableOptions,
     isObservableMap,
     AnnotationsMap,
-    startBatch,
-    endBatch,
     asObservableObject,
     isPlainObject,
     ObservableObjectAdministration,
@@ -11,7 +9,8 @@ import {
     die,
     getOwnPropertyDescriptors,
     $mobx,
-    ownKeys
+    ownKeys,
+    initObservable
 } from "../internal"
 
 export function extendObservable<A extends Object, B extends Object>(
@@ -40,9 +39,8 @@ export function extendObservable<A extends Object, B extends Object>(
     // Pull descriptors first, so we don't have to deal with props added by administration ($mobx)
     const descriptors = getOwnPropertyDescriptors(properties)
 
-    const adm: ObservableObjectAdministration = asObservableObject(target, options)[$mobx]
-    startBatch()
-    try {
+    initObservable(() => {
+        const adm: ObservableObjectAdministration = asObservableObject(target, options)[$mobx]
         ownKeys(descriptors).forEach(key => {
             adm.extend_(
                 key,
@@ -51,8 +49,7 @@ export function extendObservable<A extends Object, B extends Object>(
                 !annotations ? true : key in annotations ? annotations[key] : true
             )
         })
-    } finally {
-        endBatch()
-    }
+    })
+
     return target as any
 }

package/src/api/makeObservable.ts

@@ -2,8 +2,6 @@ import {
     $mobx,
     asObservableObject,
     AnnotationsMap,
-    endBatch,
-    startBatch,
     CreateObservableOptions,
     ObservableObjectAdministration,
     collectStoredAnnotations,
@@ -13,7 +11,8 @@ import {
     ownKeys,
     extendObservable,
     addHiddenProp,
-    storedAnnotationsSymbol
+    storedAnnotationsSymbol,
+    initObservable
 } from "../internal"
 
 // Hack based on https://github.com/Microsoft/TypeScript/issues/14829#issuecomment-322267089
@@ -30,9 +29,8 @@ export function makeObservable<T extends object, AdditionalKeys extends Property
     annotations?: AnnotationsMap<T, NoInfer<AdditionalKeys>>,
     options?: MakeObservableOptions
 ): T {
-    const adm: ObservableObjectAdministration = asObservableObject(target, options)[$mobx]
-    startBatch()
-    try {
+    initObservable(() => {
+        const adm: ObservableObjectAdministration = asObservableObject(target, options)[$mobx]
         if (__DEV__ && annotations && target[storedAnnotationsSymbol]) {
             die(
                 `makeObservable second arg must be nullish when using decorators. Mixing @decorator syntax with annotations is not supported.`
@@ -43,9 +41,7 @@ export function makeObservable<T extends object, AdditionalKeys extends Property
 
         // Annotate
         ownKeys(annotations).forEach(key => adm.make_(key, annotations![key]))
-    } finally {
-        endBatch()
-    }
+    })
     return target
 }
 
@@ -72,20 +68,19 @@ export function makeAutoObservable<T extends object, AdditionalKeys extends Prop
         return extendObservable(target, target, overrides, options)
     }
 
-    const adm: ObservableObjectAdministration = asObservableObject(target, options)[$mobx]
+    initObservable(() => {
+        const adm: ObservableObjectAdministration = asObservableObject(target, options)[$mobx]
 
-    // Optimization: cache keys on proto
-    // Assumes makeAutoObservable can be called only once per object and can't be used in subclass
-    if (!target[keysSymbol]) {
-        const proto = Object.getPrototypeOf(target)
-        const keys = new Set([...ownKeys(target), ...ownKeys(proto)])
-        keys.delete("constructor")
-        keys.delete($mobx)
-        addHiddenProp(proto, keysSymbol, keys)
-    }
+        // Optimization: cache keys on proto
+        // Assumes makeAutoObservable can be called only once per object and can't be used in subclass
+        if (!target[keysSymbol]) {
+            const proto = Object.getPrototypeOf(target)
+            const keys = new Set([...ownKeys(target), ...ownKeys(proto)])
+            keys.delete("constructor")
+            keys.delete($mobx)
+            addHiddenProp(proto, keysSymbol, keys)
+        }
 
-    startBatch()
-    try {
         target[keysSymbol].forEach(key =>
             adm.make_(
                 key,
@@ -93,8 +88,7 @@ export function makeAutoObservable<T extends object, AdditionalKeys extends Prop
                 !overrides ? true : key in overrides ? overrides[key] : true
             )
         )
-    } finally {
-        endBatch()
-    }
+    })
+
     return target
 }

package/src/api/observable.ts

@@ -29,7 +29,8 @@ import {
     assign,
     isStringish,
     createObservableAnnotation,
-    createAutoAnnotation
+    createAutoAnnotation,
+    initObservable
 } from "../internal"
 
 export const OBSERVABLE = "observable"
@@ -211,12 +212,14 @@ const observableFactories: IObservableFactory = {
         decorators?: AnnotationsMap<T, never>,
         options?: CreateObservableOptions
     ): T {
-        return extendObservable(
-            globalState.useProxies === false || options?.proxy === false
-                ? asObservableObject({}, options)
-                : asDynamicObservableObject({}, options),
-            props,
-            decorators
+        return initObservable(() =>
+            extendObservable(
+                globalState.useProxies === false || options?.proxy === false
+                    ? asObservableObject({}, options)
+                    : asDynamicObservableObject({}, options),
+                props,
+                decorators
+            )
         )
     },
     ref: createDecoratorAnnotation(observableRefAnnotation),

package/src/core/atom.ts

@@ -19,7 +19,7 @@ export const $mobx = Symbol("mobx administration")
 
 export interface IAtom extends IObservable {
     reportObserved(): boolean
-    reportChanged()
+    reportChanged(): void
 }
 
 export class Atom implements IAtom {
@@ -27,6 +27,7 @@ export class Atom implements IAtom {
     isBeingObserved_ = false
     observers_ = new Set<IDerivation>()
 
+    batchId_: number
     diffValue_ = 0
     lastAccessedBy_ = 0
     lowestObserverState_ = IDerivationState_.NOT_TRACKING_
@@ -34,7 +35,9 @@ export class Atom implements IAtom {
      * Create a new atom. For debugging purposes it is recommended to give it a name.
      * The onBecomeObserved and onBecomeUnobserved callbacks can be used for resource management.
      */
-    constructor(public name_ = __DEV__ ? "Atom@" + getNextId() : "Atom") {}
+    constructor(public name_ = __DEV__ ? "Atom@" + getNextId() : "Atom") {
+        this.batchId_ = globalState.inBatch ? globalState.batchId : NaN
+    }
 
     // onBecomeObservedListeners
     public onBOL: Set<Lambda> | undefined
@@ -65,14 +68,19 @@ export class Atom implements IAtom {
      * Invoke this method _after_ this method has changed to signal mobx that all its observers should invalidate.
      */
     public reportChanged() {
+        if (!globalState.inBatch || this.batchId_ !== globalState.batchId) {
+            // We could update state version only at the end of batch,
+            // but we would still have to switch some global flag here to signal a change.
+            globalState.stateVersion =
+                globalState.stateVersion < Number.MAX_SAFE_INTEGER
+                    ? globalState.stateVersion + 1
+                    : Number.MIN_SAFE_INTEGER
+            // Avoids the possibility of hitting the same globalState.batchId when it cycled through all integers (necessary?)
+            this.batchId_ = NaN
+        }
+
         startBatch()
         propagateChanged(this)
-        // We could update state version only at the end of batch,
-        // but we would still have to switch some global flag here to signal a change.
-        globalState.stateVersion =
-            globalState.stateVersion < Number.MAX_SAFE_INTEGER
-                ? globalState.stateVersion + 1
-                : Number.MIN_SAFE_INTEGER
         endBatch()
     }
 

package/src/core/globalstate.ts

@@ -63,6 +63,12 @@ export class MobXGlobals {
      */
     inBatch: number = 0
 
+    /**
+     * ID of the latest batch. Used to suppress reportChanged of newly created atoms.
+     * Note the value persists even after batch ended.
+     */
+    batchId: number = Number.MIN_SAFE_INTEGER
+
     /**
      * Observables that don't have observers anymore, and are about to be
      * suspended, unless somebody else accesses it in the same batch

package/src/core/observable.ts

@@ -104,6 +104,12 @@ export function queueForUnobservation(observable: IObservable) {
  * Avoids unnecessary recalculations.
  */
 export function startBatch() {
+    if (globalState.inBatch === 0) {
+        globalState.batchId =
+            globalState.batchId < Number.MAX_SAFE_INTEGER
+                ? globalState.batchId + 1
+                : Number.MIN_SAFE_INTEGER
+    }
     globalState.inBatch++
 }
 

package/src/types/legacyobservablearray.ts

@@ -1,8 +1,6 @@
 import {
     getNextId,
     addHiddenFinalProp,
-    allowStateChangesStart,
-    allowStateChangesEnd,
     makeIterable,
     addHiddenProp,
     ObservableArrayAdministration,
@@ -11,7 +9,8 @@ import {
     IEnhancer,
     isObservableArray,
     IObservableArray,
-    defineProperty
+    defineProperty,
+    initObservable
 } from "../internal"
 
 // Bug in safari 9.* (or iOS 9 safari mobile). See #364
@@ -61,23 +60,22 @@ class LegacyObservableArray<T> extends StubArray {
         owned = false
     ) {
         super()
+        initObservable(() => {
+            const adm = new ObservableArrayAdministration(name, enhancer, owned, true)
+            adm.proxy_ = this as any
+            addHiddenFinalProp(this, $mobx, adm)
+
+            if (initialValues && initialValues.length) {
+                // @ts-ignore
+                this.spliceWithArray(0, 0, initialValues)
+            }
 
-        const adm = new ObservableArrayAdministration(name, enhancer, owned, true)
-        adm.proxy_ = this as any
-        addHiddenFinalProp(this, $mobx, adm)
-
-        if (initialValues && initialValues.length) {
-            const prev = allowStateChangesStart(true)
-            // @ts-ignore
-            this.spliceWithArray(0, 0, initialValues)
-            allowStateChangesEnd(prev)
-        }
-
-        if (safariPrototypeSetterInheritanceBug) {
-            // Seems that Safari won't use numeric prototype setter untill any * numeric property is
-            // defined on the instance. After that it works fine, even if this property is deleted.
-            Object.defineProperty(this, "0", ENTRY_0)
-        }
+            if (safariPrototypeSetterInheritanceBug) {
+                // Seems that Safari won't use numeric prototype setter untill any * numeric property is
+                // defined on the instance. After that it works fine, even if this property is deleted.
+                Object.defineProperty(this, "0", ENTRY_0)
+            }
+        })
     }
 
     concat(...arrays: T[][]): T[] {

package/src/types/observablearray.ts

@@ -22,13 +22,12 @@ import {
     registerListener,
     spyReportEnd,
     spyReportStart,
-    allowStateChangesStart,
-    allowStateChangesEnd,
     assertProxies,
     reserveArrayBuffer,
     hasProp,
     die,
-    globalState
+    globalState,
+    initObservable
 } from "../internal"
 
 const SPLICE = "splice"
@@ -406,16 +405,16 @@ export function createObservableArray<T>(
     owned = false
 ): IObservableArray<T> {
     assertProxies()
-    const adm = new ObservableArrayAdministration(name, enhancer, owned, false)
-    addHiddenFinalProp(adm.values_, $mobx, adm)
-    const proxy = new Proxy(adm.values_, arrayTraps) as any
-    adm.proxy_ = proxy
-    if (initialValues && initialValues.length) {
-        const prev = allowStateChangesStart(true)
-        adm.spliceWithArray_(0, 0, initialValues)
-        allowStateChangesEnd(prev)
-    }
-    return proxy
+    return initObservable(() => {
+        const adm = new ObservableArrayAdministration(name, enhancer, owned, false)
+        addHiddenFinalProp(adm.values_, $mobx, adm)
+        const proxy = new Proxy(adm.values_, arrayTraps) as any
+        adm.proxy_ = proxy
+        if (initialValues && initialValues.length) {
+            adm.spliceWithArray_(0, 0, initialValues)
+        }
+        return proxy
+    })
 }
 
 // eslint-disable-next-line

package/src/types/observablemap.ts

@@ -35,7 +35,7 @@ import {
     UPDATE,
     IAtom,
     PureSpyEvent,
-    allowStateChanges
+    initObservable
 } from "../internal"
 
 export interface IKeyValueMap<V = any> {
@@ -90,11 +90,12 @@ export type IObservableMapInitialValues<K = any, V = any> =
 // just extend Map? See also https://gist.github.com/nestharus/13b4d74f2ef4a2f4357dbd3fc23c1e54
 // But: https://github.com/mobxjs/mobx/issues/1556
 export class ObservableMap<K = any, V = any>
-    implements Map<K, V>, IInterceptable<IMapWillChange<K, V>>, IListenable {
+    implements Map<K, V>, IInterceptable<IMapWillChange<K, V>>, IListenable
+{
     [$mobx] = ObservableMapMarker
-    data_: Map<K, ObservableValue<V>>
-    hasMap_: Map<K, ObservableValue<boolean>> // hasMap, not hashMap >-).
-    keysAtom_: IAtom
+    data_!: Map<K, ObservableValue<V>>
+    hasMap_!: Map<K, ObservableValue<boolean>> // hasMap, not hashMap >-).
+    keysAtom_!: IAtom
     interceptors_
     changeListeners_
     dehancer: any
@@ -107,11 +108,13 @@ export class ObservableMap<K = any, V = any>
         if (!isFunction(Map)) {
             die(18)
         }
-        this.keysAtom_ = createAtom(__DEV__ ? `${this.name_}.keys()` : "ObservableMap.keys()")
-        this.data_ = new Map()
-        this.hasMap_ = new Map()
-        allowStateChanges(true, () => {
-            this.merge(initialData)
+        initObservable(() => {
+            this.keysAtom_ = createAtom(__DEV__ ? `${this.name_}.keys()` : "ObservableMap.keys()")
+            this.data_ = new Map()
+            this.hasMap_ = new Map()
+            if (initialData) {
+                this.merge(initialData)
+            }
         })
     }
 

package/src/types/observableobject.ts

@@ -46,7 +46,8 @@ import {
     getAdministration,
     getDebugName,
     objectPrototype,
-    MakeResult
+    MakeResult,
+    checkIfStateModificationsAreAllowed
 } from "../internal"
 
 const descriptorCache = Object.create(null)
@@ -314,6 +315,7 @@ export class ObservableObjectAdministration
         descriptor: PropertyDescriptor,
         proxyTrap: boolean = false
     ): boolean | null {
+        checkIfStateModificationsAreAllowed(this.keysAtom_)
         try {
             startBatch()
 
@@ -368,6 +370,7 @@ export class ObservableObjectAdministration
         enhancer: IEnhancer<any>,
         proxyTrap: boolean = false
     ): boolean | null {
+        checkIfStateModificationsAreAllowed(this.keysAtom_)
         try {
             startBatch()
 
@@ -432,6 +435,7 @@ export class ObservableObjectAdministration
         options: IComputedValueOptions<any>,
         proxyTrap: boolean = false
     ): boolean | null {
+        checkIfStateModificationsAreAllowed(this.keysAtom_)
         try {
             startBatch()
 
@@ -490,6 +494,7 @@ export class ObservableObjectAdministration
      * @returns {boolean|null} true on success, false on failure (proxyTrap + non-configurable), null when cancelled by interceptor
      */
     delete_(key: PropertyKey, proxyTrap: boolean = false): boolean | null {
+        checkIfStateModificationsAreAllowed(this.keysAtom_)
         // No such prop
         if (!hasProp(this.target_, key)) {
             return true

package/src/types/observableset.ts

@@ -27,7 +27,8 @@ import {
     DELETE,
     ADD,
     die,
-    isFunction
+    isFunction,
+    initObservable
 } from "../internal"
 
 const ObservableSetMarker = {}
@@ -65,7 +66,7 @@ export type ISetWillChange<T = any> =
 export class ObservableSet<T = any> implements Set<T>, IInterceptable<ISetWillChange>, IListenable {
     [$mobx] = ObservableSetMarker
     private data_: Set<any> = new Set()
-    atom_: IAtom
+    atom_!: IAtom
     changeListeners_
     interceptors_
     dehancer: any
@@ -79,11 +80,13 @@ export class ObservableSet<T = any> implements Set<T>, IInterceptable<ISetWillCh
         if (!isFunction(Set)) {
             die(22)
         }
-        this.atom_ = createAtom(this.name_)
         this.enhancer_ = (newV, oldV) => enhancer(newV, oldV, name_)
-        if (initialData) {
-            this.replace(initialData)
-        }
+        initObservable(() => {
+            this.atom_ = createAtom(this.name_)
+            if (initialData) {
+                this.replace(initialData)
+            }
+        })
     }
 
     private dehanceValue_<X extends T | undefined>(value: X): X {

package/src/types/type-utils.ts

@@ -10,7 +10,13 @@ import {
     isReaction,
     isObservableSet,
     die,
-    isFunction
+    isFunction,
+    allowStateChangesStart,
+    untrackedStart,
+    allowStateChangesEnd,
+    untrackedEnd,
+    startBatch,
+    endBatch
 } from "../internal"
 
 export function getAtom(thing: any, property?: PropertyKey): IDepTreeNode {
@@ -92,3 +98,22 @@ export function getDebugName(thing: any, property?: string): string {
     }
     return named.name_
 }
+
+/**
+ * Helper function for initializing observable structures, it applies:
+ * 1. allowStateChanges so we don't violate enforceActions.
+ * 2. untracked so we don't accidentaly subscribe to anything observable accessed during init in case the observable is created inside derivation.
+ * 3. batch to avoid state version updates
+ */
+export function initObservable<T>(cb: () => T): T {
+    const derivation = untrackedStart()
+    const allowStateChanges = allowStateChangesStart(true)
+    startBatch()
+    try {
+        return cb()
+    } finally {
+        endBatch()
+        allowStateChangesEnd(allowStateChanges)
+        untrackedEnd(derivation)
+    }
+}