feat(with-storage-sync): wip add local and session storage services

Author: mzkmnk

apps/demo/src/app/todo-storage-sync/synced-todo-store.ts

@@ -1,4 +1,4 @@
-import { patchState, signalStore, withHooks, withMethods } from '@ngrx/signals';
+import { patchState, signalStore, withMethods } from '@ngrx/signals';
 import {
   withEntities,
   setEntity,
@@ -33,11 +33,11 @@ export const SyncedTodoStore = signalStore(
         );
       },
     };
-  }),
-  withHooks({
-    // onInit(store, todoService = inject(TodoService)) {
-    //   const todos = todoService.getData();
-    //   todos.forEach((todo) => store.add(todo));
-    // },
   })
+  //withHooks({
+  //   onInit(store, todoService = inject(TodoService)) {
+  //     const todos = todoService.getData();
+  //     todos.forEach((todo) => store.add(todo));
+  //   },
+  //})
 );

libs/ngrx-toolkit/src/index.ts

@@ -19,5 +19,7 @@ export * from './lib/with-undo-redo';
 export * from './lib/with-data-service';
 export * from './lib/with-pagination';
 export { withReset, setResetState } from './lib/with-reset';
+//export { withStorage } from './lib/storage-sync/features/with-storage';
+export { withIndexeddb } from './lib/storage-sync/features/with-indexeddb';
 export { withStorageSync, SyncConfig } from './lib/with-storage-sync';
 export { withImmutableState } from './lib/immutable-state/with-immutable-state';

libs/ngrx-toolkit/src/lib/storage-sync/features/with-indexeddb.ts

@@ -0,0 +1,6 @@
+import { IndexedDBService } from '../internal/indexeddb.service';
+import { StorageServiceFactory } from '../internal/storage.service';
+
+export const withIndexeddb: () => StorageServiceFactory = () => {
+  return () => IndexedDBService;
+};

libs/ngrx-toolkit/src/lib/storage-sync/features/with-local-storage.ts

@@ -0,0 +1,6 @@
+import { StorageServiceFactory } from '../internal/storage.service';
+import { LocalStorageService } from '../internal/local-storage.service';
+
+export const withLocalStorage: () => StorageServiceFactory = () => {
+  return () => LocalStorageService;
+};

libs/ngrx-toolkit/src/lib/storage-sync/features/with-session-storage.ts

@@ -0,0 +1,6 @@
+import { StorageServiceFactory } from '../internal/storage.service';
+import { SessionStorageService } from '../internal/session-storage.service';
+
+export const withSessionStorage: () => StorageServiceFactory = () => {
+  return () => SessionStorageService;
+};

libs/ngrx-toolkit/src/lib/storage-sync/internal/indexeddb.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { StorageService } from './storage.service';
 
 export const dbName: string = 'ngrxToolkit' as const;
 
@@ -7,7 +8,7 @@ export const keyPath: string = 'ngrxToolkitId' as const;
 export const VERSION: number = 1 as const;
 
 @Injectable({ providedIn: 'root' })
