add config

README.md

@@ -16,10 +16,6 @@ npm install @larscom/ngrx-signals-storage
 
 `@larscom/ngrx-signals-storage` depends on [@ngrx/signals](https://ngrx.io/guide/signals/install) and [Angular](https://github.com/angular/angular)
 
-```bash
-   npm install @ngrx/signals
-```
-
 ## Usage
 
 Import `withStorage` function
@@ -33,6 +29,37 @@ export const CounterStore = signalStore(
     count: 0
   }),
   // state will be saved to sessionStorage under the key: 'myKey'
-  withStorage('myKey', sessionStorage)
+  // extra config can be passed as 3th argument
+  withStorage('myKey', sessionStorage, { error: (error: any) => console.error(error) })
 )
 ```
+
+## Configuration
+
+```ts
+export interface Config<T> {
+  /**
+   * Function that gets executed on a storage error (get/set)
+   * @param error the error that occurred
+   */
+  error: (error: any) => void
+
+  /**
+   * Serializer for the state, by default it uses `JSON.stringify()`
+   * @param state the last state known before it gets saved to storage
+   */
+  serialize: (state: T) => string
+
+  /**
+   * Deserializer for the state, by default it uses `JSON.parse()`
+   * @param state the last state known from the storage location
+   */
+  deserialize: (state: string) => T
+
+  /**
+   * Save to storage will only occur when this function returns true
+   * @param state the last state known before it gets saved to storage
+   */
+  shouldSave: (state: T) => boolean
+}
+```

projects/ngrx-signals-storage/src/lib/config.ts

@@ -0,0 +1,35 @@
+export interface Config<T> {
+  /**
+   * Function that gets executed on a storage error (get/set)
+   * @param error the error that occurred
+   */
+  error: (error: any) => void
+
+  /**
+   * Serializer for the state, by default it uses `JSON.stringify()`
+   * @param state the last state known before it gets saved to storage
+   */
+  serialize: (state: T) => string
+
+  /**
+   * Deserializer for the state, by default it uses `JSON.parse()`
+   * @param state the last state known from the storage location
+   */
+  deserialize: (state: string) => T
+
+  /**
+   * Save to storage will only occur when this function returns true
+   * @param state the last state known before it gets saved to storage
+   */
+  shouldSave: (state: T) => boolean
+}
+
+export const defaultConfig: Config<any> = {
+  error: (error: any) => {},
+
+  serialize: (state: any) => JSON.stringify(state),
+
+  deserialize: (state: string) => JSON.parse(state),
+
+  shouldSave: (state: any) => true
+}

projects/ngrx-signals-storage/src/lib/with-storage.ts

@@ -2,6 +2,7 @@ import { effect } from '@angular/core'
 
 import { getState, patchState } from '@ngrx/signals'
 import { EmptyFeatureResult, SignalStoreFeature, SignalStoreFeatureResult } from '@ngrx/signals/src/signal-store-models'
+import { Config, defaultConfig } from './config'
 
 /**
  * The `withStorage` function that lets you save the state to localstorage/sessionstorage
@@ -23,10 +24,13 @@ import { EmptyFeatureResult, SignalStoreFeature, SignalStoreFeatureResult } from
  */
 export function withStorage<State extends SignalStoreFeatureResult>(
   key: string,
-  storage: Storage
+  storage: Storage,
+  config?: Partial<Config<State['state']>>
 ): SignalStoreFeature<State, EmptyFeatureResult> {
-  const item = storage.getItem(key)
-  const storageState: State['state'] | null = item ? JSON.parse(item) : null
+  const cfg = { ...defaultConfig, ...config }
+
+  const item = getFromStorage(key, storage, cfg)
+  const storageState: State['state'] | null = item ? cfg.deserialize(item) : null
 
   let hydrated = false
 
@@ -52,9 +56,24 @@ export function withStorage<State extends SignalStoreFeatureResult>(
 
     effect(() => {
       const state = getState(store)
-      storage.setItem(key, JSON.stringify(state))
+      try {
+        if (cfg.shouldSave(state)) {
+          storage.setItem(key, cfg.serialize(state))
+        }
+      } catch (e) {
+        cfg.error(e)
+      }
     })
 
     return store
   }
 }
+
+function getFromStorage<T>(key: string, storage: Storage, cfg: Config<T>): string | null {
+  try {
+    return storage.getItem(key)
+  } catch (e) {
+    cfg.error(e)
+    return null
+  }
+}

projects/ngrx-signals-storage/src/public-api.ts

@@ -1 +1,2 @@
 export { withStorage } from './lib/with-storage'
+export { type Config } from './lib/config'