From 7c1953e327d7a0821fb5eb9c83d72f9e7394ce70 Mon Sep 17 00:00:00 2001 From: Niklas Haeusele Date: Thu, 26 Dec 2024 18:30:04 +0100 Subject: [PATCH] Allow image changes to reload the page --- README.md | 16 ++++++++-------- lib/hotwire/spark/default_options.rb | 4 ++-- .../dummy/app/assets/images/green_rectangle.png | Bin 0 -> 316 bytes test/dummy/app/assets/images/red_rectangle.png | Bin 0 -> 316 bytes test/dummy/app/views/home/show.html.erb | 1 + test/helpers/files_helper.rb | 9 +++++++++ test/image_html_reload_test.rb | 12 ++++++++++++ 7 files changed, 32 insertions(+), 10 deletions(-) create mode 100644 test/dummy/app/assets/images/green_rectangle.png create mode 100644 test/dummy/app/assets/images/red_rectangle.png create mode 100644 test/image_html_reload_test.rb diff --git a/README.md b/README.md index 2bb40a9b..543afdcb 100644 --- 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 index 975cd8f7..7701bd09 100644 --- 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 new file mode 100644 index 0000000000000000000000000000000000000000..4ffac17c9af87b428651406cc661985dfd4c3a82 GIT binary patch literal 316 zcmeAS@N?(olHy`uVBq!ia0vp^DL`z*$P6SW{C@KnNGT+H1o<*BRH-pAG_)`<`~nI! zykKA`HDF+PmB7GYHG_dcykO3*KpUV0TYyi9D?~ zIqW5#zOL*qcqGM{q&VbXgaL*4JzX3_G|nd{NU$zW$Y5e%+QYz@J4v<#D5YBB8c~vx zSdwa$T$Bo=7>o>zOmq#6bd5|yjEt=ejI4~zv<(cb3=F2}pYKJ{kei>9nO2Eg!}FqY lL!br?xD6$lxv9k^iMa*1^=wEFdk56R;OXk;vd$@?2>{xvQ2YP@ literal 0 HcmV?d00001 diff --git a/test/dummy/app/assets/images/red_rectangle.png b/test/dummy/app/assets/images/red_rectangle.png new file mode 100644 index 0000000000000000000000000000000000000000..5225d09c161aabd177e2727d2542969b59ba9c85 GIT binary patch literal 316 zcmeAS@N?(olHy`uVBq!ia0vp^DL`z*$P6SW{C@KnNGT+H1o<*BRH-pAG_)`<`~nI! zykKA`HDF+PmB7GYHG_dcykO3*KpUV0TYyi9>wgA@|Ns9x%9;oQMHrL3-CY>}GwI#~ za@b2eeO=jK@JMkpXy??`ivWfAJzX3_G|nd{NU$zW$Y5e%+QYz@J4v<#D5YBB8c~vx zSdwa$T$Bo=7>o>zOmq#6bdAhH3=ORe46ICywSlC8fpLZGCln32`6-!cmAExHsV?;c jYS4h&P?DLOT3nKtTYy`Ss6op_pdJQKS3j3^P6This is pretty cool, isn't it?

_REPLACE_HTML_

_REPLACE_

+ <%= image_tag "green_rectangle.png", id: "image" %> diff --git a/test/helpers/files_helper.rb b/test/helpers/files_helper.rb index 6d618c95..4192189d 100644 --- 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 new file mode 100644 index 00000000..f4ddb628 --- /dev/null +++ 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