hotwire-livereload 1.3.2 → 1.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 44376128ac37b1619d34c7ee8dee64eb1901804cc170dd0bd5c2114973e98225
-  data.tar.gz: 9053700099d671c33b11fa0483100ec5f921016a7e2f1315113072c5c1bba587
+  metadata.gz: 04b3a325fa089d62215f26cf3fbac951e3ac91d0b03af7aed02fa2a49075969e
+  data.tar.gz: 24e7339a71da29f35b1930f95f18f0c035aa0221b411fe4a58f27d10384dbb76
 SHA512:
-  metadata.gz: 5677a61e971bfa24bb8c8ea76970420e370e03003f07970632bf07b22c187cc6dfc3289963509c8597f7b12c08e112d8db56f308fa85008023c3160a9f700846
-  data.tar.gz: 4e91a4a01f3e5b8d54e18b2344351c17bef3e1ac09568adc3b1802dc6a8f95eaa4abc6c972e93c8edd7eafa61a944e2b390e339697b1bc802cc7a8e85176b6ff
+  metadata.gz: 01e7cc071040c5fbafa3fac11adcdfff171695a82c6d6d90db06c8d2010032beb4172ae667b029512737c0afb79c005bcd2e54084661ff662bbae28157087a68
+  data.tar.gz: 41e86aa960b2796d65aa26e1d8034a819e5ecdfea578b5995e275f713d666f9b4ffd6a9c6337a6bf17834394ac194382aa2ddf9ff74843fb0f7644ed20bfd2fa

data/README.md

@@ -20,7 +20,7 @@ Run installer:
 rails livereload:install
 ```
 
-Folders listened by default:
+Folders watched by default:
 - `app/views`
 - `app/helpers`
 - `app/javascript`
@@ -32,6 +32,12 @@ Folders listened by default:
 
 The gem detects if you use [`jsbundling-rails`](https://github.com/rails/jsbundling-rails) or [`cssbundling-rails`](https://github.com/rails/cssbundling-rails) and watches for changes in their output folder `app/assets/builds` automatically.
 
+In your layout, make sure you don't `turbo-track` your JS/CSS in development:
+```diff
++ <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+- <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+```
+
 ## Configuration
 
 ### Listen paths
@@ -46,6 +52,16 @@ Rails.application.configure do
 end
 ```
 
+You can skip one or few default listen paths:
+```ruby
+# config/environments/development.rb
+
+Rails.application.configure do
+  # ...
+  config.hotwire_livereload.skip_listen_paths << Rails.root.join("app/views")
+end
+```
+
 You can disable default listen paths and fully override them:
 ```ruby
 # config/environments/development.rb
@@ -112,6 +128,21 @@ Rails.application.configure do
 end
 ```
 
+### Listen debounce delay
+
+If your app uses TailwindCSS or similar that compiles your CSS from looking at your templates, you can end up in a situation, where updating a template triggers twice for changes; once for the template and once for the rebuilt CSS. This can lead to unreliable reloads, ie. the reload happening before the CSS is built.
+
+To avoid this, you can add a debounce delay to the file watcher:
+
+```ruby
+# config/environments/development.rb
+
+Rails.application.configure do
+  # ...
+  config.hotwire_livereload.debounce_delay_ms = 300 # in milliseconds
+end
+```
+
 ## Disable livereload
 
 To temporarily disable livereload use:

data/app/assets/javascripts/hotwire-livereload.js

@@ -396,19 +396,19 @@
             this.subscriptions = subscriptions;
             this.pendingSubscriptions = [];
           }
