opfs polyfill

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "native-file-system-adapter": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "uuid": "^9.0.1"

src/services/origin-private-file-system.test.ts

@@ -1,27 +1,37 @@
+import { getOriginPrivateDirectory } from "native-file-system-adapter";
 import { makeOpfsAdapter } from "./origin-private-file-system";
 
+jest.mock("native-file-system-adapter", () => ({
+  getOriginPrivateDirectory: jest.fn(),
+}));
+
 describe("Origin private file system (OPFS) adapter", () => {
   beforeAll(() => {
+    const getDirectoryMock = jest.fn().mockImplementation(() => ({
+      getFileHandle: jest.fn().mockImplementation(() => ({
+        getFile: jest.fn().mockResolvedValue({
+          text: jest
+            .fn()
+            .mockResolvedValue('{ "taste": "pepsicola", "surprise": false }'),
+        }),
+        createWritable: jest.fn().mockResolvedValue({
+          write: jest.fn(),
+          close: jest.fn(),
+        }),
+      })),
+    }));
+
     Object.defineProperty(global.navigator, "storage", {
       value: {
-        getDirectory: jest.fn().mockImplementation(() => ({
-          getFileHandle: jest.fn().mockImplementation(() => ({
-            getFile: jest.fn().mockResolvedValue({
-              text: jest
-                .fn()
-                .mockResolvedValue(
-                  '{ "taste": "pepsicola", "surprise": false }'
-                ),
-            }),
-            createWritable: jest.fn().mockResolvedValue({
-              write: jest.fn(),
-              close: jest.fn(),
-            }),
-          })),
-        })),
+        getDirectory: getDirectoryMock,
       },
       writable: true,
     });
+
+    // if the polyfill gets removed, this line below must be removed too and that's it.
+    (getOriginPrivateDirectory as jest.Mock).mockImplementation(() =>
+      global.navigator.storage.getDirectory()
+    );
   });
 
   it("Integrates with real OPFS to retrieve parsed JSON content", async () => {

src/services/origin-private-file-system.ts

@@ -1,3 +1,5 @@
+import { getOriginPrivateDirectory } from "native-file-system-adapter";
+
 export interface OriginPrivateFileSystemAdapter<T> {
   retrieve: () => Promise<T | null>;
   persist: (data: T) => Promise<void>;
@@ -6,7 +8,7 @@ export interface OriginPrivateFileSystemAdapter<T> {
 export async function makeOpfsAdapter<T>(
   filename: string
 ): Promise<OriginPrivateFileSystemAdapter<T>> {
-  const opfsRoot = await navigator.storage.getDirectory();
+  const opfsRoot = await getOriginPrivateDirectory();
   const fileHandle = await opfsRoot.getFileHandle(filename, {
     create: true,
   });

src/vendor-types/native-file-system-adapter.d.ts

@@ -0,0 +1,5 @@
+// See: https://github.com/jimmywarting/native-file-system-adapter/issues/50
+
+declare module "native-file-system-adapter" {
+  export * from "native-file-system-adapter/types/mod";
+}