phoenix_live_view 0.17.10 → 0.17.11

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.17.11 (2022-07-11)
+
+### Enhancements
+  - Add `replaceTransport` to LiveSocket
+
+### Bug fixes
+  - Cancel debounced events from firing after a live navigation event
+  - Fix hash anchor failing to scroll to anchor element on live navigation
+  - Do not debounce `phx-blur` events
+
+
 ## 0.17.10 (2022-05-25)
 
 ### Bug fixes

package/assets/js/phoenix_live_view/constants.js

@@ -1,8 +1,8 @@
 
 export const CONSECUTIVE_RELOADS = "consecutive-reloads"
 export const MAX_RELOADS = 10
-export const RELOAD_JITTER_MIN = 1000
-export const RELOAD_JITTER_MAX = 3000
+export const RELOAD_JITTER_MIN = 5000
+export const RELOAD_JITTER_MAX = 10000
 export const FAILSAFE_JITTER = 30000
 export const PHX_EVENT_CLASSES = [
   "phx-click-loading", "phx-change-loading", "phx-submit-loading",

package/assets/js/phoenix_live_view/dom.js

@@ -141,7 +141,7 @@ let DOM = {
     document.title = `${prefix || ""}${str}${suffix || ""}`
   },
 
-  debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, callback){
+  debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, asyncFilter, callback){
     let debounce = el.getAttribute(phxDebounce)
     let throttle = el.getAttribute(phxThrottle)
     if(debounce === ""){ debounce = defaultDebounce }
@@ -174,13 +174,16 @@ let DOM = {
           } else {
             callback()
             this.putPrivate(el, THROTTLED, true)
-            setTimeout(() => this.triggerCycle(el, DEBOUNCE_TRIGGER), timeout)
+            setTimeout(() => {
+              if(asyncFilter()){ this.triggerCycle(el, DEBOUNCE_TRIGGER) }
+            }, timeout)
           }
         } else {
-          setTimeout(() => this.triggerCycle(el, DEBOUNCE_TRIGGER, currentCycle), timeout)
+          setTimeout(() => {
+            if(asyncFilter()){ this.triggerCycle(el, DEBOUNCE_TRIGGER, currentCycle) }
+          }, timeout)
         }
 
