Watching the filesystem example: debounce skips events

[c-antin]

The debounce example here is somewhat misleading.
There is a chance that events get skipped, because debounce aborts prior function calls.

A better approach would be to collect the events:

import { debounce } from "https://deno.land/std@0.174.0/async/debounce.ts";

const collector: Deno.FsEvent[] = [];
const collectDebounce = debounce(() => {
  const events = collector.splice(0, Infinity);
  console.log(events);
}, 2000);
const collect = (event: Deno.FsEvent) => {
  collector.push(event);
  collectDebounce();
};

const watcher = Deno.watchFs("./");

for await (const event of watcher) {
  collect(event);
}

This affects the following examples:
https://examples.deno.land/watching-files
https://deno.land/std@0.174.0/async/debounce.ts?s=debounce#example_0

[lino-levan]

Two unrelated notes:

• I wrote this example
• This is probably intended for https://github.com/denoland/denobyexample and not this repo

I agree that the way the example is currently written, one might be misled into missing events. What this example was intended to communicate is that you should not be relying on filesystem events directly to do hot reloading of files. You should instead be using a (debounced) event to do the reload whatever you need to reload. If we were to change this example, I would borderline recommend using Deno's --watch flag (which is what fresh does) as an alternative to trying to hack something together with watchFs

[kt3k]

The events from Deno.watchFs are usually very verbose. I think the existing example is fine because this is what most users of Deno.watchFs need to do.

(For example, single file save generates 3 events with the same payload (at least on my machine). Most users probably would want to ignore first 2 events.)