react-native-onyx 1.0.60 → 1.0.62

package/dist/web.development.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("fast-equals"), require("underscore"), require("localforage"), require("localforage-removeitems"), require("lodash/transform"), require("react"));
+		module.exports = factory(require("fast-equals"), require("underscore"), require("idb-keyval"), require("lodash/transform"), require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["fast-equals", "underscore", "localforage", "localforage-removeitems", "lodash/transform", "react"], factory);
+		define(["fast-equals", "underscore", "idb-keyval", "lodash/transform", "react"], factory);
 	else if(typeof exports === 'object')
-		exports["react-native-onyx/web"] = factory(require("fast-equals"), require("underscore"), require("localforage"), require("localforage-removeitems"), require("lodash/transform"), require("react"));
+		exports["react-native-onyx/web"] = factory(require("fast-equals"), require("underscore"), require("idb-keyval"), require("lodash/transform"), require("react"));
 	else
-		root["react-native-onyx/web"] = factory(root["fast-equals"], root["underscore"], root["localforage"], root["localforage-removeitems"], root["lodash/transform"], root["react"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE_fast_equals__, __WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_localforage__, __WEBPACK_EXTERNAL_MODULE_localforage_removeitems__, __WEBPACK_EXTERNAL_MODULE_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react__) => {
+		root["react-native-onyx/web"] = factory(root["fast-equals"], root["underscore"], root["idb-keyval"], root["lodash/transform"], root["react"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE_fast_equals__, __WEBPACK_EXTERNAL_MODULE_underscore__, __WEBPACK_EXTERNAL_MODULE_idb_keyval__, __WEBPACK_EXTERNAL_MODULE_lodash_transform__, __WEBPACK_EXTERNAL_MODULE_react__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -983,7 +983,6 @@ function broadcastUpdate(key, value, hasChanged, method) {
 }
 
 /**
- * @private
  * @param {String} key
  * @returns {Boolean}
  */
@@ -1490,7 +1489,8 @@ const Onyx = {
   isSafeEvictionKey,
   METHOD,
   setMemoryOnlyKeys,
-  tryGetCachedValue
+  tryGetCachedValue,
+  hasPendingMergeForKey
 };
 
 /**
@@ -1812,79 +1812,6 @@ function result(parameter) {for (var _len = arguments.length, args = new Array(_
 
 
 
-/***/ }),
-
-/***/ "./lib/SyncQueue.js":
-/*!**************************!*\
-  !*** ./lib/SyncQueue.js ***!
-  \**************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (/* binding */ SyncQueue)
-/* harmony export */ });
-/**
- * Synchronous queue that can be used to ensure promise based tasks are run in sequence.
- * Pass to the constructor a function that returns a promise to run the task then add data.
- *
- * @example
- *
- *     const queue = new SyncQueue(({key, val}) => {
- *         return someAsyncProcess(key, val);
- *     });
- *
- *     queue.push({key: 1, val: '1'});
- *     queue.push({key: 2, val: '2'});
- */
-class SyncQueue {
-  /**
-   * @param {Function} run - must return a promise
-   */
-  constructor(run) {
-    this.queue = [];
-    this.isProcessing = false;
-    this.run = run;
-  }
-
-  /**
-   * Stop the queue from being processed and clear out any existing tasks
-   */
-  abort() {
-    this.queue = [];
-    this.isProcessing = false;
-  }
-
-  process() {
-    if (this.isProcessing || this.queue.length === 0) {
-      return;
-    }
-
-    this.isProcessing = true;
-
-    const { data, resolve, reject } = this.queue.shift();
-    this.run(data).
-    then(resolve).
-    catch(reject).
-    finally(() => {
-      this.isProcessing = false;
-      this.process();
-    });
-  }
-
-  /**
-   * @param {*} data
-   * @returns {Promise}
-   */
-  push(data) {
-    return new Promise((resolve, reject) => {
-      this.queue.push({ resolve, reject, data });
-      this.process();
-    });
-  }
-}
-
 /***/ }),
 
 /***/ "./lib/createDeferredTask.js":
@@ -2119,9 +2046,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! underscore */ "underscore");
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _providers_LocalForage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./providers/LocalForage */ "./lib/storage/providers/LocalForage.js");
+/* harmony import */ var _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./providers/IDBKeyVal */ "./lib/storage/providers/IDBKeyVal.js");
 /**
- * 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.
  */
