feat(async-storage): implement web storage with idb

Author: krizzu

package.json

@@ -6,6 +6,7 @@
     "build": "turbo run build",
     "build:android": "./scripts/build-native-lib.sh android",
     "build:apple": "./scripts/build-native-lib.sh apple",
+    "build:js": "yarn workspace @react-native-async-storage/async-storage build",
     "format": "concurrently 'yarn:format:*'",
     "format:c": "clang-format -i $(git ls-files '*.cpp' '*.h' '*.m' '*.mm') --style file:.config/.clang-format",
     "format:js": "prettier --write $(git ls-files '*.js' '*.json' '*.ts' '*.tsx' '*.yml' 'README.md')",

packages/async-storage/package.json

@@ -37,6 +37,9 @@
     "!**/__mocks__",
     "!**/.*"
   ],
+  "dependencies": {
+    "idb": "8.0.3"
+  },
   "devDependencies": {
     "@react-native-community/cli": "18.0.0",
     "@types/react": "^19.0.0",

packages/async-storage/src/AsyncStorageError.ts

@@ -4,6 +4,12 @@ enum AsyncStorageErrorType {
    */
   NativeModuleError = "NativeModuleError",
 
+  /**
+   * Related to web storage (indexedDB)
+   * https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest/error
+   */
+  WebStorageError = "WebStorageError",
+
   /**
    * Error thrown from Sqlite itself
    * https://www.sqlite.org/rescode.html

packages/async-storage/src/createAsyncStorage.native.ts

@@ -21,7 +21,7 @@ class AsyncStorageImpl implements AsyncStorage {
   getItem = async (key: string): Promise<string | null> => {
     try {
       const result = await this.db.getValues(this.dbName, [key]);
-      const value = result[0] ?? null;
+      const value = result?.[0] ?? null;
       return value?.value ?? null;
     } catch (e) {
       throw AsyncStorageError.nativeError(e);

packages/async-storage/src/createAsyncStorage.ts

@@ -1,76 +1,96 @@
 import type { AsyncStorage } from "./AsyncStorage";
 import { AsyncStorageError } from "./AsyncStorageError";
+import IndexedDBStorage from "./web-module/IndexedDBStorage";
 
 class AsyncStorageWebImpl implements AsyncStorage {
-  constructor(private readonly dbName: string) {}
+  private db: IndexedDBStorage;
+
+  constructor(dbName: string) {
+    this.db = new IndexedDBStorage(dbName);
+  }
 
   getItem = async (key: string): Promise<string | null> => {
     try {
-      // todo:
-      return null;
+      const result = await this.db.getValues([key]);
+      const value = result?.[0] ?? null;
+      return value?.value ?? null;
     } catch (e) {
-      throw AsyncStorageError.nativeError(e);
+      throw this.createError(e);
     }
   };
 
   setItem = async (key: string, value: string): Promise<void> => {
     try {
-      // todo
+      await this.db.setValues([{ key, value }]);
     } catch (e) {
-      throw AsyncStorageError.nativeError(e);
+      throw this.createError(e);
     }
   };
 
   removeItem = async (key: string): Promise<void> => {
     try {
-      // todo
+      await this.db.removeValues([key]);
     } catch (e) {
-      throw AsyncStorageError.nativeError(e);
+      throw this.createError(e);
     }
   };
 
   getMany = async (keys: string[]): Promise<Record<string, string | null>> => {
     try {
-      // todo
-      return {};
+      return await this.db.getValues(keys).then((entries) =>
+        entries.reduce<Record<string, string | null>>((values, current) => {
+          values[current.key] = current.value;
+          return values;
+        }, {})
+      );
     } catch (e) {
-      throw AsyncStorageError.nativeError(e);
+      throw this.createError(e);
     }
   };
 
   setMany = async (entries: Record<string, string>): Promise<void> => {
     try {
-      // todo
+      await this.db.setValues(
+        Object.entries(entries).map(([key, value]) => ({ key, value }))
+      );
     } catch (e) {
-      throw AsyncStorageError.nativeError(e);
+      throw this.createError(e);
     }
   };
 
   removeMany = async (keys: string[]): Promise<void> => {
     try {
-      // todo
+      await this.db.removeValues(keys);
     } catch (e) {
-      throw AsyncStorageError.nativeError(e);
+      throw this.createError(e);
     }
   };
 
   getAllKeys = async (): Promise<string[]> => {
     try {
-      // todo
-      return [];
+      return await this.db.getKeys();
     } catch (e) {
-      throw AsyncStorageError.nativeError(e);
+      throw this.createError(e);
     }
   };
 
   clear = async (): Promise<void> => {
     try {
-      // return await this.db.clearStorage(this.dbName);
-      // todo
+      return await this.db.clearStorage();
     } catch (e) {
-      throw AsyncStorageError.nativeError(e);
+      throw this.createError(e);
     }
   };
+
+  private createError(e: any): AsyncStorageError {
+    if (e instanceof AsyncStorageError) {
+      return e;
+    }
+    return AsyncStorageError.jsError(
+      e?.message ?? `Web storage error: ${e}`,
+      AsyncStorageError.Type.WebStorageError
+    );
+  }
 }
 
 export function createAsyncStorage(databaseName: string): AsyncStorage {

packages/async-storage/src/web-module/IndexedDBConnectionRegistry.ts

@@ -0,0 +1,67 @@
+import type { DBSchema, IDBPDatabase } from "idb";
+import { openDB } from "idb";
+import { AsyncStorageError } from "../AsyncStorageError";
+
+const WebStorageTableName = "entries" as const;
+
+export interface AsyncStorageWeb extends DBSchema {
+  [WebStorageTableName]: {
+    key: string;
+    value: string | null;
+  };
+}
+
+/**
+ * Registry to keep one IndexedDB connection per database name.
+ */
+class IndexedDBConnectionRegistry {
+  private registry: Map<string, Promise<IDBPDatabase<AsyncStorageWeb>>> =
+    new Map();
+
+  public TableName = WebStorageTableName;
+
+  public getOrCreate(dbName: string): Promise<IDBPDatabase<AsyncStorageWeb>> {
+    if (this.registry.has(dbName)) {
+      return this.registry.get(dbName)!;
+    }
+    const db = openDB<AsyncStorageWeb>(dbName, 1, {
+      upgrade: (db) => {
+        if (!db.objectStoreNames.contains(WebStorageTableName)) {
+          db.createObjectStore(WebStorageTableName);
+        }
+      },
+      blocked: (
+        currentVersion: number,
+        blockedVersion: number | null,
+        _: IDBVersionChangeEvent
+      ) => {
+        throw AsyncStorageError.jsError(
+          `New version (${blockedVersion}) is blocked by current one (${currentVersion})`,
+          AsyncStorageError.Type.WebStorageError
+        );
+      },
+      blocking: (
+        currentVersion: number,
+        blockedVersion: number | null,
+        _: IDBVersionChangeEvent
+      ) => {
+        throw AsyncStorageError.jsError(
+          `Current db version (${currentVersion}) is blocking upgrade to next version (${blockedVersion})`,
+          AsyncStorageError.Type.WebStorageError
+        );
+      },
+    });
+
+    this.registry.set(dbName, db);
+
+    // in case of error while opening, clear the storage to retry
+    db.catch((err) => {
+      this.registry.delete(dbName);
+      throw err;
+    });
+
+    return db;
+  }
+}
+
+export default new IndexedDBConnectionRegistry();

packages/async-storage/src/web-module/IndexedDBStorage.ts

@@ -0,0 +1,98 @@
+import { AsyncStorageError } from "../AsyncStorageError";
+import registry from "./IndexedDBConnectionRegistry";
+
+class IndexedDBStorage {
+  constructor(private dbName: string) {}
+
+  getValues = async (
+    keys: string[]
+  ): Promise<{ key: string; value: string | null }[]> => {
+    try {
+      const db = await this.db();
+      const tx = db.transaction(registry.TableName, "readonly");
+      const store = tx.objectStore(registry.TableName);
+
+      const result = await Promise.all(
+        keys.map(async (key) => {
+          const entry = await store.get(key);
+          return { key, value: entry || null };
+        })
+      );
+
+      await tx.done;
+      return result;
+    } catch (e: any) {
+      throw this.createError(e);
+    }
+  };
+
+  setValues = async (
+    values: { key: string; value: string | null }[]
+  ): Promise<{ key: string; value: string | null }[]> => {
+    try {
+      const db = await this.db();
+      const tx = db.transaction(registry.TableName, "readwrite");
+      const store = tx.objectStore(registry.TableName);
+
+      const result = await Promise.all(
+        values.map(async (entry) => {
+          await store.put(entry.value, entry.key);
+          return { key: entry.key, value: entry.value };
+        })
+      );
+
+      await tx.done;
+      return result;
+    } catch (e: any) {
+      throw this.createError(e);
+    }
+  };
+
+  removeValues = async (keys: string[]): Promise<void> => {
+    try {
+      const db = await this.db();
+      const tx = db.transaction(registry.TableName, "readwrite");
+      const store = tx.objectStore(registry.TableName);
+
+      await Promise.all(
+        keys.map(async (key) => {
+          await store.delete(key);
+        })
+      );
+    } catch (e: any) {
+      throw this.createError(e);
+    }
+  };
+
+  clearStorage = async (): Promise<void> => {
+    try {
+      const db = await this.db();
+      await db.clear(registry.TableName);
+    } catch (e: any) {
+      throw this.createError(e);
+    }
+  };
+
+  getKeys = async (): Promise<string[]> => {
+    try {
+      const db = await this.db();
+      return await db.getAllKeys(registry.TableName);
+    } catch (e: any) {
+      throw this.createError(e);
+    }
+  };
+
+  private db = () => registry.getOrCreate(this.dbName);
+
+  private createError(e: any): AsyncStorageError {
+    if (e instanceof AsyncStorageError) {
+      return e;
+    }
+    return AsyncStorageError.jsError(
+      e?.message ?? `IndexedDB error: ${e}`,
+      AsyncStorageError.Type.WebStorageError
+    );
+  }
+}
+
+export default IndexedDBStorage;

packages/async-storage/tsconfig.json

@@ -7,7 +7,7 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react-jsx",
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "dom"],
     "module": "ESNext",
     "moduleResolution": "bundler",
     "noEmit": false,

shared-storage/src/commonMain/kotlin/org/asyncstorage/shared_storage/database/StorageDatabase.kt

@@ -5,7 +5,7 @@ import kotlinx.coroutines.flow.Flow
 
 private const val DATABASE_VERSION = 1
 
-@Entity(tableName = "storage")
+@Entity(tableName = "entries")
 internal data class StorageEntry(@PrimaryKey val key: String, val value: String?)
 
 @Dao

yarn.lock

@@ -3850,6 +3850,7 @@ __metadata:
     "@types/react": "npm:^19.0.0"
     del-cli: "npm:^5.1.0"
     eslint: "npm:9.34.0"
+    idb: "npm:8.0.3"
     prettier: "npm:3.6.2"
     react: "npm:19.0.0"
     react-native: "npm:0.79.6"
@@ -11739,6 +11740,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"idb@npm:8.0.3":
+  version: 8.0.3
+  resolution: "idb@npm:8.0.3"
+  checksum: 10c0/421cd9a3281b7564528857031cc33fd9e95753f8191e483054cb25d1ceea7303a0d1462f4f69f5b41606f0f066156999e067478abf2460dfcf9cab80dae2a2b2
+  languageName: node
+  linkType: hard
+
 "ieee754@npm:^1.1.13":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"