react-native-onyx 1.0.77 → 1.0.79

package/dist/web.development.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("fast-equals"), require("underscore"), require("idb-keyval"), require("lodash/transform"), require("react"));
+		module.exports = factory(require("fast-equals"), require("underscore"), require("idb-keyval"), require("lodash/transform"), require("react-dom"), require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["fast-equals", "underscore", "idb-keyval", "lodash/transform", "react"], factory);
+		define(["fast-equals", "underscore", "idb-keyval", "lodash/transform", "react-dom", "react"], factory);
 	else if(typeof exports === 'object')
-		exports["react-native-onyx/web"] = factory(require("fast-equals"), require("underscore"), require("idb-keyval"), require("lodash/transform"), require("react"));
+		exports["react-native-onyx/web"] = factory(require("fast-equals"), require("underscore"), require("idb-keyval"), require("lodash/transform"), require("react-dom"), require("react"));
 	else
-		root["react-native-onyx/web"] = factory(root["fast-equals"], root["underscore"], root["idb-keyval"], root["lodash/transform"], root["react"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE_fast_equals__, __WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_idb_keyval__, __WEBPACK_EXTERNAL_MODULE_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react__) => {
+		root["react-native-onyx/web"] = factory(root["fast-equals"], root["underscore"], root["idb-keyval"], root["lodash/transform"], root["react-dom"], root["react"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE_fast_equals__, __WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_idb_keyval__, __WEBPACK_EXTERNAL_MODULE_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE_react__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -77,9 +77,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _OnyxCache__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./OnyxCache */ "./lib/OnyxCache.js");
 /* harmony import */ var _Str__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Str */ "./lib/Str.js");
 /* harmony import */ var _createDeferredTask__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./createDeferredTask */ "./lib/createDeferredTask.js");
-/* harmony import */ var _fastMerge__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.js");
+/* harmony import */ var _fastMerge__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.js");
 /* harmony import */ var _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./metrics/PerformanceUtils */ "./lib/metrics/PerformanceUtils.js");
 /* harmony import */ var _storage__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./storage */ "./lib/storage/index.web.js");
+/* harmony import */ var _batch__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./batch */ "./lib/batch.js");
 /* eslint-disable no-continue */
 
 
