Merge pull request #479 from BartoszGrajdek/ts-migration/remove-metrics

Remove metrics

lib/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.

lib/Onyx.js

@@ -5,7 +5,7 @@ import * as Logger from './Logger';
 import cache from './OnyxCache';
 import * as Str from './Str';
 import createDeferredTask from './createDeferredTask';
-import * as PerformanceUtils from './metrics/PerformanceUtils';
+import * as PerformanceUtils from './PerformanceUtils';
 import Storage from './storage';
 import utils from './utils';
 import unstable_batchedUpdates from './batch';
@@ -1554,15 +1554,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.init();
 
     if (shouldSyncMultipleInstances) {
@@ -1573,12 +1565,6 @@ function init({
         });
     }
 
-    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);
     }
@@ -1632,42 +1618,4 @@ const Onyx = {
     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;
-}
-
 export default Onyx;

lib/PerformanceUtils.ts

@@ -0,0 +1,66 @@
+import lodashTransform from 'lodash/transform';
+import {deepEqual} from 'fast-equals';
+
+type UnknownObject = Record<string, unknown>;
+
+type LogParams = {
+    keyThatChanged?: string;
+    difference?: unknown;
+    previousValue?: unknown;
+    newValue?: unknown;
+};
+
+type Mapping = Record<string, unknown> & {
+    key: string;
+    displayName: string;
+};
+
+let debugSetState = false;
+
+function setShouldDebugSetState(debug: boolean) {
+    debugSetState = debug;
+}
+
+/**
+ * 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.
+ */
+function diffObject<TObject extends UnknownObject, TBase extends UnknownObject>(object: TObject, base: TBase): UnknownObject {
+    return lodashTransform(object, (result: UnknownObject, value, key) => {
+        if (deepEqual(value, base[key])) {
+            return;
+        }
+
+        if (typeof value === 'object' && typeof base[key] === 'object') {
+            // eslint-disable-next-line no-param-reassign
+            result[key] = diffObject(value as UnknownObject, base[key] as UnknownObject);
+        } 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.
+ */
+function logSetStateCall(mapping: Mapping, previousValue: unknown, newValue: unknown, caller: string, keyThatChanged: string) {
+    if (!debugSetState) {
+        return;
+    }
+
+    const logParams: LogParams = {};
+    if (keyThatChanged) {
+        logParams.keyThatChanged = keyThatChanged;
+    }
+    if (newValue && previousValue && typeof newValue === 'object' && typeof previousValue === 'object') {
+        logParams.difference = diffObject(previousValue as UnknownObject, newValue as UnknownObject);
+    } else {
+        logParams.previousValue = previousValue;
+        logParams.newValue = newValue;
+    }
+
+    console.debug(`[Onyx-Debug] ${mapping.displayName} setState() called. Subscribed to key '${mapping.key}' (${caller})`, logParams);
+}
+
+export {logSetStateCall, setShouldDebugSetState};