phoenix_live_view 1.1.6 → 1.1.8

package/assets/js/phoenix_live_view/view.js

@@ -4,6 +4,7 @@ import {
   CONSECUTIVE_RELOADS,
   PHX_AUTO_RECOVER,
   PHX_COMPONENT,
+  PHX_VIEW_REF,
   PHX_CONNECTED_CLASS,
   PHX_DISABLE_WITH,
   PHX_DISABLE_WITH_RESTORE,
@@ -664,7 +665,10 @@ export default class View {
   afterElementsRemoved(elements, pruneCids) {
     const destroyedCIDs = [];
     elements.forEach((parent) => {
-      const components = DOM.all(parent, `[${PHX_COMPONENT}]`);
+      const components = DOM.all(
+        parent,
+        `[${PHX_VIEW_REF}="${this.id}"][${PHX_COMPONENT}]`,
+      );
       const hooks = DOM.all(
         parent,
         `[${this.binding(PHX_HOOK)}], [data-phx-hook]`,
@@ -674,7 +678,7 @@ export default class View {
         if (
           isCid(cid) &&
           destroyedCIDs.indexOf(cid) === -1 &&
-          this.ownsElement(el)
+          el.getAttribute(PHX_VIEW_REF) === this.id
         ) {
           destroyedCIDs.push(cid);
         }
@@ -828,12 +832,16 @@ export default class View {
     });
   }
 
-  update(diff, events) {
+  update(diff, events, isPending = false) {
     if (
       this.isJoinPending() ||
       (this.liveSocket.hasPendingLink() && this.root.isMain())
     ) {
-      return this.pendingDiffs.push({ diff, events });
+      // don't mutate if this is already a pending diff
+      if (!isPending) {
+        this.pendingDiffs.push({ diff, events });
+      }
+      return false;
     }
 
     this.rendered.mergeDiff(diff);
@@ -871,6 +879,8 @@ export default class View {
     if (phxChildrenAdded) {
       this.joinNewChildren();
     }
+
+    return true;
   }
 
   renderContainer(diff, kind) {
@@ -981,16 +991,12 @@ export default class View {
   }
 
   applyPendingUpdates() {
-    // prevent race conditions where we might still be pending a new
-    // navigation after applying the current one;
-    // if we call update and a pendingDiff is not applied, it would
-    // be silently dropped otherwise, as update would push it back to
-    // pendingDiffs, but we clear it immediately after
-    if (this.liveSocket.hasPendingLink() && this.root.isMain()) {
-      return;
-    }
-    this.pendingDiffs.forEach(({ diff, events }) => this.update(diff, events));
-    this.pendingDiffs = [];
+    // To prevent race conditions where we might still be pending a new
+    // navigation or the join is still pending, `this.update` returns false
+    // if the diff was not applied.
+    this.pendingDiffs = this.pendingDiffs.filter(
+      ({ diff, events }) => !this.update(diff, events, true),
+    );
     this.eachChild((child) => child.applyPendingUpdates());
   }
 

package/assets/js/types/view.d.ts

@@ -78,7 +78,7 @@ export default class View {
     isJoinPending(): boolean;
     ackJoin(_child: any): void;
     onAllChildJoinsComplete(): void;
-    update(diff: any, events: any): number;
+    update(diff: any, events: any, isPending?: boolean): boolean;
     renderContainer(diff: any, kind: any): any;
     componentPatch(diff: any, cid: any): boolean;
     getHook(el: any): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "type": "module",

package/priv/static/phoenix_live_view.cjs.js

@@ -4501,14 +4501,17 @@ var View = class _View {
   afterElementsRemoved(elements, pruneCids) {
     const destroyedCIDs = [];
     elements.forEach((parent) => {
-      const components = dom_default.all(parent, `[${PHX_COMPONENT}]`);
+      const components = dom_default.all(
+        parent,
+        `[${PHX_VIEW_REF}="${this.id}"][${PHX_COMPONENT}]`
+      );
       const hooks = dom_default.all(
         parent,
         `[${this.binding(PHX_HOOK)}], [data-phx-hook]`
       );
       components.concat(parent).forEach((el) => {
         const cid = this.componentID(el);
-        if (isCid(cid) && destroyedCIDs.indexOf(cid) === -1 && this.ownsElement(el)) {
+        if (isCid(cid) && destroyedCIDs.indexOf(cid) === -1 && el.getAttribute(PHX_VIEW_REF) === this.id) {
           destroyedCIDs.push(cid);
         }
       });
@@ -4616,9 +4619,12 @@ var View = class _View {
       this.pendingJoinOps = [];
     });
   }
-  update(diff, events) {
+  update(diff, events, isPending = false) {
     if (this.isJoinPending() || this.liveSocket.hasPendingLink() && this.root.isMain()) {
-      return this.pendingDiffs.push({ diff, events });
+      if (!isPending) {
+        this.pendingDiffs.push({ diff, events });
+      }
+      return false;
     }
     this.rendered.mergeDiff(diff);
     let phxChildrenAdded = false;
@@ -4648,6 +4654,7 @@ var View = class _View {
     if (phxChildrenAdded) {
       this.joinNewChildren();
     }
+    return true;
   }
   renderContainer(diff, kind) {
     return this.liveSocket.time(`toString diff (${kind})`, () => {
@@ -4726,11 +4733,9 @@ var View = class _View {
     delete this.viewHooks[hookId];
   }
   applyPendingUpdates() {
-    if (this.liveSocket.hasPendingLink() && this.root.isMain()) {
-      return;
-    }
-    this.pendingDiffs.forEach(({ diff, events }) => this.update(diff, events));
-    this.pendingDiffs = [];
+    this.pendingDiffs = this.pendingDiffs.filter(
+      ({ diff, events }) => !this.update(diff, events, true)
+    );
     this.eachChild((child) => child.applyPendingUpdates());
   }
   eachChild(callback) {
@@ -5785,7 +5790,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.1.6";
+    return "1.1.8";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";