cable_ready 5.0.1 → 5.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b867df19bb8d7a78152aa746001d00e593390055cbc7e673123d6e314d950a8a
-  data.tar.gz: c7c2bf1bbedd33b3af0de55dac46f2239a647357a1d6e671a57f6c3db5ef6e26
+  metadata.gz: 77c9ebacb73173f6208a3695b3f9305c70a87620216fc9441d92cc29fb2199af
+  data.tar.gz: c41f703f59647be24df6a357f91e0cb848da7a16d31701714f1a648ec1991f6c
 SHA512:
-  metadata.gz: f06c1061d2df7fee27d75a9a46714a27762486fe1d4d5dabc4fe6d6fc13a677e240a90f4c74bf4f3a0353a5b1f7d5335493cb90fe65428927236ed3155333c4d
-  data.tar.gz: c5efaaedebccbcb95f570e5d4ff122de9288edc923af7dd63434e7748ee4f34216552cb20921ac8755dfb2497f5f11cd3383414986ffbfaba0a6dd1150164bb5
+  metadata.gz: e741e3a8d4c500ed4ca9dc1a09590f373911f5bd87986e2a9de9fb8d461da06d65fb86d8b940a4007da79d38cb352907a2c09aefd642f2a808d9d511e7d6f230
+  data.tar.gz: 4a6b2d908138c58afb074642bf8e27c6f685eeace3ad2b43d182e31b61440fb251e059e7aa7cb508179e8c39c050f892e066f9c7d2c7516460284fda1d66bf87

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    cable_ready (5.0.1)
+    cable_ready (5.0.2)
       actionpack (>= 5.2)
       actionview (>= 5.2)
       activesupport (>= 5.2)
@@ -203,6 +203,7 @@ GEM
 PLATFORMS
   arm64-darwin-22
   x86_64-darwin-19
+  x86_64-darwin-22
   x86_64-linux
 
 DEPENDENCIES

data/app/assets/javascripts/cable_ready.js

@@ -2,7 +2,7 @@ import morphdom from "morphdom";
 
 var name = "cable_ready";
 
-var version = "5.0.1";
+var version = "5.0.3";
 
 var description = "CableReady helps you create great real-time user experiences by making it simple to trigger client-side DOM changes from server-side Ruby.";
 
@@ -1061,6 +1061,56 @@ var Log = {
   morphEnd: morphEnd
 };
 
