mata 0.9.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e57a04054693fd5c3b092f6c028d8cac79e9c374c043a6c29c34bda658836060
-  data.tar.gz: fb9c2cdb01e636273c4e13a5e55321dd5da252bda4a0cd3ed1942565336c2814
+  metadata.gz: 886a7db4fb956cd1191b502d73b582569e3dc680ca3c375fdf42296fb5d6197b
+  data.tar.gz: d87cd56304b9eb144d3b9a997598f09df16d94292c9724cf3312f0e9b6298411
 SHA512:
-  metadata.gz: d5736a691cd06abf3ec90a561f3ebe5f88c5e88d5445b67ae21a32ff3f39757f49e0a88f3171dbed10afb587018ffc43980a110cf861541a660662d3222a05fe
-  data.tar.gz: b5ab2d3ebb6496ffee7f113d2f143b91170ec9f7baa9f4b1257090fe3bc20f1ed4ef2d9858df6164a35dd3eca3f19d0f69791b563acbe2109d841cd67d923243
+  metadata.gz: 7e82ce5b92c7ae0ee99758373be421ac03abbc0546af2ccab1f51f74584b4d13fbeaa4efbf0c8af1c3efc6e6da9f9703ccf74cae7dc46e3fb3605364c3a0d7ff
+  data.tar.gz: 59b37d520084e2afed7d2237cf6d99d42f5a15bd690958e65f66397237131bdda23cf62e0909b3456ae5a3247a2b37a52fb2ceb2b5470206f2d76a245ebcaefc

data/README.md

