feat: hook based approach at persistence

Author: simoneb

.eslintignore

@@ -2,4 +2,4 @@ cjs/
 es/
 umd/
 coverage/
-examples/umd.js
+examples/assets/

examples/.gitignore

@@ -1 +1 @@
-umd.js
+assets/

examples/components/Persistence.js

@@ -1,5 +1,25 @@
 const { useState, useEffect } = React
 
+function makeStateHookFactory(prefix) {
+  return function makeStateHook(key) {
+    const id = [prefix, key].join('-')
+
+    return function useSessionStorageState(initializer) {
+      const result = useState(
+        JSON.parse(sessionStorage.getItem(id) || 'null') || initializer
+      )
+
+      const [state] = result
+
+      useEffect(() => {
+        sessionStorage.setItem(id, JSON.stringify(state))
+      }, [state])
+
+      return result
+    }
+  }
+}
+
 function Persistence() {
   const {
     currentToken,
@@ -14,7 +34,7 @@ function Persistence() {
       defaultPageNumber: 1,
       defaultPageSize: 5,
     },
-    useTokenPagination.sessionPersister('persistence')
+    makeStateHookFactory('persistence')
   )
   const [data, setData] = useState()
 

examples/index.html

@@ -7,7 +7,7 @@
     <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-    <script src="umd.js"></script>
+    <script src="assets/token-pagination-hooks.js"></script>
     <script type="text/babel" src="components/Output.js"></script>
     <script type="text/babel" src="components/Source.js"></script>
     <script

package.json

@@ -7,6 +7,7 @@
   "main": "cjs/index.js",
   "module": "es/index.js",
   "unpkg": "umd/index.js",
+  "umd": "umd/index.js",
   "files": [
     "cjs/",
     "es/",

rollup.config.js

@@ -5,7 +5,6 @@ export default {
       dir: 'cjs',
       format: 'cjs',
       exports: 'default',
-      esModule: false,
     },
     {
       dir: 'es',
@@ -20,7 +19,7 @@ export default {
       },
     },
     {
-      file: 'examples/umd.js',
+      file: 'examples/assets/token-pagination-hooks.js',
       format: 'umd',
       name: 'useTokenPagination',
       globals: {

src/controlled.js

@@ -1,17 +1,15 @@
-import { useCallback, useEffect, useState, useMemo } from 'react'
-import { NULL_PERSISTER } from './persisters'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { assertNumber } from './utils'
 
 export default function useControlledTokenPagination(
   pageNumber,
-  persister = NULL_PERSISTER
+  stateHookFactory = () => React.useState
 ) {
   assertNumber('pageNumber', pageNumber)
 
-  const [mapping, setMapping] = useState(() => {
-    const { mapping } = persister.hydrate()
-    return mapping || {}
-  })
+  const useState = stateHookFactory('controlled')
+
+  const [mapping, setMapping] = useState({})
 
   const updateToken = useCallback(
     nextToken => {
@@ -30,10 +28,6 @@ export default function useControlledTokenPagination(
     [updateToken]
   )
 
-  useEffect(() => {
-    persister.persist({ mapping })
-  }, [persister, mapping])
-
   return useMemo(
     () => ({
       currentToken: mapping[pageNumber],

src/index.js

@@ -1,20 +1,17 @@
 import useControlledTokenPagination from './controlled'
 import useUncontrolledTokenPagination from './uncontrolled'
-import * as persisters from './persisters'
 
 const variants = {
   number: useControlledTokenPagination,
   object: useUncontrolledTokenPagination,
 }
 
-export default function useTokenPagination(options, persister) {
+export default function useTokenPagination(options, stateHookFactory) {
   const variant = variants[typeof options]
 
   if (!variant) {
     throw new Error(`Unsupported options ${options} of type ${typeof options}`)
   }
 
-  return variant(options, persister)
+  return variant(options, stateHookFactory)
 }
-
-Object.assign(useTokenPagination, persisters)

src/persisters.js

@@ -1,6 +1,6 @@
-import { useCallback, useState, useMemo, useEffect } from 'react'
+import React, { useCallback, useMemo } from 'react'
+
 import useControlledTokenPagination from './controlled'
-import { NULL_PERSISTER } from './persisters'
 import { assertNumber } from './utils'
 
 const DEFAULTS = {
@@ -12,20 +12,18 @@ const changerTypes = ['function', 'number']
 
 export default function useUncontrolledTokenPagination(
   options,
-  persister = NULL_PERSISTER
+  stateHookFactory = () => React.useState
 ) {
   options = { ...DEFAULTS, ...options }
 
   assertNumber('defaultPageNumber', options.defaultPageNumber)
   assertNumber('defaultPageSize', options.defaultPageSize)
 
-  const [{ pageNumber, pageSize }, setPagination] = useState(() => {
-    const { pageNumber, pageSize } = persister.hydrate()
+  const useState = stateHookFactory('uncontrolled')
 
-    return {
-      pageNumber: pageNumber || options.defaultPageNumber,
-      pageSize: pageSize || options.defaultPageSize,
-    }
+  const [{ pageNumber, pageSize }, setPagination] = useState({
+    pageNumber: options.defaultPageNumber,
+    pageSize: options.defaultPageSize,
   })
 
   const change = useCallback(
@@ -59,11 +57,7 @@ export default function useUncontrolledTokenPagination(
     change,
   ])
 
-  const controlled = useControlledTokenPagination(pageNumber, persister)
-
-  useEffect(() => {
-    persister.persist({ pageNumber, pageSize })
-  }, [persister, pageNumber, pageSize])
+  const controlled = useControlledTokenPagination(pageNumber, stateHookFactory)
 
   return useMemo(
     () => ({