react-native-onyx 1.0.61 → 1.0.63

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,118 @@
+import {
+    set,
+    keys,
+    getMany,
+    setMany,
+    get,
+    clear,
+    del,
+    delMany,
+    createStore,
+    promisifyRequest,
+} from 'idb-keyval';
+import _ from 'underscore';
+import fastMerge from '../../fastMerge';
+
+// We don't want to initialize the store while the JS bundle loads as idb-keyval will try to use global.indexedDB
+// which might not be available in certain environments that load the bundle (e.g. electron main process).
+let customStoreInstance;
+const getCustomStore = () => {
+    if (!customStoreInstance) {
+        customStoreInstance = createStore('OnyxDB', 'keyvaluepairs');
+    }
+    return customStoreInstance;
+};
+
+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, getCustomStore()),
+
+    /**
+     * 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, getCustomStore())
+        .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 => getCustomStore()('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, getCustomStore()),
+
+    /**
+     * Clear everything from storage and also stops the SyncQueue from adding anything more to storage
+     * @returns {Promise<void>}
+     */
+    clear: () => clear(getCustomStore()),
+
+    /**
+     * Returns all keys available in storage
+     * @returns {Promise<String[]>}
+     */
+    getAllKeys: () => keys(getCustomStore()),
+
+    /**
+     * 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, getCustomStore()),
+
+    /**
+     * Remove given key and it's value from storage
+     * @param {String} key
+     * @returns {Promise<void>}
+     */
+    removeItem: key => del(key, getCustomStore()),
+
+    /**
+     * Remove given keys and their values from storage
+     *
+     * @param {Array} keysParam
+     * @returns {Promise}
+     */
+    removeItems: keysParam => delMany(keysParam, getCustomStore()),
+};
+
+export default provider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "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;