react-native-onyx 1.0.125 → 1.0.127

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/types.d.ts

@@ -115,13 +115,13 @@ type KeyValueMapping = {
 /**
  * Represents a selector function type which operates based on the provided `TKey` and `ReturnType`.
  *
- * A `Selector` is a function that accepts a value and returns a processed value.
+ * A `Selector` is a function that accepts a value, the withOnyx's internal state and returns a processed value.
  * This type accepts two type parameters: `TKey` and `TReturnType`.
  *
  * The type `TKey` extends `OnyxKey` and it is the key used to access a value in `KeyValueMapping`.
  * `TReturnType` is the type of the returned value from the selector function.
  */
-type Selector<TKey extends OnyxKey, TReturnType> = (value: OnyxEntry<KeyValueMapping[TKey]>) => TReturnType;
+type Selector<TKey extends OnyxKey, TOnyxProps, TReturnType> = (value: OnyxEntry<KeyValueMapping[TKey]>, state: WithOnyxInstanceState<TOnyxProps>) => TReturnType;
 
 /**
  * Represents a single Onyx entry, that can be either `TOnyxValue` or `null` if it doesn't exist.
@@ -215,10 +215,15 @@ type NonTransformableTypes =
 type NullishDeep<T> = T extends NonTransformableTypes ? T : T extends object ? NullishObjectDeep<T> : unknown;
 
 /**
-Same as `NullishDeep`, but accepts only `object`s as inputs. Internal helper for `NullishDeep`.
-*/
+ * Same as `NullishDeep`, but accepts only `object`s as inputs. Internal helper for `NullishDeep`.
+ */
 type NullishObjectDeep<ObjectType extends object> = {
     [KeyType in keyof ObjectType]?: NullishDeep<ObjectType[KeyType]> | null;
 };
 
-export {CollectionKey, CollectionKeyBase, CustomTypeOptions, DeepRecord, Key, KeyValueMapping, OnyxCollection, OnyxEntry, OnyxKey, Selector, NullishDeep};
+/**
+ * Represents withOnyx's internal state, containing the Onyx props and a `loading` flag.
+ */
+type WithOnyxInstanceState<TOnyxProps> = (TOnyxProps & {loading: boolean}) | undefined;
+
+export {CollectionKey, CollectionKeyBase, CustomTypeOptions, DeepRecord, Key, KeyValueMapping, OnyxCollection, OnyxEntry, OnyxKey, Selector, NullishDeep, WithOnyxInstanceState};

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/lib/withOnyx.d.ts

@@ -42,7 +42,7 @@ type EntryBaseMapping<TOnyxKey extends OnyxKey> = {
  */
 type BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey, TOnyxValue> = IsEqual<TOnyxValue, TOnyxProps[TOnyxProp]> extends true
     ? {
-          key: TOnyxKey | ((props: Omit<TComponentProps, keyof TOnyxProps>) => TOnyxKey);
+          key: TOnyxKey | ((props: Omit<TComponentProps, keyof TOnyxProps> & Partial<TOnyxProps>) => TOnyxKey);
       }
     : never;
 
@@ -63,7 +63,7 @@ type BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxPr
  */
 type BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey> = {
     key: TOnyxKey;
-    selector: Selector<TOnyxKey, TOnyxProps[TOnyxProp]>;
+    selector: Selector<TOnyxKey, TOnyxProps, TOnyxProps[TOnyxProp]>;
 };
 
 /**
@@ -82,8 +82,8 @@ type BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProp exte
  * ```
  */
 type BaseMappingFunctionKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey> = {
-    key: (props: Omit<TComponentProps, keyof TOnyxProps>) => TOnyxKey;
-    selector: Selector<TOnyxKey, TOnyxProps[TOnyxProp]>;
+    key: (props: Omit<TComponentProps, keyof TOnyxProps> & Partial<TOnyxProps>) => TOnyxKey;
+    selector: Selector<TOnyxKey, TOnyxProps, TOnyxProps[TOnyxProp]>;
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.125",
+  "version": "1.0.127",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",