react-native-onyx 2.0.2 → 2.0.4

package/README.md

@@ -430,14 +430,14 @@ The action logs use this naming convention:
 
 # Development
 
-`react-native` bundles source using the `metro` bundler. `metro` does not follow symlinks, so we can't use `npm link` to
-link a local version of Onyx during development
+React Native bundles source code using the `metro` bundler. Until React Native 0.73, `metro` does not follow symlinks, so we can't use `npm link` to
+link a local version of Onyx during development. Fortunately, we have set up a workflow that's easy to follow and enables
+you to edit the Onyx source directly in the Onyx repo, and have those changes hot-reload in a React Native project in realtime.
 
-To quickly test small changes you can directly go to `node_modules/react-native-onyx` in the parent project and tweak original source code.
+1. In one terminal tab, open the `react-native-onyx` directory and run `npm run build:watch`
+2. In another terminal tab, open your React Native project and run `npx link publish <path_to_onyx_directory_on_your_machine>`
+3. Then run your React Native project as normal!
 
-To continuously work on Onyx we have to set up a task that copies content to parent project's `node_modules/react-native-onyx`:
-1. Work on Onyx feature or a fix
-2. Save files
-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`
+Now you can make changes directly to the `react-native-onyx` source code and your React Native project should-hot reload with those changes in realtime.
+
+_Note:_ If you want to unlink `react-native-onyx`, simply run `npm install` from your React Native project directory again. That will reinstall `react-native-onyx` from npm.

package/dist/Onyx.js

@@ -510,11 +510,12 @@ function keysChanged(collectionKey, partialCollection, notifyRegularSubscibers =
  * @private
  * @param {String} key
  * @param {*} data
+ * @param {*} prevData
  * @param {Function} [canUpdateSubscriber] only subscribers that pass this truth test will be updated
  * @param {boolean} [notifyRegularSubscibers=true]
  * @param {boolean} [notifyWithOnyxSubscibers=true]
  */
-function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = true, notifyWithOnyxSubscibers = true) {
+function keyChanged(key, data, prevData, canUpdateSubscriber = () => true, notifyRegularSubscibers = true, notifyWithOnyxSubscibers = true) {
     // Add or remove this key from the recentlyAccessedKeys lists
     if (!underscore_1.default.isNull(data)) {
         addLastAccessedKey(key);
@@ -528,7 +529,7 @@ function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = tr
     const stateMappingKeys = underscore_1.default.keys(callbackToStateMapping);
     for (let i = 0; i < stateMappingKeys.length; i++) {
         const subscriber = callbackToStateMapping[stateMappingKeys[i]];
-        if (!subscriber || !isKeyMatch(subscriber.key, key) || (underscore_1.default.isFunction(canUpdateSubscriber) && !canUpdateSubscriber(subscriber))) {
+        if (!subscriber || !isKeyMatch(subscriber.key, key) || !canUpdateSubscriber(subscriber)) {
             continue;
         }
         // Subscriber is a regular call to connect() and provided a callback
@@ -556,13 +557,13 @@ function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = tr
                 // returned by the selector and only when the selected data has changed.
                 if (subscriber.selector) {
                     subscriber.withOnyxInstance.setStateProxy((prevState) => {
-                        const prevData = prevState[subscriber.statePropertyName];
-                        const newData = {
+                        const prevWithOnyxData = prevState[subscriber.statePropertyName];
+                        const newWithOnyxData = {
                             [key]: getSubsetOfData(data, subscriber.selector, subscriber.withOnyxInstance.state),
                         };
-                        const prevDataWithNewData = Object.assign(Object.assign({}, prevData), newData);
-                        if (!(0, fast_equals_1.deepEqual)(prevData, prevDataWithNewData)) {
-                            PerformanceUtils.logSetStateCall(subscriber, prevData, newData, 'keyChanged', key);
+                        const prevDataWithNewData = Object.assign(Object.assign({}, prevWithOnyxData), newWithOnyxData);
+                        if (!(0, fast_equals_1.deepEqual)(prevWithOnyxData, prevDataWithNewData)) {
+                            PerformanceUtils.logSetStateCall(subscriber, prevWithOnyxData, newWithOnyxData, 'keyChanged', key);
                             return {
                                 [subscriber.statePropertyName]: prevDataWithNewData,
                             };
@@ -584,8 +585,8 @@ function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = tr
             // If the subscriber has a selector, then the component's state must only be updated with the data
             // returned by the selector and only if the selected data has changed.
             if (subscriber.selector) {
-                subscriber.withOnyxInstance.setStateProxy((prevState) => {
-                    const previousValue = getSubsetOfData(prevState[subscriber.statePropertyName], subscriber.selector, subscriber.withOnyxInstance.state);
+                subscriber.withOnyxInstance.setStateProxy(() => {
+                    const previousValue = getSubsetOfData(prevData, subscriber.selector, subscriber.withOnyxInstance.state);
                     const newValue = getSubsetOfData(data, subscriber.selector, subscriber.withOnyxInstance.state);
                     if (!(0, fast_equals_1.deepEqual)(previousValue, newValue)) {
                         return {
@@ -598,15 +599,15 @@ function keyChanged(key, data, canUpdateSubscriber, notifyRegularSubscibers = tr
             }
             // If we did not match on a collection key then we just set the new data to the state property
             subscriber.withOnyxInstance.setStateProxy((prevState) => {
-                const previousData = prevState[subscriber.statePropertyName];
+                const prevWithOnyxData = prevState[subscriber.statePropertyName];
                 // Avoids triggering unnecessary re-renders when feeding empty objects
-                if (utils_1.default.areObjectsEmpty(data, previousData)) {
+                if (utils_1.default.areObjectsEmpty(data, prevWithOnyxData)) {
                     return null;
                 }
-                if (previousData === data) {
+                if (prevWithOnyxData === data) {
                     return null;
                 }
-                PerformanceUtils.logSetStateCall(subscriber, previousData, data, 'keyChanged', key);
+                PerformanceUtils.logSetStateCall(subscriber, prevData, data, 'keyChanged', key);
                 return {
                     [subscriber.statePropertyName]: data,
                 };
@@ -829,12 +830,13 @@ function disconnect(connectionID, keyToRemoveFromEvictionBlocklist) {
  *
  * @param {String} key
  * @param {*} value
+ * @param {*} prevValue
  * @param {Function} [canUpdateSubscriber] only subscribers that pass this truth test will be updated
  * @returns {Promise}
  */
-function scheduleSubscriberUpdate(key, value, canUpdateSubscriber) {
-    const promise = Promise.resolve().then(() => keyChanged(key, value, canUpdateSubscriber, true, false));
-    batchUpdates(() => keyChanged(key, value, canUpdateSubscriber, false, true));
+function scheduleSubscriberUpdate(key, value, prevValue, canUpdateSubscriber = () => true) {
+    const promise = Promise.resolve().then(() => keyChanged(key, value, prevValue, canUpdateSubscriber, true, false));
+    batchUpdates(() => keyChanged(key, value, prevValue, canUpdateSubscriber, false, true));
     return Promise.all([maybeFlushBatchUpdates(), promise]);
 }
 /**
@@ -859,8 +861,9 @@ function scheduleNotifyCollectionSubscribers(key, value) {
  * @return {Promise}
  */
 function remove(key) {
+    const prevValue = OnyxCache_1.default.getValue(key, false);
     OnyxCache_1.default.drop(key);
-    scheduleSubscriberUpdate(key, null);
+    scheduleSubscriberUpdate(key, null, prevValue);
     return storage_1.default.removeItem(key);
 }
 /**
@@ -920,6 +923,7 @@ function evictStorageAndRetry(error, onyxMethod, ...args) {
 function broadcastUpdate(key, value, method, hasChanged, wasRemoved = false) {
     // Logging properties only since values could be sensitive things we don't want to log
     Logger.logInfo(`${method}() called for key: ${key}${underscore_1.default.isObject(value) ? ` properties: ${underscore_1.default.keys(value).join(',')}` : ''}`);
+    const prevValue = OnyxCache_1.default.getValue(key, false);
     // Update subscribers if the cached value has changed, or when the subscriber specifically requires
     // all updates regardless of value changes (indicated by initWithStoredValues set to false).
     if (hasChanged && !wasRemoved) {
@@ -928,7 +932,7 @@ function broadcastUpdate(key, value, method, hasChanged, wasRemoved = false) {
     else {
         OnyxCache_1.default.addToAccessedKeys(key);
     }
-    return scheduleSubscriberUpdate(key, value, (subscriber) => hasChanged || subscriber.initWithStoredValues === false);
+    return scheduleSubscriberUpdate(key, value, prevValue, (subscriber) => hasChanged || subscriber.initWithStoredValues === false);
 }
 /**
  * @param {String} key
@@ -1011,9 +1015,10 @@ function prepareKeyValuePairsForStorage(data) {
 function multiSet(data) {
     const keyValuePairs = prepareKeyValuePairsForStorage(data);
     const updatePromises = underscore_1.default.map(keyValuePairs, ([key, value]) => {
+        const prevValue = OnyxCache_1.default.getValue(key, false);
         // Update cache and optimistically inform subscribers on the next tick
         OnyxCache_1.default.set(key, value);
-        return scheduleSubscriberUpdate(key, value);
+        return scheduleSubscriberUpdate(key, value, prevValue);
     });
     return storage_1.default.multiSet(keyValuePairs)
         .catch((error) => evictStorageAndRetry(error, multiSet, data))
@@ -1130,10 +1135,10 @@ function merge(key, changes) {
  */
 function initializeWithDefaultKeyStates() {
     return storage_1.default.multiGet(underscore_1.default.keys(defaultKeyStates)).then((pairs) => {
-        const asObject = underscore_1.default.object(pairs);
-        const merged = utils_1.default.fastMerge(asObject, defaultKeyStates);
+        const existingDataAsObject = underscore_1.default.object(pairs);
+        const merged = utils_1.default.fastMerge(existingDataAsObject, defaultKeyStates);
         OnyxCache_1.default.merge(merged);
-        underscore_1.default.each(merged, (val, key) => keyChanged(key, val));
+        underscore_1.default.each(merged, (val, key) => keyChanged(key, val, existingDataAsObject));
     });
 }
 /**
@@ -1201,7 +1206,7 @@ function clear(keysToPreserve = []) {
         const updatePromises = [];
         // Notify the subscribers for each key/value group so they can receive the new values
         underscore_1.default.each(keyValuesToResetIndividually, (value, key) => {
-            updatePromises.push(scheduleSubscriberUpdate(key, value));
+            updatePromises.push(scheduleSubscriberUpdate(key, value, OnyxCache_1.default.getValue(key, false)));
         });
         underscore_1.default.each(keyValuesToResetAsCollection, (value, key) => {
             updatePromises.push(scheduleNotifyCollectionSubscribers(key, value));
@@ -1401,8 +1406,9 @@ function init({ keys = {}, initialKeyStates = {}, safeEvictionKeys = [], maxCach
     Promise.all([addAllSafeEvictionKeysToRecentlyAccessedList(), initializeWithDefaultKeyStates()]).then(deferredInitTask.resolve);
     if (shouldSyncMultipleInstances && underscore_1.default.isFunction(storage_1.default.keepInstancesSync)) {
         storage_1.default.keepInstancesSync((key, value) => {
+            const prevValue = OnyxCache_1.default.getValue(key, false);
             OnyxCache_1.default.set(key, value);
-            keyChanged(key, value);
+            keyChanged(key, value, prevValue);
         });
     }
 }

package/dist/OnyxCache.d.ts

@@ -39,9 +39,10 @@ declare class OnyxCache {
     /**
      * Get a cached value from storage
      * @param {string} key
+     * @param {Boolean} [shouldReindexCache] – This is an LRU cache, and by default accessing a value will make it become last in line to be evicted. This flag can be used to skip that and just access the value directly without side-effects.
      * @returns {*}
      */
-    getValue(key: string): any;
+    getValue(key: string, shouldReindexCache?: boolean | undefined): any;
     /**
      * Check whether cache has data for the given key
      * @param {string} key

package/dist/OnyxCache.js

@@ -52,10 +52,13 @@ class OnyxCache {
     /**
      * Get a cached value from storage
      * @param {string} key
+     * @param {Boolean} [shouldReindexCache] – This is an LRU cache, and by default accessing a value will make it become last in line to be evicted. This flag can be used to skip that and just access the value directly without side-effects.
      * @returns {*}
      */
-    getValue(key) {
-        this.addToAccessedKeys(key);
+    getValue(key, shouldReindexCache = true) {
+        if (shouldReindexCache) {
+            this.addToAccessedKeys(key);
+        }
         return this.storageMap[key];
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -32,6 +32,7 @@
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "build": "tsc -p tsconfig.build.json && cp ./lib/*.d.ts ./dist",
+    "build:watch": "nodemon --watch lib --exec \"npm run build && npm pack\"",
     "build:docs": "node buildDocs.js",
     "lint-tests": "eslint tests/**",
     "prettier": "prettier --write ."
@@ -65,6 +66,7 @@
     "jest-cli": "^26.5.2",
     "jsdoc-to-markdown": "^7.1.0",
     "metro-react-native-babel-preset": "^0.77.0",
+    "nodemon": "^3.0.3",
     "prettier": "^2.8.8",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
@@ -81,9 +83,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": {