feat: introduce disable persist option ("none") (#137)

* fix: persist option none is not working

* refactor: save some bytes

- remove unnecessary enum export
- use const object instead of enum
- avoid using optional chain operator

* chore(deps): bump microbundle

- saves another 200B gzipped

* docs: add persist option to API documentation

* Update README.md

* Update constants.ts

Co-authored-by: Bill <bluebill1049@hotmail.com>

README.md

@@ -52,6 +52,13 @@ createStore(
      name?: string; // rename the store
      middleWares?: [ log ]; // function to invoke each action
      storageType?: Storage; // session/local storage (default to session)
+
+     // one of 'none' | 'action' | 'beforeUnload'
+     // when 'none' is used then state is not persisted
+     // when 'action' is used then state is saved to the storage after store action is completed
+     // when 'beforeUnload' is used then state is saved to storage before page unload and is restored
+     // after next page load and then storage is cleared
+     persist?: 'onAction' // onAction is default if not provided
   },
 );
 ```

package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@types/react": "^17.0.39",
     "jest": "27.5.0",
-    "microbundle": "^0.14.2",
+    "microbundle": "^0.15.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "react": "^17.0.2",

src/StateMachineContext.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import storeFactory from './logic/storeFactory';
 import { StateMachineContextValue } from './types';
-import { PERSIST_BEFORE_UNLOAD } from './constants';
+import { PERSIST_OPTION } from './constants';
 
 type PropsChildren = {
   children?: React.ReactNode;
@@ -15,9 +15,10 @@ export const StateMachineProvider: React.FC<PropsChildren> = ({ children }) => {
   const [state, setState] = React.useState(storeFactory.state);
 
   React.useEffect(() => {
-    if (storeFactory.options.persist === PERSIST_BEFORE_UNLOAD) {
+    if (storeFactory.options.persist === PERSIST_OPTION.UNLOAD) {
       window.onbeforeunload = () => storeFactory.saveStore();
-      storeFactory.options.storageType.removeItem(storeFactory.options.name);
+      storeFactory.options.storageType &&
+        storeFactory.options.storageType.removeItem(storeFactory.options.name!);
     }
   }, []);
 

src/constants.ts

@@ -1,3 +1,7 @@
 export const STORE_DEFAULT_NAME = '__LSM__';
 export const STORE_ACTION_NAME = '__LSM_NAME__';
-export const PERSIST_BEFORE_UNLOAD = 'beforeUnload';
+export const PERSIST_OPTION = {
+  NONE: 'none',
+  ACTION: 'action',
+  UNLOAD: 'beforeUnload',
+} as const;

src/logic/storeFactory.ts

@@ -1,34 +1,33 @@
-import { STORE_DEFAULT_NAME } from '../constants';
-import { MiddleWare, GlobalState } from '../types';
+import { PERSIST_OPTION, STORE_DEFAULT_NAME } from '../constants';
+import { GlobalState, StateMachineOptions } from '../types';
 
 function StoreFactory() {
-  let options = {
+  let options: StateMachineOptions = {
     name: STORE_DEFAULT_NAME,
-    middleWares: [] as MiddleWare[],
-    storageType: {} as Storage,
-    persist: '',
+    middleWares: [],
+    persist: PERSIST_OPTION.ACTION,
   };
   let state: GlobalState = {};
 
   try {
     options.storageType =
-      typeof sessionStorage !== 'undefined'
-        ? window.sessionStorage
-        : ({} as Storage);
+      typeof sessionStorage !== 'undefined' ? window.sessionStorage : undefined;
   } catch {}
 
   return {
     updateStore(defaultValues: GlobalState) {
       try {
         state =
-          JSON.parse(options.storageType.getItem(options.name) || '') ||
+          (options.storageType &&
+            JSON.parse(options.storageType.getItem(options.name!) || '')) ||
           defaultValues;
       } catch {
         state = defaultValues;
       }
     },
     saveStore() {
-      options.storageType.setItem(options.name, JSON.stringify(state));
+      options.storageType &&
+        options.storageType.setItem(options.name!, JSON.stringify(state));
     },
     get state() {
       return state;

src/stateMachine.tsx

@@ -8,7 +8,7 @@ import {
   AnyActions,
   ActionsOutput,
 } from './types';
-import { PERSIST_BEFORE_UNLOAD, STORE_ACTION_NAME } from './constants';
+import { PERSIST_OPTION, STORE_ACTION_NAME } from './constants';
 
 export function createStore(
   defaultState: GlobalState,
@@ -25,7 +25,8 @@ export function createStore(
     if (typeof window !== 'undefined') {
       window.__LSM_NAME__ = storeFactory.options.name;
       window.__LSM_RESET__ = () =>
-        storeFactory.options.storageType.removeItem(storeFactory.options.name);
+        storeFactory.options.storageType &&
+        storeFactory.options.storageType.removeItem(storeFactory.options.name!);
     }
   }
 
@@ -53,8 +54,10 @@ const actionTemplate =
     }
 
     (!options || !options.skipRender) && setState(storeFactory.state);
-    storeFactory.options.persist !== PERSIST_BEFORE_UNLOAD &&
+
+    if (storeFactory.options.persist === PERSIST_OPTION.ACTION) {
       storeFactory.saveStore();
+    }
   };
 
 export function useStateMachine<

src/types.ts

@@ -1,3 +1,4 @@
+import { PERSIST_OPTION } from './constants';
 import * as React from 'react';
 
 export interface GlobalState {}
@@ -27,13 +28,11 @@ export type MiddleWare = (
   callbackName: string,
 ) => GlobalState;
 
-export type PersistOptions = 'onAction' | 'none' | 'beforeUnload';
-
 export type StateMachineOptions = Partial<{
   name: string;
   middleWares: MiddleWare[];
   storageType: Storage;
-  persist: PersistOptions;
+  persist: typeof PERSIST_OPTION[keyof typeof PERSIST_OPTION];
 }>;
 
 declare global {