phoenix_live_view 0.20.5 → 0.20.7

package/assets/js/phoenix_live_view/dom.js

@@ -221,23 +221,7 @@ let DOM = {
 
       default:
         let timeout = parseInt(value)
-        let trigger = (blur) => {
-          if(blur){
-            // if the input is blurred, we need to cancel the next throttle timeout
-            // therefore we store the timer id in the THROTTLED private attribute
-            if(throttle && this.private(el, THROTTLED)){
-              clearTimeout(this.private(el, THROTTLED))
-              this.deletePrivate(el, THROTTLED)
-            }
-            // on debounce we just trigger the callback
-            return callback()
-          }
-          // no blur, remove the throttle attribute if we are in throttle mode
-          if(throttle) this.deletePrivate(el, THROTTLED)
-          // always call the callback to ensure that the latest event is processed,
-          // even when throttle is active
-          callback()
-        }
+        let trigger = () => throttle ? this.deletePrivate(el, THROTTLED) : callback()
         let currentCycle = this.incCycle(el, DEBOUNCE_TRIGGER, trigger)
         if(isNaN(timeout)){ return logError(`invalid throttle/debounce value: ${value}`) }
         if(throttle){
@@ -252,10 +236,6 @@ let DOM = {
             return false
           } else {
             callback()
-            // store the throttle timer id in the THROTTLED private attribute,
-            // so that we can cancel it if the input is blurred
-            // otherwise, when new events happen after blur, but before the old
-            // timeout is triggered, we would actually trigger the callback multiple times
             const t = setTimeout(() => {
               if(asyncFilter()){ this.triggerCycle(el, DEBOUNCE_TRIGGER) }
             }, timeout)
@@ -278,17 +258,23 @@ let DOM = {
           })
         }
         if(this.once(el, "bind-debounce")){
-          el.addEventListener("blur", () => this.triggerCycle(el, DEBOUNCE_TRIGGER, null, [true]))
+          el.addEventListener("blur", () => {
+            // because we trigger the callback here,
+            // we also clear the throttle timeout to prevent the callback
+            // from being called again after the timeout fires
+            clearTimeout(this.private(el, THROTTLED))
+            this.triggerCycle(el, DEBOUNCE_TRIGGER)
+          })
         }
     }
   },
 