-          SubscriptionGuarantor2.prototype.guarantee = function guarantee(subscription) {
-            if (this.pendingSubscriptions.indexOf(subscription) == -1) {
-              logger.log("SubscriptionGuarantor guaranteeing " + subscription.identifier);
-              this.pendingSubscriptions.push(subscription);
+          SubscriptionGuarantor2.prototype.guarantee = function guarantee(subscription2) {
+            if (this.pendingSubscriptions.indexOf(subscription2) == -1) {
+              logger.log("SubscriptionGuarantor guaranteeing " + subscription2.identifier);
+              this.pendingSubscriptions.push(subscription2);
             } else {
-              logger.log("SubscriptionGuarantor already guaranteeing " + subscription.identifier);
+              logger.log("SubscriptionGuarantor already guaranteeing " + subscription2.identifier);
             }
             this.startGuaranteeing();
           };
-          SubscriptionGuarantor2.prototype.forget = function forget(subscription) {
-            logger.log("SubscriptionGuarantor forgetting " + subscription.identifier);
+          SubscriptionGuarantor2.prototype.forget = function forget(subscription2) {
+            logger.log("SubscriptionGuarantor forgetting " + subscription2.identifier);
             this.pendingSubscriptions = this.pendingSubscriptions.filter(function(s) {
-              return s !== subscription;
+              return s !== subscription2;
             });
           };
           SubscriptionGuarantor2.prototype.startGuaranteeing = function startGuaranteeing() {
@@ -422,9 +422,9 @@
             var _this = this;
             this.retryTimeout = setTimeout(function() {
               if (_this.subscriptions && typeof _this.subscriptions.subscribe === "function") {
-                _this.pendingSubscriptions.map(function(subscription) {
-                  logger.log("SubscriptionGuarantor resubscribing " + subscription.identifier);
-                  _this.subscriptions.subscribe(subscription);
+                _this.pendingSubscriptions.map(function(subscription2) {
+                  logger.log("SubscriptionGuarantor resubscribing " + subscription2.identifier);
+                  _this.subscriptions.subscribe(subscription2);
                 });
               }
             }, 500);
@@ -443,37 +443,37 @@
             var params = (typeof channel === "undefined" ? "undefined" : _typeof(channel)) === "object" ? channel : {
               channel
             };
-            var subscription = new Subscription(this.consumer, params, mixin);
-            return this.add(subscription);
+            var subscription2 = new Subscription(this.consumer, params, mixin);
+            return this.add(subscription2);
           };
-          Subscriptions2.prototype.add = function add(subscription) {
-            this.subscriptions.push(subscription);
+          Subscriptions2.prototype.add = function add(subscription2) {
+            this.subscriptions.push(subscription2);
             this.consumer.ensureActiveConnection();
-            this.notify(subscription, "initialized");
-            this.subscribe(subscription);
-            return subscription;
-          };
-          Subscriptions2.prototype.remove = function remove2(subscription) {
-            this.forget(subscription);
-            if (!this.findAll(subscription.identifier).length) {
-              this.sendCommand(subscription, "unsubscribe");
+            this.notify(subscription2, "initialized");
+            this.subscribe(subscription2);
+            return subscription2;
+          };
+          Subscriptions2.prototype.remove = function remove2(subscription2) {
+            this.forget(subscription2);
+            if (!this.findAll(subscription2.identifier).length) {
+              this.sendCommand(subscription2, "unsubscribe");
             }
-            return subscription;
+            return subscription2;
           };
           Subscriptions2.prototype.reject = function reject(identifier) {
             var _this = this;
-            return this.findAll(identifier).map(function(subscription) {
-              _this.forget(subscription);
-              _this.notify(subscription, "rejected");
-              return subscription;
+            return this.findAll(identifier).map(function(subscription2) {
+              _this.forget(subscription2);
+              _this.notify(subscription2, "rejected");
+              return subscription2;
             });
           };
-          Subscriptions2.prototype.forget = function forget(subscription) {
-            this.guarantor.forget(subscription);
+          Subscriptions2.prototype.forget = function forget(subscription2) {
+            this.guarantor.forget(subscription2);
             this.subscriptions = this.subscriptions.filter(function(s) {
-              return s !== subscription;
+              return s !== subscription2;
             });
-            return subscription;
+            return subscription2;
           };
           Subscriptions2.prototype.findAll = function findAll(identifier) {
             return this.subscriptions.filter(function(s) {
@@ -482,8 +482,8 @@
           };
           Subscriptions2.prototype.reload = function reload() {
             var _this2 = this;
-            return this.subscriptions.map(function(subscription) {
-              return _this2.subscribe(subscription);
+            return this.subscriptions.map(function(subscription2) {
+              return _this2.subscribe(subscription2);
             });
           };
           Subscriptions2.prototype.notifyAll = function notifyAll(callbackName) {
@@ -491,38 +491,38 @@
             for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
               args[_key - 1] = arguments[_key];
             }
-            return this.subscriptions.map(function(subscription) {
-              return _this3.notify.apply(_this3, [subscription, callbackName].concat(args));
+            return this.subscriptions.map(function(subscription2) {
+              return _this3.notify.apply(_this3, [subscription2, callbackName].concat(args));
             });
           };
-          Subscriptions2.prototype.notify = function notify(subscription, callbackName) {
+          Subscriptions2.prototype.notify = function notify(subscription2, callbackName) {
             for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
               args[_key2 - 2] = arguments[_key2];
             }
             var subscriptions = void 0;
-            if (typeof subscription === "string") {
-              subscriptions = this.findAll(subscription);
+            if (typeof subscription2 === "string") {
+              subscriptions = this.findAll(subscription2);
             } else {
-              subscriptions = [subscription];
+              subscriptions = [subscription2];
             }
-            return subscriptions.map(function(subscription2) {
-              return typeof subscription2[callbackName] === "function" ? subscription2[callbackName].apply(subscription2, args) : void 0;
+            return subscriptions.map(function(subscription3) {
+              return typeof subscription3[callbackName] === "function" ? subscription3[callbackName].apply(subscription3, args) : void 0;
             });
           };
-          Subscriptions2.prototype.subscribe = function subscribe(subscription) {
-            if (this.sendCommand(subscription, "subscribe")) {
-              this.guarantor.guarantee(subscription);
+          Subscriptions2.prototype.subscribe = function subscribe(subscription2) {
+            if (this.sendCommand(subscription2, "subscribe")) {
+              this.guarantor.guarantee(subscription2);
             }
           };
           Subscriptions2.prototype.confirmSubscription = function confirmSubscription(identifier) {
             var _this4 = this;
             logger.log("Subscription confirmed " + identifier);
-            this.findAll(identifier).map(function(subscription) {
-              return _this4.guarantor.forget(subscription);
+            this.findAll(identifier).map(function(subscription2) {
+              return _this4.guarantor.forget(subscription2);
             });
           };
-          Subscriptions2.prototype.sendCommand = function sendCommand(subscription, command) {
-            var identifier = subscription.identifier;
+          Subscriptions2.prototype.sendCommand = function sendCommand(subscription2, command) {
+            var identifier = subscription2.identifier;
             return this.consumer.send({
               command,
               identifier
@@ -704,7 +704,8 @@
 
   // app/javascript/hotwire-livereload.js
   var consumer = (0, import_actioncable.createConsumer)();
-  consumer.subscriptions.create("Hotwire::Livereload::ReloadChannel", {
+  var subscription = null;
+  var createSubscription = () => consumer.subscriptions.create("Hotwire::Livereload::ReloadChannel", {
     received: hotwire_livereload_received_default,
     connected() {
       console.log("[Hotwire::Livereload] Websocket connected");
@@ -713,8 +714,14 @@
       console.log("[Hotwire::Livereload] Websocket disconnected");
     }
   });
+  subscription = createSubscription();
   document.addEventListener("turbo:load", () => {
     hotwire_livereload_scroll_position_default.restore();
     hotwire_livereload_scroll_position_default.remove();
+    if (subscription) {
+      consumer.subscriptions.remove(subscription);
+      subscription = null;
+    }
+    subscription = createSubscription();
   });
 })();

data/app/javascript/hotwire-livereload.js

@@ -3,7 +3,9 @@ import received from "./lib/hotwire-livereload-received"
 import scrollPosition from "./lib/hotwire-livereload-scroll-position"
 
 const consumer = createConsumer()
-consumer.subscriptions.create("Hotwire::Livereload::ReloadChannel", {
+let subscription = null
+
+const createSubscription = () => consumer.subscriptions.create("Hotwire::Livereload::ReloadChannel", {
   received,
 
   connected() {
@@ -15,8 +17,16 @@ consumer.subscriptions.create("Hotwire::Livereload::ReloadChannel", {
   },
 })
 
+subscription = createSubscription()
+
 document.addEventListener("turbo:load", () => {
   scrollPosition.restore()
   scrollPosition.remove()
+
+  if (subscription) {
+    consumer.subscriptions.remove(subscription)
+    subscription = null
+  }
+  subscription = createSubscription()
 })
 

data/lib/hotwire/livereload/engine.rb

@@ -8,6 +8,7 @@ module Hotwire
       isolate_namespace Hotwire::Livereload
       config.hotwire_livereload = ActiveSupport::OrderedOptions.new
       config.hotwire_livereload.listen_paths ||= []
+      config.hotwire_livereload.skip_listen_paths ||= []
       config.hotwire_livereload.force_reload_paths ||= []
       config.hotwire_livereload.reload_method = :action_cable
       config.hotwire_livereload.disable_default_listeners = false
@@ -16,6 +17,7 @@ module Hotwire
         #{root}/app/helpers
       ]
       config.hotwire_livereload.listen_options ||= {}
+      config.hotwire_livereload.debounce_delay_ms = 0
 
       initializer "hotwire_livereload.assets" do
         if Rails.application.config.respond_to?(:assets)
@@ -31,6 +33,7 @@ module Hotwire
 
       initializer "hotwire_livereload.set_configs" do |app|
         options = app.config.hotwire_livereload
+        skip_listen_paths = options.skip_listen_paths.map(&:to_s).uniq
 
         unless options.disable_default_listeners
           default_listen_paths = %w[
@@ -55,11 +58,20 @@ module Hotwire
             .uniq
             .map { |p| Rails.root.join(p) }
             .select { |p| Dir.exist?(p) }
+            .reject { |p| skip_listen_paths.include?(p.to_s) }
         end
       end
 
       config.after_initialize do |app|
         if Rails.env.development? && Hotwire::Livereload.server_process?
+          @trigger_reload = (Hotwire::Livereload.debounce(config.hotwire_livereload.debounce_delay_ms) do |options|
+            if config.hotwire_livereload.reload_method == :turbo_stream
+              Hotwire::Livereload.turbo_stream(options)
+            else
+              Hotwire::Livereload.action_cable(options)
+            end
+          end)
+
           options = app.config.hotwire_livereload
           listen_paths = options.listen_paths.map(&:to_s).uniq
           force_reload_paths = options.force_reload_paths.map(&:to_s).uniq.join("|")
@@ -74,11 +86,7 @@ module Hotwire
               end
 
               options = {changed: changed, force_reload: force_reload}
-              if config.hotwire_livereload.reload_method == :turbo_stream
-                Hotwire::Livereload.turbo_stream(options)
-              else
-                Hotwire::Livereload.action_cable(options)
-              end
+              @trigger_reload.call(options)
             end
           end
           @listener.start
@@ -111,5 +119,27 @@ module Hotwire
 
       puma_process || rails_server
     end
+
+    def self.debounce(wait_ms, &block)
+      if wait_ms.zero?
+        return ->(*args) { yield(*args) }
+      end
+
+      mutex = Mutex.new
+      timer_thread = nil
+      seconds = wait_ms.to_f / 1000.0
+
+      lambda do |*args|
+        mutex.synchronize do
+          # Cancel previous timer
+          timer_thread&.kill
+
+          timer_thread = Thread.new do
+            sleep(seconds)
+            yield(*args)
+          end
+        end
+      end
+    end
   end
 end

data/lib/hotwire/livereload/version.rb

@@ -1,5 +1,5 @@
 module Hotwire
   module Livereload
-    VERSION = "1.3.2"
+    VERSION = "1.4.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire-livereload
 version: !ruby/object:Gem::Version
-  version: 1.3.2
+  version: 1.4.1
 platform: ruby
 authors:
 - Kirill Platonov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-28 00:00:00.000000000 Z
+date: 2024-09-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties