Refresh page when source file changes

[terreng]

Use fs.watchFile to detect changes to served files. Inject JavaScript code into all served HTML pages that hold a socket connection open (Use Socket.IO? HTTP long polling?), gets notified any time the page is updated, and responds by reloading the page. Optional feature.

Suggested by @dougouverson as a comment in #61

[ethanaobrien]

socket.io is going to be the most easy and efficient way to do it

[ethanaobrien]

@terreng Most HTML pages wont be the source of the code. How do we watch every file the browser requests for an update? How can we tell what page made the request?

[terreng]

I was thinking we'd inject a script into every html file, and the script would open a socket to the server with a list of files. The server would then watch those files for as long as the connection stayed open, and send a message if any of those files were updated.

The script could do some basic parsing of the html page to determine the urls of other scripts and stylesheets, but those files could themselves have additional dependencies that wouldn't be detected. I don't think there's any way that the script could get the complete list.

The server could also keep track of all the files that are requested following each html file, but I'm not sure either how we'd differentiate which page made the request.

Browser caching might also mess this all up, so we should keep that in mind too.

Maybe we could ask the user to specify which files should cause a page reload, or perhaps just reload all pages anytime any file in the same directory is updated?

[ethanaobrien]

The script could do some basic parsing of the html page to determine the urls of other scripts and stylesheets, but those files could themselves have additional dependencies that wouldn't be detected

This is probably the most we could do

Browser caching might also mess this all up

Very true. There is an option in devtools to "disable cache" we could note

Maybe we could ask the user to specify which files should cause a page reload

That would probably be a pretty long list

or perhaps just reload all pages anytime any file in the same directory is updated

Most times (at least how I developed) I have my JavaScript files in a separate directory.

Also, one issue I may bring up is how many files can we safely watch at once? Would we need to keep the macOS bookmarks open for this to work on macOS?

[terreng]

Very true. There is an option in devtools to "disable cache" we could note

Actually I think if enabling this new option would force the cache header to be set to 0, to tell the browser not to cache, then location.reload() would probably work fine. I don't know all the rules of browser caching so we'd have to try it out and see.

Most times (at least how I developed) I have my JavaScript files in a separate directory.

I was thinking it would also recursively include sub-directories.

Also, one issue I may bring up is how many files can we safely watch at once? Would we need to keep the macOS bookmarks open for this to work on macOS?

Both great questions. I don't know the answer to either. It would certainly be important to look into it. Let's see if the documentation for fs.watchFile mentions a limit, and see if we can answer that second question too.

[terreng]

We would want to use fs.watch on the entire directory. This relies on the OS instead of constantly checking the file for changes like fs.watchFile does.

We should be able to watch the entire chosen directory with a single listener, and just refresh the page anytime it's triggered.

I'm guessing that on macOS, the bookmark would only need to be triggered when initializing watching the directory. Either that or the one bookmark stays open through the life of the listener. Either way I don't think it'll be a problem.

[ethanaobrien]

Sounds like a solution!