react-native-onyx 1.0.1 → 1.0.4

package/lib/Onyx.js

@@ -1,9 +1,9 @@
 import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
 import lodashMerge from 'lodash/merge';
+import lodashGet from 'lodash/get';
 import Storage from './storage';
-
-import {registerLogger, logInfo, logAlert} from './Logger';
+import * as Logger from './Logger';
 import cache from './OnyxCache';
 import createDeferredTask from './createDeferredTask';
 
@@ -59,7 +59,7 @@ function get(key) {
             cache.set(key, val);
             return val;
         })
-        .catch(err => logInfo(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
+        .catch(err => Logger.logInfo(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
 
     return cache.captureTask(taskName, promise);
 }
@@ -208,9 +208,10 @@ function addAllSafeEvictionKeysToRecentlyAccessedList() {
         .then((keys) => {
             _.each(evictionAllowList, (safeEvictionKey) => {
                 _.each(keys, (key) => {
-                    if (isKeyMatch(safeEvictionKey, key)) {
-                        addLastAccessedKey(key);
+                    if (!isKeyMatch(safeEvictionKey, key)) {
+                        return;
                     }
+                    addLastAccessedKey(key);
                 });
             });
         });
@@ -258,7 +259,6 @@ function keysChanged(collectionKey, collection) {
 
         if (isSubscribedToCollectionKey) {
             if (_.isFunction(subscriber.callback)) {
-                // eslint-disable-next-line no-use-before-define
                 const cachedCollection = getCachedCollection(collectionKey);
                 _.each(collection, (data, dataKey) => {
                     subscriber.callback(cachedCollection[dataKey], dataKey);
@@ -317,29 +317,31 @@ function keyChanged(key, data) {
 
     // Find all subscribers that were added with connect() and trigger the callback or setState() with the new data
     _.each(callbackToStateMapping, (subscriber) => {
-        if (subscriber && isKeyMatch(subscriber.key, key)) {
-            if (_.isFunction(subscriber.callback)) {
-                subscriber.callback(data, key);
-            }
+        if (!subscriber || !isKeyMatch(subscriber.key, key)) {
+            return;
+        }
 
-            if (!subscriber.withOnyxInstance) {
-                return;
-            }
+        if (_.isFunction(subscriber.callback)) {
+            subscriber.callback(data, key);
+        }
 
-            // Check if we are subscribing to a collection key and add this item as a collection
-            if (isCollectionKey(subscriber.key)) {
-                subscriber.withOnyxInstance.setState((prevState) => {
-                    const collection = _.clone(prevState[subscriber.statePropertyName] || {});
-                    collection[key] = data;
-                    return {
-                        [subscriber.statePropertyName]: collection,
-                    };
-                });
-            } else {
-                subscriber.withOnyxInstance.setState({
-                    [subscriber.statePropertyName]: data,
-                });
-            }
+        if (!subscriber.withOnyxInstance) {
+            return;
+        }
+
+        // Check if we are subscribing to a collection key and add this item as a collection
+        if (isCollectionKey(subscriber.key)) {
+            subscriber.withOnyxInstance.setState((prevState) => {
+                const collection = _.clone(prevState[subscriber.statePropertyName] || {});
+                collection[key] = data;
+                return {
+                    [subscriber.statePropertyName]: collection,
+                };
+            });
+        } else {
+            subscriber.withOnyxInstance.setState({
+                [subscriber.statePropertyName]: data,
+            });
         }
     });
 }
@@ -404,21 +406,23 @@ function connect(mapping) {
     deferredInitTask.promise
         .then(() => {
             // Check to see if this key is flagged as a safe eviction key and add it to the recentlyAccessedKeys list
-            if (isSafeEvictionKey(mapping.key)) {
-                // Try to free some cache whenever we connect to a safe eviction key
-                cache.removeLeastRecentlyUsedKeys();
-
-                if (mapping.withOnyxInstance && !isCollectionKey(mapping.key)) {
-                    // All React components subscribing to a key flagged as a safe eviction
-                    // key must implement the canEvict property.
-                    if (_.isUndefined(mapping.canEvict)) {
-                        throw new Error(
-                            `Cannot subscribe to safe eviction key '${mapping.key}' without providing a canEvict value.`
-                        );
-                    }
+            if (!isSafeEvictionKey(mapping.key)) {
+                return;
+            }
 
-                    addLastAccessedKey(mapping.key);
+            // Try to free some cache whenever we connect to a safe eviction key
+            cache.removeLeastRecentlyUsedKeys();
+
+            if (mapping.withOnyxInstance && !isCollectionKey(mapping.key)) {
+                // All React components subscribing to a key flagged as a safe eviction
+                // key must implement the canEvict property.
+                if (_.isUndefined(mapping.canEvict)) {
+                    throw new Error(
+                        `Cannot subscribe to safe eviction key '${mapping.key}' without providing a canEvict value.`,
+                    );
                 }
+
+                addLastAccessedKey(mapping.key);
             }
         })
         .then(getAllKeys)
@@ -505,10 +509,10 @@ function remove(key) {
  * @return {Promise}
  */
 function evictStorageAndRetry(error, onyxMethod, ...args) {
-    logInfo(`Handled error: ${error}`);
+    Logger.logInfo(`Handled error: ${error}`);
 
     if (error && Str.startsWith(error.message, 'Failed to execute \'put\' on \'IDBObjectStore\'')) {
-        logAlert('Attempted to set invalid data set in Onyx. Please ensure all data is serializable.');
+        Logger.logAlert('Attempted to set invalid data set in Onyx. Please ensure all data is serializable.');
         throw error;
     }
 
@@ -516,12 +520,12 @@ function evictStorageAndRetry(error, onyxMethod, ...args) {
     const keyForRemoval = _.find(recentlyAccessedKeys, key => !evictionBlocklist[key]);
 
     if (!keyForRemoval) {
-        logAlert('Out of storage. But found no acceptable keys to remove.');
+        Logger.logAlert('Out of storage. But found no acceptable keys to remove.');
         throw error;
     }
 
     // Remove the least recently viewed key that is not currently being accessed and retry.
-    logInfo(`Out of storage. Evicting least recently accessed key (${keyForRemoval}) and retrying.`);
+    Logger.logInfo(`Out of storage. Evicting least recently accessed key (${keyForRemoval}) and retrying.`);
     return remove(keyForRemoval)
         .then(() => onyxMethod(...args));
 }
@@ -536,12 +540,11 @@ function evictStorageAndRetry(error, onyxMethod, ...args) {
  */
 function set(key, value) {
     // Logging properties only since values could be sensitive things we don't want to log
-    logInfo(`set() called for key: ${key}${_.isObject(value) ? ` properties: ${_.keys(value).join(',')}` : ''}`);
+    Logger.logInfo(`set() called for key: ${key}${_.isObject(value) ? ` properties: ${_.keys(value).join(',')}` : ''}`);
 
     // eslint-disable-next-line no-use-before-define
     if (hasPendingMergeForKey(key)) {
-        // eslint-disable-next-line max-len
-        logAlert(`Onyx.set() called after Onyx.merge() for key: ${key}. It is recommended to use set() or merge() not both.`);
+        Logger.logAlert(`Onyx.set() called after Onyx.merge() for key: ${key}. It is recommended to use set() or merge() not both.`);
     }
 
     // Adds the key to cache when it's not available
@@ -680,7 +683,7 @@ function merge(key, value) {
 
                 return set(key, modifiedData);
             } catch (error) {
-                logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
+                Logger.logAlert(`An error occurred while applying merge for key: ${key}, Error: ${error}`);
             }
 
             return Promise.resolve();
@@ -706,18 +709,36 @@ function initializeWithDefaultKeyStates() {
 /**
  * Clear out all the data in the store
  *
+ * Note that calling Onyx.clear() and then Onyx.set() on a key with a default
+ * key state may store an unexpected value in Storage.
+ *
+ * E.g.
+ * Onyx.clear();
+ * Onyx.set(ONYXKEYS.DEFAULT_KEY, 'default');
+ * Storage.getItem(ONYXKEYS.DEFAULT_KEY)
+ *     .then((storedValue) => console.log(storedValue));
+ * null is logged instead of the expected 'default'
+ *
+ * Onyx.set() might call Storage.setItem() before Onyx.clear() calls
+ * Storage.setItem(). Use Onyx.merge() instead if possible. Onyx.merge() calls
+ * Onyx.get(key) before calling Storage.setItem() via Onyx.set().
+ * Storage.setItem() from Onyx.clear() will have already finished and the merged
+ * value will be saved to storage after the default value.
+ *
  * @returns {Promise<void>}
  */
 function clear() {
     return getAllKeys()
         .then((keys) => {
             _.each(keys, (key) => {
-                keyChanged(key, null);
-                cache.set(key, null);
+                const resetValue = lodashGet(defaultKeyStates, key, null);
+                cache.set(key, resetValue);
+
+                // Optimistically inform subscribers on the next tick
+                Promise.resolve().then(() => keyChanged(key, resetValue));
             });
-        })
-        .then(Storage.clear)
-        .then(initializeWithDefaultKeyStates);
+            Storage.clear();
+        });
 }
 
 /**
@@ -737,10 +758,11 @@ function clear() {
 function mergeCollection(collectionKey, collection) {
     // Confirm all the collection keys belong to the same parent
     _.each(collection, (data, dataKey) => {
-        if (!isKeyMatch(collectionKey, dataKey)) {
-            // eslint-disable-next-line max-len
-            throw new Error(`Provided collection does not have all its data belonging to the same parent. CollectionKey: ${collectionKey}, DataKey: ${dataKey}`);
+        if (isKeyMatch(collectionKey, dataKey)) {
+            return;
         }
+
+        throw new Error(`Provided collection doesn't have all its data belonging to the same parent. CollectionKey: ${collectionKey}, DataKey: ${dataKey}`);
     });
 
     return getAllKeys()
@@ -780,6 +802,36 @@ function mergeCollection(collectionKey, collection) {
         });
 }
 
+/**
+ * Insert API responses and lifecycle data into Onyx
+ *
+ * @param {Array} data An array of objects with shape {onyxMethod: oneOf('set', 'merge'), key: string, value: *}
+ */
+function update(data) {
+    // First, validate the Onyx object is in the format we expect
+    _.each(data, ({onyxMethod, key}) => {
+        if (!_.contains(['set', 'merge'], onyxMethod)) {
+            throw new Error(`Invalid onyxMethod ${onyxMethod} in Onyx update.`);
+        }
+        if (!_.isString(key)) {
+            throw new Error(`Invalid ${typeof key} key provided in Onyx update. Onyx key must be of type string.`);
+        }
+    });
+
+    _.each(data, ({onyxMethod, key, value}) => {
+        switch (onyxMethod) {
+            case 'set':
+                set(key, value);
+                break;
+            case 'merge':
+                merge(key, value);
+                break;
+            default:
+                break;
+        }
+    });
+}
+
 /**
  * Initialize the store with actions and listening for storage events
  *
@@ -837,7 +889,7 @@ function init({
     // Initialize all of our keys with data provided then give green light to any pending connections
     Promise.all([
         addAllSafeEvictionKeysToRecentlyAccessedList(),
-        initializeWithDefaultKeyStates()
+        initializeWithDefaultKeyStates(),
     ])
         .then(deferredInitTask.resolve);
 
@@ -856,9 +908,10 @@ const Onyx = {
     multiSet,
     merge,
     mergeCollection,
+    update,
     clear,
     init,
-    registerLogger,
+    registerLogger: Logger.registerLogger,
     addToEvictionBlockList,
     removeFromEvictionBlockList,
     isSafeEvictionKey,
@@ -883,14 +936,18 @@ function applyDecorators() {
     mergeCollection = decorate.decorateWithMetrics(mergeCollection, 'Onyx:mergeCollection');
     getAllKeys = decorate.decorateWithMetrics(getAllKeys, 'Onyx:getAllKeys');
     initializeWithDefaultKeyStates = decorate.decorateWithMetrics(initializeWithDefaultKeyStates, 'Onyx:defaults');
+    update = decorate.decorateWithMetrics(update, 'Onyx:update');
     /* eslint-enable */
 
     // Re-expose decorated methods
+    /* eslint-disable rulesdir/prefer-actions-set-data */
     Onyx.set = set;
     Onyx.multiSet = multiSet;
     Onyx.clear = clear;
     Onyx.merge = merge;
     Onyx.mergeCollection = mergeCollection;
+    Onyx.update = update;
+    /* eslint-enable */
 
     // Expose stats methods on Onyx
     Onyx.getMetrics = decorate.getMetrics;

package/lib/OnyxCache.js

@@ -1,7 +1,6 @@
 import _ from 'underscore';
 import lodashMerge from 'lodash/merge';
 
-
 const isDefined = _.negate(_.isUndefined);
 
 /**
@@ -43,7 +42,7 @@ class OnyxCache {
             this,
             'getAllKeys', 'getValue', 'hasCacheForKey', 'addKey', 'set', 'drop', 'merge',
             'hasPendingTask', 'getTaskPromise', 'captureTask', 'removeLeastRecentlyUsedKeys',
-            'setRecentKeysLimit'
+            'setRecentKeysLimit',
         );
     }
 
@@ -171,14 +170,16 @@ class OnyxCache {
      * Remove keys that don't fall into the range of recently used keys
      */
     removeLeastRecentlyUsedKeys() {
-        if (this.recentKeys.size > this.maxRecentKeysSize) {
-            // Get the last N keys by doing a negative slice
-            const recentlyAccessed = [...this.recentKeys].slice(-this.maxRecentKeysSize);
-            const storageKeys = _.keys(this.storageMap);
-            const keysToRemove = _.difference(storageKeys, recentlyAccessed);
-
-            _.each(keysToRemove, this.drop);
+        if (this.recentKeys.size <= this.maxRecentKeysSize) {
+            return;
         }
+
+        // Get the last N keys by doing a negative slice
+        const recentlyAccessed = [...this.recentKeys].slice(-this.maxRecentKeysSize);
+        const storageKeys = _.keys(this.storageMap);
+        const keysToRemove = _.difference(storageKeys, recentlyAccessed);
+
+        _.each(keysToRemove, this.drop);
     }
 
     /**

package/lib/compose.js

@@ -25,5 +25,6 @@ export default function compose(...funcs) {
         return funcs[0];
     }
 
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
     return funcs.reduce((a, b) => (...args) => a(b(...args)));
 }

package/lib/metrics/index.native.js

@@ -23,7 +23,7 @@ function measureMarkToNow(startMark, detail) {
     performance.measure(`${startMark.name} [${startMark.detail.args.toString()}]`, {
         start: startMark.startTime,
         end: performance.now(),
-        detail: {...startMark.detail, ...detail}
+        detail: {...startMark.detail, ...detail},
     });
 }
 
@@ -193,12 +193,12 @@ function printMetrics({raw = false, format = 'console', methods} = {}) {
                 title: methodName,
                 heading: ['start time', 'end time', 'duration', 'args'],
                 leftAlignedCols: [3],
-                rows: calls.map(call => ([
+                rows: _.map(calls, call => ([
                     toDuration(call.startTime - performance.timeOrigin, raw),
                     toDuration((call.startTime + call.duration) - timeOrigin, raw),
                     toDuration(call.duration, raw),
-                    call.detail.args.map(String).join(', ').slice(0, 60), // Restrict cell width to 60 chars max
-                ]))
+                    _.map(call.detail.args, String).join(', ').slice(0, 60), // Restrict cell width to 60 chars max
+                ])),
             });
         })
         .value();
@@ -206,7 +206,7 @@ function printMetrics({raw = false, format = 'console', methods} = {}) {
     if (/csv|json|string/i.test(format)) {
         const allTables = [tableSummary, ...methodCallTables];
 
-        return allTables.map((table) => {
+        return _.map(allTables, (table) => {
             switch (format.toLowerCase()) {
                 case 'csv':
                     return table.toCSV();
@@ -219,7 +219,7 @@ function printMetrics({raw = false, format = 'console', methods} = {}) {
     }
 
     const lastComplete = lastCompleteCall && toDuration(
-        (lastCompleteCall.startTime + lastCompleteCall.duration) - timeOrigin, raw
+        (lastCompleteCall.startTime + lastCompleteCall.duration) - timeOrigin, raw,
     );
 
     const mainOutput = [
@@ -227,7 +227,7 @@ function printMetrics({raw = false, format = 'console', methods} = {}) {
         `  - Total: ${toDuration(totalTime, raw)}`,
         `  - Last call finished at: ${lastComplete || 'N/A'}`,
         '',
-        tableSummary.toString()
+        tableSummary.toString(),
     ];
 
     /* eslint-disable no-console */

package/lib/storage/providers/LocalForage.js

@@ -10,7 +10,7 @@ import lodashMerge from 'lodash/merge';
 import SyncQueue from '../../SyncQueue';
 
 localforage.config({
-    name: 'OnyxDB'
+    name: 'OnyxDB',
 });
 
 const provider = {
@@ -42,7 +42,7 @@ const provider = {
         const pairs = _.map(
             keys,
             key => localforage.getItem(key)
-                .then(value => [key, value])
+                .then(value => [key, value]),
         );
 
         return Promise.all(pairs);

package/lib/withOnyx.js

@@ -122,8 +122,7 @@ export default function (mapOnyxToState) {
                     const key = Str.result(mapping.key, this.props);
 
                     if (!Onyx.isSafeEvictionKey(key)) {
-                        // eslint-disable-next-line max-len
-                        throw new Error(`canEvict cannot be used on key '${key}'. This key must explicitly be flagged as safe for removal by adding it to Onyx.init({safeEvictionKeys: []}).`);
+                        throw new Error(`canEvict can't be used on key '${key}'. This key must explicitly be flagged as safe for removal by adding it to Onyx.init({safeEvictionKeys: []}).`);
                     }
 
                     if (canEvict) {
@@ -147,6 +146,7 @@ export default function (mapOnyxToState) {
             connectMappingToOnyx(mapping, statePropertyName) {
                 const key = Str.result(mapping.key, this.props);
 
+                // eslint-disable-next-line rulesdir/prefer-onyx-connect-in-libs
                 this.activeConnectionIDs[key] = Onyx.connect({
                     ...mapping,
                     key,

package/package.json

@@ -1,11 +1,24 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
   "license": "MIT",
   "private": false,
+  "keywords": [
+    "React Native",
+    "React",
+    "Persistant storage",
+    "Pub/Sub"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Expensify/react-native-onyx.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Expensify/react-native-onyx/issues"
+  },
   "files": [
     "dist/**/*",
     "lib/**/*",
@@ -22,7 +35,7 @@
     "lint": "eslint .",
     "lint-tests": "eslint tests/**",
     "test": "jest",
-    "build:web": "webpack --config webpack.config.js",
+    "build": "webpack --config webpack.config.js",
     "build:docs": "node buildDocs.js"
   },
   "dependencies": {
@@ -45,7 +58,7 @@
     "babel-plugin-react-native-web": "^0.13.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "eslint": "^7.6.0",
-    "eslint-config-expensify": "^2.0.11",
+    "eslint-config-expensify": "^2.0.24",
     "expensify-common": "git+https://github.com/Expensify/expensify-common.git#427295da130a4eacc184d38693664280d020dffd",
     "jest": "^26.5.2",
     "jest-cli": "^26.5.2",

package/web.js

@@ -6,7 +6,7 @@
  */
 
 if (process.env.NODE_ENV === 'production') {
-    module.exports = require('./dist/web.min.js');
+    module.exports = require('./dist/web.min');
 } else {
-    module.exports = require('./dist/web.development.js');
+    module.exports = require('./dist/web.development');
 }