react-native-onyx 1.0.53 → 1.0.54

package/lib/Onyx.js

@@ -18,6 +18,9 @@ const METHOD = {
     CLEAR: 'clear',
 };
 
+// Key/value store of Onyx key and arrays of values to merge
+const mergeQueue = {};
+
 // Keeps track of the last connectionID that was used so we can keep incrementing it
 let lastConnectionID = 0;
 
@@ -840,6 +843,24 @@ function evictStorageAndRetry(error, onyxMethod, ...args) {
         .then(() => onyxMethod(...args));
 }
 
+/**
+ * Notifys subscribers and writes current value to cache
+ *
+ * @param {String} key
+ * @param {*} value
+ * @param {String} method
+ */
+function broadcastUpdate(key, value, method) {
+    // Logging properties only since values could be sensitive things we don't want to log
+    Logger.logInfo(`${method}() called for key: ${key}${_.isObject(value) ? ` properties: ${_.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 = cache.hasValueChanged(key, value);
+    cache.set(key, value);
+    notifySubscribersOnNextTick(key, value, subscriber => hasChanged || subscriber.initWithStoredValues === false);
+}
+
 /**
  * Write a value to our store with the given key
  *
@@ -853,24 +874,9 @@ function set(key, value) {
         return remove(key);
     }
 
-    // eslint-disable-next-line no-use-before-define
-    if (hasPendingMergeForKey(key)) {
-        Logger.logAlert(`Onyx.set() called after Onyx.merge() for key: ${key}. It is recommended to use set() or merge() not both.`);
-    }
-
-    // If the value in the cache is the same as what we have then do not update subscribers unless they
-    // have initWithStoredValues: false then they MUST get all updates even if nothing has changed.
-    if (!cache.hasValueChanged(key, value)) {
-        cache.addToAccessedKeys(key);
-        notifySubscribersOnNextTick(key, value, subscriber => subscriber.initWithStoredValues === false);
-        return Promise.resolve();
-    }
-
-    // Adds the key to cache when it's not available
-    cache.set(key, value);
-    notifySubscribersOnNextTick(key, value);
+    // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
+    broadcastUpdate(key, value, 'set');
 
-    // Write the thing to persistent storage, which will trigger a storage event for any other tabs open on this domain
     return Storage.setItem(key, value)
         .catch(error => evictStorageAndRetry(error, set, key, value));
 }
@@ -908,67 +914,43 @@ function multiSet(data) {
         .catch(error => evictStorageAndRetry(error, multiSet, data));
 }
 
-// Key/value store of Onyx key and arrays of values to merge
-const mergeQueue = {};
-
 /**
- * @private
- * @param {String} key
- * @returns {Boolean}
- */
-function hasPendingMergeForKey(key) {
-    return Boolean(mergeQueue[key]);
-}
-
-/**
- * Given an Onyx key and value this method will combine all queued
- * value updates and return a single value. Merge attempts are
- * batched. They must occur after a single call to get() so we
- * can avoid race conditions.
+ * Merges an array of changes with an existing value
  *
  * @private
- * @param {String} key
- * @param {*} data
- *
+ * @param {Array<*>} changes Array of changes that should be applied to the existing value
+ * @param {*} existingValue
  * @returns {*}
  */
-function applyMerge(key, data) {
-    const mergeValues = mergeQueue[key];
-    if (_.isArray(data) || _.every(mergeValues, _.isArray)) {
-        // Array values will always just concatenate
-        // more items onto the end of the array
-        return _.reduce(mergeValues, (modifiedData, mergeValue) => [
-            ...modifiedData,
-            ...mergeValue,
-        ], data || []);
+function applyMerge(changes, existingValue) {
+    const lastChange = _.last(changes);
+
+    if (_.isArray(existingValue) || _.isArray(lastChange)) {
+        return lastChange;
     }
 
-    if (_.isObject(data) || _.every(mergeValues, _.isObject)) {
+    if (_.isObject(existingValue) || _.every(changes, _.isObject)) {
         // Object values are merged one after the other
-        return _.reduce(mergeValues, (modifiedData, mergeValue) => {
+        return _.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({}, fastMerge(modifiedData, mergeValue));
+            const newData = Object.assign({}, fastMerge(modifiedData, change));
 
-            // 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.
             // Remove all first level keys that are explicitly set to null.
-            return _.omit(newData, (value, finalObjectKey) => _.isNull(mergeValue[finalObjectKey]));
-        }, data || {});
+            return _.omit(newData, value => _.isNull(value));
+        }, existingValue || {});
     }
 
     // If we have anything else we can't merge it so we'll
     // simply return the last value that was queued
-    return _.last(mergeValues);
+    return lastChange;
 }
 
 /**
  * Merge a new value into an existing value at a key.
  *
- * The types of values that can be merged are `Object` and `Array`. To set another type of value use `Onyx.set()`. Merge
- * behavior uses lodash/merge under the hood for `Object` and simple concatenation for `Array`. However, it's important
- * to note that if you have an array value property on an `Object` that the default behavior of lodash/merge is not to
- * concatenate. See here: https://github.com/lodash/lodash/issues/2872
+ * The types of values that can be merged are `Object` and `Array`. To set another type of value use `Onyx.set()`.
+ * Values of type `Object` get merged with the old value, whilst for `Array`'s we simply replace the current value with the new one.
  *
  * Calls to `Onyx.merge()` are batched so that any calls performed in a single tick will stack in a queue and get
  * applied in the order they were called. Note: `Onyx.set()` calls do not work this way so use caution when mixing
@@ -981,26 +963,35 @@ function applyMerge(key, data) {
  * Onyx.merge(ONYXKEYS.POLICY, {name: 'My Workspace'}); // -> {id: 1, name: 'My Workspace'}
  *
  * @param {String} key ONYXKEYS key
- * @param {(Object|Array)} value Object or Array value to merge
+ * @param {(Object|Array)} changes Object or Array value to merge
  * @returns {Promise}
  */
-function merge(key, value) {
+function merge(key, changes) {
+    // Merge attempts are batched together. The delta should be applied after a single call to get() to prevent a race condition.
+    // Using the initial value from storage in subsequent merge attempts will lead to an incorrect final merged value.
     if (mergeQueue[key]) {
-        mergeQueue[key].push(value);
+        mergeQueue[key].push(changes);
         return Promise.resolve();
     }
+    mergeQueue[key] = [changes];
 
-    mergeQueue[key] = [value];
     return get(key)
-        .then((data) => {
+        .then((existingValue) => {
             try {
-                const modifiedData = applyMerge(key, data);
+                // 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]);
 
                 // Clean up the write queue so we
                 // don't apply these changes again
                 delete mergeQueue[key];
 
-                return set(key, modifiedData);
+                // After that we merge the batched changes with the existing value
+                const modifiedData = applyMerge([batchedChanges], existingValue);
+
+                // This approach prioritizes fast UI changes without waiting for data to be stored in device storage.
+                broadcastUpdate(key, modifiedData, 'merge');
+
+                return Storage.mergeItem(key, batchedChanges, modifiedData);
             } catch (error) {
                 Logger.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
             }
@@ -1009,6 +1000,15 @@ function merge(key, value) {
         });
 }
 
+/**
+ * @private
+ * @param {String} key
+ * @returns {Boolean}
+ */
+function hasPendingMergeForKey(key) {
+    return Boolean(mergeQueue[key]);
+}
+
 /**
  * Merge user provided default key value pairs.
  * @private
@@ -1317,6 +1317,7 @@ const Onyx = {
     multiSet,
     merge,
     mergeCollection,
+    hasPendingMergeForKey,
     update,
     clear,
     getAllKeys,

package/lib/metrics/index.native.js

@@ -43,6 +43,7 @@ function decorateWithMetrics(func, alias = func.name) {
     function decorated(...args) {
         const mark = addMark(alias, args);
 
+        // eslint-disable-next-line no-invalid-this
         const originalPromise = func.apply(this, args);
 
         /*

package/lib/storage/__mocks__/index.js

@@ -11,8 +11,7 @@ const set = jest.fn((key, value) => {
 
 const localForageMock = {
     setItem(key, value) {
-        set(key, value);
-        return Promise.resolve();
+        return set(key, value);
     },
     multiSet(pairs) {
         const setPromises = _.map(pairs, ([key, value]) => this.setItem(key, value));
@@ -36,6 +35,9 @@ const localForageMock = {
 
         return Promise.resolve(storageMapInternal);
     },
+    mergeItem(key, _changes, modifiedData) {
+        return this.setItem(key, modifiedData);
+    },
     removeItem(key) {
         delete storageMapInternal[key];
         return Promise.resolve();
@@ -68,7 +70,7 @@ const localForageMockSpy = {
     multiGet: jest.fn(localForageMock.multiGet),
     multiSet: jest.fn(localForageMock.multiSet),
     multiMerge: jest.fn(localForageMock.multiMerge),
-
+    mergeItem: jest.fn(localForageMock.mergeItem),
     getStorageMap: jest.fn(() => storageMapInternal),
     setInitialMockData: jest.fn((data) => {
         storageMapInternal = data;

package/lib/storage/providers/LocalForage.js

@@ -49,6 +49,16 @@ const provider = {
         return localforage.setItem(key, value);
     }),
 
+    /**
+     * Sets the value for a given key. The only requirement is that the value should be serializable to JSON string
+     * @param {String} key
+     * @param {*} value
+     * @return {Promise<void>}
+     */
+    setItem(key, value) {
+        return this.setItemQueue.push({key, value});
+    },
+
     /**
      * Get multiple key-value pairs for the give array of keys in a batch
      * @param {String[]} keys
@@ -76,6 +86,17 @@ const provider = {
         return Promise.all(tasks).then(() => Promise.resolve());
     },
 
+    /**
+     * Merging an existing value with a new one
+     * @param {String} key
+     * @param {any} _changes - not used, as we rely on the pre-merged data from the `modifiedData`
+     * @param {any} modifiedData - the pre-merged data from `Onyx.applyMerge`
+     * @return {Promise<void>}
+     */
+    mergeItem(key, _changes, modifiedData) {
+        return this.setItem(key, modifiedData);
+    },
+
     /**
      * Stores multiple key-value pairs in a batch
      * @param {Array<[key, value]>} pairs
@@ -126,16 +147,6 @@ const provider = {
         return localforage.removeItems(keys);
     },
 
-    /**
-     * Sets the value for a given key. The only requirement is that the value should be serializable to JSON string
-     * @param {String} key
-     * @param {*} value
-     * @return {Promise<void>}
-     */
-    setItem(key, value) {
-        return this.setItemQueue.push({key, value});
-    },
-
     /**
      * @param {string[]} keyList
      */

package/lib/storage/providers/SQLiteStorage.js

@@ -82,10 +82,10 @@ const provider = {
     multiMerge(pairs) {
         // Note: We use `ON CONFLICT DO UPDATE` here instead of `INSERT OR REPLACE INTO`
         // so the new JSON value is merged into the old one if there's an existing value
-        const query = `INSERT INTO keyvaluepairs (record_key, valueJSON) 
-             VALUES (:key, JSON(:value)) 
-             ON CONFLICT DO UPDATE 
-             SET valueJSON = JSON_PATCH(valueJSON, JSON(:value)); 
+        const query = `INSERT INTO keyvaluepairs (record_key, valueJSON)
+             VALUES (:key, JSON(:value))
+             ON CONFLICT DO UPDATE
+             SET valueJSON = JSON_PATCH(valueJSON, JSON(:value));
         `;
         const queryArguments = _.map(pairs, (pair) => {
             const value = JSON.stringify(pair[1]);
@@ -94,6 +94,16 @@ const provider = {
         return db.executeBatchAsync([[query, queryArguments]]);
     },
 
+    /**
+    * Merges an existing value with a new one by leveraging JSON_PATCH
+    * @param {String} key
+    * @param {*} changes - the delta for a specific key
+    * @return {Promise<void>}
+    */
+    mergeItem(key, changes) {
+        return this.multiMerge([[key, changes]]);
+    },
+
     /**
     * Returns all keys available in storage
     * @returns {Promise<String[]>}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.53",
+  "version": "1.0.54",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -55,7 +55,7 @@
     "babel-jest": "^26.2.2",
     "babel-loader": "^8.2.5",
     "eslint": "^7.6.0",
-    "eslint-config-expensify": "^2.0.24",
+    "eslint-config-expensify": "^2.0.38",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.10",
     "jest": "^26.5.2",