react-native-onyx 1.0.126 → 1.0.128

package/lib/DevTools.js

@@ -0,0 +1,71 @@
+import _ from 'underscore';
+
+const ERROR_LABEL = 'Onyx DevTools - Error: ';
+
+/* eslint-disable no-underscore-dangle */
+class DevTools {
+    constructor() {
+        this.remoteDev = this.connectViaExtension();
+        this.state = {};
+        this.defaultState = {};
+    }
+
+    connectViaExtension(options) {
+        try {
+            if ((options && options.remote) || typeof window === 'undefined' || !window.__REDUX_DEVTOOLS_EXTENSION__) {
+                return;
+            }
+            return window.__REDUX_DEVTOOLS_EXTENSION__.connect(options);
+        } catch (e) {
+            console.error(ERROR_LABEL, e);
+        }
+    }
+
+    /**
+     * Registers an action that updated the current state of the storage
+     *
+     * @param {string} type - name of the action
+     * @param {any} payload - data written to the storage
+     * @param {object} stateChanges - partial state that got updated after the changes
+     */
+    registerAction(type, payload = undefined, stateChanges = {}) {
+        try {
+            if (!this.remoteDev) {
+                return;
+            }
+            const newState = {
+                ...this.state,
+                ...stateChanges,
+            };
+            this.remoteDev.send({type, payload}, newState);
+            this.state = newState;
+        } catch (e) {
+            console.error(ERROR_LABEL, e);
+        }
+    }
+
+    initState(initialState = {}) {
+        try {
+            if (!this.remoteDev) {
+                return;
+            }
+            this.remoteDev.init(initialState);
+            this.state = initialState;
+            this.defaultState = initialState;
+        } catch (e) {
+            console.error(ERROR_LABEL, e);
+        }
+    }
+
+    /**
+     * This clears the internal state of the DevTools, preserving the keys included in `keysToPreserve`
+     *
+     * @param {string[]} keysToPreserve
+     */
+    clearState(keysToPreserve = []) {
+        const newState = _.mapObject(this.state, (value, key) => (keysToPreserve.includes(key) ? value : this.defaultState[key]));
+        this.registerAction('CLEAR', undefined, newState);
+    }
+}
+
+export default new DevTools();

package/lib/Onyx.d.ts

@@ -107,6 +107,7 @@ declare const METHOD: {
     readonly SET: 'set';
     readonly MERGE: 'merge';
     readonly MERGE_COLLECTION: 'mergecollection';
+    readonly MULTI_SET: 'multiset';
     readonly CLEAR: 'clear';
 };
 

package/lib/Onyx.js

@@ -11,6 +11,7 @@ import * as Broadcast from './broadcast';
 import * as ActiveClientManager from './ActiveClientManager';
 import utils from './utils';
 import unstable_batchedUpdates from './batch';
+import DevTools from './DevTools';
 
 // Method constants
 const METHOD = {
@@ -62,6 +63,18 @@ let onClearCallback = null;
 let batchUpdatesPromise = null;
 let batchUpdatesQueue = [];
 
+/**
+ * Sends an action to DevTools extension
+ *
+ * @param {string} method - Onyx method from METHOD
+ * @param {string} key - Onyx key that was changed
+ * @param {any} value - contains the change that was made by the method
+ * @param {any} mergedValue - (optional) value that was written in the storage after a merge method was executed.
+ */
+function sendActionToDevTools(method, key, value, mergedValue = undefined) {
+    DevTools.registerAction(utils.formatActionName(method, key), value, key ? {[key]: mergedValue || value} : value);
+}
+
 /**
  * We are batching together onyx updates. This helps with use cases where we schedule onyx updates after each other.
  * This happens for example in the Onyx.update function, where we process API responses that might contain a lot of
@@ -1105,7 +1118,10 @@ function set(key, value) {
 
     return Storage.setItem(key, valueAfterRemoving)
         .catch((error) => evictStorageAndRetry(error, set, key, valueAfterRemoving))
-        .then(() => updatePromise);
+        .then(() => {
+            sendActionToDevTools(METHOD.SET, key, valueAfterRemoving);
+            return updatePromise;
+        });
 }
 
 /**
@@ -1158,7 +1174,10 @@ function multiSet(data) {
 
     return Storage.multiSet(keyValuePairs)
         .catch((error) => evictStorageAndRetry(error, multiSet, data))
-        .then(() => Promise.all(updatePromises));
+        .then(() => {
+            sendActionToDevTools(METHOD.MULTI_SET, undefined, data);
+            return Promise.all(updatePromises);
+        });
 }
 
 /**
@@ -1274,7 +1293,10 @@ function merge(key, changes) {
                 return updatePromise;
             }
 
-            return Storage.mergeItem(key, batchedChanges, modifiedData).then(() => updatePromise);
+            return Storage.mergeItem(key, batchedChanges, modifiedData).then(() => {
+                sendActionToDevTools(METHOD.MERGE, key, changes, modifiedData);
+                return updatePromise;
+            });
         } catch (error) {
             Logger.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
             return Promise.resolve();
@@ -1395,6 +1417,7 @@ function clear(keysToPreserve = []) {
             .then(() => {
                 isClearing = false;
                 Broadcast.sendMessage({type: METHOD.CLEAR, keysToPreserve});
+                DevTools.clearState(keysToPreserve);
                 return Promise.all(updatePromises);
             });
     });
@@ -1480,7 +1503,10 @@ function mergeCollection(collectionKey, collection) {
 
         return Promise.all(promises)
             .catch((error) => evictStorageAndRetry(error, mergeCollection, collection))
-            .then(() => promiseUpdate);
+            .then(() => {
+                sendActionToDevTools(METHOD.MERGE_COLLECTION, undefined, collection);
+                return promiseUpdate;
+            });
     });
 }
 
@@ -1659,6 +1685,8 @@ function init({
     // Set our default key states to use when initializing and clearing Onyx data
     defaultKeyStates = initialKeyStates;
 
+    DevTools.initState(initialKeyStates);
+
     // Let Onyx know about which keys are safe to evict
     evictionAllowList = safeEvictionKeys;
 

package/lib/utils.d.ts

@@ -1,3 +1,5 @@
+import { OnyxKey } from './types';
+
 /**
  * Merges two objects and removes null values if "shouldRemoveNullObjectValues" is set to true
  *
@@ -7,4 +9,9 @@
  */
 declare function fastMerge<T>(target: T, source: T, shouldRemoveNullObjectValues: boolean = true): T;
 
-export default {fastMerge};
+/**
+ * Returns a formatted action name to be send to DevTools, given the method and optionally the key that was changed
+ */
+declare function formatActionName(method: string, key?: OnyxKey): string;
+
+export default { fastMerge, formatActionName };

package/lib/utils.js

@@ -105,4 +105,8 @@ function removeNestedNullValues(value) {
     return value;
 }
 
-export default {areObjectsEmpty, fastMerge, removeNestedNullValues};
+function formatActionName(method, key) {
+    return key ? `${method.toUpperCase()}/${key}` : method.toUpperCase();
+}
+
+export default {areObjectsEmpty, fastMerge, formatActionName, removeNestedNullValues};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.126",
+  "version": "1.0.128",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -55,7 +55,7 @@
     "@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/node": "^20.11.5",
     "@types/react": "^18.2.14",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.2.2",
@@ -107,8 +107,8 @@
     }
   },
   "engines": {
-    "node": "20.9.0",
-    "npm": "10.1.0"
+    "node": ">=20.9.0",
+    "npm": ">=10.2.3"
   },
   "jest": {
     "preset": "react-native",