universe-code 0.0.74 โ 0.0.75
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/README.md +1 -5
- package/package.json +1 -1
- package/dist/guide/angular/indexdb/README.md +0 -253
- package/dist/guide/react/indexdb/README.md +0 -198
package/README.md
CHANGED
|
@@ -2,8 +2,4 @@ An opinionated npm package that enforces coding discipline by standardizing stru
|
|
|
2
2
|
|
|
3
3
|
## Documentation
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
๐ [View Docs](https://github.com/connectwithfalco/universe-code/tree/main/dist/guide/angular/indexdb)
|
|
7
|
-
|
|
8
|
-
๐ฆ IndexedDB React
|
|
9
|
-
๐ [View Docs](https://github.com/connectwithfalco/universe-code/tree/main/dist/guide/react/indexdb)
|
|
5
|
+
๐ [View Docs](https://dev-universe-code.vercel.app)
|
package/package.json
CHANGED
|
@@ -1,253 +0,0 @@
|
|
|
1
|
-
# ๐ universe-code (Angular)
|
|
2
|
-
|
|
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.
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## โจ Features
|
|
8
|
-
|
|
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
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## ๐ฆ Installation
|
|
19
|
-
|
|
20
|
-
Install the latest version using npm:
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npm install universe-code@latest
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
---
|
|
27
|
-
|
|
28
|
-
## โ๏ธ IndexedDB Setup (One Time Only)
|
|
29
|
-
|
|
30
|
-
Configure IndexedDB once in your Angular app and reuse it everywhere via a shared Angular service.
|
|
31
|
-
|
|
32
|
-
---
|
|
33
|
-
|
|
34
|
-
## 1๏ธโฃ Create an Angular IndexedDB Service
|
|
35
|
-
|
|
36
|
-
Create the following file:
|
|
37
|
-
|
|
38
|
-
**๐ `src/app/services/app-idb.service.ts`**
|
|
39
|
-
|
|
40
|
-
```ts
|
|
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
|
-
}
|
|
51
|
-
|
|
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
|
-
}
|
|
70
|
-
|
|
71
|
-
get<T = any>(key: string): Promise<T | null> {
|
|
72
|
-
return this.client.get(key);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
set(data: any): Promise<any> {
|
|
76
|
-
return this.client.put(data);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
remove(key: string): Promise<any> {
|
|
80
|
-
return this.client.remove(key);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
clear(): Promise<any> {
|
|
84
|
-
return this.client.clear();
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
```
|
|
88
|
-
|
|
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
|
|
94
|
-
|
|
95
|
-
---
|
|
96
|
-
|
|
97
|
-
## 2๏ธโฃ Use the Service in Your Angular Component
|
|
98
|
-
|
|
99
|
-
Example `AppComponent`:
|
|
100
|
-
|
|
101
|
-
```ts
|
|
102
|
-
import { Component, OnInit } from '@angular/core';
|
|
103
|
-
import { AppIdbService } from './services/app-idb.service';
|
|
104
|
-
import { ApiService } from './services/api.service';
|
|
105
|
-
import { minutesToMs } from 'universe-code/core';
|
|
106
|
-
|
|
107
|
-
@Component({
|
|
108
|
-
selector: 'app-root',
|
|
109
|
-
templateUrl: './app.component.html',
|
|
110
|
-
styleUrls: ['./app.component.css'],
|
|
111
|
-
})
|
|
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
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
```
|
|
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
|
-
|
|
139
|
-
---
|
|
140
|
-
|
|
141
|
-
## ๐ API Fetch + Cache with Expiry
|
|
142
|
-
|
|
143
|
-
```ts
|
|
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
|
-
}
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
### ๐ง How it works
|
|
162
|
-
|
|
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
|
|
167
|
-
|
|
168
|
-
---
|
|
169
|
-
|
|
170
|
-
## ๐ฅ Get Data from IndexedDB
|
|
171
|
-
|
|
172
|
-
```ts
|
|
173
|
-
const data = await this.idb.get('users');
|
|
174
|
-
console.log(data);
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
---
|
|
178
|
-
|
|
179
|
-
## โ๏ธ Insert / Update Data
|
|
180
|
-
|
|
181
|
-
> Default store `keyPath` is `id`
|
|
182
|
-
|
|
183
|
-
```ts
|
|
184
|
-
await this.idb.set({
|
|
185
|
-
id: 'users',
|
|
186
|
-
data: {
|
|
187
|
-
name: 'Mark',
|
|
188
|
-
country: 'USA',
|
|
189
|
-
},
|
|
190
|
-
timestamp: Date.now(),
|
|
191
|
-
});
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
---
|
|
195
|
-
|
|
196
|
-
## ๐๏ธ Delete a Specific Record
|
|
197
|
-
|
|
198
|
-
```ts
|
|
199
|
-
await this.idb.remove('users');
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
---
|
|
203
|
-
|
|
204
|
-
## ๐งน Clear Entire IndexedDB Store
|
|
205
|
-
|
|
206
|
-
```ts
|
|
207
|
-
await this.idb.clear();
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
---
|
|
211
|
-
|
|
212
|
-
## ๐ API Reference (Angular Wrapper)
|
|
213
|
-
|
|
214
|
-
### `AppIdbService`
|
|
215
|
-
|
|
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).
|
|
238
|
-
|
|
239
|
-
---
|
|
240
|
-
|
|
241
|
-
## โ
Ideal Use Cases
|
|
242
|
-
|
|
243
|
-
- API response caching
|
|
244
|
-
- Offline-first Angular apps
|
|
245
|
-
- Performance optimization
|
|
246
|
-
- Local session & config storage
|
|
247
|
-
- Shared data across routes/components
|
|
248
|
-
|
|
249
|
-
---
|
|
250
|
-
|
|
251
|
-
## ๐ก License
|
|
252
|
-
|
|
253
|
-
MIT License ยฉ **universe-code**
|
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
# ๐ universe-code (React)
|
|
2
|
-
|
|
3
|
-
A lightweight and powerful **IndexedDB utility for React** that helps you cache API data, manage offline storage, and reduce unnecessary network calls โ all with a clean and simple API.
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## โจ Features
|
|
8
|
-
|
|
9
|
-
- โก Easy IndexedDB setup
|
|
10
|
-
- ๐ง Built-in API caching with expiry
|
|
11
|
-
- ๐ฆ Simple CRUD operations
|
|
12
|
-
- ๐ Auto re-fetch when cache expires
|
|
13
|
-
- ๐ป Works perfectly with React / Next.js
|
|
14
|
-
- ๐ Clean and developer-friendly API
|
|
15
|
-
|
|
16
|
-
---
|
|
17
|
-
|
|
18
|
-
## ๐ฆ Installation
|
|
19
|
-
|
|
20
|
-
Install the latest version using npm:
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npm install universe-code@latest
|
|
24
|
-
```
|
|
25
|
-
---
|
|
26
|
-
|
|
27
|
-
## โ๏ธ IndexedDB Setup (One Time Only)
|
|
28
|
-
|
|
29
|
-
You must configure IndexedDB once at the root level of your app.
|
|
30
|
-
|
|
31
|
-
---
|
|
32
|
-
|
|
33
|
-
## 1๏ธโฃ Create IndexedDB Provider
|
|
34
|
-
|
|
35
|
-
Create the following file:
|
|
36
|
-
|
|
37
|
-
๐ lib/provider/idb-provider.tsx
|
|
38
|
-
|
|
39
|
-
```bash
|
|
40
|
-
"use client";
|
|
41
|
-
|
|
42
|
-
import { configureIdb } from "universe-code/react";
|
|
43
|
-
|
|
44
|
-
export function IdbProvider() {
|
|
45
|
-
configureIdb({
|
|
46
|
-
dbName: "db",
|
|
47
|
-
dbVersion: 1,
|
|
48
|
-
storeName: "store",
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
return null;
|
|
52
|
-
}
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
---
|
|
56
|
-
|
|
57
|
-
### 2๏ธโฃ Register Provider in Root Layout
|
|
58
|
-
|
|
59
|
-
Call the provider once so IndexedDB initializes globally.
|
|
60
|
-
|
|
61
|
-
```bash
|
|
62
|
-
import { IdbProvider } from "@/lib/provider/idb-provider";
|
|
63
|
-
|
|
64
|
-
export default function RootLayout({
|
|
65
|
-
children,
|
|
66
|
-
}: {
|
|
67
|
-
children: React.ReactNode;
|
|
68
|
-
}) {
|
|
69
|
-
return (
|
|
70
|
-
<html lang="en">
|
|
71
|
-
<body>
|
|
72
|
-
<IdbProvider />
|
|
73
|
-
{children}
|
|
74
|
-
</body>
|
|
75
|
-
</html>
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
---
|
|
81
|
-
|
|
82
|
-
## โ
IndexedDB is now created and ready to use.
|
|
83
|
-
|
|
84
|
-
๐ Using IndexedDB in Components
|
|
85
|
-
Import the Hook
|
|
86
|
-
|
|
87
|
-
```bash
|
|
88
|
-
import { useIdbStore } from "universe-code/react";
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
Initialize Store
|
|
92
|
-
|
|
93
|
-
```bash
|
|
94
|
-
const idbStore = useIdbStore();
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
All IndexedDB helper functions are now available inside idbStore.
|
|
98
|
-
|
|
99
|
-
---
|
|
100
|
-
|
|
101
|
-
## ๐ API Fetch + Cache with Expiry
|
|
102
|
-
|
|
103
|
-
Fetch API data and automatically store it in IndexedDB with expiry control.
|
|
104
|
-
|
|
105
|
-
```bash
|
|
106
|
-
idbStore
|
|
107
|
-
.getWithExpiry("users", minutesToMs(1), async () => {
|
|
108
|
-
const res = await fetch("https://example.com/api/user", {
|
|
109
|
-
method: "GET",
|
|
110
|
-
headers: {
|
|
111
|
-
"Content-Type": "application/json",
|
|
112
|
-
},
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
const data = await res.json();
|
|
116
|
-
return data.data;
|
|
117
|
-
})
|
|
118
|
-
.then(console.log);
|
|
119
|
-
```
|
|
120
|
-
### Note:
|
|
121
|
-
|
|
122
|
-
import minutesToMs() from universe-code/core
|
|
123
|
-
|
|
124
|
-
```bash
|
|
125
|
-
import { minutesToMs } from "universe-code/core";
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
### ๐ง How it works
|
|
129
|
-
|
|
130
|
-
- Calls API only if data is missing or expired
|
|
131
|
-
- Saves response in IndexedDB
|
|
132
|
-
- Returns cached data instantly on next call
|
|
133
|
-
|
|
134
|
-
---
|
|
135
|
-
|
|
136
|
-
## ๐ฅ Get Data from IndexedDB
|
|
137
|
-
```bash
|
|
138
|
-
const data = await idbStore.get("users");
|
|
139
|
-
console.log(data);
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
## โ๏ธ Insert / Update Data
|
|
145
|
-
```bash
|
|
146
|
-
idbStore.put({
|
|
147
|
-
id: "users",
|
|
148
|
-
data: {
|
|
149
|
-
name: "Mark",
|
|
150
|
-
country: "USA",
|
|
151
|
-
},
|
|
152
|
-
timestamp: Date.now(),
|
|
153
|
-
});
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
---
|
|
157
|
-
|
|
158
|
-
### ๐๏ธ Delete a Specific Record
|
|
159
|
-
|
|
160
|
-
```bash
|
|
161
|
-
idbStore.remove("users");
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
---
|
|
165
|
-
|
|
166
|
-
## ๐งน Clear Entire IndexedDB Store
|
|
167
|
-
|
|
168
|
-
```bash
|
|
169
|
-
idbStore.clear();
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
---
|
|
173
|
-
|
|
174
|
-
### ๐ API Reference
|
|
175
|
-
|
|
176
|
-
| Function | Description |
|
|
177
|
-
|---------|------------|
|
|
178
|
-
| `get(id)` | Retrieve data from IndexedDB |
|
|
179
|
-
| `put(payload)` | Insert or update data |
|
|
180
|
-
| `remove(id)` | Delete a record |
|
|
181
|
-
| `clear()` | Clear all IndexedDB data |
|
|
182
|
-
| `getWithExpiry(id, expiry, callback)` | Fetch and cache data with expiry |
|
|
183
|
-
|
|
184
|
-
---
|
|
185
|
-
|
|
186
|
-
## โ
Ideal Use Cases
|
|
187
|
-
|
|
188
|
-
- API response caching
|
|
189
|
-
- Offline-first applications
|
|
190
|
-
- Performance optimization
|
|
191
|
-
- Reducing repeated API calls
|
|
192
|
-
- Storing session or user data
|
|
193
|
-
|
|
194
|
-
---
|
|
195
|
-
|
|
196
|
-
## ๐ก License
|
|
197
|
-
|
|
198
|
-
MIT License ยฉ universe-code
|