use-idb-storage 0.1.1 → 0.1.2

package/README.md

@@ -1,39 +1,46 @@
-# React IDB Storage 
+# useIDBStorage
+
 ![npm version](https://img.shields.io/npm/v/use-idb-storage)
 ![npm downloads](https://img.shields.io/npm/dm/use-idb-storage)
 ![License](https://img.shields.io/npm/l/use-idb-storage)
 ![Tests](https://github.com/sohanemon/idb/actions/workflows/test.yml/badge.svg)
 
-A modern, developer-friendly IndexedDB library for React and vanilla JavaScript with both hook-based and class-based APIs.
+**The most powerful React hook for IndexedDB state management.** Drop-in replacement for `useState` with automatic persistence, error handling, and advanced features.
+
+## 🔥 What Makes It Special?
+
+**useIDBStorage** combines the simplicity of `useState` with the power of IndexedDB. It provides:
+
+- **Simple API**: `const [value, setValue] = useIDBStorage(...)` - just like `useState`!
+- **Automatic Persistence**: Data survives browser refreshes, crashes, and sessions
+- **Rich Features**: Loading states, error handling, timestamps, and more
+- **High Performance**: Near-native speed with minimal overhead
+- **Type Safety**: Full TypeScript support with inferred types
+- **Flexible Usage**: Both simple tuple destructuring and powerful object destructuring
 
-## Features
+## ✨ Why useIDBStorage?
 
-- 🚀 **Simple API**: Easy-to-use hooks and classes
-- 🔄 **Reactive**: React hooks with automatic re-renders
-- 🏪 **Multi-store**: Support for multiple object stores
+- 🚀 **useState-compatible**: Same API, but with persistence
+- 🔄 **Reactive & Powerful**: Loading states, error handling, timestamps
+- 🏪 **Multi-store**: Multiple databases and object stores
 - 📦 **Batch operations**: Efficient bulk operations
 - 🔧 **TypeScript**: Full type safety
 - 🎯 **Promise-based**: Modern async/await support
+- ⚡ **High Performance**: Near-native speed (1.5ms overhead vs useState)
 
-## Performance
+## ⚡ Performance
 
-useIDBStorage offers near-native performance with minimal overhead. Benchmark results show only 1.5ms difference compared to useState for 400 forced unbatched updates:
+**Near-native performance** with minimal overhead. Benchmark shows only **1.5ms difference** vs `useState` for 400 forced updates:
 
 ```json
 {
-  "useState": {
-    "renders": 400,
-    "time": 3317.9
-  },
-  "useIDBStorage": {
-    "renders": 400,
-    "time": 3316.4
-  },
+  "useState": { "renders": 400, "time": 3317.9 },
+  "useIDBStorage": { "renders": 400, "time": 3316.4 },
   "differenceMs": 1.5
 }
 ```
 
-For detailed performance testing guide, see [PERFORMANCE.md](./PERFORMANCE.md).
+See [PERFORMANCE.md](./PERFORMANCE.md) for detailed benchmarks.
 
 ## Installation
 
@@ -41,36 +48,15 @@ For detailed performance testing guide, see [PERFORMANCE.md](./PERFORMANCE.md).
 npm install use-idb-storage
 ```
 
-## Quick Start
-
-### Default Instance (Simplest)
-
-```typescript
-import { idb } from 'use-idb-storage';
-
-// Use default store immediately
-await idb.store.set('user', { name: 'John' });
-const user = await idb.store.get('user');
-
-// Use custom store
-const customStore = await idb.get('settings');
-await customStore.set('theme', 'dark');
-```
+## 🚀 Quick Start
 
-### React Hook (Recommended for React apps)
+### Simple as useState (but with persistence!)
 
 ```tsx
-import { useIDBStorage, IDBConfig } from 'use-idb-storage';
-
-function App() {
-  return (
-    <IDBConfig database="my-app" version={1} store="data">
-      <MyComponent />
-    </IDBConfig>
-  );
-}
+import { useIDBStorage } from 'use-idb-storage';
 
 function MyComponent() {
+  // Just like useState - but persists to IndexedDB!
   const [user, setUser, removeUser] = useIDBStorage({
     key: 'current-user',
     defaultValue: { name: '', email: '' }
@@ -83,6 +69,68 @@ function MyComponent() {
         onChange={e => setUser({ ...user, name: e.target.value })}
       />
       <button onClick={() => removeUser()}>Clear</button>
+      <p>Data persists across browser sessions! 🎉</p>
+    </div>
+  );
+}
+```
+
+### Powerful Object Destructuring
+
+Unlock advanced features with object destructuring:
+
+```tsx
+function AdvancedComponent() {
+  const {
+    data: user,           // The stored data
+    update: setUser,      // Update function (supports functions too!)
+    reset: clearUser,     // Reset to default
+    loading,              // Loading state
+    persisted,            // Has data been loaded/persisted?
+    error,                // Any errors?
+    lastUpdated,          // When was it last saved?
+    refresh               // Force reload from IndexedDB
+  } = useIDBStorage({
+    key: 'user-profile',
+    defaultValue: { name: '', email: '', avatar: null }
+  });
+
+  // Handle loading states
+  if (loading) return <div>Loading...</div>;
+
+  // Handle errors gracefully
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      <h2>{user.name || 'Anonymous'}</h2>
+
+      {/* Functional updates */}
+      <button onClick={() => setUser(prev => ({
+        ...prev,
+        loginCount: (prev.loginCount || 0) + 1
+      }))}>
+        Increment Login Count
+      </button>
+
+      {/* Direct updates */}
+      <button onClick={() => setUser({ ...user, name: 'John' })}>
+        Set Name
+      </button>
+
+      {/* Reset to default */}
+      <button onClick={clearUser}>Reset</button>
+
+      {/* Force refresh */}
+      <button onClick={() => refresh()}>Refresh from DB</button>
+
+      {/* Status indicators */}
+      <div>
+        Status: {persisted ? '✅ Saved' : '⏳ Saving...'}
+        {lastUpdated && (
+          <span>Last saved: {lastUpdated.toLocaleTimeString()}</span>
+        )}
+      </div>
     </div>
   );
 }
@@ -184,29 +232,72 @@ Provides operations for a specific object store.
 
 ### useIDBStorage Hook
 
-React hook for reactive IndexedDB state management.
+**The most powerful React hook for IndexedDB state management.** Supports both simple `useState`-style usage and advanced object destructuring with rich features.
 
-```typescript
-const [value, setValue, removeValue] = useIDBStorage(options);
+#### Basic Usage (useState-compatible)
+
+```tsx
+const [value, setValue, removeValue] = useIDBStorage({
+  key: 'my-key',
+  defaultValue: 'default value'
+});
+
+// Just like useState!
+setValue('new value');
+setValue(prev => prev + ' updated'); // Functional updates
+removeValue(); // Reset to default
+```
+
+#### Advanced Usage (Object Destructuring)
+
+```tsx
+const {
+  data,           // The stored data (renamed from 'value' for clarity)
+  update,         // Update function (renamed from 'setValue')
+  reset,          // Reset function (renamed from 'removeValue')
+  loading,        // Boolean: Is data still loading?
+  persisted,      // Boolean: Has data been loaded from IndexedDB?
+  error,          // Error | null: Any errors during loading/saving?
+  lastUpdated,    // Date | null: When was data last successfully saved?
+  refresh         // Function: Force reload data from IndexedDB
+} = useIDBStorage({
+  key: 'my-key',
+  defaultValue: 'default value'
+});
 ```
 
 #### Parameters
 
 ```typescript
 interface IDBStorageOptions<T> {
-  key: string;
-  defaultValue: T;
-  database?: string;
-  version?: number;
-  store?: string;
+  key: string;              // Unique key for the stored value
+  defaultValue: T;          // Default value if none exists in IndexedDB
+  database?: string;        // Database name (uses context default)
+  version?: number;         // Database version (uses context default)
+  store?: string;           // Object store name (uses context default)
 }
 ```
 
-#### Returns
+#### Return Types
 
-- `value: T` - Current stored value
-- `setValue: (value: T | ((prev: T) => T)) => Promise<void>` - Update function
-- `removeValue: () => Promise<void>` - Remove function
+**Tuple Destructuring** (useState-compatible):
+```typescript
+[value: T, setValue: (value: T | ((prev: T) => T)) => void, removeValue: () => void]
+```
+
+**Object Destructuring** (Full-featured):
+```typescript
+{
+  data: T,                                    // The stored data
+  update: (value: T | ((prev: T) => T)) => void, // Update function
+  reset: () => void,                          // Reset to default
+  loading: boolean,                           // Loading state
+  persisted: boolean,                         // Persistence status
+  error: Error | null,                        // Error state
+  lastUpdated: Date | null,                   // Last update timestamp
+  refresh: () => Promise<void>                // Force refresh from DB
+}
+```
 
 ### IDBConfig Provider
 
@@ -228,72 +319,277 @@ interface IDBConfigValues {
 }
 ```
 
-## Advanced Usage
+## 🎯 Real-World Examples
 
-### Custom Stores
+### User Authentication State
 
-```typescript
-const db = new IDBStorage({ database: 'my-app', store: 'default' });
+```tsx
+function AuthProvider({ children }) {
+  const { data: user, update: setUser, reset: logout, loading } = useIDBStorage({
+    key: 'auth-user',
+    defaultValue: null
+  });
 
-// Different stores for different data types
-const users = await db.get('users');
-const settings = await db.get('settings');
+  const login = async (credentials) => {
+    try {
+      const userData = await api.login(credentials);
+      setUser(userData);
+    } catch (error) {
+      console.error('Login failed:', error);
+    }
+  };
 
-await users.set('user-1', { name: 'John' });
-await settings.set('theme', 'dark');
+  if (loading) return <div>Loading...</div>;
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
 ```
 
-### Batch Operations
+### Shopping Cart with Persistence
 
-```typescript
-const store = await db.getStore();
+```tsx
+function ShoppingCart() {
+  const {
+    data: cart,
+    update: updateCart,
+    reset: clearCart,
+    persisted,
+    lastUpdated
+  } = useIDBStorage({
+    key: 'shopping-cart',
+    defaultValue: { items: [], total: 0 }
+  });
 
-// Set multiple values
-await store.setMany([
-  ['user1', { name: 'Alice' }],
-  ['user2', { name: 'Bob' }],
-  ['user3', { name: 'Charlie' }]
-]);
+  const addItem = (item) => {
+    updateCart(prev => ({
+      items: [...prev.items, item],
+      total: prev.total + item.price
+    }));
+  };
 
-// Get multiple values
-const users = await store.getMany(['user1', 'user2']);
+  return (
+    <div>
+      <h2>Cart ({cart.items.length} items)</h2>
+      {cart.items.map(item => (
+        <div key={item.id}>{item.name} - ${item.price}</div>
+      ))}
+      <p>Total: ${cart.total}</p>
+      <button onClick={clearCart}>Clear Cart</button>
+      <div>
+        Status: {persisted ? '✅ Saved' : '💾 Saving...'}
+        {lastUpdated && <span> • Saved {lastUpdated.toLocaleTimeString()}</span>}
+      </div>
+    </div>
+  );
+}
 ```
 
-### Reactive Updates
+### Form with Auto-Save
 
-```typescript
-const [counter, setCounter] = useIDBStorage({
-  key: 'clicks',
-  defaultValue: 0
-});
+```tsx
+function AutoSaveForm() {
+  const {
+    data: formData,
+    update: updateForm,
+    loading,
+    error,
+    lastUpdated
+  } = useIDBStorage({
+    key: 'draft-form',
+    defaultValue: { title: '', content: '', tags: [] }
+  });
+
+  // Auto-save on changes
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      // Form data is automatically persisted!
+      console.log('Auto-saved at', new Date().toLocaleTimeString());
+    }, 1000);
 
-// This will automatically persist to IndexedDB
-const increment = () => setCounter(count => count + 1);
+    return () => clearTimeout(timer);
+  }, [formData]);
+
+  if (loading) return <div>Loading draft...</div>;
+  if (error) return <div>Failed to load draft: {error.message}</div>;
+
+  return (
+    <form>
+      <input
+        value={formData.title}
+        onChange={e => updateForm(prev => ({ ...prev, title: e.target.value }))}
+        placeholder="Title"
+      />
+      <textarea
+        value={formData.content}
+        onChange={e => updateForm(prev => ({ ...prev, content: e.target.value }))}
+        placeholder="Content"
+      />
+      <div>
+        {lastUpdated && (
+          <small>Last saved: {lastUpdated.toLocaleTimeString()}</small>
+        )}
+      </div>
+    </form>
+  );
+}
+```
+
+### Error Handling & Recovery
+
+```tsx
+function RobustComponent() {
+  const {
+    data: settings,
+    update: updateSettings,
+    reset: resetSettings,
+    error,
+    refresh,
+    loading
+  } = useIDBStorage({
+    key: 'user-settings',
+    defaultValue: { theme: 'light', notifications: true }
+  });
+
+  // Handle errors gracefully
+  if (error) {
+    return (
+      <div>
+        <p>Failed to load settings: {error.message}</p>
+        <button onClick={() => refresh()}>Retry</button>
+        <button onClick={resetSettings}>Reset to Defaults</button>
+      </div>
+    );
+  }
+
+  if (loading) return <div>Loading settings...</div>;
+
+  return (
+    <div>
+      <label>
+        Theme:
+        <select
+          value={settings.theme}
+          onChange={e => updateSettings(prev => ({
+            ...prev,
+            theme: e.target.value
+          }))}
+        >
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </label>
+    </div>
+  );
+}
+```
+
+## 🔧 Advanced Usage
+
+### Custom Stores & Configuration
+
+```tsx
+import { IDBConfig } from 'use-idb-storage';
+
+function App() {
+  return (
+    <IDBConfig database="my-app" version={2} store="main">
+      <MyComponents />
+    </IDBConfig>
+  );
+}
+
+function MyComponents() {
+  // Uses context config
+  const [user] = useIDBStorage({
+    key: 'user',
+    defaultValue: { name: '' }
+  });
+
+  // Override config for specific data
+  const [cache] = useIDBStorage({
+    key: 'api-cache',
+    defaultValue: {},
+    store: 'cache'  // Different store
+  });
+
+  return <div>...</div>;
+}
 ```
 
 ### Migration Strategy
 
-For database migrations, increment the version number:
+Increment version for schema changes:
 
-```typescript
-// Version 1
+```tsx
+// Version 1: Basic user data
 <IDBConfig database="my-app" version={1} store="data">
   <App />
 </IDBConfig>
 
-// Version 2 (with new features)
+// Version 2: Added preferences
 <IDBConfig database="my-app" version={2} store="data">
   <App />
 </IDBConfig>
 ```
 
-## Browser Support
+### Class-based API (Advanced)
+
+For complex operations, use the class-based API:
+
+```tsx
+import { IDBStorage } from 'use-idb-storage';
+
+const db = new IDBStorage({ database: 'my-app' });
+const store = await db.get('analytics');
+
+// Batch operations
+await store.setMany([
+  ['pageviews', 1234],
+  ['sessions', 89],
+  ['bounce-rate', 0.45]
+]);
+
+// Advanced queries
+const allKeys = await store.keys();
+const allData = await store.values();
+```
+
+## 🆚 Why useIDBStorage vs Alternatives?
+
+| Feature | useIDBStorage | localStorage | useState | Redux Persist | SWR |
+|---------|---------------|--------------|----------|---------------|-----|
+| **API Simplicity** | `useState`-like ✅ | Basic key-value | `useState`-like | Complex setup | Complex setup |
+| **TypeScript** | Full type safety ✅ | Manual typing | Full types | Complex types | Complex types |
+| **Error Handling** | Built-in ✅ | None | None | Limited | Built-in |
+| **Loading States** | ✅ | None | None | Limited | ✅ |
+| **Persistence** | IndexedDB ✅ | localStorage | None | Configurable | Cache only |
+| **Performance** | Near-native ✅ | Fast | Fast | Overhead | Network calls |
+| **Storage Limits** | ~1GB+ ✅ | ~5-10MB | None | ~5-10MB | Memory only |
+| **Structured Data** | ✅ | JSON strings | Any | Any | Any |
+| **Batch Operations** | ✅ | Manual | N/A | Manual | Limited |
+| **React Integration** | Seamless ✅ | Manual effects | Built-in | Complex | Built-in |
+
+## 🎉 Key Benefits
+
+- **🚀 Drop-in Replacement**: Use exactly like `useState` but with persistence
+- **⚡ High Performance**: Minimal overhead, near-native speed
+- **🛡️ Error Resilient**: Built-in error handling and recovery
+- **🔄 Reactive**: Automatic re-renders with loading/error states
+- **📱 Offline-First**: Works without network connectivity
+- **🏗️ Scalable**: Handles complex data structures and large datasets
+- **🔧 Developer Experience**: Rich debugging with status indicators
+
+## 🌐 Browser Support
 
 - Chrome 24+
 - Firefox 16+
 - Safari 10+
 - Edge 12+
 
-## License
+## 📄 License
 
 ISC

package/dist/index.d.ts

@@ -30,8 +30,37 @@ interface IDBConfigProps extends Partial<IDBConfigValues> {
 }
 /**
  * Return type of the useIDBStorage hook
+ * Supports both tuple destructuring: const [value, setValue, removeValue] = useIDBStorage()
+ * and object destructuring: const { value, update, reset, loading, persisted, ... } = useIDBStorage()
  */
-type UseIDBStorageReturn<T> = [T, (value: T | ((prevState: T) => T)) => void, () => void];
+type UseIDBStorageReturn<T> = {
+  /** The current stored value */
+  0: T;
+  /** Function to update the stored value */
+  1: (value: T | ((prevState: T) => T)) => void;
+  /** Function to remove the stored value and reset to default */
+  2: () => void;
+  /** The current stored data (alias for index 0) */
+  data: T;
+  /** Function to update the stored value (alias for index 1) */
+  update: (value: T | ((prevState: T) => T)) => void;
+  /** Function to remove the stored value and reset to default (alias for index 2) */
+  reset: () => void;
+  /** Whether the hook is still loading initial value from IndexedDB */
+  loading: boolean;
+  /** Whether the current value has been loaded/persisted to IndexedDB */
+  persisted: boolean;
+  /** Error that occurred during loading/persistence, if any */
+  error: Error | null;
+  /** Timestamp of last successful persistence */
+  lastUpdated: Date | null;
+  /** Force refresh value from IndexedDB */
+  refresh: () => Promise<void>;
+  /** Length for array-like behavior */
+  length: 3;
+  /** Iterator for array destructuring */
+  [Symbol.iterator](): Iterator<T | ((value: T | ((prevState: T) => T)) => void) | (() => void)>;
+};
 //#endregion
 //#region src/idb-storage.d.ts
 /**
@@ -137,7 +166,9 @@ declare function getGlobalConfig(): IDBConfigValues;
  * Optimized for performance - synchronous updates like useState with background IDB persistence.
  *
  * @param options - Configuration object containing key, defaultValue, and optional database/store names
- * @returns A tuple of the stored value, an async updater function, and a remove function.
+ * @returns An object that supports both tuple and object destructuring:
+ *   - Tuple: const [value, setValue, removeValue] = useIDBStorage()
+ *   - Object: const { data, update, reset, loading, persisted, error, lastUpdated, refresh } = useIDBStorage()
  *
  * @example
  * ```tsx
@@ -149,6 +180,7 @@ declare function getGlobalConfig(): IDBConfigValues;
  * // Option 2: Global config
  * configureIDBStorage({ database: 'myApp', version: 2, store: 'data' });
  *
+ * // Tuple destructuring (like useState)
  * const [userData, setUserData, removeUserData] = useIDBStorage({
  *   key: 'currentUser',
  *   defaultValue: { name: '', email: '' },
@@ -157,6 +189,27 @@ declare function getGlobalConfig(): IDBConfigValues;
  *   // store: 'users' // optional, uses context or global default
  * });
  *
+ * // Object destructuring (with powerful features)
+ * const {
+ *   data: userData,
+ *   update: updateUserData,
+ *   reset: resetUserData,
+ *   loading,
+ *   persisted,
+ *   error,
+ *   lastUpdated,
+ *   refresh
+ * } = useIDBStorage({
+ *   key: 'currentUser',
+ *   defaultValue: { name: '', email: '' },
+ * });
+ *
+ * // Use powerful features
+ * if (error) console.error('Storage error:', error);
+ * await refresh(); // Force reload from IndexedDB
+ * updateUserData({ name: 'John', email: 'john@example.com' }); // Direct update
+ * updateUserData(prev => ({ ...prev, lastLogin: new Date() })); // Functional update
+ *
  * // Update data
  * await setUserData({ name: 'John', email: 'john@example.com' });
  *

package/dist/index.js

@@ -1 +1 @@
-import*as e from"react";import{jsx as t}from"react/jsx-runtime";const n=new Map;function r(){return typeof indexedDB<`u`}function i(e,t,i=1,o){if(!r())throw Error(`IndexedDB is not available in this environment`);let s=`${e}:${i}:${t}`;if(n.has(s))return n.get(s);let c=a(e,t,i,o);return n.set(s,c),c}function a(e,t,r,i){return new Promise((o,s)=>{let c=indexedDB.open(e,r);c.onerror=()=>{let l=`${e}:${r??`current`}:${t}`;if(n.delete(l),c.error?.name===`VersionError`&&c.error.message.includes(`less than`)){o(a(e,t,void 0,i));return}s(c.error)},c.onupgradeneeded=e=>{let n=e.target.result;n.objectStoreNames.contains(t)||n.createObjectStore(t)},c.onsuccess=()=>{let s=c.result,l=s.version;if(!s.objectStoreNames.contains(t)){s.close();let c=`${e}:${r??`current`}:${t}`;n.delete(c),o(a(e,t,l+1,i));return}s.onversionchange=()=>{s.close();for(let[t]of n)t.startsWith(`${e}:`)&&n.delete(t);i?.()},o(s)}})}function o(e,t,n){return new Promise((r,i)=>{try{let a=e.transaction([t],`readonly`).objectStore(t).get(n);a.onerror=()=>i(a.error),a.onsuccess=()=>r(a.result)}catch(e){i(e)}})}function s(e,t,n,r){return new Promise((i,a)=>{try{let o=e.transaction([t],`readwrite`).objectStore(t).put(r,n);o.onerror=()=>a(o.error),o.onsuccess=()=>i()}catch(e){a(e)}})}function c(e,t,n){return new Promise((r,i)=>{try{let a=e.transaction([t],`readwrite`).objectStore(t).delete(n);a.onerror=()=>i(a.error),a.onsuccess=()=>r()}catch(e){i(e)}})}var l=class{db;storeName;constructor(e,t){this.db=e,this.storeName=t}async get(e){try{return await o(this.db,this.storeName,e)}catch(t){throw console.error(`Failed to get value for key "${e}":`,t),t}}async set(e,t){try{await s(this.db,this.storeName,e,t)}catch(t){throw console.error(`Failed to set value for key "${e}":`,t),t}}async delete(e){try{await c(this.db,this.storeName,e)}catch(t){throw console.error(`Failed to delete key "${e}":`,t),t}}async getMany(e){try{let t=e.map(e=>this.get(e));return await Promise.all(t)}catch(e){throw console.error(`Failed to get multiple values:`,e),e}}async setMany(e){try{let t=this.db.transaction([this.storeName],`readwrite`).objectStore(this.storeName),n=e.map(([e,n])=>new Promise((r,i)=>{let a=t.put(n,e);a.onerror=()=>i(a.error),a.onsuccess=()=>r()}));await Promise.all(n)}catch(e){throw console.error(`Failed to set multiple values:`,e),e}}async deleteMany(e){try{let t=this.db.transaction([this.storeName],`readwrite`).objectStore(this.storeName),n=e.map(e=>new Promise((n,r)=>{let i=t.delete(e);i.onerror=()=>r(i.error),i.onsuccess=()=>n()}));await Promise.all(n)}catch(e){throw console.error(`Failed to delete multiple keys:`,e),e}}async update(e,t){try{let n=t(await this.get(e));await this.set(e,n)}catch(t){throw console.error(`Failed to update value for key "${e}":`,t),t}}async clear(){try{let e=this.db.transaction([this.storeName],`readwrite`).objectStore(this.storeName).clear();await new Promise((t,n)=>{e.onerror=()=>n(e.error),e.onsuccess=()=>t()})}catch(e){throw console.error(`Failed to clear store:`,e),e}}async keys(){try{let e=this.db.transaction([this.storeName],`readonly`).objectStore(this.storeName).getAllKeys();return await new Promise((t,n)=>{e.onerror=()=>n(e.error),e.onsuccess=()=>t(Array.from(e.result))})}catch(e){throw console.error(`Failed to get keys:`,e),e}}async values(){try{let e=this.db.transaction([this.storeName],`readonly`).objectStore(this.storeName).getAll();return await new Promise((t,n)=>{e.onerror=()=>n(e.error),e.onsuccess=()=>t(e.result)})}catch(e){throw console.error(`Failed to get values:`,e),e}}async entries(){try{let e=this.db.transaction([this.storeName],`readonly`).objectStore(this.storeName).openCursor(),t=[];return new Promise((n,r)=>{e.onerror=()=>r(e.error),e.onsuccess=()=>{let r=e.result;r?(t.push([r.key,r.value]),r.continue()):n(t)}})}catch(e){throw console.error(`Failed to get entries:`,e),e}}},u=class{config;db=null;dbPromise=null;constructor(e){this.config={database:`sohanemon-idb`,version:1,store:`default`,...e},this.config.version=Math.max(1,Math.floor(this.config.version))}async getDB(){return this.db?this.db:this.dbPromise?this.dbPromise:(this.dbPromise=i(this.config.database,this.config.store,this.config.version,()=>{this.db=null,this.dbPromise=null}),this.db=await this.dbPromise,this.dbPromise=null,this.db)}async get(e){return new l(await this.getDB(),e)}get store(){return this.get(this.config.store)}async drop(e){await(await this.get(e)).clear()}close(){this.db&&=(this.db.close(),null)}};let d={database:`sohanemon-idb`,version:1,store:`default`};function f(e){d={...d,...e}}function p(){return{...d}}const m=e.createContext(null);function h(){return e.useContext(m)||p()}function g({children:e,...n}){let r={database:n.database||`sohanemon-idb`,version:n.version||1,store:n.store||`default`};return t(m.Provider,{value:r,children:e})}function _(t){let{key:n,defaultValue:i,...a}=t,o=h(),s=a.database||o.database,c=Math.max(1,Math.floor(a.version||o.version||1)),l=a.store||o.store,[d,f]=e.useState(i),p=e.useRef(!1),m=e.useRef(null),g=e.useRef(null),_=e.useRef(null),v=e.useRef(null),y=e.useRef(!1);e.useEffect(()=>{if(typeof window>`u`)return;let e=!0;return(async()=>{try{if(!r()){console.warn(`IndexedDB is not available, using default values only`),p.current=!0,y.current=!0;return}m.current&&m.current.close();let t=new u({database:s,version:c,store:l}),i=await t.get(l);if(!e)return;m.current=t,g.current=i;let a=await i.get(n);e&&a!==void 0&&f(a),p.current=!0,y.current=!0}catch(e){console.error(`Failed to initialize IDBStorage:`,e),p.current=!0,y.current=!0}})(),()=>{e=!1,_.current&&(clearTimeout(_.current),v.current!==null&&g.current&&g.current.set(n,v.current).catch(console.error)),m.current&&(m.current.close(),m.current=null,g.current=null)}},[s,c,l,n]);let b=e.useCallback(e=>{!p.current||!g.current||!y.current||(v.current=e,_.current&&clearTimeout(_.current),_.current=setTimeout(()=>{let e=v.current;v.current=null,e!==null&&g.current&&g.current.set(n,e).catch(e=>{console.error(`Failed to save value to IndexedDB:`,e)})},0))},[n]);return[d,e.useCallback(e=>{f(t=>{let n=typeof e==`function`?e(t):e;return b(n),n})},[b]),e.useCallback(()=>{f(i),b(i)},[i,b])]}const v=new u;export{g as IDBConfig,u as IDBStorage,l as IDBStore,f as configureIDBStorage,p as getGlobalConfig,v as idb,h as useIDBConfig,_ as useIDBStorage};
+import*as e from"react";import{jsx as t}from"react/jsx-runtime";const n=new Map;function r(){return typeof indexedDB<`u`}function i(e,t,i=1,o){if(!r())throw Error(`IndexedDB is not available in this environment`);let s=`${e}:${i}:${t}`;if(n.has(s))return n.get(s);let c=a(e,t,i,o);return n.set(s,c),c}function a(e,t,r,i){return new Promise((o,s)=>{let c=indexedDB.open(e,r);c.onerror=()=>{let l=`${e}:${r??`current`}:${t}`;if(n.delete(l),c.error?.name===`VersionError`&&c.error.message.includes(`less than`)){o(a(e,t,void 0,i));return}s(c.error)},c.onupgradeneeded=e=>{let n=e.target.result;n.objectStoreNames.contains(t)||n.createObjectStore(t)},c.onsuccess=()=>{let s=c.result,l=s.version;if(!s.objectStoreNames.contains(t)){s.close();let c=`${e}:${r??`current`}:${t}`;n.delete(c),o(a(e,t,l+1,i));return}s.onversionchange=()=>{s.close();for(let[t]of n)t.startsWith(`${e}:`)&&n.delete(t);i?.()},o(s)}})}function o(e,t,n){return new Promise((r,i)=>{try{let a=e.transaction([t],`readonly`).objectStore(t).get(n);a.onerror=()=>i(a.error),a.onsuccess=()=>r(a.result)}catch(e){i(e)}})}function s(e,t,n,r){return new Promise((i,a)=>{try{let o=e.transaction([t],`readwrite`).objectStore(t).put(r,n);o.onerror=()=>a(o.error),o.onsuccess=()=>i()}catch(e){a(e)}})}function c(e,t,n){return new Promise((r,i)=>{try{let a=e.transaction([t],`readwrite`).objectStore(t).delete(n);a.onerror=()=>i(a.error),a.onsuccess=()=>r()}catch(e){i(e)}})}var l=class{db;storeName;constructor(e,t){this.db=e,this.storeName=t}async get(e){try{return await o(this.db,this.storeName,e)}catch(t){throw console.error(`Failed to get value for key "${e}":`,t),t}}async set(e,t){try{await s(this.db,this.storeName,e,t)}catch(t){throw console.error(`Failed to set value for key "${e}":`,t),t}}async delete(e){try{await c(this.db,this.storeName,e)}catch(t){throw console.error(`Failed to delete key "${e}":`,t),t}}async getMany(e){try{let t=e.map(e=>this.get(e));return await Promise.all(t)}catch(e){throw console.error(`Failed to get multiple values:`,e),e}}async setMany(e){try{let t=this.db.transaction([this.storeName],`readwrite`).objectStore(this.storeName),n=e.map(([e,n])=>new Promise((r,i)=>{let a=t.put(n,e);a.onerror=()=>i(a.error),a.onsuccess=()=>r()}));await Promise.all(n)}catch(e){throw console.error(`Failed to set multiple values:`,e),e}}async deleteMany(e){try{let t=this.db.transaction([this.storeName],`readwrite`).objectStore(this.storeName),n=e.map(e=>new Promise((n,r)=>{let i=t.delete(e);i.onerror=()=>r(i.error),i.onsuccess=()=>n()}));await Promise.all(n)}catch(e){throw console.error(`Failed to delete multiple keys:`,e),e}}async update(e,t){try{let n=t(await this.get(e));await this.set(e,n)}catch(t){throw console.error(`Failed to update value for key "${e}":`,t),t}}async clear(){try{let e=this.db.transaction([this.storeName],`readwrite`).objectStore(this.storeName).clear();await new Promise((t,n)=>{e.onerror=()=>n(e.error),e.onsuccess=()=>t()})}catch(e){throw console.error(`Failed to clear store:`,e),e}}async keys(){try{let e=this.db.transaction([this.storeName],`readonly`).objectStore(this.storeName).getAllKeys();return await new Promise((t,n)=>{e.onerror=()=>n(e.error),e.onsuccess=()=>t(Array.from(e.result))})}catch(e){throw console.error(`Failed to get keys:`,e),e}}async values(){try{let e=this.db.transaction([this.storeName],`readonly`).objectStore(this.storeName).getAll();return await new Promise((t,n)=>{e.onerror=()=>n(e.error),e.onsuccess=()=>t(e.result)})}catch(e){throw console.error(`Failed to get values:`,e),e}}async entries(){try{let e=this.db.transaction([this.storeName],`readonly`).objectStore(this.storeName).openCursor(),t=[];return new Promise((n,r)=>{e.onerror=()=>r(e.error),e.onsuccess=()=>{let r=e.result;r?(t.push([r.key,r.value]),r.continue()):n(t)}})}catch(e){throw console.error(`Failed to get entries:`,e),e}}},u=class{config;db=null;dbPromise=null;constructor(e){this.config={database:`sohanemon-idb`,version:1,store:`default`,...e},this.config.version=Math.max(1,Math.floor(this.config.version))}async getDB(){return this.db?this.db:this.dbPromise?this.dbPromise:(this.dbPromise=i(this.config.database,this.config.store,this.config.version,()=>{this.db=null,this.dbPromise=null}),this.db=await this.dbPromise,this.dbPromise=null,this.db)}async get(e){return new l(await this.getDB(),e)}get store(){return this.get(this.config.store)}async drop(e){await(await this.get(e)).clear()}close(){this.db&&=(this.db.close(),null)}};let d={database:`sohanemon-idb`,version:1,store:`default`};function f(e){d={...d,...e}}function p(){return{...d}}const m=e.createContext(null);function h(){return e.useContext(m)||p()}function g({children:e,...n}){let r={database:n.database||`sohanemon-idb`,version:n.version||1,store:n.store||`default`};return t(m.Provider,{value:r,children:e})}function _(t){let{key:n,defaultValue:i,...a}=t,o=h(),s=a.database||o.database,c=Math.max(1,Math.floor(a.version||o.version||1)),l=a.store||o.store,[d,f]=e.useState(i),[p,m]=e.useState(null),[g,_]=e.useState(null),v=e.useRef(!1),y=e.useRef(null),b=e.useRef(null),x=e.useRef(null),S=e.useRef(null),C=e.useRef(!1),w=e.useRef(null);e.useEffect(()=>{if(typeof window>`u`)return;let e=!0;return(async()=>{try{if(m(null),!r()){console.warn(`IndexedDB is not available, using default values only`),w.current=i,v.current=!0,C.current=!0;return}y.current&&y.current.close();let t=new u({database:s,version:c,store:l}),a=await t.get(l);if(!e)return;y.current=t,b.current=a;let o=await a.get(n);e&&(o===void 0?w.current=i:(f(o),w.current=o,_(new Date))),v.current=!0,C.current=!0}catch(e){console.error(`Failed to initialize IDBStorage:`,e),m(e instanceof Error?e:Error(String(e))),w.current=i,v.current=!0,C.current=!0}})(),()=>{e=!1,x.current&&(clearTimeout(x.current),S.current!==null&&b.current&&b.current.set(n,S.current).catch(console.error)),y.current&&(y.current.close(),y.current=null,b.current=null)}},[s,c,l,n]);let T=e.useCallback(e=>{!v.current||!b.current||!C.current||(S.current=e,x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{let e=S.current;S.current=null,e!==null&&b.current&&b.current.set(n,e).then(()=>{_(new Date),w.current=e}).catch(e=>{console.error(`Failed to save value to IndexedDB:`,e),m(e instanceof Error?e:Error(String(e)))})},0))},[n]),E=e.useCallback(e=>{f(t=>{let n=typeof e==`function`?e(t):e;return T(n),n})},[T]),D=e.useCallback(()=>{f(i),_(null),w.current=i,T(i)},[i,T]),O=e.useCallback(async()=>{if(!(!r()||!b.current))try{m(null);let e=await b.current.get(n);e===void 0?(f(i),w.current=i,_(null)):(f(e),w.current=e,_(new Date))}catch(e){m(e instanceof Error?e:Error(String(e)))}},[n,i]),k=e.useCallback(()=>{D()},[D]),A=e.useCallback(e=>{E(e)},[E]);return Object.assign({0:d,1:E,2:D,data:d,update:A,reset:k,loading:!C.current,persisted:C.current,error:p,lastUpdated:g,refresh:O,length:3},{[Symbol.iterator]:function*(){yield d,yield E,yield D}})}const v=new u;export{g as IDBConfig,u as IDBStorage,l as IDBStore,f as configureIDBStorage,p as getGlobalConfig,v as idb,h as useIDBConfig,_ as useIDBStorage};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-idb-storage",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",