+class AppearanceObserver {
+  constructor(delegate, element = null) {
+    this.delegate = delegate;
+    this.element = element || delegate;
+    this.started = false;
+    this.intersecting = false;
+    this.intersectionObserver = new IntersectionObserver(this.intersect);
+  }
+  start() {
+    if (!this.started) {
+      this.started = true;
+      this.intersectionObserver.observe(this.element);
+      this.observeVisibility();
+    }
+  }
+  stop() {
+    if (this.started) {
+      this.started = false;
+      this.intersectionObserver.unobserve(this.element);
+      this.unobserveVisibility();
+    }
+  }
+  observeVisibility=() => {
+    document.addEventListener("visibilitychange", this.handleVisibilityChange);
+  };
+  unobserveVisibility=() => {
+    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+  };
+  intersect=entries => {
+    entries.forEach((entry => {
+      if (entry.target === this.element) {
+        if (entry.isIntersecting && document.visibilityState === "visible") {
+          this.intersecting = true;
+          this.delegate.appearedInViewport();
+        } else {
+          this.intersecting = false;
+          this.delegate.disappearedFromViewport();
+        }
+      }
+    }));
+  };
+  handleVisibilityChange=event => {
+    if (document.visibilityState === "visible" && this.intersecting) {
+      this.delegate.appearedInViewport();
+    } else {
+      this.delegate.disappearedFromViewport();
+    }
+  };
+}
+
 const template = `\n<style>\n  :host {\n    display: block;\n  }\n</style>\n<slot></slot>\n`;
 
 class UpdatesForElement extends SubscribingElement {
@@ -1075,6 +1125,9 @@ class UpdatesForElement extends SubscribingElement {
     shadowRoot.innerHTML = template;
     this.triggerElementLog = new BoundedQueue(10);
     this.targetElementLog = new BoundedQueue(10);
+    this.appearanceObserver = new AppearanceObserver(this);
+    this.visible = false;
+    this.didTransitionToVisible = false;
   }
   async connectedCallback() {
     if (this.preview) return;
@@ -1085,6 +1138,14 @@ class UpdatesForElement extends SubscribingElement {
     } else {
       console.error("The `cable_ready_updates_for` helper cannot connect. You must initialize CableReady with an Action Cable consumer.");
     }
+    if (this.observeAppearance) {
+      this.appearanceObserver.start();
+    }
+  }
+  disconnectedCallback() {
+    if (this.observeAppearance) {
+      this.appearanceObserver.stop();
+    }
   }
   async update(data) {
     this.lastUpdateTimestamp = new Date;
@@ -1095,7 +1156,8 @@ class UpdatesForElement extends SubscribingElement {
       return;
     }
     // first <cable-ready-updates-for> element in the DOM *at any given moment* updates all of the others
-        if (blocks[0].element !== this) {
+    // if the element becomes visible though, we have to overrule and load it
+        if (blocks[0].element !== this && !this.didTransitionToVisible) {
       this.triggerElementLog.push(`${(new Date).toLocaleString()}: ${Log.cancel(this.lastUpdateTimestamp, "Update already requested")}`);
       return;
     }
@@ -1121,6 +1183,17 @@ class UpdatesForElement extends SubscribingElement {
       block.process(data, this.html, this.index, this.lastUpdateTimestamp);
     }));
   }
+  appearedInViewport() {
+    if (!this.visible) {
+      // transition from invisible to visible forces update
+      this.didTransitionToVisible = true;
+      this.update({});
+    }
+    this.visible = true;
+  }
+  disappearedFromViewport() {
+    this.visible = false;
+  }
   get query() {
     return `${this.tagName}[identifier="${this.identifier}"]`;
   }
