react-native-onyx 1.0.118 → 1.0.120

package/lib/ActiveClientManager/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Determines when the client is ready. We need to wait till the init method is called and the leader message is sent.
+ */
+declare function isReady(): Promise<void>;
+
+/**
+ * Subscribes 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.
+ */
+declare function init(): void;
+
+/**
+ * Returns a boolean indicating if the current client is the leader.
+ */
+declare function isClientTheLeader(): boolean;
+
+/**
+ * Subscribes to when the client changes.
+ */
+declare function subscribeToClientChange(callback: () => {}): void;
+
+export {isReady, init, isClientTheLeader, subscribeToClientChange};

package/lib/ActiveClientManager/index.native.js

@@ -0,0 +1,23 @@
+/**
+ * For native devices, there will never be more than one
+ * client running at a time, so this lib is a big no-op
+ */
+
+function isReady() {
+    return Promise.resolve();
+}
+
+function isClientTheLeader() {
+    return true;
+}
+
+function init() {}
+
+function subscribeToClientChange() {}
+
+export {
+    isClientTheLeader,
+    init,
+    isReady,
+    subscribeToClientChange,
+};

package/lib/ActiveClientManager/index.web.js

@@ -0,0 +1,99 @@
+/**
+ * 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".
+ */
+
+import * as Str from '../Str';
+import * as Broadcast from '../broadcast';
+
+const NEW_LEADER_MESSAGE = 'NEW_LEADER';
+const REMOVED_LEADER_MESSAGE = 'REMOVE_LEADER';
+
+const clientID = Str.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.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.sendMessage({type: NEW_LEADER_MESSAGE, clientID, timestamp});
+                subscribers.forEach(callback => callback());
+                break;
+            default:
+                break;
+        }
+    });
+
+    activeClientID = clientID;
+    timestamp = Date.now();
+
+    Broadcast.sendMessage({type: NEW_LEADER_MESSAGE, clientID, timestamp});
+    setIsReady();
+
+    window.addEventListener('beforeunload', () => {
+        if (!isClientTheLeader()) {
+            return;
+        }
+        Broadcast.sendMessage({type: REMOVED_LEADER_MESSAGE, clientID});
+    });
+}
+
+export {
+    isClientTheLeader,
+    init,
+    isReady,
+    subscribeToClientChange,
+};

package/lib/Onyx.d.ts

@@ -1,5 +1,6 @@
 import {Component} from 'react';
 import * as Logger from './Logger';
+import * as ActiveClientManager from './ActiveClientManager';
 import {CollectionKey, CollectionKeyBase, DeepRecord, KeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey} from './types';
 
 /**
@@ -293,6 +294,11 @@ declare function hasPendingMergeForKey(key: OnyxKey): boolean;
  */
 declare function setMemoryOnlyKeys(keyList: OnyxKey[]): void;
 
+/**
+ * Sets the callback to be called when the clear finishes executing.
+ */
+declare function onClear(callback: () => void): void;
+
 declare const Onyx: {
     connect: typeof connect;
     disconnect: typeof disconnect;
@@ -311,6 +317,10 @@ declare const Onyx: {
     isSafeEvictionKey: typeof isSafeEvictionKey;
     METHOD: typeof METHOD;
     setMemoryOnlyKeys: typeof setMemoryOnlyKeys;
+    onClear: typeof onClear;
+    isClientManagerReady: typeof ActiveClientManager.isReady,
+    isClientTheLeader: typeof ActiveClientManager.isClientTheLeader,
+    subscribeToClientChange: typeof ActiveClientManager.subscribeToClientChange,
 };
 
 export default Onyx;

package/lib/Onyx.js

@@ -7,6 +7,8 @@ import * as Str from './Str';
 import createDeferredTask from './createDeferredTask';
 import * as PerformanceUtils from './metrics/PerformanceUtils';
 import Storage from './storage';
+import * as Broadcast from './broadcast';
+import * as ActiveClientManager from './ActiveClientManager';
 import utils from './utils';
 import unstable_batchedUpdates from './batch';
 
@@ -19,6 +21,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 = {};
@@ -49,6 +53,12 @@ let defaultKeyStates = {};
 // Connections can be made before `Onyx.init`. They would wait for this task before resolving
 const deferredInitTask = createDeferredTask();
 
+// 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 = [];
 
@@ -1060,6 +1070,15 @@ function removeNullValues(key, value) {
  * @returns {Promise}
  */
 function set(key, value) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.SET, key, value});
+        return Promise.resolve();
+    }
+
+    if (isClearing) {
+        return Promise.resolve();
+    }
+
     const valueWithoutNull = removeNullValues(key, value);
 
     if (valueWithoutNull === null) {
@@ -1106,6 +1125,15 @@ function prepareKeyValuePairsForStorage(data) {
  * @returns {Promise}
  */
 function multiSet(data) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.MULTI_SET, data});
