feat(with-storage-sync): enhance storage sync with local and indexedDB support

Author: mzkmnk

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

@@ -1,22 +1,25 @@
-import { patchState, signalStore, withHooks, withMethods } from '@ngrx/signals';
+import { patchState, signalStore, withMethods } from '@ngrx/signals';
 import {
-  withEntities,
-  setEntity,
   removeEntity,
+  setEntity,
   updateEntity,
+  withEntities,
 } from '@ngrx/signals/entities';
-import { inject } from '@angular/core';
-import { Todo, TodoService, AddTodo } from '../shared/todo.service';
+import { AddTodo, Todo } from '../shared/todo.service';
+import {
+  withIndexeddb,
+  withStorageSync,
+} from '@angular-architects/ngrx-toolkit';
 
 export const SyncedTodoStore = signalStore(
   { providedIn: 'root' },
   withEntities<Todo>(),
-  // todo
-  // withStorageSync({
-  //   storageType: 'indexedDB',
-  //   dbName: 'todos',
-  //   storeName: 'todos',
-  // }),
+  withStorageSync(
+    {
+      key: 'todos-indexeddb',
+    },
+    withIndexeddb()
+  ),
   withMethods((store) => {
     let currentId = 0;
     return {
@@ -36,11 +39,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));
+  //  },
+  //})
 );

apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.ts

@@ -11,6 +11,7 @@ import { Todo } from '../shared/todo.service';
   imports: [MatCheckboxModule, MatIconModule, MatTableModule],
   templateUrl: './todo-indexeddb-sync.component.html',
   styleUrl: './todo-indexeddb-sync.component.scss',
+  standalone: true,
 })
 export class TodoIndexeddbSyncComponent {
   todoStore = inject(SyncedTodoStore);

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

@@ -1,19 +1,17 @@
-import { patchState, signalStore, withMethods } from '@ngrx/signals';
+import { patchState, signalStore, withHooks, withMethods } from '@ngrx/signals';
 import {
-  withEntities,
-  setEntity,
   removeEntity,
+  setEntity,
   updateEntity,
+  withEntities,
 } from '@ngrx/signals/entities';
 import { withStorageSync } from '@angular-architects/ngrx-toolkit';
-import { Todo, AddTodo } from '../shared/todo.service';
+import { AddTodo, Todo, TodoService } from '../shared/todo.service';
+import { inject } from '@angular/core';
 
 export const SyncedTodoStore = signalStore(
   { providedIn: 'root' },
   withEntities<Todo>(),
-  withStorageSync({
-    key: 'todos',
-  }),
   withMethods((store) => {
     let currentId = 0;
     return {
@@ -33,11 +31,14 @@ export const SyncedTodoStore = signalStore(
         );
       },
     };
+  }),
+  withHooks({
+    onInit(store, todoService = inject(TodoService)) {
+      const todos = todoService.getData();
+      todos.forEach((todo) => store.add(todo));
+    },
+  }),
+  withStorageSync({
+    key: 'todos',
   })
-  //withHooks({
-  //   onInit(store, todoService = inject(TodoService)) {
-  //     const todos = todoService.getData();
-  //     todos.forEach((todo) => store.add(todo));
-  //   },
-  //})
 );

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

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

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

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

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

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

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

@@ -6,4 +6,4 @@ export interface StorageService {
   setItem(key: string, data: string): Promise<void>;
 }
 
-export type StorageServiceFactory = () => Type<StorageService>;
+export type StorageServiceFactory = Type<StorageService>;

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

@@ -1,23 +1,23 @@
 import { isPlatformServer } from '@angular/common';
 import {
-  PLATFORM_ID,
   effect,
-  inject,
   EnvironmentInjector,
+  inject,
+  PLATFORM_ID,
   runInInjectionContext,
 } from '@angular/core';
 import {
-  SignalStoreFeature,
+  EmptyFeatureResult,
   getState,
   patchState,
   signalStoreFeature,
+  SignalStoreFeature,
+  SignalStoreFeatureResult,
   withHooks,
   withMethods,
-  SignalStoreFeatureResult,
-  EmptyFeatureResult,
 } from '@ngrx/signals';
-import { withIndexeddb } from './storage-sync/features/with-indexeddb';
 import { StorageServiceFactory } from './storage-sync/internal/storage.service';
+import { withLocalStorage } from './storage-sync/features/with-local-storage';
 
 const NOOP = () => Promise.resolve();
 
@@ -98,15 +98,14 @@ export function withStorageSync<
   Input extends SignalStoreFeatureResult
 >(
   configOrKey: SyncConfig<Input['state']> | string,
-  StorageServiceClass: StorageServiceFactory = withIndexeddb()
+  StorageServiceClass: StorageServiceFactory = withLocalStorage()
 ): SignalStoreFeature<Input, WithStorageSyncFeatureResult> {
   const {
     key,
     autoSync = true,
     select = (state: State) => state,
     parse = JSON.parse,
     stringify = JSON.stringify,
-    storage: storageFactory = () => localStorage,
   } = typeof configOrKey === 'string' ? { key: configOrKey } : configOrKey;
 
   return signalStoreFeature(
@@ -123,20 +122,18 @@ export function withStorageSync<
           return StorageSyncStub;
         }
 
-        const storage = storageFactory();
-
         return {
           /**
            * Removes the item stored in storage.
            */
           async clearStorage(): Promise<void> {
-            storage.removeItem(key);
+            await storageService.clear(key);
           },
           /**
            * Reads item from storage and patches the state.
            */
           async readFromStorage(): Promise<void> {
-            const stateString = storage.getItem(key);
+            const stateString = await storageService.getItem(key);
             if (stateString) {
               patchState(store, parse(stateString));
             }
@@ -146,7 +143,7 @@ export function withStorageSync<
            */
           async writeToStorage(): Promise<void> {
             const slicedState = select(getState(store) as State);
-            storage.setItem(key, stringify(slicedState));
+            await storageService.setItem(key, stringify(slicedState));
           },
         };
       }