react-native-onyx 2.0.34 → 2.0.36

package/dist/Onyx.js

@@ -36,6 +36,7 @@ const storage_1 = __importDefault(require("./storage"));
 const utils_1 = __importDefault(require("./utils"));
 const DevTools_1 = __importDefault(require("./DevTools"));
 const OnyxUtils_1 = __importDefault(require("./OnyxUtils"));
+const logMessages_1 = __importDefault(require("./logMessages"));
 // Keeps track of the last connectionID that was used so we can keep incrementing it
 let lastConnectionID = 0;
 // Connections can be made before `Onyx.init`. They would wait for this task before resolving
@@ -191,6 +192,13 @@ function disconnect(connectionID, keyToRemoveFromEvictionBlocklist) {
  * @param value value to store
  */
 function set(key, value) {
+    // check if the value is compatible with the existing value in the storage
+    const existingValue = OnyxCache_1.default.getValue(key, false);
+    const { isCompatible, existingValueType, newValueType } = utils_1.default.checkCompatibilityWithExistingValue(value, existingValue);
+    if (!isCompatible) {
+        Logger.logAlert(logMessages_1.default.incompatibleUpdateAlert(key, 'set', existingValueType, newValueType));
+        return Promise.resolve();
+    }
     // If the value is null, we remove the key from storage
     const { value: valueAfterRemoving, wasRemoved } = OnyxUtils_1.default.removeNullValues(key, value);
     const valueWithoutNullValues = valueAfterRemoving;
@@ -275,7 +283,17 @@ function merge(key, changes) {
         try {
             // We first only merge the changes, so we can provide these to the native implementation (SQLite uses only delta changes in "JSON_PATCH" to merge)
             // We don't want to remove null values from the "batchedDeltaChanges", because SQLite uses them to remove keys from storage natively.
-            const batchedDeltaChanges = OnyxUtils_1.default.applyMerge(undefined, mergeQueue[key], false);
+            const validChanges = mergeQueue[key].filter((change) => {
+                const { isCompatible, existingValueType, newValueType } = utils_1.default.checkCompatibilityWithExistingValue(change, existingValue);
+                if (!isCompatible) {
+                    Logger.logAlert(logMessages_1.default.incompatibleUpdateAlert(key, 'merge', existingValueType, newValueType));
+                }
+                return isCompatible;
+            });
+            if (!validChanges.length) {
+                return undefined;
+            }
+            const batchedDeltaChanges = OnyxUtils_1.default.applyMerge(undefined, validChanges, false);
             // Case (1): When there is no existing value in storage, we want to set the value instead of merge it.
             // Case (2): The presence of a top-level `null` in the merge queue instructs us to drop the whole existing value.
             // In this case, we can't simply merge the batched changes with the existing value, because then the null in the merge queue would have no effect
@@ -358,8 +376,14 @@ function mergeCollection(collectionKey, collection) {
             return true;
         });
         const existingKeys = keys.filter((key) => persistedKeys.has(key));
+        const cachedCollectionForExistingKeys = OnyxUtils_1.default.getCachedCollection(collectionKey, existingKeys);
         const newKeys = keys.filter((key) => !persistedKeys.has(key));
         const existingKeyCollection = existingKeys.reduce((obj, key) => {
+            const { isCompatible, existingValueType, newValueType } = utils_1.default.checkCompatibilityWithExistingValue(mergedCollection[key], cachedCollectionForExistingKeys[key]);
+            if (!isCompatible) {
+                Logger.logAlert(logMessages_1.default.incompatibleUpdateAlert(key, 'mergeCollection', existingValueType, newValueType));
+                return obj;
+            }
             // eslint-disable-next-line no-param-reassign
             obj[key] = mergedCollection[key];
             return obj;
@@ -377,6 +401,9 @@ function mergeCollection(collectionKey, collection) {
         // because we will simply overwrite the existing values in storage.
         const keyValuePairsForNewCollection = OnyxUtils_1.default.prepareKeyValuePairsForStorage(newCollection, true);
         const promises = [];
+        // We need to get the previously existing values so we can compare the new ones
+        // against them, to avoid unnecessary subscriber updates.
+        const previousCollectionPromise = Promise.all(existingKeys.map((key) => OnyxUtils_1.default.get(key).then((value) => [key, value]))).then(Object.fromEntries);
         // New keys will be added via multiSet while existing keys will be updated using multiMerge
         // This is because setting a key that doesn't exist yet with multiMerge will throw errors
         if (keyValuePairsForExistingCollection.length > 0) {
@@ -385,11 +412,13 @@ function mergeCollection(collectionKey, collection) {
         if (keyValuePairsForNewCollection.length > 0) {
             promises.push(storage_1.default.multiSet(keyValuePairsForNewCollection));
         }
+        // finalMergedCollection contains all the keys that were merged, without the keys of incompatible updates
+        const finalMergedCollection = Object.assign(Object.assign({}, existingKeyCollection), newCollection);
         // Prefill cache if necessary by calling get() on any existing keys and then merge original data to cache
         // and update all subscribers
-        const promiseUpdate = Promise.all(existingKeys.map(OnyxUtils_1.default.get)).then(() => {
-            OnyxCache_1.default.merge(mergedCollection);
-            return OnyxUtils_1.default.scheduleNotifyCollectionSubscribers(collectionKey, mergedCollection);
+        const promiseUpdate = previousCollectionPromise.then((previousCollection) => {
+            OnyxCache_1.default.merge(finalMergedCollection);
+            return OnyxUtils_1.default.scheduleNotifyCollectionSubscribers(collectionKey, finalMergedCollection, previousCollection);
         });
         return Promise.all(promises)
             .catch((error) => OnyxUtils_1.default.evictStorageAndRetry(error, mergeCollection, collectionKey, mergedCollection))

package/dist/OnyxUtils.d.ts

@@ -103,18 +103,18 @@ declare function addToEvictionBlockList(key: OnyxKey, connectionID: number): voi
  * removed.
  */
 declare function addAllSafeEvictionKeysToRecentlyAccessedList(): Promise<void>;
-declare function getCachedCollection<TKey extends CollectionKeyBase>(collectionKey: TKey): NonNullable<OnyxCollection<KeyValueMapping[TKey]>>;
+declare function getCachedCollection<TKey extends CollectionKeyBase>(collectionKey: TKey, collectionMemberKeys?: string[]): NonNullable<OnyxCollection<KeyValueMapping[TKey]>>;
 /**
  * When a collection of keys change, search for any callbacks matching the collection key and trigger those callbacks
  */
-declare function keysChanged<TKey extends CollectionKeyBase>(collectionKey: TKey, partialCollection: OnyxCollection<KeyValueMapping[TKey]>, notifyRegularSubscibers?: boolean, notifyWithOnyxSubscibers?: boolean): void;
+declare function keysChanged<TKey extends CollectionKeyBase>(collectionKey: TKey, partialCollection: OnyxCollection<KeyValueMapping[TKey]>, previousPartialCollection: OnyxCollection<KeyValueMapping[TKey]> | undefined, notifyRegularSubscibers?: boolean, notifyWithOnyxSubscibers?: boolean): void;
 /**
  * When a key change happens, search for any callbacks matching the key or collection key and trigger those callbacks
  *
  * @example
  * keyChanged(key, value, subscriber => subscriber.initWithStoredValues === false)
  */
-declare function keyChanged<TKey extends OnyxKey>(key: TKey, data: OnyxValue<TKey>, prevData: 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, notifyRegularSubscibers?: boolean, notifyWithOnyxSubscibers?: boolean): void;
 /**
  * Sends the data obtained from the keys to the connection. It either:
  *     - sets state on the withOnyxInstances
@@ -136,13 +136,13 @@ declare function getCollectionDataAndSendAsObject<TKey extends OnyxKey>(matching
  * @example
  * scheduleSubscriberUpdate(key, value, subscriber => subscriber.initWithStoredValues === false)
  */
-declare function scheduleSubscriberUpdate<TKey extends OnyxKey>(key: TKey, value: OnyxValue<TKey>, prevValue: OnyxValue<TKey>, canUpdateSubscriber?: (subscriber?: Mapping<OnyxKey>) => boolean): Promise<void>;
+declare function scheduleSubscriberUpdate<TKey extends OnyxKey>(key: TKey, value: OnyxValue<TKey>, previousValue: OnyxValue<TKey>, canUpdateSubscriber?: (subscriber?: Mapping<OnyxKey>) => boolean): Promise<void>;
 /**
  * This method is similar to notifySubscribersOnNextTick but it is built for working specifically with collections
  * so that keysChanged() is triggered for the collection and not keyChanged(). If this was not done, then the
  * subscriber callbacks receive the data in a different format than they normally expect and it breaks code.
  */
-declare function scheduleNotifyCollectionSubscribers<TKey extends OnyxKey>(key: TKey, value: OnyxCollection<KeyValueMapping[TKey]>): Promise<void>;
+declare function scheduleNotifyCollectionSubscribers<TKey extends OnyxKey>(key: TKey, value: OnyxCollection<KeyValueMapping[TKey]>, previousValue?: OnyxCollection<KeyValueMapping[TKey]>): Promise<void>;
 /**
  * Remove a key from Onyx and update the subscribers
  */

package/dist/OnyxUtils.js

@@ -323,9 +323,9 @@ function addAllSafeEvictionKeysToRecentlyAccessedList() {
         });
     });
 }
-function getCachedCollection(collectionKey) {
-    const collectionMemberKeys = Array.from(OnyxCache_1.default.getAllKeys()).filter((storedKey) => isCollectionMemberKey(collectionKey, storedKey));
-    return collectionMemberKeys.reduce((prev, key) => {
+function getCachedCollection(collectionKey, collectionMemberKeys) {
+    const resolvedCollectionMemberKeys = collectionMemberKeys || Array.from(OnyxCache_1.default.getAllKeys()).filter((storedKey) => isCollectionMemberKey(collectionKey, storedKey));
+    return resolvedCollectionMemberKeys.reduce((prev, key) => {
         const cachedValue = OnyxCache_1.default.getValue(key);
         if (!cachedValue) {
             return prev;
@@ -338,7 +338,16 @@ function getCachedCollection(collectionKey) {
 /**
  * When a collection of keys change, search for any callbacks matching the collection key and trigger those callbacks
  */
-function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers = true, notifyWithOnyxSubscibers = true) {
+function keysChanged(collectionKey, partialCollection, previousPartialCollection, notifyRegularSubscibers = true, notifyWithOnyxSubscibers = true) {
+    const previousCollectionWithoutNestedNulls = previousPartialCollection === undefined ? {} : utils_1.default.removeNestedNullValues(previousPartialCollection);
+    // We prepare the "cached collection" which is the entire collection + the new partial data that
+    // was merged in via mergeCollection().
+    const cachedCollection = getCachedCollection(collectionKey);
+    const cachedCollectionWithoutNestedNulls = utils_1.default.removeNestedNullValues(cachedCollection);
+    // If the previous collection equals the new collection then we do not need to notify any subscribers.
+    if (previousPartialCollection !== undefined && (0, fast_equals_1.deepEqual)(cachedCollectionWithoutNestedNulls, previousCollectionWithoutNestedNulls)) {
+        return;
+    }
     // We are iterating over all subscribers similar to keyChanged(). However, we are looking for subscribers who are subscribing to either a collection key or
     // individual collection key member for the collection that is being updated. It is important to note that the collection parameter cane be a PARTIAL collection
     // and does not represent all of the combined keys and values for a collection key. It is just the "new" data that was merged in via mergeCollection().
@@ -360,10 +369,6 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
          * e.g. Onyx.connect({key: `${ONYXKEYS.COLLECTION.REPORT}{reportID}`, callback: ...});
          */
         const isSubscribedToCollectionMemberKey = isCollectionMemberKey(collectionKey, subscriber.key);
-        // We prepare the "cached collection" which is the entire collection + the new partial data that
-        // was merged in via mergeCollection().
-        const cachedCollection = getCachedCollection(collectionKey);
-        const cachedCollectionWithoutNestedNulls = utils_1.default.removeNestedNullValues(cachedCollection);
         // Regular Onyx.connect() subscriber found.
         if (typeof subscriber.callback === 'function') {
             if (!notifyRegularSubscibers) {
@@ -381,6 +386,9 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
                 const dataKeys = Object.keys(partialCollection !== null && partialCollection !== void 0 ? partialCollection : {});
                 for (let j = 0; j < dataKeys.length; j++) {
                     const dataKey = dataKeys[j];
+                    if ((0, fast_equals_1.deepEqual)(cachedCollectionWithoutNestedNulls[dataKey], previousCollectionWithoutNestedNulls[dataKey])) {
+                        continue;
+                    }
                     subscriber.callback(cachedCollectionWithoutNestedNulls[dataKey], dataKey);
                 }
                 continue;
@@ -388,6 +396,9 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
             // And if the subscriber is specifically only tracking a particular collection member key then we will
             // notify them with the cached data for that key only.
             if (isSubscribedToCollectionMemberKey) {
+                if ((0, fast_equals_1.deepEqual)(cachedCollectionWithoutNestedNulls[subscriber.key], previousCollectionWithoutNestedNulls[subscriber.key])) {
+                    continue;
+                }
                 const subscriberCallback = subscriber.callback;
                 subscriberCallback(cachedCollectionWithoutNestedNulls[subscriber.key], subscriber.key);
                 continue;
@@ -435,6 +446,9 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
             }
             // If a React component is only interested in a single key then we can set the cached value directly to the state name.
             if (isSubscribedToCollectionMemberKey) {
+                if ((0, fast_equals_1.deepEqual)(cachedCollectionWithoutNestedNulls[subscriber.key], previousCollectionWithoutNestedNulls[subscriber.key])) {
+                    continue;
+                }
                 // However, we only want to update this subscriber if the partial data contains a change.
                 // Otherwise, we would update them with a value they already have and trigger an unnecessary re-render.
                 const dataFromCollection = partialCollection === null || partialCollection === void 0 ? void 0 : partialCollection[subscriber.key];
@@ -484,9 +498,9 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
  * @example
  * keyChanged(key, value, subscriber => subscriber.initWithStoredValues === false)
  */
-function keyChanged(key, data, prevData, canUpdateSubscriber = () => true, notifyRegularSubscibers = true, notifyWithOnyxSubscibers = true) {
+function keyChanged(key, value, previousValue, canUpdateSubscriber = () => true, notifyRegularSubscibers = true, notifyWithOnyxSubscibers = true) {
     // Add or remove this key from the recentlyAccessedKeys lists
-    if (data !== null) {
+    if (value !== null) {
         addLastAccessedKey(key);
     }
     else {
@@ -509,13 +523,13 @@ function keyChanged(key, data, prevData, canUpdateSubscriber = () => true, notif
             if (isCollectionKey(subscriber.key) && subscriber.waitForCollectionCallback) {
                 const cachedCollection = getCachedCollection(subscriber.key);
                 const cachedCollectionWithoutNestedNulls = utils_1.default.removeNestedNullValues(cachedCollection);
-                cachedCollectionWithoutNestedNulls[key] = data;
+                cachedCollectionWithoutNestedNulls[key] = value;
                 subscriber.callback(cachedCollectionWithoutNestedNulls);
                 continue;
             }
-            const dataWithoutNestedNulls = utils_1.default.removeNestedNullValues(data);
+            const valueWithoutNestedNulls = utils_1.default.removeNestedNullValues(value);
             const subscriberCallback = subscriber.callback;
-            subscriberCallback(dataWithoutNestedNulls, key);
+            subscriberCallback(valueWithoutNestedNulls, key);
             continue;
         }
         // Subscriber connected via withOnyx() HOC
@@ -532,7 +546,7 @@ function keyChanged(key, data, prevData, canUpdateSubscriber = () => true, notif
                     subscriber.withOnyxInstance.setStateProxy((prevState) => {
                         const prevWithOnyxData = prevState[subscriber.statePropertyName];
                         const newWithOnyxData = {
-                            [key]: selector(data, subscriber.withOnyxInstance.state),
+                            [key]: selector(value, subscriber.withOnyxInstance.state),
                         };
                         const prevDataWithNewData = Object.assign(Object.assign({}, prevWithOnyxData), newWithOnyxData);
                         if (!(0, fast_equals_1.deepEqual)(prevWithOnyxData, prevDataWithNewData)) {
@@ -547,7 +561,7 @@ function keyChanged(key, data, prevData, canUpdateSubscriber = () => true, notif
                 }
                 subscriber.withOnyxInstance.setStateProxy((prevState) => {
                     const collection = prevState[subscriber.statePropertyName] || {};
-                    const newCollection = Object.assign(Object.assign({}, collection), { [key]: data });
+                    const newCollection = Object.assign(Object.assign({}, collection), { [key]: value });
                     PerformanceUtils.logSetStateCall(subscriber, collection, newCollection, 'keyChanged', key);
                     return {
                         [subscriber.statePropertyName]: newCollection,
@@ -559,9 +573,9 @@ function keyChanged(key, data, prevData, canUpdateSubscriber = () => true, notif
             // returned by the selector and only if the selected data has changed.
             if (selector) {
                 subscriber.withOnyxInstance.setStateProxy(() => {
-                    const previousValue = selector(prevData, subscriber.withOnyxInstance.state);
-                    const newValue = selector(data, subscriber.withOnyxInstance.state);
-                    if (!(0, fast_equals_1.deepEqual)(previousValue, newValue)) {
+                    const prevValue = selector(previousValue, subscriber.withOnyxInstance.state);
+                    const newValue = selector(value, subscriber.withOnyxInstance.state);
+                    if (!(0, fast_equals_1.deepEqual)(prevValue, newValue)) {
                         return {
                             [subscriber.statePropertyName]: newValue,
                         };
@@ -572,17 +586,17 @@ function keyChanged(key, data, prevData, canUpdateSubscriber = () => true, notif
             }
             // If we did not match on a collection key then we just set the new data to the state property
             subscriber.withOnyxInstance.setStateProxy((prevState) => {
-                const prevWithOnyxData = prevState[subscriber.statePropertyName];
+                const prevWithOnyxValue = prevState[subscriber.statePropertyName];
                 // Avoids triggering unnecessary re-renders when feeding empty objects
-                if (utils_1.default.isEmptyObject(data) && utils_1.default.isEmptyObject(prevWithOnyxData)) {
+                if (utils_1.default.isEmptyObject(value) && utils_1.default.isEmptyObject(prevWithOnyxValue)) {
                     return null;
                 }
-                if (prevWithOnyxData === data) {
+                if (prevWithOnyxValue === value) {
                     return null;
                 }
-                PerformanceUtils.logSetStateCall(subscriber, prevData, data, 'keyChanged', key);
+                PerformanceUtils.logSetStateCall(subscriber, previousValue, value, 'keyChanged', key);
                 return {
-                    [subscriber.statePropertyName]: data,
+                    [subscriber.statePropertyName]: value,
                 };
             });
             continue;
@@ -719,9 +733,9 @@ function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
  * @example
  * scheduleSubscriberUpdate(key, value, subscriber => subscriber.initWithStoredValues === false)
  */
-function scheduleSubscriberUpdate(key, value, prevValue, canUpdateSubscriber = () => true) {
-    const promise = Promise.resolve().then(() => keyChanged(key, value, prevValue, canUpdateSubscriber, true, false));
-    batchUpdates(() => keyChanged(key, value, prevValue, canUpdateSubscriber, false, true));
+function scheduleSubscriberUpdate(key, value, previousValue, canUpdateSubscriber = () => true) {
+    const promise = Promise.resolve().then(() => keyChanged(key, value, previousValue, canUpdateSubscriber, true, false));
+    batchUpdates(() => keyChanged(key, value, previousValue, canUpdateSubscriber, false, true));
     return Promise.all([maybeFlushBatchUpdates(), promise]).then(() => undefined);
 }
 /**
@@ -729,9 +743,9 @@ function scheduleSubscriberUpdate(key, value, prevValue, canUpdateSubscriber = (
  * so that keysChanged() is triggered for the collection and not keyChanged(). If this was not done, then the
  * subscriber callbacks receive the data in a different format than they normally expect and it breaks code.
  */
-function scheduleNotifyCollectionSubscribers(key, value) {
-    const promise = Promise.resolve().then(() => keysChanged(key, value, true, false));
-    batchUpdates(() => keysChanged(key, value, false, true));
+function scheduleNotifyCollectionSubscribers(key, value, previousValue) {
+    const promise = Promise.resolve().then(() => keysChanged(key, value, previousValue, true, false));
+    batchUpdates(() => keysChanged(key, value, previousValue, false, true));
     return Promise.all([maybeFlushBatchUpdates(), promise]).then(() => undefined);
 }
 /**

package/dist/logMessages.d.ts

@@ -0,0 +1,4 @@
+declare const logMessages: {
+    incompatibleUpdateAlert: (key: string, operation: string, existingValueType?: string, newValueType?: string) => string;
+};
+export default logMessages;

package/dist/logMessages.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const logMessages = {
+    incompatibleUpdateAlert: (key, operation, existingValueType, newValueType) => {
+        return `Warning: Trying to apply "${operation}" with ${newValueType !== null && newValueType !== void 0 ? newValueType : 'unknown'} type to ${existingValueType !== null && existingValueType !== void 0 ? existingValueType : 'unknown'} type in the key "${key}"`;
+    },
+};
+exports.default = logMessages;

package/dist/utils.d.ts

@@ -15,10 +15,17 @@ declare function fastMerge<TObject extends Record<string, unknown>>(target: TObj
 declare function removeNestedNullValues<TObject extends Record<string, unknown>>(value: unknown | unknown[] | TObject): Record<string, unknown> | unknown[] | null;
 /** Formats the action name by uppercasing and adding the key if provided. */
 declare function formatActionName(method: string, key?: OnyxKey): string;
+/** validate that the update and the existing value are compatible */
+declare function checkCompatibilityWithExistingValue(value: unknown, existingValue: unknown): {
+    isCompatible: boolean;
+    existingValueType?: string;
+    newValueType?: string;
+};
 declare const _default: {
     isEmptyObject: typeof isEmptyObject;
     fastMerge: typeof fastMerge;
     formatActionName: typeof formatActionName;
     removeNestedNullValues: typeof removeNestedNullValues;
+    checkCompatibilityWithExistingValue: typeof checkCompatibilityWithExistingValue;
 };
 export default _default;

package/dist/utils.js

@@ -98,4 +98,24 @@ function removeNestedNullValues(value) {
 function formatActionName(method, key) {
     return key ? `${method.toUpperCase()}/${key}` : method.toUpperCase();
 }
-exports.default = { isEmptyObject, fastMerge, formatActionName, removeNestedNullValues };
+/** validate that the update and the existing value are compatible */
+function checkCompatibilityWithExistingValue(value, existingValue) {
+    if (!existingValue || !value) {
+        return {
+            isCompatible: true,
+        };
+    }
+    const existingValueType = Array.isArray(existingValue) ? 'array' : 'non-array';
+    const newValueType = Array.isArray(value) ? 'array' : 'non-array';
+    if (existingValueType !== newValueType) {
+        return {
+            isCompatible: false,
+            existingValueType,
+            newValueType,
+        };
+    }
+    return {
+        isCompatible: true,
+    };
+}
+exports.default = { isEmptyObject, fastMerge, formatActionName, removeNestedNullValues, checkCompatibilityWithExistingValue };

package/package.json

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