feat(fs/watch): migrate to notify-debouncer-full (#885)

* Add support for notify-debouncer-full

* Add fs watch to demo

* Remove notify-debouncer-mini

* Rename RawEvent to WatchEvent

* Add full type definition for EventKind

* Remove `track file ids` option from fs watcher

* Update plugins/fs/guest-js/index.ts

examples/api/src/views/FileSystem.svelte

@@ -9,6 +9,11 @@
   let img;
   let file;
   let renameTo;
+  let watchPath = "";
+  let watchDebounceDelay = 0;
+  let watchRecursive = false;
+  let unwatchFn;
+  let unwatchPath = "";
 
   function getDir() {
     const dirSelect = document.getElementById("dir");
@@ -141,6 +146,41 @@
   function setSrc() {
     img.src = convertFileSrc(path);
   }
+
+  function watch() {
+    unwatch();
+    if (watchPath) {
+      onMessage(`Watching ${watchPath} for changes`);
+      let options = {
+        recursive: watchRecursive,
+        delayMs: parseInt(watchDebounceDelay),
+      };
+      if (options.delayMs === 0) {
+        fs.watchImmediate(watchPath, onMessage, options)
+          .then((fn) => {
+            unwatchFn = fn;
+            unwatchPath = watchPath;
+          })
+          .catch(onMessage);
+      } else {
+        fs.watch(watchPath, onMessage, options)
+          .then((fn) => {
+            unwatchFn = fn;
+            unwatchPath = watchPath;
+          })
+          .catch(onMessage);
+      }
+    }
+  }
+
+  function unwatch() {
+    if (unwatchFn) {
+      onMessage(`Stopped watching ${unwatchPath} for changes`);
+      unwatchFn();
+    }
+    unwatchFn = undefined;
+    unwatchPath = undefined;
+  }
 </script>
 
 <div class="flex flex-col">
@@ -175,6 +215,33 @@
       <button class="btn" on:click={stat}>Stat</button>
     </div>
   {/if}
+  
+  <h3>Watch</h3>
+
+  <input
+    class="input grow"
+    placeholder="Type the path to watch..."
+    bind:value={watchPath}
+  />
+  <br />
+  <div>
+    <label for="watch-debounce-delay">Debounce delay in milliseconds (`0` disables the debouncer)</label>
+    <input
+      class="input"
+      id="watch-debounce-delay"
+      bind:value={watchDebounceDelay}
+    />
+  </div>
+  <br />
+  <div>
+    <input type="checkbox" id="watch-recursive" bind:checked={watchRecursive} />
+    <label for="watch-recursive">Recursive</label>
+  </div>
+  <br />
+  <div>
+    <button class="btn" on:click={watch}>Watch</button>
+    <button class="btn" on:click={unwatch}>Unwatch</button>
+  </div>
 </div>
 
 <br />