react-native-onyx 1.0.60 → 1.0.62

package/lib/Onyx.js

@@ -901,7 +901,6 @@ function broadcastUpdate(key, value, hasChanged, method) {
 }
 
 /**
- * @private
  * @param {String} key
  * @returns {Boolean}
  */
@@ -1409,6 +1408,7 @@ const Onyx = {
     METHOD,
     setMemoryOnlyKeys,
     tryGetCachedValue,
+    hasPendingMergeForKey,
 };
 
 /**

package/lib/storage/WebStorage.js

@@ -1,10 +1,10 @@
 /**
- * This file is here to wrap LocalForage with a layer that provides data-changed events like the ones that exist
+ * This file is here to wrap IDBKeyVal with a layer that provides data-changed events like the ones that exist
  * when using LocalStorage APIs in the browser. These events are great because multiple tabs can listen for when
  * data changes and then stay up-to-date with everything happening in Onyx.
  */
 import _ from 'underscore';
-import Storage from './providers/LocalForage';
+import Storage from './providers/IDBKeyVal';
 
 const SYNC_ONYX = 'SYNC_ONYX';
 

package/lib/storage/__mocks__/index.js

@@ -8,7 +8,7 @@ const set = jest.fn((key, value) => {
     return Promise.resolve(value);
 });
 
