phoenix_live_view 1.0.2 → 1.0.4

package/priv/static/phoenix_live_view.cjs.js

@@ -192,6 +192,16 @@ function detectDuplicateIds() {
     }
   }
 }
+function detectInvalidStreamInserts(inserts) {
+  const errors = /* @__PURE__ */ new Set();
+  Object.keys(inserts).forEach((id) => {
+    const streamEl = document.getElementById(id);
+    if (streamEl && streamEl.parentElement && streamEl.parentElement.getAttribute("phx-update") !== "stream") {
+      errors.add(`The stream container with id "${streamEl.parentElement.id}" is missing the phx-update="stream" attribute. Ensure it is set for streams to work properly.`);
+    }
+  });
+  errors.forEach((error) => console.error(error));
+}
 var debug = (view, kind, msg, obj) => {
   if (view.liveSocket.isDebugEnabled()) {
     console.log(`${view.id} ${kind}: ${msg} - `, obj);
@@ -418,7 +428,7 @@ var DOM = {
     cids.forEach((cid) => {
       this.filterWithinSameLiveView(this.all(node, `[${PHX_COMPONENT}="${cid}"]`), node).forEach((parent) => {
         parentCids.add(cid);
-        this.all(parent, `[${PHX_COMPONENT}]`).map((el) => parseInt(el.getAttribute(PHX_COMPONENT))).forEach((childCID) => childrenCids.add(childCID));
+        this.filterWithinSameLiveView(this.all(parent, `[${PHX_COMPONENT}]`), parent).map((el) => parseInt(el.getAttribute(PHX_COMPONENT))).forEach((childCID) => childrenCids.add(childCID));
       });
     });
     childrenCids.forEach((childCid) => parentCids.delete(childCid));
@@ -795,6 +805,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       return;
     }
     ops.forEach(([name, op, _stashed]) => this.putSticky(el, name, op));
+  },
+  isLocked(el) {
+    return el.hasAttribute && el.hasAttribute(PHX_REF_LOCK);
   }
 };
 var dom_default = DOM;
