react-native-onyx 1.0.54 → 1.0.56

package/dist/web.development.js

@@ -268,6 +268,46 @@ function isSafeEvictionKey(testKey) {
   return underscore__WEBPACK_IMPORTED_MODULE_2___default().some(evictionAllowList, (key) => isKeyMatch(key, testKey));
 }
 
+/**
+ * Tries to get a value from the cache. If the value is not present in cache it will return the default value or undefined.
+ * If the requested key is a collection, it will return an object with all the collection members.
+ *
+ * @param {String} key
+ * @param {Object} mapping
+ * @returns {Mixed}
+ */
+function tryGetCachedValue(key) {let mapping = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let val = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getValue(key);
+
+  if (isCollectionKey(key)) {
+    const allKeys = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getAllKeys();
+    const matchingKeys = underscore__WEBPACK_IMPORTED_MODULE_2___default().filter(allKeys, (k) => k.startsWith(key));
+    const values = underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(matchingKeys, (finalObject, matchedKey) => {
+      const cachedValue = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getValue(matchedKey);
+      if (cachedValue) {
+        // This is permissible because we're in the process of constructing the final object in a reduce function.
+        // eslint-disable-next-line no-param-reassign
+        finalObject[matchedKey] = cachedValue;
+      }
+      return finalObject;
+    }, {});
+    if (underscore__WEBPACK_IMPORTED_MODULE_2___default().isEmpty(values)) {
+      return;
+    }
+    val = values;
+  }
+
+  if (mapping.selector) {
+    const state = mapping.withOnyxInstance ? mapping.withOnyxInstance.state : undefined;
+    if (isCollectionKey(key)) {
+      return reduceCollectionWithSelector(val, mapping.selector, state);
+    }
+    return getSubsetOfData(val, mapping.selector, state);
+  }
+
+  return val;
+}
+
 /**
  * Remove a key from the recently accessed key list.
  *
@@ -932,19 +972,33 @@ function evictStorageAndRetry(error, onyxMethod) {for (var _len = arguments.leng
  *
  * @param {String} key
  * @param {*} value
+ * @param {Boolean} hasChanged
  * @param {String} method
  */
-function broadcastUpdate(key, value, method) {
+function broadcastUpdate(key, value, hasChanged, method) {
   // Logging properties only since values could be sensitive things we don't want to log
   _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo(`${method}() called for key: ${key}${underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject(value) ? ` properties: ${underscore__WEBPACK_IMPORTED_MODULE_2___default().keys(value).join(',')}` : ''}`);
 
   // Update subscribers if the cached value has changed, or when the subscriber specifically requires
   // all updates regardless of value changes (indicated by initWithStoredValues set to false).
-  const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasValueChanged(key, value);
-  _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].set(key, value);
+  if (hasChanged) {
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].set(key, value);
+  } else {
+    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].addToAccessedKeys(key);
+  }
+
   notifySubscribersOnNextTick(key, value, (subscriber) => hasChanged || subscriber.initWithStoredValues === false);
 }
 
+/**
+ * @private
+ * @param {String} key
+ * @returns {Boolean}
+ */
+function hasPendingMergeForKey(key) {
+  return Boolean(mergeQueue[key]);
+}
+
 /**
  * Write a value to our store with the given key
  *
@@ -958,8 +1012,19 @@ function set(key, value) {
     return remove(key);
   }
 
+  if (hasPendingMergeForKey(key)) {
+    _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert(`Onyx.set() called after Onyx.merge() for key: ${key}. It is recommended to use set() or merge() not both.`);
+  }
+
+  const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasValueChanged(key, value);
+
   // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
-  broadcastUpdate(key, value, 'set');
+  broadcastUpdate(key, value, hasChanged, 'set');
+
+  // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
+  if (!hasChanged) {
+    return Promise.resolve();
+  }
 
   return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].setItem(key, value).
   catch((error) => evictStorageAndRetry(error, set, key, value));
@@ -1002,11 +1067,11 @@ function multiSet(data) {
  * Merges an array of changes with an existing value
  *
  * @private
- * @param {Array<*>} changes Array of changes that should be applied to the existing value
  * @param {*} existingValue
+ * @param {Array<*>} changes Array of changes that should be applied to the existing value
  * @returns {*}
  */