-const localForageMock = {
+const idbKeyvalMock = {
     setItem(key, value) {
         return set(key, value);
     },
@@ -57,23 +57,23 @@ const localForageMock = {
     config() {},
 };
 
-const localForageMockSpy = {
-    localForageSet: set,
-    setItem: jest.fn(localForageMock.setItem),
-    getItem: jest.fn(localForageMock.getItem),
-    removeItem: jest.fn(localForageMock.removeItem),
-    removeItems: jest.fn(localForageMock.removeItems),
-    clear: jest.fn(localForageMock.clear),
-    getAllKeys: jest.fn(localForageMock.getAllKeys),
-    config: jest.fn(localForageMock.config),
-    multiGet: jest.fn(localForageMock.multiGet),
-    multiSet: jest.fn(localForageMock.multiSet),
-    multiMerge: jest.fn(localForageMock.multiMerge),
-    mergeItem: jest.fn(localForageMock.mergeItem),
+const idbKeyvalMockSpy = {
+    idbKeyvalSet: set,
+    setItem: jest.fn(idbKeyvalMock.setItem),
+    getItem: jest.fn(idbKeyvalMock.getItem),
+    removeItem: jest.fn(idbKeyvalMock.removeItem),
+    removeItems: jest.fn(idbKeyvalMock.removeItems),
+    clear: jest.fn(idbKeyvalMock.clear),
+    getAllKeys: jest.fn(idbKeyvalMock.getAllKeys),
+    config: jest.fn(idbKeyvalMock.config),
+    multiGet: jest.fn(idbKeyvalMock.multiGet),
+    multiSet: jest.fn(idbKeyvalMock.multiSet),
+    multiMerge: jest.fn(idbKeyvalMock.multiMerge),
+    mergeItem: jest.fn(idbKeyvalMock.mergeItem),
     getStorageMap: jest.fn(() => storageMapInternal),
     setInitialMockData: jest.fn((data) => {
         storageMapInternal = data;
     }),
 };
 
-export default localForageMockSpy;
+export default idbKeyvalMockSpy;

package/lib/storage/providers/IDBKeyVal.js

@@ -0,0 +1,110 @@
+import {
+    set,
+    keys,
+    getMany,
+    setMany,
+    get,
+    clear,
+    del,
+    delMany,
+    createStore,
+    promisifyRequest,
+} from 'idb-keyval';
+import _ from 'underscore';
+import fastMerge from '../../fastMerge';
+
+const customStore = createStore('OnyxDB', 'keyvaluepairs');
+
+const provider = {
+    /**
+     * 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) => set(key, value, customStore),
+
+    /**
+     * Get multiple key-value pairs for the give array of keys in a batch.
+     * This is optimized to use only one database transaction.
+     * @param {String[]} keysParam
+     * @return {Promise<Array<[key, value]>>}
+     */
+    multiGet: keysParam => getMany(keysParam, customStore)
+        .then(values => _.map(values, (value, index) => [keysParam[index], value])),
+
+    /**
+     * Multiple merging of existing and new values in a batch
+     * @param {Array<[key, value]>} pairs
+     * @return {Promise<void>}
+     */
+    multiMerge: pairs => customStore('readwrite', (store) => {
+        // Note: we are using the manual store transaction here, to fit the read and update
+        // of the items in one transaction to achieve best performance.
+
+        const getValues = Promise.all(_.map(pairs, ([key]) => promisifyRequest(store.get(key))));
+
+        return getValues.then((values) => {
+            const upsertMany = _.map(pairs, ([key, value], index) => {
+                const prev = values[index];
+                const newValue = _.isObject(prev) ? fastMerge(prev, value) : value;
+                return promisifyRequest(store.put(newValue, key));
+            });
+            return Promise.all(upsertMany);
+        });
+    }),
+
+    /**
+     * 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 provider.multiMerge([[key, modifiedData]]);
+    },
+
+    /**
+     * Stores multiple key-value pairs in a batch
+     * @param {Array<[key, value]>} pairs
+     * @return {Promise<void>}
+     */
+    multiSet: pairs => setMany(pairs, customStore),
+
+    /**
+     * Clear everything from storage and also stops the SyncQueue from adding anything more to storage
+     * @returns {Promise<void>}
+     */
+    clear: () => clear(customStore),
+
+    /**
+     * Returns all keys available in storage
+     * @returns {Promise<String[]>}
+     */
+    getAllKeys: () => keys(customStore),
+
+    /**
+     * Get the value of a given key or return `null` if it's not available in storage
+     * @param {String} key
+     * @return {Promise<*>}
+     */
+    getItem: key => get(key, customStore),
+
+    /**
+     * Remove given key and it's value from storage
+     * @param {String} key
+     * @returns {Promise<void>}
+     */
+    removeItem: key => del(key, customStore),
+
+    /**
+     * Remove given keys and their values from storage
+     *
+     * @param {Array} keysParam
+     * @returns {Promise}
+     */
+    removeItems: keysParam => delMany(keysParam, customStore),
+};
+
+export default provider;

package/lib/withOnyx.js

@@ -41,7 +41,18 @@ export default function (mapOnyxToState) {
                     const key = Str.result(mapping.key, props);
                     const value = Onyx.tryGetCachedValue(key, mapping);
 
-                    if (value !== undefined) {
+                    /**
+                     * If we have a pending merge for a key it could mean that data is being set via Onyx.merge() and someone expects a component to have this data immediately.
+                     *
+                     * @example
+                     *
+                     * Onyx.merge('report_123', value);
+                     * Navigation.navigate(route); // Where "route" expects the "value" to be available immediately once rendered.
+                     *
+                     * In reality, Onyx.merge() will only update the subscriber after all merges have been batched and the previous value is retrieved via a get() (returns a promise).
+                     * So, we won't use the cache optimization here as it will lead us to arbitrarily defer various actions in the application code.
+                     */
+                    if (value !== undefined && !Onyx.hasPendingMergeForKey(key)) {
                         // eslint-disable-next-line no-param-reassign
                         resultObj[propertyName] = value;
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -59,10 +59,10 @@
     "eslint-config-expensify": "^2.0.38",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.10",
+    "idb-keyval": "^6.2.1",
     "jest": "^26.5.2",
     "jest-cli": "^26.5.2",
     "jsdoc-to-markdown": "^7.1.0",
-    "localforage": "^1.10.0",
     "metro-react-native-babel-preset": "^0.72.3",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
@@ -76,23 +76,19 @@
     "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
-    "localforage": "^1.10.0",
-    "localforage-removeitems": "^1.4.0",
+    "idb-keyval": "^6.2.1",
     "react": ">=18.1.0",
     "react-native-performance": "^4.0.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2"
   },
   "peerDependenciesMeta": {
-    "react-native-performance": {
-      "optional": true
-    },
-    "react-native-quick-sqlite": {
+    "idb-keyval": {
       "optional": true
     },
-    "localforage": {
+    "react-native-performance": {
       "optional": true
     },
-    "localforage-removeitems": {
+    "react-native-quick-sqlite": {
       "optional": true
     }
   },

package/lib/storage/providers/LocalForage.js

@@ -1,158 +0,0 @@
-/**
- * @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
- */
-
-import localforage from 'localforage';
-import _ from 'underscore';
-import {extendPrototype} from 'localforage-removeitems';
-import SyncQueue from '../../SyncQueue';
-import * as Str from '../../Str';
-import fastMerge from '../../fastMerge';
-
-extendPrototype(localforage);
-
-localforage.config({
-    name: 'OnyxDB',
-});
-
-/**
- * Keys that will not ever be persisted to disk.
- */
-let memoryOnlyKeys = [];
-
-const provider = {
-    /**
-     * Writing very quickly to IndexedDB causes performance issues and can lock up the page and lead to jank.
-     * So, we are slowing this process down by waiting until one write is complete before moving on
-     * to the next.
-     */
-    setItemQueue: new SyncQueue(({key, value, shouldMerge}) => {
-        if (_.find(memoryOnlyKeys, noCacheKey => Str.startsWith(key, noCacheKey))) {
-            return Promise.resolve();
-        }
-
-        if (shouldMerge) {
-            return localforage.getItem(key)
-                .then((existingValue) => {
-                    const newValue = _.isObject(existingValue)
-
-                        // lodash adds a small overhead so we don't use it here
-                        // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
-                        ? Object.assign({}, fastMerge(existingValue, value))
-                        : value;
-                    return localforage.setItem(key, newValue);
-                });
-        }
-
-        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
-     * @return {Promise<Array<[key, value]>>}
-     */
-    multiGet(keys) {
-        const pairs = _.map(
-            keys,
-            key => localforage.getItem(key)
-                .then(value => [key, value]),
-        );
-
-        return Promise.all(pairs);
-    },
-
-    /**
-     * Multiple merging of existing and new values in a batch
-     * @param {Array<[key, value]>} pairs
-     * @return {Promise<void>}
-     */
-    multiMerge(pairs) {
-        const tasks = _.map(pairs, ([key, value]) => this.setItemQueue.push({key, value, shouldMerge: true}));
-
-        // We're returning Promise.resolve, otherwise the array of task results will be returned to the caller
-        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
-     * @return {Promise<void>}
-     */
-    multiSet(pairs) {
-        // We're returning Promise.resolve, otherwise the array of task results will be returned to the caller
-        const tasks = _.map(pairs, ([key, value]) => this.setItem(key, value));
-        return Promise.all(tasks).then(() => Promise.resolve());
-    },
-
-    /**
-     * Clear everything from storage and also stops the SyncQueue from adding anything more to storage
-     * @returns {Promise<void>}
-     */
-    clear() {
-        this.setItemQueue.abort();
-        return localforage.clear();
-    },
-
-    /**
-     * Returns all keys available in storage
-     * @returns {Promise<String[]>}
-     */
-    getAllKeys: localforage.keys,
-
-    /**
-     * Get the value of a given key or return `null` if it's not available in storage
-     * @param {String} key
-     * @return {Promise<*>}
-     */
-    getItem: localforage.getItem,
-
-    /**
-     * Remove given key and it's value from storage
-     * @param {String} key
-     * @returns {Promise<void>}
-     */
-    removeItem: localforage.removeItem,
-
-    /**
-     * Remove given keys and their values from storage
-     *
-     * @param {Array} keys
-     * @returns {Promise}
-     */
-    removeItems(keys) {
-        return localforage.removeItems(keys);
-    },
-
-    /**
-     * @param {string[]} keyList
-     */
-    setMemoryOnlyKeys(keyList) {
-        memoryOnlyKeys = keyList;
-    },
-};
-
-export default provider;