universe-code 0.0.73 → 0.0.74

package/dist/guide/angular/indexdb/README.md

@@ -1,19 +1,17 @@
 # 🌌 universe-code (Angular)
 
-A lightweight and powerful **IndexedDB utility for Angular** that helps you cache API responses, manage offline storage, and reduce unnecessary network calls — with a **clean, service-based API**.
-
-Designed for **modern Angular (standalone + DI)** and production-ready applications.
+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.
 
 ---
 
 ## ✨ Features
 
-* ⚡ Easy IndexedDB configuration
-* 🧠 Built-in API caching with expiry
-* 📦 Simple CRUD helpers
-* 🔁 Auto refresh when cache expires
-* 🧩 Angular Dependency Injection support
-* 🛠 Clean & professional service-based API
+- ⚡ Easy IndexedDB setup in Angular  
+- 🧠 Built-in API caching with expiry (TTL)  
+- 📦 Simple CRUD operations  
+- 🔁 Auto re-fetch when cache expires  
+- 🧱 Framework-agnostic core with Angular-friendly usage  
+- 🛠 Clean and developer-friendly API  
 
 ---
 
@@ -29,116 +27,165 @@ npm install universe-code@latest
 
 ## ⚙️ IndexedDB Setup (One Time Only)
 
-IndexedDB should be initialized **once at application bootstrap level**.
+Configure IndexedDB once in your Angular app and reuse it everywhere via a shared Angular service.
 
 ---
 
-## 1️⃣ Import Angular Compiler (Required)
+## 1️⃣ Create an Angular IndexedDB Service
 
-`universe-code` internally uses Angular decorators and DI.
-For JIT environments, Angular Compiler **must be available**.
+Create the following file:
 
-📁 `main.ts`
+**📁 `src/app/services/app-idb.service.ts`**
 
 ```ts
-import '@angular/compiler';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
-
-bootstrapApplication(App, appConfig)
-  .catch(console.error);
-```
+import { Injectable } from '@angular/core';
+import { IdbService as CoreIdbService } from 'universe-code/indexdb';
+// If your bundler does not support subpath exports, use this instead:
+// import { IdbService as CoreIdbService } from 'universe-code/dist/indexdb/services/idbService.js';
+
+interface IdbConfig {
+  dbName: string;
+  version: number;
+  storeName: string;
+}
 