-  triggerCycle(el, key, currentCycle, params=[]){
+  triggerCycle(el, key, currentCycle){
     let [cycle, trigger] = this.private(el, key)
     if(!currentCycle){ currentCycle = cycle }
     if(currentCycle === cycle){
       this.incCycle(el, key)
-      trigger(...params)
+      trigger()
     }
   },
 

package/assets/js/phoenix_live_view/dom_patch.js

@@ -99,41 +99,8 @@ export default class DOMPatch {
 
     let externalFormTriggered = null
 
-    this.trackBefore("added", container)
-    this.trackBefore("updated", container, container)
-
-    liveSocket.time("morphdom", () => {
-      this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
-        inserts.forEach(([key, streamAt, limit]) => {
-          this.streamInserts[key] = {ref, streamAt, limit, reset}
-        })
-        if(reset !== undefined){
-          DOM.all(container, `[${PHX_STREAM_REF}="${ref}"]`, child => {
-            this.removeStreamChildElement(child)
-          })
-        }
-        deleteIds.forEach(id => {
-          let child = container.querySelector(`[id="${id}"]`)
-          if(child){ this.removeStreamChildElement(child) }
-        })
-      })
-
-      // clear stream items from the dead render if they are not inserted again
-      if(isJoinPatch){
-        DOM.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`, el => {
-          // make sure to only remove elements owned by the current view
-          // see https://github.com/phoenixframework/phoenix_live_view/issues/3047
-          this.liveSocket.owner(el, (view) => {
-            if(view === this.view){
-              Array.from(el.children).forEach(child => {
-                this.removeStreamChildElement(child)
-              })
-            }
-          })
-        })
-      }
-
-      morphdom(targetContainer, html, {
+    function morph(targetContainer, source){
+      morphdom(targetContainer, source, {
         childrenOnly: targetContainer.getAttribute(PHX_COMPONENT) === null,
         getNodeKey: (node) => {
           if(DOM.isPhxDestroyed(node)){ return null }
@@ -151,14 +118,6 @@ export default class DOMPatch {
 
           this.setStreamRef(child, ref)
 
-          // we may need to restore skipped components, see removeStreamChildElement
-          child.querySelectorAll(`[${PHX_MAGIC_ID}][${PHX_SKIP}]`).forEach(el => {
-            const component = this.streamComponentRestore[el.getAttribute(PHX_MAGIC_ID)]
-            if(component){
-              el.replaceWith(component)
-            }
-          })
-
           // streaming
           if(streamAt === 0){
             parent.insertAdjacentElement("afterbegin", child)
@@ -171,12 +130,21 @@ export default class DOMPatch {
         },
         onBeforeNodeAdded: (el) => {
           DOM.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom)
-          if(DOM.isFeedbackContainer(el, phxFeedbackFor)) feedbackContainers.push(el)
           this.trackBefore("added", el)
-          return el
+
+          let morphedEl = el
+          // this is a stream item that was kept on reset, recursively morph it
+          if(!isJoinPatch && this.streamComponentRestore[el.id]){
+            morphedEl = this.streamComponentRestore[el.id]
+            delete this.streamComponentRestore[el.id]
+            morph.bind(this)(morphedEl, el)
+          }
+
+          return morphedEl
         },
         onNodeAdded: (el) => {
           if(el.getAttribute){ this.maybeReOrderStream(el, true) }
+          if(DOM.isFeedbackContainer(el, phxFeedbackFor)) feedbackContainers.push(el)
 
           // hack to fix Safari handling of img srcset and video tags
           if(el instanceof HTMLImageElement && el.srcset){
@@ -282,6 +250,43 @@ export default class DOMPatch {
           }
         }
       })
+    }
+
+    this.trackBefore("added", container)
+    this.trackBefore("updated", container, container)
+
+    liveSocket.time("morphdom", () => {
+      this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
+        inserts.forEach(([key, streamAt, limit]) => {
+          this.streamInserts[key] = {ref, streamAt, limit, reset}
+        })
+        if(reset !== undefined){
+          DOM.all(container, `[${PHX_STREAM_REF}="${ref}"]`, child => {
+            this.removeStreamChildElement(child)
+          })
+        }
+        deleteIds.forEach(id => {
+          let child = container.querySelector(`[id="${id}"]`)
+          if(child){ this.removeStreamChildElement(child) }
+        })
+      })
+
+      // clear stream items from the dead render if they are not inserted again
+      if(isJoinPatch){
+        DOM.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`, el => {
+          // make sure to only remove elements owned by the current view
+          // see https://github.com/phoenixframework/phoenix_live_view/issues/3047
+          this.liveSocket.owner(el, (view) => {
+            if(view === this.view){
+              Array.from(el.children).forEach(child => {
+                this.removeStreamChildElement(child)
+              })
+            }
+          })
+        })
+      }
+
+      morph.bind(this)(targetContainer, html)
     })
 
     if(liveSocket.isDebugEnabled()){ detectDuplicateIds() }