@@ -91,6 +92,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 // Method constants
 const METHOD = {
   SET: 'set',
@@ -102,6 +104,7 @@ const METHOD = {
 
 // Key/value store of Onyx key and arrays of values to merge
 const mergeQueue = {};
+const mergeQueuePromise = {};
 
 // Keeps track of the last connectionID that was used so we can keep incrementing it
 let lastConnectionID = 0;
@@ -415,8 +418,10 @@ function getCachedCollection(collectionKey) {
  * @private
  * @param {String} collectionKey
  * @param {Object} partialCollection - a partial collection of grouped member keys
+ * @param {boolean} [notifyRegularSubscibers=true]
+ * @param {boolean} [notifyWithOnyxSubscibers=true]
  */
-function keysChanged(collectionKey, partialCollection) {
+function keysChanged(collectionKey, partialCollection) {let notifyRegularSubscibers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;let notifyWithOnyxSubscibers = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
   // 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().
@@ -448,6 +453,10 @@ function keysChanged(collectionKey, partialCollection) {
 
     // Regular Onyx.connect() subscriber found.
     if (underscore__WEBPACK_IMPORTED_MODULE_1___default().isFunction(subscriber.callback)) {
+      if (!notifyRegularSubscibers) {
+        continue;
+      }
+
       // If they are subscribed to the collection key and using waitForCollectionCallback then we'll
       // send the whole cached collection.
       if (isSubscribedToCollectionKey) {
@@ -478,6 +487,10 @@ function keysChanged(collectionKey, partialCollection) {
 
     // React component subscriber found.
     if (subscriber.withOnyxInstance) {
+      if (!notifyWithOnyxSubscibers) {
+        continue;
+      }
+
       // We are subscribed to a collection key so we must update the data in state with the new
       // collection member key values from the partial update.
       if (isSubscribedToCollectionKey) {
@@ -569,8 +582,10 @@ function keysChanged(collectionKey, partialCollection) {
  * @param {String} key
  * @param {*} data
  * @param {Function} [canUpdateSubscriber] only subscribers that pass this truth test will be updated
+ * @param {boolean} [notifyRegularSubscibers=true]
+ * @param {boolean} [notifyWithOnyxSubscibers=true]
  */
-function keyChanged(key, data, canUpdateSubscriber) {
+function keyChanged(key, data, canUpdateSubscriber) {let notifyRegularSubscibers = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;let notifyWithOnyxSubscibers = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
   // Add or remove this key from the recentlyAccessedKeys lists
   if (!underscore__WEBPACK_IMPORTED_MODULE_1___default().isNull(data)) {
     addLastAccessedKey(key);
@@ -590,6 +605,9 @@ function keyChanged(key, data, canUpdateSubscriber) {
 
     // Subscriber is a regular call to connect() and provided a callback
     if (underscore__WEBPACK_IMPORTED_MODULE_1___default().isFunction(subscriber.callback)) {
+      if (!notifyRegularSubscibers) {
+        continue;
+      }
       if (isCollectionKey(subscriber.key) && subscriber.waitForCollectionCallback) {
         const cachedCollection = getCachedCollection(subscriber.key);
         cachedCollection[key] = data;
@@ -603,6 +621,10 @@ function keyChanged(key, data, canUpdateSubscriber) {
 
     // Subscriber connected via withOnyx() HOC
     if (subscriber.withOnyxInstance) {
+      if (!notifyWithOnyxSubscibers) {
+        continue;
+      }
+
       // Check if we are subscribing to a collection key and overwrite the collection member key value in state
       if (isCollectionKey(subscriber.key)) {
         // If the subscriber has a selector, then the consumer of this data must only be given the data
@@ -883,22 +905,62 @@ function disconnect(connectionID, keyToRemoveFromEvictionBlocklist) {
   delete callbackToStateMapping[connectionID];
 }
 
+let batchUpdatesPromise = null;
+let batchUpdatesQueue = [];
+
+/**
+ * We are batching together onyx updates. This helps with use cases where we schedule onyx updates after each other.
+ * This happens for example in the Onyx.update function, where we process API responses that might contain a lot of
+ * update operations. Instead of calling the subscribers for each update operation, we batch them together which will
+ * cause react to schedule the updates at once instead of after each other. This is mainly a performance optimization.
+ * @returns {Promise}
+ */
+function maybeFlushBatchUpdates() {
+  if (batchUpdatesPromise) {
+    return batchUpdatesPromise;
+  }
+
+  batchUpdatesPromise = new Promise((resolve) => {
+    /* We use (setTimeout, 0) here which should be called once native module calls are flushed (usually at the end of the frame)
+     * We may investigate if (setTimeout, 1) (which in React Native is equal to requestAnimationFrame) works even better
+     * then the batch will be flushed on next frame.
+     */
+    setTimeout(() => {
+      const updatesCopy = batchUpdatesQueue;
+      batchUpdatesQueue = [];
+      batchUpdatesPromise = null;
+      (0,_batch__WEBPACK_IMPORTED_MODULE_8__["default"])(() => {
+        updatesCopy.forEach((applyUpdates) => {
+          applyUpdates();
+        });
+      });
+
+      resolve();
+    }, 0);
+  });
+  return batchUpdatesPromise;
+}
+
+function batchUpdates(updates) {
+  batchUpdatesQueue.push(updates);
+  return maybeFlushBatchUpdates();
+}
+
 /**
- * This method mostly exists for historical reasons as this library was initially designed without a memory cache and one was added later.
- * For this reason, Onyx works more similar to what you might expect from a native AsyncStorage with reads, writes, etc all becoming
- * available async. Since we have code in our main applications that might expect things to work this way it's not safe to change this
- * behavior just yet.
+ * Schedules an update that will be appended to the macro task queue (so it doesn't update the subscribers immediately).
  *
  * @example
- * notifySubscribersOnNextTick(key, value, subscriber => subscriber.initWithStoredValues === false)
+ * scheduleSubscriberUpdate(key, value, subscriber => subscriber.initWithStoredValues === false)
  *
  * @param {String} key
  * @param {*} value
  * @param {Function} [canUpdateSubscriber] only subscribers that pass this truth test will be updated
+ * @returns {Promise}
  */
-// eslint-disable-next-line rulesdir/no-negated-variables
-function notifySubscribersOnNextTick(key, value, canUpdateSubscriber) {
-  Promise.resolve().then(() => keyChanged(key, value, canUpdateSubscriber));
+function scheduleSubscriberUpdate(key, value, canUpdateSubscriber) {
+  const promise = Promise.resolve().then(() => keyChanged(key, value, canUpdateSubscriber, true, false));
+  batchUpdates(() => keyChanged(key, value, canUpdateSubscriber, false, true));
+  return Promise.all([maybeFlushBatchUpdates(), promise]);
 }
 
 /**
@@ -908,10 +970,12 @@ function notifySubscribersOnNextTick(key, value, canUpdateSubscriber) {
  *
  * @param {String} key
  * @param {*} value
+ * @returns {Promise}
  */
-// eslint-disable-next-line rulesdir/no-negated-variables
-function notifyCollectionSubscribersOnNextTick(key, value) {
-  Promise.resolve().then(() => keysChanged(key, value));
+function scheduleNotifyCollectionSubscribers(key, value) {
+  const promise = Promise.resolve().then(() => keysChanged(key, value, true, false));
+  batchUpdates(() => keysChanged(key, value, false, true));
+  return Promise.all([maybeFlushBatchUpdates(), promise]);
 }
 
 /**
@@ -923,7 +987,7 @@ function notifyCollectionSubscribersOnNextTick(key, value) {
  */
 function remove(key) {
   _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].drop(key);
-  notifySubscribersOnNextTick(key, null);
+  scheduleSubscriberUpdate(key, null);
   return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].removeItem(key);
 }
 
@@ -984,6 +1048,7 @@ function evictStorageAndRetry(error, onyxMethod) {for (var _len = arguments.leng
  * @param {*} value
  * @param {Boolean} hasChanged
  * @param {String} method
+ * @returns {Promise}
  */
 function broadcastUpdate(key, value, hasChanged, method) {
   // Logging properties only since values could be sensitive things we don't want to log
@@ -997,7 +1062,7 @@ function broadcastUpdate(key, value, hasChanged, method) {
     _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].addToAccessedKeys(key);
   }
 
-  notifySubscribersOnNextTick(key, value, (subscriber) => hasChanged || subscriber.initWithStoredValues === false);
+  return scheduleSubscriberUpdate(key, value, (subscriber) => hasChanged || subscriber.initWithStoredValues === false);
 }
 
 /**
@@ -1048,15 +1113,16 @@ function set(key, value) {
   const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasValueChanged(key, valueWithNullRemoved);
 
   // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
-  broadcastUpdate(key, valueWithNullRemoved, hasChanged, 'set');
+  const updatePromise = broadcastUpdate(key, valueWithNullRemoved, 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();
+    return updatePromise;
   }
 
   return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].setItem(key, valueWithNullRemoved).
-  catch((error) => evictStorageAndRetry(error, set, key, valueWithNullRemoved));
+  catch((error) => evictStorageAndRetry(error, set, key, valueWithNullRemoved)).
+  then(() => updatePromise);
 }
 
 /**
@@ -1082,14 +1148,15 @@ function prepareKeyValuePairsForStorage(data) {
 function multiSet(data) {
   const keyValuePairs = prepareKeyValuePairsForStorage(data);
 
-  underscore__WEBPACK_IMPORTED_MODULE_1___default().each(data, (val, key) => {
+  const updatePromises = underscore__WEBPACK_IMPORTED_MODULE_1___default().map(data, (val, key) => {
     // Update cache and optimistically inform subscribers on the next tick
     _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].set(key, val);
-    notifySubscribersOnNextTick(key, val);
+    return scheduleSubscriberUpdate(key, val);
   });
 
   return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].multiSet(keyValuePairs).
-  catch((error) => evictStorageAndRetry(error, multiSet, data));
+  catch((error) => evictStorageAndRetry(error, multiSet, data)).
+  then(() => Promise.all(updatePromises));
 }
 
 /**
@@ -1111,7 +1178,7 @@ function applyMerge(existingValue, changes) {
     // 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_1___default().reduce(changes, (modifiedData, change) => (0,_fastMerge__WEBPACK_IMPORTED_MODULE_8__["default"])(modifiedData, change),
+    return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(changes, (modifiedData, change) => (0,_fastMerge__WEBPACK_IMPORTED_MODULE_9__["default"])(modifiedData, change),
     existingValue || {});
   }
 
@@ -1145,19 +1212,19 @@ function merge(key, changes) {
   // Using the initial value from storage in subsequent merge attempts will lead to an incorrect final merged value.
   if (mergeQueue[key]) {
     mergeQueue[key].push(changes);
-    return Promise.resolve();
+    return mergeQueuePromise[key];
   }
   mergeQueue[key] = [changes];
 
-  return get(key).
+  mergeQueuePromise[key] = get(key).
   then((existingValue) => {
     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)
       let batchedChanges = applyMerge(undefined, mergeQueue[key]);
 
-      // Clean up the write queue so we
-      // don't apply these changes again
+      // Clean up the write queue, so we don't apply these changes again
       delete mergeQueue[key];
+      delete mergeQueuePromise[key];
 
       // After that we merge the batched changes with the existing value
       const modifiedData = removeNullObjectValues(applyMerge(existingValue, [batchedChanges]));
@@ -1173,20 +1240,22 @@ function merge(key, changes) {
       const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["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');
+      const updatePromise = 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 updatePromise;
       }
 
-      return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].mergeItem(key, batchedChanges, modifiedData);
+      return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].mergeItem(key, batchedChanges, modifiedData).
+      then(() => updatePromise);
     } catch (error) {
       _Logger__WEBPACK_IMPORTED_MODULE_5__.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
+      return Promise.resolve();
     }
-
-    return Promise.resolve();
   });
+
+  return mergeQueuePromise[key];
 }
 
 /**
@@ -1199,7 +1268,7 @@ function initializeWithDefaultKeyStates() {
   then((pairs) => {
     const asObject = underscore__WEBPACK_IMPORTED_MODULE_1___default().object(pairs);
 
-    const merged = (0,_fastMerge__WEBPACK_IMPORTED_MODULE_8__["default"])(asObject, defaultKeyStates);
+    const merged = (0,_fastMerge__WEBPACK_IMPORTED_MODULE_9__["default"])(asObject, defaultKeyStates);
     _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].merge(merged);
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(merged, (val, key) => keyChanged(key, val));
   });
@@ -1272,19 +1341,21 @@ function clear() {let keysToPreserve = arguments.length > 0 && arguments[0] !==
       keysToBeClearedFromStorage.push(key);
     });
 
+    const updatePromises = [];
+
     // Notify the subscribers for each key/value group so they can receive the new values
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keyValuesToResetIndividually, (value, key) => {
-      notifySubscribersOnNextTick(key, value);
+      updatePromises.push(scheduleSubscriberUpdate(key, value));
     });
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keyValuesToResetAsCollection, (value, key) => {
-      notifyCollectionSubscribersOnNextTick(key, value);
+      updatePromises.push(scheduleNotifyCollectionSubscribers(key, value));
     });
 
     const defaultKeyValuePairs = underscore__WEBPACK_IMPORTED_MODULE_1___default().pairs(underscore__WEBPACK_IMPORTED_MODULE_1___default().omit(defaultKeyStates, keysToPreserve));
 
     // Remove only the items that we want cleared from storage, and reset others to default
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keysToBeClearedFromStorage, (key) => _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].drop(key));
-    return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].removeItems(keysToBeClearedFromStorage).then(() => _storage__WEBPACK_IMPORTED_MODULE_4__["default"].multiSet(defaultKeyValuePairs));
+    return _storage__WEBPACK_IMPORTED_MODULE_4__["default"].removeItems(keysToBeClearedFromStorage).then(() => _storage__WEBPACK_IMPORTED_MODULE_4__["default"].multiSet(defaultKeyValuePairs)).then(() => Promise.all(updatePromises));
   });
 }
 
@@ -1355,13 +1426,14 @@ function mergeCollection(collectionKey, collection) {
 
     // Prefill cache if necessary by calling get() on any existing keys and then merge original data to cache
     // and update all subscribers
-    Promise.all(underscore__WEBPACK_IMPORTED_MODULE_1___default().map(existingKeys, get)).then(() => {
+    const promiseUpdate = Promise.all(underscore__WEBPACK_IMPORTED_MODULE_1___default().map(existingKeys, get)).then(() => {
       _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].merge(collection);
-      keysChanged(collectionKey, collection);
+      return scheduleNotifyCollectionSubscribers(collectionKey, collection);
     });
 
     return Promise.all(promises).
-    catch((error) => evictStorageAndRetry(error, mergeCollection, collection));
+    catch((error) => evictStorageAndRetry(error, mergeCollection, collection)).
+    then(() => promiseUpdate);
   });
 }
 
@@ -1843,6 +1915,25 @@ function result(parameter) {for (var _len = arguments.length, args = new Array(_
 
 
 
+/***/ }),
+
+/***/ "./lib/batch.js":
+/*!**********************!*\
+  !*** ./lib/batch.js ***!
+  \**********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-dom */ "react-dom");
+/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_0__);
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react_dom__WEBPACK_IMPORTED_MODULE_0__.unstable_batchedUpdates);
+
 /***/ }),
 
 /***/ "./lib/createDeferredTask.js":
@@ -3703,6 +3794,17 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
 
 /***/ }),
 
+/***/ "react-dom":
+/*!****************************!*\
+  !*** external "react-dom" ***!
+  \****************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
+
+/***/ }),
+
 /***/ "underscore":
 /*!*****************************!*\
   !*** external "underscore" ***!