feat(with-storage-sync)!: support indexedDB

BREAKING CHANGE: The storage argument has been renamed to storageType, and its value must now
be one of the following strings: 'localStorage', 'sessionStorage', or 'IndexedDB'.
Additionally, when 'IndexedDB' is specified, two new arguments, `storeName` and `dbName`,
have been added.

Author: mzkmnk

apps/demo/src/app/app.component.html

@@ -19,6 +19,9 @@
         >Redux Connector</a
       >
       <a mat-list-item routerLink="/todo-storage-sync">withStorageSync</a>
+      <a mat-list-item routerLink="/todo-indexeddb-sync"
+        >withStorageSync(IndexedDB)</a
+      >
       <a mat-list-item routerLink="/reset">withReset</a>
       <a mat-list-item routerLink="/immutable-state">withImmutableState</a>
     </mat-nav-list>

apps/demo/src/app/devtools/todo-detail.component.ts

@@ -1,13 +1,13 @@
 import { Component, effect, inject, input } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { Todo } from './todo-store';
 import { patchState, signalStore, withHooks, withState } from '@ngrx/signals';
 import {
   renameDevtoolsName,
   withDevtools,
   withGlitchTracking,
   withMapper,
 } from '@angular-architects/ngrx-toolkit';
+import { Todo } from '../shared/todo.service';
 
 /**
  * This Store can be instantiated multiple times, if the user

apps/demo/src/app/devtools/todo-store.ts

@@ -12,17 +12,8 @@ import {
   withEntities,
 } from '@ngrx/signals/entities';
 import { updateState, withDevtools } from '@angular-architects/ngrx-toolkit';
-import { computed } from '@angular/core';
-
-export interface Todo {
-  id: number;
-  name: string;
-  finished: boolean;
-  description?: string;
-  deadline?: Date;
-}
-
-export type AddTodo = Omit<Todo, 'id'>;
+import { computed, inject } from '@angular/core';
+import { Todo, AddTodo, TodoService } from '../shared/todo.service';
 
 export const TodoStore = signalStore(
   { providedIn: 'root' },
@@ -72,41 +63,9 @@ export const TodoStore = signalStore(
     ),
   })),
   withHooks({
-    onInit: (store) => {
-      store.add({
-        name: 'Go for a Walk',
-        finished: false,
-        description:
-          'Go for a walk in the park to relax and enjoy nature. Walking is a great way to clear your mind and get some exercise. It can help reduce stress and improve your mood. Make sure to wear comfortable shoes and bring a bottle of water. Enjoy the fresh air and take in the scenery around you.',
-      });
-
-      store.add({
-        name: 'Read a Book',
-        finished: false,
-        description:
-          'Spend some time reading a book. It can be a novel, a non-fiction book, or any other genre you enjoy. Reading can help you relax and learn new things.',
-      });
-
-      store.add({
-        name: 'Write a Journal',
-        finished: false,
-        description:
-          'Take some time to write in your journal. Reflect on your day, your thoughts, and your feelings. Journaling can be a great way to process emotions and document your life.',
-      });
-
-      store.add({
-        name: 'Exercise',
-        finished: false,
-        description:
-          'Do some physical exercise. It can be a workout, a run, or any other form of exercise you enjoy. Exercise is important for maintaining physical and mental health.',
-      });
-
-      store.add({
-        name: 'Cook a Meal',
-        finished: false,
-        description:
-          'Prepare a meal for yourself or your family. Cooking can be a fun and rewarding activity. Try out a new recipe or make one of your favorite dishes.',
-      });
+    onInit: (store, todoService = inject(TodoService)) => {
+      const todos = todoService.getData();
+      todos.forEach((todo) => store.add(todo));
     },
   })
 );

apps/demo/src/app/devtools/todo.component.ts

@@ -3,9 +3,10 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { SelectionModel } from '@angular/cdk/collections';
-import { Todo, TodoStore } from './todo-store';
+import { TodoStore } from './todo-store';
 import { TodoDetailComponent } from './todo-detail.component';
 import { FormsModule } from '@angular/forms';
+import { Todo } from '../shared/todo.service';
 
 @Component({
   selector: 'demo-todo',

apps/demo/src/app/lazy-routes.ts

@@ -9,6 +9,7 @@ import { FlightSearchWithPaginationComponent } from './flight-search-with-pagina
 import { FlightSearchReducConnectorComponent } from './flight-search-redux-connector/flight-search.component';
 import { provideFlightStore } from './flight-search-redux-connector/+state/redux';
 import { TodoComponent } from './devtools/todo.component';
+import { TodoIndexeddbSyncComponent } from './todo-indexeddb-sync/todo-indexeddb-sync.component';
 
 export const lazyRoutes: Route[] = [
   { path: 'todo', component: TodoComponent },
@@ -28,6 +29,7 @@ export const lazyRoutes: Route[] = [
   },
   { path: 'flight-edit-dynamic/:id', component: FlightEditDynamicComponent },
   { path: 'todo-storage-sync', component: TodoStorageSyncComponent },
+  { path: 'todo-indexeddb-sync', component: TodoIndexeddbSyncComponent },
   {
     path: 'flight-search-redux-connector',
     providers: [provideFlightStore()],
@@ -44,5 +46,5 @@ export const lazyRoutes: Route[] = [
       import('./immutable-state/immutable-state.component').then(
         (m) => m.ImmutableStateComponent
       ),
-  },
+  }
 ];

apps/demo/src/app/shared/todo.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+
+export interface Todo {
+  id: number;
+  name: string;
+  finished: boolean;
+  description?: string;
+  deadline?: Date;
+}
+
+export type AddTodo = Omit<Todo, 'id'>;
+
+@Injectable({ providedIn: 'root' })
+export class TodoService {
+  getData(): AddTodo[] {
+    return [
+      {
+        name: 'Go for a Walk',
+        finished: false,
+        description:
+          'Go for a walk in the park to relax and enjoy nature. Walking is a great way to clear your mind and get some exercise. It can help reduce stress and improve your mood. Make sure to wear comfortable shoes and bring a bottle of water. Enjoy the fresh air and take in the scenery around you.',
+      },
+      {
+        name: 'Read a Book',
+        finished: false,
+        description:
+          'Spend some time reading a book. It can be a novel, a non-fiction book, or any other genre you enjoy. Reading can help you relax and learn new things.',
+      },
+      {
+        name: 'Write a Journal',
+        finished: false,
+        description:
+          'Take some time to write in your journal. Reflect on your day, your thoughts, and your feelings. Journaling can be a great way to process emotions and document your life.',
+      },
+      {
+        name: 'Exercise',
+        finished: false,
+        description:
+          'Do some physical exercise. It can be a workout, a run, or any other form of exercise you enjoy. Exercise is important for maintaining physical and mental health.',
+      },
+      {
+        name: 'Cook a Meal',
+        finished: false,
+        description:
+          'Prepare a meal for yourself or your family. Cooking can be a fun and rewarding activity. Try out a new recipe or make one of your favorite dishes.',
+      },
+    ];
+  }
+}

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

@@ -0,0 +1,46 @@
+import { patchState, signalStore, withHooks, withMethods } from '@ngrx/signals';
+import {
+  withEntities,
+  setEntity,
+  removeEntity,
+  updateEntity,
+} from '@ngrx/signals/entities';
+import { withStorageSync } from '@angular-architects/ngrx-toolkit';
+import { inject } from '@angular/core';
+import { Todo, TodoService, AddTodo } from '../shared/todo.service';
+
+export const SyncedTodoStore = signalStore(
+  { providedIn: 'root' },
+  withEntities<Todo>(),
+  withStorageSync({
+    storageType: 'indexedDB',
+    dbName: 'todos',
+    storeName: 'todos',
+  }),
+  withMethods((store) => {
+    let currentId = 0;
+    return {
+      add(todo: AddTodo) {
+        patchState(store, setEntity({ id: ++currentId, ...todo }));
+      },
+
+      remove(id: number) {
+        patchState(store, removeEntity(id));
+      },
+
+      toggleFinished(id: number): void {
+        const todo = store.entityMap()[id];
+        patchState(
+          store,
+          updateEntity({ id, changes: { finished: !todo.finished } })
+        );
+      },
+    };
+  }),
+  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.html

@@ -0,0 +1,45 @@
+<h2>StorageType:IndexedDB</h2>
+<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <h2>IndexedDB</h2>
+  <!-- Checkbox Column -->
+  <ng-container matColumnDef="finished">
+    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+    <mat-cell *matCellDef="let row" class="actions">
+      <mat-checkbox
+        (click)="$event.stopPropagation()"
+        (change)="checkboxLabel(row)"
+        [checked]="row.finished"
+      >
+      </mat-checkbox>
+      <mat-icon (click)="removeTodo(row)">delete</mat-icon>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
+  </ng-container>
+
+  <!-- Description Column -->
+  <ng-container matColumnDef="description">
+    <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
+    <mat-cell *matCellDef="let element">{{ element.description }}</mat-cell>
+  </ng-container>
+
+  <!-- Deadline Column -->
+  <ng-container matColumnDef="deadline">
+    <mat-header-cell mat-header-cell *matHeaderCellDef
+      >Deadline</mat-header-cell
+    >
+    <mat-cell mat-cell *matCellDef="let element">{{
+      element.deadline
+    }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row
+    *matRowDef="let row; columns: displayedColumns"
+    (click)="selection.toggle(row)"
+  ></mat-row>
+</mat-table>

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

@@ -0,0 +1,35 @@
+import { Component, effect, inject } from '@angular/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { SyncedTodoStore } from './synced-todo-store';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Todo } from '../shared/todo.service';
+
+@Component({
+  selector: 'demo-todo-indexeddb-sync',
+  imports: [MatCheckboxModule, MatIconModule, MatTableModule],
+  templateUrl: './todo-indexeddb-sync.component.html',
+  styleUrl: './todo-indexeddb-sync.component.scss',
+})
+export class TodoIndexeddbSyncComponent {
+  todoStore = inject(SyncedTodoStore);
+
+  displayedColumns: string[] = ['finished', 'name', 'description', 'deadline'];
+  dataSource = new MatTableDataSource<Todo>([]);
+  selection = new SelectionModel<Todo>(true, []);
+
+  constructor() {
+    effect(() => {
+      this.dataSource.data = this.todoStore.entities();
+    });
+  }
+
+  checkboxLabel(todo: Todo) {
+    this.todoStore.toggleFinished(todo.id);
+  }
+
+  removeTodo(todo: Todo) {
+    this.todoStore.remove(todo.id);
+  }
+}