@@ -2146,20 +2073,20 @@ function raiseStorageSyncManyKeysEvent(onyxKeys) {
 }
 
 const webStorage = {
-  ..._providers_LocalForage__WEBPACK_IMPORTED_MODULE_1__["default"],
+  ..._providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"],
 
   /**
    * @param {Function} onStorageKeyChanged Storage synchronization mechanism keeping all opened tabs in sync
    */
   keepInstancesSync(onStorageKeyChanged) {
     // Override set, remove and clear to raise storage events that we intercept in other tabs
-    this.setItem = (key, value) => _providers_LocalForage__WEBPACK_IMPORTED_MODULE_1__["default"].setItem(key, value).
+    this.setItem = (key, value) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].setItem(key, value).
     then(() => raiseStorageSyncEvent(key));
 
-    this.removeItem = (key) => _providers_LocalForage__WEBPACK_IMPORTED_MODULE_1__["default"].removeItem(key).
+    this.removeItem = (key) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].removeItem(key).
     then(() => raiseStorageSyncEvent(key));
 
-    this.removeItems = (keys) => _providers_LocalForage__WEBPACK_IMPORTED_MODULE_1__["default"].removeItems(keys).
+    this.removeItems = (keys) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].removeItems(keys).
     then(() => raiseStorageSyncManyKeysEvent(keys));
 
     // If we just call Storage.clear other tabs will have no idea which keys were available previously
@@ -2169,11 +2096,11 @@ const webStorage = {
       let allKeys;
 
       // They keys must be retreived before storage is cleared or else the list of keys would be empty
-      return _providers_LocalForage__WEBPACK_IMPORTED_MODULE_1__["default"].getAllKeys().
+      return _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].getAllKeys().
       then((keys) => {
         allKeys = keys;
       }).
-      then(() => _providers_LocalForage__WEBPACK_IMPORTED_MODULE_1__["default"].clear()).
+      then(() => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].clear()).
       then(() => {
         // Now that storage is cleared, the storage sync event can happen which is a more atomic action
         // for other browser tabs
@@ -2189,7 +2116,7 @@ const webStorage = {
       }
 
       const onyxKey = event.newValue;
-      _providers_LocalForage__WEBPACK_IMPORTED_MODULE_1__["default"].getItem(onyxKey).
+      _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].getItem(onyxKey).
       then((value) => onStorageKeyChanged(onyxKey, value));
     });
   }
@@ -2217,10 +2144,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./lib/storage/providers/LocalForage.js":
-/*!**********************************************!*\
-  !*** ./lib/storage/providers/LocalForage.js ***!
-  \**********************************************/
+/***/ "./lib/storage/providers/IDBKeyVal.js":
+/*!********************************************!*\
+  !*** ./lib/storage/providers/IDBKeyVal.js ***!
+  \********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -2228,102 +2155,55 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var localforage__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! localforage */ "localforage");
-/* harmony import */ var localforage__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(localforage__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var idb_keyval__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! idb-keyval */ "idb-keyval");
+/* harmony import */ var idb_keyval__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(idb_keyval__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ "underscore");
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var localforage_removeitems__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! localforage-removeitems */ "localforage-removeitems");
-/* harmony import */ var localforage_removeitems__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(localforage_removeitems__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _SyncQueue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../SyncQueue */ "./lib/SyncQueue.js");
-/* harmony import */ var _Str__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../Str */ "./lib/Str.js");
-/* harmony import */ var _fastMerge__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../fastMerge */ "./lib/fastMerge.js");
-/**
- * @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
- */
-
-
-
+/* harmony import */ var _fastMerge__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../fastMerge */ "./lib/fastMerge.js");
 
 
 
 
-
-(0,localforage_removeitems__WEBPACK_IMPORTED_MODULE_2__.extendPrototype)((localforage__WEBPACK_IMPORTED_MODULE_0___default()));
-
-localforage__WEBPACK_IMPORTED_MODULE_0___default().config({
-  name: 'OnyxDB'
-});
-
-/**
- * Keys that will not ever be persisted to disk.
- */
-let memoryOnlyKeys = [];
+const customStore = (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.createStore)('OnyxDB', 'keyvaluepairs');
 
 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__WEBPACK_IMPORTED_MODULE_3__["default"]((_ref) => {let { key, value, shouldMerge } = _ref;
-    if (underscore__WEBPACK_IMPORTED_MODULE_1___default().find(memoryOnlyKeys, (noCacheKey) => _Str__WEBPACK_IMPORTED_MODULE_4__.startsWith(key, noCacheKey))) {
-      return Promise.resolve();
-    }
-
-    if (shouldMerge) {
-      return localforage__WEBPACK_IMPORTED_MODULE_0___default().getItem(key).
-      then((existingValue) => {
-        const newValue = underscore__WEBPACK_IMPORTED_MODULE_1___default().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({}, (0,_fastMerge__WEBPACK_IMPORTED_MODULE_5__["default"])(existingValue, value)) :
-        value;
-        return localforage__WEBPACK_IMPORTED_MODULE_0___default().setItem(key, newValue);
-      });
-    }
-
-    return localforage__WEBPACK_IMPORTED_MODULE_0___default().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 });
-  },
+  setItem: (key, value) => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.set)(key, value, customStore),
 
   /**
-   * Get multiple key-value pairs for the give array of keys in a batch
-   * @param {String[]} keys
+   * 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(keys) {
-    const pairs = underscore__WEBPACK_IMPORTED_MODULE_1___default().map(
-    keys,
-    (key) => localforage__WEBPACK_IMPORTED_MODULE_0___default().getItem(key).
-    then((value) => [key, value]));
-
-
-    return Promise.all(pairs);
-  },
+  multiGet: (keysParam) => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.getMany)(keysParam, customStore).
+  then((values) => underscore__WEBPACK_IMPORTED_MODULE_1___default().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) {
-    const tasks = underscore__WEBPACK_IMPORTED_MODULE_1___default().map(pairs, (_ref2) => {let [key, value] = _ref2;return this.setItemQueue.push({ key, value, shouldMerge: true });});
+  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.
 
-    // We're returning Promise.resolve, otherwise the array of task results will be returned to the caller
-    return Promise.all(tasks).then(() => Promise.resolve());
-  },
+    const getValues = Promise.all(underscore__WEBPACK_IMPORTED_MODULE_1___default().map(pairs, (_ref) => {let [key] = _ref;return (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.promisifyRequest)(store.get(key));}));
+
+    return getValues.then((values) => {
+      const upsertMany = underscore__WEBPACK_IMPORTED_MODULE_1___default().map(pairs, (_ref2, index) => {let [key, value] = _ref2;
+        const prev = values[index];
+        const newValue = underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(prev) ? (0,_fastMerge__WEBPACK_IMPORTED_MODULE_2__["default"])(prev, value) : value;
+        return (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.promisifyRequest)(store.put(newValue, key));
+      });
+      return Promise.all(upsertMany);
+    });
+  }),
 
   /**
    * Merging an existing value with a new one
@@ -2333,7 +2213,7 @@ const provider = {
    * @return {Promise<void>}
    */
   mergeItem(key, _changes, modifiedData) {
-    return this.setItem(key, modifiedData);
+    return provider.multiMerge([[key, modifiedData]]);
   },
 
   /**
@@ -2341,57 +2221,41 @@ const provider = {
    * @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 = underscore__WEBPACK_IMPORTED_MODULE_1___default().map(pairs, (_ref3) => {let [key, value] = _ref3;return this.setItem(key, value);});
-    return Promise.all(tasks).then(() => Promise.resolve());
-  },
+  multiSet: (pairs) => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.setMany)(pairs, customStore),
 
   /**
    * Clear everything from storage and also stops the SyncQueue from adding anything more to storage
    * @returns {Promise<void>}
    */
