Introduce CLI option "debounce"

[mojoaxel]

If reload is used with the --watch-dir option the browser gets reload instantly after a file-change occurs. This file-change might be triggered e.g. by a build tool, that empties the watched folder to refill it moments later with a new version of the app or web page. In this case the browser may reload the web page in an unready state which can cause errors in the browser.

To solve this problem I propose a new optional parameter --debounce wait which will postpone the reload until after wait milliseconds have elapsed since the last time a file-change occurred. This value could be st internally to 0 which would trigger a reload instantly on every change.

Opinions on this?

[alallier]

The idea sounds good to me, I don't like the name debounce though. I think something as simple as wait would be enough

[cekvenich]

Wait is not enough. Lets say you have 30 changes every 50ms and you wait 500ms. So 3 builds?
vs debounce is well understood and documented.

[parruc]

Any chance this can be merged? I also am in this situation and it is really annoying to see the browser reload 10 times (one per html template compiled)

[alallier]

This is an issue, PRs welcome

[parruc]

Ahh sorry I thought the @mojoaxel solution (mojoaxel@e7b2f80) was complete and only neede to be merged

[parruc]

Anyway as future reference to anyone having the same issue, until this issue is solved, a workaround could be to only watch a particular file and touch it every time the build process is complete.

An example of my package.json:

"scripts": {
    "dev": "npm-run-all --parallel reload-browser watch-css watch-html",
    "watch-html": "nodemon --watch templates/ --ignore templates/dist/ --ext html --exec \"npm run compile-html && touch reload/reload.now\"",
    "watch-css": "nodemon --watch styles/ --ext scss --exec \"npm run css-all && touch reload/reload.now\"",  
[...]
    "reload-browser": "reload -b --port 3080 --start-page templates/dist/index.html --watch-dir reload --exts now",
    "compile-html": "node templates/compile.js"
  }

So basically the the watch-html and watch-css watch for changes on the sources, changes them all and at the end only reload once touching the reload/reload.now file that is the file I'm watching at in reload-browser.

Hope this helps