polemius · polemius · Feb 2, 2021 · Jan 26, 2021 · Jan 25, 2021 · Jan 25, 2021
diff --git a/index.d.ts b/index.d.ts
diff --git a/index.js b/index.js
diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   // if you're also using typescript
-  // preset: "ts-jest",
+  preset: 'ts-jest',
   testEnvironment: 'jsdom',
   verbose: true,
   // registers babel.config.js with jest

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@testing-library/react": "^11.2.3",
+    "@types/jest": "^26.0.20",
     "babel-jest": "^26.6.3",
     "clean-publish": "^1.1.8",
     "dual-publish": "^1.0.3",
@@ -42,7 +43,9 @@
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "recoil": "^0.1.2"
+    "recoil": "^0.1.2",
+    "ts-jest": "^26.5.0",
+    "typescript": "^4.1.3"
   },
   "size-limit": [
     {

diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,75 @@
+import { AtomEffect } from 'recoil'
+
+export interface PersistConfiguration {
+  key?: string
+  storage?: Storage
+}
+
+/**
+ * Recoil module to persist state to storage
+ *
+ * @param config Optional configuration object
+ * @param config.key Used as key in local storage, defaults to `recoil-persist`
+ * @param config.storage Local storage to use, defaults to `localStorage`
+ */
+export const recoilPersist = (config: PersistConfiguration = {}): { persistAtom: AtomEffect<any> } => {
+  const {
+    key = 'recoil-persist',
+    storage = localStorage,
+  } = config
+
+  if (typeof window === 'undefined') {
+    return {
+      persistAtom: () => {
+      },
+    }
+  }
+
+  const persistAtom: AtomEffect<any> = ({ onSet, node, trigger, setSelf }) => {
+    if (trigger === 'get') {
+      if (containsKey(node.key))
+        setSelf(retrieveValue(node.key))
+    }
+    onSet(persistValue(node.key))
+  }
+
+  const containsKey = (key: string): boolean => {
+    const state = getState()
+    return state.hasOwnProperty(key)
+  }
+
+  const retrieveValue = (key: string): any => {
+    const state = getState()
+    return state[key]
+  }
+
+  const persistValue = (name: string) => (newValue: any): void => {
+    let state = getState()
+    state[name] = newValue
+    setState(state)
+  }
+
+  const getState = (): any => {
+    const toParse = storage.getItem(key)
+    if (toParse) {
+      try {
+        return JSON.parse(toParse)
+      } catch (e) {
+        console.error(e)
+        return {}
+      }
+    } else {
+      return {}
+    }
+  }
+
+  const setState = (state: any): void => {
+    try {
+      storage.setItem(key, JSON.stringify(state))
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  return { persistAtom }
+}
diff --git a/test/demo/index.js b/test/demo/index.js
@@ -1,61 +1,53 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { atom, useRecoilState, RecoilRoot, atomFamily } from 'recoil'
-import { recoilPersist } from '../../index'
+import { atom, atomFamily, RecoilRoot, useRecoilState } from 'recoil'
+import { recoilPersist } from '../../src'
 
-const { RecoilPersist, updateState } = recoilPersist(['count', 'count3'])
+const { persistAtom } = recoilPersist({ key: 'abc1234' })
 
 const counterState = atom({
   key: 'count',
   default: 0,
-  persistence_UNSTABLE: {
-    type: 'log',
-  },
+  effects_UNSTABLE: [persistAtom],
 })
 
-const counterState2 = atom({
-  key: 'count2',
+const counterFamily = atomFamily({
+  key: 'countFamily',
   default: 0,
-  persistence_UNSTABLE: {
-    type: 'log',
-  },
+  effects_UNSTABLE: [persistAtom],
 })
 
-const counterFamily = atomFamily({
-  key: 'count3',
+const counterState4 = atom({
+  key: 'count4',
   default: 0,
-  persistence_UNSTABLE: {
-    type: 'log',
-  },
 })
 
 export default function App() {
   const [count, setCount] = useRecoilState(counterState)
-  const [count2, setCount2] = useRecoilState(counterState2)
+  const [count2, setCount2] = useRecoilState(counterFamily('2'))
   const [count3, setCount3] = useRecoilState(counterFamily('3'))
-  const [count4, setCount4] = useRecoilState(counterFamily('4'))
+  const [count4, setCount4] = useRecoilState(counterState4)
   return (
     <div className="App">
       <h3>Counter 1 (persist): {count}</h3>
       <button onClick={() => setCount(count + 1)}>Increase</button>
       <button onClick={() => setCount(count - 1)}>Decrease</button>
-      <h3>Counter 2 (not persist): {count2}</h3>
+      <h3>Counter 2 (persist, atomFamily): {count2}</h3>
       <button onClick={() => setCount2(count2 + 1)}>Increase</button>
       <button onClick={() => setCount2(count2 - 1)}>Decrease</button>
       <h3>Counter 3 (persist, atomFamily): {count3}</h3>
       <button onClick={() => setCount3(count3 + 1)}>Increase</button>
       <button onClick={() => setCount3(count3 - 1)}>Decrease</button>
-      <h3>Counter 4 (persist, atomFamily): {count4}</h3>
+      <h3>Counter 4 (do not persist): {count4}</h3>
       <button onClick={() => setCount4(count4 + 1)}>Increase</button>
       <button onClick={() => setCount4(count4 - 1)}>Decrease</button>
     </div>
   )
 }
 
-var mountNode = document.getElementById('app')
+const mountNode = document.getElementById('app')
 ReactDOM.render(
-  <RecoilRoot initializeState={({ set }) => updateState({ set })}>
-    <RecoilPersist />
+  <RecoilRoot>
     <App />
   </RecoilRoot>,
   mountNode,