search

kirillplatonov / hotwire-livereload

Live reload gem for Hotwire Rails apps.
MIT License
483 stars 28 forks source link

3 reload modes: hard, soft, css-only. Reload on error pages. #34

Open elik-ru opened 1 year ago

elik-ru commented 1 year ago

This PR introduce 2 major changes:

  1. 3 different reload modes (css, soft, hard)
  2. Auto-reload on error pages.

Reload modes: Depending on what changed we can do different reload types.

  1. When css files are changed we can inject new CSS into current page. This is especially cool when you do some actions on page (open dropdown, collapses, some ajax request etc), which will be reset after a page reload. This requires external css build tools like dart-sass, which will automatically rebuild css files.
  2. When non-js files are changed we can do fast reload using Turbo.visit()
  3. When js files are changed we must do a full page reload. If we do Turbolinks.visit(), it will detect that js files are changed and do a full reload anyway, but this will result in double page load.

Auto-reload on error pages: I have added a middleware which injects livereload code into error pages.

To be honest, i did this couple of month ago and did not have time to submit a PR, and now looking at the code it looks like an alien wrote it. But if you think i need to improve something in this PR, i'll try to do this.

kirillplatonov commented 1 year ago

@elik-ru thanks for the PR 🙌 I will review and test on the weekend

LEstradioto commented 1 year ago

Nice PR. Tested at my end, the only thing that didnt work out was the default :css mode, my setup is jsbundling + cssbundling + talwindcss.

It fails silently here because my stylesheet tag do not contain a stylesheet data attribute, as your code is expecting. My link is:

<link rel="stylesheet" href="/assets/application-{{big-hash-here}}.css" data-turbo-track="reload">

I could fix it adding the data attribute manually, like this:

# application.html.erb
<%= stylesheet_link_tag "application", "data-turbo-track": "reload", "data-stylesheet": "application.css" %>

Is this expected?

elik-ru commented 1 year ago

@LEstradioto Thanks for your feedback! Yes, this is kinda expected, because actual filename differs form digested url, and digested url changes when file changes, there is no easy way to match actual filename and corresponding Githubissues.

  • Githubissues is a development platform for aggregating issues.