react-native-onyx 1.0.119 → 1.0.121

package/dist/web.development.js

@@ -11,6 +11,119 @@
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "./lib/ActiveClientManager/index.web.js":
+/*!**********************************************!*\
+  !*** ./lib/ActiveClientManager/index.web.js ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "init": () => (/* binding */ init),
+/* harmony export */   "isClientTheLeader": () => (/* binding */ isClientTheLeader),
+/* harmony export */   "isReady": () => (/* binding */ isReady),
+/* harmony export */   "subscribeToClientChange": () => (/* binding */ subscribeToClientChange)
+/* harmony export */ });
+/* harmony import */ var _Str__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Str */ "./lib/Str.js");
+/* harmony import */ var _broadcast__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../broadcast */ "./lib/broadcast/index.web.js");
+/**
+ * When you have many tabs in one browser, the data of Onyx is shared between all of them. Since we persist write requests in Onyx, we need to ensure that
+ * only one tab is processing those saved requests or we would be duplicating data (or creating errors).
+ * This file ensures exactly that by tracking all the clientIDs connected, storing the most recent one last and it considers that last clientID the "leader".
+ */
+
+
+
+
+const NEW_LEADER_MESSAGE = 'NEW_LEADER';
+const REMOVED_LEADER_MESSAGE = 'REMOVE_LEADER';
+
+const clientID = _Str__WEBPACK_IMPORTED_MODULE_0__.guid();
+const subscribers = [];
+let timestamp = null;
+
+let activeClientID = null;
+let setIsReady = () => {};
+const isReadyPromise = new Promise((resolve) => {
+  setIsReady = resolve;
+});
+
+/**
+ * Determines when the client is ready. We need to wait both till we saved our ID in onyx AND the init method was called
+ * @returns {Promise}
+ */
+function isReady() {
+  return isReadyPromise;
+}
+
+/**
+ * Returns a boolean indicating if the current client is the leader.
+ *
+ * @returns {Boolean}
+ */
+function isClientTheLeader() {
+  return activeClientID === clientID;
+}
+
+/**
+ * Subscribes to when the client changes.
+ * @param {Function} callback
+ */
+function subscribeToClientChange(callback) {
+  subscribers.push(callback);
+}
+
+/**
+ * Subscribe to the broadcast channel to listen for messages from other tabs, so that
+ * all tabs agree on who the leader is, which should always be the last tab to open.
+ */
+function init() {
+  _broadcast__WEBPACK_IMPORTED_MODULE_1__.subscribe((message) => {
+    switch (message.data.type) {
+      case NEW_LEADER_MESSAGE:{
+          // Only update the active leader if the message received was from another
+          // tab that initialized after the current one; if the timestamps are the
+          // same, it uses the client ID to tie-break
+          const isTimestampEqual = timestamp === message.data.timestamp;
+          const isTimestampNewer = timestamp > message.data.timestamp;
+          if (isClientTheLeader() && (isTimestampNewer || isTimestampEqual && clientID > message.data.clientID)) {
+            return;
+          }
+          activeClientID = message.data.clientID;
+
+          subscribers.forEach((callback) => callback());
+          break;
+        }
+      case REMOVED_LEADER_MESSAGE:
+        activeClientID = clientID;
+        timestamp = Date.now();
+        _broadcast__WEBPACK_IMPORTED_MODULE_1__.sendMessage({ type: NEW_LEADER_MESSAGE, clientID, timestamp });
+        subscribers.forEach((callback) => callback());
+        break;
+      default:
+        break;}
+
+  });
+
+  activeClientID = clientID;
+  timestamp = Date.now();
+
+  _broadcast__WEBPACK_IMPORTED_MODULE_1__.sendMessage({ type: NEW_LEADER_MESSAGE, clientID, timestamp });
+  setIsReady();
+
+  window.addEventListener('beforeunload', () => {
+    if (!isClientTheLeader()) {
+      return;
+    }
+    _broadcast__WEBPACK_IMPORTED_MODULE_1__.sendMessage({ type: REMOVED_LEADER_MESSAGE, clientID });
+  });
+}
+
+
+
+/***/ }),
+
 /***/ "./lib/Logger.js":
 /*!***********************!*\
   !*** ./lib/Logger.js ***!
@@ -79,6 +192,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _createDeferredTask__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./createDeferredTask */ "./lib/createDeferredTask.js");
 /* harmony import */ var _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./metrics/PerformanceUtils */ "./lib/metrics/PerformanceUtils.js");
 /* harmony import */ var _storage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./storage */ "./lib/storage/index.web.js");
+/* harmony import */ var _broadcast__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./broadcast */ "./lib/broadcast/index.web.js");
+/* harmony import */ var _ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ActiveClientManager */ "./lib/ActiveClientManager/index.web.js");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils */ "./lib/utils.js");
 /* harmony import */ var _batch__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./batch */ "./lib/batch.js");
 /* eslint-disable no-continue */