+        return Promise.resolve();
+    }
+
+    if (isClearing) {
+        return Promise.resolve();
+    }
+
     const keyValuePairs = prepareKeyValuePairsForStorage(data);
 
     const updatePromises = _.map(data, (val, key) => {
@@ -1176,6 +1204,15 @@ function applyMerge(existingValue, changes, shouldRemoveNullObjectValues) {
  * @returns {Promise}
  */
 function merge(key, changes) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.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 (_.isUndefined(changes)) {
@@ -1230,7 +1267,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;
                 }
 
@@ -1284,6 +1321,17 @@ function initializeWithDefaultKeyStates() {
  * @returns {Promise<void>}
  */
 function clear(keysToPreserve = []) {
+    if (!ActiveClientManager.isClientTheLeader()) {
+        Broadcast.sendMessage({type: METHOD.CLEAR, keysToPreserve});
+        return Promise.resolve();
+    }
+
+    if (isClearing) {
+        return Promise.resolve();
+    }
+
+    isClearing = true;
+
     return getAllKeys()
         .then((keys) => {
             const keysToBeClearedFromStorage = [];
@@ -1342,7 +1390,11 @@ function clear(keysToPreserve = []) {
 
             // Remove only the items that we want cleared from storage, and reset others to default
             _.each(keysToBeClearedFromStorage, key => cache.drop(key));
-            return Storage.removeItems(keysToBeClearedFromStorage).then(() => Storage.multiSet(defaultKeyValuePairs)).then(() => Promise.all(updatePromises));
+            return Storage.removeItems(keysToBeClearedFromStorage).then(() => Storage.multiSet(defaultKeyValuePairs)).then(() => {
+                isClearing = false;
+                Broadcast.sendMessage({type: METHOD.CLEAR, keysToPreserve});
+                return Promise.all(updatePromises);
+            });
         });
 }
 
@@ -1492,6 +1544,48 @@ function setMemoryOnlyKeys(keyList) {
     cache.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.subscribe(({data}) => {
+        if (!ActiveClientManager.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
  *
@@ -1526,6 +1620,15 @@ function init({
     shouldSyncMultipleInstances = Boolean(global.localStorage),
     debugSetState = false,
 } = {}) {
+    ActiveClientManager.init();
+
+    ActiveClientManager.isReady().then(() => {
+        if (!ActiveClientManager.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
@@ -1588,6 +1691,10 @@ const Onyx = {
     setMemoryOnlyKeys,
     tryGetCachedValue,
     hasPendingMergeForKey,
+    onClear,
+    isClientManagerReady: ActiveClientManager.isReady,
+    isClientTheLeader: ActiveClientManager.isClientTheLeader,
+    subscribeToClientChange: ActiveClientManager.subscribeToClientChange,
 };
 
 /**

package/lib/Str.js

@@ -26,4 +26,19 @@ function result(parameter, ...args) {
     return _.isFunction(parameter) ? parameter(...args) : parameter;
 }
 
-export {startsWith, result};
+/**
+ * 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(prefix = '') {
+    function s4() {
+        return Math.floor((1 + Math.random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    }
+    return `${prefix}${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+}
+
+export {guid, startsWith, result};

package/lib/broadcast/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Sends a message to the broadcast channel.
+ */
+declare function sendMessage(message: string): void;
+
+/**
+ * Subscribes to the broadcast channel. Every time a new message
+ * is received, the callback is called.
+ */
+declare function subscribe(callback: () => {}): void;
+
+/**
+ * Disconnects from the broadcast channel.
+ */
+declare function disconnect(): void;
+
+export {sendMessage, subscribe, disconnect};

package/lib/broadcast/index.native.js

@@ -0,0 +1,14 @@
+/**
+ * For native devices, there will never be more than one
+ * client running at a time, so this lib is a big no-op
+ */
+
+function sendMessage() {}
+
+function subscribe() {}
+
+function disconnect() {}
+
+export {
+    sendMessage, subscribe, disconnect,
+};

package/lib/broadcast/index.web.js

@@ -0,0 +1,35 @@
+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();
+}
+
+export {
+    sendMessage, subscribe, disconnect,
+};

package/lib/storage/WebStorage.js

@@ -49,7 +49,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 Storage.getAllKeys()
                 .then((keys) => {
                     allKeys = keys;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.118",
+  "version": "1.0.120",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -37,7 +37,10 @@
     "lint-tests": "eslint tests/**",
     "test": "jest",
     "build": "webpack --config webpack.config.js",
-    "build:docs": "node buildDocs.js"
+    "build:docs": "node buildDocs.js",
+    "e2e": "playwright test",
+    "e2e-ui": "playwright test --ui",
+    "postinstall": "cd tests/e2e/app && npm install"
   },
   "dependencies": {
     "ascii-table": "0.0.9",
@@ -48,9 +51,11 @@
     "@babel/core": "7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@playwright/test": "^1.38.1",
     "@react-native-community/eslint-config": "^2.0.0",
     "@testing-library/jest-native": "^3.4.2",
     "@testing-library/react-native": "^7.0.2",
+    "@types/node": "^20.7.1",
     "@types/react": "^18.2.14",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.2.2",
@@ -81,9 +86,9 @@
     "idb-keyval": "^6.2.1",
     "react": ">=18.1.0",
     "react-dom": ">=18.1.0",
+    "react-native-device-info": "^10.3.0",
     "react-native-performance": "^5.1.0",
-    "react-native-quick-sqlite": "^8.0.0-beta.2",
-    "react-native-device-info": "^10.3.0"
+    "react-native-quick-sqlite": "^8.0.0-beta.2"
   },
   "peerDependenciesMeta": {
     "idb-keyval": {
@@ -100,8 +105,8 @@
     }
   },
   "engines": {
-    "node": ">=16.15.1 <=20.9.0",
-    "npm": ">=8.11.0 <=10.1.0"
+    "node": "20.9.0",
+    "npm": "10.1.0"
   },
   "jest": {
     "preset": "react-native",
@@ -113,7 +118,8 @@
     ],
     "testPathIgnorePatterns": [
       "<rootDir>/node_modules/",
-      "<rootDir>/tests/unit/mocks/"
+      "<rootDir>/tests/unit/mocks/",
+      "<rootDir>/tests/e2e/"
     ],
     "testMatch": [
       "**/tests/unit/**/*.[jt]s?(x)",