-function applyMerge(changes, existingValue) {
+function applyMerge(existingValue, changes) {
   const lastChange = underscore__WEBPACK_IMPORTED_MODULE_2___default().last(changes);
 
   if (underscore__WEBPACK_IMPORTED_MODULE_2___default().isArray(existingValue) || underscore__WEBPACK_IMPORTED_MODULE_2___default().isArray(lastChange)) {
@@ -1015,14 +1080,10 @@ function applyMerge(changes, existingValue) {
 
   if (underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject(existingValue) || underscore__WEBPACK_IMPORTED_MODULE_2___default().every(changes, (underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject))) {
     // Object values are merged one after the other
-    return underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(changes, (modifiedData, change) => {
-      // lodash adds a small overhead so we don't use it here
-      // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
-      const newData = Object.assign({}, (0,_fastMerge__WEBPACK_IMPORTED_MODULE_9__["default"])(modifiedData, change));
-
-      // Remove all first level keys that are explicitly set to null.
-      return underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(newData, (value) => underscore__WEBPACK_IMPORTED_MODULE_2___default().isNull(value));
-    }, existingValue || {});
+    // lodash adds a small overhead so we don't use it here
+    // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
+    return underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(changes, (modifiedData, change) => (0,_fastMerge__WEBPACK_IMPORTED_MODULE_9__["default"])(modifiedData, change),
+    existingValue || {});
   }
 
   // If we have anything else we can't merge it so we'll
@@ -1063,17 +1124,30 @@ function merge(key, changes) {
   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)
-      const batchedChanges = applyMerge(mergeQueue[key]);
+      const batchedChanges = applyMerge(undefined, mergeQueue[key]);
 
       // Clean up the write queue so we
       // don't apply these changes again
       delete mergeQueue[key];
 
       // After that we merge the batched changes with the existing value
-      const modifiedData = applyMerge([batchedChanges], existingValue);
+      let modifiedData = applyMerge(existingValue, [batchedChanges]);
+
+      // For objects, the key for null values needs to be removed from the object to ensure the value will get removed from storage completely.
+      // On native, SQLite will remove top-level keys that are null. To be consistent, we remove them on web too.
+      if (!underscore__WEBPACK_IMPORTED_MODULE_2___default().isArray(modifiedData) && underscore__WEBPACK_IMPORTED_MODULE_2___default().isObject(modifiedData)) {
+        modifiedData = underscore__WEBPACK_IMPORTED_MODULE_2___default().omit(modifiedData, (value) => underscore__WEBPACK_IMPORTED_MODULE_2___default().isNull(value));
+      }
+
+      const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].hasValueChanged(key, modifiedData);
 
       // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
-      broadcastUpdate(key, modifiedData, 'merge');
+      broadcastUpdate(key, modifiedData, hasChanged, 'merge');
+
+      // If the value has not changed, calling Storage.setItem() would be redundant and a waste of performance, so return early instead.
+      if (!hasChanged) {
+        return Promise.resolve();
+      }
 
       return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].mergeItem(key, batchedChanges, modifiedData);
     } catch (error) {
@@ -1084,15 +1158,6 @@ function merge(key, changes) {
   });
 }
 
-/**
- * @private
- * @param {String} key
- * @returns {Boolean}
- */
-function hasPendingMergeForKey(key) {
-  return Boolean(mergeQueue[key]);
-}
-
 /**
  * Merge user provided default key value pairs.
  * @private
@@ -1411,7 +1476,8 @@ const Onyx = {
   removeFromEvictionBlockList,
   isSafeEvictionKey,
   METHOD,
-  setMemoryOnlyKeys
+  setMemoryOnlyKeys,
+  tryGetCachedValue
 };
 
 /**
@@ -2377,13 +2443,25 @@ function getDisplayName(component) {
         // disconnected. It is a key value store with the format {[mapping.key]: connectionID}.
         this.activeConnectionIDs = {};
 
+        const cachedState = underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(mapOnyxToState, (resultObj, mapping, propertyName) => {
+          const key = _Str__WEBPACK_IMPORTED_MODULE_3__.result(mapping.key, props);
+          const value = _Onyx__WEBPACK_IMPORTED_MODULE_4__["default"].tryGetCachedValue(key, mapping);
+
+          if (value !== undefined) {
+            // eslint-disable-next-line no-param-reassign
+            resultObj[propertyName] = value;
+          }
+
+          return resultObj;
+        }, {});
+
+        // If we have all the data we need, then we can render the component immediately
+        cachedState.loading = underscore__WEBPACK_IMPORTED_MODULE_2___default().size(cachedState) < requiredKeysForInit.length;
+
         // Object holding the temporary initial state for the component while we load the various Onyx keys
-        this.tempState = {};
+        this.tempState = cachedState;
 
-        this.state = {
-          // If there are no required keys for init then we can render the wrapped component immediately
-          loading: requiredKeysForInit.length > 0
-        };
+        this.state = cachedState;
       }
 
       componentDidMount() {
@@ -2400,7 +2478,6 @@ function getDisplayName(component) {
         underscore__WEBPACK_IMPORTED_MODULE_2___default().each(mapOnyxToState, (mapping, propertyName) => {
           const previousKey = _Str__WEBPACK_IMPORTED_MODULE_3__.result(mapping.key, prevProps);
           const newKey = _Str__WEBPACK_IMPORTED_MODULE_3__.result(mapping.key, this.props);
-
           if (previousKey !== newKey) {
             _Onyx__WEBPACK_IMPORTED_MODULE_4__["default"].disconnect(this.activeConnectionIDs[previousKey], previousKey);
             delete this.activeConnectionIDs[previousKey];
@@ -2428,6 +2505,16 @@ function getDisplayName(component) {
        * @param {*} val
        */
       setWithOnyxState(statePropertyName, val) {
+        // We might have loaded the values for the onyx keys/mappings already from the cache.
+        // In case we were able to load all the values upfront, the loading state will be false.
+        // However, Onyx.js will always call setWithOnyxState, as it doesn't know that this implementation
+        // already loaded the values from cache. Thus we have to check whether the value has changed
+        // before we set the state to prevent unnecessary renders.
+        const prevValue = this.state[statePropertyName];
+        if (!this.state.loading && prevValue === val) {
+          return;
+        }
+
         if (!this.state.loading) {
           this.setState({ [statePropertyName]: val });
           return;
@@ -2440,7 +2527,14 @@ function getDisplayName(component) {
           return;
         }
 
-        this.setState({ ...this.tempState, loading: false });
+        const stateUpdate = { ...this.tempState, loading: false };
+
+        // The state is set here manually, instead of using setState because setState is an async operation, meaning it might execute on the next tick,
+        // or at a later point in the microtask queue. That can lead to a race condition where
+        // setWithOnyxState is called before the state is actually set. This results in unreliable behavior when checking the loading state and has been mainly observed on fabric.
+        this.state = stateUpdate;
+
+        this.setState(stateUpdate); // Trigger a render
         delete this.tempState;
       }