react-native-onyx 1.0.19 → 1.0.20

package/README.md

@@ -319,6 +319,9 @@ Sample output of `Onyx.printMetrics()`
 |    1.17sec |   2.20sec |   1.03sec | currentURL, /            |
 ```
 
+# Debug mode
+
+It can be useful to log why Onyx is calling `setState()` on a particular React component so that we can understand which key changed, what changed about the value, and the connected component that ultimately rendered as a result. When used correctly this can help isolate problem areas and unnecessary renders in the code. To enable this feature, pass `debugSetState: true` to the config and grep JS console logs for `[Onyx-Debug]`.
 
 # Development
 

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("react"));
+		module.exports = factory(require("underscore"), require("expensify-common/lib/str"), 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", "react"], factory);
+		define(["underscore", "expensify-common/lib/str", "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("react"));
+		exports["react-native-onyx/web"] = factory(require("underscore"), require("expensify-common/lib/str"), 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["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_react__) => {
+		root["react-native-onyx/web"] = factory(root["underscore"], root["expensify-common/lib/str"], 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_lodash_get__, __WEBPACK_EXTERNAL_MODULE_localforage__, __WEBPACK_EXTERNAL_MODULE_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -497,7 +497,8 @@ var _storage = _interopRequireDefault(__webpack_require__(/*! ./storage */ "./li
 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 _fastMerge = _interopRequireDefault(__webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.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 */
+var _fastMerge = _interopRequireDefault(__webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.js"));
+var PerformanceUtils = _interopRequireWildcard(__webpack_require__(/*! ./metrics/PerformanceUtils */ "./lib/metrics/PerformanceUtils.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;
@@ -814,12 +815,13 @@ function keysChanged(collectionKey, partialCollection) {
       if (isSubscribedToCollectionKey) {
         subscriber.withOnyxInstance.setState(function (prevState) {
           var finalCollection = _underscore.default.clone(prevState[subscriber.statePropertyName] || {});
-
           var dataKeys = _underscore.default.keys(partialCollection);
           for (var _j = 0; _j < dataKeys.length; _j++) {
             var _dataKey = dataKeys[_j];
             finalCollection[_dataKey] = cachedCollection[_dataKey];
           }
+
+          PerformanceUtils.logSetStateCall(subscriber, prevState[subscriber.statePropertyName], finalCollection, 'keysChanged', collectionKey);
           return (0, _defineProperty2.default)({},
           subscriber.statePropertyName, finalCollection);
 
@@ -836,9 +838,18 @@ function keysChanged(collectionKey, partialCollection) {
           return "continue";
         }
 
-        subscriber.withOnyxInstance.setState((0, _defineProperty2.default)({},
-        subscriber.statePropertyName, cachedCollection[subscriber.key]));
+        subscriber.withOnyxInstance.setState(function (prevState) {
+          var data = cachedCollection[subscriber.key];
+          var previousData = prevState[subscriber.statePropertyName];
+          if (data === previousData) {
+            return null;
+          }
+
+          PerformanceUtils.logSetStateCall(subscriber, previousData, data, 'keysChanged', collectionKey);
+          return (0, _defineProperty2.default)({},
+          subscriber.statePropertyName, data);
 
+        });
       }
     }};for (var i = stateMappingKeys.length; i--;) {var _ret = _loop(i);if (_ret === "continue") continue;
   }
@@ -888,20 +899,30 @@ function keyChanged(key, data) {
       if (isCollectionKey(subscriber.key)) {
         subscriber.withOnyxInstance.setState(function (prevState) {
           var collection = prevState[subscriber.statePropertyName] || {};
-          return (0, _defineProperty2.default)({},
-          subscriber.statePropertyName, (0, _extends3.default)({},
+          var newCollection = (0, _extends3.default)({},
           collection, (0, _defineProperty2.default)({},
-          key, data)));
+          key, data));
 
+          PerformanceUtils.logSetStateCall(subscriber, collection, newCollection, 'keyChanged', key);
+          return (0, _defineProperty2.default)({},
+          subscriber.statePropertyName, newCollection);
 
         });
         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));
+      subscriber.withOnyxInstance.setState(function (prevState) {
+        var previousData = prevState[subscriber.statePropertyName];
+        if (previousData === data) {
+          return null;
+        }
+
+        PerformanceUtils.logSetStateCall(subscriber, previousData, data, 'keyChanged', key);
+        return (0, _defineProperty2.default)({},
+        subscriber.statePropertyName, data);
 
+      });
       return "continue";
     }
 
@@ -930,6 +951,7 @@ function sendDataToConnection(config, val, matchedKey) {
   }
 
   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);
@@ -1432,7 +1454,7 @@ function mergeCollection(collectionKey, collection) {
  */
 function update(data) {
   // First, validate the Onyx object is in the format we expect
-  _underscore.default.each(data, function (_ref3) {var onyxMethod = _ref3.onyxMethod,key = _ref3.key;
+  _underscore.default.each(data, function (_ref5) {var onyxMethod = _ref5.onyxMethod,key = _ref5.key;
     if (!_underscore.default.contains(['clear', 'set', 'merge', 'mergecollection'], onyxMethod)) {
       throw new Error("Invalid onyxMethod " + onyxMethod + " in Onyx update.");
     }
@@ -1441,7 +1463,7 @@ function update(data) {
     }
   });
 
-  _underscore.default.each(data, function (_ref4) {var onyxMethod = _ref4.onyxMethod,key = _ref4.key,value = _ref4.value;
+  _underscore.default.each(data, function (_ref6) {var onyxMethod = _ref6.onyxMethod,key = _ref6.key,value = _ref6.value;
     switch (onyxMethod) {
       case 'set':
         set(key, value);
@@ -1479,6 +1501,7 @@ function update(data) {
  * of Onyx running in different tabs/windows. Defaults to true for platforms that support local storage (web/desktop)
  * @param {String[]} [option.keysToDisableSyncEvents=[]] Contains keys for which
  * we want to disable sync event across tabs.
+ * @param {Boolean} [options.debugSetState] Enables debugging setState() calls to connected components.
  * @example
  * Onyx.init({
  *     keys: ONYXKEYS,
@@ -1495,13 +1518,18 @@ function init()
 
 
 
-{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;
+
+{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$keysToDisableSy = _ref7.keysToDisableSyncEvents,keysToDisableSyncEvents = _ref7$keysToDisableSy === void 0 ? [] : _ref7$keysToDisableSy,_ref7$debugSetState = _ref7.debugSetState,debugSetState = _ref7$debugSetState === void 0 ? false : _ref7$debugSetState;
   if (captureMetrics) {
     // The code here is only bundled and applied when the captureMetrics is set
     // eslint-disable-next-line no-use-before-define
     applyDecorators();
   }
 
+  if (debugSetState) {
+    PerformanceUtils.setShouldDebugSetState(true);
+  }
+
   if (maxCachedKeysCount > 0) {
     _OnyxCache.default.setRecentKeysLimit(maxCachedKeysCount);
   }
@@ -1954,6 +1982,78 @@ fastMerge;exports["default"] = _default;
 
 /***/ }),
 
+/***/ "./lib/metrics/PerformanceUtils.js":
+/*!*****************************************!*\
+  !*** ./lib/metrics/PerformanceUtils.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.logSetStateCall = logSetStateCall;exports.setShouldDebugSetState = setShouldDebugSetState;var _transform = _interopRequireDefault(__webpack_require__(/*! lodash/transform */ "lodash/transform"));
+var _underscore = _interopRequireDefault(__webpack_require__(/*! underscore */ "underscore"));
+
+var debugSetState = false;
+
+/**
+ * @param {Boolean} debug
+ */
+function setShouldDebugSetState(debug) {
+  debugSetState = debug;
+}
+
+/**
+ * Deep diff between two objects. Useful for figuring out what changed about an object from one render to the next so
+ * that state and props updates can be optimized.
+ *
+ * @param  {Object} object
+ * @param  {Object} base
+ * @return {Object}
+ */
+function diffObject(object, base) {
+  function changes(obj, comparisonObject) {
+    return (0, _transform.default)(obj, function (result, value, key) {
+      if (_underscore.default.isEqual(value, comparisonObject[key])) {
+        return;
+      }
+
+      // eslint-disable-next-line no-param-reassign
+      result[key] = _underscore.default.isObject(value) && _underscore.default.isObject(comparisonObject[key]) ?
+      changes(value, comparisonObject[key]) :
+      value;
+    });
+  }
+  return changes(object, base);
+}
+
+/**
+ * Provide insights into why a setState() call occurred by diffing the before and after values.
+ *
+ * @param {Object} mapping
+ * @param {*} previousValue
+ * @param {*} newValue
+ * @param {String} caller
+ * @param {String} [keyThatChanged]
+ */
+function logSetStateCall(mapping, previousValue, newValue, caller, keyThatChanged) {
+  if (!debugSetState) {
+    return;
+  }
+
+  var logParams = {};
+  if (keyThatChanged) {
+    logParams.keyThatChanged = keyThatChanged;
+  }
+  if (_underscore.default.isObject(newValue) && _underscore.default.isObject(previousValue)) {
+    logParams.difference = diffObject(previousValue, newValue);
+  } else {
+    logParams.previousValue = previousValue;
+    logParams.newValue = newValue;
+  }
+
+  console.debug("[Onyx-Debug] " + mapping.displayName + " setState() called. Subscribed to key '" + mapping.key + "' (" + caller + ")", logParams);
+}
+
+/***/ }),
+
 /***/ "./lib/metrics/index.web.js":
 /*!**********************************!*\
   !*** ./lib/metrics/index.web.js ***!
@@ -2202,8 +2302,8 @@ function _default(mapOnyxToState) {var _this = this;
   omit(function (config) {return config.initWithStoredValues === false;}).
   keys().
   value();
-
-  return function (WrappedComponent) {var
+  return function (WrappedComponent) {
+    var displayName = getDisplayName(WrappedComponent);var
     withOnyx = /*#__PURE__*/function (_React$Component) {(0, _inherits2.default)(withOnyx, _React$Component);var _super = _createSuper(withOnyx);
       function withOnyx(props) {var _this2;(0, _classCallCheck2.default)(this, withOnyx);
         _this2 = _super.call(this, props);
@@ -2328,7 +2428,8 @@ function _default(mapOnyxToState) {var _this = this;
           mapping, {
             key: key,
             statePropertyName: statePropertyName,
-            withOnyxInstance: this }));
+            withOnyxInstance: this,
+            displayName: displayName }));
 
         } }, { key: "render", value: function render()
 
@@ -2352,7 +2453,7 @@ function _default(mapOnyxToState) {var _this = this;
             , (0, _extends2.default)({}, propsToPass,
 
             stateToPass, {
-              ref: this.props.forwardedRef, __self: this, __source: { fileName: _jsxFileName, lineNumber: 173, columnNumber: 21 } })));
+              ref: this.props.forwardedRef, __self: this, __source: { fileName: _jsxFileName, lineNumber: 174, columnNumber: 21 } })));
 
 
         } }]);return withOnyx;}(_react.default.Component);
@@ -2367,11 +2468,11 @@ function _default(mapOnyxToState) {var _this = this;
     withOnyx.defaultProps = {
       forwardedRef: undefined };
 
-    withOnyx.displayName = "withOnyx(" + getDisplayName(WrappedComponent) + ")";
+    withOnyx.displayName = "withOnyx(" + displayName + ")";
     return _react.default.forwardRef(function (props, ref) {
       var Component = withOnyx;
       // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, { forwardedRef: ref, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 197, columnNumber: 20 } }));
+      return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, { forwardedRef: ref, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 198, columnNumber: 20 } }));
     });
   };
 }
@@ -3483,6 +3584,17 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_get__;
 
 /***/ }),
 
+/***/ "lodash/transform":
+/*!***********************************!*\
+  !*** external "lodash/transform" ***!
+  \***********************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE_lodash_transform__;
+
+/***/ }),
+
 /***/ "react":
 /*!************************!*\
   !*** external "react" ***!