react-native-onyx 1.0.118 → 1.0.120

package/README.md

@@ -405,3 +405,10 @@ To continuously work on Onyx we have to set up a task that copies content to par
 3. Optional: run `npm run build` (if you're working or want to test on a non react-native project)
    - `npm link` would actually work outside of `react-native` and it can be used to link Onyx locally for a web only project
 4. Copy Onyx to consumer project's `node_modules/react-native-onyx`
+
+# Automated Tests
+
+There are Playwright e2e tests implemented for the web. To run them:
+
+- `npm run e2e` to run the e2e tests
+- or `npm run e2e-ui` to run the e2e tests in UI mode 

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 = [];
 
@@ -1143,6 +1268,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 +1323,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) => {
@@ -1259,6 +1402,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)) {
@@ -1313,7 +1465,7 @@ 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;
       }
 
@@ -1367,6 +1519,17 @@ function initializeWithDefaultKeyStates() {
  * @returns {Promise<void>}
  */
 function clear() {let keysToPreserve = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  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 = [];
@@ -1425,7 +1588,11 @@ 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);
+    });
   });
 }
 
@@ -1575,6 +1742,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 +1818,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
@@ -1670,7 +1888,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
 };
 
 /**
@@ -1967,6 +2189,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 */ });
@@ -2000,6 +2223,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 +2259,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":
@@ -2227,7 +2514,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;