-  clear() {
-    this.setItemQueue.abort();
-    return localforage__WEBPACK_IMPORTED_MODULE_0___default().clear();
-  },
+  clear: () => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.clear)(customStore),
 
   /**
    * Returns all keys available in storage
    * @returns {Promise<String[]>}
    */
-  getAllKeys: (localforage__WEBPACK_IMPORTED_MODULE_0___default().keys),
+  getAllKeys: () => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.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: (localforage__WEBPACK_IMPORTED_MODULE_0___default().getItem),
+  getItem: (key) => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.get)(key, customStore),
 
   /**
    * Remove given key and it's value from storage
    * @param {String} key
    * @returns {Promise<void>}
    */
-  removeItem: (localforage__WEBPACK_IMPORTED_MODULE_0___default().removeItem),
+  removeItem: (key) => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.del)(key, customStore),
 
   /**
    * Remove given keys and their values from storage
    *
-   * @param {Array} keys
+   * @param {Array} keysParam
    * @returns {Promise}
    */
-  removeItems(keys) {
-    return localforage__WEBPACK_IMPORTED_MODULE_0___default().removeItems(keys);
-  },
-
-  /**
-   * @param {string[]} keyList
-   */
-  setMemoryOnlyKeys(keyList) {
-    memoryOnlyKeys = keyList;
-  }
+  removeItems: (keysParam) => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.delMany)(keysParam, customStore)
 };
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (provider);
@@ -2460,7 +2324,18 @@ function getDisplayName(component) {
           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) {
+          /**
+           * 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__WEBPACK_IMPORTED_MODULE_4__["default"].hasPendingMergeForKey(key)) {
             // eslint-disable-next-line no-param-reassign
             resultObj[propertyName] = value;
           }
@@ -3733,25 +3608,14 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_fast_equals__;
 
 /***/ }),
 
-/***/ "localforage":
-/*!******************************!*\
-  !*** external "localforage" ***!
-  \******************************/
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE_localforage__;
-
-/***/ }),
-
-/***/ "localforage-removeitems":
-/*!******************************************!*\
-  !*** external "localforage-removeitems" ***!
-  \******************************************/
+/***/ "idb-keyval":
+/*!*****************************!*\
+  !*** external "idb-keyval" ***!
+  \*****************************/
 /***/ ((module) => {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE_localforage_removeitems__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_idb_keyval__;
 
 /***/ }),