Fewer Popups when reloading a page on change

yandeu / five-server

⚡ Development Server with Live Reload Capability. (Maintained Fork of Live Server)

https://www.npmjs.com/package/five-server

Other

165 stars 14 forks source link

Fewer Popups when reloading a page on change #16

Closed joyheron closed 3 years ago

joyheron commented 3 years ago

Describe the bug I replaced live-server in my project with five-server because of the vulnerabilities in that project and how infrequently it is updated.

As far as I can tell, five-server seems to work great. I am using it to reload my HTML project when the files or my assets change. That works well, but I find it annoying that the red popup saying 'lost connection to dev server' appears every time that I make a change. For my specific use case, it is not really an error that the socket connection is closing, because the whole HTML page is reloaded.

This appears to come from here: https://github.com/yandeu/five-server/blob/main/client/injected.ts#L318

My suggestion would be to remove the message, or at least only show it when a few attempts at reconnecting has already been tried. Alternatively, if we could set a preference to deactivate the popup message, that would also be ok.

yandeu commented 3 years ago

Glad you like five-server!

Strange, in my workflow I never see the red error popup.

Possible solutions:

If the page is reloading anyways, could we just add a setTimeout() around the popup('lost connection to dev server', 'error')?
Can't you just target the popup with CSS and make it remove? Feel free to add these types as CSS classes to the popup wrapper.

or at least only show it when a few attempts at reconnecting has already been tried

If you think this is the best solution, feel free to make the changes.

joyheron commented 3 years ago

Thank you for the quick response! My current workaround is to use CSS to deactivate the popup for my application, but it doesn't really feel like a clean fix to me and it's a bit fragile, because if you end up changing the structure of your popup in the future (it would be your right to do this!), then it would start appearing for me again.

I think setTimeout might be a good solution to the problem, but I'd have to test it out.

joyheron commented 3 years ago

I tested the setTimeout solution by modifying my five-server/client/injected.js locally.

If I replace this line https://github.com/yandeu/five-server/blob/main/client/injected.ts#L318 with the following, it seems to work for me (e.g. the message no longer shows up on a page load):

        setTimeout(() => popup('lost connection to dev server', 'error'), 3000)