@angular-libs/signal-storage 0.2.0-beta.2 → 0.2.0

package/README.md

@@ -1,14 +1,27 @@
 # @angular-libs/signal-storage
 
-A lightweight, type-safe Angular library for reactive state management using Signals. It provides seamless syncing with **localStorage**, **sessionStorage**, **IndexedDB** (via Angular Resources), and **In-Memory** storage.
+[Docs @angular-libs/signal-storage](https://www.npmjs.com/package/@angular-libs/signal-storage)
+
+[StackBlitz demo](https://stackblitz.com/edit/signal-storage?file=src%2Fmain.ts)
+
+`npm install @angular-libs/signal-storage`
 
-[StackBlitz demo](https://stackblitz.com/edit/signal-storage?file=src%2Fmain.ts) | `npm install @angular-libs/signal-storage`
+A lightweight, type-safe Angular library for reactive state management using Signals. It provides seamless syncing with **localStorage**, **sessionStorage**, **IndexedDB** (via Angular Resources), and **In-Memory** storage.
 
 ---
 
-## 🚀 1. Sync Storage (localStorage / sessionStorage)
+## Usage
+
+### 💾 1. `SignalStorage` service
+
+Perfect for lightweight, synchronous key-value storage.
 
-Perfect for lightweight, synchronous key-value storage. By default, it uses `localStorage` (falling back to memory for SSR).
+Supports:
+
+- `localStorage` (default)
+- `sessionStorage`
+- `MemoryStorage` (similar to NgRx SignalStore)
+- Custom
 
 ```typescript
 import { Component, inject } from '@angular/core';
@@ -23,7 +36,7 @@ interface AppState {
   template: `<button (click)="toggle()">{{ theme() }}</button>`,
 })
 export class AppComponent {
-  private storage = inject(SignalStorage<AppState>);
+  private storage: SignalStorage<AppState> = inject(SignalStorage);
   theme = this.storage.getSignal('theme', 'light');
 
   toggle() {
@@ -32,26 +45,32 @@ export class AppComponent {
 }
 ```
 
-### Changing the Sync Storage Provider
+#### Changing the Sync Storage Provider
 
-You can switch to `sessionStorage` or a purely `MemoryStorage` (similar to NgRx SignalStore without persistence) via providers:
+You can switch to `sessionStorage`, `MemoryStorage` or custom via providers:
 
 ```typescript
-import { SIGNAL_STORAGE_TOKEN, MemoryStorage } from '@angular-libs/signal-storage';
+import { SIGNAL_STORAGE_CONFIG, MemoryStorage } from '@angular-libs/signal-storage';
 
 // In app.config.ts
 providers: [
-  // For Session Storage:
-  { provide: SIGNAL_STORAGE_TOKEN, useFactory: () => window.sessionStorage },
+  // For Pure Memory Storage:
+  {
+    provide: SIGNAL_STORAGE_CONFIG,
+    useValue: { storageFactory: () => new MemoryStorage() },
+  },
 
-  // OR for Pure Memory Storage:
-  { provide: SIGNAL_STORAGE_TOKEN, useClass: MemoryStorage },
+  // For Session Storage:
+  {
+    provide: SIGNAL_STORAGE_CONFIG,
+    useValue: { storageFactory: () => window.sessionStorage },
+  },
 ];
 ```
 
 ---
 
-## ⚡ 2. Async Storage (IndexedDB + Angular Resources)
+### 💾 2. Async `SignalIndexedDB` service (IndexedDB + Angular Resources)
 
 Ideal for larger amounts of data. It uses Angular's new `resource` API and supports automatic cross-tab synchronization.
 
@@ -87,7 +106,7 @@ interface AppData {
   `,
 })
 export class ProfileComponent {
-  private db = inject(SignalIndexedDB<AppData>);
+  private db: SignalIndexedDB<AppData> = inject(SignalIndexedDB);
 
   // Automatically fetches from IndexedDB as a ResourceRef
   profile = this.db.getResource('user');
@@ -100,25 +119,23 @@ export class ProfileComponent {
 
 ---
 
-## 🛠 3. Advanced: Multiple Storage Instances
+### 🛠 3. Advanced: Multiple Storage Instances
 
 Need `localStorage` AND `MemoryStorage` in the same app? Extend the base class:
 
 ```typescript
-import { Injectable } from '@angular/core';
-import { SignalStorage, MemoryStorage } from '@angular-libs/signal-storage';
+import { Injectable, inject, Injector } from '@angular/core';
+import { MemoryStorage, SignalStorage, SignalIndexedDB } from '@angular-libs/signal-storage';
 
+// Store 1
 interface LocalState {
   user: string;
 }
 
 @Injectable({ providedIn: 'root' })
-export class LocalStore extends SignalStorage<LocalState> {
-  constructor() {
-    super(typeof window !== 'undefined' ? window.localStorage : new MemoryStorage());
-  }
-}
+export class LocalStore extends SignalStorage<LocalState> {}
 
+// Store 2
 interface TempState {
   tempId: string;
 }
@@ -126,17 +143,11 @@ interface TempState {
 @Injectable({ providedIn: 'root' })
 export class TempStore extends SignalStorage<TempState> {
   constructor() {
-    super(new MemoryStorage());
+    super({ storageFactory: () => new MemoryStorage() });
   }
 }
-```
-
-The same applies for `SignalIndexedDB` if you need multiple different databases:
-
-```typescript
-import { Injectable, Injector, inject } from '@angular/core';
-import { SignalIndexedDB } from '@angular-libs/signal-storage';
 
+// Store 3
 interface UserDbState {
   user: { name: string; email: string };
 }
@@ -147,17 +158,6 @@ export class UserDb extends SignalIndexedDB<UserDbState> {
     super(inject(Injector), { dbName: 'UserDb', storeName: 'keyValue', version: 1 });
   }
 }
-
-interface SettingsDbState {
-  settings: { theme: 'light' | 'dark' };
-}
-
-@Injectable({ providedIn: 'root' })
-export class SettingsDb extends SignalIndexedDB<SettingsDbState> {
-  constructor() {
-    super(inject(Injector), { dbName: 'SettingsDb', storeName: 'keyValue', version: 1 });
-  }
-}
 ```
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-libs/signal-storage",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0",
   "peerDependencies": {
     "@angular/common": ">=19.0.0",
     "@angular/core": ">=19.0.0"