universe-code 0.0.72 → 0.0.74
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/dist/angular/index.js +1 -1
- package/dist/angular/indexdb/services/{idbService.mjs → idbService.js} +10 -8
- package/dist/guide/angular/indexdb/README.md +153 -90
- package/dist/react/indexdb/store/config.js +2 -0
- package/dist/react/indexdb/store/idbStore.js +1 -1
- package/package.json +1 -1
- package/dist/angular/indexdb/services/idb.config.mjs +0 -10
package/dist/angular/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { IdbService } from './indexdb/services/idbService.
|
|
1
|
+
export { IdbService } from './indexdb/services/idbService.js';
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
import { DBManager, DB } from 'universe-code';
|
|
3
|
-
import { inject } from '@angular/core';
|
|
4
|
-
import { IDB_CONFIG } from './idb.config.mjs';
|
|
1
|
+
import { DBManager, DB } from "universe-code";
|
|
5
2
|
|
|
6
3
|
export class IdbService {
|
|
7
4
|
db = null;
|
|
8
5
|
manager = null;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
isBrowser = typeof window !== "undefined";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @param {Object} config - { dbName, version, storeName }
|
|
10
|
+
*/
|
|
11
|
+
constructor(config) {
|
|
12
|
+
if (!config) throw new Error("IDB config is required");
|
|
13
|
+
this.options = config;
|
|
14
|
+
}
|
|
13
15
|
|
|
14
16
|
async connect() {
|
|
15
17
|
if (!this.isBrowser) return null;
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
# 🌌 universe-code (Angular)
|
|
2
2
|
|
|
3
|
-
A lightweight and powerful **IndexedDB utility for Angular** that helps you cache API
|
|
4
|
-
|
|
5
|
-
Designed for **modern Angular (standalone + DI)** and production-ready applications.
|
|
3
|
+
A lightweight and powerful **IndexedDB utility for Angular** that helps you cache API data, manage offline storage, and reduce unnecessary network calls — with a clean and simple API that works in any Angular application.
|
|
6
4
|
|
|
7
5
|
---
|
|
8
6
|
|
|
9
7
|
## ✨ Features
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
- ⚡ Easy IndexedDB setup in Angular
|
|
10
|
+
- 🧠 Built-in API caching with expiry (TTL)
|
|
11
|
+
- 📦 Simple CRUD operations
|
|
12
|
+
- 🔁 Auto re-fetch when cache expires
|
|
13
|
+
- 🧱 Framework-agnostic core with Angular-friendly usage
|
|
14
|
+
- 🛠 Clean and developer-friendly API
|
|
17
15
|
|
|
18
16
|
---
|
|
19
17
|
|
|
@@ -29,116 +27,165 @@ npm install universe-code@latest
|
|
|
29
27
|
|
|
30
28
|
## ⚙️ IndexedDB Setup (One Time Only)
|
|
31
29
|
|
|
32
|
-
IndexedDB
|
|
30
|
+
Configure IndexedDB once in your Angular app and reuse it everywhere via a shared Angular service.
|
|
33
31
|
|
|
34
32
|
---
|
|
35
33
|
|
|
36
|
-
## 1️⃣
|
|
34
|
+
## 1️⃣ Create an Angular IndexedDB Service
|
|
37
35
|
|
|
38
|
-
|
|
39
|
-
For JIT environments, Angular Compiler **must be available**.
|
|
36
|
+
Create the following file:
|
|
40
37
|
|
|
41
|
-
|
|
38
|
+
**📁 `src/app/services/app-idb.service.ts`**
|
|
42
39
|
|
|
43
40
|
```ts
|
|
44
|
-
import '@angular/
|
|
45
|
-
import {
|
|
46
|
-
|
|
47
|
-
import {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
41
|
+
import { Injectable } from '@angular/core';
|
|
42
|
+
import { IdbService as CoreIdbService } from 'universe-code/indexdb';
|
|
43
|
+
// If your bundler does not support subpath exports, use this instead:
|
|
44
|
+
// import { IdbService as CoreIdbService } from 'universe-code/dist/indexdb/services/idbService.js';
|
|
45
|
+
|
|
46
|
+
interface IdbConfig {
|
|
47
|
+
dbName: string;
|
|
48
|
+
version: number;
|
|
49
|
+
storeName: string;
|
|
50
|
+
}
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
// Centralized IndexedDB configuration for this Angular app
|
|
53
|
+
const IDB_CONFIG: IdbConfig = {
|
|
54
|
+
dbName: 'db',
|
|
55
|
+
version: 1,
|
|
56
|
+
storeName: 'store',
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
@Injectable({ providedIn: 'root' })
|
|
60
|
+
export class AppIdbService {
|
|
61
|
+
private readonly client = new CoreIdbService(IDB_CONFIG);
|
|
62
|
+
|
|
63
|
+
fetchWithCache<T>(
|
|
64
|
+
key: string,
|
|
65
|
+
ttlMs: number,
|
|
66
|
+
apiFn: () => Promise<T>
|
|
67
|
+
): Promise<T | null> {
|
|
68
|
+
return this.client.getWithExpiry(key, ttlMs, apiFn);
|
|
69
|
+
}
|
|
55
70
|
|
|
56
|
-
|
|
71
|
+
get<T = any>(key: string): Promise<T | null> {
|
|
72
|
+
return this.client.get(key);
|
|
73
|
+
}
|
|
57
74
|
|
|
58
|
-
|
|
75
|
+
set(data: any): Promise<any> {
|
|
76
|
+
return this.client.put(data);
|
|
77
|
+
}
|
|
59
78
|
|
|
60
|
-
|
|
79
|
+
remove(key: string): Promise<any> {
|
|
80
|
+
return this.client.remove(key);
|
|
81
|
+
}
|
|
61
82
|
|
|
62
|
-
|
|
63
|
-
|
|
83
|
+
clear(): Promise<any> {
|
|
84
|
+
return this.client.clear();
|
|
85
|
+
}
|
|
86
|
+
}
|
|
64
87
|
```
|
|
65
88
|
|
|
66
|
-
|
|
89
|
+
### ✅ What this service does
|
|
90
|
+
|
|
91
|
+
- Creates a single `IdbService` instance for the entire app
|
|
92
|
+
- Centralizes database name, version, and store name
|
|
93
|
+
- Exposes clean methods usable in any component or service
|
|
67
94
|
|
|
68
|
-
|
|
95
|
+
---
|
|
69
96
|
|
|
70
|
-
|
|
97
|
+
## 2️⃣ Use the Service in Your Angular Component
|
|
71
98
|
|
|
72
|
-
|
|
99
|
+
Example `AppComponent`:
|
|
73
100
|
|
|
74
101
|
```ts
|
|
75
102
|
import { Component, OnInit } from '@angular/core';
|
|
76
|
-
import {
|
|
103
|
+
import { AppIdbService } from './services/app-idb.service';
|
|
104
|
+
import { ApiService } from './services/api.service';
|
|
105
|
+
import { minutesToMs } from 'universe-code/core';
|
|
77
106
|
|
|
78
107
|
@Component({
|
|
79
108
|
selector: 'app-root',
|
|
80
|
-
|
|
109
|
+
templateUrl: './app.component.html',
|
|
110
|
+
styleUrls: ['./app.component.css'],
|
|
81
111
|
})
|
|
82
|
-
export class
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
112
|
+
export class AppComponent implements OnInit {
|
|
113
|
+
constructor(
|
|
114
|
+
private readonly api: ApiService,
|
|
115
|
+
private readonly idb: AppIdbService
|
|
116
|
+
) {}
|
|
117
|
+
|
|
118
|
+
async ngOnInit(): Promise<void> {
|
|
119
|
+
try {
|
|
120
|
+
const data = await this.idb.fetchWithCache(
|
|
121
|
+
'allEventList',
|
|
122
|
+
minutesToMs(1),
|
|
123
|
+
() => this.api.getAllEvents()
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
console.log('All Events:', data);
|
|
127
|
+
} catch (error) {
|
|
128
|
+
console.error('Failed to load events:', error);
|
|
129
|
+
}
|
|
97
130
|
}
|
|
98
131
|
}
|
|
99
132
|
```
|
|
100
133
|
|
|
134
|
+
### ✅ IndexedDB is now ready
|
|
135
|
+
|
|
136
|
+
Once `AppIdbService` is created, no additional setup is required.
|
|
137
|
+
Simply inject it wherever IndexedDB access is needed.
|
|
138
|
+
|
|
101
139
|
---
|
|
102
140
|
|
|
103
|
-
## 🔁
|
|
141
|
+
## 🔁 API Fetch + Cache with Expiry
|
|
104
142
|
|
|
105
143
|
```ts
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
);
|
|
144
|
+
import { minutesToMs } from 'universe-code/core';
|
|
145
|
+
|
|
146
|
+
async function loadUserProfile(idb: AppIdbService) {
|
|
147
|
+
const user = await idb.fetchWithCache(
|
|
148
|
+
'user-profile',
|
|
149
|
+
minutesToMs(5),
|
|
150
|
+
async () => {
|
|
151
|
+
const res = await fetch('https://example.com/api/user');
|
|
152
|
+
const json = await res.json();
|
|
153
|
+
return json.data;
|
|
154
|
+
}
|
|
155
|
+
);
|
|
156
|
+
|
|
157
|
+
console.log('User profile:', user);
|
|
158
|
+
}
|
|
114
159
|
```
|
|
115
160
|
|
|
116
|
-
### 🧠 How it
|
|
161
|
+
### 🧠 How it works
|
|
117
162
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
* Returns cached data instantly on next call
|
|
163
|
+
- Calls API only if data is missing or expired
|
|
164
|
+
- Stores response in IndexedDB with timestamp
|
|
165
|
+
- Returns cached data instantly within TTL
|
|
166
|
+
- Falls back to cached data if API fails
|
|
123
167
|
|
|
124
168
|
---
|
|
125
169
|
|
|
126
|
-
## 📥 Get
|
|
170
|
+
## 📥 Get Data from IndexedDB
|
|
127
171
|
|
|
128
172
|
```ts
|
|
129
|
-
const data = await idb.get('users');
|
|
173
|
+
const data = await this.idb.get('users');
|
|
174
|
+
console.log(data);
|
|
130
175
|
```
|
|
131
176
|
|
|
132
177
|
---
|
|
133
178
|
|
|
134
|
-
## ✏️ Insert / Update Data
|
|
179
|
+
## ✏️ Insert / Update Data
|
|
180
|
+
|
|
181
|
+
> Default store `keyPath` is `id`
|
|
135
182
|
|
|
136
183
|
```ts
|
|
137
|
-
await idb.
|
|
138
|
-
id: '
|
|
184
|
+
await this.idb.set({
|
|
185
|
+
id: 'users',
|
|
139
186
|
data: {
|
|
140
|
-
name: '
|
|
141
|
-
|
|
187
|
+
name: 'Mark',
|
|
188
|
+
country: 'USA',
|
|
142
189
|
},
|
|
143
190
|
timestamp: Date.now(),
|
|
144
191
|
});
|
|
@@ -146,10 +193,10 @@ await idb.put({
|
|
|
146
193
|
|
|
147
194
|
---
|
|
148
195
|
|
|
149
|
-
## 🗑️
|
|
196
|
+
## 🗑️ Delete a Specific Record
|
|
150
197
|
|
|
151
198
|
```ts
|
|
152
|
-
await idb.remove('
|
|
199
|
+
await this.idb.remove('users');
|
|
153
200
|
```
|
|
154
201
|
|
|
155
202
|
---
|
|
@@ -157,34 +204,50 @@ await idb.remove('profile');
|
|
|
157
204
|
## 🧹 Clear Entire IndexedDB Store
|
|
158
205
|
|
|
159
206
|
```ts
|
|
160
|
-
await idb.clear();
|
|
207
|
+
await this.idb.clear();
|
|
161
208
|
```
|
|
162
209
|
|
|
163
210
|
---
|
|
164
211
|
|
|
165
|
-
## 📚 API Reference
|
|
212
|
+
## 📚 API Reference (Angular Wrapper)
|
|
213
|
+
|
|
214
|
+
### `AppIdbService`
|
|
166
215
|
|
|
167
|
-
| Method
|
|
168
|
-
|
|
169
|
-
| `
|
|
170
|
-
| `
|
|
171
|
-
| `
|
|
172
|
-
| `
|
|
173
|
-
| `
|
|
216
|
+
| Method | Signature | Description |
|
|
217
|
+
|------|----------|-------------|
|
|
218
|
+
| fetchWithCache | `(key, ttlMs, apiFn)` | Fetch & cache data with expiry |
|
|
219
|
+
| get | `(key)` | Get record by key |
|
|
220
|
+
| set | `(data)` | Insert or update record |
|
|
221
|
+
| remove | `(key)` | Delete record |
|
|
222
|
+
| clear | `()` | Clear store |
|
|
223
|
+
|
|
224
|
+
---
|
|
225
|
+
|
|
226
|
+
## ⚙️ Core: `IdbService`
|
|
227
|
+
|
|
228
|
+
Used internally from `universe-code/indexdb`:
|
|
229
|
+
|
|
230
|
+
- `connect()`
|
|
231
|
+
- `get(key)`
|
|
232
|
+
- `put(data)`
|
|
233
|
+
- `remove(key)`
|
|
234
|
+
- `clear()`
|
|
235
|
+
- `getWithExpiry(key, ttl, apiFn)`
|
|
236
|
+
|
|
237
|
+
Can also be used outside Angular (JS / TS / other frameworks).
|
|
174
238
|
|
|
175
239
|
---
|
|
176
240
|
|
|
177
241
|
## ✅ Ideal Use Cases
|
|
178
242
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
243
|
+
- API response caching
|
|
244
|
+
- Offline-first Angular apps
|
|
245
|
+
- Performance optimization
|
|
246
|
+
- Local session & config storage
|
|
247
|
+
- Shared data across routes/components
|
|
184
248
|
|
|
185
249
|
---
|
|
186
250
|
|
|
187
251
|
## 🛡 License
|
|
188
252
|
|
|
189
|
-
MIT License © universe-code
|
|
190
|
-
|
|
253
|
+
MIT License © **universe-code**
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { connectDB } from "./idbStore.js";
|
|
1
2
|
let config = null;
|
|
2
3
|
|
|
3
4
|
export const configureIdb = (options) => {
|
|
@@ -5,6 +6,7 @@ export const configureIdb = (options) => {
|
|
|
5
6
|
return;
|
|
6
7
|
}
|
|
7
8
|
config = options;
|
|
9
|
+
connectDB();
|
|
8
10
|
};
|
|
9
11
|
|
|
10
12
|
export const getConfig = () => {
|
package/package.json
CHANGED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
// idb.config.ts
|
|
2
|
-
import { InjectionToken } from '@angular/core';
|
|
3
|
-
|
|
4
|
-
/** @typedef {Object} IdbConfig
|
|
5
|
-
* @property {string} dbName
|
|
6
|
-
* @property {number} version
|
|
7
|
-
* @property {string} storeName
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
export const IDB_CONFIG = new InjectionToken<IdbConfig>('IDB_CONFIG');
|