react-native-onyx 1.0.24 → 1.0.25

package/API.md

@@ -5,6 +5,14 @@
 ## Functions
 
 <dl>
+<dt><a href="#getSubsetOfData">getSubsetOfData(sourceData, selector)</a> ⇒ <code>Mixed</code></dt>
+<dd><p>Uses a selector string or function to return a simplified version of sourceData</p>
+</dd>
+<dt><a href="#reduceCollectionWithSelector">reduceCollectionWithSelector(collection, selector)</a> ⇒ <code>Object</code></dt>
+<dd><p>Takes a collection of items (eg. {testKey_1:{a:&#39;a&#39;}, testKey_2:{b:&#39;b&#39;}})
+and runs it through a reducer function to return a subset of the data according to a selector.
+The resulting collection will only contain items that are returned by the selector.</p>
+</dd>
 <dt><a href="#isCollectionMemberKey">isCollectionMemberKey(collectionKey, key)</a> ⇒ <code>Boolean</code></dt>
 <dd></dd>
 <dt><a href="#connect">connect(mapping)</a> ⇒ <code>Number</code></dt>
@@ -62,23 +70,49 @@ value will be saved to storage after the default value.</p>
 </dd>
 </dl>
 
+<a name="getSubsetOfData"></a>
+
+## getSubsetOfData(sourceData, selector) ⇒ <code>Mixed</code>
+Uses a selector string or function to return a simplified version of sourceData
+
+**Kind**: global function  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| sourceData | <code>Mixed</code> |  |
+| selector | <code>String</code> \| <code>function</code> | If it's a string, the selector is passed to lodashGet on the sourceData      If it's a function, it is passed the sourceData and it should return the simplified data |
+
+<a name="reduceCollectionWithSelector"></a>
+
+## reduceCollectionWithSelector(collection, selector) ⇒ <code>Object</code>
+Takes a collection of items (eg. {testKey_1:{a:'a'}, testKey_2:{b:'b'}})
+and runs it through a reducer function to return a subset of the data according to a selector.
+The resulting collection will only contain items that are returned by the selector.
+
+**Kind**: global function  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| collection | <code>Object</code> |  |
+| selector | <code>String</code> \| <code>function</code> | (see method docs for getSubsetOfData() for full details) |
+
 <a name="isCollectionMemberKey"></a>
 
 ## isCollectionMemberKey(collectionKey, key) ⇒ <code>Boolean</code>
-**Kind**: global function
+**Kind**: global function  
 
 | Param | Type |
 | --- | --- |
-| collectionKey | <code>String</code> |
-| key | <code>String</code> |
+| collectionKey | <code>String</code> | 
+| key | <code>String</code> | 
 
 <a name="connect"></a>
 
 ## connect(mapping) ⇒ <code>Number</code>
 Subscribes a react component's state directly to a store key
 
-**Kind**: global function
-**Returns**: <code>Number</code> - an ID to use when calling disconnect
+**Kind**: global function  
+**Returns**: <code>Number</code> - an ID to use when calling disconnect  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -89,8 +123,9 @@ Subscribes a react component's state directly to a store key
 | [mapping.callback] | <code>function</code> | a method that will be called with changed data      This is used by any non-React code to connect to Onyx |
 | [mapping.initWithStoredValues] | <code>Boolean</code> | If set to false, then no data will be prefilled into the  component |
 | [mapping.waitForCollectionCallback] | <code>Boolean</code> | If set to true, it will return the entire collection to the callback as a single object |
+| [mapping.selector] | <code>String</code> \| <code>function</code> | THIS PARAM IS ONLY USED WITH withOnyx(). If included, this will be used to subscribe to a subset of an Onyx key's data. If the selector is a string, the selector is passed to lodashGet on the sourceData. If the selector is a function, the sourceData is passed to the selector and should return the simplified data. Using this setting on `withOnyx` can have very positive performance benefits because the component will only re-render when the subset of data changes. Otherwise, any change of data on any property would normally cause the component to re-render (and that can be expensive from a performance standpoint). |
 
-**Example**
+**Example**  
 ```js
 const connectionID = Onyx.connect({
     key: ONYXKEYS.SESSION,
@@ -102,14 +137,14 @@ const connectionID = Onyx.connect({
 ## disconnect(connectionID, [keyToRemoveFromEvictionBlocklist])
 Remove the listener for a react component
 
-**Kind**: global function
+**Kind**: global function  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | connectionID | <code>Number</code> | unique id returned by call to Onyx.connect() |
 | [keyToRemoveFromEvictionBlocklist] | <code>String</code> |  |
 
-**Example**
+**Example**  
 ```js
 Onyx.disconnect(connectionID);
 ```
@@ -121,7 +156,7 @@ For this reason, Onyx works more similar to what you might expect from a native
 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.
 
-**Kind**: global function
+**Kind**: global function  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -129,7 +164,7 @@ behavior just yet.
 | value | <code>\*</code> |  |
 | [canUpdateSubscriber] | <code>function</code> | only subscribers that pass this truth test will be updated |
 
-**Example**
+**Example**  
 ```js
 notifySubscribersOnNextTick(key, value, subscriber => subscriber.initWithStoredValues === false)
 ```
@@ -138,7 +173,7 @@ notifySubscribersOnNextTick(key, value, subscriber => subscriber.initWithStoredV
 ## set(key, value) ⇒ <code>Promise</code>
 Write a value to our store with the given key
 
-**Kind**: global function
+**Kind**: global function  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -150,13 +185,13 @@ Write a value to our store with the given key
 ## multiSet(data) ⇒ <code>Promise</code>
 Sets multiple keys and values
 
-**Kind**: global function
+**Kind**: global function  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | data | <code>Object</code> | object keyed by ONYXKEYS and the values to set |
 
-**Example**
+**Example**  
 ```js
 Onyx.multiSet({'key1': 'a', 'key2': 'b'});
 ```
@@ -174,14 +209,14 @@ Calls to `Onyx.merge()` are batched so that any calls performed in a single tick
 applied in the order they were called. Note: `Onyx.set()` calls do not work this way so use caution when mixing
 `Onyx.merge()` and `Onyx.set()`.
 
-**Kind**: global function
+**Kind**: global function  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | key | <code>String</code> | ONYXKEYS key |
 | value | <code>Object</code> \| <code>Array</code> | Object or Array value to merge |
 
-**Example**
+**Example**  
 ```js
 Onyx.merge(ONYXKEYS.EMPLOYEE_LIST, ['Joe']); // -> ['Joe']
 Onyx.merge(ONYXKEYS.EMPLOYEE_LIST, ['Jack']); // -> ['Joe', 'Jack']
@@ -209,20 +244,20 @@ Onyx.get(key) before calling Storage.setItem() via Onyx.set().
 Storage.setItem() from Onyx.clear() will have already finished and the merged
 value will be saved to storage after the default value.
 
-**Kind**: global function
+**Kind**: global function  
 <a name="mergeCollection"></a>
 
 ## mergeCollection(collectionKey, collection) ⇒ <code>Promise</code>
 Merges a collection based on their keys
 
-**Kind**: global function
+**Kind**: global function  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | collectionKey | <code>String</code> | e.g. `ONYXKEYS.COLLECTION.REPORT` |
 | collection | <code>Object</code> | Object collection keyed by individual collection member keys and values |
 
-**Example**
+**Example**  
 ```js
 Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, {
     [`${ONYXKEYS.COLLECTION.REPORT}1`]: report1,
@@ -234,7 +269,7 @@ Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, {
 ## update(data)
 Insert API responses and lifecycle data into Onyx
 
-**Kind**: global function
+**Kind**: global function  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -245,7 +280,7 @@ Insert API responses and lifecycle data into Onyx
 ## init([options])
 Initialize the store with actions and listening for storage events
 
-**Kind**: global function
+**Kind**: global function  
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -258,7 +293,7 @@ Initialize the store with actions and listening for storage events
 | [options.shouldSyncMultipleInstances] | <code>Boolean</code> |  | Auto synchronize storage events between multiple instances of Onyx running in different tabs/windows. Defaults to true for platforms that support local storage (web/desktop) |
 | [options.debugSetState] | <code>Boolean</code> |  | Enables debugging setState() calls to connected components. |
 
-**Example**
+**Example**  
 ```js
 Onyx.init({
     keys: ONYXKEYS,

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/get"), require("localforage"), require("fast-equals"), require("lodash/transform"), require("react"));
+		module.exports = factory(require("underscore"), require("expensify-common/lib/str"), require("fast-equals"), require("lodash/get"), require("localforage"), require("lodash/transform"), require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["underscore", "expensify-common/lib/str", "lodash/get", "localforage", "fast-equals", "lodash/transform", "react"], factory);
+		define(["underscore", "expensify-common/lib/str", "fast-equals", "lodash/get", "localforage", "lodash/transform", "react"], factory);
 	else if(typeof exports === 'object')
-		exports["react-native-onyx/web"] = factory(require("underscore"), require("expensify-common/lib/str"), require("lodash/get"), require("localforage"), require("fast-equals"), require("lodash/transform"), require("react"));
+		exports["react-native-onyx/web"] = factory(require("underscore"), require("expensify-common/lib/str"), require("fast-equals"), require("lodash/get"), require("localforage"), require("lodash/transform"), require("react"));
 	else
-		root["react-native-onyx/web"] = factory(root["underscore"], root["expensify-common/lib/str"], root["lodash/get"], root["localforage"], root["fast-equals"], root["lodash/transform"], 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_fast_equals__, __WEBPACK_EXTERNAL_MODULE_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react__) => {
+		root["react-native-onyx/web"] = factory(root["underscore"], root["expensify-common/lib/str"], root["fast-equals"], root["lodash/get"], root["localforage"], root["lodash/transform"], root["react"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_expensify_common_lib_str__, __WEBPACK_EXTERNAL_MODULE_fast_equals__, __WEBPACK_EXTERNAL_MODULE_lodash_get__, __WEBPACK_EXTERNAL_MODULE_localforage__, __WEBPACK_EXTERNAL_MODULE_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -489,9 +489,10 @@ 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 _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 _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 _extends4 = _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 _fastEquals = __webpack_require__(/*! fast-equals */ "fast-equals");
 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"));
@@ -526,6 +527,33 @@ var defaultKeyStates = {};
 // Connections can be made before `Onyx.init`. They would wait for this task before resolving
 var deferredInitTask = (0, _createDeferredTask.default)();
 
+/**
+ * Uses a selector string or function to return a simplified version of sourceData
+ * @param {Mixed} sourceData
+ * @param {String|Function} selector
+ *      If it's a string, the selector is passed to lodashGet on the sourceData
+ *      If it's a function, it is passed the sourceData and it should return the simplified data
+ * @returns {Mixed}
+ */
+var getSubsetOfData = function getSubsetOfData(sourceData, selector) {return _underscore.default.isFunction(selector) ?
+  selector(sourceData) :
+  (0, _get.default)(sourceData, selector);};
+
+/**
+ * Takes a collection of items (eg. {testKey_1:{a:'a'}, testKey_2:{b:'b'}})
+ * and runs it through a reducer function to return a subset of the data according to a selector.
+ * The resulting collection will only contain items that are returned by the selector.
+ * @param {Object} collection
+ * @param {String|Function} selector (see method docs for getSubsetOfData() for full details)
+ * @returns {Object}
+ */
+var reduceCollectionWithSelector = function reduceCollectionWithSelector(collection, selector) {return _underscore.default.reduce(collection, function (finalCollection, item, key) {
+    // eslint-disable-next-line no-param-reassign
+    finalCollection[key] = getSubsetOfData(item, selector);
+
+    return finalCollection;
+  }, {});};
+
 /**
  * Get some data from the store
  *
@@ -813,6 +841,23 @@ function keysChanged(collectionKey, partialCollection) {
       // 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) {
+        // If the subscriber has a selector, then the component's state must only be updated with the data
+        // returned by the selector.
+        if (subscriber.selector) {
+          subscriber.withOnyxInstance.setState(function (prevState) {
+            var previousData = reduceCollectionWithSelector(prevState[subscriber.statePropertyName], subscriber.selector);
+            var newData = reduceCollectionWithSelector(cachedCollection, subscriber.selector);
+
+            if (!(0, _fastEquals.deepEqual)(previousData, newData)) {
+              return (0, _defineProperty2.default)({},
+              subscriber.statePropertyName, newData);
+
+            }
+            return null;
+          });
+          return "continue";
+        }
+
         subscriber.withOnyxInstance.setState(function (prevState) {
           var finalCollection = _underscore.default.clone(prevState[subscriber.statePropertyName] || {});
           var dataKeys = _underscore.default.keys(partialCollection);
@@ -838,6 +883,25 @@ function keysChanged(collectionKey, partialCollection) {
           return "continue";
         }
 
+        // If the subscriber has a selector, then the component's state must only be updated with the data
+        // returned by the selector and the state should only change when the subset of data changes from what
+        // it was previously.
+        if (subscriber.selector) {
+          subscriber.withOnyxInstance.setState(function (prevState) {
+            var prevData = prevState[subscriber.statePropertyName];
+            var newData = getSubsetOfData(cachedCollection[subscriber.key], subscriber.selector);
+            if (!(0, _fastEquals.deepEqual)(prevData, newData)) {
+              PerformanceUtils.logSetStateCall(subscriber, prevData, newData, 'keysChanged', collectionKey);
+              return (0, _defineProperty2.default)({},
+              subscriber.statePropertyName, newData);
+
+            }
+
+            return null;
+          });
+          return "continue";
+        }
+
         subscriber.withOnyxInstance.setState(function (prevState) {
           var data = cachedCollection[subscriber.key];
           var previousData = prevState[subscriber.statePropertyName];
@@ -901,9 +965,32 @@ function keyChanged(key, data, canUpdateSubscriber) {
     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)) {
+        // If the subscriber has a selector, then the consumer of this data must only be given the data
+        // returned by the selector and only when the selected data has changed.
+        if (subscriber.selector) {
+          subscriber.withOnyxInstance.setState(function (prevState) {
+            var prevData = prevState[subscriber.statePropertyName];
+            var newData = (0, _defineProperty2.default)({},
+            key, getSubsetOfData(data, subscriber.selector));
+
+            var prevDataWithNewData = (0, _extends4.default)({},
+            prevData, (0, _defineProperty2.default)({},
+            key, getSubsetOfData(data, subscriber.selector)));
+
+            if (!(0, _fastEquals.deepEqual)(prevData, prevDataWithNewData)) {
+              PerformanceUtils.logSetStateCall(subscriber, prevData, newData, 'keyChanged', key);
+              return (0, _defineProperty2.default)({},
+              subscriber.statePropertyName, prevDataWithNewData);
+
+            }
+            return null;
+          });
+          return "continue";
+        }
+
         subscriber.withOnyxInstance.setState(function (prevState) {
           var collection = prevState[subscriber.statePropertyName] || {};
-          var newCollection = (0, _extends3.default)({},
+          var newCollection = (0, _extends4.default)({},
           collection, (0, _defineProperty2.default)({},
           key, data));
 
@@ -915,6 +1002,22 @@ function keyChanged(key, data, canUpdateSubscriber) {
         return "continue";
       }
 
+      // If the subscriber has a selector, then the component's state must only be updated with the data
+      // returned by the selector and only if the selected data has changed.
+      if (subscriber.selector) {
+        subscriber.withOnyxInstance.setState(function (prevState) {
+          var previousValue = getSubsetOfData(prevState, subscriber.selector);
+          var newValue = getSubsetOfData(data, subscriber.selector);
+          if (!(0, _fastEquals.deepEqual)(previousValue, newValue)) {
+            return (0, _defineProperty2.default)({},
+            subscriber.statePropertyName, newValue);
+
+          }
+          return null;
+        });
+        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(function (prevState) {
         var previousData = prevState[subscriber.statePropertyName];
@@ -940,25 +1043,41 @@ function keyChanged(key, data, canUpdateSubscriber) {
  *     - triggers the callback function
  *
  * @private
- * @param {object} config
- * @param {object} [config.withOnyxInstance]
- * @param {string} [config.statePropertyName]
- * @param {function} [config.callback]
+ * @param {Object} mapping
+ * @param {Object} [mapping.withOnyxInstance]
+ * @param {String} [mapping.statePropertyName]
+ * @param {Function} [mapping.callback]
+ * @param {String} [mapping.selector]
  * @param {*|null} val
  * @param {String} matchedKey
  */
-function sendDataToConnection(config, val, matchedKey) {
+function sendDataToConnection(mapping, 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]) {
+  if (!callbackToStateMapping[mapping.connectionID]) {
+    return;
+  }
+
+  if (mapping.withOnyxInstance) {
+    var newData = val;
+
+    // If the mapping has a selector, then the component's state must only be updated with the data
+    // returned by the selector.
+    if (mapping.selector) {
+      if (isCollectionKey(mapping.key)) {
+        newData = reduceCollectionWithSelector(val, mapping.selector);
+      } else {
+        newData = getSubsetOfData(val, mapping.selector);
+      }
+    }
+
+    PerformanceUtils.logSetStateCall(mapping, null, newData, 'sendDataToConnection');
+    mapping.withOnyxInstance.setWithOnyxState(mapping.statePropertyName, newData);
     return;
   }
 
-  if (config.withOnyxInstance) {
-    PerformanceUtils.logSetStateCall(config, null, val, 'sendDataToConnection');
-    config.withOnyxInstance.setWithOnyxState(config.statePropertyName, val);
-  } else if (_underscore.default.isFunction(config.callback)) {
-    config.callback(val, matchedKey);
+  if (_underscore.default.isFunction(mapping.callback)) {
+    mapping.callback(val, matchedKey);
   }
 }
 
@@ -1025,6 +1144,7 @@ function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
  * @param {Boolean} [mapping.initWithStoredValues] If set to false, then no data will be prefilled into the
  *  component
  * @param {Boolean} [mapping.waitForCollectionCallback] If set to true, it will return the entire collection to the callback as a single object
+ * @param {String|Function} [mapping.selector] THIS PARAM IS ONLY USED WITH withOnyx(). If included, this will be used to subscribe to a subset of an Onyx key's data. If the selector is a string, the selector is passed to lodashGet on the sourceData. If the selector is a function, the sourceData is passed to the selector and should return the simplified data. Using this setting on `withOnyx` can have very positive performance benefits because the component will only re-render when the subset of data changes. Otherwise, any change of data on any property would normally cause the component to re-render (and that can be expensive from a performance standpoint).
  * @returns {Number} an ID to use when calling disconnect
  */
 function connect(mapping) {
@@ -1292,7 +1412,7 @@ function applyMerge(key, data) {
     return _underscore.default.reduce(mergeValues, function (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
-      var newData = (0, _extends3.default)({}, (0, _fastMerge.default)(modifiedData, mergeValue));
+      var newData = (0, _extends4.default)({}, (0, _fastMerge.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.
@@ -1470,7 +1590,7 @@ function mergeCollection(collectionKey, collection) {
  */
 function update(data) {
   // First, validate the Onyx object is in the format we expect
-  _underscore.default.each(data, function (_ref5) {var onyxMethod = _ref5.onyxMethod,key = _ref5.key;
+  _underscore.default.each(data, function (_ref9) {var onyxMethod = _ref9.onyxMethod,key = _ref9.key;
     if (!_underscore.default.contains(['clear', 'set', 'merge', 'mergecollection'], onyxMethod)) {
       throw new Error("Invalid onyxMethod " + onyxMethod + " in Onyx update.");
     }
@@ -1479,7 +1599,7 @@ function update(data) {
     }
   });
 
-  _underscore.default.each(data, function (_ref6) {var onyxMethod = _ref6.onyxMethod,key = _ref6.key,value = _ref6.value;
+  _underscore.default.each(data, function (_ref10) {var onyxMethod = _ref10.onyxMethod,key = _ref10.key,value = _ref10.value;
     switch (onyxMethod) {
       case 'set':
         set(key, value);
@@ -1532,7 +1652,7 @@ function init()
 
 
 
-{var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},_ref7$keys = _ref7.keys,keys = _ref7$keys === void 0 ? {} : _ref7$keys,_ref7$initialKeyState = _ref7.initialKeyStates,initialKeyStates = _ref7$initialKeyState === void 0 ? {} : _ref7$initialKeyState,_ref7$safeEvictionKey = _ref7.safeEvictionKeys,safeEvictionKeys = _ref7$safeEvictionKey === void 0 ? [] : _ref7$safeEvictionKey,_ref7$maxCachedKeysCo = _ref7.maxCachedKeysCount,maxCachedKeysCount = _ref7$maxCachedKeysCo === void 0 ? 1000 : _ref7$maxCachedKeysCo,_ref7$captureMetrics = _ref7.captureMetrics,captureMetrics = _ref7$captureMetrics === void 0 ? false : _ref7$captureMetrics,_ref7$shouldSyncMulti = _ref7.shouldSyncMultipleInstances,shouldSyncMultipleInstances = _ref7$shouldSyncMulti === void 0 ? Boolean(__webpack_require__.g.localStorage) : _ref7$shouldSyncMulti,_ref7$debugSetState = _ref7.debugSetState,debugSetState = _ref7$debugSetState === void 0 ? false : _ref7$debugSetState;
+{var _ref11 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},_ref11$keys = _ref11.keys,keys = _ref11$keys === void 0 ? {} : _ref11$keys,_ref11$initialKeyStat = _ref11.initialKeyStates,initialKeyStates = _ref11$initialKeyStat === void 0 ? {} : _ref11$initialKeyStat,_ref11$safeEvictionKe = _ref11.safeEvictionKeys,safeEvictionKeys = _ref11$safeEvictionKe === void 0 ? [] : _ref11$safeEvictionKe,_ref11$maxCachedKeysC = _ref11.maxCachedKeysCount,maxCachedKeysCount = _ref11$maxCachedKeysC === void 0 ? 1000 : _ref11$maxCachedKeysC,_ref11$captureMetrics = _ref11.captureMetrics,captureMetrics = _ref11$captureMetrics === void 0 ? false : _ref11$captureMetrics,_ref11$shouldSyncMult = _ref11.shouldSyncMultipleInstances,shouldSyncMultipleInstances = _ref11$shouldSyncMult === void 0 ? Boolean(__webpack_require__.g.localStorage) : _ref11$shouldSyncMult,_ref11$debugSetState = _ref11.debugSetState,debugSetState = _ref11$debugSetState === void 0 ? false : _ref11$debugSetState;
   if (captureMetrics) {
     // The code here is only bundled and applied when the captureMetrics is set
     // eslint-disable-next-line no-use-before-define