react-native-onyx 1.0.53 → 1.0.55

package/dist/web.development.js

@@ -102,6 +102,9 @@ const METHOD = {
   CLEAR: 'clear'
 };
 
+// Key/value store of Onyx key and arrays of values to merge
+const mergeQueue = {};
+
 // Keeps track of the last connectionID that was used so we can keep incrementing it
 let lastConnectionID = 0;
 
@@ -924,6 +927,38 @@ function evictStorageAndRetry(error, onyxMethod) {for (var _len = arguments.leng
   then(() => onyxMethod(...args));
 }
 
+/**
+ * Notifys subscribers and writes current value to cache
+ *
+ * @param {String} key
+ * @param {*} value
+ * @param {Boolean} hasChanged
+ * @param {String} method
+ */
+function broadcastUpdate(key, value, hasChanged, method) {
+  // Logging properties only since values could be sensitive things we don't want to log
+  _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo(`${method}() called for key: ${key}${underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject(value) ? ` properties: ${underscore__WEBPACK_IMPORTED_MODULE_2___default().keys(value).join(',')}` : ''}`);
+
+  // Update subscribers if the cached value has changed, or when the subscriber specifically requires
+  // all updates regardless of value changes (indicated by initWithStoredValues set to false).
+  if (hasChanged) {
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].set(key, value);
+  } else {
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].addToAccessedKeys(key);
+  }
+
+  notifySubscribersOnNextTick(key, value, (subscriber) => hasChanged || subscriber.initWithStoredValues === false);
+}
+
+/**
+ * @private
+ * @param {String} key
+ * @returns {Boolean}
+ */
+function hasPendingMergeForKey(key) {
+  return Boolean(mergeQueue[key]);
+}
+
 /**
  * Write a value to our store with the given key
  *
@@ -937,24 +972,20 @@ function set(key, value) {
     return remove(key);
   }
 
-  // eslint-disable-next-line no-use-before-define
   if (hasPendingMergeForKey(key)) {
     _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert(`Onyx.set() called after Onyx.merge() for key: ${key}. It is recommended to use set() or merge() not both.`);
   }
 
-  // If the value in the cache is the same as what we have then do not update subscribers unless they
-  // have initWithStoredValues: false then they MUST get all updates even if nothing has changed.
-  if (!_OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasValueChanged(key, value)) {
-    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].addToAccessedKeys(key);
-    notifySubscribersOnNextTick(key, value, (subscriber) => subscriber.initWithStoredValues === false);
+  const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasValueChanged(key, value);
+
+  // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
+  broadcastUpdate(key, value, hasChanged, 'set');
+
+  // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
+  if (!hasChanged) {
     return Promise.resolve();
   }
 
-  // Adds the key to cache when it's not available
-  _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].set(key, value);
-  notifySubscribersOnNextTick(key, value);
-
-  // Write the thing to persistent storage, which will trigger a storage event for any other tabs open on this domain
   return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].setItem(key, value).
   catch((error) => evictStorageAndRetry(error, set, key, value));
 }
@@ -992,67 +1023,39 @@ function multiSet(data) {
   catch((error) => evictStorageAndRetry(error, multiSet, data));
 }
 
-// Key/value store of Onyx key and arrays of values to merge
-const mergeQueue = {};
-
-/**
- * @private
- * @param {String} key
- * @returns {Boolean}
- */
-function hasPendingMergeForKey(key) {
-  return Boolean(mergeQueue[key]);
-}
-
 /**
- * Given an Onyx key and value this method will combine all queued
- * value updates and return a single value. Merge attempts are
- * batched. They must occur after a single call to get() so we
- * can avoid race conditions.
+ * Merges an array of changes with an existing value
  *
  * @private
- * @param {String} key
- * @param {*} data
- *
+ * @param {*} existingValue
+ * @param {Array<*>} changes Array of changes that should be applied to the existing value
  * @returns {*}
  */
