react-native-onyx 2.0.10 → 2.0.12

package/dist/Onyx.d.ts

@@ -97,7 +97,6 @@ type InitOptions = {
     initialKeyStates?: Partial<NullableKeyValueMapping>;
     safeEvictionKeys?: OnyxKey[];
     maxCachedKeysCount?: number;
-    captureMetrics?: boolean;
     shouldSyncMultipleInstances?: boolean;
     debugSetState?: boolean;
 };
@@ -267,7 +266,6 @@ declare function update(data: OnyxUpdate[]): Promise<void>;
  * @param [options.maxCachedKeysCount=55] Sets how many recent keys should we try to keep in cache
  * Setting this to 0 would practically mean no cache
  * We try to free cache when we connect to a safe eviction key
- * @param [options.captureMetrics] Enables Onyx benchmarking and exposes the get/print/reset functions
  * @param [options.shouldSyncMultipleInstances] Auto synchronize storage events between multiple instances
  * of Onyx running in different tabs/windows. Defaults to true for platforms that support local storage (web/desktop)
  * @param [options.debugSetState] Enables debugging setState() calls to connected components.

package/dist/Onyx.js

@@ -33,7 +33,7 @@ const Logger = __importStar(require("./Logger"));
 const OnyxCache_1 = __importDefault(require("./OnyxCache"));
 const Str = __importStar(require("./Str"));
 const createDeferredTask_1 = __importDefault(require("./createDeferredTask"));
-const PerformanceUtils = __importStar(require("./metrics/PerformanceUtils"));
+const PerformanceUtils = __importStar(require("./PerformanceUtils"));
 const storage_1 = __importDefault(require("./storage"));
 const utils_1 = __importDefault(require("./utils"));
 const batch_1 = __importDefault(require("./batch"));
