[opfs] Experimental observing

Author: jamesgpearce

src/persisters/persister-opfs/index.ts

@@ -1,6 +1,7 @@
 import type {MergeableStore} from '../../@types/mergeable-store/index.d.ts';
 import type {
   PersistedContent,
+  PersisterListener,
   Persists as PersistsType,
 } from '../../@types/persisters/index.d.ts';
 import type {
@@ -14,6 +15,11 @@ import {
 } from '../../common/json.ts';
 import {createCustomPersister} from '../common/create.ts';
 
+type FileSystemObserver = {
+  observe: (handle: FileSystemFileHandle) => Promise<void>;
+  disconnect: () => void;
+};
+
 export const createOpfsPersister = ((
   store: Store | MergeableStore,
   handle: FileSystemFileHandle,
@@ -31,9 +37,17 @@ export const createOpfsPersister = ((
     await writable.close();
   };
 
-  const addPersisterListener = () => {};
+  const addPersisterListener = async (
+    listener: PersisterListener<PersistsType.StoreOrMergeableStore>,
+  ): Promise<FileSystemObserver> => {
+    // @ts-expect-error FileSystemObserver is not yet typed
+    const observer = new FileSystemObserver(() => listener());
+    await observer.observe(handle);
+    return observer;
+  };
 
-  const delPersisterListener = () => {};
+  const delPersisterListener = (observer: FileSystemObserver) =>
+    observer?.disconnect();
 
   return createCustomPersister(
     store,

test/jest/environment.js

@@ -20,9 +20,12 @@ export default class TinyBaseEnvironment extends TestEnvironment {
       setImmediate,
       clearImmediate,
     });
-    this.global.navigator.storage = {
-      getDirectory: () => fsa({mode: 'readwrite'}).dir,
-    };
+
+    // OPFS mocks
+    const opfs = fsa({mode: 'readwrite'});
+    this.global.navigator.storage = {getDirectory: () => opfs.dir};
+    this.global.FileSystemObserver = opfs.FileSystemObserver;
+
     await super.setup();
   }