Use idb instead of idb-keyval to allow deleting db

contexts/fileSystem/functions.ts

@@ -1,4 +1,4 @@
-import { get } from "idb-keyval";
+import { openDB } from "idb";
 import { join } from "path";
 import index from "public/.index/fs.9p.json";
 import { FS_HANDLES } from "utils/constants";
@@ -20,6 +20,11 @@ type FS9P = {
   version: 3;
 };
 
+type FileSystemHandles = Record<string, FileSystemDirectoryHandle>;
+
+const KEYVAL_STORE_NAME = "keyval";
+export const KEYVAL_DB = `${KEYVAL_STORE_NAME}-store`;
+
 const IDX_MTIME = 2;
 const IDX_TARGET = 3;
 const IDX_FILE_MODE = 33206;
@@ -111,9 +116,22 @@ export const supportsIndexedDB = (): Promise<boolean> =>
     });
   });
 
-export const getFileSystemHandles = async (): Promise<
-  Record<string, FileSystemDirectoryHandle>
-> => ((await supportsIndexedDB()) && (await get(FS_HANDLES))) || {};
+const getKeyValStore = (): ReturnType<typeof openDB> =>
+  openDB(KEYVAL_DB, 1, {
+    upgrade: (db) => db.createObjectStore(KEYVAL_STORE_NAME),
+  });
+
+export const getFileSystemHandles = async (): Promise<FileSystemHandles> => {
+  if (!(await supportsIndexedDB())) return {};
+
+  const db = await getKeyValStore();
+
+  return (
+    (await (<Promise<FileSystemHandles>>(
+      db.get(KEYVAL_STORE_NAME, FS_HANDLES)
+    ))) || {}
+  );
+};
 
 export const addFileSystemHandle = async (
   directory: string,
@@ -121,12 +139,16 @@ export const addFileSystemHandle = async (
 ): Promise<void> => {
   if (!(await supportsIndexedDB())) return;
 
-  const { set } = await import("idb-keyval");
+  const db = await getKeyValStore();
 
-  await set(FS_HANDLES, {
-    ...(await getFileSystemHandles()),
-    [join(directory, handle.name)]: handle,
-  });
+  db.put(
+    KEYVAL_STORE_NAME,
+    {
+      ...(await getFileSystemHandles()),
+      [join(directory, handle.name)]: handle,
+    },
+    FS_HANDLES
+  );
 };
 
 export const removeFileSystemHandle = async (
@@ -136,9 +158,9 @@ export const removeFileSystemHandle = async (
 
   const { [directory]: _removedHandle, ...handles } =
     await getFileSystemHandles();
-  const { set } = await import("idb-keyval");
+  const db = await getKeyValStore();
 
-  await set(FS_HANDLES, handles);
+  await db.put(KEYVAL_STORE_NAME, handles, FS_HANDLES);
 };
 
 export const requestPermission = async (

contexts/fileSystem/useFileSystemContextState.ts

@@ -14,6 +14,7 @@ import {
 import {
   addFileSystemHandle,
   getFileSystemHandles,
+  KEYVAL_DB,
   removeFileSystemHandle,
 } from "contexts/fileSystem/functions";
 import type { AsyncFS, RootFileSystem } from "contexts/fileSystem/useAsyncFs";
@@ -209,31 +210,9 @@ const useFileSystemContextState = (): FileSystemContextState => {
 
       if (!window.indexedDB.databases) clearFs();
       else {
-        window.indexedDB.databases().then((databases) => {
-          Promise.allSettled(
-            databases
-              .filter(({ name }) => name !== "browserfs")
-              .map(
-                ({ name }) =>
-                  new Promise((resolveDelete, rejectDelete) => {
-                    if (name) {
-                      const deleteRequest =
-                        window.indexedDB.deleteDatabase(name);
-
-                      ["blocked", "error", "success", "upgradeneeded"].forEach(
-                        (eventType) =>
-                          deleteRequest.addEventListener(
-                            eventType,
-                            resolveDelete
-                          )
-                      );
-                    }
-
-                    window.setTimeout(rejectDelete, 500);
-                  })
-              )
-          ).then(clearFs);
-        });
+        import("idb").then(({ deleteDB }) =>
+          deleteDB(KEYVAL_DB).then(clearFs).catch(clearFs)
+        );
       }
     });
   const mkdirRecursive = async (path: string): Promise<void> => {

package.json

@@ -49,7 +49,7 @@
     "framer-motion": "^6.3.11",
     "gif.js": "^0.2.0",
     "html-to-image": "^1.9.0",
-    "idb-keyval": "^6.1.0",
+    "idb": "^7.0.2",
     "ini": "^3.0.0",
     "isomorphic-git": "^1.18.3",
     "music-metadata-browser": "^2.5.6",

public/CREDITS.md

@@ -21,7 +21,7 @@ This project is greatly augmented by code from the open source community. Thank
 ## System Libraries
 
 - [BrowserFS](https://github.com/jvilk/BrowserFS)
-- [IDB-Keyval](https://github.com/jakearchibald/idb-keyval)
+- [idb](https://github.com/jakearchibald/idb)
 - [fflate](https://github.com/101arrowz/fflate)
 - [7z-wasm](https://github.com/use-strict/7z-wasm)
 - [music-metadata-browser](https://github.com/Borewit/music-metadata-browser)

yarn.lock

@@ -3223,12 +3223,10 @@ iconv-lite@0.6.3:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
-idb-keyval@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-6.1.0.tgz#e659cff41188e6097d7fadd69926f6adbbe70041"
-  integrity sha512-u/qHZ75rlD3gH+Zah8dAJVJcGW/RfCnfNrFkElC5RpRCnpsCXXhqjVk+6MoVKJ3WhmNbRYdI6IIVP88e+5sxGw==
-  dependencies:
-    safari-14-idb-fix "^3.0.0"
+idb@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-7.0.2.tgz#7a067e20dd16539938e456814b7d714ba8db3892"
+  integrity sha512-jjKrT1EnyZewQ/gCBb/eyiYrhGzws2FeY92Yx8qT9S9GeQAmo4JFVIiWRIfKW/6Ob9A+UDAOW9j9jn58fy2HIg==
 
 ieee754-buffer@^2.0.0:
   version "2.0.0"
@@ -5332,11 +5330,6 @@ rxjs@^7.5.5:
   dependencies:
     tslib "^2.1.0"
 
-safari-14-idb-fix@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/safari-14-idb-fix/-/safari-14-idb-fix-3.0.0.tgz#450fc049b996ec7f3fd9ca2f89d32e0761583440"
-  integrity sha512-eBNFLob4PMq8JA1dGyFn6G97q3/WzNtFK4RnzT1fnLq+9RyrGknzYiM/9B12MnKAxuj1IXr7UKYtTNtjyKMBog==
-
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"