From 968b07632fe27e088b92f515eb49cd4d27db29d6 Mon Sep 17 00:00:00 2001 From: Arafat Zahan Date: Thu, 6 May 2021 13:02:29 +0600 Subject: [PATCH] feat: add support for react-native --- package.json | 7 +++++-- src/index.tsx | 8 ++++---- src/utils/storage/index.native.ts | 13 +++++++++++++ src/utils/storage/index.ts | 1 + yarn.lock | 19 +++++++++++++++++++ 5 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 src/utils/storage/index.native.ts create mode 100644 src/utils/storage/index.ts diff --git a/package.json b/package.json index da37527..fcb510d 100644 --- a/package.json +++ b/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,6 +23,8 @@ "author": "Arafat Zahan", "license": "MIT", "peerDependencies": { + "@react-native-async-storage/async-storage": ">=1.15", + "localforage": ">=1.9", "mobx-state-tree": ">=4", "react": ">=16.8" }, @@ -30,6 +32,7 @@ "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,6 +45,7 @@ "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", @@ -49,7 +53,6 @@ "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" diff --git a/src/index.tsx b/src/index.tsx index d228c1a..acebecf 100644 --- a/src/index.tsx +++ b/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 = ( // Effects will only run on client side. useAsyncEffect( async (isMounted) => { - const data = await localforage.getItem(storageKey); + const data = await getItem(storageKey); if (data && isMounted()) { try { logging && console.log('Hydrating Store from Storage'); @@ -78,7 +78,7 @@ const createPersistentStore = ( } 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 = ( const saveSnapshot = debounce((snapshot) => { logging && console.log('Saving Snapshot to Storage'); - localforage.setItem(storageKey, snapshot); + setItem(storageKey, snapshot); }, writeDelay); return onSnapshot(mstStore.current, (snapshot) => { diff --git a/src/utils/storage/index.native.ts b/src/utils/storage/index.native.ts new file mode 100644 index 0000000..3ffc47b --- /dev/null +++ b/src/utils/storage/index.native.ts @@ -0,0 +1,13 @@ +import AsyncStorage from '@react-native-async-storage/async-storage'; + +export const getItem = async (key: string): Promise => { + 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); diff --git a/src/utils/storage/index.ts b/src/utils/storage/index.ts new file mode 100644 index 0000000..67e73fc --- /dev/null +++ b/src/utils/storage/index.ts @@ -0,0 +1 @@ +export { getItem, setItem, removeItem } from 'localforage'; diff --git a/yarn.lock b/yarn.lock index efd4308..6df8380 100644 --- a/yarn.lock +++ b/yarn.lock @@ -149,6 +149,13 @@ "@nodelib/fs.scandir" "2.1.4" fastq "^1.6.0" +"@react-native-async-storage/async-storage@1.15.4": + 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"