react-native-onyx 2.0.56 → 2.0.58

package/dist/Onyx.d.ts

@@ -19,7 +19,7 @@ declare function init({ keys, initialKeyStates, safeEvictionKeys, maxCachedKeysC
  * @param [mapping.callback] a method that will be called with changed data
  *      This is used by any non-React code to connect to Onyx
  * @param [mapping.initWithStoredValues] If set to false, then no data will be prefilled into the
- *  component
+ *  component. Default is true.
  * @param [mapping.waitForCollectionCallback] If set to true, it will return the entire collection to the callback as a single object
  * @param [mapping.selector] THIS PARAM IS ONLY USED WITH withOnyx(). If included, this will be used to subscribe to a subset of an Onyx key's data.
  *       The sourceData and withOnyx state are passed to the selector and should return the simplified data. Using this setting on `withOnyx` can have very positive

package/dist/Onyx.js

@@ -80,7 +80,7 @@ function init({ keys = {}, initialKeyStates = {}, safeEvictionKeys = [], maxCach
  * @param [mapping.callback] a method that will be called with changed data
  *      This is used by any non-React code to connect to Onyx
  * @param [mapping.initWithStoredValues] If set to false, then no data will be prefilled into the
- *  component
+ *  component. Default is true.
  * @param [mapping.waitForCollectionCallback] If set to true, it will return the entire collection to the callback as a single object
  * @param [mapping.selector] THIS PARAM IS ONLY USED WITH withOnyx(). If included, this will be used to subscribe to a subset of an Onyx key's data.
  *       The sourceData and withOnyx state are passed to the selector and should return the simplified data. Using this setting on `withOnyx` can have very positive
@@ -385,26 +385,14 @@ function merge(key, changes) {
  * @param collection Object collection keyed by individual collection member keys and values
  */
 function mergeCollection(collectionKey, collection) {
-    if (typeof collection !== 'object' || Array.isArray(collection) || utils_1.default.isEmptyObject(collection)) {
+    if (!OnyxUtils_1.default.isValidNonEmptyCollectionForMerge(collection)) {
         Logger.logInfo('mergeCollection() called with invalid or empty value. Skipping this update.');
         return Promise.resolve();
     }
     const mergedCollection = collection;
     // Confirm all the collection keys belong to the same parent
-    let hasCollectionKeyCheckFailed = false;
     const mergedCollectionKeys = Object.keys(mergedCollection);
-    mergedCollectionKeys.forEach((dataKey) => {
-        if (OnyxUtils_1.default.isKeyMatch(collectionKey, dataKey)) {
-            return;
-        }
-        if (process.env.NODE_ENV === 'development') {
-            throw new Error(`Provided collection doesn't have all its data belonging to the same parent. CollectionKey: ${collectionKey}, DataKey: ${dataKey}`);
-        }
-        hasCollectionKeyCheckFailed = true;
-        Logger.logAlert(`Provided collection doesn't have all its data belonging to the same parent. CollectionKey: ${collectionKey}, DataKey: ${dataKey}`);
-    });
-    // Gracefully handle bad mergeCollection updates so it doesn't block the merge queue
-    if (hasCollectionKeyCheckFailed) {
+    if (!OnyxUtils_1.default.doAllCollectionItemsBelongToSameParent(collectionKey, mergedCollectionKeys)) {
         return Promise.resolve();
     }
     return OnyxUtils_1.default.getAllKeys()
@@ -620,22 +608,53 @@ function update(data) {
             throw new Error(`Invalid ${typeof key} key provided in Onyx update. Onyx key must be of type string.`);
         }
     });
+    // The queue of operations within a single `update` call in the format of <item key - list of operations updating the item>.
+    // This allows us to batch the operations per item and merge them into one operation in the order they were requested.
+    const updateQueue = {};
+    const enqueueSetOperation = (key, value) => {
+        // If a `set` operation is enqueued, we should clear the whole queue.
+        // Since the `set` operation replaces the value entirely, there's no need to perform any previous operations.
+        // To do this, we first put `null` in the queue, which removes the existing value, and then merge the new value.
+        updateQueue[key] = [null, value];
+    };
+    const enqueueMergeOperation = (key, value) => {
+        if (value === null) {
+            // If we merge `null`, the value is removed and all the previous operations are discarded.
+            updateQueue[key] = [null];
+        }
+        else if (!updateQueue[key]) {
+            updateQueue[key] = [value];
+        }
+        else {
+            updateQueue[key].push(value);
+        }
+    };
     const promises = [];
     let clearPromise = Promise.resolve();
     data.forEach(({ onyxMethod, key, value }) => {
         switch (onyxMethod) {
             case OnyxUtils_1.default.METHOD.SET:
-                promises.push(() => set(key, value));
+                enqueueSetOperation(key, value);
                 break;
             case OnyxUtils_1.default.METHOD.MERGE:
-                promises.push(() => merge(key, value));
+                enqueueMergeOperation(key, value);
                 break;
-            case OnyxUtils_1.default.METHOD.MERGE_COLLECTION:
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- We validated that the value is a collection
-                promises.push(() => mergeCollection(key, value));
+            case OnyxUtils_1.default.METHOD.MERGE_COLLECTION: {
+                const collection = value;
+                if (!OnyxUtils_1.default.isValidNonEmptyCollectionForMerge(collection)) {
+                    Logger.logInfo('mergeCollection enqueued within update() with invalid or empty value. Skipping this operation.');
+                    break;
+                }
+                // Confirm all the collection keys belong to the same parent
+                const collectionKeys = Object.keys(collection);
+                if (OnyxUtils_1.default.doAllCollectionItemsBelongToSameParent(key, collectionKeys)) {
+                    const mergedCollection = collection;
+                    collectionKeys.forEach((collectionKey) => enqueueMergeOperation(collectionKey, mergedCollection[collectionKey]));
+                }
                 break;
+            }
             case OnyxUtils_1.default.METHOD.MULTI_SET:
-                promises.push(() => multiSet(value));
+                Object.entries(value).forEach(([entryKey, entryValue]) => enqueueSetOperation(entryKey, entryValue));
                 break;
             case OnyxUtils_1.default.METHOD.CLEAR:
                 clearPromise = clear();
@@ -644,6 +663,50 @@ function update(data) {
                 break;
         }
     });
+    // Group all the collection-related keys and update each collection in a single `mergeCollection` call.
+    // This is needed to prevent multiple `mergeCollection` calls for the same collection and `merge` calls for the individual items of the said collection.
+    // This way, we ensure there is no race condition in the queued updates of the same key.
+    OnyxUtils_1.default.getCollectionKeys().forEach((collectionKey) => {
+        const collectionItemKeys = Object.keys(updateQueue).filter((key) => OnyxUtils_1.default.isKeyMatch(collectionKey, key));
+        if (collectionItemKeys.length <= 1) {
+            // If there are no items of this collection in the updateQueue, we should skip it.
+            // If there is only one item, we should update it individually, therefore retain it in the updateQueue.
+            return;
+        }
+        const batchedCollectionUpdates = collectionItemKeys.reduce((queue, key) => {
+            const operations = updateQueue[key];
+            // Remove the collection-related key from the updateQueue so that it won't be processed individually.
+            delete updateQueue[key];
+            const updatedValue = OnyxUtils_1.default.applyMerge(undefined, operations, false);
+            if (operations[0] === null) {
+                // eslint-disable-next-line no-param-reassign
+                queue.set[key] = updatedValue;
+            }
+            else {
+                // eslint-disable-next-line no-param-reassign
+                queue.merge[key] = updatedValue;
+            }
+            return queue;
+        }, {
+            merge: {},
+            set: {},
+        });
+        if (!utils_1.default.isEmptyObject(batchedCollectionUpdates.merge)) {
+            promises.push(() => mergeCollection(collectionKey, batchedCollectionUpdates.merge));
+        }
+        if (!utils_1.default.isEmptyObject(batchedCollectionUpdates.set)) {
+            promises.push(() => multiSet(batchedCollectionUpdates.set));
+        }
+    });
+    Object.entries(updateQueue).forEach(([key, operations]) => {
+        const batchedChanges = OnyxUtils_1.default.applyMerge(undefined, operations, false);
+        if (operations[0] === null) {
+            promises.push(() => set(key, batchedChanges));
+        }
+        else {
+            promises.push(() => merge(key, batchedChanges));
+        }
+    });
     return clearPromise
         .then(() => Promise.all(promises.map((p) => p())))
         .then(() => updateSnapshots(data))

package/dist/OnyxUtils.d.ts

@@ -1,6 +1,6 @@
 import type { ValueOf } from 'type-fest';
 import type Onyx from './Onyx';
-import type { CollectionKey, CollectionKeyBase, DeepRecord, KeyValueMapping, Mapping, OnyxCollection, OnyxEntry, OnyxInput, OnyxKey, OnyxValue, WithOnyxConnectOptions } from './types';
+import type { CollectionKey, CollectionKeyBase, DeepRecord, KeyValueMapping, Mapping, OnyxCollection, OnyxEntry, OnyxInput, OnyxKey, OnyxMergeCollectionInput, OnyxValue, WithOnyxConnectOptions } from './types';
 declare const METHOD: {
     readonly SET: "set";
     readonly MERGE: "merge";
@@ -71,7 +71,11 @@ declare function deleteKeyByConnections(connectionID: number): void;
 /** Returns current key names stored in persisted storage */
 declare function getAllKeys(): Promise<Set<OnyxKey>>;
 /**
- * Checks to see if the a subscriber's supplied key
+ * Returns set of all registered collection keys
+ */
+declare function getCollectionKeys(): Set<OnyxKey>;
+/**
+ * Checks to see if the subscriber's supplied key
  * is associated with a collection of keys.
  */
 declare function isCollectionKey(key: OnyxKey): key is CollectionKeyBase;
@@ -141,7 +145,7 @@ declare function keysChanged<TKey extends CollectionKeyBase>(collectionKey: TKey
  * @example
  * keyChanged(key, value, subscriber => subscriber.initWithStoredValues === false)
  */
-declare function keyChanged<TKey extends OnyxKey>(key: TKey, value: OnyxValue<TKey>, previousValue: OnyxValue<TKey>, canUpdateSubscriber?: (subscriber?: Mapping<OnyxKey>) => boolean, notifyRegularSubscibers?: boolean, notifyWithOnyxSubscibers?: boolean): void;
+declare function keyChanged<TKey extends OnyxKey>(key: TKey, value: OnyxValue<TKey>, previousValue: OnyxValue<TKey>, canUpdateSubscriber?: (subscriber?: Mapping<OnyxKey>) => boolean, notifyConnectSubscribers?: boolean, notifyWithOnyxSubscribers?: boolean): void;
 /**
  * Sends the data obtained from the keys to the connection. It either:
  *     - sets state on the withOnyxInstances
@@ -216,6 +220,14 @@ declare function applyMerge<TValue extends OnyxInput<OnyxKey> | undefined, TChan
  * Merge user provided default key value pairs.
  */
 declare function initializeWithDefaultKeyStates(): Promise<void>;
+/**
+ * Validate the collection is not empty and has a correct type before applying mergeCollection()
+ */
+declare function isValidNonEmptyCollectionForMerge<TKey extends CollectionKeyBase, TMap>(collection: OnyxMergeCollectionInput<TKey, TMap>): boolean;
+/**
+ * Verify if all the collection keys belong to the same parent
+ */
+declare function doAllCollectionItemsBelongToSameParent<TKey extends CollectionKeyBase>(collectionKey: TKey, collectionKeys: string[]): boolean;
 declare const OnyxUtils: {
     METHOD: {
         readonly SET: "set";
@@ -234,6 +246,7 @@ declare const OnyxUtils: {
     batchUpdates: typeof batchUpdates;
     get: typeof get;
     getAllKeys: typeof getAllKeys;
+    getCollectionKeys: typeof getCollectionKeys;
     isCollectionKey: typeof isCollectionKey;
     isCollectionMemberKey: typeof isCollectionMemberKey;
     splitCollectionMemberKey: typeof splitCollectionMemberKey;
@@ -267,5 +280,7 @@ declare const OnyxUtils: {
     deleteKeyByConnections: typeof deleteKeyByConnections;
     getSnapshotKey: typeof getSnapshotKey;
     multiGet: typeof multiGet;
+    isValidNonEmptyCollectionForMerge: typeof isValidNonEmptyCollectionForMerge;
+    doAllCollectionItemsBelongToSameParent: typeof doAllCollectionItemsBelongToSameParent;
 };
 export default OnyxUtils;

package/dist/OnyxUtils.js

@@ -49,10 +49,10 @@ const METHOD = {
 // Key/value store of Onyx key and arrays of values to merge
 const mergeQueue = {};
 const mergeQueuePromise = {};
-// Holds a mapping of all the react components that want their state subscribed to a store key
+// Holds a mapping of all the React components that want their state subscribed to a store key
 const callbackToStateMapping = {};
 // Keeps a copy of the values of the onyx collection keys as a map for faster lookups
-let onyxCollectionKeyMap = new Map();
+let onyxCollectionKeySet = new Set();
 // Holds a mapping of the connected key to the connectionID for faster lookups
 const onyxKeyToConnectionIDs = new Map();
 // Holds a list of keys that have been directly subscribed to or recently modified from least to most recent
@@ -67,6 +67,8 @@ const evictionBlocklist = {};
 let defaultKeyStates = {};
 let batchUpdatesPromise = null;
 let batchUpdatesQueue = [];
+// Used for comparison with a new update to avoid invoking the Onyx.connect callback with the same data.
+const lastConnectionCallbackData = new Map();
 let snapshotKey = null;
 function getSnapshotKey() {
     return snapshotKey;
@@ -107,10 +109,10 @@ function initStoreValues(keys, initialKeyStates, safeEvictionKeys) {
     // We need the value of the collection keys later for checking if a
     // key is a collection. We store it in a map for faster lookup.
     const collectionValues = Object.values((_a = keys.COLLECTION) !== null && _a !== void 0 ? _a : {});
-    onyxCollectionKeyMap = collectionValues.reduce((acc, val) => {
-        acc.set(val, true);
+    onyxCollectionKeySet = collectionValues.reduce((acc, val) => {
+        acc.add(val);
         return acc;
-    }, new Map());
+    }, new Set());
     // Set our default key states to use when initializing and clearing Onyx data
     defaultKeyStates = initialKeyStates;
     DevTools_1.default.initState(initialKeyStates);
@@ -300,11 +302,17 @@ function getAllKeys() {
     return OnyxCache_1.default.captureTask(taskName, promise);
 }
 /**
- * Checks to see if the a subscriber's supplied key
+ * Returns set of all registered collection keys
+ */
+function getCollectionKeys() {
+    return onyxCollectionKeySet;
+}
+/**
+ * Checks to see if the subscriber's supplied key
  * is associated with a collection of keys.
  */
 function isCollectionKey(key) {
-    return onyxCollectionKeyMap.has(key);
+    return onyxCollectionKeySet.has(key);
 }
 function isCollectionMemberKey(collectionKey, key) {
     return Str.startsWith(key, collectionKey) && key.length > collectionKey.length;
@@ -619,7 +627,7 @@ function keysChanged(collectionKey, partialCollection, partialPreviousCollection
  * @example
  * keyChanged(key, value, subscriber => subscriber.initWithStoredValues === false)
  */
-function keyChanged(key, value, previousValue, canUpdateSubscriber = () => true, notifyRegularSubscibers = true, notifyWithOnyxSubscibers = true) {
+function keyChanged(key, value, previousValue, canUpdateSubscriber = () => true, notifyConnectSubscribers = true, notifyWithOnyxSubscribers = true) {
     var _a, _b;
     // Add or remove this key from the recentlyAccessedKeys lists
     if (value !== null) {
@@ -651,7 +659,10 @@ function keyChanged(key, value, previousValue, canUpdateSubscriber = () => true,
         }
         // Subscriber is a regular call to connect() and provided a callback
         if (typeof subscriber.callback === 'function') {
-            if (!notifyRegularSubscibers) {
+            if (!notifyConnectSubscribers) {
+                continue;
+            }
+            if (lastConnectionCallbackData.has(subscriber.connectionID) && lastConnectionCallbackData.get(subscriber.connectionID) === value) {
                 continue;
             }
             if (isCollectionKey(subscriber.key) && subscriber.waitForCollectionCallback) {
@@ -662,11 +673,12 @@ function keyChanged(key, value, previousValue, canUpdateSubscriber = () => true,
             }
             const subscriberCallback = subscriber.callback;
             subscriberCallback(value, key);
+            lastConnectionCallbackData.set(subscriber.connectionID, value);
             continue;
         }
         // Subscriber connected via withOnyx() HOC
         if ('withOnyxInstance' in subscriber && subscriber.withOnyxInstance) {
-            if (!notifyWithOnyxSubscibers) {
+            if (!notifyWithOnyxSubscribers) {
                 continue;
             }
             const selector = subscriber.selector;
@@ -778,7 +790,14 @@ function sendDataToConnection(mapping, value, matchedKey, isBatched) {
     // If we would pass undefined to setWithOnyxInstance instead, withOnyx would not set the value in the state.
     // withOnyx will internally replace null values with undefined and never pass null values to wrapped components.
     // For regular callbacks, we never want to pass null values, but always just undefined if a value is not set in cache or storage.
-    (_b = (_a = mapping).callback) === null || _b === void 0 ? void 0 : _b.call(_a, value === null ? undefined : value, matchedKey);
+    const valueToPass = value === null ? undefined : value;
+    const lastValue = lastConnectionCallbackData.get(mapping.connectionID);
+    lastConnectionCallbackData.get(mapping.connectionID);
+    // If the value has not changed we do not need to trigger the callback
+    if (lastConnectionCallbackData.has(mapping.connectionID) && valueToPass === lastValue) {
+        return;
+    }
+    (_b = (_a = mapping).callback) === null || _b === void 0 ? void 0 : _b.call(_a, valueToPass, matchedKey);
 }
 /**
  * We check to see if this key is flagged as safe for eviction and add it to the recentlyAccessedKeys list so that when we
@@ -955,6 +974,29 @@ function initializeWithDefaultKeyStates() {
         Object.entries(merged !== null && merged !== void 0 ? merged : {}).forEach(([key, value]) => keyChanged(key, value, existingDataAsObject));
     });
 }
+/**
+ * Validate the collection is not empty and has a correct type before applying mergeCollection()
+ */
+function isValidNonEmptyCollectionForMerge(collection) {
+    return typeof collection === 'object' && !Array.isArray(collection) && !utils_1.default.isEmptyObject(collection);
+}
+/**
+ * Verify if all the collection keys belong to the same parent
+ */
+function doAllCollectionItemsBelongToSameParent(collectionKey, collectionKeys) {
+    let hasCollectionKeyCheckFailed = false;
+    collectionKeys.forEach((dataKey) => {
+        if (OnyxUtils.isKeyMatch(collectionKey, dataKey)) {
+            return;
+        }
+        if (process.env.NODE_ENV === 'development') {
+            throw new Error(`Provided collection doesn't have all its data belonging to the same parent. CollectionKey: ${collectionKey}, DataKey: ${dataKey}`);
+        }
+        hasCollectionKeyCheckFailed = true;
+        Logger.logAlert(`Provided collection doesn't have all its data belonging to the same parent. CollectionKey: ${collectionKey}, DataKey: ${dataKey}`);
+    });
+    return !hasCollectionKeyCheckFailed;
+}
 const OnyxUtils = {
     METHOD,
     getMergeQueue,
@@ -967,6 +1009,7 @@ const OnyxUtils = {
     batchUpdates,
     get,
     getAllKeys,
+    getCollectionKeys,
     isCollectionKey,
     isCollectionMemberKey,
     splitCollectionMemberKey,
@@ -1000,5 +1043,7 @@ const OnyxUtils = {
     deleteKeyByConnections,
     getSnapshotKey,
     multiGet,
+    isValidNonEmptyCollectionForMerge,
+    doAllCollectionItemsBelongToSameParent,
 };
 exports.default = OnyxUtils;

package/dist/types.d.ts

@@ -365,4 +365,11 @@ type InitOptions = {
     debugSetState?: boolean;
 };
 type GenericFunction = (...args: any[]) => any;
-export type { BaseConnectOptions, Collection, CollectionConnectCallback, CollectionConnectOptions, CollectionKey, CollectionKeyBase, ConnectOptions, CustomTypeOptions, DeepRecord, DefaultConnectCallback, DefaultConnectOptions, ExtractOnyxCollectionValue, GenericFunction, InitOptions, Key, KeyValueMapping, Mapping, NonNull, NonUndefined, OnyxInputKeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey, OnyxInputValue, OnyxCollectionInputValue, OnyxInput, OnyxSetInput, OnyxMultiSetInput, OnyxMergeInput, OnyxMergeCollectionInput, OnyxUpdate, OnyxValue, Selector, WithOnyxConnectOptions, };
+/**
+ * Represents a combination of Merge and Set operations that should be executed in Onyx
+ */
+type MixedOperationsQueue = {
+    merge: OnyxInputKeyValueMapping;
+    set: OnyxInputKeyValueMapping;
+};
+export type { BaseConnectOptions, Collection, CollectionConnectCallback, CollectionConnectOptions, CollectionKey, CollectionKeyBase, ConnectOptions, CustomTypeOptions, DeepRecord, DefaultConnectCallback, DefaultConnectOptions, ExtractOnyxCollectionValue, GenericFunction, InitOptions, Key, KeyValueMapping, Mapping, NonNull, NonUndefined, OnyxInputKeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey, OnyxInputValue, OnyxCollectionInputValue, OnyxInput, OnyxSetInput, OnyxMultiSetInput, OnyxMergeInput, OnyxMergeCollectionInput, OnyxUpdate, OnyxValue, Selector, WithOnyxConnectOptions, MixedOperationsQueue, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "2.0.56",
+  "version": "2.0.58",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",