@@ -694,13 +694,70 @@ function addKeyToRecentlyAccessedIfNeeded(mapping) {
  * @param {Object} mapping
  */
 function getCollectionDataAndSendAsObject(matchingKeys, mapping) {
-    Promise.all(underscore_1.default.map(matchingKeys, (key) => get(key)))
-        .then((values) => underscore_1.default.reduce(values, (finalObject, value, i) => {
-        // eslint-disable-next-line no-param-reassign
-        finalObject[matchingKeys[i]] = value;
-        return finalObject;
-    }, {}))
-        .then((val) => sendDataToConnection(mapping, val, undefined, true));
+    // Keys that are not in the cache
+    const missingKeys = [];
+    // Tasks that are pending
+    const pendingTasks = [];
+    // Keys for the tasks that are pending
+    const pendingKeys = [];
+    // We are going to combine all the data from the matching keys into a single object
+    const data = {};
+    /**
+     * We are going to iterate over all the matching keys and check if we have the data in the cache.
+     * If we do then we add it to the data object. If we do not then we check if there is a pending task
+     * for the key. If there is then we add the promise to the pendingTasks array and the key to the pendingKeys
+     * array. If there is no pending task then we add the key to the missingKeys array.
+     *
+     * These missingKeys will be later to use to multiGet the data from the storage.
+     */
+    matchingKeys.forEach((key) => {
+        const cacheValue = OnyxCache_1.default.getValue(key);
+        if (cacheValue) {
+            data[key] = cacheValue;
+            return;
+        }
+        const pendingKey = `get:${key}`;
+        if (OnyxCache_1.default.hasPendingTask(pendingKey)) {
+            pendingTasks.push(OnyxCache_1.default.getTaskPromise(pendingKey));
+            pendingKeys.push(key);
+        }
+        else {
+            missingKeys.push(key);
+        }
+    });
+    Promise.all(pendingTasks)
+        // We are going to wait for all the pending tasks to resolve and then add the data to the data object.
+        .then((values) => {
+        values.forEach((value, index) => {
+            data[pendingKeys[index]] = value;
+        });
+        return Promise.resolve();
+    })
+        // We are going to get the missing keys using multiGet from the storage.
+        .then(() => {
+        if (missingKeys.length === 0) {
+            return Promise.resolve();
+        }
+        return storage_1.default.multiGet(missingKeys);
+    })
+        // We are going to add the data from the missing keys to the data object and also merge it to the cache.
+        .then((values) => {
+        if (!values || values.length === 0) {
+            return Promise.resolve();
+        }
+        // temp object is used to merge the missing data into the cache
+        const temp = {};
+        values.forEach((value) => {
+            data[value[0]] = value[1];
+            temp[value[0]] = value[1];
+        });
+        OnyxCache_1.default.merge(temp);
+        return Promise.resolve();
+    })
+        // We are going to send the data to the subscriber.
+        .finally(() => {
+        sendDataToConnection(mapping, data, undefined, true);
+    });
 }
 /**
  * Subscribes a react component's state directly to a store key
@@ -1378,7 +1435,7 @@ function setMemoryOnlyKeys(keyList) {
  *     },
  * });
  */
-function init({ keys = {}, initialKeyStates = {}, safeEvictionKeys = [], maxCachedKeysCount = 1000, captureMetrics = false, shouldSyncMultipleInstances = Boolean(global.localStorage), debugSetState = false, } = {}) {
+function init({ keys = {}, initialKeyStates = {}, safeEvictionKeys = [], maxCachedKeysCount = 1000, shouldSyncMultipleInstances = Boolean(global.localStorage), debugSetState = false } = {}) {
     storage_1.default.init();
     if (shouldSyncMultipleInstances) {
         storage_1.default.keepInstancesSync((key, value) => {
@@ -1387,11 +1444,6 @@ function init({ keys = {}, initialKeyStates = {}, safeEvictionKeys = [], maxCach
             keyChanged(key, value, prevValue);
         });
     }
-    if (captureMetrics) {
-        // The code here is only bundled and applied when the captureMetrics is set
-        // eslint-disable-next-line no-use-before-define
-        applyDecorators();
-    }
     if (debugSetState) {
         PerformanceUtils.setShouldDebugSetState(true);
     }
@@ -1433,38 +1485,4 @@ const Onyx = {
     tryGetCachedValue,
     hasPendingMergeForKey,
 };
-/**
- * Apply calls statistic decorators to benchmark Onyx
- *
- * @private
- */
-function applyDecorators() {
-    // We're requiring the script dynamically here so that it's only evaluated when decorators are used
-    const decorate = require('./metrics');
-    // Re-assign with decorated functions
-    /* eslint-disable no-func-assign */
-    get = decorate.decorateWithMetrics(get, 'Onyx:get');
-    set = decorate.decorateWithMetrics(set, 'Onyx:set');
-    multiSet = decorate.decorateWithMetrics(multiSet, 'Onyx:multiSet');
-    clear = decorate.decorateWithMetrics(clear, 'Onyx:clear');
-    merge = decorate.decorateWithMetrics(merge, 'Onyx:merge');
-    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;
-    Onyx.resetMetrics = decorate.resetMetrics;
-    Onyx.printMetrics = decorate.printMetrics;
-}
 exports.default = Onyx;

package/dist/PerformanceUtils.d.ts

@@ -0,0 +1,10 @@
+type Mapping = Record<string, unknown> & {
+    key: string;
+    displayName: string;
+};
+declare function setShouldDebugSetState(debug: boolean): void;
+/**
+ * Provide insights into why a setState() call occurred by diffing the before and after values.
+ */
+declare function logSetStateCall(mapping: Mapping, previousValue: unknown, newValue: unknown, caller: string, keyThatChanged: string): void;
+export { logSetStateCall, setShouldDebugSetState };

package/dist/{metrics/PerformanceUtils.js → PerformanceUtils.js}

@@ -5,11 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setShouldDebugSetState = exports.logSetStateCall = void 0;
 const transform_1 = __importDefault(require("lodash/transform"));
-const underscore_1 = __importDefault(require("underscore"));
+const fast_equals_1 = require("fast-equals");
 let debugSetState = false;
-/**
- * @param {Boolean} debug
- */
 function setShouldDebugSetState(debug) {
     debugSetState = debug;
 }
@@ -17,31 +14,24 @@ exports.setShouldDebugSetState = setShouldDebugSetState;
 /**
  * Deep diff between two objects. Useful for figuring out what changed about an object from one render to the next so
  * that state and props updates can be optimized.
- *
- * @param  {Object} object
- * @param  {Object} base
- * @return {Object}
  */
 function diffObject(object, base) {
-    function changes(obj, comparisonObject) {
-        return (0, transform_1.default)(obj, (result, value, key) => {
-            if (underscore_1.default.isEqual(value, comparisonObject[key])) {
-                return;
-            }
+    return (0, transform_1.default)(object, (result, value, key) => {
+        if ((0, fast_equals_1.deepEqual)(value, base[key])) {
+            return;
+        }
+        if (typeof value === 'object' && typeof base[key] === 'object') {
             // eslint-disable-next-line no-param-reassign
-            result[key] = underscore_1.default.isObject(value) && underscore_1.default.isObject(comparisonObject[key]) ? changes(value, comparisonObject[key]) : value;
-        });
-    }
-    return changes(object, base);
+            result[key] = diffObject(value, base[key]);
+        }
+        else {
+            // eslint-disable-next-line no-param-reassign
+            result[key] = value;
+        }
+    });
 }
 /**
  * Provide insights into why a setState() call occurred by diffing the before and after values.
- *
- * @param {Object} mapping
- * @param {*} previousValue
- * @param {*} newValue
- * @param {String} caller
- * @param {String} [keyThatChanged]
  */
 function logSetStateCall(mapping, previousValue, newValue, caller, keyThatChanged) {
     if (!debugSetState) {
@@ -51,7 +41,7 @@ function logSetStateCall(mapping, previousValue, newValue, caller, keyThatChange
     if (keyThatChanged) {
         logParams.keyThatChanged = keyThatChanged;
     }
-    if (underscore_1.default.isObject(newValue) && underscore_1.default.isObject(previousValue)) {
+    if (newValue && previousValue && typeof newValue === 'object' && typeof previousValue === 'object') {
         logParams.difference = diffObject(previousValue, newValue);
     }
     else {

package/package.json

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

package/dist/metrics/PerformanceUtils.d.ts

@@ -1,14 +0,0 @@
-/**
- * Provide insights into why a setState() call occurred by diffing the before and after values.
- *
- * @param {Object} mapping
- * @param {*} previousValue
- * @param {*} newValue
- * @param {String} caller
- * @param {String} [keyThatChanged]
- */
-export function logSetStateCall(mapping: Object, previousValue: any, newValue: any, caller: string, keyThatChanged?: string | undefined): void;
-/**
- * @param {Boolean} debug
- */
-export function setShouldDebugSetState(debug: boolean): void;

package/dist/metrics/index.d.ts

@@ -1,4 +0,0 @@
-export function decorateWithMetrics(func: any): any;
-export function getMetrics(): void;
-export function resetMetrics(): void;
-export function printMetrics(): void;

package/dist/metrics/index.js

@@ -1,14 +0,0 @@
-"use strict";
-// For web-only implementations of Onyx, this module will just be a no-op
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.printMetrics = exports.resetMetrics = exports.getMetrics = exports.decorateWithMetrics = void 0;
-function decorateWithMetrics(func) {
-    return func;
-}
-exports.decorateWithMetrics = decorateWithMetrics;
-function getMetrics() { }
-exports.getMetrics = getMetrics;
-function printMetrics() { }
-exports.printMetrics = printMetrics;
-function resetMetrics() { }
-exports.resetMetrics = resetMetrics;

package/dist/metrics/index.native.d.ts

@@ -1,43 +0,0 @@
-/**
- * Wraps a function with metrics capturing logic
- * @param {function} func
- * @param {String} [alias]
- * @returns {function} The wrapped function
- */
-export function decorateWithMetrics(func: Function, alias?: string | undefined): Function;
-/**
- * Aggregates and returns benchmark information
- * @returns {{summaries: Record<string, Object>, totalTime: number, lastCompleteCall: *}}
- * An object with
- * - `totalTime` - total time spent by decorated methods
- * - `lastCompleteCall` - millisecond since launch the last call completed at
- * - `summaries` - mapping of all captured stats: summaries.methodName -> method stats
- */
-export function getMetrics(): {
-    summaries: Record<string, Object>;
-    totalTime: number;
-    lastCompleteCall: any;
-};
-/**
- * Clears all collected metrics.
- */
-export function resetMetrics(): void;
-/**
- * Print extensive information on the dev console
- * max, min, average, total time for each method
- * and a table of individual calls
- *
- * @param {Object} [options]
- * @param {boolean} [options.raw=false] - setting this to true will print raw instead of human friendly times
- * Useful when you copy the printed table to excel and let excel do the number formatting
- * @param {'console'|'csv'|'json'|'string'} [options.format=console] The output format of this function
- * `string` is useful when __DEV__ is set to `false` as writing to the console is disabled, but the result of this
- * method would still get printed as output
- * @param {string[]} [options.methods] Print stats only for these method names
- * @returns {string|undefined}
- */
-export function printMetrics({ raw, format, methods }?: {
-    raw?: boolean | undefined;
-    format?: "string" | "console" | "csv" | "json" | undefined;
-    methods?: string[] | undefined;
-} | undefined): string | undefined;

package/dist/metrics/index.native.js

@@ -1,229 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.printMetrics = exports.resetMetrics = exports.getMetrics = exports.decorateWithMetrics = void 0;
-const underscore_1 = __importDefault(require("underscore"));
-const react_native_performance_1 = __importDefault(require("react-native-performance"));
-const MDTable_1 = __importDefault(require("../MDTable"));
-const decoratedAliases = new Set();
-/**
- * Capture a start mark to performance entries
- * @param {string} alias
- * @param {Array<*>} args
- * @returns {{name: string, startTime:number, detail: {args: [], alias: string}}}
- */
-function addMark(alias, args) {
-    return react_native_performance_1.default.mark(alias, { detail: { args, alias } });
-}
-/**
- * Capture a measurement between the start mark and now
- * @param {{name: string, startTime:number, detail: {args: []}}} startMark
- * @param {*} detail
- */
-function measureMarkToNow(startMark, detail) {
-    react_native_performance_1.default.measure(`${startMark.name} [${startMark.detail.args.toString()}]`, {
-        start: startMark.startTime,
-        end: react_native_performance_1.default.now(),
-        detail: Object.assign(Object.assign({}, startMark.detail), detail),
-    });
-}
-/**
- * Wraps a function with metrics capturing logic
- * @param {function} func
- * @param {String} [alias]
- * @returns {function} The wrapped function
- */
-function decorateWithMetrics(func, alias = func.name) {
-    if (decoratedAliases.has(alias)) {
-        throw new Error(`"${alias}" is already decorated`);
-    }
-    decoratedAliases.add(alias);
-    function decorated(...args) {
-        const mark = addMark(alias, args);
-        // eslint-disable-next-line no-invalid-this
-        const originalPromise = func.apply(this, args);
-        /*
-         * Then handlers added here are not affecting the original promise
-         * They create a separate chain that's not exposed (returned) to the original caller
-         * */
-        originalPromise
-            .then((result) => {
-            measureMarkToNow(mark, { result });
-        })
-            .catch((error) => {
-            measureMarkToNow(mark, { error });
-        });
-        return originalPromise;
-    }
-    return decorated;
-}
-exports.decorateWithMetrics = decorateWithMetrics;
-/**
- * Calculate the total sum of a given key in a list
- * @param {Array<Record<prop, Number>>} list
- * @param {string} prop
- * @returns {number}
- */
-function sum(list, prop) {
-    return underscore_1.default.reduce(list, (memo, next) => memo + next[prop], 0);
-}
-/**
- * Aggregates and returns benchmark information
- * @returns {{summaries: Record<string, Object>, totalTime: number, lastCompleteCall: *}}
- * An object with
- * - `totalTime` - total time spent by decorated methods
- * - `lastCompleteCall` - millisecond since launch the last call completed at
- * - `summaries` - mapping of all captured stats: summaries.methodName -> method stats
- */
-function getMetrics() {
-    const summaries = underscore_1.default.chain(react_native_performance_1.default.getEntriesByType('measure'))
-        .filter((entry) => entry.detail && decoratedAliases.has(entry.detail.alias))
-        .groupBy((entry) => entry.detail.alias)
-        .map((calls, methodName) => {
-        const total = sum(calls, 'duration');
-        const avg = total / calls.length || 0;
-        const max = underscore_1.default.max(calls, 'duration').duration || 0;
-        const min = underscore_1.default.min(calls, 'duration').duration || 0;
-        // Latest complete call (by end time) for all the calls made to the current method
-        const lastCall = underscore_1.default.max(calls, (call) => call.startTime + call.duration);
-        return [
-            methodName,
-            {
-                methodName,
-                total,
-                max,
-                min,
-                avg,
-                lastCall,
-                calls,
-            },
-        ];
-    })
-        .object() // Create a map like methodName -> StatSummary
-        .value();
-    const totalTime = sum(underscore_1.default.values(summaries), 'total');
-    // Latest complete call (by end time) of all methods up to this point
-    const lastCompleteCall = underscore_1.default.max(underscore_1.default.values(summaries), (summary) => summary.lastCall.startTime + summary.lastCall.duration).lastCall;
-    return {
-        totalTime,
-        summaries,
-        lastCompleteCall,
-    };
-}
-exports.getMetrics = getMetrics;
-/**
- * Convert milliseconds to human readable time
- * @param {number} millis
- * @param {boolean} [raw=false]
- * @returns {string|number}
- */
-function toDuration(millis, raw = false) {
-    if (raw) {
-        return millis;
-    }
-    const minute = 60 * 1000;
-    if (millis > minute) {
-        return `${(millis / minute).toFixed(1)}min`;
-    }
-    const second = 1000;
-    if (millis > second) {
-        return `${(millis / second).toFixed(2)}sec`;
-    }
-    return `${millis.toFixed(3)}ms`;
-}
-/**
- * Print extensive information on the dev console
- * max, min, average, total time for each method
- * and a table of individual calls
- *
- * @param {Object} [options]
- * @param {boolean} [options.raw=false] - setting this to true will print raw instead of human friendly times
- * Useful when you copy the printed table to excel and let excel do the number formatting
- * @param {'console'|'csv'|'json'|'string'} [options.format=console] The output format of this function
- * `string` is useful when __DEV__ is set to `false` as writing to the console is disabled, but the result of this
- * method would still get printed as output
- * @param {string[]} [options.methods] Print stats only for these method names
- * @returns {string|undefined}
- */
-function printMetrics({ raw = false, format = 'console', methods } = {}) {
-    const { totalTime, summaries, lastCompleteCall } = getMetrics();
-    const tableSummary = MDTable_1.default.factory({
-        heading: ['method', 'total time spent', 'max', 'min', 'avg', 'time last call completed', 'calls made'],
-        leftAlignedCols: [0],
-    });
-    /* Performance marks (startTimes) are relative to system uptime
-     * timeOrigin is the point at which the app started to init
-     * We use timeOrigin to display times relative to app launch time
-     * See: https://github.com/oblador/react-native-performance/issues/50 */
-    const timeOrigin = react_native_performance_1.default.timeOrigin;
-    const methodNames = underscore_1.default.isArray(methods) ? methods : underscore_1.default.keys(summaries);
-    const methodCallTables = underscore_1.default.chain(methodNames)
-        .filter((methodName) => summaries[methodName] && summaries[methodName].avg > 0)
-        .map((methodName) => {
-        const _a = summaries[methodName], { calls } = _a, methodStats = __rest(_a, ["calls"]);
-        tableSummary.addRow(methodName, toDuration(methodStats.total, raw), toDuration(methodStats.max, raw), toDuration(methodStats.min, raw), toDuration(methodStats.avg, raw), toDuration(methodStats.lastCall.startTime + methodStats.lastCall.duration - timeOrigin, raw), calls.length);
-        return MDTable_1.default.factory({
-            title: methodName,
-            heading: ['start time', 'end time', 'duration', 'args'],
-            leftAlignedCols: [3],
-            rows: underscore_1.default.map(calls, (call) => [
-                toDuration(call.startTime - react_native_performance_1.default.timeOrigin, raw),
-                toDuration(call.startTime + call.duration - timeOrigin, raw),
-                toDuration(call.duration, raw),
-                underscore_1.default.map(call.detail.args, String).join(', ').slice(0, 60), // Restrict cell width to 60 chars max
-            ]),
-        });
-    })
-        .value();
-    if (/csv|json|string/i.test(format)) {
-        const allTables = [tableSummary, ...methodCallTables];
-        return underscore_1.default.map(allTables, (table) => {
-            switch (format.toLowerCase()) {
-                case 'csv':
-                    return table.toCSV();
-                case 'json':
-                    return table.toJSON();
-                default:
-                    return table.toString();
-            }
-        }).join('\n\n');
-    }
-    const lastComplete = lastCompleteCall && toDuration(lastCompleteCall.startTime + lastCompleteCall.duration - timeOrigin, raw);
-    const mainOutput = ['### Onyx Benchmark', `  - Total: ${toDuration(totalTime, raw)}`, `  - Last call finished at: ${lastComplete || 'N/A'}`, '', tableSummary.toString()];
-    /* eslint-disable no-console */
-    console.info(mainOutput.join('\n'));
-    methodCallTables.forEach((table) => {
-        console.groupCollapsed(table.getTitle());
-        console.info(table.toString());
-        console.groupEnd();
-    });
-    /* eslint-enable */
-}
-exports.printMetrics = printMetrics;
-/**
- * Clears all collected metrics.
- */
-function resetMetrics() {
-    const { summaries } = getMetrics();
-    underscore_1.default.chain(summaries)
-        .map((summary) => summary.calls)
-        .flatten()
-        .each((measure) => {
-        react_native_performance_1.default.clearMarks(measure.detail.alias);
-        react_native_performance_1.default.clearMeasures(measure.name);
-    });
-}
-exports.resetMetrics = resetMetrics;