Add fs watch to demo

tauri-apps · Jan 11, 2024 · 324cbb5 · 324cbb5
1 parent d37c4b8
commit 324cbb5
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
diff --git a/examples/api/src-tauri/Cargo.toml b/examples/api/src-tauri/Cargo.toml
@@ -20,7 +20,7 @@ serde = { workspace = true }
 tiny_http = "0.11"
 log = { workspace = true }
 tauri-plugin-log = { path = "../../../plugins/log", version = "2.0.0-alpha.6" }
-tauri-plugin-fs = { path = "../../../plugins/fs", version = "2.0.0-alpha.7" }
+tauri-plugin-fs = { path = "../../../plugins/fs", version = "2.0.0-alpha.7", features = [ "watch" ] }
 tauri-plugin-clipboard-manager = { path = "../../../plugins/clipboard-manager", version = "2.0.0-alpha.6" }
 tauri-plugin-dialog = { path = "../../../plugins/dialog", version = "2.0.0-alpha.7" }
 tauri-plugin-http = { path = "../../../plugins/http", features = [ "multipart" ], version = "2.0.0-alpha.9" }

diff --git a/examples/api/src/views/FileSystem.svelte b/examples/api/src/views/FileSystem.svelte
@@ -9,6 +9,13 @@
   let img;
   let file;
   let renameTo;
+  let watchPath = "";
+  let watchDebounceDelay = 0;
+  let watchRecursive = false;
+  let watchDebounceFull = false;
+  let watchTrackFileIds = false;
+  let unwatchFn;
+  let unwatchPath = "";
 
   function getDir() {
     const dirSelect = document.getElementById("dir");
@@ -141,6 +148,43 @@
   function setSrc() {
     img.src = convertFileSrc(path);
   }
+
+  function watch() {
+    unwatch();
+    if (watchPath) {
+      onMessage(`Watching ${watchPath} for changes`);
+      let options = {
+        recursive: watchRecursive,
+        delayMs: parseInt(watchDebounceDelay),
+        debounceFull: watchDebounceFull,
+        trackFileIds: watchTrackFileIds,
+      };
+      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 +219,41 @@
       <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>
+  <div>
+    <input type="checkbox" id="watch-debounce-full" bind:checked={watchDebounceFull} />
+    <label for="watch-debounce-full">Debounce full (requires a debounce delay to be set)</label>
+  </div>
+  <div>
+    <input type="checkbox" id="watch-track-file-ids" bind:checked={watchTrackFileIds} />
+    <label for="watch-track-file-ids">Track file IDs (requires debounce full to be set)</label>
+  </div>
+  <br />
+  <div>
+    <button class="btn" on:click={watch}>Watch</button>
+    <button class="btn" on:click={unwatch}>Unwatch</button>
+  </div>
 </div>
 
 <br />