refactor: unify storage/providers (for further InMemory storage integration) [1/3]

jestSetup.js

@@ -1,7 +1,7 @@
 jest.mock('./lib/storage');
-jest.mock('./lib/storage/NativeStorage', () => require('./lib/storage/__mocks__'));
-jest.mock('./lib/storage/WebStorage', () => require('./lib/storage/__mocks__'));
-jest.mock('./lib/storage/providers/IDBKeyVal', () => require('./lib/storage/__mocks__'));
+jest.mock('./lib/storage/platforms/index.native', () => require('./lib/storage/__mocks__'));
+jest.mock('./lib/storage/platforms/index', () => require('./lib/storage/__mocks__'));
+jest.mock('./lib/storage/providers/IDBKeyValProvider', () => require('./lib/storage/__mocks__'));
 
 jest.mock('react-native-device-info', () => ({getFreeDiskStorage: () => {}}));
 jest.mock('react-native-quick-sqlite', () => ({

lib/Onyx.js

@@ -1563,6 +1563,16 @@ function init({
     shouldSyncMultipleInstances = Boolean(global.localStorage),
     debugSetState = false,
 } = {}) {
+    Storage.init();
+
+    if (shouldSyncMultipleInstances) {
+        Storage.keepInstancesSync((key, value) => {
+            const prevValue = cache.getValue(key, false);
+            cache.set(key, value);
+            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
@@ -1599,14 +1609,6 @@ function init({
 
     // Initialize all of our keys with data provided then give green light to any pending connections
     Promise.all([addAllSafeEvictionKeysToRecentlyAccessedList(), initializeWithDefaultKeyStates()]).then(deferredInitTask.resolve);
-
-    if (shouldSyncMultipleInstances && _.isFunction(Storage.keepInstancesSync)) {
-        Storage.keepInstancesSync((key, value) => {
-            const prevValue = cache.getValue(key, false);
-            cache.set(key, value);
-            keyChanged(key, value, prevValue);
-        });
-    }
 }
 
 const Onyx = {

lib/storage/InstanceSync/index.ts

@@ -0,0 +1,16 @@
+import NOOP from 'lodash/noop';
+
+/**
+ *  This is used to keep multiple browser tabs in sync, therefore only needed on web
+ *  On native platforms, we omit this syncing logic by setting this to mock implementation.
+ */
+const InstanceSync = {
+    init: NOOP,
+    setItem: NOOP,
+    removeItem: NOOP,
+    removeItems: NOOP,
+    mergeItem: NOOP,
+    clear: <T extends () => void>(callback: T) => Promise.resolve(callback()),
+};
+
+export default InstanceSync;

lib/storage/InstanceSync/index.web.ts

@@ -0,0 +1,65 @@
+/* eslint-disable no-invalid-this */
+/**
+ * The InstancesSync object provides data-changed events like the ones that exist
+ * when using LocalStorage APIs in the browser. These events are great because multiple tabs can listen for when
+ * data changes and then stay up-to-date with everything happening in Onyx.
+ */
+import type {KeyList, Key, OnStorageKeyChanged, Value} from '../providers/types';
+
+const SYNC_ONYX = 'SYNC_ONYX';
+
+/**
+ * Raise an event through `localStorage` to let other tabs know a value changed
+ * @param {String} onyxKey
+ */
+function raiseStorageSyncEvent(onyxKey: Key) {
+    global.localStorage.setItem(SYNC_ONYX, onyxKey);
+    global.localStorage.removeItem(SYNC_ONYX);
+}
+
+function raiseStorageSyncManyKeysEvent(onyxKeys: KeyList) {
+    onyxKeys.forEach((onyxKey) => {
+        raiseStorageSyncEvent(onyxKey);
+    });
+}
+
+const InstanceSync = {
+    /**
+     * @param {Function} onStorageKeyChanged Storage synchronization mechanism keeping all opened tabs in sync
+     */
+    init: (onStorageKeyChanged: OnStorageKeyChanged) => {
+        // This listener will only be triggered by events coming from other tabs
+        global.addEventListener('storage', (event) => {
+            // Ignore events that don't originate from the SYNC_ONYX logic
+            if (event.key !== SYNC_ONYX || !event.newValue) {
+                return;
+            }
+
+            const onyxKey = event.newValue;
+            // @ts-expect-error `this` will be substituted later in actual function call
+            this.getItem(onyxKey).then((value: Value) => onStorageKeyChanged(onyxKey, value));
+        });
+    },
+    setItem: raiseStorageSyncEvent,
+    removeItem: raiseStorageSyncEvent,
+    removeItems: raiseStorageSyncManyKeysEvent,
+    mergeItem: raiseStorageSyncEvent,
+    clear: (clearImplementation: () => void) => {
+        let allKeys: KeyList;
+
+        // The keys must be retrieved before storage is cleared or else the list of keys would be empty
+        // @ts-expect-error `this` will be substituted later in actual function call
+        return this.getAllKeys()
+            .then((keys: KeyList) => {
+                allKeys = keys;
+            })
+            .then(() => clearImplementation())
+            .then(() => {
+                // Now that storage is cleared, the storage sync event can happen which is a more atomic action
+                // for other browser tabs
+                raiseStorageSyncManyKeysEvent(allKeys);
+            });
+    },
+};
+
+export default InstanceSync;

lib/storage/__mocks__/index.ts

@@ -10,6 +10,7 @@ const set = jest.fn((key, value) => {
 });
 
 const idbKeyvalMock: StorageProvider = {
+    init: () => undefined,
     setItem(key, value) {
         return set(key, value);
     },
@@ -60,10 +61,12 @@ const idbKeyvalMock: StorageProvider = {
     },
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setMemoryOnlyKeys() {},
+    keepInstancesSync: () => undefined,
 };
 
 const idbKeyvalMockSpy = {
     idbKeyvalSet: set,
+    init: jest.fn(idbKeyvalMock.init),
     setItem: jest.fn(idbKeyvalMock.setItem),
     getItem: jest.fn(idbKeyvalMock.getItem),
     removeItem: jest.fn(idbKeyvalMock.removeItem),
@@ -80,6 +83,7 @@ const idbKeyvalMockSpy = {
     }),
     getDatabaseSize: jest.fn(idbKeyvalMock.getDatabaseSize),
     setMemoryOnlyKeys: jest.fn(idbKeyvalMock.setMemoryOnlyKeys),
+    keepInstancesSync: jest.fn(idbKeyvalMock.keepInstancesSync),
 };
 
 export default idbKeyvalMockSpy;

lib/storage/index.ts

@@ -1,3 +1,137 @@
-import WebStorage from './WebStorage';
+import PlatformStorage from './platforms';
+import InstanceSync from './InstanceSync';
+import type StorageProvider from './providers/types';
 
-export default WebStorage;
+const provider = PlatformStorage;
+let shouldKeepInstancesSync = false;
+
+type Storage = {
+    getStorageProvider: () => StorageProvider;
+} & StorageProvider;
+
+const Storage: Storage = {
+    /**
+     * Returns the storage provider currently in use
+     */
+    getStorageProvider() {
+        return provider;
+    },
+
+    /**
+     * Initializes all providers in the list of storage providers
+     * and enables fallback providers if necessary
+     */
+    init() {
+        provider.init();
+    },
+
+    /**
+     * Get the value of a given key or return `null` if it's not available
+     */
+    getItem: (key) => provider.getItem(key),
+
+    /**
+     * Get multiple key-value pairs for the give array of keys in a batch
+     */
+    multiGet: (keys) => provider.multiGet(keys),
+
+    /**
+     * Sets the value for a given key. The only requirement is that the value should be serializable to JSON string
+     */
+    setItem: (key, value) => {
+        const promise = provider.setItem(key, value);
+
+        if (shouldKeepInstancesSync) {
+            return promise.then(() => InstanceSync.setItem(key));
+        }
+
+        return promise;
+    },
+
+    /**
+     * Stores multiple key-value pairs in a batch
+     */
+    multiSet: (pairs) => provider.multiSet(pairs),
+
+    /**
+     * Merging an existing value with a new one
+     */
+    mergeItem: (key, changes, modifiedData) => {
+        const promise = provider.mergeItem(key, changes, modifiedData);
+
+        if (shouldKeepInstancesSync) {
+            return promise.then(() => InstanceSync.mergeItem(key));
+        }
+
+        return promise;
+    },
+
+    /**
+     * Multiple merging of existing and new values in a batch
+     * This function also removes all nested null values from an object.
+     */
+    multiMerge: (pairs) => provider.multiMerge(pairs),
+
+    /**
+     * Removes given key and its value
+     */
+    removeItem: (key) => {
+        const promise = provider.removeItem(key);
+
+        if (shouldKeepInstancesSync) {
+            return promise.then(() => InstanceSync.removeItem(key));
+        }
+
+        return promise;
+    },
+
+    /**
+     * Remove given keys and their values
+     */
+    removeItems: (keys) => {
+        const promise = provider.removeItems(keys);
+
+        if (shouldKeepInstancesSync) {
+            return promise.then(() => InstanceSync.removeItems(keys));
+        }
+
+        return promise;
+    },
+
+    /**
+     * Clears everything
+     */
+    clear: () => {
+        if (shouldKeepInstancesSync) {
+            return InstanceSync.clear(() => provider.clear());
+        }
+
+        return provider.clear();
+    },
+
+    // This is a noop for now in order to keep clients from crashing see https://github.com/Expensify/Expensify/issues/312438
+    setMemoryOnlyKeys: () => provider.setMemoryOnlyKeys(),
+
+    /**
+     * Returns all available keys
+     */
+    getAllKeys: () => provider.getAllKeys(),
+
+    /**
+     * Gets the total bytes of the store
+     */
+    getDatabaseSize: () => provider.getDatabaseSize(),
+
+    /**
+     * @param onStorageKeyChanged - Storage synchronization mechanism keeping all opened tabs in sync (web only)
+     */
+    keepInstancesSync(onStorageKeyChanged) {
+        // If InstanceSync is null, it means we're on a native platform and we don't need to keep instances in sync
+        if (InstanceSync == null) return;
+
+        shouldKeepInstancesSync = true;
+        InstanceSync.init(onStorageKeyChanged);
+    },
+};
+
+export default Storage;

lib/storage/platforms/index.native.ts

@@ -0,0 +1,3 @@
+import NativeStorage from '../providers/SQLiteProvider';
+
+export default NativeStorage;

lib/storage/platforms/index.ts

@@ -0,0 +1,3 @@
+import WebStorage from '../providers/IDBKeyValProvider';
+
+export default WebStorage;