-export class IndexedDBService {
+export class IndexedDBService implements StorageService {
   /**
    * open indexedDB
    * @param storeName

libs/ngrx-toolkit/src/lib/storage-sync/internal/local-storage.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { StorageService } from './storage.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LocalStorageService implements StorageService {
+  async getItem(key: string): Promise<string | null> {
+    return localStorage.getItem(key);
+  }
+
+  async setItem(key: string, data: string): Promise<void> {
+    return localStorage.setItem(key, data);
+  }
+
+  async clear(key: string): Promise<void> {
+    return localStorage.removeItem(key);
+  }
+}

libs/ngrx-toolkit/src/lib/storage-sync/internal/session-storage.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { StorageService } from './storage.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SessionStorageService implements StorageService {
+  async getItem(key: string): Promise<string | null> {
+    return sessionStorage.getItem(key);
+  }
+
+  async setItem(key: string, data: string): Promise<void> {
+    return sessionStorage.setItem(key, data);
+  }
+
+  async clear(key: string): Promise<void> {
+    return sessionStorage.removeItem(key);
+  }
+}

libs/ngrx-toolkit/src/lib/storage-sync/internal/storage.service.ts

@@ -1,21 +1,9 @@
-import { Injectable } from '@angular/core';
+import { Type } from '@angular/core';
 
-@Injectable({
-  providedIn: 'root',
-})
-export class StorageService {
-  // get item from storage(localStorage, sessionStorage)
-  async getItem(storage: Storage, key: string): Promise<string | null> {
-    return storage.getItem(key);
-  }
-
-  // set item in storage(localStorage, sessionStorage)
-  async setItem(storage: Storage, key: string, value: string): Promise<void> {
-    return storage.setItem(key, value);
-  }
-
-  // remove item from storage(localStorage, sessionStorage)
-  async clear(storage: Storage, key: string): Promise<void> {
-    return storage.removeItem(key);
-  }
+export interface StorageService {
+  clear(key: string): Promise<void>;
+  getItem(key: string): Promise<string | null>;
+  setItem(key: string, data: string): Promise<void>;
 }
+
+export type StorageServiceFactory = () => Type<StorageService>;

libs/ngrx-toolkit/src/lib/with-storage-sync.ts

@@ -16,6 +16,8 @@ import {
   SignalStoreFeatureResult,
   EmptyFeatureResult,
 } from '@ngrx/signals';
+import { withIndexeddb } from './storage-sync/features/with-indexeddb';
+import { StorageServiceFactory } from './storage-sync/internal/storage.service';
 
 const NOOP = () => Promise.resolve();
 
@@ -81,14 +83,22 @@ export type SyncConfig<State> = {
 export function withStorageSync<Input extends SignalStoreFeatureResult>(
   key: string
 ): SignalStoreFeature<Input, WithStorageSyncFeatureResult>;
+
 export function withStorageSync<Input extends SignalStoreFeatureResult>(
   config: SyncConfig<Input['state']>
 ): SignalStoreFeature<Input, WithStorageSyncFeatureResult>;
+
+export function withStorageSync<Input extends SignalStoreFeatureResult>(
+  config: SyncConfig<Input['state']>,
+  StorageServiceClass: StorageServiceFactory
+): SignalStoreFeature<Input, WithStorageSyncFeatureResult>;
+
 export function withStorageSync<
   State extends object,
   Input extends SignalStoreFeatureResult
 >(
-  configOrKey: SyncConfig<Input['state']> | string
+  configOrKey: SyncConfig<Input['state']> | string,
+  StorageServiceClass: StorageServiceFactory = withIndexeddb()
 ): SignalStoreFeature<Input, WithStorageSyncFeatureResult> {
   const {
     key,
@@ -100,41 +110,47 @@ export function withStorageSync<
   } = typeof configOrKey === 'string' ? { key: configOrKey } : configOrKey;
 
   return signalStoreFeature(
-    withMethods((store, platformId = inject(PLATFORM_ID)) => {
-      if (isPlatformServer(platformId)) {
-        console.warn(
-          `'withStorageSync' provides non-functional implementation due to server-side execution`
-        );
-        return StorageSyncStub;
-      }
+    withMethods(
+      (
+        store,
+        platformId = inject(PLATFORM_ID),
+        storageService = inject(StorageServiceClass)
+      ) => {
+        if (isPlatformServer(platformId)) {
+          console.warn(
+            `'withStorageSync' provides non-functional implementation due to server-side execution`
+          );
+          return StorageSyncStub;
+        }
 
-      const storage = storageFactory();
+        const storage = storageFactory();
 
-      return {
-        /**
-         * Removes the item stored in storage.
-         */
-        async clearStorage(): Promise<void> {
-          storage.removeItem(key);
-        },
-        /**
-         * Reads item from storage and patches the state.
-         */
-        async readFromStorage(): Promise<void> {
-          const stateString = storage.getItem(key);
-          if (stateString) {
-            patchState(store, parse(stateString));
-          }
-        },
-        /**
-         * Writes selected portion to storage.
-         */
-        async writeToStorage(): Promise<void> {
-          const slicedState = select(getState(store) as State);
-          storage.setItem(key, stringify(slicedState));
-        },
-      };
-    }),
+        return {
+          /**
+           * Removes the item stored in storage.
+           */
+          async clearStorage(): Promise<void> {
+            storage.removeItem(key);
+          },
+          /**
+           * Reads item from storage and patches the state.
+           */
+          async readFromStorage(): Promise<void> {
+            const stateString = storage.getItem(key);
+            if (stateString) {
+              patchState(store, parse(stateString));
+            }
+          },
+          /**
+           * Writes selected portion to storage.
+           */
+          async writeToStorage(): Promise<void> {
+            const slicedState = select(getState(store) as State);
+            storage.setItem(key, stringify(slicedState));
+          },
+        };
+      }
+    ),
     withHooks({
       onInit(
         store,