@@ -328,14 +333,14 @@ export default class DOMPatch {
   removeStreamChildElement(child){
     if(!this.maybePendingRemove(child)){
       if(this.streamInserts[child.id]){
-        // we need to store children so we can restore them later
-        // in case they are skipped
-        child.querySelectorAll(`[${PHX_MAGIC_ID}]`).forEach(el => {
-          this.streamComponentRestore[el.getAttribute(PHX_MAGIC_ID)] = el
-        })
+        // we need to store children so we can morph them later
+        this.streamComponentRestore[child.id] = child
+        child.remove()
+      } else {
+        child.remove()
+        // TODO: check if we really don't want to call discarded for re-added stream items
+        this.onNodeDiscarded(child)
       }
-      child.remove()
-      this.onNodeDiscarded(child)
     }
   }
 

package/assets/js/phoenix_live_view/rendered.js

@@ -167,6 +167,13 @@ export default class Rendered {
     let newc = diff[COMPONENTS]
     let cache = {}
     delete diff[COMPONENTS]
+    // we must consider all newly added components as reset for proper change tracking
+    if(newc){
+      let prevComponents = this.rendered[COMPONENTS] || {}
+      for(let cid in newc){
+        if(prevComponents[cid] === undefined){ newc[cid].reset = true }
+      }
+    }
     this.rendered = this.mutableMerge(this.rendered, diff)
     this.rendered[COMPONENTS] = this.rendered[COMPONENTS] || {}
 

package/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.20.5",
+  "version": "0.20.7",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "repository": {},

package/package.json

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

package/priv/static/phoenix_live_view.cjs.js

@@ -780,18 +780,7 @@ var DOM = {
         return;
       default:
         let timeout = parseInt(value);
-        let trigger = (blur) => {
-          if (blur) {
-            if (throttle && this.private(el, THROTTLED)) {
-              clearTimeout(this.private(el, THROTTLED));
-              this.deletePrivate(el, THROTTLED);
-            }
-            return callback();
-          }
-          if (throttle)
-            this.deletePrivate(el, THROTTLED);
-          callback();
-        };
+        let trigger = () => throttle ? this.deletePrivate(el, THROTTLED) : callback();
         let currentCycle = this.incCycle(el, DEBOUNCE_TRIGGER, trigger);
         if (isNaN(timeout)) {
           return logError(`invalid throttle/debounce value: ${value}`);
@@ -832,18 +821,21 @@ var DOM = {
           });
         }
         if (this.once(el, "bind-debounce")) {
-          el.addEventListener("blur", () => this.triggerCycle(el, DEBOUNCE_TRIGGER, null, [true]));
+          el.addEventListener("blur", () => {
+            clearTimeout(this.private(el, THROTTLED));
+            this.triggerCycle(el, DEBOUNCE_TRIGGER);
+          });
         }
     }
   },