@@ -1137,11 +1150,27 @@ var Hooks = {
     mounted() {
       this.focusStart = this.el.firstElementChild;
       this.focusEnd = this.el.lastElementChild;
-      this.focusStart.addEventListener("focus", () => aria_default.focusLast(this.el));
-      this.focusEnd.addEventListener("focus", () => aria_default.focusFirst(this.el));
-      this.el.addEventListener("phx:show-end", () => this.el.focus());
-      if (window.getComputedStyle(this.el).display !== "none") {
-        aria_default.focusFirst(this.el);
+      this.focusStart.addEventListener("focus", (e) => {
+        if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {
+          const nextFocus = e.target.nextElementSibling;
+          aria_default.attemptFocus(nextFocus) || aria_default.focusFirst(nextFocus);
+        } else {
+          aria_default.focusLast(this.el);
+        }
+      });
+      this.focusEnd.addEventListener("focus", (e) => {
+        if (!e.relatedTarget || !this.el.contains(e.relatedTarget)) {
+          const nextFocus = e.target.previousElementSibling;
+          aria_default.attemptFocus(nextFocus) || aria_default.focusLast(nextFocus);
+        } else {
+          aria_default.focusFirst(this.el);
+        }
+      });
+      if (!this.el.contains(document.activeElement)) {
+        this.el.addEventListener("phx:show-end", () => this.el.focus());
+        if (window.getComputedStyle(this.el).display !== "none") {
+          aria_default.focusFirst(this.el);
+        }
       }
     }
   }
@@ -1287,6 +1316,16 @@ var hooks_default = Hooks;
 
 // js/phoenix_live_view/element_ref.js
 var ElementRef = class {
+  static onUnlock(el, callback) {
+    if (!dom_default.isLocked(el) && !el.closest(`[${PHX_REF_LOCK}]`)) {
+      return callback();
+    }
+    const closestLock = el.closest(`[${PHX_REF_LOCK}]`);
+    const ref = closestLock.closest(`[${PHX_REF_LOCK}]`).getAttribute(PHX_REF_LOCK);
+    closestLock.addEventListener(`phx:undo-lock:${ref}`, () => {
+      callback();
+    }, { once: true });
+  }
   constructor(el) {
     this.el = el;
     this.loadingRef = el.hasAttribute(PHX_REF_LOADING) ? parseInt(el.getAttribute(PHX_REF_LOADING), 10) : null;
@@ -1429,7 +1468,7 @@ var DOMPostMorphRestorer = class {
   }
 };
 
-// node_modules/morphdom/dist/morphdom-esm.js
+// ../node_modules/morphdom/dist/morphdom-esm.js
 var DOCUMENT_FRAGMENT_NODE = 11;
 function morphAttrs(fromNode, toNode) {
   var toNodeAttrs = toNode.attributes;
@@ -1938,37 +1977,7 @@ var morphdom_esm_default = morphdom;
 
 // js/phoenix_live_view/dom_patch.js
 var DOMPatch = class {
-  static patchWithClonedTree(container, clonedTree, liveSocket) {
-    let focused = liveSocket.getActiveElement();
-    let { selectionStart, selectionEnd } = focused && dom_default.hasSelectionRange(focused) ? focused : {};
-    let phxUpdate = liveSocket.binding(PHX_UPDATE);
-    let externalFormTriggered = null;
-    morphdom_esm_default(container, clonedTree, {
-      childrenOnly: false,
-      onBeforeElUpdated: (fromEl, toEl) => {
-        dom_default.syncPendingAttrs(fromEl, toEl);
-        if (!container.isSameNode(fromEl) && fromEl.hasAttribute(PHX_REF_LOCK)) {
-          return false;
-        }
-        if (dom_default.isIgnored(fromEl, phxUpdate)) {
-          return false;
-        }
-        if (focused && focused.isSameNode(fromEl) && dom_default.isFormInput(fromEl)) {
-          dom_default.mergeFocusedInput(fromEl, toEl);
-          return false;
-        }
-        if (dom_default.isNowTriggerFormExternal(toEl, liveSocket.binding(PHX_TRIGGER_ACTION))) {
-          externalFormTriggered = toEl;
-        }
-      }
-    });
-    if (externalFormTriggered) {
-      liveSocket.unload();
-      Object.getPrototypeOf(externalFormTriggered).submit.call(externalFormTriggered);
-    }
-    liveSocket.silenceEvents(() => dom_default.restoreFocus(focused, selectionStart, selectionEnd));
-  }
-  constructor(view, container, id, html, streams, targetCID) {
+  constructor(view, container, id, html, streams, targetCID, opts = {}) {
     this.view = view;
     this.liveSocket = view.liveSocket;
     this.container = container;
@@ -1993,6 +2002,8 @@ var DOMPatch = class {
       afterphxChildAdded: [],
       aftertransitionsDiscarded: []
     };
+    this.withChildren = opts.withChildren || opts.undoRef || false;
+    this.undoRef = opts.undoRef;
   }
   before(kind, callback) {
     this.callbacks[`before${kind}`].push(callback);
@@ -2027,7 +2038,7 @@ var DOMPatch = class {
     let updates = [];
     let appendPrependUpdates = [];
     let externalFormTriggered = null;
-    function morph(targetContainer2, source, withChildren = false) {
+    function morph(targetContainer2, source, withChildren = this.withChildren) {
       let morphCallbacks = {
         // normally, we are running with childrenOnly, as the patch HTML for a LV
         // does not include the LV attrs (data-phx-session, etc.)
@@ -2153,7 +2164,7 @@ var DOMPatch = class {
           }
           let isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
           let focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
-          if (fromEl.hasAttribute(PHX_REF_SRC)) {
+          if (fromEl.hasAttribute(PHX_REF_SRC) && fromEl.getAttribute(PHX_REF_LOCK) != this.undoRef) {
             if (dom_default.isUploadInput(fromEl)) {
               dom_default.mergeAttrs(fromEl, toEl, { isIgnored: true });
               this.trackBefore("updated", fromEl, toEl);
@@ -2237,6 +2248,7 @@ var DOMPatch = class {
     });
     if (liveSocket.isDebugEnabled()) {
       detectDuplicateIds();
+      detectInvalidStreamInserts(this.streamInserts);
       Array.from(document.querySelectorAll("input[name=id]")).forEach((node) => {
         if (node.form) {
           console.error('Detected an input with name="id" inside a form! This will cause problems when patching the DOM.\n', node);
@@ -2333,7 +2345,7 @@ var DOMPatch = class {
   transitionPendingRemoves() {
     let { pendingRemoves, liveSocket } = this;
     if (pendingRemoves.length > 0) {
-      liveSocket.transitionRemoves(pendingRemoves, false, () => {
+      liveSocket.transitionRemoves(pendingRemoves, () => {
         pendingRemoves.forEach((el) => {
           let child = dom_default.firstPhxChild(el);
           if (child) {
@@ -2793,10 +2805,10 @@ var JS = {
     view.liveSocket.pushHistoryPatch(e, href, replace ? "replace" : "push", sourceEl);
   },
   exec_focus(e, eventType, phxEvent, view, sourceEl, el) {
-    window.requestAnimationFrame(() => aria_default.attemptFocus(el));
+    aria_default.attemptFocus(el);
   },
   exec_focus_first(e, eventType, phxEvent, view, sourceEl, el) {
-    window.requestAnimationFrame(() => aria_default.focusFirstInteractive(el) || aria_default.focusFirst(el));
+    aria_default.focusFirstInteractive(el) || aria_default.focusFirst(el);
   },
   exec_push_focus(e, eventType, phxEvent, view, sourceEl, el) {
     window.requestAnimationFrame(() => focusStack.push(el || sourceEl));
@@ -2902,18 +2914,14 @@ var JS = {
       }
     } else {
       if (this.isVisible(el)) {
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:hide-start"));
-          dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = "none");
-          el.dispatchEvent(new Event("phx:hide-end"));
-        });
+        el.dispatchEvent(new Event("phx:hide-start"));
+        dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = "none");
+        el.dispatchEvent(new Event("phx:hide-end"));
       } else {
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:show-start"));
-          let stickyDisplay = display || this.defaultDisplay(el);
-          dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = stickyDisplay);
-          el.dispatchEvent(new Event("phx:show-end"));
-        });
+        el.dispatchEvent(new Event("phx:show-start"));
+        let stickyDisplay = display || this.defaultDisplay(el);
+        dom_default.putSticky(el, "toggle", (currentEl) => currentEl.style.display = stickyDisplay);
+        el.dispatchEvent(new Event("phx:show-end"));
       }
     }
   },
@@ -3571,7 +3579,11 @@ var View = class _View {
       this.formsForRecovery = this.getFormsForRecovery();
     }
     if (this.isMain() && window.history.state === null) {
-      this.liveSocket.replaceRootHistory();
+      browser_default.pushState("replace", {
+        type: "patch",
+        id: this.id,
+        position: this.liveSocket.currentHistoryPosition
+      });
     }
     if (liveview_version !== this.liveSocket.version()) {
       console.error(`LiveView asset version mismatch. JavaScript version ${this.liveSocket.version()} vs. server ${liveview_version}. To avoid issues, please ensure that your assets use the same version as the server.`);
@@ -3893,6 +3905,9 @@ var View = class _View {
   }
   addHook(el) {
     let hookElId = ViewHook.elementID(el);
+    if (el.getAttribute && !this.ownsElement(el)) {
+      return;
+    }
     if (hookElId && !this.viewHooks[hookElId]) {
       let hook = dom_default.getCustomElHook(el) || logError(`no hook found for custom element: ${el.id}`);
       this.viewHooks[hookElId] = hook;
@@ -3902,9 +3917,6 @@ var View = class _View {
       return;
     } else {
       let hookName = el.getAttribute(`data-phx-${PHX_HOOK}`) || el.getAttribute(this.binding(PHX_HOOK));
-      if (hookName && !this.ownsElement(el)) {
-        return;
-      }
       let callbacks = this.liveSocket.getHookCallbacks(hookName);
       if (callbacks) {
         if (!el.id) {
@@ -3919,9 +3931,10 @@ var View = class _View {
     }
   }
   destroyHook(hook) {
+    const hookId = ViewHook.elementID(hook.el);
     hook.__destroyed();
     hook.__cleanup__();
-    delete this.viewHooks[ViewHook.elementID(hook.el)];
+    delete this.viewHooks[hookId];
   }
   applyPendingUpdates() {
     this.pendingDiffs.forEach(({ diff, events }) => this.update(diff, events));
@@ -4171,12 +4184,11 @@ var View = class _View {
   undoElRef(el, ref, phxEvent) {
     let elRef = new ElementRef(el);
     elRef.maybeUndo(ref, phxEvent, (clonedTree) => {
-      let hook = this.triggerBeforeUpdateHook(el, clonedTree);
-      DOMPatch.patchWithClonedTree(el, clonedTree, this.liveSocket);
+      let patch = new DOMPatch(this, el, this.id, clonedTree, [], null, { undoRef: ref });
+      const phxChildrenAdded = this.performPatch(patch, true);
       dom_default.all(el, `[${PHX_REF_SRC}="${this.refSrc()}"]`, (child) => this.undoElRef(child, ref, phxEvent));
-      this.execNewMounted(el);
-      if (hook) {
-        hook.__updated();
+      if (phxChildrenAdded) {
+        this.joinNewChildren();
       }
     });
   }
@@ -4392,15 +4404,17 @@ var View = class _View {
     };
     this.pushWithReply(refGenerator, "event", event).then(({ resp }) => {
       if (dom_default.isUploadInput(inputEl) && dom_default.isAutoUpload(inputEl)) {
-        if (LiveUploader.filesAwaitingPreflight(inputEl).length > 0) {
-          let [ref, _els] = refGenerator();
-          this.undoRefs(ref, phxEvent, [inputEl.form]);
-          this.uploadFiles(inputEl.form, phxEvent, targetCtx, ref, cid, (_uploads) => {
-            callback && callback(resp);
-            this.triggerAwaitingSubmit(inputEl.form, phxEvent);
-            this.undoRefs(ref, phxEvent);
-          });
-        }
+        ElementRef.onUnlock(inputEl, () => {
+          if (LiveUploader.filesAwaitingPreflight(inputEl).length > 0) {
+            let [ref, _els] = refGenerator();
+            this.undoRefs(ref, phxEvent, [inputEl.form]);
+            this.uploadFiles(inputEl.form, phxEvent, targetCtx, ref, cid, (_uploads) => {
+              callback && callback(resp);
+              this.triggerAwaitingSubmit(inputEl.form, phxEvent);
+              this.undoRefs(ref, phxEvent);
+            });
+          }
+        });
       } else {
         callback && callback(resp);
       }
@@ -4751,7 +4765,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.0.2";
+    return "1.0.4";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
@@ -4948,7 +4962,9 @@ var LiveSocket = class {
     dom_default.all(document, `${PHX_VIEW_SELECTOR}:not([${PHX_PARENT_ID}])`, (rootEl) => {
       if (!this.getRootById(rootEl.id)) {
         let view = this.newRootView(rootEl);
-        view.setHref(this.getHref());
+        if (!dom_default.isPhxSticky(rootEl)) {
+          view.setHref(this.getHref());
+        }
         view.join();
         if (rootEl.hasAttribute(PHX_MAIN)) {
           this.main = view;
@@ -4966,20 +4982,21 @@ var LiveSocket = class {
     browser_default.redirect(to, flash);
   }
   replaceMain(href, flash, callback = null, linkRef = this.setPendingLink(href)) {
-    let liveReferer = this.currentLocation.href;
+    const liveReferer = this.currentLocation.href;
     this.outgoingMainEl = this.outgoingMainEl || this.main.el;
-    let removeEls = dom_default.all(this.outgoingMainEl, `[${this.binding("remove")}]`);
-    let newMainEl = dom_default.cloneNode(this.outgoingMainEl, "");
+    const stickies = dom_default.findPhxSticky(document) || [];
+    const removeEls = dom_default.all(this.outgoingMainEl, `[${this.binding("remove")}]`).filter((el) => !dom_default.isChildOfAny(el, stickies));
+    const newMainEl = dom_default.cloneNode(this.outgoingMainEl, "");
     this.main.showLoader(this.loaderTimeout);
     this.main.destroy();
     this.main = this.newRootView(newMainEl, flash, liveReferer);
     this.main.setRedirect(href);
-    this.transitionRemoves(removeEls, true);
+    this.transitionRemoves(removeEls);
     this.main.join((joinCount, onDone) => {
       if (joinCount === 1 && this.commitPendingLink(linkRef)) {
         this.requestDOMUpdate(() => {
           removeEls.forEach((el) => el.remove());
-          dom_default.findPhxSticky(document).forEach((el) => newMainEl.appendChild(el));
+          stickies.forEach((el) => newMainEl.appendChild(el));
           this.outgoingMainEl.replaceWith(newMainEl);
           this.outgoingMainEl = null;
           callback && callback(linkRef);
@@ -4988,12 +5005,8 @@ var LiveSocket = class {
       }
     });
   }
-  transitionRemoves(elements, skipSticky, callback) {
+  transitionRemoves(elements, callback) {
     let removeAttr = this.binding("remove");
-    if (skipSticky) {
-      const stickies = dom_default.findPhxSticky(document) || [];
-      elements = elements.filter((el) => !dom_default.isChildOfAny(el, stickies));
-    }
     let silenceEvents = (e) => {
       e.preventDefault();
       e.stopImmediatePropagation();
@@ -5262,7 +5275,7 @@ var LiveSocket = class {
       if (!this.registerNewLocation(window.location)) {
         return;
       }
-      let { type, backType, id, root, scroll, position } = event.state || {};
+      let { type, backType, id, scroll, position } = event.state || {};
       let href = window.location.href;
       let isForward = position > this.currentHistoryPosition;
       type = isForward ? type : backType || type;
@@ -5270,17 +5283,13 @@ var LiveSocket = class {
       this.sessionStorage.setItem(PHX_LV_HISTORY_POSITION, this.currentHistoryPosition.toString());
       dom_default.dispatchEvent(window, "phx:navigate", { detail: { href, patch: type === "patch", pop: true, direction: isForward ? "forward" : "backward" } });
       this.requestDOMUpdate(() => {
+        const callback = () => {
+          this.maybeScroll(scroll);
+        };
         if (this.main.isConnected() && (type === "patch" && id === this.main.id)) {
-          this.main.pushLinkPatch(event, href, null, () => {
-            this.maybeScroll(scroll);
-          });
+          this.main.pushLinkPatch(event, href, null, callback);
         } else {
-          this.replaceMain(href, null, () => {
-            if (root) {
-              this.replaceRootHistory();
-            }
-            this.maybeScroll(scroll);
-          });
+          this.replaceMain(href, null, callback);
         }
       });
     }, false);
@@ -5357,7 +5366,8 @@ var LiveSocket = class {
     this.registerNewLocation(window.location);
   }
   historyRedirect(e, href, linkState, flash, targetEl) {
-    if (targetEl && e.isTrusted && e.type !== "popstate") {
+    const clickLoading = targetEl && e.isTrusted && e.type !== "popstate";
+    if (clickLoading) {
       targetEl.classList.add("phx-click-loading");
     }
     if (!this.isConnected() || !this.main.isMain()) {
@@ -5383,19 +5393,13 @@ var LiveSocket = class {
           dom_default.dispatchEvent(window, "phx:navigate", { detail: { href, patch: false, pop: false, direction: "forward" } });
           this.registerNewLocation(window.location);
         }
+        if (clickLoading) {
+          targetEl.classList.remove("phx-click-loading");
+        }
         done();
       });
     });
   }
-  replaceRootHistory() {
-    browser_default.pushState("replace", {
-      root: true,
-      type: "patch",
-      id: this.main.id,
-      position: this.currentHistoryPosition
-      // Preserve current position
-    });
-  }
   registerNewLocation(newLocation) {
     let { pathname, search } = this.currentLocation;
     if (pathname + search === newLocation.pathname + newLocation.search) {