-
         let form = el.form
         if(form && this.once(form, "bind-debounce")){
           form.addEventListener("submit", () => {

package/assets/js/phoenix_live_view/live_socket.js

@@ -148,6 +148,7 @@ export default class LiveSocket {
     this.hooks = opts.hooks || {}
     this.uploaders = opts.uploaders || {}
     this.loaderTimeout = opts.loaderTimeout || LOADER_TIMEOUT
+    this.reloadWithJitterTimer = null
     this.maxReloads = opts.maxReloads || MAX_RELOADS
     this.reloadJitterMin = opts.reloadJitterMin || RELOAD_JITTER_MIN
     this.reloadJitterMax = opts.reloadJitterMax || RELOAD_JITTER_MAX
@@ -206,6 +207,8 @@ export default class LiveSocket {
       if(this.joinRootViews()){
         this.bindTopLevelEvents()
         this.socket.connect()
+      } else if(this.main){
+        this.socket.connect()
       }
     }
     if(["complete", "loaded", "interactive"].indexOf(document.readyState) >= 0){
@@ -215,7 +218,16 @@ export default class LiveSocket {
     }
   }
 
-  disconnect(callback){ this.socket.disconnect(callback) }
+  disconnect(callback){
+    clearTimeout(this.reloadWithJitterTimer)
+    this.socket.disconnect(callback)
+  }
+
+  replaceTransport(transport){
+    clearTimeout(this.reloadWithJitterTimer)
+    this.socket.replaceTransport(transport)
+    this.connect()
+  }
 
   execJS(el, encodedJS, eventType = null){
     this.owner(el, view => JS.exec(eventType, encodedJS, view, el))
@@ -293,18 +305,23 @@ export default class LiveSocket {
   }
 
   reloadWithJitter(view, log){
-    view.destroy()
+    clearTimeout(this.reloadWithJitterTimer)
     this.disconnect()
     let minMs = this.reloadJitterMin
     let maxMs = this.reloadJitterMax
     let afterMs = Math.floor(Math.random() * (maxMs - minMs + 1)) + minMs
     let tries = Browser.updateLocal(this.localStorage, window.location.pathname, CONSECUTIVE_RELOADS, 0, count => count + 1)
-    log ? log() : this.log(view, "join", () => [`encountered ${tries} consecutive reloads`])
     if(tries > this.maxReloads){
-      this.log(view, "join", () => [`exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`])
       afterMs = this.failsafeJitter
     }
-    setTimeout(() => {
+    this.reloadWithJitterTimer = setTimeout(() => {
+      // if view has recovered, such as transport replaced, then cancel
+      if(view.isDestroyed() || view.isConnected()){ return }
+      view.destroy()
+      log ? log() : this.log(view, "join", () => [`encountered ${tries} consecutive reloads`])
+      if(tries > this.maxReloads){
+        this.log(view, "join", () => [`exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`])
+      }
       if(this.hasPendingLink()){
         window.location = this.pendingLink
       } else {
@@ -361,7 +378,7 @@ export default class LiveSocket {
           DOM.findPhxSticky(document).forEach(el => newMainEl.appendChild(el))
           this.outgoingMainEl.replaceWith(newMainEl)
           this.outgoingMainEl = null
-          callback && callback()
+          callback && requestAnimationFrame(callback)
           onDone()
         })
       }
@@ -407,6 +424,7 @@ export default class LiveSocket {
       this.roots[id].destroy()
       delete this.roots[id]
     }
+    this.main = null
   }
 
   destroyViewByEl(el){
@@ -555,7 +573,7 @@ export default class LiveSocket {
         let windowBinding = this.binding(`window-${event}`)
         let targetPhxEvent = e.target.getAttribute && e.target.getAttribute(binding)
         if(targetPhxEvent){
-          this.debounce(e.target, e, () => {
+          this.debounce(e.target, e, browserEventName, () => {
             this.withinOwners(e.target, view => {
               callback(e, event, view, e.target, targetPhxEvent, null)
             })
@@ -563,7 +581,7 @@ export default class LiveSocket {
         } else {
           DOM.all(document, `[${windowBinding}]`, el => {
             let phxEvent = el.getAttribute(windowBinding)
-            this.debounce(el, e, () => {
+            this.debounce(el, e, browserEventName, () => {
               this.withinOwners(el, view => {
                 callback(e, event, view, el, phxEvent, "window")
               })
@@ -596,7 +614,7 @@ export default class LiveSocket {
       if(!phxEvent){ return }
       if(target.getAttribute("href") === "#"){ e.preventDefault() }
 
-      this.debounce(target, e, () => {
+      this.debounce(target, e, "click", () => {
         this.withinOwners(target, view => {
           JS.exec("click", phxEvent, view, target, ["push", {data: this.eventMeta("click", e, target)}])
         })
@@ -758,7 +776,7 @@ export default class LiveSocket {
 
         DOM.putPrivate(input, "prev-iteration", {at: currentIterations, type: type})
 
-        this.debounce(input, e, () => {
+        this.debounce(input, e, type, () => {
           this.withinOwners(dispatcher, view => {
             DOM.putPrivate(input, PHX_HAS_FOCUSED, true)
             if(!DOM.isTextualInput(input)){
@@ -771,12 +789,20 @@ export default class LiveSocket {
     }
   }
 
-  debounce(el, event, callback){
+  debounce(el, event, eventType, callback){
+    if(eventType === "blur" || eventType === "focusout"){ return callback() }
+
     let phxDebounce = this.binding(PHX_DEBOUNCE)
     let phxThrottle = this.binding(PHX_THROTTLE)
     let defaultDebounce = this.defaults.debounce.toString()
     let defaultThrottle = this.defaults.throttle.toString()
-    DOM.debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, callback)
+
+    this.withinOwners(el, view => {
+      let asyncFilter = () => !view.isDestroyed() && document.body.contains(el)
+      DOM.debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, asyncFilter, () => {
+        callback()
+      })
+    })
   }
 
   silenceEvents(callback){

package/assets/js/phoenix_live_view/view.js

@@ -616,14 +616,12 @@ export default class View {
     if(resp.redirect){ return this.onRedirect(resp.redirect) }
     if(resp.live_redirect){ return this.onLiveRedirect(resp.live_redirect) }
     this.log("error", () => ["unable to join", resp])
-    return this.liveSocket.reloadWithJitter(this)
+    if(this.liveSocket.isConnected()){ this.liveSocket.reloadWithJitter(this) }
   }
 
   onClose(reason){
     if(this.isDestroyed()){ return }
-    if((this.isJoinPending() && document.visibilityState !== "hidden") ||
-      (this.liveSocket.hasPendingLink() && reason !== "leave")){
-
+    if(this.liveSocket.hasPendingLink() && reason !== "leave"){
       return this.liveSocket.reloadWithJitter(this)
     }
     this.destroyAllChildren()
@@ -637,7 +635,7 @@ export default class View {
 
   onError(reason){
     this.onClose(reason)
-    this.log("error", () => ["view crashed", reason])
+    if(this.liveSocket.isConnected()){ this.log("error", () => ["view crashed", reason]) }
     if(!this.liveSocket.isUnloaded()){ this.displayError() }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.17.10",
+  "version": "0.17.11",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",

package/priv/static/phoenix_live_view.cjs.js

@@ -14,8 +14,8 @@ __export(exports, {
 // js/phoenix_live_view/constants.js
 var CONSECUTIVE_RELOADS = "consecutive-reloads";
 var MAX_RELOADS = 10;
-var RELOAD_JITTER_MIN = 1e3;
-var RELOAD_JITTER_MAX = 3e3;
+var RELOAD_JITTER_MIN = 5e3;
+var RELOAD_JITTER_MAX = 1e4;
 var FAILSAFE_JITTER = 3e4;
 var PHX_EVENT_CLASSES = [
   "phx-click-loading",
@@ -379,7 +379,7 @@ var DOM = {
     let { prefix, suffix } = titleEl.dataset;
     document.title = `${prefix || ""}${str}${suffix || ""}`;
   },
-  debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, callback) {
+  debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, asyncFilter, callback) {
     let debounce = el.getAttribute(phxDebounce);
     let throttle = el.getAttribute(phxThrottle);
     if (debounce === "") {
@@ -416,10 +416,18 @@ var DOM = {
           } else {
             callback();
             this.putPrivate(el, THROTTLED, true);
-            setTimeout(() => this.triggerCycle(el, DEBOUNCE_TRIGGER), timeout);
+            setTimeout(() => {
+              if (asyncFilter()) {
+                this.triggerCycle(el, DEBOUNCE_TRIGGER);
+              }
+            }, timeout);
           }
         } else {
-          setTimeout(() => this.triggerCycle(el, DEBOUNCE_TRIGGER, currentCycle), timeout);
+          setTimeout(() => {
+            if (asyncFilter()) {
+              this.triggerCycle(el, DEBOUNCE_TRIGGER, currentCycle);
+            }
+          }, timeout);
         }
         let form = el.form;
         if (form && this.once(form, "bind-debounce")) {
@@ -2679,13 +2687,15 @@ var View = class {
       return this.onLiveRedirect(resp.live_redirect);
     }
     this.log("error", () => ["unable to join", resp]);
-    return this.liveSocket.reloadWithJitter(this);
+    if (this.liveSocket.isConnected()) {
+      this.liveSocket.reloadWithJitter(this);
+    }
   }
   onClose(reason) {
     if (this.isDestroyed()) {
       return;
     }
-    if (this.isJoinPending() && document.visibilityState !== "hidden" || this.liveSocket.hasPendingLink() && reason !== "leave") {
+    if (this.liveSocket.hasPendingLink() && reason !== "leave") {
       return this.liveSocket.reloadWithJitter(this);
     }
     this.destroyAllChildren();
@@ -2699,7 +2709,9 @@ var View = class {
   }
   onError(reason) {
     this.onClose(reason);
-    this.log("error", () => ["view crashed", reason]);
+    if (this.liveSocket.isConnected()) {
+      this.log("error", () => ["view crashed", reason]);
+    }
     if (!this.liveSocket.isUnloaded()) {
       this.displayError();
     }
@@ -3184,6 +3196,7 @@ var LiveSocket = class {
     this.hooks = opts.hooks || {};
     this.uploaders = opts.uploaders || {};
     this.loaderTimeout = opts.loaderTimeout || LOADER_TIMEOUT;
+    this.reloadWithJitterTimer = null;
     this.maxReloads = opts.maxReloads || MAX_RELOADS;
     this.reloadJitterMin = opts.reloadJitterMin || RELOAD_JITTER_MIN;
     this.reloadJitterMax = opts.reloadJitterMax || RELOAD_JITTER_MAX;
@@ -3246,6 +3259,8 @@ var LiveSocket = class {
       if (this.joinRootViews()) {
         this.bindTopLevelEvents();
         this.socket.connect();
+      } else if (this.main) {
+        this.socket.connect();
       }
     };
     if (["complete", "loaded", "interactive"].indexOf(document.readyState) >= 0) {
@@ -3255,8 +3270,14 @@ var LiveSocket = class {
     }
   }
   disconnect(callback) {
+    clearTimeout(this.reloadWithJitterTimer);
     this.socket.disconnect(callback);
   }
+  replaceTransport(transport) {
+    clearTimeout(this.reloadWithJitterTimer);
+    this.socket.replaceTransport(transport);
+    this.connect();
+  }
   execJS(el, encodedJS, eventType = null) {
     this.owner(el, (view) => js_default.exec(eventType, encodedJS, view, el));
   }
@@ -3331,18 +3352,24 @@ var LiveSocket = class {
     return fakePush;
   }
   reloadWithJitter(view, log) {
-    view.destroy();
+    clearTimeout(this.reloadWithJitterTimer);
     this.disconnect();
     let minMs = this.reloadJitterMin;
     let maxMs = this.reloadJitterMax;
     let afterMs = Math.floor(Math.random() * (maxMs - minMs + 1)) + minMs;
     let tries = browser_default.updateLocal(this.localStorage, window.location.pathname, CONSECUTIVE_RELOADS, 0, (count) => count + 1);
-    log ? log() : this.log(view, "join", () => [`encountered ${tries} consecutive reloads`]);
     if (tries > this.maxReloads) {
-      this.log(view, "join", () => [`exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`]);
       afterMs = this.failsafeJitter;
     }
-    setTimeout(() => {
+    this.reloadWithJitterTimer = setTimeout(() => {
+      if (view.isDestroyed() || view.isConnected()) {
+        return;
+      }
+      view.destroy();
+      log ? log() : this.log(view, "join", () => [`encountered ${tries} consecutive reloads`]);
+      if (tries > this.maxReloads) {
+        this.log(view, "join", () => [`exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`]);
+      }
       if (this.hasPendingLink()) {
         window.location = this.pendingLink;
       } else {
@@ -3401,7 +3428,7 @@ var LiveSocket = class {
           dom_default.findPhxSticky(document).forEach((el) => newMainEl.appendChild(el));
           this.outgoingMainEl.replaceWith(newMainEl);
           this.outgoingMainEl = null;
-          callback && callback();
+          callback && requestAnimationFrame(callback);
           onDone();
         });
       }
@@ -3445,6 +3472,7 @@ var LiveSocket = class {
       this.roots[id].destroy();
       delete this.roots[id];
     }
+    this.main = null;
   }
   destroyViewByEl(el) {
     let root = this.getRootById(el.getAttribute(PHX_ROOT_ID));
@@ -3592,7 +3620,7 @@ var LiveSocket = class {
         let windowBinding = this.binding(`window-${event}`);
         let targetPhxEvent = e.target.getAttribute && e.target.getAttribute(binding);
         if (targetPhxEvent) {
-          this.debounce(e.target, e, () => {
+          this.debounce(e.target, e, browserEventName, () => {
             this.withinOwners(e.target, (view) => {
               callback(e, event, view, e.target, targetPhxEvent, null);
             });
@@ -3600,7 +3628,7 @@ var LiveSocket = class {
         } else {
           dom_default.all(document, `[${windowBinding}]`, (el) => {
             let phxEvent = el.getAttribute(windowBinding);
-            this.debounce(el, e, () => {
+            this.debounce(el, e, browserEventName, () => {
               this.withinOwners(el, (view) => {
                 callback(e, event, view, el, phxEvent, "window");
               });
@@ -3634,7 +3662,7 @@ var LiveSocket = class {
       if (target.getAttribute("href") === "#") {
         e.preventDefault();
       }
-      this.debounce(target, e, () => {
+      this.debounce(target, e, "click", () => {
         this.withinOwners(target, (view) => {
           js_default.exec("click", phxEvent, view, target, ["push", { data: this.eventMeta("click", e, target) }]);
         });
@@ -3798,7 +3826,7 @@ var LiveSocket = class {
           return;
         }
         dom_default.putPrivate(input, "prev-iteration", { at: currentIterations, type });
-        this.debounce(input, e, () => {
+        this.debounce(input, e, type, () => {
           this.withinOwners(dispatcher, (view) => {
             dom_default.putPrivate(input, PHX_HAS_FOCUSED, true);
             if (!dom_default.isTextualInput(input)) {
@@ -3810,12 +3838,20 @@ var LiveSocket = class {
       }, false);
     }
   }
-  debounce(el, event, callback) {
+  debounce(el, event, eventType, callback) {
+    if (eventType === "blur" || eventType === "focusout") {
+      return callback();
+    }
     let phxDebounce = this.binding(PHX_DEBOUNCE);
     let phxThrottle = this.binding(PHX_THROTTLE);
     let defaultDebounce = this.defaults.debounce.toString();
     let defaultThrottle = this.defaults.throttle.toString();
-    dom_default.debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, callback);
+    this.withinOwners(el, (view) => {
+      let asyncFilter = () => !view.isDestroyed() && document.body.contains(el);
+      dom_default.debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, asyncFilter, () => {
+        callback();
+      });
+    });
   }
   silenceEvents(callback) {
     this.silenced = true;