-> ⚠️ **Note:**
-> This avoids `JIT compilation failed for injectable class` errors.
+// Centralized IndexedDB configuration for this Angular app
+const IDB_CONFIG: IdbConfig = {
+  dbName: 'db',
+  version: 1,
+  storeName: 'store',
+};
+
+@Injectable({ providedIn: 'root' })
+export class AppIdbService {
+  private readonly client = new CoreIdbService(IDB_CONFIG);
+
+  fetchWithCache<T>(
+    key: string,
+    ttlMs: number,
+    apiFn: () => Promise<T>
+  ): Promise<T | null> {
+    return this.client.getWithExpiry(key, ttlMs, apiFn);
+  }
 
----
+  get<T = any>(key: string): Promise<T | null> {
+    return this.client.get(key);
+  }
 
-## 2️⃣ Import the IndexedDB Service
+  set(data: any): Promise<any> {
+    return this.client.put(data);
+  }
 
-`IdbService` is provided via Angular DI and requires **no manual provider setup**.
+  remove(key: string): Promise<any> {
+    return this.client.remove(key);
+  }
 
-```ts
-import { IdbService } from 'universe-code/angular';
+  clear(): Promise<any> {
+    return this.client.clear();
+  }
+}
 ```
 
----
+### ✅ What this service does
+
+- Creates a single `IdbService` instance for the entire app  
+- Centralizes database name, version, and store name  
+- Exposes clean methods usable in any component or service  
 
-## 🚀 Using IndexedDB in Angular Components
+---
 
-Inject the service inside any component or service.
+## 2️⃣ Use the Service in Your Angular Component
 
-📁 `app.ts`
+Example `AppComponent`:
 
 ```ts
 import { Component, OnInit } from '@angular/core';
-import { IdbService } from 'universe-code/angular';
+import { AppIdbService } from './services/app-idb.service';
+import { ApiService } from './services/api.service';
+import { minutesToMs } from 'universe-code/core';
 
 @Component({
   selector: 'app-root',
-  template: `<h1>Angular App</h1>`,
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
 })
-export class App implements OnInit {
-
-  constructor(private idb: IdbService) {}
-
-  async ngOnInit() {
-    const data = await this.idb.fetchWithCache(
-      'example-key',
-      60_000, // cache expiry in ms
-      async () => {
-        const res = await fetch('https://example.com/api/data');
-        return res.json();
-      }
-    );
-
-    console.log(data);
+export class AppComponent implements OnInit {
+  constructor(
+    private readonly api: ApiService,
+    private readonly idb: AppIdbService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    try {
+      const data = await this.idb.fetchWithCache(
+        'allEventList',
+        minutesToMs(1),
+        () => this.api.getAllEvents()
+      );
+
+      console.log('All Events:', data);
+    } catch (error) {
+      console.error('Failed to load events:', error);
+    }
   }
 }
 ```
 
+### ✅ IndexedDB is now ready
+
+Once `AppIdbService` is created, no additional setup is required.  
+Simply inject it wherever IndexedDB access is needed.
+
 ---
 
-## 🔁 Fetch API Data with Cache + Expiry
+## 🔁 API Fetch + Cache with Expiry
 
 ```ts
-const result = await idb.fetchWithCache(
-  'users',
-  5 * 60 * 1000,
-  async () => {
-    const res = await fetch('/api/users');
-    return res.json();
-  }
-);
+import { minutesToMs } from 'universe-code/core';
+
+async function loadUserProfile(idb: AppIdbService) {
+  const user = await idb.fetchWithCache(
+    'user-profile',
+    minutesToMs(5),
+    async () => {
+      const res = await fetch('https://example.com/api/user');
+      const json = await res.json();
+      return json.data;
+    }
+  );
+
+  console.log('User profile:', user);
+}
 ```
 
-### 🧠 How it Works
+### 🧠 How it works
 
-* Checks IndexedDB for cached data
-* Validates expiry timestamp
-* Calls API only if cache is missing or expired
-* Stores fresh data automatically
-* Returns cached data instantly on next call
+- Calls API only if data is missing or expired  
+- Stores response in IndexedDB with timestamp  
+- Returns cached data instantly within TTL  
+- Falls back to cached data if API fails  
 
 ---
 
-## 📥 Get Cached Data Only
+## 📥 Get Data from IndexedDB
 
 ```ts
-const data = await idb.get('users');
+const data = await this.idb.get('users');
+console.log(data);
 ```
 
 ---
 
-## ✏️ Insert / Update Data Manually
+## ✏️ Insert / Update Data
+
+> Default store `keyPath` is `id`
 
 ```ts
-await idb.put({
-  id: 'profile',
+await this.idb.set({
+  id: 'users',
   data: {
-    name: 'John',
-    role: 'Admin',
+    name: 'Mark',
+    country: 'USA',
   },
   timestamp: Date.now(),
 });
@@ -146,10 +193,10 @@ await idb.put({
 
 ---
 
-## 🗑️ Remove a Specific Record
+## 🗑️ Delete a Specific Record
 
 ```ts
-await idb.remove('profile');
+await this.idb.remove('users');
 ```
 
 ---
@@ -157,34 +204,50 @@ await idb.remove('profile');
 ## 🧹 Clear Entire IndexedDB Store
 
 ```ts
-await idb.clear();
+await this.idb.clear();
 ```
 
 ---
 
-## 📚 API Reference
+## 📚 API Reference (Angular Wrapper)
+
+### `AppIdbService`
 
-| Method                                 | Description                  |
-| -------------------------------------- | ---------------------------- |
-| `get(id)`                              | Retrieve data from IndexedDB |
-| `put(payload)`                         | Insert or update data        |
-| `remove(id)`                           | Delete a specific record     |
-| `clear()`                              | Clear entire IndexedDB       |
-| `fetchWithCache(id, expiry, callback)` | Fetch + cache with expiry    |
+| Method | Signature | Description |
+|------|----------|-------------|
+| fetchWithCache | `(key, ttlMs, apiFn)` | Fetch & cache data with expiry |
+| get | `(key)` | Get record by key |
+| set | `(data)` | Insert or update record |
+| remove | `(key)` | Delete record |
+| clear | `()` | Clear store |
+
+---
+
+## ⚙️ Core: `IdbService`
+
+Used internally from `universe-code/indexdb`:
+
+- `connect()`  
+- `get(key)`  
+- `put(data)`  
+- `remove(key)`  
+- `clear()`  
+- `getWithExpiry(key, ttl, apiFn)`  
+
+Can also be used outside Angular (JS / TS / other frameworks).
 
 ---
 
 ## ✅ Ideal Use Cases
 
-* API response caching
-* Offline-first Angular apps
-* Performance optimization
-* Reducing repeated network calls
-* Storing session-level data
+- API response caching  
+- Offline-first Angular apps  
+- Performance optimization  
+- Local session & config storage  
+- Shared data across routes/components  
 
 ---
 
 ## 🛡 License
 
-MIT License © universe-code
-
+MIT License © **universe-code**

package/dist/react/indexdb/store/config.js

@@ -1,3 +1,4 @@
+import { connectDB } from "./idbStore.js";
 let config = null;
 
 export const configureIdb = (options) => {
@@ -5,6 +6,7 @@ export const configureIdb = (options) => {
         return;
     }
     config = options;
+    connectDB();
 };
 
 export const getConfig = () => {

package/dist/react/indexdb/store/idbStore.js

@@ -6,7 +6,7 @@ let store = null;
 let manager = null;
 
 // ✅ index db connection
-const connectDB = async () => {
+export const connectDB = async () => {
   const { dbName, dbVersion, storeName } = getConfig(); // ✅ FIXED
 
   if (!manager) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "universe-code",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "description": "Universal utility functions for all JS frameworks",
   "license": "ISC",
   "type": "module",