@@ -93,6 +208,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 // Method constants
 const METHOD = {
   SET: 'set',
@@ -102,6 +219,8 @@ const METHOD = {
   CLEAR: 'clear'
 };
 
+const ON_CLEAR = 'on_clear';
+
 // Key/value store of Onyx key and arrays of values to merge
 const mergeQueue = {};
 const mergeQueuePromise = {};
@@ -132,6 +251,12 @@ let defaultKeyStates = {};
 // Connections can be made before `Onyx.init`. They would wait for this task before resolving
 const deferredInitTask = (0,_createDeferredTask__WEBPACK_IMPORTED_MODULE_2__["default"])();
 
+// The promise of the clear function, saved so that no writes happen while it's executing
+let isClearing = false;
+
+// Callback to be executed after the clear execution ends
+let onClearCallback = null;
+
 let batchUpdatesPromise = null;
 let batchUpdatesQueue = [];
 
@@ -191,12 +316,17 @@ const getSubsetOfData = (sourceData, selector, withOnyxInstanceState) => selecto
  * @param {Object} [withOnyxInstanceState]
  * @returns {Object}
  */
-const reduceCollectionWithSelector = (collection, selector, withOnyxInstanceState) => underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(collection, (finalCollection, item, key) => {
+const reduceCollectionWithSelector = (collection, selector, withOnyxInstanceState) =>
+underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(
+collection,
+(finalCollection, item, key) => {
   // eslint-disable-next-line no-param-reassign
   finalCollection[key] = getSubsetOfData(item, selector, withOnyxInstanceState);
 
   return finalCollection;
-}, {});
+},
+{});
+
 
 /**
  * Get some data from the store
@@ -249,8 +379,7 @@ function getAllKeys() {
   }
 
   // Otherwise retrieve the keys from storage and capture a promise to aid concurrent usages
-  const promise = _storage__WEBPACK_IMPORTED_MODULE_5__["default"].getAllKeys().
-  then((keys) => {
+  const promise = _storage__WEBPACK_IMPORTED_MODULE_5__["default"].getAllKeys().then((keys) => {
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keys, (key) => _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].addKey(key));
     return keys;
   });
@@ -289,9 +418,7 @@ function isCollectionMemberKey(collectionKey, key) {
  * @return {Boolean}
  */
 function isKeyMatch(configKey, key) {
-  return isCollectionKey(configKey) ?
-  _Str__WEBPACK_IMPORTED_MODULE_7__.startsWith(key, configKey) :
-  configKey === key;
+  return isCollectionKey(configKey) ? _Str__WEBPACK_IMPORTED_MODULE_7__.startsWith(key, configKey) : configKey === key;
 }
 
 /**
@@ -326,7 +453,9 @@ function tryGetCachedValue(key) {let mapping = arguments.length > 1 && arguments
       return;
     }
     const matchingKeys = underscore__WEBPACK_IMPORTED_MODULE_1___default().filter(allCacheKeys, (k) => k.startsWith(key));
-    const values = underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(matchingKeys, (finalObject, matchedKey) => {
+    const values = underscore__WEBPACK_IMPORTED_MODULE_1___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.
@@ -334,7 +463,9 @@ function tryGetCachedValue(key) {let mapping = arguments.length > 1 && arguments
         finalObject[matchedKey] = cachedValue;
       }
       return finalObject;
-    }, {});
+    },
+    {});
+
 
     val = values;
   }
@@ -422,8 +553,7 @@ function addToEvictionBlockList(key, connectionID) {
  * @returns {Promise}
  */
 function addAllSafeEvictionKeysToRecentlyAccessedList() {
-  return getAllKeys().
-  then((keys) => {
+  return getAllKeys().then((keys) => {
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(evictionAllowList, (safeEvictionKey) => {
       underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keys, (key) => {
         if (!isKeyMatch(safeEvictionKey, key)) {
@@ -441,11 +571,11 @@ function addAllSafeEvictionKeysToRecentlyAccessedList() {
  * @returns {Object}
  */
 function getCachedCollection(collectionKey) {
-  const collectionMemberKeys = underscore__WEBPACK_IMPORTED_MODULE_1___default().filter(_OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getAllKeys(),
-  (storedKey) => isCollectionMemberKey(collectionKey, storedKey));
-
+  const collectionMemberKeys = underscore__WEBPACK_IMPORTED_MODULE_1___default().filter(_OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getAllKeys(), (storedKey) => isCollectionMemberKey(collectionKey, storedKey));
 
-  return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(collectionMemberKeys, (prev, curr) => {
+  return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(
+  collectionMemberKeys,
+  (prev, curr) => {
     const cachedValue = _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].getValue(curr);
     if (!cachedValue) {
       return prev;
@@ -454,7 +584,9 @@ function getCachedCollection(collectionKey) {
     // eslint-disable-next-line no-param-reassign
     prev[curr] = cachedValue;
     return prev;
-  }, {});
+  },
+  {});
+
 }
 
 /**
@@ -823,9 +955,7 @@ function addKeyToRecentlyAccessedIfNeeded(mapping) {
   if (mapping.withOnyxInstance && !isCollectionKey(mapping.key)) {
     // All React components subscribing to a key flagged as a safe eviction key must implement the canEvict property.
     if (underscore__WEBPACK_IMPORTED_MODULE_1___default().isUndefined(mapping.canEvict)) {
-      throw new Error(
-      `Cannot subscribe to safe eviction key '${mapping.key}' without providing a canEvict value.`);
-
+      throw new Error(`Cannot subscribe to safe eviction key '${mapping.key}' without providing a canEvict value.`);
     }
 
     addLastAccessedKey(mapping.key);
@@ -841,11 +971,17 @@ function addKeyToRecentlyAccessedIfNeeded(mapping) {
  */
 function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
   Promise.all(underscore__WEBPACK_IMPORTED_MODULE_1___default().map(matchingKeys, (key) => get(key))).
-  then((values) => underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(values, (finalObject, value, i) => {
+  then((values) =>
+  underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(
+  values,
+  (finalObject, value, i) => {
     // eslint-disable-next-line no-param-reassign
     finalObject[matchingKeys[i]] = value;
     return finalObject;
-  }, {})).
+  },
+  {})).
+
+
   then((val) => sendDataToConnection(mapping, val, undefined, true));
 }
 
@@ -893,11 +1029,7 @@ function connect(mapping) {
     // Performance improvement
     // If the mapping is connected to an onyx key that is not a collection
     // we can skip the call to getAllKeys() and return an array with a single item
-    if (Boolean(mapping.key) &&
-    typeof mapping.key === 'string' &&
-    !mapping.key.endsWith('_') &&
-    _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].storageKeys.has(mapping.key))
-    {
+    if (Boolean(mapping.key) && typeof mapping.key === 'string' && !mapping.key.endsWith('_') && _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].storageKeys.has(mapping.key)) {
       return [mapping.key];
     }
     return getAllKeys();
@@ -1061,7 +1193,7 @@ function reportStorageQuota() {
 function evictStorageAndRetry(error, onyxMethod) {for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {args[_key - 2] = arguments[_key];}
   _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo(`Failed to save to storage. Error: ${error}. onyxMethod: ${onyxMethod.name}`);
 
-  if (error && _Str__WEBPACK_IMPORTED_MODULE_7__.startsWith(error.message, 'Failed to execute \'put\' on \'IDBObjectStore\'')) {
+  if (error && _Str__WEBPACK_IMPORTED_MODULE_7__.startsWith(error.message, "Failed to execute 'put' on 'IDBObjectStore'")) {
     _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert('Attempted to set invalid data set in Onyx. Please ensure all data is serializable.');
     throw error;
   }
@@ -1079,8 +1211,7 @@ function evictStorageAndRetry(error, onyxMethod) {for (var _len = arguments.leng
   // Remove the least recently viewed key that is not currently being accessed and retry.
   _Logger__WEBPACK_IMPORTED_MODULE_6__.logInfo(`Out of storage. Evicting least recently accessed key (${keyForRemoval}) and retrying.`);
   reportStorageQuota();
-  return remove(keyForRemoval).
-  then(() => onyxMethod(...args));
+  return remove(keyForRemoval).then(() => onyxMethod(...args));
 }
 
 /**
@@ -1143,6 +1274,15 @@ function removeNullValues(key, value) {
  * @returns {Promise}
  */
 function set(key, value) {
+  if (!_ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.isClientTheLeader()) {
+    _broadcast__WEBPACK_IMPORTED_MODULE_11__.sendMessage({ type: METHOD.SET, key, value });
+    return Promise.resolve();
+  }
+
+  if (isClearing) {
+    return Promise.resolve();
+  }
+
   const valueWithoutNull = removeNullValues(key, value);
 
   if (valueWithoutNull === null) {
@@ -1189,6 +1329,15 @@ function prepareKeyValuePairsForStorage(data) {
  * @returns {Promise}
  */
 function multiSet(data) {
+  if (!_ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.isClientTheLeader()) {
+    _broadcast__WEBPACK_IMPORTED_MODULE_11__.sendMessage({ type: METHOD.MULTI_SET, data });
+    return Promise.resolve();
+  }
+
+  if (isClearing) {
+    return Promise.resolve();
+  }
+
   const keyValuePairs = prepareKeyValuePairsForStorage(data);
 
   const updatePromises = underscore__WEBPACK_IMPORTED_MODULE_1___default().map(data, (val, key) => {
@@ -1197,14 +1346,17 @@ function multiSet(data) {
     return scheduleSubscriberUpdate(key, val);
   });
 
-  const keyValuePairsWithoutNull = underscore__WEBPACK_IMPORTED_MODULE_1___default().filter(underscore__WEBPACK_IMPORTED_MODULE_1___default().map(keyValuePairs, (_ref2) => {let [key, value] = _ref2;
+  const keyValuePairsWithoutNull = underscore__WEBPACK_IMPORTED_MODULE_1___default().filter(
+  underscore__WEBPACK_IMPORTED_MODULE_1___default().map(keyValuePairs, (_ref2) => {let [key, value] = _ref2;
     const valueWithoutNull = removeNullValues(key, value);
 
     if (valueWithoutNull === null) {
       return;
     }
     return [key, valueWithoutNull];
-  }), Boolean);
+  }),
+  Boolean);
+
 
   return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiSet(keyValuePairsWithoutNull).
   catch((error) => evictStorageAndRetry(error, multiSet, data)).
@@ -1229,8 +1381,7 @@ function applyMerge(existingValue, changes, shouldRemoveNullObjectValues) {
 
   if (underscore__WEBPACK_IMPORTED_MODULE_1___default().some(changes, (underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject))) {
     // Object values are then merged one after the other
-    return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(changes, (modifiedData, change) => _utils__WEBPACK_IMPORTED_MODULE_9__["default"].fastMerge(modifiedData, change, shouldRemoveNullObjectValues),
-    existingValue || {});
+    return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(changes, (modifiedData, change) => _utils__WEBPACK_IMPORTED_MODULE_9__["default"].fastMerge(modifiedData, change, shouldRemoveNullObjectValues), existingValue || {});
   }
 
   // If we have anything else we can't merge it so we'll
@@ -1259,6 +1410,15 @@ function applyMerge(existingValue, changes, shouldRemoveNullObjectValues) {
  * @returns {Promise}
  */
 function merge(key, changes) {
+  if (!_ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.isClientTheLeader()) {
+    _broadcast__WEBPACK_IMPORTED_MODULE_11__.sendMessage({ type: METHOD.MERGE, key, changes });
+    return Promise.resolve();
+  }
+
+  if (isClearing) {
+    return Promise.resolve();
+  }
+
   // Top-level undefined values are ignored
   // Therefore we need to prevent adding them to the merge queue
   if (underscore__WEBPACK_IMPORTED_MODULE_1___default().isUndefined(changes)) {
@@ -1273,8 +1433,7 @@ function merge(key, changes) {
   }
   mergeQueue[key] = [changes];
 
-  mergeQueuePromise[key] = get(key).
-  then((existingValue) => {
+  mergeQueuePromise[key] = get(key).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)
       // We don't want to remove null values from the "batchedChanges", because SQLite uses them to remove keys from storage natively.
@@ -1313,12 +1472,11 @@ function merge(key, changes) {
       const updatePromise = 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) {
+      if (!hasChanged || isClearing) {
         return updatePromise;
       }
 
-      return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].mergeItem(key, batchedChanges, modifiedData).
-      then(() => updatePromise);
+      return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].mergeItem(key, batchedChanges, modifiedData).then(() => updatePromise);
     } catch (error) {
       _Logger__WEBPACK_IMPORTED_MODULE_6__.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
       return Promise.resolve();
@@ -1334,8 +1492,7 @@ function merge(key, changes) {
  * @returns {Promise}
  */
 function initializeWithDefaultKeyStates() {
-  return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiGet(underscore__WEBPACK_IMPORTED_MODULE_1___default().keys(defaultKeyStates)).
-  then((pairs) => {
+  return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiGet(underscore__WEBPACK_IMPORTED_MODULE_1___default().keys(defaultKeyStates)).then((pairs) => {
     const asObject = underscore__WEBPACK_IMPORTED_MODULE_1___default().object(pairs);
 
     const merged = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].fastMerge(asObject, defaultKeyStates);
@@ -1367,8 +1524,18 @@ function initializeWithDefaultKeyStates() {
  * @returns {Promise<void>}
  */
 function clear() {let keysToPreserve = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return getAllKeys().
-  then((keys) => {
+  if (!_ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.isClientTheLeader()) {
+    _broadcast__WEBPACK_IMPORTED_MODULE_11__.sendMessage({ type: METHOD.CLEAR, keysToPreserve });
+    return Promise.resolve();
+  }
+
+  if (isClearing) {
+    return Promise.resolve();
+  }
+
+  isClearing = true;
+
+  return getAllKeys().then((keys) => {
     const keysToBeClearedFromStorage = [];
     const keyValuesToResetAsCollection = {};
     const keyValuesToResetIndividually = {};
@@ -1425,7 +1592,13 @@ function clear() {let keysToPreserve = arguments.length > 0 && arguments[0] !==
 
     // Remove only the items that we want cleared from storage, and reset others to default
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(keysToBeClearedFromStorage, (key) => _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].drop(key));
-    return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].removeItems(keysToBeClearedFromStorage).then(() => _storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiSet(defaultKeyValuePairs)).then(() => Promise.all(updatePromises));
+    return _storage__WEBPACK_IMPORTED_MODULE_5__["default"].removeItems(keysToBeClearedFromStorage).
+    then(() => _storage__WEBPACK_IMPORTED_MODULE_5__["default"].multiSet(defaultKeyValuePairs)).
+    then(() => {
+      isClearing = false;
+      _broadcast__WEBPACK_IMPORTED_MODULE_11__.sendMessage({ type: METHOD.CLEAR, keysToPreserve });
+      return Promise.all(updatePromises);
+    });
   });
 }
 
@@ -1469,8 +1642,7 @@ function mergeCollection(collectionKey, collection) {
     return Promise.resolve();
   }
 
-  return getAllKeys().
-  then((persistedKeys) => {
+  return getAllKeys().then((persistedKeys) => {
     // Split to keys that exist in storage and keys that don't
     const [existingKeys, newKeys] = underscore__WEBPACK_IMPORTED_MODULE_1___default().chain(collection).
     pick((value, key) => {
@@ -1575,6 +1747,48 @@ function setMemoryOnlyKeys(keyList) {
   _OnyxCache__WEBPACK_IMPORTED_MODULE_4__["default"].setRecentKeysLimit(Infinity);
 }
 
+/**
+ * Sets the callback to be called when the clear finishes executing.
+ * @param {Function} callback
+ */
+function onClear(callback) {
+  onClearCallback = callback;
+}
+
+/**
+ * Subscribes to the Broadcast channel and executes actions based on the
+ * types of events.
+ */
+function subscribeToEvents() {
+  _broadcast__WEBPACK_IMPORTED_MODULE_11__.subscribe((_ref5) => {let { data } = _ref5;
+    if (!_ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.isClientTheLeader()) {
+      return;
+    }
+    switch (data.type) {
+      case METHOD.CLEAR:
+        clear(data.keysToPreserve);
+        break;
+      case METHOD.SET:
+        set(data.key, data.value);
+        break;
+      case METHOD.MULTI_SET:
+        multiSet(data.key, data.value);
+        break;
+      case METHOD.MERGE:
+        merge(data.key, data.changes);
+        break;
+      case ON_CLEAR:
+        if (!onClearCallback) {
+          break;
+        }
+        onClearCallback();
+        break;
+      default:
+        break;}
+
+  });
+}
+
 /**
  * Initialize the store with actions and listening for storage events
  *
@@ -1609,6 +1823,15 @@ function init()
 
 
 {let { keys = {}, initialKeyStates = {}, safeEvictionKeys = [], maxCachedKeysCount = 1000, captureMetrics = false, shouldSyncMultipleInstances = Boolean(__webpack_require__.g.localStorage), debugSetState = false } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  _ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.init();
+
+  _ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.isReady().then(() => {
+    if (!_ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.isClientTheLeader()) {
+      return;
+    }
+    subscribeToEvents();
+  });
+
   if (captureMetrics) {
     // The code here is only bundled and applied when the captureMetrics is set
     // eslint-disable-next-line no-use-before-define
@@ -1626,10 +1849,14 @@ function init()
   // We need the value of the collection keys later for checking if a
   // key is a collection. We store it in a map for faster lookup.
   const collectionValues = underscore__WEBPACK_IMPORTED_MODULE_1___default().values(keys.COLLECTION);
-  onyxCollectionKeyMap = underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(collectionValues, (acc, val) => {
+  onyxCollectionKeyMap = underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(
+  collectionValues,
+  (acc, val) => {
     acc.set(val, true);
     return acc;
-  }, new Map());
+  },
+  new Map());
+
 
   // Set our default key states to use when initializing and clearing Onyx data
   defaultKeyStates = initialKeyStates;
@@ -1638,11 +1865,7 @@ function init()
   evictionAllowList = safeEvictionKeys;
 
   // Initialize all of our keys with data provided then give green light to any pending connections
-  Promise.all([
-  addAllSafeEvictionKeysToRecentlyAccessedList(),
-  initializeWithDefaultKeyStates()]).
-
-  then(deferredInitTask.resolve);
+  Promise.all([addAllSafeEvictionKeysToRecentlyAccessedList(), initializeWithDefaultKeyStates()]).then(deferredInitTask.resolve);
 
   if (shouldSyncMultipleInstances && underscore__WEBPACK_IMPORTED_MODULE_1___default().isFunction(_storage__WEBPACK_IMPORTED_MODULE_5__["default"].keepInstancesSync)) {
     _storage__WEBPACK_IMPORTED_MODULE_5__["default"].keepInstancesSync((key, value) => {
@@ -1670,7 +1893,11 @@ const Onyx = {
   METHOD,
   setMemoryOnlyKeys,
   tryGetCachedValue,
-  hasPendingMergeForKey
+  hasPendingMergeForKey,
+  onClear,
+  isClientManagerReady: _ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.isReady,
+  isClientTheLeader: _ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.isClientTheLeader,
+  subscribeToClientChange: _ActiveClientManager__WEBPACK_IMPORTED_MODULE_10__.subscribeToClientChange
 };
 
 /**
@@ -1776,8 +2003,17 @@ class OnyxCache {
     // bind all public methods to prevent problems with `this`
     underscore__WEBPACK_IMPORTED_MODULE_0___default().bindAll(
     this,
-    'getAllKeys', 'getValue', 'hasCacheForKey', 'addKey', 'set', 'drop', 'merge',
-    'hasPendingTask', 'getTaskPromise', 'captureTask', 'removeLeastRecentlyUsedKeys',
+    'getAllKeys',
+    'getValue',
+    'hasCacheForKey',
+    'addKey',
+    'set',
+    'drop',
+    'merge',
+    'hasPendingTask',
+    'getTaskPromise',
+    'captureTask',
+    'removeLeastRecentlyUsedKeys',
     'setRecentKeysLimit');
 
   }
@@ -1967,6 +2203,7 @@ const instance = new OnyxCache();
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "guid": () => (/* binding */ guid),
 /* harmony export */   "result": () => (/* binding */ result),
 /* harmony export */   "startsWith": () => (/* binding */ startsWith)
 /* harmony export */ });
@@ -1982,9 +2219,7 @@ __webpack_require__.r(__webpack_exports__);
  * @return {Boolean} Returns true if the haystack starts with the needle.
  */
 function startsWith(haystack, needle) {
-  return underscore__WEBPACK_IMPORTED_MODULE_0___default().isString(haystack) &&
-  underscore__WEBPACK_IMPORTED_MODULE_0___default().isString(needle) &&
-  haystack.startsWith(needle);
+  return underscore__WEBPACK_IMPORTED_MODULE_0___default().isString(haystack) && underscore__WEBPACK_IMPORTED_MODULE_0___default().isString(needle) && haystack.startsWith(needle);
 }
 
 /**
@@ -2000,6 +2235,21 @@ function result(parameter) {for (var _len = arguments.length, args = new Array(_
   return underscore__WEBPACK_IMPORTED_MODULE_0___default().isFunction(parameter) ? parameter(...args) : parameter;
 }
 
+/**
+ * A simple GUID generator taken from https://stackoverflow.com/a/32760401/9114791
+ *
+ * @param {String} [prefix] an optional prefix to put in front of the guid
+ * @returns {String}
+ */
+function guid() {let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  function s4() {
+    return Math.floor((1 + Math.random()) * 0x10000).
+    toString(16).
+    substring(1);
+  }
+  return `${prefix}${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+}
+
 
 
 /***/ }),
@@ -2021,6 +2271,55 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (react_dom__WEBPACK_IMPORTED_MODULE_0__.unstable_batchedUpdates);
 
+/***/ }),
+
+/***/ "./lib/broadcast/index.web.js":
+/*!************************************!*\
+  !*** ./lib/broadcast/index.web.js ***!
+  \************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "disconnect": () => (/* binding */ disconnect),
+/* harmony export */   "sendMessage": () => (/* binding */ sendMessage),
+/* harmony export */   "subscribe": () => (/* binding */ subscribe)
+/* harmony export */ });
+const BROADCAST_ONYX = 'BROADCAST_ONYX';
+
+const subscriptions = [];
+const channel = new BroadcastChannel(BROADCAST_ONYX);
+
+/**
+ * Sends a message to the broadcast channel.
+ * @param {String} message
+ */
+function sendMessage(message) {
+  channel.postMessage(message);
+}
+
+/**
+ * Subscribes to the broadcast channel. Every time a new message
+ * is received, the callback is called.
+ * @param {Function} callback
+ */
+function subscribe(callback) {
+  subscriptions.push(callback);
+  channel.onmessage = (message) => {
+    subscriptions.forEach((c) => c(message));
+  };
+}
+
+/**
+ * Disconnects from the broadcast channel.
+ */
+function disconnect() {
+  channel.close();
+}
+
+
+
 /***/ }),
 
 /***/ "./lib/createDeferredTask.js":
@@ -2097,9 +2396,7 @@ function diffObject(object, base) {
       }
 
       // eslint-disable-next-line no-param-reassign
-      result[key] = underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(value) && underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(comparisonObject[key]) ?
-      changes(value, comparisonObject[key]) :
-      value;
+      result[key] = underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(value) && underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(comparisonObject[key]) ? changes(value, comparisonObject[key]) : value;
     });
   }
   return changes(object, base);
@@ -2153,7 +2450,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 // For web-only implementations of Onyx, this module will just be a no-op
 
-function decorateWithMetrics(func) {return func;}
+function decorateWithMetrics(func) {
+  return func;
+}
 function getMetrics() {}
 function printMetrics() {}
 function resetMetrics() {}
@@ -2209,17 +2508,13 @@ const webStorage = {
    */
   keepInstancesSync(onStorageKeyChanged) {
     // Override set, remove and clear to raise storage events that we intercept in other tabs
-    this.setItem = (key, value) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].setItem(key, value).
-    then(() => raiseStorageSyncEvent(key));
+    this.setItem = (key, value) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].setItem(key, value).then(() => raiseStorageSyncEvent(key));
 
-    this.removeItem = (key) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].removeItem(key).
-    then(() => raiseStorageSyncEvent(key));
+    this.removeItem = (key) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].removeItem(key).then(() => raiseStorageSyncEvent(key));
 
-    this.removeItems = (keys) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].removeItems(keys).
-    then(() => raiseStorageSyncManyKeysEvent(keys));
+    this.removeItems = (keys) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].removeItems(keys).then(() => raiseStorageSyncManyKeysEvent(keys));
 
-    this.mergeItem = (key, batchedChanges, modifiedData) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].mergeItem(key, batchedChanges, modifiedData).
-    then(() => raiseStorageSyncEvent(key));
+    this.mergeItem = (key, batchedChanges, modifiedData) => _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].mergeItem(key, batchedChanges, modifiedData).then(() => raiseStorageSyncEvent(key));
 
     // If we just call Storage.clear other tabs will have no idea which keys were available previously
     // so that they can call keysChanged for them. That's why we iterate over every key and raise a storage sync
@@ -2227,7 +2522,7 @@ const webStorage = {
     this.clear = () => {
       let allKeys;
 
-      // They keys must be retreived before storage is cleared or else the list of keys would be empty
+      // The keys must be retrieved before storage is cleared or else the list of keys would be empty
       return _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].getAllKeys().
       then((keys) => {
         allKeys = keys;
@@ -2248,8 +2543,7 @@ const webStorage = {
       }
 
       const onyxKey = event.newValue;
-      _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].getItem(onyxKey).
-      then((value) => onStorageKeyChanged(onyxKey, value));
+      _providers_IDBKeyVal__WEBPACK_IMPORTED_MODULE_1__["default"].getItem(onyxKey).then((value) => onStorageKeyChanged(onyxKey, value));
     });
   }
 };
@@ -2321,8 +2615,7 @@ const provider = {
    * @param {String[]} keysParam
    * @return {Promise<Array<[key, value]>>}
    */
-  multiGet: (keysParam) => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.getMany)(keysParam, getCustomStore()).
-  then((values) => underscore__WEBPACK_IMPORTED_MODULE_1___default().map(values, (value, index) => [keysParam[index], value])),
+  multiGet: (keysParam) => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.getMany)(keysParam, getCustomStore()).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
@@ -2330,7 +2623,8 @@ const provider = {
    * This function also removes all nested null values from an object.
    * @return {Promise<void>}
    */
-  multiMerge: (pairs) => getCustomStore()('readwrite', (store) => {
+  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.
 
@@ -2385,8 +2679,8 @@ const provider = {
    * @param {String} key
    * @return {Promise<*>}
    */
-  getItem: (key) => (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.get)(key, getCustomStore())
-
+  getItem: (key) =>
+  (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.get)(key, getCustomStore())
   // idb-keyval returns undefined for missing items, but this needs to return null so that idb-keyval does the same thing as SQLiteStorage.
   .then((val) => val === undefined ? null : val),
 
@@ -2414,7 +2708,8 @@ const provider = {
       throw new Error('StorageManager browser API unavailable');
     }
 
-    return window.navigator.storage.estimate().
+    return window.navigator.storage.
+    estimate().
     then((value) => ({
       bytesUsed: value.usage,
       bytesRemaining: value.quota - value.usage
@@ -2445,12 +2740,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 function areObjectsEmpty(a, b) {
-  return (
-    typeof a === 'object' &&
-    typeof b === 'object' &&
-    underscore__WEBPACK_IMPORTED_MODULE_0___default().isEmpty(a) &&
-    underscore__WEBPACK_IMPORTED_MODULE_0___default().isEmpty(b));
-
+  return typeof a === 'object' && typeof b === 'object' && underscore__WEBPACK_IMPORTED_MODULE_0___default().isEmpty(a) && underscore__WEBPACK_IMPORTED_MODULE_0___default().isEmpty(b);
 }
 
 // Mostly copied from https://medium.com/@lubaka.a/how-to-remove-lodash-performance-improvement-b306669ad0e1
@@ -2458,22 +2748,24 @@ function areObjectsEmpty(a, b) {
 /**
  * @param {mixed} val
  * @returns {boolean}
-*/
+ */
 function isMergeableObject(val) {
   const nonNullObject = val != null ? typeof val === 'object' : false;
-  return nonNullObject &&
-  Object.prototype.toString.call(val) !== '[object RegExp]' &&
-  Object.prototype.toString.call(val) !== '[object Date]'
-  // eslint-disable-next-line rulesdir/prefer-underscore-method
-  && !Array.isArray(val);
+  return (
+    nonNullObject &&
+    Object.prototype.toString.call(val) !== '[object RegExp]' &&
+    Object.prototype.toString.call(val) !== '[object Date]' &&
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    !Array.isArray(val));
+
 }
 
 /**
-* @param {Object} target
-* @param {Object} source
-* @param {Boolean} shouldRemoveNullObjectValues
-* @returns {Object}
-*/
+ * @param {Object} target
+ * @param {Object} source
+ * @param {Boolean} shouldRemoveNullObjectValues
+ * @returns {Object}
+ */
 function mergeObject(target, source) {let shouldRemoveNullObjectValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   const destination = {};
   if (isMergeableObject(target)) {
@@ -2529,11 +2821,11 @@ function mergeObject(target, source) {let shouldRemoveNullObjectValues = argumen
  * On native, when merging an existing value with new changes, SQLite will use JSON_PATCH, which removes top-level nullish values.
  * To be consistent with the behaviour for merge, we'll also want to remove null values for "set" operations.
  *
-* @param {Object|Array} target
-* @param {Object|Array} source
-* @param {Boolean} shouldRemoveNullObjectValues
-* @returns {Object|Array}
-*/
+ * @param {Object|Array} target
+ * @param {Object|Array} source
+ * @param {Boolean} shouldRemoveNullObjectValues
+ * @returns {Object|Array}
+ */
 function fastMerge(target, source) {let shouldRemoveNullObjectValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   // We have to ignore arrays and nullish values here,
   // otherwise "mergeObject" will throw an error,
@@ -2652,11 +2944,7 @@ const getOnyxDataFromState = (state, onyxToStateMapping) => underscore__WEBPACK_
            * 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) ||
-          mapping.allowStaleData)
-          {
+          if (value !== undefined && !_Onyx__WEBPACK_IMPORTED_MODULE_4__["default"].hasPendingMergeForKey(key) || mapping.allowStaleData) {
             // eslint-disable-next-line no-param-reassign
             resultObj[propertyName] = value;
           }
@@ -2710,9 +2998,7 @@ const getOnyxDataFromState = (state, onyxToStateMapping) => underscore__WEBPACK_
           // (eg. if a user switches chats really quickly). In this case, it's much more stable to always look at the changes to prevProp and prevState to derive the key.
           // The second case cannot be used all the time because the onyx data doesn't change the first time that `componentDidUpdate()` runs after loading. In this case,
           // the `mapping.previousKey` must be used for the comparison or else this logic never detects that onyx data could have changed during the loading process.
-          const previousKey = isFirstTimeUpdatingAfterLoading ?
-          mapping.previousKey :
-          _Str__WEBPACK_IMPORTED_MODULE_3__.result(mapping.key, { ...prevProps, ...prevOnyxDataFromState });
+          const previousKey = isFirstTimeUpdatingAfterLoading ? mapping.previousKey : _Str__WEBPACK_IMPORTED_MODULE_3__.result(mapping.key, { ...prevProps, ...prevOnyxDataFromState });
           const newKey = _Str__WEBPACK_IMPORTED_MODULE_3__.result(mapping.key, { ...this.props, ...onyxDataFromState });
           if (previousKey !== newKey) {
             _Onyx__WEBPACK_IMPORTED_MODULE_4__["default"].disconnect(this.activeConnectionIDs[previousKey], previousKey);
@@ -2790,7 +3076,9 @@ const getOnyxDataFromState = (state, onyxToStateMapping) => underscore__WEBPACK_
 
         // Full of hacky workarounds to prevent the race condition described above.
         this.setState((prevState) => {
-          const finalState = underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(stateUpdate, (result, value, key) => {
+          const finalState = underscore__WEBPACK_IMPORTED_MODULE_2___default().reduce(
+          stateUpdate,
+          (result, value, key) => {
             if (key === 'loading') {
               return result;
             }
@@ -2812,7 +3100,9 @@ const getOnyxDataFromState = (state, onyxToStateMapping) => underscore__WEBPACK_
               result[key] = value;
             }
             return result;
-          }, {});
+          },
+          {});
+
 
           finalState.loading = false;
           return finalState;
@@ -2928,8 +3218,13 @@ const getOnyxDataFromState = (state, onyxToStateMapping) => underscore__WEBPACK_
     withOnyx.displayName = `withOnyx(${displayName})`;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef((props, ref) => {
       const Component = withOnyx;
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Component, _extends({}, props, { forwardedRef: ref }));
+      return /*#__PURE__*/(
+        react__WEBPACK_IMPORTED_MODULE_1___default().createElement(Component
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        , _extends({}, props, {
+          forwardedRef: ref })));
+
+
     });
   };
 }