use-idb-storage 0.1.1 → 0.1.3

package/README.md

@@ -1,39 +1,25 @@
-# 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.
-
-## Features
-
-- 🚀 **Simple API**: Easy-to-use hooks and classes
-- 🔄 **Reactive**: React hooks with automatic re-renders
-- 🏪 **Multi-store**: Support for multiple object stores
-- 📦 **Batch operations**: Efficient bulk operations
-- 🔧 **TypeScript**: Full type safety
-- 🎯 **Promise-based**: Modern async/await support
+A React hook for IndexedDB state management with automatic persistence, similar to `useState` but with data persistence across sessions.
 
 ## 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
 
@@ -43,32 +29,10 @@ 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');
-```
-
-### React Hook (Recommended for React apps)
+### Basic Usage
 
 ```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() {
   const [user, setUser, removeUser] = useIDBStorage({
@@ -83,41 +47,84 @@ function MyComponent() {
         onChange={e => setUser({ ...user, name: e.target.value })}
       />
       <button onClick={() => removeUser()}>Clear</button>
+      <p>Data persists across browser sessions.</p>
     </div>
   );
 }
 ```
 
-### Class-based API (For advanced use cases)
+### Advanced Usage
+
+Use object destructuring for additional features:
+
+```tsx
+function AdvancedComponent() {
+  const {
+    data: user,
+    update: setUser,
+    reset: clearUser,
+    loading,
+    persisted,
+    error,
+    lastUpdated,
+    refresh
+  } = useIDBStorage({
+    key: 'user-profile',
+    defaultValue: { name: '', email: '', avatar: null }
+  });
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      <h2>{user.name || 'Anonymous'}</h2>
+      <button onClick={() => setUser(prev => ({
+        ...prev,
+        loginCount: (prev.loginCount || 0) + 1
+      }))}>
+        Increment Login Count
+      </button>
+      <button onClick={() => setUser({ ...user, name: 'John' })}>
+        Set Name
+      </button>
+      <button onClick={clearUser}>Reset</button>
+      <button onClick={() => refresh()}>Refresh from DB</button>
+      <div>
+        Status: {persisted ? 'Saved' : 'Saving...'}
+        {lastUpdated && (
+          <span>Last saved: {lastUpdated.toLocaleTimeString()}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+### Class-based API
 
 ```tsx
 import { IDBStorage } from 'use-idb-storage';
 
-// Create storage instance
 const db = new IDBStorage({
   database: 'my-app',
   version: 1,
   store: 'data'
 });
 
-// Get a store
 const store = await db.get('my-store');
-// Or use default store
-const defaultStore = await db.store; // Convenience getter
+const defaultStore = await db.store;
 
-// Basic operations
 await store.set('user', { name: 'John', age: 30 });
 const user = await store.get('user');
 await store.delete('user');
 
-// Batch operations
 await store.setMany([
   ['key1', 'value1'],
   ['key2', 'value2']
 ]);
 const values = await store.getMany(['key1', 'key2']);
 
-// Advanced operations
 await store.update('counter', (val) => (val || 0) + 1);
 const allKeys = await store.keys();
 await store.clear();
@@ -184,29 +191,71 @@ Provides operations for a specific object store.
 
 ### useIDBStorage Hook
 
-React hook for reactive IndexedDB state management.
+Supports both simple `useState`-style usage and advanced object destructuring.
 
-```typescript
-const [value, setValue, removeValue] = useIDBStorage(options);
+#### Basic Usage
+
+```tsx
+const [value, setValue, removeValue] = useIDBStorage({
+  key: 'my-key',
+  defaultValue: 'default value'
+});
+
+setValue('new value');
+setValue(prev => prev + ' updated');
+removeValue();
+```
+
+#### Advanced Usage
+
+```tsx
+const {
+  data,
+  update,
+  reset,
+  loading,
+  persisted,
+  error,
+  lastUpdated,
+  refresh
+} = 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 +277,243 @@ interface IDBConfigValues {
 }
 ```
 
-## Advanced Usage
+## Examples
 
-### Custom Stores
+### User Authentication
 
-```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
+  });
+
+  const login = async (credentials) => {
+    try {
+      const userData = await api.login(credentials);
+      setUser(userData);
+    } catch (error) {
+      console.error('Login failed:', error);
+    }
+  };
 
-// Different stores for different data types
-const users = await db.get('users');
-const settings = await db.get('settings');
+  if (loading) return <div>Loading...</div>;
 
-await users.set('user-1', { name: 'John' });
-await settings.set('theme', 'dark');
+  return (
+    <AuthContext.Provider value={{ user, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
 ```
 
-### Batch Operations
+### Shopping Cart
 
-```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
+### Auto-Save Form
 
-```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: [] }
+  });
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      console.log('Auto-saved at', new Date().toLocaleTimeString());
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [formData]);
 
-// This will automatically persist to IndexedDB
-const increment = () => setCounter(count => count + 1);
+  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>
+  );
+}
 ```
 
-### Migration Strategy
+### Error Handling
 
-For database migrations, increment the version number:
+```tsx
+function RobustComponent() {
+  const {
+    data: settings,
+    update: updateSettings,
+    reset: resetSettings,
+    error,
+    refresh,
+    loading
+  } = useIDBStorage({
+    key: 'user-settings',
+    defaultValue: { theme: 'light', notifications: true }
+  });
 
-```typescript
-// Version 1
+  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 Configuration
+
+```tsx
+import { IDBConfig } from 'use-idb-storage';
+
+function App() {
+  return (
+    <IDBConfig database="my-app" version={2} store="main">
+      <MyComponents />
+    </IDBConfig>
+  );
+}
+
+function MyComponents() {
+  const [user] = useIDBStorage({
+    key: 'user',
+    defaultValue: { name: '' }
+  });
+
+  const [cache] = useIDBStorage({
+    key: 'api-cache',
+    defaultValue: {},
+    store: 'cache'
+  });
+
+  return <div>...</div>;
+}
+```
+
+### Migration
+
+Increment version for schema changes:
+
+```tsx
 <IDBConfig database="my-app" version={1} store="data">
   <App />
 </IDBConfig>
 
-// Version 2 (with new features)
 <IDBConfig database="my-app" version={2} store="data">
   <App />
 </IDBConfig>
 ```
 
-## Browser Support
+### Class-based API
+
+```tsx
+import { IDBStorage } from 'use-idb-storage';
+
+const db = new IDBStorage({ database: 'my-app' });
+const store = await db.get('analytics');
+
+await store.setMany([
+  ['pageviews', 1234],
+  ['sessions', 89],
+  ['bounce-rate', 0.45]
+]);
+
+const allKeys = await store.keys();
+const allData = await store.values();
+```
+
+
+
+## 🌐 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.3",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",