atom for array.length

-   add an Atom for observing array.length
-   swap observation on `array.length` to the new `array.atomForLength_`
-   handle change reporting for splice events that change array length
-   when array.length is changed, create an action, `executeAction`,
that reports the change of `array.atom_` and `array.atomForLength_`, to
avoid double reactions
-   added getCurrentId() to abstract globalState.mobxGuid, needed to
conserve id index on array length atom

Author: grithin

packages/mobx/src/types/observablearray.ts

@@ -12,6 +12,7 @@ import {
     checkIfStateModificationsAreAllowed,
     createInstanceofPredicate,
     getNextId,
+    getCurrentId,
     hasInterceptors,
     hasListeners,
     interceptChange,
@@ -27,7 +28,8 @@ import {
     hasProp,
     die,
     globalState,
-    initObservable
+    initObservable,
+    executeAction
 } from "../internal"
 
 const SPLICE = "splice"
@@ -119,6 +121,7 @@ export class ObservableArrayAdministration
     implements IInterceptable<IArrayWillChange<any> | IArrayWillSplice<any>>, IListenable
 {
     atom_: IAtom
+    atomForLength_: IAtom
     readonly values_: any[] = [] // this is the prop that gets proxied, so can't replace it!
     interceptors_
     changeListeners_
@@ -134,6 +137,12 @@ export class ObservableArrayAdministration
         public legacyMode_: boolean
     ) {
         this.atom_ = new Atom(name)
+        // id index is conserved across atom_ and atomForLength for id-index tracking unit tests
+        let nameForLength = __DEV__
+            ? "ObservableArrayLength@" + getCurrentId()
+            : "ObservableArrayLength"
+        this.atomForLength_ = new Atom(nameForLength)
+
         this.enhancer_ = (newV, oldV) =>
             enhancer(newV, oldV, __DEV__ ? name + "[..]" : "ObservableArray[..]")
     }
@@ -177,7 +186,7 @@ export class ObservableArrayAdministration
     }
 
     getArrayLength_(): number {
-        this.atom_.reportObserved()
+        this.atomForLength_.reportObserved()
         return this.values_.length
     }
 
@@ -313,33 +322,58 @@ export class ObservableArrayAdministration
     }
 
     notifyArraySplice_(index: number, added: any[], removed: any[]) {
-        const notifySpy = !this.owned_ && isSpyEnabled()
-        const notify = hasListeners(this)
-        const change: IArraySplice | null =
-            notify || notifySpy
-                ? ({
-                      observableKind: "array",
-                      object: this.proxy_,
-                      debugObjectName: this.atom_.name_,
-                      type: SPLICE,
-                      index,
-                      removed,
-                      added,
-                      removedCount: removed.length,
-                      addedCount: added.length
-                  } as const)
-                : null
+        const lengthChanged = added.length - removed.length != 0
+
+        const handleChange = () => {
+            const notifySpy = !this.owned_ && isSpyEnabled()
+            const notify = hasListeners(this)
+            // the change for x and x.length is the same except for the name, so use a function to create
+            const makeNamedChange = (name): IArraySplice => {
+                return {
+                    observableKind: "array",
+                    object: this.proxy_,
+                    debugObjectName: name,
+                    type: SPLICE,
+                    index,
+                    removed,
+                    added,
+                    removedCount: removed.length,
+                    addedCount: added.length
+                } as const
+            }
+            const change: IArraySplice | null =
+                notify || notifySpy ? makeNamedChange(this.atom_.name_) : null
 
-        if (__DEV__ && notifySpy) {
-            spyReportStart(change!)
-        }
-        this.atom_.reportChanged()
-        // conform: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/observe
-        if (notify) {
-            notifyListeners(this, change)
+            if (__DEV__ && notifySpy) {
+                spyReportStart(change!)
+            }
+            this.atom_.reportChanged()
+            // conform: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/observe
+            if (notify) {
+                notifyListeners(this, change)
+            }
+            if (__DEV__ && notifySpy) {
+                spyReportEnd()
+            }
+
+            // Handle potential length change observable
+            if (lengthChanged) {
+                const changeLength: IArraySplice | null =
+                    notify || notifySpy ? makeNamedChange(this.atomForLength_.name_) : null
+                if (__DEV__ && notifySpy) {
+                    spyReportStart(changeLength!)
+                }
+                this.atomForLength_.reportChanged()
+                if (__DEV__ && notifySpy) {
+                    spyReportEnd()
+                }
+            }
         }
-        if (__DEV__ && notifySpy) {
-            spyReportEnd()
+        if (lengthChanged) {
+            // for cases where `x`, and `x.length` are observed, this function can create two events, so bottle them into an `action` to prevent multiple reactions
+            executeAction("array-splice", true, handleChange)
+        } else {
+            handleChange()
         }
     }
 

packages/mobx/src/utils/utils.ts

@@ -39,6 +39,9 @@ export function warnAboutProxyRequirement(msg: string) {
     }
 }
 
+export function getCurrentId() {
+    return globalState.mobxGuid
+}
 export function getNextId() {
     return ++globalState.mobxGuid
 }