@@ -1130,6 +1203,9 @@ class UpdatesForElement extends SubscribingElement {
   get debounce() {
     return this.hasAttribute("debounce") ? parseInt(this.getAttribute("debounce")) : 20;
   }
+  get observeAppearance() {
+    return this.hasAttribute("observe-appearance");
+  }
 }
 
 class Block {
@@ -1159,6 +1235,7 @@ class Block {
       onBeforeElUpdated: shouldMorph(operation),
       onElUpdated: _ => {
         this.element.removeAttribute("updating");
+        this.element.didTransitionToVisible = false;
         dispatch(this.element, "cable-ready:after-update", operation);
         assignFocus(operation.focusSelector);
       }
@@ -1185,7 +1262,7 @@ class Block {
   }
   shouldUpdate(data) {
     // if everything that could prevent an update is false, update this block
-    return !this.ignoresInnerUpdates && this.hasChangesSelectedForUpdate(data);
+    return !this.ignoresInnerUpdates && this.hasChangesSelectedForUpdate(data) && (!this.observeAppearance || this.visible);
   }
   hasChangesSelectedForUpdate(data) {
     // if there's an only attribute, only update if at least one of the attributes changed is in the allow list
@@ -1205,6 +1282,12 @@ class Block {
   get query() {
     return this.element.query;
   }
+  get visible() {
+    return this.element.visible;
+  }
+  get observeAppearance() {
+    return this.element.observeAppearance;
+  }
 }
 
 const registerInnerUpdates = () => {

data/app/assets/javascripts/cable_ready.umd.js

@@ -4,7 +4,7 @@
 })(this, (function(exports, morphdom) {
   "use strict";
   var name = "cable_ready";
-  var version = "5.0.1";
+  var version = "5.0.3";
   var description = "CableReady helps you create great real-time user experiences by making it simple to trigger client-side DOM changes from server-side Ruby.";
   var keywords = [ "ruby", "rails", "websockets", "actioncable", "cable", "ssr", "stimulus_reflex", "client-side", "dom" ];
   var homepage = "https://cableready.stimulusreflex.com";
@@ -982,6 +982,55 @@
     morphStart: morphStart,
     morphEnd: morphEnd
   };
+  class AppearanceObserver {
+    constructor(delegate, element = null) {
+      this.delegate = delegate;
+      this.element = element || delegate;
+      this.started = false;
+      this.intersecting = false;
+      this.intersectionObserver = new IntersectionObserver(this.intersect);
+    }
+    start() {
+      if (!this.started) {
+        this.started = true;
+        this.intersectionObserver.observe(this.element);
+        this.observeVisibility();
+      }
+    }
+    stop() {
+      if (this.started) {
+        this.started = false;
+        this.intersectionObserver.unobserve(this.element);
+        this.unobserveVisibility();
+      }
+    }
+    observeVisibility=() => {
+      document.addEventListener("visibilitychange", this.handleVisibilityChange);
+    };
+    unobserveVisibility=() => {
+      document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+    };
+    intersect=entries => {
+      entries.forEach((entry => {
+        if (entry.target === this.element) {
+          if (entry.isIntersecting && document.visibilityState === "visible") {
+            this.intersecting = true;
+            this.delegate.appearedInViewport();
+          } else {
+            this.intersecting = false;
+            this.delegate.disappearedFromViewport();
+          }
+        }
+      }));
+    };
+    handleVisibilityChange=event => {
+      if (document.visibilityState === "visible" && this.intersecting) {
+        this.delegate.appearedInViewport();
+      } else {
+        this.delegate.disappearedFromViewport();
+      }
+    };
+  }
   const template = `\n<style>\n  :host {\n    display: block;\n  }\n</style>\n<slot></slot>\n`;
   class UpdatesForElement extends SubscribingElement {
     static get tagName() {
@@ -995,6 +1044,9 @@
       shadowRoot.innerHTML = template;
       this.triggerElementLog = new BoundedQueue(10);
       this.targetElementLog = new BoundedQueue(10);
+      this.appearanceObserver = new AppearanceObserver(this);
+      this.visible = false;
+      this.didTransitionToVisible = false;
     }
     async connectedCallback() {
       if (this.preview) return;
@@ -1005,6 +1057,14 @@
       } else {
         console.error("The `cable_ready_updates_for` helper cannot connect. You must initialize CableReady with an Action Cable consumer.");
       }
+      if (this.observeAppearance) {
+        this.appearanceObserver.start();
+      }
+    }
+    disconnectedCallback() {
+      if (this.observeAppearance) {
+        this.appearanceObserver.stop();
+      }
     }
     async update(data) {
       this.lastUpdateTimestamp = new Date;
@@ -1015,7 +1075,8 @@
         return;
       }
       // first <cable-ready-updates-for> element in the DOM *at any given moment* updates all of the others
-            if (blocks[0].element !== this) {
+      // if the element becomes visible though, we have to overrule and load it
+            if (blocks[0].element !== this && !this.didTransitionToVisible) {
         this.triggerElementLog.push(`${(new Date).toLocaleString()}: ${Log.cancel(this.lastUpdateTimestamp, "Update already requested")}`);
         return;
       }
@@ -1041,6 +1102,17 @@
         block.process(data, this.html, this.index, this.lastUpdateTimestamp);
       }));
     }
+    appearedInViewport() {
+      if (!this.visible) {
+        // transition from invisible to visible forces update
+        this.didTransitionToVisible = true;
+        this.update({});
+      }
+      this.visible = true;
+    }
+    disappearedFromViewport() {
+      this.visible = false;
+    }
     get query() {
       return `${this.tagName}[identifier="${this.identifier}"]`;
     }
@@ -1050,6 +1122,9 @@
     get debounce() {
       return this.hasAttribute("debounce") ? parseInt(this.getAttribute("debounce")) : 20;
     }
+    get observeAppearance() {
+      return this.hasAttribute("observe-appearance");
+    }
   }
   class Block {
     constructor(element) {
@@ -1078,6 +1153,7 @@
         onBeforeElUpdated: shouldMorph(operation),
         onElUpdated: _ => {
           this.element.removeAttribute("updating");
+          this.element.didTransitionToVisible = false;
           dispatch(this.element, "cable-ready:after-update", operation);
           assignFocus(operation.focusSelector);
         }
@@ -1104,7 +1180,7 @@
     }
     shouldUpdate(data) {
       // if everything that could prevent an update is false, update this block
-      return !this.ignoresInnerUpdates && this.hasChangesSelectedForUpdate(data);
+      return !this.ignoresInnerUpdates && this.hasChangesSelectedForUpdate(data) && (!this.observeAppearance || this.visible);
     }
     hasChangesSelectedForUpdate(data) {
       // if there's an only attribute, only update if at least one of the attributes changed is in the allow list
@@ -1124,6 +1200,12 @@
     get query() {
       return this.element.query;
     }
+    get visible() {
+      return this.element.visible;
+    }
+    get observeAppearance() {
+      return this.element.observeAppearance;
+    }
   }
   const registerInnerUpdates = () => {
     document.addEventListener("stimulus-reflex:before", (event => {

data/app/helpers/cable_ready/view_helper.rb

@@ -27,12 +27,13 @@ module CableReady
       tag.cable_ready_stream_from(**build_options(*keys, html_options))
     end
 
-    def cable_ready_updates_for(*keys, url: nil, debounce: nil, only: nil, ignore_inner_updates: false, html_options: {}, &block)
+    def cable_ready_updates_for(*keys, url: nil, debounce: nil, only: nil, ignore_inner_updates: false, observe_appearance: false, html_options: {}, &block)
       options = build_options(*keys, html_options)
       options[:url] = url if url
       options[:debounce] = debounce if debounce
       options[:only] = only if only
       options[:"ignore-inner-updates"] = "" if ignore_inner_updates
+      options[:"observe-appearance"] = "" if observe_appearance
       tag.cable_ready_updates_for(**options) { capture(&block) }
     end
 

data/lib/cable_ready/channels.rb

@@ -2,6 +2,8 @@
 
 require "thread/local"
 
+require "active_support/core_ext/enumerable"
+
 module CableReady
   # This class is a thread local singleton: CableReady::Channels.instance
   # SEE: https://github.com/socketry/thread-local/tree/master/guides/getting-started

data/lib/cable_ready/config.rb

@@ -4,6 +4,8 @@ require "monitor"
 require "observer"
 require "singleton"
 
+require "active_support/core_ext/numeric/time"
+
 module CableReady
   # This class is a process level singleton shared by all threads: CableReady::Config.instance
   class Config

data/lib/cable_ready/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module CableReady
-  VERSION = "5.0.1"
+  VERSION = "5.0.3"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cable_ready",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "CableReady helps you create great real-time user experiences by making it simple to trigger client-side DOM changes from server-side Ruby.",
   "keywords": [
     "ruby",

data/yarn.lock

@@ -4892,20 +4892,25 @@ semver-compare@^1.0.0:
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
   integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
 
-semver@6.3.0, semver@^6.0.0, semver@^6.1.2, semver@^6.3.0:
+semver@6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
 semver@^5.5.0, semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
+semver@^6.0.0, semver@^6.1.2, semver@^6.3.0:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 semver@^7.3.4:
-  version "7.3.8"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
-  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -5728,9 +5733,9 @@ which@^2.0.1:
     isexe "^2.0.0"
 
 word-wrap@~1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
+  integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
 
 wordwrap@^1.0.0:
   version "1.0.0"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: cable_ready
 version: !ruby/object:Gem::Version
-  version: 5.0.1
+  version: 5.0.3
 platform: ruby
 authors:
 - Nathan Hopkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-07 00:00:00.000000000 Z
+date: 2023-11-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -303,7 +303,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.1
+rubygems_version: 3.4.19
 signing_key:
 specification_version: 4
 summary: Out-of-Band Server Triggered DOM Operations