Merge pull request #52 from codergeek121/image-reloader

Reload image file changes
hotwired · Dec 26, 2024 · d9ea212 · d9ea212
2 parents 74c3329 + 7c1953e
commit d9ea212
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -62,14 +62,14 @@ config.hotwire.spark.html_paths += %w[ lib ]
 
 ### Monitored paths
 
-| Name                  | Description                                                                                                                  |
-|-----------------------|------------------------------------------------------------------------------------------------------------------------------|
-| `html_paths`          | Paths where file changes trigger a content refresh. By default: `app/controllers`, `app/helpers`, `app/models`, `app/views`. |
-| `html_extensions`     | The extensions to monitor for HTML content changes. By default: `rb`, `erb`.                                                 |                                                                                                                                                                                                                                                   |
-| `css_paths`           | Paths where file changes trigger a CSS refresh. By default: `app/assets/stylesheets` or `app/assets/builds` if exists.       |
-| `css_extensions`      | The extensions to monitor for CSS changes. By default: `css`.                                                                |                                                                                                                                                                                                                                                   |
-| `stimulus_paths`      | Paths where file changes trigger a Stimulus controller refresh. By default: `app/javascript/controllers`.                    |
-| `stimulus_extensions` | The extensions to monitor for Stimulus changes. By default: `js`.                                                            |                                                                                                                                                                                                                                                   |
+| Name                  | Description                                                                                                                                       |
+|-----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
+| `html_paths`          | Paths where file changes trigger a content refresh. By default: `app/controllers`, `app/helpers`, `app/assets/images`, `app/models`, `app/views`. |
+| `html_extensions`     | The extensions to monitor for HTML content changes. By default: `rb`, `erb`, `png`, `jpg`, `jpeg`, `webp`, `svg`.                                 |
+| `css_paths`           | Paths where file changes trigger a CSS refresh. By default: `app/assets/stylesheets` or `app/assets/builds` if exists.                            |
+| `css_extensions`      | The extensions to monitor for CSS changes. By default: `css`.                                                                                     |
+| `stimulus_paths`      | Paths where file changes trigger a Stimulus controller refresh. By default: `app/javascript/controllers`.                                         |
+| `stimulus_extensions` | The extensions to monitor for Stimulus changes. By default: `js`.                                                                                 |
 
 ## License
 

diff --git a/lib/hotwire/spark/default_options.rb b/lib/hotwire/spark/default_options.rb
@@ -15,8 +15,8 @@ def base_options
         enabled: Rails.env.development?,
         css_paths: File.directory?("app/assets/builds") ? %w[ app/assets/builds ] : %w[ app/assets/stylesheets ],
         css_extensions: %w[ css ],
-        html_paths: %w[ app/controllers app/helpers app/models app/views ],
-        html_extensions: %w[ rb erb ],
+        html_paths: %w[ app/controllers app/helpers app/assets/images app/models app/views ],
+        html_extensions: %w[ rb erb png jpg jpeg webp svg ],
         stimulus_paths: %w[ app/javascript/controllers ],
         stimulus_extensions: %w[ js ],
         html_reload_method: :morph

diff --git a/test/dummy/app/assets/images/green_rectangle.png b/test/dummy/app/assets/images/green_rectangle.png
diff --git a/test/dummy/app/assets/images/red_rectangle.png b/test/dummy/app/assets/images/red_rectangle.png
diff --git a/test/dummy/app/views/home/show.html.erb b/test/dummy/app/views/home/show.html.erb
@@ -2,4 +2,5 @@
   <p>This is pretty cool, isn't it?</p>
   <p>_REPLACE_HTML_</p>
   <p id="replace">_REPLACE_</p>
+  <%= image_tag "green_rectangle.png", id: "image" %>
 </div>
diff --git a/test/helpers/files_helper.rb b/test/helpers/files_helper.rb
@@ -46,6 +46,15 @@ def remove_file(path)
     FileUtils.mv path, original_path
   end
 
+  def replace_file(path, with:)
+    path = expand_path(path)
+    replacement = expand_path(with)
+
+    original_path = remember_original_path_to_restore path
+    FileUtils.cp path, original_path
+    FileUtils.cp replacement, path
+  end
+
   private
     def expand_path(path)
       Rails.application.root.join(path).to_s

diff --git a/test/image_html_reload_test.rb b/test/image_html_reload_test.rb
@@ -0,0 +1,12 @@
+require "application_system_test_case"
+
+class ImageHtmlReloadTest < ApplicationSystemTestCase
+  test "image changes reloads the page" do
+    visit root_path
+
+    old_image_src = find("#image")["src"]
+    replace_file "app/assets/images/green_rectangle.png", with: "app/assets/images/red_rectangle.png"
+
+    assert_select "image[src='#{old_image_src}']", count: 0
+  end
+end