-  triggerCycle(el, key, currentCycle, params = []) {
+  triggerCycle(el, key, currentCycle) {
     let [cycle, trigger] = this.private(el, key);
     if (!currentCycle) {
       currentCycle = cycle;
     }
     if (currentCycle === cycle) {
       this.incCycle(el, key);
-      trigger(...params);
+      trigger();
     }
   },
   once(el, key) {
@@ -2154,38 +2146,9 @@ var DOMPatch = class {
     let updates = [];
     let appendPrependUpdates = [];
     let externalFormTriggered = null;
-    this.trackBefore("added", container);
-    this.trackBefore("updated", container, container);
-    liveSocket.time("morphdom", () => {
-      this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
-        inserts.forEach(([key, streamAt, limit]) => {
-          this.streamInserts[key] = { ref, streamAt, limit, reset };
-        });
-        if (reset !== void 0) {
-          dom_default.all(container, `[${PHX_STREAM_REF}="${ref}"]`, (child) => {
-            this.removeStreamChildElement(child);
-          });
-        }
-        deleteIds.forEach((id) => {
-          let child = container.querySelector(`[id="${id}"]`);
-          if (child) {
-            this.removeStreamChildElement(child);
-          }
-        });
-      });
-      if (isJoinPatch) {
-        dom_default.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`, (el) => {
-          this.liveSocket.owner(el, (view2) => {
-            if (view2 === this.view) {
-              Array.from(el.children).forEach((child) => {
-                this.removeStreamChildElement(child);
-              });
-            }
-          });
-        });
-      }
-      morphdom_esm_default(targetContainer, html, {
-        childrenOnly: targetContainer.getAttribute(PHX_COMPONENT) === null,
+    function morph(targetContainer2, source) {
+      morphdom_esm_default(targetContainer2, source, {
+        childrenOnly: targetContainer2.getAttribute(PHX_COMPONENT) === null,
         getNodeKey: (node) => {
           if (dom_default.isPhxDestroyed(node)) {
             return null;
@@ -2204,12 +2167,6 @@ var DOMPatch = class {
             return parent.appendChild(child);
           }
           this.setStreamRef(child, ref);
-          child.querySelectorAll(`[${PHX_MAGIC_ID}][${PHX_SKIP}]`).forEach((el) => {
-            const component = this.streamComponentRestore[el.getAttribute(PHX_MAGIC_ID)];
-            if (component) {
-              el.replaceWith(component);
-            }
-          });
           if (streamAt === 0) {
             parent.insertAdjacentElement("afterbegin", child);
           } else if (streamAt === -1) {
@@ -2221,15 +2178,21 @@ var DOMPatch = class {
         },
         onBeforeNodeAdded: (el) => {
           dom_default.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom);
-          if (dom_default.isFeedbackContainer(el, phxFeedbackFor))
-            feedbackContainers.push(el);
           this.trackBefore("added", el);
-          return el;
+          let morphedEl = el;
+          if (!isJoinPatch && this.streamComponentRestore[el.id]) {
+            morphedEl = this.streamComponentRestore[el.id];
+            delete this.streamComponentRestore[el.id];
+            morph.bind(this)(morphedEl, el);
+          }
+          return morphedEl;
         },
         onNodeAdded: (el) => {
           if (el.getAttribute) {
             this.maybeReOrderStream(el, true);
           }
+          if (dom_default.isFeedbackContainer(el, phxFeedbackFor))
+            feedbackContainers.push(el);
           if (el instanceof HTMLImageElement && el.srcset) {
             el.srcset = el.srcset;
           } else if (el instanceof HTMLVideoElement && el.autoplay) {
@@ -2332,6 +2295,38 @@ var DOMPatch = class {
           }
         }
       });
+    }
+    this.trackBefore("added", container);
+    this.trackBefore("updated", container, container);
+    liveSocket.time("morphdom", () => {
+      this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
+        inserts.forEach(([key, streamAt, limit]) => {
+          this.streamInserts[key] = { ref, streamAt, limit, reset };
+        });
+        if (reset !== void 0) {
+          dom_default.all(container, `[${PHX_STREAM_REF}="${ref}"]`, (child) => {
+            this.removeStreamChildElement(child);
+          });
+        }
+        deleteIds.forEach((id) => {
+          let child = container.querySelector(`[id="${id}"]`);
+          if (child) {
+            this.removeStreamChildElement(child);
+          }
+        });
+      });
+      if (isJoinPatch) {
+        dom_default.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`, (el) => {
+          this.liveSocket.owner(el, (view2) => {
+            if (view2 === this.view) {
+              Array.from(el.children).forEach((child) => {
+                this.removeStreamChildElement(child);
+              });
+            }
+          });
+        });
+      }
+      morph.bind(this)(targetContainer, html);
     });
     if (liveSocket.isDebugEnabled()) {
       detectDuplicateIds();
@@ -2370,12 +2365,12 @@ var DOMPatch = class {
   removeStreamChildElement(child) {
     if (!this.maybePendingRemove(child)) {
       if (this.streamInserts[child.id]) {
-        child.querySelectorAll(`[${PHX_MAGIC_ID}]`).forEach((el) => {
-          this.streamComponentRestore[el.getAttribute(PHX_MAGIC_ID)] = el;
-        });
+        this.streamComponentRestore[child.id] = child;
+        child.remove();
+      } else {
+        child.remove();
+        this.onNodeDiscarded(child);
       }
-      child.remove();
-      this.onNodeDiscarded(child);
     }
   }
   getStreamInsert(el) {
@@ -2611,6 +2606,14 @@ var Rendered = class {
     let newc = diff[COMPONENTS];
     let cache = {};
     delete diff[COMPONENTS];
+    if (newc) {
+      let prevComponents = this.rendered[COMPONENTS] || {};
+      for (let cid in newc) {
+        if (prevComponents[cid] === void 0) {
+          newc[cid].reset = true;
+        }
+      }
+    }
     this.rendered = this.mutableMerge(this.rendered, diff);
     this.rendered[COMPONENTS] = this.rendered[COMPONENTS] || {};
     if (newc) {