feat: add support for react-native

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mst-persistent-store",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Mobx State Tree Persistant Store Provider Component and Consumer Hook writen in TypeScript",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -23,13 +23,16 @@
   "author": "Arafat Zahan",
   "license": "MIT",
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=1.15",
+    "localforage": ">=1.9",
     "mobx-state-tree": ">=4",
     "react": ">=16.8"
   },
   "scripts": {
     "prepare": "rm -rf ./dist/* && tsc && tsc -p ./tsconfig.esm.json"
   },
   "devDependencies": {
+    "@react-native-async-storage/async-storage": "1.15.4",
     "@types/node": "14.14.41",
     "@types/react": "17.0.3",
     "@typescript-eslint/eslint-plugin": "4.22.0",
@@ -42,14 +45,14 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",
+    "localforage": "1.9.0",
     "mobx": "6.3.0",
     "mobx-state-tree": "5.0.1",
     "prettier": "2.2.1",
     "react": "17.0.2",
     "typescript": "4.2.4"
   },
   "dependencies": {
-    "localforage": "1.9.0",
     "mobx-devtools-mst": "0.9.30",
     "type-fest": "1.0.2",
     "use-async-effect": "2.2.3"

src/index.tsx

@@ -1,10 +1,10 @@
-import localforage from 'localforage';
 import { applySnapshot, IAnyModelType, Instance, onSnapshot, SnapshotIn } from 'mobx-state-tree';
 import React, { createContext, useContext, useRef } from 'react';
 import { PartialDeep } from 'type-fest';
 import useAsyncEffect from 'use-async-effect';
 import { debounce } from './utils/debounce';
 import merge from './utils/merge';
+import { getItem, removeItem, setItem } from './utils/storage';
 
 export interface PersistentStoreOptions {
   /**
@@ -69,7 +69,7 @@ const createPersistentStore = <T extends IAnyModelType>(
     // Effects will only run on client side.
     useAsyncEffect(
       async (isMounted) => {
-        const data = await localforage.getItem<any>(storageKey);
+        const data = await getItem<any>(storageKey);
         if (data && isMounted()) {
           try {
             logging && console.log('Hydrating Store from Storage');
@@ -78,7 +78,7 @@ const createPersistentStore = <T extends IAnyModelType>(
           } catch (error) {
             console.error(error);
             logging && console.log('Failed to hydrate store. Throwing away data from stogare.');
-            await localforage.removeItem(storageKey);
+            await removeItem(storageKey);
           }
         }
 
@@ -95,7 +95,7 @@ const createPersistentStore = <T extends IAnyModelType>(
         const saveSnapshot = debounce((snapshot) => {
           logging && console.log('Saving Snapshot to Storage');
 
-          localforage.setItem(storageKey, snapshot);
+          setItem(storageKey, snapshot);
         }, writeDelay);
 
         return onSnapshot(mstStore.current, (snapshot) => {

src/utils/storage/index.native.ts

@@ -0,0 +1,13 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const getItem = async <T>(key: string): Promise<T | null> => {
+  const item = await AsyncStorage.getItem(key);
+  return item ? JSON.parse(item) : null;
+};
+
+export const setItem = async (key: string, value: any) => {
+  const data = JSON.stringify(value);
+  return AsyncStorage.setItem(key, data);
+};
+
+export const removeItem = async (key: string) => AsyncStorage.removeItem(key);

src/utils/storage/index.ts

@@ -0,0 +1 @@
+export { getItem, setItem, removeItem } from 'localforage';

yarn.lock

@@ -149,6 +149,13 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
+"@react-native-async-storage/[email protected]":
+  version "1.15.4"
+  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.15.4.tgz#cdba464ca3bb9f10ec538342cbf2520c06f453ab"
+  integrity sha512-pC0MS6UBuv/YiVAxtzi7CgUed8oCQNYMtGt0yb/I9fI/BWTiJK5cj4YtW2XtL95K5IuvPX/6uGWaouZ8KqXwdg==
+  dependencies:
+    deep-assign "^3.0.0"
+
 "@types/json-schema@^7.0.3":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
@@ -516,6 +523,13 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "2.1.2"
 
+deep-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-3.0.0.tgz#c8e4c4d401cba25550a2f0f486a2e75bc5f219a2"
+  integrity sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==
+  dependencies:
+    is-obj "^1.0.0"
+
 deep-is@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -1113,6 +1127,11 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
+
 is-regex@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"