-function applyMerge(key, data) {
-  const mergeValues = mergeQueue[key];
-  if (underscore__WEBPACK_IMPORTED_MODULE_2___default().isArray(data) || underscore__WEBPACK_IMPORTED_MODULE_2___default().every(mergeValues, (underscore__WEBPACK_IMPORTED_MODULE_2___default().isArray))) {
-    // Array values will always just concatenate
-    // more items onto the end of the array
-    return underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(mergeValues, (modifiedData, mergeValue) => [
-    ...modifiedData,
-    ...mergeValue],
-    data || []);
-  }
-
-  if (underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject(data) || underscore__WEBPACK_IMPORTED_MODULE_2___default().every(mergeValues, (underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject))) {
-    // Object values are merged one after the other
-    return underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(mergeValues, (modifiedData, mergeValue) => {
-      // lodash adds a small overhead so we don't use it here
-      // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
-      const newData = Object.assign({}, (0,_fastMerge__WEBPACK_IMPORTED_MODULE_9__["default"])(modifiedData, mergeValue));
+function applyMerge(existingValue, changes) {
+  const lastChange = underscore__WEBPACK_IMPORTED_MODULE_2___default().last(changes);
 
-      // We will also delete any object keys that are undefined or null.
-      // Deleting keys is not supported by AsyncStorage so we do it this way.
-      // Remove all first level keys that are explicitly set to null.
-      return underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(newData, (value, finalObjectKey) => underscore__WEBPACK_IMPORTED_MODULE_2___default().isNull(mergeValue[finalObjectKey]));
-    }, data || {});
+  if (underscore__WEBPACK_IMPORTED_MODULE_2___default().isArray(existingValue) || underscore__WEBPACK_IMPORTED_MODULE_2___default().isArray(lastChange)) {
+    return lastChange;
+  }
+
+  if (underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject(existingValue) || underscore__WEBPACK_IMPORTED_MODULE_2___default().every(changes, (underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject))) {
+    // Object values are merged one after the other
+    // lodash adds a small overhead so we don't use it here
+    // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
+    return underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(changes, (modifiedData, change) => (0,_fastMerge__WEBPACK_IMPORTED_MODULE_9__["default"])(modifiedData, change),
+    existingValue || {});
   }
 
   // If we have anything else we can't merge it so we'll
   // simply return the last value that was queued
-  return underscore__WEBPACK_IMPORTED_MODULE_2___default().last(mergeValues);
+  return lastChange;
 }
 
 /**
  * Merge a new value into an existing value at a key.
  *
- * The types of values that can be merged are `Object` and `Array`. To set another type of value use `Onyx.set()`. Merge
- * behavior uses lodash/merge under the hood for `Object` and simple concatenation for `Array`. However, it's important
- * to note that if you have an array value property on an `Object` that the default behavior of lodash/merge is not to
- * concatenate. See here: https://github.com/lodash/lodash/issues/2872
+ * The types of values that can be merged are `Object` and `Array`. To set another type of value use `Onyx.set()`.
+ * Values of type `Object` get merged with the old value, whilst for `Array`'s we simply replace the current value with the new one.
  *
  * Calls to `Onyx.merge()` are batched so that any calls performed in a single tick will stack in a queue and get
  * applied in the order they were called. Note: `Onyx.set()` calls do not work this way so use caution when mixing
@@ -1065,26 +1068,48 @@ function applyMerge(key, data) {
  * Onyx.merge(ONYXKEYS.POLICY, {name: 'My Workspace'}); // -> {id: 1, name: 'My Workspace'}
  *
  * @param {String} key ONYXKEYS key
- * @param {(Object|Array)} value Object or Array value to merge
+ * @param {(Object|Array)} changes Object or Array value to merge
  * @returns {Promise}
  */
-function merge(key, value) {
+function merge(key, changes) {
+  // Merge attempts are batched together. The delta should be applied after a single call to get() to prevent a race condition.
+  // Using the initial value from storage in subsequent merge attempts will lead to an incorrect final merged value.
   if (mergeQueue[key]) {
-    mergeQueue[key].push(value);
+    mergeQueue[key].push(changes);
     return Promise.resolve();
   }
+  mergeQueue[key] = [changes];
 
-  mergeQueue[key] = [value];
   return get(key).
-  then((data) => {
+  then((existingValue) => {
     try {
-      const modifiedData = applyMerge(key, data);
+      // 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)
+      const batchedChanges = applyMerge(undefined, mergeQueue[key]);
 
       // Clean up the write queue so we
       // don't apply these changes again
       delete mergeQueue[key];
 
-      return set(key, modifiedData);
+      // After that we merge the batched changes with the existing value
+      let modifiedData = applyMerge(existingValue, [batchedChanges]);
+
+      // For objects, the key for null values needs to be removed from the object to ensure the value will get removed from storage completely.
+      // On native, SQLite will remove top-level keys that are null. To be consistent, we remove them on web too.
+      if (!underscore__WEBPACK_IMPORTED_MODULE_2___default().isArray(modifiedData) && underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject(modifiedData)) {
+        modifiedData = underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(modifiedData, (value) => underscore__WEBPACK_IMPORTED_MODULE_2___default().isNull(value));
+      }
+
+      const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasValueChanged(key, modifiedData);
+
+      // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
+      broadcastUpdate(key, modifiedData, hasChanged, 'merge');
+
+      // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
+      if (!hasChanged) {
+        return Promise.resolve();
+      }
+
+      return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].mergeItem(key, batchedChanges, modifiedData);
     } catch (error) {
       _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
     }
@@ -1401,6 +1426,7 @@ const Onyx = {
   multiSet,
   merge,
   mergeCollection,
+  hasPendingMergeForKey,
   update,
   clear,
   getAllKeys,
@@ -2208,6 +2234,16 @@ const provider = {
     return localforage__WEBPACK_IMPORTED_MODULE_0___default().setItem(key, value);
   }),
 
+  /**
+   * Sets the value for a given key. The only requirement is that the value should be serializable to JSON string
+   * @param {String} key
+   * @param {*} value
+   * @return {Promise<void>}
+   */
+  setItem(key, value) {
+    return this.setItemQueue.push({ key, value });
+  },
+
   /**
    * Get multiple key-value pairs for the give array of keys in a batch
    * @param {String[]} keys
@@ -2235,6 +2271,17 @@ const provider = {
     return Promise.all(tasks).then(() => Promise.resolve());
   },
 
+  /**
+   * Merging an existing value with a new one
+   * @param {String} key
+   * @param {any} _changes - not used, as we rely on the pre-merged data from the `modifiedData`
+   * @param {any} modifiedData - the pre-merged data from `Onyx.applyMerge`
+   * @return {Promise<void>}
+   */
+  mergeItem(key, _changes, modifiedData) {
+    return this.setItem(key, modifiedData);
+  },
+
   /**
    * Stores multiple key-value pairs in a batch
    * @param {Array<[key, value]>} pairs
@@ -2285,16 +2332,6 @@ const provider = {
     return localforage__WEBPACK_IMPORTED_MODULE_0___default().removeItems(keys);
   },
 
-  /**
-   * Sets the value for a given key. The only requirement is that the value should be serializable to JSON string
-   * @param {String} key
-   * @param {*} value
-   * @return {Promise<void>}
-   */
-  setItem(key, value) {
-    return this.setItemQueue.push({ key, value });
-  },
-
   /**
    * @param {string[]} keyList
    */