hotwired · jorgemanrubia · Dec 25, 2024 · Dec 25, 2024 · Dec 25, 2024 · Dec 25, 2024
diff --git a/README.md b/README.md
@@ -39,14 +39,14 @@ You can set configuration options on your `development.rb`. For example:
 config.hotwire.spark.html_paths += %w[ lib ]
 ```
 
-| Name                 | Description                                                                                                                                                     |
-|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `html_paths`         | Paths where file changes trigger a content refresh. By default: `app/controllers`, `app/helpers`, `app/models`, `app/views`.                                    |
-| `css_paths`          | Paths where file changes trigger a CSS refresh. By default: `app/assets/stylesheets` or `app/assets/builds` if exists.                                          |
-| `stimulus_paths`     | Paths where file changes trigger a Stimulus controller refresh. By default: `app/javascript/controllers`.                                                       |
-| `enabled`            | Enable or disable live reloading. By default, it's only enabled in `development`.                                                                               |
-| `logging`            | Show logs in the browser console when reloading happens. It's false by default.                                                                                 |
-| `html_reload_method` | Reload html by morphing (`"morph"`) or with a Turbo page reload (`"replace"`). By default `"morph"`. Use `"replace"` if your app is incompatible with morphing. |
+| Name                 | Description                                                                                                                                                                                                                                            |
+|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `html_paths`         | Paths where file changes trigger a content refresh. By default: `app/controllers`, `app/helpers`, `app/models`, `app/views`.                                                                                                                           |
+| `css_paths`          | Paths where file changes trigger a CSS refresh. By default: `app/assets/stylesheets` or `app/assets/builds` if exists.                                                                                                                                 |
+| `stimulus_paths`     | Paths where file changes trigger a Stimulus controller refresh. By default: `app/javascript/controllers`.                                                                                                                                              |
+| `enabled`            | Enable or disable live reloading. By default, it's only enabled in `development`.                                                                                                                                                                      |
+| `logging`            | Show logs in the browser console when reloading happens. It's false by default.                                                                                                                                                                        |
+| `html_reload_method` | How to perform reloads when HTML contents changes: `:morph` or `:replace`. By default, it is `:morph` and it will morph the `<body>` of the page. Set to `:replace` to reload the page with a regular Turbo navigation that will replace the `<body>`. |
 
 ## License
 

diff --git a/app/assets/javascripts/hotwire_spark.js b/app/assets/javascripts/hotwire_spark.js
@@ -1475,10 +1475,10 @@ var HotwireSpark = (function () {
       return new MorphHtmlReloader().reload();
     }
     async reload() {
-      const reloadedDocument = await this.#reloadWithMorph();
+      const reloadedDocument = await this.#reloadHtml();
       await this.#reloadStimulus(reloadedDocument);
     }
-    async #reloadWithMorph() {
+    async #reloadHtml() {
       log("Reload html with morph...");
       const reloadedDocument = await reloadHtmlDocument();
       this.#updateBody(reloadedDocument.body);
@@ -1553,17 +1553,12 @@ var HotwireSpark = (function () {
       return new ReplaceHtmlReloader().reload();
     }
     async reload() {
-      await this.#reloadWithTurbo();
+      await this.#reloadHtml();
     }
-    #reloadWithTurbo() {
+    async #reloadHtml() {
       log("Reload html with Turbo...");
       this.#maintainScrollPosition();
-      return new Promise(resolve => {
-        document.addEventListener("turbo:load", () => resolve(document), {
-          once: true
-        });
-        window.Turbo.visit(window.location);
-      });
+      await this.#visitCurrentPage();
     }
     #maintainScrollPosition() {
       document.addEventListener("turbo:render", () => {
@@ -1572,6 +1567,14 @@ var HotwireSpark = (function () {
         once: true
       });
     }
+    #visitCurrentPage() {
+      return new Promise(resolve => {
+        document.addEventListener("turbo:load", () => resolve(document), {
+          once: true
+        });
+        window.Turbo.visit(window.location);
+      });
+    }
   }
 
   consumer.subscriptions.create({
@@ -1605,8 +1608,8 @@ var HotwireSpark = (function () {
       }
     },
     reloadHtml() {
-      const HtmlReloader = HotwireSpark.config.htmlReloadMethod == "morph" ? MorphHtmlReloader : ReplaceHtmlReloader;
-      return HtmlReloader.reload();
+      const htmlReloader = HotwireSpark.config.htmlReloadMethod == "morph" ? MorphHtmlReloader : ReplaceHtmlReloader;
+      return htmlReloader.reload();
     },
     reloadCss(fileName) {
       return CssReloader.reload(new RegExp(fileName));
@@ -1622,9 +1625,15 @@ var HotwireSpark = (function () {
       htmlReloadMethod: "morph"
     }
   };
+  const configProperties = {
+    loggingEnabled: "logging",
+    htmlReloadMethod: "html-reload-method"
+  };
   document.addEventListener("DOMContentLoaded", function () {
-    HotwireSpark$1.config.loggingEnabled = getConfigurationProperty("logging");
-    HotwireSpark$1.config.htmlReloadMethod = getConfigurationProperty("html-reload-method");
+    Object.entries(configProperties).forEach(_ref => {
+      let [key, property] = _ref;
+      HotwireSpark$1.config[key] = getConfigurationProperty(property);
+    });
   });
 
   return HotwireSpark$1;

diff --git a/app/assets/javascripts/hotwire_spark.min.js b/app/assets/javascripts/hotwire_spark.min.js
diff --git a/app/assets/javascripts/hotwire_spark.min.js.map b/app/assets/javascripts/hotwire_spark.min.js.map
diff --git a/app/javascript/hotwire/spark/channels/monitoring_channel.js b/app/javascript/hotwire/spark/channels/monitoring_channel.js
@@ -34,10 +34,8 @@ consumer.subscriptions.create({ channel: "Hotwire::Spark::Channel" }, {
   },
 
   reloadHtml() {
-    const HtmlReloader = HotwireSpark.config.htmlReloadMethod == "morph"
-      ? MorphHtmlReloader
-      : ReplaceHtmlReloader
-    return HtmlReloader.reload()
+    const htmlReloader = HotwireSpark.config.htmlReloadMethod == "morph" ? MorphHtmlReloader : ReplaceHtmlReloader
+    return htmlReloader.reload()
   },
 
   reloadCss(fileName) {

diff --git a/app/javascript/hotwire/spark/index.js b/app/javascript/hotwire/spark/index.js
@@ -8,9 +8,15 @@ const HotwireSpark = {
   }
 }
 
+const configProperties = {
+  loggingEnabled: "logging",
+  htmlReloadMethod: "html-reload-method",
+}
+
 document.addEventListener("DOMContentLoaded", function() {
-  HotwireSpark.config.loggingEnabled = getConfigurationProperty("logging");
-  HotwireSpark.config.htmlReloadMethod = getConfigurationProperty("html-reload-method");
+  Object.entries(configProperties).forEach(([key, property]) => {
+    HotwireSpark.config[key] = getConfigurationProperty(property)
+  })
 })
 
 export default HotwireSpark
diff --git a/app/javascript/hotwire/spark/reloaders/morph_html_reloader.js b/app/javascript/hotwire/spark/reloaders/morph_html_reloader.js
@@ -9,11 +9,11 @@ export class MorphHtmlReloader {
   }
 
   async reload() {
-    const reloadedDocument = await this.#reloadWithMorph()
+    const reloadedDocument = await this.#reloadHtml()
     await this.#reloadStimulus(reloadedDocument)
   }
 
-  async #reloadWithMorph() {
+  async #reloadHtml() {
     log("Reload html with morph...")
 
     const reloadedDocument = await reloadHtmlDocument()

diff --git a/app/javascript/hotwire/spark/reloaders/replace_html_reloader.js b/app/javascript/hotwire/spark/reloaders/replace_html_reloader.js
@@ -6,23 +6,26 @@ export class ReplaceHtmlReloader {
   }
 
   async reload() {
-    await this.#reloadWithTurbo()
+    await this.#reloadHtml()
   }
 
-  #reloadWithTurbo() {
+  async #reloadHtml() {
     log("Reload html with Turbo...")
 
     this.#maintainScrollPosition()
-
-    return new Promise(resolve => {
-      document.addEventListener("turbo:load", () => resolve(document), { once: true })
-      window.Turbo.visit(window.location)
-    })
+    await this.#visitCurrentPage()
   }
 
   #maintainScrollPosition() {
     document.addEventListener("turbo:render", () => {
       Turbo.navigator.currentVisit.scrolled = true
     }, { once: true })
   }
+
+  #visitCurrentPage() {
+    return new Promise(resolve => {
+      document.addEventListener("turbo:load", () => resolve(document), { once: true })
+      window.Turbo.visit(window.location)
+    })
+  }
 }
diff --git a/test/dummy/app/views/layouts/application.html.erb b/test/dummy/app/views/layouts/application.html.erb
@@ -22,12 +22,8 @@
   <%= javascript_importmap_tags %>
 
   <script>
-    let firstLoad = true
     document.addEventListener("turbo:load", (event) => {
-      if (!firstLoad) {
-        document.body.setAttribute("data-turbo-navigated", "")
-      }
-      firstLoad = false
+      document.body.setAttribute("data-turbo-navigated", "")
     })
   </script>
 </head>

diff --git a/test/dummy/config/environments/test.rb b/test/dummy/config/environments/test.rb
@@ -52,7 +52,5 @@
 
   # Raise error when a before_action's only/except options reference missing actions.
   config.action_controller.raise_on_missing_callback_actions = true
-
-  config.middleware.use Hotwire::Spark::Middleware
   config.hotwire.spark.enabled = true
 end
diff --git a/test/morph_reload_test.rb → test/morph_html_reload_test.rb b/test/morph_reload_test.rb → test/morph_html_reload_test.rb
@@ -1,8 +1,8 @@
 require "application_system_test_case"
 
-class MorphReloadTest < ApplicationSystemTestCase
+class MorphHtmlReloadTest < ApplicationSystemTestCase
   setup do
-    Hotwire::Spark.html_reload_method = "morph"
+    Hotwire::Spark.html_reload_method = :morph
   end
 
   test "reload HTML changes" do

diff --git a/test/replace_reload_test.rb → test/replace_html_reload_test.rb b/test/replace_reload_test.rb → test/replace_html_reload_test.rb
@@ -1,8 +1,8 @@
 require "application_system_test_case"
 
-class ReplaceReloadTest < ApplicationSystemTestCase
+class ReplaceHtmlReloadTest < ApplicationSystemTestCase
   setup do
-    Hotwire::Spark.html_reload_method = "replace"
+    Hotwire::Spark.html_reload_method = :replace
   end
 
   test "reload HTML changes" do