@asaidimu/utils-persistence 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/README.md +830 -0
- package/index.d.mts +82 -0
- package/index.d.ts +82 -0
- package/index.js +2290 -0
- package/index.mjs +2282 -0
- package/package.json +69 -0
package/README.md
ADDED
@@ -0,0 +1,830 @@
|
|
1
|
+
# `@asaidimu/utils-persistence` - Robust Data Persistence for Web Applications
|
2
|
+
|
3
|
+
[](https://www.npmjs.com/package/@asaidimu/utils-persistence)
|
4
|
+
[](LICENSE)
|
5
|
+
[](https://github.com/asaidimu/erp-utils-actions)
|
6
|
+
|
7
|
+
---
|
8
|
+
|
9
|
+
## đ Table of Contents
|
10
|
+
|
11
|
+
* [Overview & Features](#overview--features)
|
12
|
+
* [Installation & Setup](#installation--setup)
|
13
|
+
* [Usage Documentation](#usage-documentation)
|
14
|
+
* [Core Interface: `SimplePersistence`](#core-interface-simplepersistence)
|
15
|
+
* [Web Storage Persistence (`WebStoragePersistence`)](#web-storage-persistence-webstoragepersistence)
|
16
|
+
* [IndexedDB Persistence (`IndexedDBPersistence`)](#indexeddb-persistence-indexeddbpersistence)
|
17
|
+
* [Ephemeral Persistence (`EphemeralPersistence`)](#ephemeral-persistence-ephemeralpersistence)
|
18
|
+
* [Common Use Cases](#common-use-cases)
|
19
|
+
* [Project Architecture](#project-architecture)
|
20
|
+
* [Development & Contributing](#development--contributing)
|
21
|
+
* [Additional Information](#additional-information)
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## ⨠Overview & Features
|
26
|
+
|
27
|
+
`@asaidimu/utils-persistence` is a lightweight, type-safe library designed to simplify robust data persistence in modern web applications. It provides a unified, asynchronous-friendly API for interacting with various browser storage mechanisms, including `localStorage`, `sessionStorage`, `IndexedDB`, and even an in-memory store. A core strength of this library is its built-in support for **cross-instance synchronization**, ensuring that state changes made in one browser tab, window, or even a logically separate component instance within the same tab, are automatically reflected and propagated to other active instances using the same persistence mechanism. This enables seamless, real-time data consistency across your application.
|
28
|
+
|
29
|
+
This library is ideal for single-page applications (SPAs) that require robust state management, offline capabilities, or seamless data synchronization across multiple browser instances. By abstracting away the complexities of different storage APIs and handling synchronization, it allows developers to focus on application logic rather than intricate persistence details. It integrates smoothly with popular state management libraries or can be used standalone for direct data access.
|
30
|
+
|
31
|
+
### đ Key Features
|
32
|
+
|
33
|
+
* **Unified `SimplePersistence<T>` API**: A consistent interface for all storage adapters, simplifying integration and making switching storage types straightforward.
|
34
|
+
* **Flexible Storage Options**:
|
35
|
+
* `WebStoragePersistence`: Supports both `localStorage` (default) and `sessionStorage` for simple key-value storage. Ideal for user preferences or small, temporary data.
|
36
|
+
* `IndexedDBPersistence`: Provides robust, high-capacity, and structured data storage for more complex needs like offline caching or large datasets. Leverages `@asaidimu/indexed` for simplified IndexedDB interactions.
|
37
|
+
* `EphemeralPersistence`: Offers an in-memory store with cross-tab synchronization using a Last Write Wins (LWW) strategy. Ideal for transient, session-specific shared state that does not need to persist across page reloads.
|
38
|
+
* **Automatic Cross-Instance Synchronization**: Real-time updates across multiple browser tabs, windows, or even components within the same tab. This is achieved by leveraging native `StorageEvent` (for `localStorage`) and `BroadcastChannel`-based event buses (for `WebStoragePersistence`, `IndexedDBPersistence`, and `EphemeralPersistence`).
|
39
|
+
* **Type-Safe**: Fully written in TypeScript, providing strong typing, compile-time checks, and autocompletion for a better developer experience.
|
40
|
+
* **Lightweight & Minimal Dependencies**: Designed to be small and efficient, relying on a few focused internal utilities (`@asaidimu/events`, `@asaidimu/indexed`, `@asaidimu/query`).
|
41
|
+
* **Robust Error Handling**: Includes internal error handling for common storage operations, providing clearer debugging messages when issues arise.
|
42
|
+
* **Instance-Specific Subscriptions**: The `subscribe` method intelligently uses a unique `instanceId` to listen for changes from *other* instances of the application (e.g., other tabs or different components sharing the same store), deliberately preventing self-triggered updates and enabling efficient state reconciliation without infinite loops.
|
43
|
+
* **Asynchronous Operations**: `IndexedDBPersistence` methods return Promises, allowing for non-blocking UI and efficient handling of large data operations. `WebStoragePersistence` and `EphemeralPersistence` are synchronous where possible, but their cross-tab synchronization aspects are asynchronous.
|
44
|
+
|
45
|
+
---
|
46
|
+
|
47
|
+
## đĻ Installation & Setup
|
48
|
+
|
49
|
+
### Prerequisites
|
50
|
+
|
51
|
+
To use `@asaidimu/utils-persistence`, you need:
|
52
|
+
|
53
|
+
* Node.js (LTS version recommended)
|
54
|
+
* npm or Yarn package manager
|
55
|
+
* A modern web browser environment (e.g., Chrome, Firefox, Safari, Edge) that supports `localStorage`, `sessionStorage`, `IndexedDB`, and `BroadcastChannel`.
|
56
|
+
|
57
|
+
### Installation Steps
|
58
|
+
|
59
|
+
Install the package using your preferred package manager:
|
60
|
+
|
61
|
+
```bash
|
62
|
+
# Using Yarn
|
63
|
+
bun add @asaidimu/utils-persistence
|
64
|
+
```
|
65
|
+
|
66
|
+
### Configuration
|
67
|
+
|
68
|
+
This library does not require global configuration. All settings are passed directly to the constructor of the respective persistence adapter during instantiation.
|
69
|
+
|
70
|
+
### Verification
|
71
|
+
|
72
|
+
You can quickly verify the installation by attempting to import one of the classes:
|
73
|
+
|
74
|
+
```typescript
|
75
|
+
// Import in your application code (e.g., an entry point or component)
|
76
|
+
import { WebStoragePersistence, IndexedDBPersistence, EphemeralPersistence } from '@asaidimu/utils-persistence';
|
77
|
+
|
78
|
+
console.log('Persistence modules loaded successfully!');
|
79
|
+
|
80
|
+
// You can now create instances:
|
81
|
+
// const myLocalStorageStore = new WebStoragePersistence<{ appState: string }>('my-app-state');
|
82
|
+
// const myIndexedDBStore = new IndexedDBPersistence<{ userId: string; data: any }>({
|
83
|
+
// store: 'user-settings',
|
84
|
+
// database: 'app-db',
|
85
|
+
// collection: 'settings'
|
86
|
+
// });
|
87
|
+
// const myEphemeralStore = new EphemeralPersistence<{ sessionCount: number }>('session-counter');
|
88
|
+
```
|
89
|
+
|
90
|
+
---
|
91
|
+
|
92
|
+
## đ Usage Documentation
|
93
|
+
|
94
|
+
The library exposes a common interface `SimplePersistence<T>` that all adapters adhere to, allowing for interchangeable persistence strategies.
|
95
|
+
|
96
|
+
### Core Interface: `SimplePersistence`
|
97
|
+
|
98
|
+
Every persistence adapter in this library implements the `SimplePersistence<T>` interface, where `T` is the type of data you want to persist. This interface is designed to be flexible, supporting both synchronous and asynchronous operations, and is especially geared towards handling multi-instance scenarios (e.g., multiple browser tabs or independent components sharing the same data).
|
99
|
+
|
100
|
+
#### The Power of Adapters
|
101
|
+
The adapter pattern used by `SimplePersistence<T>` is a key strength, enabling seamless swapping of persistence backends without altering application logic. This decoupling offers several advantages:
|
102
|
+
- **Interchangeability**: Switch between storage mechanisms (e.g., `localStorage`, `IndexedDB`, an in-memory store, or a remote API) by simply changing the adapter, keeping the interface consistent.
|
103
|
+
- **Scalability**: Start with a lightweight adapter (e.g., `EphemeralPersistence` for prototyping) and transition to a robust solution (e.g., `IndexedDBPersistence` or a server-based database) as needs evolve, with minimal changes to the consuming code.
|
104
|
+
- **Extensibility**: Easily create custom adapters for new storage technologies or environments (e.g., file systems, serverless functions) while adhering to the same interface.
|
105
|
+
- **Environment-Agnostic**: Use the same interface in browser, server, or hybrid applications, supporting diverse use cases like offline-first apps or cross-tab synchronization.
|
106
|
+
- **Testing Simplicity**: Implement mock adapters for testing, isolating persistence logic without touching real storage.
|
107
|
+
|
108
|
+
This flexibility ensures that the persistence layer can adapt to varying requirements, from small-scale prototypes to production-grade systems, while maintaining a consistent and predictable API.
|
109
|
+
|
110
|
+
```typescript
|
111
|
+
export interface SimplePersistence<T> {
|
112
|
+
/**
|
113
|
+
* Persists data to storage.
|
114
|
+
*
|
115
|
+
* @param id The **unique identifier of the *consumer instance*** making the change. This is NOT the ID of the data (`T`) itself.
|
116
|
+
* Think of it as the ID of the specific browser tab, component, or module that's currently interacting with the persistence layer.
|
117
|
+
* It should typically be a **UUID** generated once at the consumer instance's instantiation.
|
118
|
+
* This `id` is crucial for the `subscribe` method, helping to differentiate updates originating from the current instance versus other instances/tabs, thereby preventing self-triggered notification loops.
|
119
|
+
* @param state The state (of type T) to persist. This state is generally considered the **global or shared state** that all instances interact with.
|
120
|
+
* @returns `true` if the operation was successful, `false` if an error occurred. For asynchronous implementations (like `IndexedDBPersistence`), this returns a `Promise<boolean>`.
|
121
|
+
*/
|
122
|
+
set(id: string, state: T): boolean | Promise<boolean>;
|
123
|
+
|
124
|
+
/**
|
125
|
+
* Retrieves the global persisted data from storage.
|
126
|
+
*
|
127
|
+
* @returns The retrieved state of type `T`, or `null` if no data is found or if an error occurs during retrieval/parsing.
|
128
|
+
* For asynchronous implementations, this returns a `Promise<T | null>`.
|
129
|
+
*/
|
130
|
+
get(): (T | null) | (Promise<T | null>);
|
131
|
+
|
132
|
+
/**
|
133
|
+
* Subscribes to changes in the global persisted data that originate from *other* instances of your application (e.g., other tabs or independent components using the same persistence layer).
|
134
|
+
*
|
135
|
+
* @param id The **unique identifier of the *consumer instance* subscribing**. This allows the persistence implementation to filter out notifications that were initiated by the subscribing instance itself.
|
136
|
+
* @param callback The function to call when the global persisted data changes from *another* source. The new state (`T`) is passed as an argument to this callback.
|
137
|
+
* @returns A function that, when called, will unsubscribe the provided callback from future updates. Call this when your component or instance is no longer active to prevent memory leaks.
|
138
|
+
*/
|
139
|
+
subscribe(id: string, callback: (state: T) => void): () => void;
|
140
|
+
|
141
|
+
/**
|
142
|
+
* Clears (removes) the entire global persisted data from storage.
|
143
|
+
*
|
144
|
+
* @returns `true` if the operation was successful, `false` if an error occurred. For asynchronous implementations, this returns a `Promise<boolean>`.
|
145
|
+
*/
|
146
|
+
clear(): boolean | Promise<boolean>;
|
147
|
+
}
|
148
|
+
```
|
149
|
+
|
150
|
+
### Usage and Implementation Guidelines
|
151
|
+
|
152
|
+
This section provides practical advice for consuming the `SimplePersistence<T>` interface.
|
153
|
+
|
154
|
+
#### 1. Understanding the `id` Parameter: **Consumer Instance ID, NOT Data ID**
|
155
|
+
|
156
|
+
This is the most crucial point to grasp:
|
157
|
+
|
158
|
+
* **`id` does NOT refer to an ID *within* your data type `T`**. If your `T` represents a complex object (e.g., `{ users: User[]; settings: AppSettings; }`), any IDs for `User` objects or specific settings should be managed *inside* your `T` type.
|
159
|
+
* **`id` refers to the unique identifier of the *consumer instance* that is interacting with the persistence layer.**
|
160
|
+
* Think of a "consumer instance" as a specific browser tab, a running web worker, a distinct application component, or any other isolated context that uses `SimplePersistence`.
|
161
|
+
* This `id` should be a **UUID (Universally Unique Identifier)**, generated **once** when that consumer instance initializes.
|
162
|
+
|
163
|
+
**Why is this `id` essential?**
|
164
|
+
|
165
|
+
It enables robust **multi-instance synchronization**. When multiple instances (e.g., different browser tabs) share the same underlying storage, the `id` allows the persistence layer to:
|
166
|
+
* **Identify the source of a change:** When `set(id, state)` is called, the layer knows *which* instance initiated the save.
|
167
|
+
* **Filter notifications:** The `subscribe(id, callback)` method uses this `id` to ensure that a subscribing instance is notified of changes *only* if they originated from *another* instance, preventing unnecessary self-triggered updates.
|
168
|
+
|
169
|
+
#### 2. Usage Guidelines (For those consuming the `SimplePersistence` interface)
|
170
|
+
|
171
|
+
##### 2.1 Generating and Managing the Consumer `instanceId`
|
172
|
+
|
173
|
+
* **Generate Once:** Create a unique UUID for your consumer instance at its very beginning (e.g., when your main application component mounts or your service initializes).
|
174
|
+
```typescript
|
175
|
+
import { v4 as uuidv4 } from 'uuid'; // Requires 'uuid' library to be installed: `npm install uuid`
|
176
|
+
|
177
|
+
interface MyAppState {
|
178
|
+
data: string;
|
179
|
+
lastUpdated: number;
|
180
|
+
}
|
181
|
+
|
182
|
+
class MyAppComponent {
|
183
|
+
private instanceId: string;
|
184
|
+
private persistence: SimplePersistence<MyAppState>;
|
185
|
+
private unsubscribe: (() => void) | null = null; // To store the unsubscribe function
|
186
|
+
private appState: MyAppState = { data: 'initial', lastUpdated: Date.now() };
|
187
|
+
|
188
|
+
constructor(persistenceAdapter: SimplePersistence<MyAppState>) {
|
189
|
+
this.instanceId = uuidv4(); // Generate unique ID for this app/tab instance
|
190
|
+
this.persistence = persistenceAdapter;
|
191
|
+
this.initializePersistence();
|
192
|
+
}
|
193
|
+
|
194
|
+
private async initializePersistence() {
|
195
|
+
// Load initial state
|
196
|
+
const storedState = await this.persistence.get();
|
197
|
+
if (storedState) {
|
198
|
+
console.log(`Instance ${this.instanceId}: Loaded initial state.`, storedState);
|
199
|
+
this.appState = storedState; // Update your app's internal state with loaded data
|
200
|
+
}
|
201
|
+
|
202
|
+
// Subscribe to changes from other instances
|
203
|
+
this.unsubscribe = this.persistence.subscribe(this.instanceId, (newState) => {
|
204
|
+
console.log(`Instance ${this.instanceId}: Received global state update from another instance.`, newState);
|
205
|
+
// Crucial: Update your local application state based on this shared change
|
206
|
+
this.appState = newState;
|
207
|
+
});
|
208
|
+
}
|
209
|
+
|
210
|
+
// Call this when the component/app instance is being destroyed or unmounted
|
211
|
+
cleanup() {
|
212
|
+
if (this.unsubscribe) {
|
213
|
+
this.unsubscribe(); // Stop listening to updates
|
214
|
+
console.log(`Instance ${this.instanceId}: Unsubscribed from updates.`);
|
215
|
+
}
|
216
|
+
}
|
217
|
+
|
218
|
+
async updateAppState(newData: string) {
|
219
|
+
this.appState = { ...this.appState, data: newData, lastUpdated: Date.now() };
|
220
|
+
console.log(`Instance ${this.instanceId}: Attempting to save new state:`, this.appState);
|
221
|
+
const success = await this.persistence.set(this.instanceId, this.appState);
|
222
|
+
if (!success) {
|
223
|
+
console.error(`Instance ${this.instanceId}: Failed to save app state.`);
|
224
|
+
} else {
|
225
|
+
console.log(`Instance ${this.instanceId}: State saved successfully.`);
|
226
|
+
}
|
227
|
+
}
|
228
|
+
|
229
|
+
getCurrentState(): MyAppState {
|
230
|
+
return this.appState;
|
231
|
+
}
|
232
|
+
}
|
233
|
+
|
234
|
+
// Example of how to use:
|
235
|
+
// const webStore = new WebStoragePersistence<MyAppState>('my-shared-app-state');
|
236
|
+
// const appInstance = new MyAppComponent(webStore);
|
237
|
+
|
238
|
+
// // Simulate an update from this instance
|
239
|
+
// appInstance.updateAppState('New data from tab 1');
|
240
|
+
|
241
|
+
// // Simulate a cleanup (e.g., when the component unmounts)
|
242
|
+
// // appInstance.cleanup();
|
243
|
+
```
|
244
|
+
|
245
|
+
##### 2.2 Using `set(id, state)`
|
246
|
+
|
247
|
+
* Always pass the unique `instanceId` of your consumer when calling `set`.
|
248
|
+
* The `state` object you pass will overwrite the entire global persisted state. Ensure it contains all necessary data.
|
249
|
+
```typescript
|
250
|
+
import { WebStoragePersistence } from '@asaidimu/utils-persistence';
|
251
|
+
import { v4 as uuidv4 } from 'uuid';
|
252
|
+
|
253
|
+
interface Settings { theme: string; }
|
254
|
+
const settingsStore = new WebStoragePersistence<Settings>('app-settings');
|
255
|
+
const myInstanceId = uuidv4();
|
256
|
+
|
257
|
+
async function saveSettings(newSettings: Settings) {
|
258
|
+
console.log(`Instance ${myInstanceId}: Attempting to save settings.`);
|
259
|
+
const success = await settingsStore.set(myInstanceId, newSettings);
|
260
|
+
if (!success) {
|
261
|
+
console.error(`Instance ${myInstanceId}: Failed to save settings.`);
|
262
|
+
} else {
|
263
|
+
console.log(`Instance ${myInstanceId}: Settings saved successfully.`);
|
264
|
+
}
|
265
|
+
}
|
266
|
+
|
267
|
+
// Example:
|
268
|
+
// saveSettings({ theme: 'dark' });
|
269
|
+
```
|
270
|
+
|
271
|
+
##### 2.3 Using `get()`
|
272
|
+
|
273
|
+
* `get()` retrieves the *entire global, shared* persisted state. It does *not* take an `id` because it's designed to fetch the single, overarching state accessible by all instances.
|
274
|
+
* The returned `T | null` (or `Promise<T | null>`) should be used to initialize or update your application's local state.
|
275
|
+
```typescript
|
276
|
+
import { WebStoragePersistence } from '@asaidimu/utils-persistence';
|
277
|
+
|
278
|
+
interface Settings { theme: string; }
|
279
|
+
const settingsStore = new WebStoragePersistence<Settings>('app-settings');
|
280
|
+
|
281
|
+
async function retrieveGlobalState() {
|
282
|
+
const storedState = await settingsStore.get(); // Await for async adapters
|
283
|
+
if (storedState) {
|
284
|
+
console.log("Retrieved global app settings:", storedState);
|
285
|
+
// Integrate storedState into your application's current state
|
286
|
+
} else {
|
287
|
+
console.log("No global app settings found in storage.");
|
288
|
+
}
|
289
|
+
}
|
290
|
+
|
291
|
+
// Example:
|
292
|
+
// retrieveGlobalState();
|
293
|
+
```
|
294
|
+
|
295
|
+
##### 2.4 Using `subscribe(id, callback)`
|
296
|
+
|
297
|
+
* Pass your consumer `instanceId` as the first argument.
|
298
|
+
* The `callback` will be invoked when the global persisted state changes due to a `set` operation initiated by *another* consumer instance.
|
299
|
+
* **Always store the returned unsubscribe function** and call it when your consumer instance is no longer active (e.g., component unmounts, service shuts down) to prevent memory leaks and unnecessary processing.
|
300
|
+
|
301
|
+
```typescript
|
302
|
+
import { WebStoragePersistence } from '@asaidimu/utils-persistence';
|
303
|
+
import { v4 as uuidv4 } from 'uuid';
|
304
|
+
|
305
|
+
interface NotificationState { count: number; lastMessage: string; }
|
306
|
+
const notificationStore = new WebStoragePersistence<NotificationState>('app-notifications');
|
307
|
+
const myInstanceId = uuidv4();
|
308
|
+
|
309
|
+
const unsubscribe = notificationStore.subscribe(myInstanceId, (newState) => {
|
310
|
+
console.log(`đ Received update from another instance:`, newState);
|
311
|
+
// Update UI or internal state based on `newState`
|
312
|
+
});
|
313
|
+
|
314
|
+
// To simulate a change from another instance, open a new browser tab
|
315
|
+
// and run something like:
|
316
|
+
// const anotherInstance = uuidv4();
|
317
|
+
// const anotherNotificationStore = new WebStoragePersistence<NotificationState>('app-notifications');
|
318
|
+
// anotherNotificationStore.set(anotherInstance, { count: 5, lastMessage: 'New notification!' });
|
319
|
+
|
320
|
+
// When no longer needed:
|
321
|
+
// unsubscribe();
|
322
|
+
// console.log("Unsubscribed from notification updates.");
|
323
|
+
```
|
324
|
+
|
325
|
+
##### 2.5 Using `clear()`
|
326
|
+
|
327
|
+
* `clear()` performs a global reset, completely removing the shared persisted data for *all* instances. Use with caution.
|
328
|
+
```typescript
|
329
|
+
import { WebStoragePersistence } from '@asaidimu/utils-persistence';
|
330
|
+
|
331
|
+
interface UserData { username: string; }
|
332
|
+
const userDataStore = new WebStoragePersistence<UserData>('user-data');
|
333
|
+
|
334
|
+
async function resetUserData() {
|
335
|
+
console.log("Attempting to clear all persisted user data...");
|
336
|
+
const success = await userDataStore.clear(); // Await for async adapters
|
337
|
+
if (success) {
|
338
|
+
console.log("All persisted user data cleared successfully.");
|
339
|
+
} else {
|
340
|
+
console.error("Failed to clear persisted user data.");
|
341
|
+
}
|
342
|
+
}
|
343
|
+
|
344
|
+
// Example:
|
345
|
+
// resetUserData();
|
346
|
+
```
|
347
|
+
|
348
|
+
#### 3. When to Use and When to Avoid `SimplePersistence`
|
349
|
+
|
350
|
+
To ensure proper use of the `SimplePersistence<T>` interface and prevent misuse, consider the following guidelines for when it is appropriate and when it should be avoided.
|
351
|
+
|
352
|
+
**When to Use**
|
353
|
+
* **Multi-Instance Synchronization**: Ideal for applications where multiple instances (e.g., browser tabs, web workers, or independent components) need to share and synchronize a single global state, such as collaborative web apps, note-taking apps, or shared dashboards.
|
354
|
+
* **Interchangeable Persistence Needs**: Perfect for projects requiring flexibility to switch between storage backends (e.g., `localStorage` for prototyping, `IndexedDB` for production, `EphemeralPersistence` for transient state, or even server-based storage for scalability) without changing application logic.
|
355
|
+
* **Simple Global State Management**: Suitable for managing a single, shared state object (e.g., user settings, app configurations, or a shared data model) that needs to be persisted and accessed across instances.
|
356
|
+
* **Offline-First Applications**: Useful for apps that need to persist state locally and optionally sync with a server when online, leveraging the adapter pattern to handle different storage mechanisms.
|
357
|
+
* **Prototyping and Testing**: Great for quickly implementing persistence with a lightweight adapter (e.g., in-memory or `localStorage`) and later scaling to more robust solutions.
|
358
|
+
|
359
|
+
**When to Avoid**
|
360
|
+
* **Complex Data Relationships**: Avoid using for applications requiring complex data models with relational queries or indexing (e.g., large-scale databases with multiple tables or complex joins). The interface is designed for a single global state, not for managing multiple entities with intricate relationships. For such cases, consider using a dedicated database library (like `@asaidimu/indexed` directly) or a backend service.
|
361
|
+
* **High-Frequency Updates**: Not suitable for scenarios with rapid, high-frequency state changes (e.g., real-time gaming or live data streams that update hundreds of times per second), as the global state overwrite model and broadcasting mechanism may introduce performance bottlenecks.
|
362
|
+
* **Fine-Grained Data Access**: Do not use if you need to persist or retrieve specific parts of the state independently, as `set` and `get` operate on the entire state object, which can be inefficient for very large datasets where only small portions change.
|
363
|
+
* **Critical Data with Strict Consistency**: Not ideal for systems requiring strict consistency guarantees (e.g., financial transactions) across distributed clients, as the interface does not enforce ACID properties or advanced conflict resolution beyond basic Last Write Wins (LWW) semantics for ephemeral storage, or simple overwrite for others.
|
364
|
+
|
365
|
+
### Web Storage Persistence (`WebStoragePersistence`)
|
366
|
+
|
367
|
+
`WebStoragePersistence` uses the browser's `localStorage` (default) or `sessionStorage`. Its `set`, `get`, and `clear` operations are synchronous, meaning they return `boolean` values directly, not Promises. It supports cross-tab synchronization.
|
368
|
+
|
369
|
+
```typescript
|
370
|
+
import { WebStoragePersistence } from '@asaidimu/utils-persistence';
|
371
|
+
import { v4 as uuidv4 } from 'uuid'; // Recommended for generating unique instance IDs
|
372
|
+
|
373
|
+
interface UserPreferences {
|
374
|
+
theme: 'dark' | 'light';
|
375
|
+
notificationsEnabled: boolean;
|
376
|
+
language: string;
|
377
|
+
}
|
378
|
+
|
379
|
+
// Generate a unique instance ID for this specific browser tab/session/component.
|
380
|
+
// This ID is crucial for differentiating self-updates from cross-instance updates.
|
381
|
+
const instanceId = uuidv4();
|
382
|
+
|
383
|
+
// 1. Using localStorage (default for persistent data)
|
384
|
+
// Data stored here will persist across browser sessions.
|
385
|
+
const userPrefsStore = new WebStoragePersistence<UserPreferences>('user-preferences');
|
386
|
+
|
387
|
+
console.log('--- localStorage Example ---');
|
388
|
+
|
389
|
+
// Set initial preferences
|
390
|
+
const initialPrefs: UserPreferences = {
|
391
|
+
theme: 'dark',
|
392
|
+
notificationsEnabled: true,
|
393
|
+
language: 'en-US',
|
394
|
+
};
|
395
|
+
const setResult = userPrefsStore.set(instanceId, initialPrefs);
|
396
|
+
console.log('Preferences set successfully:', setResult); // Expected: true
|
397
|
+
|
398
|
+
// Retrieve data
|
399
|
+
let currentPrefs = userPrefsStore.get();
|
400
|
+
console.log('Current preferences:', currentPrefs);
|
401
|
+
// Expected output: Current preferences: { theme: 'dark', notificationsEnabled: true, language: 'en-US' }
|
402
|
+
|
403
|
+
// Subscribe to changes from *other* tabs/instances.
|
404
|
+
// Open another browser tab to the same application URL to test this.
|
405
|
+
const unsubscribePrefs = userPrefsStore.subscribe(instanceId, (newState) => {
|
406
|
+
console.log('đ Preferences updated from another instance:', newState);
|
407
|
+
// In a real app, you would update your UI or state management system here.
|
408
|
+
// Example: update application theme based on newState.theme
|
409
|
+
});
|
410
|
+
|
411
|
+
// To simulate an update from another tab:
|
412
|
+
// Open a new tab, run this code (generating a *different* instanceId), and call set:
|
413
|
+
// const anotherInstanceId = uuidv4();
|
414
|
+
// const anotherPrefsStore = new WebStoragePersistence<UserPreferences>('user-preferences');
|
415
|
+
// anotherPrefsStore.set(anotherInstanceId, { theme: 'light', notificationsEnabled: false, language: 'es-ES' });
|
416
|
+
// You would then see the "đ Preferences updated from another instance:" message in the first tab.
|
417
|
+
|
418
|
+
// After a while, if no longer needed, unsubscribe
|
419
|
+
// setTimeout(() => {
|
420
|
+
// unsubscribePrefs();
|
421
|
+
// console.log('Unsubscribed from preferences updates.');
|
422
|
+
// }, 5000);
|
423
|
+
|
424
|
+
// Clear data when no longer needed (e.g., user logs out)
|
425
|
+
// const clearResult = userPrefsStore.clear();
|
426
|
+
// console.log('Preferences cleared successfully:', clearResult); // Expected: true
|
427
|
+
// console.log('Preferences after clear:', userPrefsStore.get()); // Expected: null
|
428
|
+
|
429
|
+
console.log('\n--- sessionStorage Example ---');
|
430
|
+
|
431
|
+
// 2. Using sessionStorage (for session-specific data)
|
432
|
+
// Data stored here will only persist for the duration of the browser tab.
|
433
|
+
// It is cleared when the tab is closed.
|
434
|
+
const sessionDataStore = new WebStoragePersistence<{ lastVisitedPage: string }>('session-data', true); // Pass `true` for sessionStorage
|
435
|
+
|
436
|
+
sessionDataStore.set(instanceId, { lastVisitedPage: '/dashboard' });
|
437
|
+
console.log('Session data set:', sessionDataStore.get());
|
438
|
+
// Expected output: Session data set: { lastVisitedPage: '/dashboard' }
|
439
|
+
|
440
|
+
// sessionStorage also supports cross-tab synchronization via BroadcastChannel
|
441
|
+
const unsubscribeSession = sessionDataStore.subscribe(instanceId, (newState) => {
|
442
|
+
console.log('đ Session data updated from another instance:', newState);
|
443
|
+
});
|
444
|
+
|
445
|
+
// To test session storage cross-tab, open two tabs to the same URL,
|
446
|
+
// set a value in one tab, and the other tab's subscriber will be notified.
|
447
|
+
// Note: If you close and reopen the tab, sessionStorage is cleared.
|
448
|
+
// unsubscribeSession();
|
449
|
+
```
|
450
|
+
|
451
|
+
### IndexedDB Persistence (`IndexedDBPersistence`)
|
452
|
+
|
453
|
+
`IndexedDBPersistence` is designed for storing larger or more complex data structures. All its methods (`set`, `get`, `clear`, `close`) return `Promise`s because IndexedDB operations are asynchronous and non-blocking. It uses `@asaidimu/indexed` internally, which provides a higher-level, promise-based API over native IndexedDB.
|
454
|
+
|
455
|
+
```typescript
|
456
|
+
import { IndexedDBPersistence } from '@asaidimu/utils-persistence';
|
457
|
+
import { v4 as uuidv4 } from 'uuid'; // Recommended for generating unique instance IDs
|
458
|
+
|
459
|
+
interface Product {
|
460
|
+
id: string;
|
461
|
+
name: string;
|
462
|
+
price: number;
|
463
|
+
stock: number;
|
464
|
+
}
|
465
|
+
|
466
|
+
// Generate a unique instance ID for this specific browser tab/session/component.
|
467
|
+
const instanceId = uuidv4();
|
468
|
+
|
469
|
+
// Instantiate the IndexedDB store.
|
470
|
+
// A 'store' identifies the specific document/state within the database/collection.
|
471
|
+
// The 'database' is the IndexedDB database name.
|
472
|
+
// The 'collection' is the object store name within that database.
|
473
|
+
const productCache = new IndexedDBPersistence<Product[]>({
|
474
|
+
store: 'all-products-inventory', // Unique identifier for this piece of data/document
|
475
|
+
database: 'my-app-database', // Name of the IndexedDB database
|
476
|
+
collection: 'app-stores', // Name of the object store (table-like structure)
|
477
|
+
enableTelemetry: false, // Optional: enable telemetry for underlying IndexedDB lib
|
478
|
+
});
|
479
|
+
|
480
|
+
async function manageProductCache() {
|
481
|
+
console.log('--- IndexedDB Example ---');
|
482
|
+
|
483
|
+
// Set initial product data - AWAIT the promise!
|
484
|
+
const products: Product[] = [
|
485
|
+
{ id: 'p001', name: 'Laptop', price: 1200, stock: 50 },
|
486
|
+
{ id: 'p002', name: 'Mouse', price: 25, stock: 200 },
|
487
|
+
];
|
488
|
+
const setResult = await productCache.set(instanceId, products);
|
489
|
+
console.log('Products cached successfully:', setResult); // Expected: true
|
490
|
+
|
491
|
+
// Get data - AWAIT the promise!
|
492
|
+
const cachedProducts = await productCache.get();
|
493
|
+
if (cachedProducts) {
|
494
|
+
console.log('Retrieved products:', cachedProducts);
|
495
|
+
// Expected output: Retrieved products: [{ id: 'p001', ... }, { id: 'p002', ... }]
|
496
|
+
}
|
497
|
+
|
498
|
+
// Subscribe to changes from *other* tabs/instances
|
499
|
+
const unsubscribeProducts = productCache.subscribe(instanceId, (newState) => {
|
500
|
+
console.log('đ Product cache updated by another instance:', newState);
|
501
|
+
// Refresh your product list in the UI, re-fetch data, etc.
|
502
|
+
});
|
503
|
+
|
504
|
+
// Simulate an update from another instance (e.g., from a different tab)
|
505
|
+
// In a real scenario, another tab would call `productCache.set` with a different instanceId
|
506
|
+
const updatedProducts: Product[] = [
|
507
|
+
{ id: 'p001', name: 'Laptop', price: 1150, stock: 45 }, // Price and stock updated
|
508
|
+
{ id: 'p002', name: 'Mouse', price: 25, stock: 190 },
|
509
|
+
{ id: 'p003', name: 'Keyboard', price: 75, stock: 150 }, // New product
|
510
|
+
];
|
511
|
+
// Use a *new* instanceId for simulation to trigger the subscriber in the *first* tab
|
512
|
+
const updateResult = await productCache.set(uuidv4(), updatedProducts);
|
513
|
+
console.log('Simulated update from another instance:', updateResult);
|
514
|
+
|
515
|
+
// Give time for the event to propagate and be processed by the subscriber
|
516
|
+
await new Promise(resolve => setTimeout(resolve, 100)); // Short delay for async event bus
|
517
|
+
// You would see "đ Product cache updated by another instance:" followed by the updatedProducts
|
518
|
+
|
519
|
+
// Verify updated data
|
520
|
+
const updatedCachedProducts = await productCache.get();
|
521
|
+
console.log('Products after update:', updatedCachedProducts);
|
522
|
+
|
523
|
+
// After a while, if no longer needed, unsubscribe
|
524
|
+
// setTimeout(() => {
|
525
|
+
// unsubscribeProducts();
|
526
|
+
// console.log('Unsubscribed from product cache updates.');
|
527
|
+
// }, 5000);
|
528
|
+
|
529
|
+
// Clear data - AWAIT the promise!
|
530
|
+
// const cleared = await productCache.clear();
|
531
|
+
// console.log('Products cleared:', cleared); // Expected: true
|
532
|
+
// console.log('Products after clear:', await productCache.get()); // Expected: null
|
533
|
+
|
534
|
+
// Important: Close the underlying IndexedDB connection when your application is shutting down
|
535
|
+
// or when no more IndexedDB operations are expected across all instances of IndexedDBPersistence.
|
536
|
+
// This is a static method that closes shared database connections managed by the library.
|
537
|
+
// This is generally called once when the application (or a specific database usage) fully shuts down.
|
538
|
+
// await IndexedDBPersistence.closeAll();
|
539
|
+
// console.log('All IndexedDB connections closed.');
|
540
|
+
}
|
541
|
+
|
542
|
+
// Call the async function to start the example
|
543
|
+
// manageProductCache();
|
544
|
+
|
545
|
+
// You can also close a specific database connection if you have multiple:
|
546
|
+
// async function closeSpecificDb() {
|
547
|
+
// const specificDbPersistence = new IndexedDBPersistence<any>({
|
548
|
+
// store: 'another-store',
|
549
|
+
// database: 'another-database',
|
550
|
+
// collection: 'data'
|
551
|
+
// });
|
552
|
+
// await specificDbPersistence.close(); // Closes 'another-database'
|
553
|
+
// console.log('Specific IndexedDB connection closed.');
|
554
|
+
// }
|
555
|
+
// closeSpecificDb();
|
556
|
+
```
|
557
|
+
|
558
|
+
### Ephemeral Persistence (`EphemeralPersistence`)
|
559
|
+
|
560
|
+
`EphemeralPersistence` provides an in-memory store that **does not persist data across page reloads or application restarts**. Its primary strength lies in enabling **cross-tab synchronization** for transient, session-specific state using a Last Write Wins (LWW) strategy. This means if the same `storageKey` is used across multiple browser tabs, the latest update (based on timestamp) from any tab will propagate and overwrite the in-memory state in all other tabs.
|
561
|
+
|
562
|
+
This adapter's `set`, `get`, and `clear` operations are synchronous, returning `boolean` values or `T | null` directly.
|
563
|
+
|
564
|
+
```typescript
|
565
|
+
import { EphemeralPersistence } from '@asaidimu/utils-persistence';
|
566
|
+
import { v4 as uuidv4 } from 'uuid';
|
567
|
+
|
568
|
+
interface SessionData {
|
569
|
+
activeUsers: number;
|
570
|
+
lastActivity: string;
|
571
|
+
isPolling: boolean;
|
572
|
+
}
|
573
|
+
|
574
|
+
// Generate a unique instance ID for this specific browser tab/session/component.
|
575
|
+
const instanceId = uuidv4();
|
576
|
+
|
577
|
+
// Instantiate the Ephemeral store.
|
578
|
+
// The 'storageKey' is a logical key for this specific piece of in-memory data.
|
579
|
+
const sessionStateStore = new EphemeralPersistence<SessionData>('global-session-state');
|
580
|
+
|
581
|
+
async function manageSessionState() {
|
582
|
+
console.log('--- Ephemeral Persistence Example ---');
|
583
|
+
|
584
|
+
// Set initial session data
|
585
|
+
const initialData: SessionData = {
|
586
|
+
activeUsers: 1,
|
587
|
+
lastActivity: new Date().toISOString(),
|
588
|
+
isPolling: true,
|
589
|
+
};
|
590
|
+
const setResult = sessionStateStore.set(instanceId, initialData);
|
591
|
+
console.log('Session state set successfully:', setResult); // Expected: true
|
592
|
+
|
593
|
+
// Get data
|
594
|
+
let currentSessionState = sessionStateStore.get();
|
595
|
+
console.log('Current session state:', currentSessionState);
|
596
|
+
|
597
|
+
// Subscribe to changes from *other* tabs/instances
|
598
|
+
// Open another browser tab to the same application URL to test this.
|
599
|
+
const unsubscribeSessionState = sessionStateStore.subscribe(instanceId, (newState) => {
|
600
|
+
console.log('đ Session state updated from another instance:', newState);
|
601
|
+
// You might update a UI counter, re-render a component, etc.
|
602
|
+
});
|
603
|
+
|
604
|
+
// Simulate an update from another instance (e.g., from a different tab)
|
605
|
+
// In a real scenario, another tab would call `sessionStateStore.set` with a different instanceId
|
606
|
+
const updatedData: SessionData = {
|
607
|
+
activeUsers: 2, // User joined in another tab
|
608
|
+
lastActivity: new Date().toISOString(),
|
609
|
+
isPolling: true,
|
610
|
+
};
|
611
|
+
// Use a *new* instanceId for simulation to trigger the subscriber in the *first* tab
|
612
|
+
const updateResult = sessionStateStore.set(uuidv4(), updatedData);
|
613
|
+
console.log('Simulated update from another instance:', updateResult);
|
614
|
+
|
615
|
+
// Give time for the event to propagate and be processed by the subscriber
|
616
|
+
await new Promise(resolve => setTimeout(resolve, 50)); // Short delay for async event bus
|
617
|
+
// You would see "đ Session state updated from another instance:" followed by the updatedData
|
618
|
+
|
619
|
+
// Verify updated data locally
|
620
|
+
const updatedCurrentSessionState = sessionStateStore.get();
|
621
|
+
console.log('Session state after update:', updatedCurrentSessionState);
|
622
|
+
|
623
|
+
// After a while, if no longer needed, unsubscribe
|
624
|
+
// setTimeout(() => {
|
625
|
+
// unsubscribeSessionState();
|
626
|
+
// console.log('Unsubscribed from session state updates.');
|
627
|
+
// }, 5000);
|
628
|
+
|
629
|
+
// Clear data: this will also propagate via LWW to other tabs
|
630
|
+
// const clearResult = sessionStateStore.clear();
|
631
|
+
// console.log('Session state cleared:', clearResult); // Expected: true
|
632
|
+
// console.log('Session state after clear:', sessionStateStore.get()); // Expected: null
|
633
|
+
}
|
634
|
+
|
635
|
+
// Call the async function to start the example
|
636
|
+
// manageSessionState();
|
637
|
+
```
|
638
|
+
|
639
|
+
### Common Use Cases
|
640
|
+
|
641
|
+
* **User Preferences**: Store user settings like theme, language, or notification preferences using `WebStoragePersistence`. These are often small and need to persist across sessions.
|
642
|
+
* **Offline Data Caching**: Cache large datasets (e.g., product catalogs, article content, user-generated content) using `IndexedDBPersistence` to enable offline access and improve perceived performance.
|
643
|
+
* **Shopping Cart State**: Persist a user's shopping cart items using `WebStoragePersistence` (for simple carts with limited items) or `IndexedDBPersistence` (for more complex carts with detailed product information, images, or large quantities) to survive page refreshes or browser restarts.
|
644
|
+
* **Form State Preservation**: Temporarily save complex multi-step form data using `sessionStorage` (via `WebStoragePersistence`) to prevent data loss on accidental navigation or refreshes within the same browser tab session.
|
645
|
+
* **Cross-Tab/Instance Synchronization**: Use the `subscribe` method to build features that require real-time updates across multiple browser tabs, such as a shared todo list, live chat status indicators, synchronized media playback state, or collaborative document editing. This is particularly useful for `EphemeralPersistence` for transient, non-persistent shared state.
|
646
|
+
* **Feature Flags/A/B Testing**: Store user-specific feature flag assignments or A/B test group allocations in `localStorage` for consistent experiences across visits.
|
647
|
+
|
648
|
+
---
|
649
|
+
|
650
|
+
## đī¸ Project Architecture
|
651
|
+
|
652
|
+
The `@asaidimu/utils-persistence` library is structured to be modular and extensible, adhering strictly to the `SimplePersistence` interface as its core contract. This design promotes interchangeability and ease of maintenance.
|
653
|
+
|
654
|
+
### Directory Structure
|
655
|
+
|
656
|
+
```
|
657
|
+
src/persistence/
|
658
|
+
âââ index.ts # Export entry point for all persistence modules (SimplePersistence, WebStoragePersistence, IndexedDBPersistence, EphemeralPersistence)
|
659
|
+
âââ types.ts # Defines the SimplePersistence interface and shared types (e.g., StorageEvents)
|
660
|
+
âââ local-storage.ts # Implements SimplePersistence using Web Storage (localStorage/sessionStorage)
|
661
|
+
âââ ephemeral.ts # Implements SimplePersistence using an in-memory store with LWW cross-tab sync
|
662
|
+
âââ indexedb.ts # Implements SimplePersistence using IndexedDB
|
663
|
+
âââ fixtures.ts # Generic test suite helper for SimplePersistence implementations
|
664
|
+
âââ local-storage.test.ts # Test suite for WebStoragePersistence (assumed from local-storage.ts existence)
|
665
|
+
âââ ephemeral.test.ts # Test suite for EphemeralPersistence
|
666
|
+
âââ indexedb.test.ts # Comprehensive test suite for the IndexedDBPersistence adapter
|
667
|
+
âââ README.md # This documentation file
|
668
|
+
```
|
669
|
+
|
670
|
+
### Core Components
|
671
|
+
|
672
|
+
* **`SimplePersistence<T>` (in `types.ts`)**: This is the fundamental TypeScript interface that defines the contract for any persistence adapter. It ensures a consistent API for `set`, `get`, `subscribe`, and `clear` operations, regardless of the underlying storage mechanism.
|
673
|
+
* **`WebStoragePersistence<T>` (in `local-storage.ts`)**:
|
674
|
+
* **Purpose**: Provides simple key-value persistence leveraging the browser's `localStorage` or `sessionStorage` APIs.
|
675
|
+
* **Mechanism**: Directly interacts with `window.localStorage` or `window.sessionStorage`. Data is serialized/deserialized using `JSON.stringify` and `JSON.parse`.
|
676
|
+
* **Synchronization**: Utilizes `window.addEventListener('storage', ...)` for `localStorage` (which triggers when changes occur in *other* tabs) and the `@asaidimu/events` event bus (which uses `BroadcastChannel` internally) to ensure real-time updates across multiple browser tabs for both `localStorage` and `sessionStorage`.
|
677
|
+
* **`EphemeralPersistence<T>` (in `ephemeral.ts`)**:
|
678
|
+
* **Purpose**: Offers an in-memory store for transient data that needs cross-tab synchronization but *not* persistence across page reloads.
|
679
|
+
* **Mechanism**: Stores data in a private class property.
|
680
|
+
* **Synchronization**: Leverages the `@asaidimu/events` event bus (via `BroadcastChannel`) for cross-instance synchronization. It implements a Last Write Wins (LWW) strategy based on timestamps included in the broadcast events, ensuring all tabs converge to the most recently written state.
|
681
|
+
* **`IndexedDBPersistence<T>` (in `indexedb.ts`)**:
|
682
|
+
* **Purpose**: Provides robust, asynchronous persistence using the browser's `IndexedDB` API, suitable for larger datasets and structured data.
|
683
|
+
* **Mechanism**: Builds upon `@asaidimu/indexed` for simplified IndexedDB interactions (handling databases, object stores, and transactions) and `@asaidimu/query` for declarative data querying.
|
684
|
+
* **Shared Resources**: Employs a `SharedResources` singleton pattern to manage and cache database connections and collections efficiently across multiple instances of `IndexedDBPersistence`. This avoids redundant connections and ensures a single source of truth for IndexedDB operations within the application. It also manages a shared event bus per `database`/`store` combination.
|
685
|
+
* **Synchronization**: Leverages the `@asaidimu/events` event bus (via `BroadcastChannel`) for cross-instance synchronization of IndexedDB changes, notifying other instances about updates.
|
686
|
+
* **`@asaidimu/events`**: An internal utility package that provides a powerful, cross-tab compatible event bus using `BroadcastChannel`. It's crucial for enabling the automatic synchronization features of all persistence adapters.
|
687
|
+
* **`@asaidimu/indexed` & `@asaidimu/query`**: These are internal utility packages specifically used by `IndexedDBPersistence` to abstract and simplify complex interactions with the native IndexedDB API, offering a more declarative and promise-based interface.
|
688
|
+
|
689
|
+
### Data Flow for State Changes
|
690
|
+
|
691
|
+
1. **Setting State (`set(instanceId, state)`):**
|
692
|
+
* The provided `state` (of type `T`) is first serialized into a format suitable for the underlying storage (e.g., `JSON.stringify` for web storage, or directly as an object for IndexedDB/Ephemeral).
|
693
|
+
* It's then saved to the respective storage mechanism (`localStorage`, `sessionStorage`, in-memory, or an IndexedDB object store).
|
694
|
+
* An event (of type `store:updated`) is immediately `emit`ted on an internal event bus (from `@asaidimu/events`). This event includes the `instanceId` of the updater, the `storageKey`/`store` identifying the data, and the new `state`. For `EphemeralPersistence`, a `timestamp` is also included for LWW. This event is broadcast to other browser tabs via `BroadcastChannel` (managed by `@asaidimu/events`).
|
695
|
+
* For `localStorage`, native `StorageEvent`s also trigger when the value is set from another tab. The `WebStoragePersistence` adapter listens for these native events and re-emits them on its internal event bus, ensuring consistent notification pathways.
|
696
|
+
2. **Getting State (`get()`):**
|
697
|
+
* The adapter retrieves the serialized data using the configured `storageKey` or `store` from the underlying storage.
|
698
|
+
* It attempts to parse/deserialize the data back into the original `T` type (e.g., `JSON.parse`).
|
699
|
+
* Returns the deserialized data, or `null` if the data is not found or cannot be parsed.
|
700
|
+
3. **Subscribing to Changes (`subscribe(instanceId, callback)`):**
|
701
|
+
* A consumer instance registers a `callback` function with its unique `instanceId` to listen for `store:updated` events on the internal event bus.
|
702
|
+
* When an `store:updated` event is received, the adapter checks if the `instanceId` of the event's source matches the `instanceId` of the subscribing instance.
|
703
|
+
* The `callback` is invoked *only if* the `instanceId` of the update source does *not* match the `instanceId` of the subscribing instance. This crucial filtering prevents self-triggered loops (where an instance updates its own state, receives its own update notification, and attempts to re-update, leading to an infinite cycle) and ensures the `callback` is exclusively for external changes.
|
704
|
+
|
705
|
+
### Extension Points
|
706
|
+
|
707
|
+
The library is designed with extensibility in mind. You can implement your own custom persistence adapters by simply adhering to the `SimplePersistence<T>` interface. This allows you to integrate with any storage mechanism you require.
|
708
|
+
|
709
|
+
For example, you could create adapters for:
|
710
|
+
|
711
|
+
* **Remote Backend API**: An adapter that persists data to a remote server endpoint via `fetch` or `XMLHttpRequest`, enabling cross-device synchronization.
|
712
|
+
* **Service Worker Cache API**: Leverage Service Workers for advanced caching strategies, providing highly performant offline capabilities.
|
713
|
+
|
714
|
+
---
|
715
|
+
|
716
|
+
## đ§âđģ Development & Contributing
|
717
|
+
|
718
|
+
We welcome contributions to `@asaidimu/utils-persistence`! Please follow these guidelines to ensure a smooth collaboration.
|
719
|
+
|
720
|
+
### Development Setup
|
721
|
+
|
722
|
+
1. **Clone the Repository**: This library is likely part of a larger monorepo.
|
723
|
+
```bash
|
724
|
+
git clone https://github.com/asaidimu/erp-utils.git # Or the actual monorepo URL
|
725
|
+
cd erp-utils-packages/utils-src/persistence # Adjust path as necessary
|
726
|
+
```
|
727
|
+
2. **Install Dependencies**: Navigate to the root of the monorepo first if applicable, then install.
|
728
|
+
```bash
|
729
|
+
npm install # or yarn install
|
730
|
+
```
|
731
|
+
This will install all necessary development dependencies, including TypeScript, Vitest, ESLint, and Prettier.
|
732
|
+
|
733
|
+
### Scripts
|
734
|
+
|
735
|
+
The following `npm` scripts are available for development:
|
736
|
+
|
737
|
+
* `npm run build`: Compiles the TypeScript source files to JavaScript.
|
738
|
+
* `npm run test`: Runs the test suite using `vitest`.
|
739
|
+
* `npm run test:watch`: Runs tests in watch mode, re-running on file changes.
|
740
|
+
* `npm run lint`: Lints the codebase using ESLint to identify potential issues and enforce coding standards.
|
741
|
+
* `npm run format`: Formats the code using Prettier to ensure consistent code style.
|
742
|
+
|
743
|
+
### Testing
|
744
|
+
|
745
|
+
Tests are crucial for maintaining the quality and stability of the library. The project uses `vitest` for testing.
|
746
|
+
|
747
|
+
* To run all tests:
|
748
|
+
```bash
|
749
|
+
npm test
|
750
|
+
```
|
751
|
+
* To run tests in watch mode during development:
|
752
|
+
```bash
|
753
|
+
npm run test:watch
|
754
|
+
```
|
755
|
+
* Ensure that your changes are covered by new or existing tests, and that all tests pass before submitting a pull request. The `fixtures.ts` file provides a generic test suite (`testSimplePersistence`) for any `SimplePersistence` implementation, ensuring consistent behavior across adapters.
|
756
|
+
|
757
|
+
### Contributing Guidelines
|
758
|
+
|
759
|
+
* **Fork the repository** and create your branch from `main`.
|
760
|
+
* **Follow existing coding standards**: Adhere to the TypeScript, ESLint, and Prettier configurations defined in the project.
|
761
|
+
* **Commit messages**: Use [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for clear and consistent commit history (e.g., `feat: add new adapter`, `fix: resolve subscription issue`, `docs: update README`).
|
762
|
+
* **Pull Requests**:
|
763
|
+
* Open a pull request against the `main` branch.
|
764
|
+
* Provide a clear and detailed description of your changes, including the problem solved and the approach taken.
|
765
|
+
* Reference any related issues (e.g., `Closes #123`).
|
766
|
+
* Ensure all tests pass and the code is lint-free before submitting.
|
767
|
+
* **Code Review**: Be open to feedback and suggestions during the code review process.
|
768
|
+
|
769
|
+
### Issue Reporting
|
770
|
+
|
771
|
+
If you find a bug or have a feature request, please open an issue on our [GitHub Issues page](https://github.com/asaidimu/erp-utils-issues). When reporting a bug, please include:
|
772
|
+
|
773
|
+
* A clear, concise title.
|
774
|
+
* Steps to reproduce the issue.
|
775
|
+
* Expected behavior.
|
776
|
+
* Actual behavior.
|
777
|
+
* Your environment (browser version, Node.js version, `@asaidimu/utils-persistence` version).
|
778
|
+
* Any relevant code snippets or error messages.
|
779
|
+
|
780
|
+
---
|
781
|
+
|
782
|
+
## âšī¸ Additional Information
|
783
|
+
|
784
|
+
### Troubleshooting
|
785
|
+
|
786
|
+
* **Storage Limits**: Be aware that browser storage mechanisms have size limitations. `localStorage` and `sessionStorage` typically offer 5-10 MB, while `IndexedDB` can store much larger amounts (often gigabytes, depending on browser and available disk space). For large data sets, always prefer `IndexedDBPersistence`.
|
787
|
+
* **JSON Parsing Errors**: `WebStoragePersistence`, `IndexedDBPersistence` (for the `data` field), and `EphemeralPersistence` serialize and deserialize your data using `JSON.stringify` and `JSON.parse` (or `structuredClone` for `EphemeralPersistence`). Ensure that the `state` object you are passing to `set` is a valid JSON-serializable object (i.e., it doesn't contain circular references, functions, or Symbols that JSON cannot handle).
|
788
|
+
* **Cross-Origin Restrictions**: Browser storage is typically restricted to the same origin (protocol, host, port). You cannot access data stored by a different origin. Ensure your application is running on the same origin across all tabs for cross-tab synchronization to work.
|
789
|
+
* **`IndexedDBPersistence` Asynchronous Nature**: Remember that `IndexedDBPersistence` methods (`set`, `get`, `clear`, `close`) return `Promise`s. Always use `await` or `.then()` to handle their results and ensure operations complete before proceeding. Forgetting to `await` can lead to unexpected behavior or race conditions.
|
790
|
+
* **`EphemeralPersistence` Data Loss**: Data stored with `EphemeralPersistence` is *not* persisted across page reloads or browser restarts. It is strictly an in-memory solution synchronized across active tabs for the current browsing session. If you need data to survive refreshes, use `WebStoragePersistence` or `IndexedDBPersistence`.
|
791
|
+
* **`instanceId` Usage**: The `instanceId` parameter in `set` and `subscribe` is crucial for distinguishing between local updates and updates from other instances. Ensure each tab/instance of your application generates a *unique* ID (e.g., a UUID, like `uuidv4()`) upon startup and consistently uses it for all `set` and `subscribe` calls from that instance. This ID is *not* persisted to storage; it's ephemeral for the current session of that tab.
|
792
|
+
* **`subscribe` Callback Not Firing**: The most common reason for this is attempting to trigger the callback from the *same* `instanceId` that subscribed. The `subscribe` method deliberately filters out updates from the `instanceId` that subscribed to prevent infinite loops and ensure efficient state reconciliation. To test cross-instance synchronization, open two browser tabs to your application, or ensure two different logical instances are created (each with a unique `instanceId`). Perform a `set` operation in one instance using its unique `instanceId`; the `subscribe` callback in the *other* instance (with a different `instanceId`) should then fire.
|
793
|
+
|
794
|
+
### FAQ
|
795
|
+
|
796
|
+
**Q: What's the difference between `store` (or `storageKey`) and `instanceId`?**
|
797
|
+
A: `store` (for `IndexedDBPersistence` and `EphemeralPersistence`) or `storageKey` (for `WebStoragePersistence`) is the name or identifier of the *data set* or "document" you are persisting (e.g., `'user-profile'`, `'shopping-cart'`, `'all-products-inventory'`). It's the key under which the data itself is stored.
|
798
|
+
`instanceId` is a unique identifier for the *browser tab, application window, or a specific component instance* currently interacting with the store. It's an ephemeral ID (e.g., a UUID generated at app startup) that helps the `subscribe` method differentiate between updates originating from the current instance versus those coming from *other* instances (tabs, windows, or distinct components) of your application, preventing self-triggered loops in your state management.
|
799
|
+
|
800
|
+
**Q: Why is `IndexedDBPersistence` asynchronous, but `WebStoragePersistence` and `EphemeralPersistence` are synchronous?**
|
801
|
+
A: `WebStoragePersistence` utilizes `localStorage` and `sessionStorage`, which are inherently synchronous APIs in web browsers. This means operations block the main thread until they complete. Similarly, `EphemeralPersistence` is an in-memory solution, and its direct data access is synchronous. In contrast, `IndexedDB` is an asynchronous API by design to avoid blocking the main thread, which is especially important when dealing with potentially large datasets or complex queries. Our `IndexedDBPersistence` wrapper naturally exposes this asynchronous behavior through Promises to align with best practices for non-blocking operations. All three adapters use asynchronous mechanisms for *cross-tab synchronization*.
|
802
|
+
|
803
|
+
**Q: Can I use this library in a Node.js environment?**
|
804
|
+
A: No, this library is specifically designed for browser environments. It relies heavily on browser-specific global APIs such as `window.localStorage`, `window.sessionStorage`, `indexedDB`, and `BroadcastChannel` (for cross-tab synchronization), none of which are available in a standard Node.js runtime.
|
805
|
+
|
806
|
+
**Q: My `subscribe` callback isn't firing, even when I change data.**
|
807
|
+
A: The most common reason for this is attempting to trigger the callback from the *same* `instanceId` that subscribed. The `subscribe` method deliberately filters out updates from the `instanceId` that subscribed to prevent infinite loops and ensure efficient state reconciliation. To test cross-instance synchronization, open two browser tabs to your application, or ensure two different logical instances are created (each with a unique `instanceId`). Perform a `set` operation in one instance using its unique `instanceId`; the `subscribe` callback in the *other* instance (with a different `instanceId`) should then fire.
|
808
|
+
|
809
|
+
**Q: When should I choose `EphemeralPersistence` over `WebStoragePersistence` or `IndexedDBPersistence`?**
|
810
|
+
A: Choose `EphemeralPersistence` when:
|
811
|
+
* You need cross-tab synchronized state that **does not need to persist across page reloads**.
|
812
|
+
* The data is transient and only relevant for the current browsing session.
|
813
|
+
* You want very fast in-memory operations.
|
814
|
+
Use `WebStoragePersistence` for small, persistent key-value data, and `IndexedDBPersistence` for larger, structured data that needs to persist reliably.
|
815
|
+
|
816
|
+
### Changelog
|
817
|
+
|
818
|
+
For detailed changes between versions, please refer to the [CHANGELOG.md](CHANGELOG.md) file in the project's root directory (or specific package directory).
|
819
|
+
|
820
|
+
### License
|
821
|
+
|
822
|
+
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
|
823
|
+
|
824
|
+
### Acknowledgments
|
825
|
+
|
826
|
+
This library leverages and builds upon the excellent work from:
|
827
|
+
|
828
|
+
* [`@asaidimu/events`](https://github.com/asaidimu/events): For robust cross-tab event communication and asynchronous event bus capabilities.
|
829
|
+
* [`@asaidimu/indexed`](https://github.com/asaidimu/indexed): For providing a simplified and promise-based interface for IndexedDB interactions.
|
830
|
+
* [`@asaidimu/query`](https://github.com/asaidimu/query): For offering a declarative query builder used internally with IndexedDB operations.
|