@@ -10,6 +10,7 @@ Live Reload with DOM Morphing for Rack applications using Server-Sent Events (SS
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Rails-Designer/mata/HEAD/.github/logo-dark.svg">
     <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Rails-Designer/mata/HEAD/.github/logo-light.svg">
+
     <img alt="Rails Designer" src="https://raw.githubusercontent.com/Rails-Designer/mata/HEAD/.github/logo-light.svg" width="240" style="max-width: 100%;">
   </picture>
 </a>
@@ -36,20 +37,6 @@ config.middleware.insert_before(
 ```
 
 
-### Other rack-based apps
-```ruby
-# config.ru
-require "mata"
-
-use Mata, watch: %w[views assets], skip: %w[views/tmp]
-
-run YourApp
-```
-
-> [!NOTE]
-> Do share your snippets on how to add Mata into your specific Rack-based apps 💙
-
-
 ### Hanami
 ```ruby
 # config.ru
@@ -87,6 +74,31 @@ route do |r|
 end
 ```
 
+### Other rack-based apps
+```ruby
+# config.ru
+require "mata"
+
+use Mata, watch: %w[views assets], skip: %w[views/tmp]
+
+run YourApp
+```
+
+
+### Options
+
+All options are optional.
+
+| Option | Default | Type | Description |
+|---|---|---|---|
+| `watch` | `[]` | Array of String | Directories to watch for changes |
+| `skip` | `[]` | Array of String/Regexp | Paths to ignore |
+| `debounce` | `300` | Integer | Debounce interval in milliseconds before broadcasting changes |
+| `retry` | not set | Integer | SSE retry interval in milliseconds (not set = browser default ~3s, maximum clamped at 30s) |
+| `log_level` | `:verbose` | Symbol | `:verbose` shows all console messages; `:silent` suppresses them in the browser console (`[Mata] Connected with DOM morphing`, etc.) |
+| `idiomorph_options` | `nil` | String | A raw JS object literal passed **verbatim** as the `options` argument to [`Idiomorph.morph`](https://github.com/bigskysoftware/idiomorph#options), fully replacing Mata's built-in defaults. Example: `idiomorph_options: '{ morphStyle: "innerHTML" }'` |
+
+
 ## Used in
 
 This gem powers live reloading in [Perron](https://github.com/rails-designer/perron), a Rails-based static site generator. It can be enabled with `config.live_reload = true` in your Perron initializer.

data/lib/mata/agent.rb

@@ -2,13 +2,21 @@
 
 class Mata
   class Agent
+    def initialize(options = {})
+      @retry = options[:retry]
+      @log_level = options[:log_level]
+    end
+
     def insert(status, headers, body)
       return [status, headers, body] unless html_response?(headers)
 
       content = extract(body)
       return [status, headers, [content]] unless content.include?("</head>")
 
-      script_tag = '<script src="/__mata/client.js"></script>'
+      script_tag = '<script src="/__mata/client.js"'
+      script_tag += %( data-mata-retry="#{@retry}") if @retry
+      script_tag += %( data-mata-log-level="#{@log_level}") if @log_level
+      script_tag += "></script>"
       modified_content = content.sub("</head>", "#{script_tag}\n</head>")
 
       headers["Content-Length"] = modified_content.bytesize.to_s if headers["Content-Length"]
@@ -26,7 +34,7 @@ class Mata
 
     def extract(body)
       if body.respond_to?(:each)
-        body.each.to_a.join
+        [].tap { |parts| body.each { |part| parts << part } }.join
       else
         body.to_s
       end

data/lib/mata/broadcaster.rb

@@ -2,9 +2,26 @@
 
 class Mata
   class Broadcaster
-    def initialize
+    DEFAULT_IDIOMORPH_OPTIONS = <<~JS
+      {
+        ignoreActiveValue: true,
+        callbacks: {
+          beforeNodeMorphed: function(oldNode, _) {
+            if (oldNode.tagName && oldNode.tagName.includes("-")) {
+              return false;
+            }
+
+            return true;
+          }
+        }
+      }
+    JS
+
+    def initialize(options = {})
       @clients = []
       @clients_mutex = Mutex.new
+      @retry = options[:retry]
+      @idiomorph_options = options[:idiomorph_options]
       @cleanup_thread = cleanup_periodically
     end
 
@@ -26,13 +43,8 @@ class Mata
         end
 
         begin
+          stream << "retry: #{@retry}\n\n" if @retry
           stream << "data: {\"type\":\"connected\"}\n\n"
-
-          Thread.new do
-            loop { sleep 30 }
-          rescue
-            @clients_mutex.synchronize { @clients.delete(stream) }
-          end
         rescue
           @clients_mutex.synchronize { @clients.delete(stream) }
         end
@@ -40,9 +52,13 @@ class Mata
     end
 
     def deliver_payload
+      raise ArgumentError, "idiomorph_options must be a String containing a raw JS object literal" if @idiomorph_options && !@idiomorph_options.is_a?(String)
+
       idiomorph_js = File.read(File.join(__dir__, "idiomorph.min.js"))
       client_js = File.read(File.join(__dir__, "client.js"))
 
+      client_js = client_js.gsub("__MATA_IDIOMORPH_OPTIONS__", @idiomorph_options || DEFAULT_IDIOMORPH_OPTIONS)
+
       script = "#{idiomorph_js}\n\n#{client_js}"
 
       [200, {"content-type" => "application/javascript"}, [script]]
@@ -52,15 +68,13 @@ class Mata
       clients_copy = @clients_mutex.synchronize { @clients.dup }
       return if clients_copy.empty?
 
-      files.each do |file|
-        event_data = {type: "reload"}
-        message = "data: #{event_data.to_json}\n\n"
+      event_data = {type: "reload", files: files}
+      message = "data: #{event_data.to_json}\n\n"
 
-        clients_copy.each do |stream|
-          stream << message
-        rescue
-          @clients_mutex.synchronize { @clients.delete(stream) }
-        end
+      clients_copy.each do |stream|
+        stream << message
+      rescue
+        @clients_mutex.synchronize { @clients.delete(stream) }
       end
     end
 
@@ -87,6 +101,7 @@ class Mata
       @clients_mutex.synchronize do
         @clients.reject! do |client|
           client << ""
+
           false
         rescue
           true

data/lib/mata/client.js

@@ -2,26 +2,61 @@
   initMata();
 
   function initMata() {
-    const eventSource = new EventSource("/__mata/events");
+    const retryDelayBase = parseInt(document.currentScript.dataset.mataRetry) || 1000;
+    const maximumRetryDelay = 30000;
+    let retryDelay = retryDelayBase;
 
-    eventSource.onmessage = function(event) {
-      const data = JSON.parse(event.data);
+    const silent = (document.currentScript.dataset.mataLogLevel || "verbose").toLowerCase() === "silent";
 
-      switch(data.type) {
-        case "reload":
-          morphPage();
+    function log(...arguments) {
+      if (!silent) console.log("[Mata]", ...arguments);
+    }
 
-          break;
-        case "connected":
-          console.log("[Mata] Connected with DOM morphing");
+    function error(...arguments) {
+      if (!silent) console.error("[Mata]", ...arguments);
+    }
 
-          break;
-      }
-    };
+    connect();
+
+    function connect() {
+      const eventSource = new EventSource("/__mata/events");
+
+      eventSource.onmessage = function(event) {
+        const data = JSON.parse(event.data);
+
+        switch(data.type) {
+          case "reload":
+            if (data.files?.some((file) => file.endsWith(".js"))) {
+              log("JS file changed, reloading…");
+
+              window.location.reload();
+            } else {
+              morphPage();
+            }
+
+            break;
+          case "connected":
+            retryDelay = retryDelayBase;
+
+            log("Connected with DOM morphing");
+
+            break;
+        }
+      };
+
+      eventSource.onerror = function() {
+        eventSource.close();
+
+        log(`Connection lost, retrying in ${retryDelay}ms…`);
+
+        setTimeout(connect, retryDelay);
+        retryDelay = Math.min(retryDelay * 2, maximumRetryDelay);
+      };
+    }
 
     async function morphPage() {
       try {
-        console.log("[Mata] Fetching updated page…");
+        log("Fetching updated page…");
         const response = await fetch(window.location.href);
 
         if (!response.ok) {
@@ -36,30 +71,15 @@
           throw new Error("Invalid HTML response");
         }
 
-        Idiomorph.morph(document.documentElement, updatedDocument.documentElement, {
-          ignoreActiveValue: true,
-          callbacks: {
-            beforeNodeMorphed: function(oldNode, _) {
-              if (oldNode.tagName && oldNode.tagName.includes("-")) { // skip custom elements
-                return false;
-              }
-
-              return true;
-            }
-          }
-        });
+        Idiomorph.morph(document.documentElement, updatedDocument.documentElement, __MATA_IDIOMORPH_OPTIONS__);
 
-        console.log("[Mata] Page morphed successfully");
+        log("Page morphed successfully");
       } catch (error) {
-        console.error("[Mata] Morph failed:", error.message);
-        console.log("[Mata] Falling back to full reload");
+        error("Morph failed:", error.message);
+        log("Falling back to full reload");
 
         window.location.reload();
       }
     }
-
-    eventSource.onerror = function() {
-      console.log("[Mata] Connection lost, retrying…");
-    };
   }
 })();

data/lib/mata/version.rb

@@ -1,3 +1,3 @@
 class Mata
-  VERSION = "0.9.0"
+  VERSION = "0.11.0"
 end

data/lib/mata/watch_tower.rb

@@ -5,6 +5,7 @@ class Mata
     def initialize(options)
       @watch_paths = Array(options[:watch] || [])
       @skip_paths = skipped_patterns(options[:skip] || options[:ignore] || [])
+      @debounce = options[:debounce] || 300
       @on_change = nil
       @listener = nil
 
@@ -42,8 +43,9 @@ class Mata
         @last_change_time = Time.now
 
         Thread.new do
-          sleep 0.15
-          if Time.now - @last_change_time >= 0.15
+          sleep(@debounce / 1000.0)
+
+          if Time.now - @last_change_time >= (@debounce / 1000.0)
             @on_change&.call(modified + added + removed)
           end
         end

data/lib/mata.rb

@@ -14,8 +14,8 @@ class Mata
     return if ENV["MATA_DISABLED"] == "true"
 
     @watch_tower = WatchTower.new(options)
-    @broadcaster = Broadcaster.new
-    @agent = Agent.new
+    @broadcaster = Broadcaster.new(options)
+    @agent = Agent.new(options)
 
     @watch_tower.on_change { |files| @broadcaster.broadcast_to_all(files) }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mata
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.11.0
 platform: ruby
 authors:
 - Rails Designer
@@ -52,11 +52,11 @@ files:
 - lib/mata/idiomorph.min.js
 - lib/mata/version.rb
 - lib/mata/watch_tower.rb
-homepage: https://railsdesigner.com/mata/
+homepage: https://railsdesigner.com/open-source/mata/
 licenses:
 - MIT
 metadata:
-  homepage_uri: https://railsdesigner.com/mata/
+  homepage_uri: https://railsdesigner.com/open-source/mata/
   source_code_uri: https://github.com/Rails-Designer/mata
 rdoc_options: []
 require_paths:
@@ -72,7 +72,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.10
+rubygems_version: 4.0.22
 specification_version: 4
 summary: Hot module reloading for Rack applications
 test_files: []