File handling POC

__mocks__/lib/storage/index.js

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

lib/Onyx.js

@@ -1,7 +1,8 @@
 import _ from 'underscore';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import Str from 'expensify-common/lib/str';
 import lodashMerge from 'lodash/merge';
+import Storage from './storage';
+
 import {registerLogger, logInfo, logAlert} from './Logger';
 import cache from './OnyxCache';
 import createDeferredTask from './createDeferredTask';
@@ -53,11 +54,10 @@ function get(key) {
     }
 
     // Otherwise retrieve the value from storage and capture a promise to aid concurrent usages
-    const promise = AsyncStorage.getItem(key)
+    const promise = Storage.getItem(key)
         .then((val) => {
-            const parsed = val && JSON.parse(val);
-            cache.set(key, parsed);
-            return parsed;
+            cache.set(key, val);
+            return val;
         })
         .catch(err => logInfo(`Unable to get item from persistent storage. Key: ${key} Error: ${err}`));
 
@@ -84,7 +84,7 @@ function getAllKeys() {
     }
 
     // Otherwise retrieve the keys from storage and capture a promise to aid concurrent usages
-    const promise = AsyncStorage.getAllKeys()
+    const promise = Storage.getAllKeys()
         .then((keys) => {
             _.each(keys, key => cache.addKey(key));
             return keys;
@@ -304,8 +304,8 @@ function keysChanged(collectionKey, collection) {
  * When a key change happens, search for any callbacks matching the key or collection key and trigger those callbacks
  *
  * @private
- * @param {string} key
- * @param {mixed} data
+ * @param {String} key
+ * @param {*} data
  */
 function keyChanged(key, data) {
     // Add or remove this key from the recentlyAccessedKeys lists
@@ -483,7 +483,7 @@ function remove(key) {
     // Optimistically inform subscribers on the next tick
     Promise.resolve().then(() => keyChanged(key, null));
 
-    return AsyncStorage.removeItem(key);
+    return Storage.removeItem(key);
 }
 
 /**
@@ -534,20 +534,20 @@ function set(key, value) {
     Promise.resolve().then(() => keyChanged(key, value));
 
     // Write the thing to persistent storage, which will trigger a storage event for any other tabs open on this domain
-    return AsyncStorage.setItem(key, JSON.stringify(value))
+    return Storage.setItem(key, value)
         .catch(error => evictStorageAndRetry(error, set, key, value));
 }
 
 /**
- * AsyncStorage expects array like: [["@MyApp_user", "value_1"], ["@MyApp_key", "value_2"]]
- * This method transforms an object like {'@MyApp_user': 'myUserValue', '@MyApp_key': 'myKeyValue'}
+ * Storage expects array like: [["@MyApp_user", value_1], ["@MyApp_key", value_2]]
+ * This method transforms an object like {'@MyApp_user': myUserValue, '@MyApp_key': myKeyValue}
  * to an array of key-value pairs in the above format
  * @private
  * @param {Record} data
- * @return {Array} an array of stringified key - value pairs
+ * @return {Array<[key, value]>} an array of key - value pairs
  */
 function prepareKeyValuePairsForStorage(data) {
-    return _.keys(data).map(key => [key, JSON.stringify(data[key])]);
+    return _.map(data, (value, key) => [key, value]);
 }
 
 /**
@@ -567,7 +567,7 @@ function multiSet(data) {
         Promise.resolve().then(() => keyChanged(key, val));
     });
 
-    return AsyncStorage.multiSet(keyValuePairs)
+    return Storage.multiSet(keyValuePairs)
         .catch(error => evictStorageAndRetry(error, multiSet, data));
 }
 
@@ -669,12 +669,9 @@ function merge(key, value) {
  * @returns {Promise}
  */
 function initializeWithDefaultKeyStates() {
-    return AsyncStorage.multiGet(_.keys(defaultKeyStates))
+    return Storage.multiGet(_.keys(defaultKeyStates))
         .then((pairs) => {
-            const asObject = _.chain(pairs)
-                .map(([key, val]) => [key, val && JSON.parse(val)])
-                .object()
-                .value();
+            const asObject = _.object(pairs);
 
             const merged = lodashMerge(asObject, defaultKeyStates);
             cache.merge(merged);
@@ -695,7 +692,7 @@ function clear() {
                 cache.set(key, null);
             });
         })
-        .then(AsyncStorage.clear)
+        .then(Storage.clear)
         .then(initializeWithDefaultKeyStates);
 }
 
@@ -740,11 +737,11 @@ function mergeCollection(collectionKey, collection) {
             // New keys will be added via multiSet while existing keys will be updated using multiMerge
             // This is because setting a key that doesn't exist yet with multiMerge will throw errors
             if (keyValuePairsForExistingCollection.length > 0) {
-                promises.push(AsyncStorage.multiMerge(keyValuePairsForExistingCollection));
+                promises.push(Storage.multiMerge(keyValuePairsForExistingCollection));
             }
 
             if (keyValuePairsForNewCollection.length > 0) {
-                promises.push(AsyncStorage.multiSet(keyValuePairsForNewCollection));
+                promises.push(Storage.multiSet(keyValuePairsForNewCollection));
             }
 
             // Merge original data to cache
@@ -768,13 +765,12 @@ function mergeCollection(collectionKey, collection) {
  * (individual or collection patterns) that when provided to Onyx are flagged
  * as "safe" for removal. Any components subscribing to these keys must also
  * implement a canEvict option. See the README for more info.
- * @param {Function} [options.registerStorageEventListener=() => {}] a callback when a storage event happens.
- * This applies to web platforms where the local storage emits storage events
- * across all open tabs and allows Onyx to stay in sync across all open tabs.
  * @param {Number} [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 {Boolean} [options.captureMetrics] Enables Onyx benchmarking and exposes the get/print/reset functions
+ * @param {Boolean} [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)
  *
  * @example
  * Onyx.init({
@@ -788,9 +784,9 @@ function init({
     keys = {},
     initialKeyStates = {},
     safeEvictionKeys = [],
-    registerStorageEventListener = (() => {}),
     maxCachedKeysCount = 55,
     captureMetrics = false,
+    shouldSyncMultipleInstances = Boolean(global.localStorage),
 } = {}) {
     if (captureMetrics) {
         // The code here is only bundled and applied when the captureMetrics is set
@@ -818,11 +814,12 @@ function init({
     ])
         .then(deferredInitTask.resolve);
 
-    // Update any key whose value changes in storage
-    registerStorageEventListener((key, newValue) => {
-        cache.set(key, newValue);
-        keyChanged(key, newValue);
-    });
+    if (shouldSyncMultipleInstances && _.isFunction(Storage.keepInstancesSync)) {
+        Storage.keepInstancesSync((key, value) => {
+            cache.set(key, value);
+            keyChanged(key, value);
+        });
+    }
 }
 
 const Onyx = {

lib/storage/NativeStorage.js

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

lib/storage/WebStorage.js

@@ -0,0 +1,50 @@
+import _ from 'underscore';
+import Storage from './providers/LocalForage';
+
+const SYNC_ONYX = 'SYNC_ONYX';
+
+/**
+ * Raise an event thorough `localStorage` to let other tabs know a value changed
+ * @param {String} onyxKey
+ */
+function raiseStorageSyncEvent(onyxKey) {
+    global.localStorage.setItem(SYNC_ONYX, onyxKey);
+    global.localStorage.removeItem(SYNC_ONYX, onyxKey);
+}
+
+const webStorage = {
+    ...Storage,
+
+    /**
+     * Storage synchronization mechanism keeping all opened tabs in sync
+     * @param {function(key: String, data: *)} onStorageKeyChanged
+     */
+    keepInstancesSync(onStorageKeyChanged) {
+        // Override set, remove and clear to raise storage events that we intercept in other tabs
+        this.setItem = (key, value) => Storage.setItem(key, value)
+            .then(() => raiseStorageSyncEvent(key));
+
+        this.removeItem = key => Storage.removeItem(key)
+            .then(() => raiseStorageSyncEvent(key));
+
+        // If we just call Storage.clear other tabs will have no idea which keys were available previously
+        // so that they can call keysChanged for them. That's why we iterate and remove keys one by one
+        this.clear = () => Storage.getAllKeys()
+            .then(keys => _.map(keys, key => this.removeItem(key)))
+            .then(tasks => Promise.all(tasks));
+
+        // 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;
+            Storage.getItem(onyxKey)
+                .then(value => onStorageKeyChanged(onyxKey, value));
+        });
+    },
+};
+
+export default webStorage;

lib/storage/index.js

@@ -0,0 +1,8 @@
+import {Platform} from 'react-native';
+
+const Storage = Platform.select({
+    default: () => require('./WebStorage').default,
+    native: () => require('./NativeStorage').default,
+})();
+
+export default Storage;

lib/storage/providers/AsyncStorage.js

@@ -0,0 +1,97 @@
+/**
+ * The AsyncStorage provider stores everything in a key/value store by
+ * converting the value to a JSON string
+ */
+
+import _ from 'underscore';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+/**
+ * Values other than null and undefined should be stringified before
+ * they are saved in storage
+ * @param {*} value
+ * @returns {string|null}
+ */
+function prepareValueForStorage(value) {
+    if (_.isUndefined(value) || _.isNull(value)) {
+        return value;
+    }
+
+    return JSON.stringify(value);
+}
+
+const provider = {
+    /**
+     * Get the value of a given key or return `null` if it's not available in storage
+     * @param {String} key
+     * @return {Promise<*>}
+     */
+    getItem(key) {
+        return AsyncStorage.getItem(key)
+            .then((value) => {
+                const parsed = value && JSON.parse(value);
+                return parsed;
+            });
+    },
+
+    /**
+     * Get multiple key-value pairs for the give array of keys in a batch
+     * @param {String[]} keys
+     * @return {Promise<Array<[key, value]>>}
+     */
+    multiGet(keys) {
+        return AsyncStorage.multiGet(keys)
+            .then(pairs => _.map(pairs, ([key, value]) => [key, value && JSON.parse(value)]));
+    },
+
+    /**
+     * Sets the value for a given key. The only requirement is that the value should be serializable to JSON string
+     * @param {String} key
+     * @param {*} value
+     * @return {Promise<void>}
+     */
+    setItem(key, value) {
+        return AsyncStorage.setItem(key, prepareValueForStorage(value));
+    },
+
+    /**
+     * Stores multiple key-value pairs in a batch
+     * @param {Array<[key, value]>} pairs
+     * @return {Promise<void>}
+     */
+    multiSet(pairs) {
+        const stringPairs = _.map(pairs, ([key, value]) => [key, prepareValueForStorage(value)]);
+        return AsyncStorage.multiSet(stringPairs);
+    },
+
+    /**
+     * Multiple merging of existing and new values in a batch
+     * @param {Array<[key, value]>} pairs
+     * @return {Promise<void>}
+     */
+    multiMerge(pairs) {
+        const stringPairs = _.map(pairs, ([key, value]) => [key, prepareValueForStorage(value)]);
+        return AsyncStorage.multiMerge(stringPairs);
+    },
+
+    /**
+     * Returns all keys available in storage
+     * @returns {Promise<String[]>}
+     */
+    getAllKeys: AsyncStorage.getAllKeys,
+
+    /**
+     * Remove given key and it's value from storage
+     * @param {String} key
+     * @returns {Promise<void>}
+     */
+    removeItem: AsyncStorage.removeItem,
+
+    /**
+     * Clear absolutely everything from storage
+     * @returns {Promise<void>}
+     */
+    clear: AsyncStorage.clear,
+};
+
+export default provider;