react-native-onyx 1.0.16 → 1.0.18

package/dist/web.development.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/merge"), require("lodash/mergeWith"), require("lodash/get"), require("localforage"), require("react"));
+		module.exports = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/get"), require("localforage"), require("lodash/mergeWith"), require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["underscore", "expensify-common/lib/str", "lodash/merge", "lodash/mergeWith", "lodash/get", "localforage", "react"], factory);
+		define(["underscore", "expensify-common/lib/str", "lodash/get", "localforage", "lodash/mergeWith", "react"], factory);
 	else if(typeof exports === 'object')
-		exports["react-native-onyx/web"] = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/merge"), require("lodash/mergeWith"), require("lodash/get"), require("localforage"), require("react"));
+		exports["react-native-onyx/web"] = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/get"), require("localforage"), require("lodash/mergeWith"), require("react"));
 	else
-		root["react-native-onyx/web"] = factory(root["underscore"], root["expensify-common/lib/str"], root["lodash/merge"], root["lodash/mergeWith"], root["lodash/get"], root["localforage"], root["react"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_expensify_common_lib_str__, __WEBPACK_EXTERNAL_MODULE_lodash_merge__, __WEBPACK_EXTERNAL_MODULE_lodash_mergeWith__, __WEBPACK_EXTERNAL_MODULE_lodash_get__, __WEBPACK_EXTERNAL_MODULE_localforage__, __WEBPACK_EXTERNAL_MODULE_react__) => {
+		root["react-native-onyx/web"] = factory(root["underscore"], root["expensify-common/lib/str"], root["lodash/get"], root["localforage"], root["lodash/mergeWith"], root["react"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_expensify_common_lib_str__, __WEBPACK_EXTERNAL_MODULE_lodash_get__, __WEBPACK_EXTERNAL_MODULE_localforage__, __WEBPACK_EXTERNAL_MODULE_lodash_mergeWith__, __WEBPACK_EXTERNAL_MODULE_react__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -489,16 +489,15 @@ function logInfo(message) {
   \*********************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js"));var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));var _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _slicedToArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js"));var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));var _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js"));var _defineProperty2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"));
+var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
 var _str = _interopRequireDefault(__webpack_require__(/*! expensify-common/lib/str */ "expensify-common/lib/str"));
-var _merge = _interopRequireDefault(__webpack_require__(/*! lodash/merge */ "lodash/merge"));
-var _mergeWith = _interopRequireDefault(__webpack_require__(/*! lodash/mergeWith */ "lodash/mergeWith"));
 var _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ "lodash/get"));
 var _storage = _interopRequireDefault(__webpack_require__(/*! ./storage */ "./lib/storage/index.web.js"));
 var Logger = _interopRequireWildcard(__webpack_require__(/*! ./Logger */ "./lib/Logger.js"));
 var _OnyxCache = _interopRequireDefault(__webpack_require__(/*! ./OnyxCache */ "./lib/OnyxCache.js"));
 var _createDeferredTask = _interopRequireDefault(__webpack_require__(/*! ./createDeferredTask */ "./lib/createDeferredTask.js"));
-var _customizerForMergeWith = _interopRequireDefault(__webpack_require__(/*! ./customizerForMergeWith */ "./lib/customizerForMergeWith.js"));function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+var _mergeWithCustomized = _interopRequireDefault(__webpack_require__(/*! ./mergeWithCustomized */ "./lib/mergeWithCustomized.js"));function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;} /* eslint-disable no-continue */
 
 // Keeps track of the last connectionID that was used so we can keep incrementing it
 var lastConnectionID = 0;
