refactor(with-storage-sync): integrate with-indexeddb into with-storage-sync(wip)

Author: mzkmnk

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

@@ -6,21 +6,17 @@ import {
   updateEntity,
 } from '@ngrx/signals/entities';
 import { AddTodo, Todo } from '../devtools/todo-store';
-import {
-  withIndexedDB,
-  withStorageSync,
-} from '@angular-architects/ngrx-toolkit';
+import { withStorageSync } from '@angular-architects/ngrx-toolkit';
 
 export const SyncedTodoStore = signalStore(
   { providedIn: 'root' },
   withEntities<Todo>(),
-  withStorageSync(
-    {
-      dbName: 'ngrx-toolkit',
-      storeName: 'todos',
-    },
-    withIndexedDB()
-  ),
+  withStorageSync({
+    key: 'todos',
+    storage: 'indexedDB',
+    dbName: 'ngrx-toolkit',
+    storeName: 'todos',
+  }),
   withMethods((store) => {
     let currentId = 0;
     return {

libs/ngrx-toolkit/src/index.ts

@@ -23,4 +23,3 @@ export {
   withStorageSync,
   SyncConfig,
 } from './lib/storageSync/with-storage-sync';
-export { withIndexedDB } from './lib/storageSync/with-indexeddb';

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

@@ -84,7 +84,7 @@ export class IndexedDBService {
     return new Promise((resolve, reject) => {
       request.onsuccess = (): void => {
         db.close();
-        resolve(request.result);
+        resolve(request.result?.['value']);
       };
 
       request.onerror = (): void => {

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

@@ -1,11 +1,11 @@
 import { inject, Injectable } from '@angular/core';
 import { IndexedDBService } from './indexeddb.service';
 
-export type StorageType = 'localStorage' | 'sessionStorage';
-
-export type StorageOptions = {
-  dbName: string;
-  storeName: string;
+export type IndexedDBConfig = {
+  storage: 'localStorage' | 'sessionStorage' | 'indexedDB';
+  key?: string;
+  dbName?: string;
+  storeName?: string;
 };
 
 @Injectable({
@@ -14,50 +14,84 @@ export type StorageOptions = {
 export class StorageService {
   private readonly indexedDB = inject(IndexedDBService);
 
+  private storage: Storage | null = null;
+
+  setStorage(storage: Storage): void {
+    this.storage = storage;
+  }
+
   // get item from storage(localStorage, sessionStorage, indexedDB)
-  async getItem(type: StorageType): Promise<string | null>;
-  async getItem(options: StorageOptions): Promise<string | null>;
+  async getItem(config: IndexedDBConfig): Promise<string | null>;
+
+  async getItem(config: IndexedDBConfig): Promise<string | null> {
+    if (config.storage === 'indexedDB') {
+      const { dbName, storeName } = config;
 
-  async getItem(
-    configOrKey: StorageOptions | StorageType
-  ): Promise<string | null> {
-    if (typeof configOrKey === 'string') {
-      return window[configOrKey].getItem(configOrKey);
+      if (dbName === undefined || storeName === undefined) {
+        throw new Error('dbName and storeName must be set');
+      }
+
+      return await this.indexedDB.read(dbName, storeName);
     }
 
-    const { dbName, storeName } = configOrKey;
+    if (this.storage === null) {
+      throw new Error('Storage not set');
+    }
 
-    return await this.indexedDB.read(dbName, storeName);
+    if (config.key === undefined) {
+      throw new Error('key is undefined');
+    }
+
+    return this.storage.getItem(config.key);
   }
 
   // set item in storage(localStorage, sessionStorage, indexedDB)
-  async setItem(type: StorageType, value: string): Promise<void>;
-  async setItem(options: StorageOptions, value: string): Promise<void>;
+  async setItem(config: IndexedDBConfig, value: string): Promise<void>;
+
+  async setItem(config: IndexedDBConfig, value: string): Promise<void> {
+    if (config.storage === 'indexedDB') {
+      const { dbName, storeName } = config;
 
-  async setItem(
-    configOrKey: StorageOptions | StorageType,
-    value: string
-  ): Promise<void> {
-    if (typeof configOrKey === 'string') {
-      window[configOrKey].setItem(configOrKey, value);
-      return;
+      if (dbName === undefined || storeName === undefined) {
+        throw new Error('dbName and storeName must be set');
+      }
+
+      return await this.indexedDB.write(dbName, storeName, value);
+    }
+
+    if (this.storage === null) {
+      throw new Error('Storage not set');
+    }
+
+    if (config.key === undefined) {
+      throw new Error('key is undefined');
     }
 
-    const { dbName, storeName } = configOrKey;
-    await this.indexedDB.write(dbName, storeName, value);
+    return this.storage.setItem(config.key, value);
   }
+  //
+  // // remove item from storage(localStorage, sessionStorage, indexedDB)
+  async removeItem(config: IndexedDBConfig): Promise<void>;
 
-  // remove item from storage(localStorage, sessionStorage, indexedDB)
-  async removeItem(type: StorageType): Promise<void>;
-  async removeItem(options: StorageOptions): Promise<void>;
+  async removeItem(config: IndexedDBConfig): Promise<void> {
+    if (config.storage === 'indexedDB') {
+      const { dbName, storeName } = config;
+
+      if (dbName === undefined || storeName === undefined) {
+        throw new Error('dbName and storeName must be set');
+      }
+
+      return await this.indexedDB.clear(dbName, storeName);
+    }
+
+    if (this.storage === null) {
+      throw new Error('Storage not set');
+    }
 
-  async removeItem(configOrKey: StorageOptions | StorageType): Promise<void> {
-    if (typeof configOrKey === 'string') {
-      window[configOrKey].removeItem(configOrKey);
-      return;
+    if (config.key === undefined) {
+      throw new Error('key is undefined');
     }
 
-    const { dbName, storeName } = configOrKey;
-    return await this.indexedDB.clear(dbName, storeName);
+    return this.storage.removeItem(config.key);
   }
 }

libs/ngrx-toolkit/src/lib/storageSync/tests/indexeddb.service.spec.ts

@@ -26,7 +26,7 @@ describe('IndexedDBService', () => {
 
     const receivedData = await indexedDBService.read(dbName, storeName);
 
-    expect(receivedData).toEqual(expectedData);
+    expect(receivedData).toEqual(expectedData.value);
   });
 
   it('It should be possible to delete data using clear()', async (): Promise<void> => {
@@ -50,7 +50,7 @@ describe('IndexedDBService', () => {
 
     const receivedData = await indexedDBService.read(dbName, storeName);
 
-    expect(receivedData).toEqual({ [keyPath]: keyPath, value: null });
+    expect(receivedData).toBeNull();
   });
 
   it('write() should handle empty object data', async (): Promise<void> => {
@@ -61,7 +61,7 @@ describe('IndexedDBService', () => {
 
     const receivedData = await indexedDBService.read(dbName, storeName);
 
-    expect(receivedData).toEqual(expectedData);
+    expect(receivedData).toEqual(expectedData.value);
   });
 
   it('write() should handle large data objects', async (): Promise<void> => {
@@ -72,7 +72,7 @@ describe('IndexedDBService', () => {
 
     const receivedData = await indexedDBService.read(dbName, storeName);
 
-    expect(receivedData).toEqual(expectedData);
+    expect(receivedData).toEqual(expectedData.value);
   });
 
   it('write() should handle special characters in data', async (): Promise<void> => {
@@ -83,6 +83,6 @@ describe('IndexedDBService', () => {
 
     const receivedData = await indexedDBService.read(dbName, storeName);
 
-    expect(receivedData).toEqual(expectedData);
+    expect(receivedData).toEqual(expectedData.value);
   });
 });