@@ -599,8 +598,17 @@ function isCollectionKey(key) {
 }
 
 /**
- * Checks to see if a given key matches with the
- * configured key of our connected subscriber
+ * @param {String} collectionKey
+ * @param {String} key
+ * @returns {Boolean}
+ */
+function isCollectionMemberKey(collectionKey, key) {
+  return _str.default.startsWith(key, collectionKey) && key.length > collectionKey.length;
+}
+
+/**
+ * Checks to see if a provided key is the exact configured key of our connected subscriber
+ * or if the provided key is a collection member key (in case our configured key is a "collection key")
  *
  * @private
  * @param {String} configKey
@@ -717,7 +725,7 @@ function addAllSafeEvictionKeysToRecentlyAccessedList() {
  */
 function getCachedCollection(collectionKey) {
   var collectionMemberKeys = _underscore.default.filter(_OnyxCache.default.getAllKeys(),
-  function (storedKey) {return isKeyMatch(collectionKey, storedKey);});
+  function (storedKey) {return isCollectionMemberKey(collectionKey, storedKey);});
 
 
   return _underscore.default.reduce(collectionMemberKeys, function (prev, curr) {
@@ -737,73 +745,103 @@ function getCachedCollection(collectionKey) {
  *
  * @private
  * @param {String} collectionKey
- * @param {Object} collection
+ * @param {Object} partialCollection - a partial collection of grouped member keys
  */
-function keysChanged(collectionKey, collection) {
-  // Find all subscribers that were added with connect() and trigger the callback or setState() with the new data
-  _underscore.default.each(callbackToStateMapping, function (subscriber) {
+function keysChanged(collectionKey, partialCollection) {
+  // 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().
+  var stateMappingKeys = _underscore.default.keys(callbackToStateMapping);var _loop = function _loop(
+  i) {
+    var subscriber = callbackToStateMapping[stateMappingKeys[i]];
     if (!subscriber) {
-      return;
+      return "continue";
+    }
+
+    // Skip iteration if we do not have a collection key or a collection member key on this subscriber
+    if (!_str.default.startsWith(subscriber.key, collectionKey)) {
+      return "continue";
     }
 
     /**
      * e.g. Onyx.connect({key: ONYXKEYS.COLLECTION.REPORT, callback: ...});
      */
-    var isSubscribedToCollectionKey = isKeyMatch(subscriber.key, collectionKey) &&
-    isCollectionKey(subscriber.key);
+    var isSubscribedToCollectionKey = subscriber.key === collectionKey;
 
     /**
      * e.g. Onyx.connect({key: `${ONYXKEYS.COLLECTION.REPORT}{reportID}`, callback: ...});
      */
-    var isSubscribedToCollectionMemberKey = subscriber.key.startsWith(collectionKey);
+    var isSubscribedToCollectionMemberKey = isCollectionMemberKey(collectionKey, subscriber.key);
 
-    if (isSubscribedToCollectionKey) {
-      if (_underscore.default.isFunction(subscriber.callback)) {
-        var cachedCollection = getCachedCollection(collectionKey);
+    // We prepare the "cached collection" which is the entire collection + the new partial data that
+    // was merged in via mergeCollection().
+    var cachedCollection = getCachedCollection(collectionKey);
 
+    // Regular Onyx.connect() subscriber found.
+    if (_underscore.default.isFunction(subscriber.callback)) {
+      // If they are subscribed to the collection key and using waitForCollectionCallback then we'll
+      // send the whole cached collection.
+      if (isSubscribedToCollectionKey) {
         if (subscriber.waitForCollectionCallback) {
           subscriber.callback(cachedCollection);
-          return;
+          return "continue";
         }
 
-        _underscore.default.each(collection, function (data, dataKey) {
+        // If they are not using waitForCollectionCallback then we notify the subscriber with
+        // the new merged data but only for any keys in the partial collection.
+        var dataKeys = _underscore.default.keys(partialCollection);
+        for (var j = 0; j < dataKeys.length; j++) {
+          var dataKey = dataKeys[j];
           subscriber.callback(cachedCollection[dataKey], dataKey);
-        });
-      } else if (subscriber.withOnyxInstance) {
+        }
+        return "continue";
+      }
+
+      // 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) {
+        subscriber.callback(cachedCollection[subscriber.key], subscriber.key);
+        return "continue";
+      }
+
+      return "continue";
+    }
+
+    // React component subscriber found.
+    if (subscriber.withOnyxInstance) {
+      // 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) {
         subscriber.withOnyxInstance.setState(function (prevState) {
           var finalCollection = _underscore.default.clone(prevState[subscriber.statePropertyName] || {});
-          _underscore.default.each(collection, function (data, dataKey) {
-            if (finalCollection[dataKey]) {
-              (0, _merge.default)(finalCollection[dataKey], data);
-            } else {
-              finalCollection[dataKey] = data;
-            }
-          });
 
+          var dataKeys = _underscore.default.keys(partialCollection);
+          for (var _j = 0; _j < dataKeys.length; _j++) {
+            var _dataKey = dataKeys[_j];
+            finalCollection[_dataKey] = cachedCollection[_dataKey];
+          }
           return (0, _defineProperty2.default)({},
           subscriber.statePropertyName, finalCollection);
 
         });
+        return "continue";
       }
-    } else if (isSubscribedToCollectionMemberKey) {
-      var dataFromCollection = collection[subscriber.key];
 
-      // If `dataFromCollection` happens to not exist, then return early so that there are no unnecessary
-      // re-renderings of the component
-      if (_underscore.default.isUndefined(dataFromCollection)) {
-        return;
-      }
-
-      subscriber.withOnyxInstance.setState(function (prevState) {return (0, _defineProperty2.default)({},
-        subscriber.statePropertyName, _underscore.default.isObject(dataFromCollection) ? (0, _extends2.default)({},
-
-        prevState[subscriber.statePropertyName],
-        dataFromCollection) :
+      // 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) {
+        // 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.
+        var dataFromCollection = partialCollection[subscriber.key];
+        if (_underscore.default.isUndefined(dataFromCollection)) {
+          return "continue";
+        }
 
-        dataFromCollection);});
+        subscriber.withOnyxInstance.setState((0, _defineProperty2.default)({},
+        subscriber.statePropertyName, cachedCollection[subscriber.key]));
 
-    }
-  });
+      }
+    }};for (var i = stateMappingKeys.length; i--;) {var _ret = _loop(i);if (_ret === "continue") continue;
+  }
 }
 
 /**
@@ -821,43 +859,54 @@ function keyChanged(key, data) {
     removeLastAccessedKey(key);
   }
 
-  // Find all subscribers that were added with connect() and trigger the callback or setState() with the new data
-  _underscore.default.each(callbackToStateMapping, function (subscriber) {
+  // We are iterating over all subscribers to see if they are interested in the key that has just changed. If the subscriber's  key is a collection key then we will
+  // notify them if the key that changed is a collection member. Or if it is a regular key notify them when there is an exact match. Depending on whether the subscriber
+  // was connected via withOnyx we will call setState() directly on the withOnyx instance. If it is a regular connection we will pass the data to the provided callback.
+  var stateMappingKeys = _underscore.default.keys(callbackToStateMapping);var _loop2 = function _loop2(
+  i) {
+    var subscriber = callbackToStateMapping[stateMappingKeys[i]];
     if (!subscriber || !isKeyMatch(subscriber.key, key)) {
-      return;
+      return "continue";
     }
 
+    // Subscriber is a regular call to connect() and provided a callback
     if (_underscore.default.isFunction(subscriber.callback)) {
-      if (subscriber.waitForCollectionCallback) {
+      if (isCollectionKey(subscriber.key) && subscriber.waitForCollectionCallback) {
         var cachedCollection = getCachedCollection(subscriber.key);
         cachedCollection[key] = data;
         subscriber.callback(cachedCollection);
-        return;
+        return "continue";
       }
 
       subscriber.callback(data, key);
-      return;
+      return "continue";
     }
 
-    if (!subscriber.withOnyxInstance) {
-      return;
-    }
+    // Subscriber connected via withOnyx() HOC
+    if (subscriber.withOnyxInstance) {
+      // Check if we are subscribing to a collection key and overwrite the collection member key value in state
+      if (isCollectionKey(subscriber.key)) {
+        subscriber.withOnyxInstance.setState(function (prevState) {
+          var collection = prevState[subscriber.statePropertyName] || {};
+          return (0, _defineProperty2.default)({},
+          subscriber.statePropertyName, (0, _extends3.default)({},
+          collection, (0, _defineProperty2.default)({},
+          key, data)));
 
-    // Check if we are subscribing to a collection key and add this item as a collection
-    if (isCollectionKey(subscriber.key)) {
-      subscriber.withOnyxInstance.setState(function (prevState) {
-        var collection = _underscore.default.clone(prevState[subscriber.statePropertyName] || {});
-        collection[key] = data;
-        return (0, _defineProperty2.default)({},
-        subscriber.statePropertyName, collection);
 
-      });
-    } else {
+        });
+        return "continue";
+      }
+
+      // If we did not match on a collection key then we just set the new data to the state property
       subscriber.withOnyxInstance.setState((0, _defineProperty2.default)({},
       subscriber.statePropertyName, data));
 
+      return "continue";
     }
-  });
+
+    console.error('Warning: Found a matching subscriber to a key that changed, but no callback or withOnyxInstance could be found.');};for (var i = stateMappingKeys.length; i--;) {var _ret2 = _loop2(i);if (_ret2 === "continue") continue;
+  }
 }
 
 /**
@@ -871,9 +920,9 @@ function keyChanged(key, data) {
  * @param {string} [config.statePropertyName]
  * @param {function} [config.callback]
  * @param {*|null} val
- * @param {String} key
+ * @param {String} matchedKey
  */
-function sendDataToConnection(config, val, key) {
+function sendDataToConnection(config, val, matchedKey) {
   // If the mapping no longer exists then we should not send any data.
   // This means our subscriber disconnected or withOnyx wrapped component unmounted.
   if (!callbackToStateMapping[config.connectionID]) {
@@ -883,10 +932,54 @@ function sendDataToConnection(config, val, key) {
   if (config.withOnyxInstance) {
     config.withOnyxInstance.setWithOnyxState(config.statePropertyName, val);
   } else if (_underscore.default.isFunction(config.callback)) {
-    config.callback(val, key);
+    config.callback(val, 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
+ * run out of storage the least recently accessed key can be removed.
+ *
+ * @private
+ * @param {Object} mapping
+ */
+function addKeyToRecentlyAccessedIfNeeded(mapping) {
+  if (!isSafeEvictionKey(mapping.key)) {
+    return;
+  }
+
+  // Try to free some cache whenever we connect to a safe eviction key
+  _OnyxCache.default.removeLeastRecentlyUsedKeys();
+
+  if (mapping.withOnyxInstance && !isCollectionKey(mapping.key)) {
+    // All React components subscribing to a key flagged as a safe eviction key must implement the canEvict property.
+    if (_underscore.default.isUndefined(mapping.canEvict)) {
+      throw new Error("Cannot subscribe to safe eviction key '" +
+      mapping.key + "' without providing a canEvict value.");
+
+    }
+
+    addLastAccessedKey(mapping.key);
   }
 }
 
+/**
+ * Gets the data for a given an array of matching keys, combines them into an object, and sends the result back to the subscriber.
+ *
+ * @private
+ * @param {Array} matchingKeys
+ * @param {Object} mapping
+ */
+function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
+  Promise.all(_underscore.default.map(matchingKeys, function (key) {return get(key);})).
+  then(function (values) {return _underscore.default.reduce(values, function (finalObject, value, i) {
+      // eslint-disable-next-line no-param-reassign
+      finalObject[matchingKeys[i]] = value;
+      return finalObject;
+    }, {});}).
+  then(function (val) {return sendDataToConnection(mapping, val);});
+}
+
 /**
  * Subscribes a react component's state directly to a store key
  *
@@ -919,58 +1012,63 @@ function connect(mapping) {
 
   // Commit connection only after init passes
   deferredInitTask.promise.
-  then(function () {
-    // Check to see if this key is flagged as a safe eviction key and add it to the recentlyAccessedKeys list
-    if (!isSafeEvictionKey(mapping.key)) {
+  then(function () {return addKeyToRecentlyAccessedIfNeeded(mapping);}).
+  then(getAllKeys).
+  then(function (keys) {
+    // We search all the keys in storage to see if any are a "match" for the subscriber we are connecting so that we
+    // can send data back to the subscriber. Note that multiple keys can match as a subscriber could either be
+    // subscribed to a "collection key" or a single key.
+    var matchingKeys = _underscore.default.filter(keys, function (key) {return isKeyMatch(mapping.key, key);});
+
+    // If the key being connected to does not exist we initialize the value with null. For subscribers that connected
+    // directly via connect() they will simply get a null value sent to them without any information about which key matched
+    // since there are none matched. In withOnyx() we wait for all connected keys to return a value before rendering the child
+    // component. This null value will be filtered out so that the connected component can utilize defaultProps.
+    if (matchingKeys.length === 0) {
+      sendDataToConnection(mapping, null);
       return;
     }
 
-    // Try to free some cache whenever we connect to a safe eviction key
-    _OnyxCache.default.removeLeastRecentlyUsedKeys();
-
-    if (mapping.withOnyxInstance && !isCollectionKey(mapping.key)) {
-      // All React components subscribing to a key flagged as a safe eviction
-      // key must implement the canEvict property.
-      if (_underscore.default.isUndefined(mapping.canEvict)) {
-        throw new Error("Cannot subscribe to safe eviction key '" +
-        mapping.key + "' without providing a canEvict value.");
+    // When using a callback subscriber we will either trigger the provided callback for each key we find or combine all values
+    // into an object and just make a single call. The latter behavior is enabled by providing a waitForCollectionCallback key
+    // combined with a subscription to a collection key.
+    if (_underscore.default.isFunction(mapping.callback)) {
+      if (isCollectionKey(mapping.key)) {
+        if (mapping.waitForCollectionCallback) {
+          getCollectionDataAndSendAsObject(matchingKeys, mapping);
+          return;
+        }
 
+        // We did not opt into using waitForCollectionCallback mode so the callback is called for every matching key.
+        var _loop3 = function _loop3(i) {
+          get(matchingKeys[i]).then(function (val) {return sendDataToConnection(mapping, val, matchingKeys[i]);});};for (var i = 0; i < matchingKeys.length; i++) {_loop3(i);
+        }
+        return;
       }
 
-      addLastAccessedKey(mapping.key);
+      // If we are not subscribed to a collection key then there's only a single key to send an update for.
+      get(mapping.key).then(function (val) {return sendDataToConnection(mapping, val, mapping.key);});
+      return;
     }
-  }).
-  then(getAllKeys).
-  then(function (keys) {
-    // Find all the keys matched by the config key
-    var matchingKeys = _underscore.default.filter(keys, function (key) {return isKeyMatch(mapping.key, key);});
 
-    // If the key being connected to does not exist, initialize the value with null
-    if (matchingKeys.length === 0) {
-      sendDataToConnection(mapping, null);
+    // If we have a withOnyxInstance that means a React component has subscribed via the withOnyx() HOC and we need to
+    // group collection key member data into an object.
+    if (mapping.withOnyxInstance) {
+      if (isCollectionKey(mapping.key)) {
+        getCollectionDataAndSendAsObject(matchingKeys, mapping);
+        return;
+      }
+
+      // If the subscriber is not using a collection key then we just send a single value back to the subscriber
+      get(mapping.key).then(function (val) {return sendDataToConnection(mapping, val, mapping.key);});
       return;
     }
 
-    // When using a callback subscriber we will trigger the callback
-    // for each key we find. It's up to the subscriber to know whether
-    // to expect a single key or multiple keys in the case of a collection.
-    // React components are an exception since we'll want to send their
-    // initial data as a single object when using collection keys.
-    if (mapping.withOnyxInstance && isCollectionKey(mapping.key) || mapping.waitForCollectionCallback) {
-      Promise.all(_underscore.default.map(matchingKeys, function (key) {return get(key);})).
-      then(function (values) {return _underscore.default.reduce(values, function (finalObject, value, i) {
-          // eslint-disable-next-line no-param-reassign
-          finalObject[matchingKeys[i]] = value;
-          return finalObject;
-        }, {});}).
-      then(function (val) {return sendDataToConnection(mapping, val);});
-    } else {
-      _underscore.default.each(matchingKeys, function (key) {
-        get(key).then(function (val) {return sendDataToConnection(mapping, val, key);});
-      });
-    }
+    console.error('Warning: Onyx.connect() was found without a callback or withOnyxInstance');
   });
 
+  // The connectionID is returned back to the caller so that it can be used to clean up the connection when it's no longer needed
+  // by calling Onyx.disconnect(connectionID).
   return connectionID;
 }
 
@@ -1154,7 +1252,7 @@ function applyMerge(key, data) {
   if (_underscore.default.isObject(data) || _underscore.default.every(mergeValues, _underscore.default.isObject)) {
     // Object values are merged one after the other
     return _underscore.default.reduce(mergeValues, function (modifiedData, mergeValue) {
-      var newData = (0, _mergeWith.default)({}, modifiedData, mergeValue, _customizerForMergeWith.default);
+      var newData = (0, _mergeWithCustomized.default)({}, modifiedData, mergeValue);
 
       // 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.
@@ -1225,7 +1323,7 @@ function initializeWithDefaultKeyStates() {
   then(function (pairs) {
     var asObject = _underscore.default.object(pairs);
 
-    var merged = (0, _mergeWith.default)(asObject, defaultKeyStates, _customizerForMergeWith.default);
+    var merged = (0, _mergeWithCustomized.default)(asObject, defaultKeyStates);
     _OnyxCache.default.merge(merged);
     _underscore.default.each(merged, function (val, key) {return keyChanged(key, val);});
   });
@@ -1280,7 +1378,7 @@ function clear() {
  */
 function mergeCollection(collectionKey, collection) {
   // Confirm all the collection keys belong to the same parent
-  _underscore.default.each(collection, function (data, dataKey) {
+  _underscore.default.each(collection, function (_data, dataKey) {
     if (isKeyMatch(collectionKey, dataKey)) {
       return;
     }
@@ -1332,7 +1430,7 @@ function mergeCollection(collectionKey, collection) {
  */
 function update(data) {
   // First, validate the Onyx object is in the format we expect
-  _underscore.default.each(data, function (_ref4) {var onyxMethod = _ref4.onyxMethod,key = _ref4.key;
+  _underscore.default.each(data, function (_ref3) {var onyxMethod = _ref3.onyxMethod,key = _ref3.key;
     if (!_underscore.default.contains(['clear', 'set', 'merge', 'mergecollection'], onyxMethod)) {
       throw new Error("Invalid onyxMethod " + onyxMethod + " in Onyx update.");
     }
@@ -1341,7 +1439,7 @@ function update(data) {
     }
   });
 
-  _underscore.default.each(data, function (_ref5) {var onyxMethod = _ref5.onyxMethod,key = _ref5.key,value = _ref5.value;
+  _underscore.default.each(data, function (_ref4) {var onyxMethod = _ref4.onyxMethod,key = _ref4.key,value = _ref4.value;
     switch (onyxMethod) {
       case 'set':
         set(key, value);
@@ -1395,7 +1493,7 @@ function init()
 
 
 
-{var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},_ref6$keys = _ref6.keys,keys = _ref6$keys === void 0 ? {} : _ref6$keys,_ref6$initialKeyState = _ref6.initialKeyStates,initialKeyStates = _ref6$initialKeyState === void 0 ? {} : _ref6$initialKeyState,_ref6$safeEvictionKey = _ref6.safeEvictionKeys,safeEvictionKeys = _ref6$safeEvictionKey === void 0 ? [] : _ref6$safeEvictionKey,_ref6$maxCachedKeysCo = _ref6.maxCachedKeysCount,maxCachedKeysCount = _ref6$maxCachedKeysCo === void 0 ? 1000 : _ref6$maxCachedKeysCo,_ref6$captureMetrics = _ref6.captureMetrics,captureMetrics = _ref6$captureMetrics === void 0 ? false : _ref6$captureMetrics,_ref6$shouldSyncMulti = _ref6.shouldSyncMultipleInstances,shouldSyncMultipleInstances = _ref6$shouldSyncMulti === void 0 ? Boolean(__webpack_require__.g.localStorage) : _ref6$shouldSyncMulti,_ref6$keysToDisableSy = _ref6.keysToDisableSyncEvents,keysToDisableSyncEvents = _ref6$keysToDisableSy === void 0 ? [] : _ref6$keysToDisableSy;
+{var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},_ref5$keys = _ref5.keys,keys = _ref5$keys === void 0 ? {} : _ref5$keys,_ref5$initialKeyState = _ref5.initialKeyStates,initialKeyStates = _ref5$initialKeyState === void 0 ? {} : _ref5$initialKeyState,_ref5$safeEvictionKey = _ref5.safeEvictionKeys,safeEvictionKeys = _ref5$safeEvictionKey === void 0 ? [] : _ref5$safeEvictionKey,_ref5$maxCachedKeysCo = _ref5.maxCachedKeysCount,maxCachedKeysCount = _ref5$maxCachedKeysCo === void 0 ? 1000 : _ref5$maxCachedKeysCo,_ref5$captureMetrics = _ref5.captureMetrics,captureMetrics = _ref5$captureMetrics === void 0 ? false : _ref5$captureMetrics,_ref5$shouldSyncMulti = _ref5.shouldSyncMultipleInstances,shouldSyncMultipleInstances = _ref5$shouldSyncMulti === void 0 ? Boolean(__webpack_require__.g.localStorage) : _ref5$shouldSyncMulti,_ref5$keysToDisableSy = _ref5.keysToDisableSyncEvents,keysToDisableSyncEvents = _ref5$keysToDisableSy === void 0 ? [] : _ref5$keysToDisableSy;
   if (captureMetrics) {
     // The code here is only bundled and applied when the captureMetrics is set
     // eslint-disable-next-line no-use-before-define
@@ -1495,8 +1593,7 @@ Onyx;exports["default"] = _default;
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _toConsumableArray2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js"));var _classCallCheck2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/classCallCheck */ "./node_modules/@babel/runtime/helpers/classCallCheck.js"));var _createClass2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/createClass */ "./node_modules/@babel/runtime/helpers/createClass.js"));var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
-var _mergeWith = _interopRequireDefault(__webpack_require__(/*! lodash/mergeWith */ "lodash/mergeWith"));
-var _customizerForMergeWith = _interopRequireDefault(__webpack_require__(/*! ./customizerForMergeWith */ "./lib/customizerForMergeWith.js"));
+var _mergeWithCustomized = _interopRequireDefault(__webpack_require__(/*! ./mergeWithCustomized */ "./lib/mergeWithCustomized.js"));
 
 var isDefined = _underscore.default.negate(_underscore.default.isUndefined);
 
@@ -1607,7 +1704,7 @@ OnyxCache = /*#__PURE__*/function () {
      * @param {Record<string, *>} data - a map of (cache) key - values
      */ }, { key: "merge", value: function merge(
     data) {var _this = this;
-      this.storageMap = (0, _mergeWith.default)({}, this.storageMap, data, _customizerForMergeWith.default);
+      this.storageMap = (0, _mergeWithCustomized.default)({}, this.storageMap, data);
 
       var storageKeys = this.getAllKeys();
       var mergedKeys = _underscore.default.keys(data);
@@ -1778,13 +1875,13 @@ function createDeferredTask() {
 
 /***/ }),
 
-/***/ "./lib/customizerForMergeWith.js":
-/*!***************************************!*\
-  !*** ./lib/customizerForMergeWith.js ***!
-  \***************************************/
+/***/ "./lib/mergeWithCustomized.js":
+/*!************************************!*\
+  !*** ./lib/mergeWithCustomized.js ***!
+  \************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
+var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js");Object.defineProperty(exports, "__esModule", ({ value: true }));exports["default"] = void 0;var _mergeWith = _interopRequireDefault(__webpack_require__(/*! lodash/mergeWith */ "lodash/mergeWith"));
 
 /**
  * When merging 2 objects into onyx that contain an array, we want to completely replace the array instead of the default
@@ -1799,12 +1896,17 @@ var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/inte
  */
 // eslint-disable-next-line rulesdir/prefer-early-return
 function customizerForMergeWith(objValue, srcValue) {
-  if (_underscore.default.isArray(objValue)) {
+  // eslint-disable-next-line rulesdir/prefer-underscore-method
+  if (Array.isArray(objValue)) {
     return srcValue;
   }
+}
+
+function mergeWithCustomized() {for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}
+  return _mergeWith.default.apply(void 0, args.concat([customizerForMergeWith]));
 }var _default =
 
-customizerForMergeWith;exports["default"] = _default;
+mergeWithCustomized;exports["default"] = _default;
 
 /***/ }),
 
@@ -1914,9 +2016,8 @@ var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/inte
 
 var _localforage = _interopRequireDefault(__webpack_require__(/*! localforage */ "localforage"));
 var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
-var _mergeWith = _interopRequireDefault(__webpack_require__(/*! lodash/mergeWith */ "lodash/mergeWith"));
 var _SyncQueue = _interopRequireDefault(__webpack_require__(/*! ../../SyncQueue */ "./lib/SyncQueue.js"));
-var _customizerForMergeWith = _interopRequireDefault(__webpack_require__(/*! ../../customizerForMergeWith */ "./lib/customizerForMergeWith.js")); /**
+var _mergeWithCustomized = _interopRequireDefault(__webpack_require__(/*! ../../mergeWithCustomized */ "./lib/mergeWithCustomized.js")); /**
  * @file
  * The storage provider based on localforage allows us to store most anything in its
  * natural form in the underlying DB without having to stringify or de-stringify it
@@ -1933,7 +2034,7 @@ var provider = {
       return _localforage.default.getItem(key).
       then(function (existingValue) {
         var newValue = _underscore.default.isObject(existingValue) ?
-        (0, _mergeWith.default)({}, existingValue, value, _customizerForMergeWith.default) :
+        (0, _mergeWithCustomized.default)({}, existingValue, value) :
         value;
         return _localforage.default.setItem(key, newValue);
       });
@@ -3335,17 +3436,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_get__;
 
 /***/ }),
 
-/***/ "lodash/merge":
-/*!*******************************!*\
-  !*** external "lodash/merge" ***!
-  \*******************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_merge__;
-
-/***/ }),
-
 /***/ "lodash/mergeWith":
 /*!***********************************!*\
   !*** external "lodash/mergeWith" ***!