phoenix_live_view 0.20.0 → 0.20.2

package/priv/static/phoenix_live_view.js

@@ -69,6 +69,7 @@ var LiveView = (() => {
   var PHX_ACTIVE_ENTRY_REFS = "data-phx-active-refs";
   var PHX_LIVE_FILE_UPDATED = "phx:live-file:updated";
   var PHX_SKIP = "data-phx-skip";
+  var PHX_MAGIC_ID = "data-phx-id";
   var PHX_PRUNE = "data-phx-prune";
   var PHX_PAGE_LOADING = "page-loading";
   var PHX_CONNECTED_CLASS = "phx-connected";
@@ -123,6 +124,7 @@ var LiveView = (() => {
   };
   var DYNAMICS = "d";
   var STATIC = "s";
+  var ROOT = "r";
   var COMPONENTS = "c";
   var EVENTS = "e";
   var REPLY = "r";
@@ -145,6 +147,7 @@ var LiveView = (() => {
       if (this.errored) {
         return;
       }
+      this.uploadChannel.leave();
       this.errored = true;
       clearTimeout(this.chunkTimer);
       this.entry.error(reason);
@@ -564,12 +567,17 @@ var LiveView = (() => {
         el.setAttribute("data-phx-hook", "Phoenix.InfiniteScroll");
       }
     },
-    maybeHideFeedback(container, input, phxFeedbackFor) {
-      if (!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))) {
-        let feedbacks = [input.name];
-        if (input.name.endsWith("[]")) {
-          feedbacks.push(input.name.slice(0, -2));
+    maybeHideFeedback(container, inputs, phxFeedbackFor) {
+      let feedbacks = [];
+      inputs.forEach((input) => {
+        if (!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))) {
+          feedbacks.push(input.name);
+          if (input.name.endsWith("[]")) {
+            feedbacks.push(input.name.slice(0, -2));
+          }
         }
+      });
+      if (feedbacks.length > 0) {
         let selector = feedbacks.map((f) => `[${phxFeedbackFor}="${f}"]`).join(", ");
         DOM.all(container, selector, (el) => el.classList.add(PHX_NO_FEEDBACK_CLASS));
       }
@@ -856,7 +864,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         relative_path: this.file.webkitRelativePath,
         size: this.file.size,
         type: this.file.type,
-        ref: this.ref
+        ref: this.ref,
+        meta: typeof this.file.meta === "function" ? this.file.meta() : void 0
       };
     }
     uploader(uploaders) {
@@ -913,6 +922,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         entry.relative_path = file.webkitRelativePath;
         entry.type = file.type;
         entry.size = file.size;
+        if (typeof file.meta === "function") {
+          entry.meta = file.meta();
+        }
         fileData[uploadRef].push(entry);
       });
       return fileData;
@@ -1002,7 +1014,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       return classes.find((name) => instance instanceof name);
     },
     isFocusable(el, interactiveOnly) {
-      return el instanceof HTMLAnchorElement && el.rel !== "ignore" || el instanceof HTMLAreaElement && el.href !== void 0 || !el.disabled && this.anyOf(el, [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, HTMLButtonElement]) || el instanceof HTMLIFrameElement || (el.tabIndex > 0 || !interactiveOnly && el.tabIndex === 0 && el.getAttribute("tabindex") !== null && el.getAttribute("aria-hidden") !== "true");
+      return el instanceof HTMLAnchorElement && el.rel !== "ignore" || el instanceof HTMLAreaElement && el.href !== void 0 || !el.disabled && this.anyOf(el, [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, HTMLButtonElement]) || el instanceof HTMLIFrameElement || (el.tabIndex > 0 || !interactiveOnly && el.getAttribute("tabindex") !== null && el.getAttribute("aria-hidden") !== "true");
     },
     attemptFocus(el, interactiveOnly) {
       if (this.isFocusable(el, interactiveOnly)) {
@@ -1578,7 +1590,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       }
       function morphChildren(fromEl, toEl) {
-        var skipFrom = skipFromChildren(fromEl);
+        var skipFrom = skipFromChildren(fromEl, toEl);
         var curToNodeChild = toEl.firstChild;
         var curFromNodeChild = fromEl.firstChild;
         var curToNodeKey;
@@ -1781,7 +1793,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         el.setAttribute(PHX_PRUNE, "");
       });
     }
-    perform() {
+    perform(isJoinPatch) {
       let { view, liveSocket, container, html } = this;
       let targetContainer = this.isCIDPatch() ? this.targetCIDContainer(html) : container;
       if (this.isCIDPatch() && !targetContainer) {
@@ -1800,19 +1812,18 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       let updates = [];
       let appendPrependUpdates = [];
       let externalFormTriggered = null;
-      let diffHTML = liveSocket.time("premorph container prep", () => {
-        return this.buildDiffHTML(container, html, phxUpdate, targetContainer);
-      });
       this.trackBefore("added", container);
       this.trackBefore("updated", container, container);
       liveSocket.time("morphdom", () => {
         this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
           Object.entries(inserts).forEach(([key, [streamAt, limit]]) => {
-            this.streamInserts[key] = { ref, streamAt, limit };
+            this.streamInserts[key] = { ref, streamAt, limit, resetKept: false };
           });
           if (reset !== void 0) {
             dom_default.all(container, `[${PHX_STREAM_REF}="${ref}"]`, (child) => {
-              if (!inserts[child.id]) {
+              if (inserts[child.id]) {
+                this.streamInserts[child.id].resetKept = true;
+              } else {
                 this.removeStreamChildElement(child);
               }
             });
@@ -1824,10 +1835,16 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             }
           });
         });
-        morphdom_esm_default(targetContainer, diffHTML, {
+        morphdom_esm_default(targetContainer, html, {
           childrenOnly: targetContainer.getAttribute(PHX_COMPONENT) === null,
           getNodeKey: (node) => {
-            return dom_default.isPhxDestroyed(node) ? null : node.id;
+            if (dom_default.isPhxDestroyed(node)) {
+              return null;
+            }
+            if (isJoinPatch) {
+              return node.id;
+            }
+            return node.id || node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
           },
           skipFromChildren: (from) => {
             return from.getAttribute(phxUpdate) === PHX_STREAM;
@@ -1884,6 +1901,25 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             }
             added.push(el);
           },
+          onBeforeElChildrenUpdated: (fromEl, toEl) => {
+            if (fromEl.getAttribute(phxUpdate) === PHX_STREAM) {
+              let toIds = Array.from(toEl.children).map((child) => child.id);
+              Array.from(fromEl.children).filter((child) => {
+                let { resetKept } = this.getStreamInsert(child);
+                return resetKept;
+              }).sort((a, b) => {
+                let aIdx = toIds.indexOf(a.id);
+                let bIdx = toIds.indexOf(b.id);
+                if (aIdx === bIdx) {
+                  return 0;
+                } else if (aIdx < bIdx) {
+                  return -1;
+                } else {
+                  return 1;
+                }
+              }).forEach((child) => fromEl.appendChild(child));
+            }
+          },
           onNodeDiscarded: (el) => this.onNodeDiscarded(el),
           onBeforeNodeDiscarded: (el) => {
             if (el.getAttribute && el.getAttribute(PHX_PRUNE) !== null) {
@@ -1977,9 +2013,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           appendPrependUpdates.forEach((update) => update.perform());
         });
       }
-      trackedInputs.forEach((input) => {
-        dom_default.maybeHideFeedback(targetContainer, input, phxFeedbackFor);
-      });
+      dom_default.maybeHideFeedback(targetContainer, trackedInputs, phxFeedbackFor);
       liveSocket.silenceEvents(() => dom_default.restoreFocus(focused, selectionStart, selectionEnd));
       dom_default.dispatchEvent(document, "phx:update");
       added.forEach((el) => this.trackAfter("added", el));
@@ -2058,7 +2092,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       return this.cidPatch;
     }
     skipCIDSibling(el) {
-      return el.nodeType === Node.ELEMENT_NODE && el.getAttribute(PHX_SKIP) !== null;
+      return el.nodeType === Node.ELEMENT_NODE && el.hasAttribute(PHX_SKIP);
     }
     targetCIDContainer(html) {
       if (!this.isCIDPatch()) {
@@ -2071,35 +2105,125 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         return first && first.parentNode;
       }
     }
-    buildDiffHTML(container, html, phxUpdate, targetContainer) {
-      let isCIDPatch = this.isCIDPatch();
-      let isCIDWithSingleRoot = isCIDPatch && targetContainer.getAttribute(PHX_COMPONENT) === this.targetCID.toString();
-      if (!isCIDPatch || isCIDWithSingleRoot) {
-        return html;
-      } else {
-        let diffContainer = null;
-        let template = document.createElement("template");
-        diffContainer = dom_default.cloneNode(targetContainer);
-        let [firstComponent, ...rest] = dom_default.findComponentNodeList(diffContainer, this.targetCID);
-        template.innerHTML = html;
-        rest.forEach((el) => el.remove());
-        Array.from(diffContainer.childNodes).forEach((child) => {
-          if (child.id && child.nodeType === Node.ELEMENT_NODE && child.getAttribute(PHX_COMPONENT) !== this.targetCID.toString()) {
-            child.setAttribute(PHX_SKIP, "");
-            child.innerHTML = "";
-          }
-        });
-        Array.from(template.content.childNodes).forEach((el) => diffContainer.insertBefore(el, firstComponent));
-        firstComponent.remove();
-        return diffContainer.outerHTML;
-      }
-    }
     indexOf(parent, child) {
       return Array.from(parent.children).indexOf(child);
     }
   };
 
   // js/phoenix_live_view/rendered.js
+  var VOID_TAGS = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "command",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "keygen",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  var endingTagNameChars = new Set([">", "/", " ", "\n", "	", "\r"]);
+  var quoteChars = new Set(["'", '"']);
+  var modifyRoot = (html, attrs, clearInnerHTML) => {
+    let i = 0;
+    let insideComment = false;
+    let beforeTag, afterTag, tag, tagNameEndsAt, id, newHTML;
+    while (i < html.length) {
+      let char = html.charAt(i);
+      if (insideComment) {
+        if (char === "-" && html.slice(i, i + 3) === "-->") {
+          insideComment = false;
+          i += 3;
+        } else {
+          i++;
+        }
+      } else if (char === "<" && html.slice(i, i + 4) === "<!--") {
+        insideComment = true;
+        i += 4;
+      } else if (char === "<") {
+        beforeTag = html.slice(0, i);
+        let iAtOpen = i;
+        i++;
+        for (i; i < html.length; i++) {
+          if (endingTagNameChars.has(html.charAt(i))) {
+            break;
+          }
+        }
+        tagNameEndsAt = i;
+        tag = html.slice(iAtOpen + 1, tagNameEndsAt);
+        for (i; i < html.length; i++) {
+          if (html.charAt(i) === ">") {
+            break;
+          }
+          if (html.charAt(i) === "=") {
+            let isId = html.slice(i - 3, i) === " id";
+            i++;
+            let char2 = html.charAt(i);
+            if (quoteChars.has(char2)) {
+              let attrStartsAt = i;
+              i++;
+              for (i; i < html.length; i++) {
+                if (html.charAt(i) === char2) {
+                  break;
+                }
+              }
+              if (isId) {
+                id = html.slice(attrStartsAt + 1, i);
+                break;
+              }
+            }
+          }
+        }
+        break;
+      } else {
+        i++;
+      }
+    }
+    if (!tag) {
+      throw new Error(`malformed html ${html}`);
+    }
+    let closeAt = html.length - 1;
+    insideComment = false;
+    while (closeAt >= beforeTag.length + tag.length) {
+      let char = html.charAt(closeAt);
+      if (insideComment) {
+        if (char === "-" && html.slice(closeAt - 3, closeAt) === "<!-") {
+          insideComment = false;
+          closeAt -= 4;
+        } else {
+          closeAt -= 1;
+        }
+      } else if (char === ">" && html.slice(closeAt - 2, closeAt) === "--") {
+        insideComment = true;
+        closeAt -= 3;
+      } else if (char === ">") {
+        break;
+      } else {
+        closeAt -= 1;
+      }
+    }
+    afterTag = html.slice(closeAt + 1, html.length);
+    let attrsStr = Object.keys(attrs).map((attr) => attrs[attr] === true ? attr : `${attr}="${attrs[attr]}"`).join(" ");
+    if (clearInnerHTML) {
+      let idAttrStr = id ? ` id="${id}"` : "";
+      if (VOID_TAGS.has(tag)) {
+        newHTML = `<${tag}${idAttrStr}${attrsStr === "" ? "" : " "}${attrsStr}/>`;
+      } else {
+        newHTML = `<${tag}${idAttrStr}${attrsStr === "" ? "" : " "}${attrsStr}></${tag}>`;
+      }
+    } else {
+      let rest = html.slice(tagNameEndsAt, closeAt + 1);
+      newHTML = `<${tag}${attrsStr === "" ? "" : " "}${attrsStr}${rest}`;
+    }
+    return [newHTML, beforeTag, afterTag];
+  };
   var Rendered = class {
     static extract(diff) {
       let { [REPLY]: reply, [EVENTS]: events, [TITLE]: title } = diff;
@@ -2111,19 +2235,20 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     constructor(viewId, rendered) {
       this.viewId = viewId;
       this.rendered = {};
+      this.magicId = 0;
       this.mergeDiff(rendered);
     }
     parentViewId() {
       return this.viewId;
     }
     toString(onlyCids) {
-      let [str, streams] = this.recursiveToString(this.rendered, this.rendered[COMPONENTS], onlyCids);
+      let [str, streams] = this.recursiveToString(this.rendered, this.rendered[COMPONENTS], onlyCids, true, {});
       return [str, streams];
     }
-    recursiveToString(rendered, components = rendered[COMPONENTS], onlyCids) {
+    recursiveToString(rendered, components = rendered[COMPONENTS], onlyCids, changeTracking, rootAttrs) {
       onlyCids = onlyCids ? new Set(onlyCids) : null;
       let output = { buffer: "", components, onlyCids, streams: new Set() };
-      this.toOutputBuffer(rendered, null, output);
+      this.toOutputBuffer(rendered, null, output, changeTracking, rootAttrs);
       return [output.buffer, output.streams];
     }
     componentCIDs(diff) {
@@ -2168,10 +2293,10 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             tdiff = oldc[-scid];
           }
           stat = tdiff[STATIC];
-          ndiff = this.cloneMerge(tdiff, cdiff);
+          ndiff = this.cloneMerge(tdiff, cdiff, true);
           ndiff[STATIC] = stat;
         } else {
-          ndiff = cdiff[STATIC] !== void 0 ? cdiff : this.cloneMerge(oldc[cid] || {}, cdiff);
+          ndiff = cdiff[STATIC] !== void 0 || oldc[cid] === void 0 ? cdiff : this.cloneMerge(oldc[cid], cdiff, false);
         }
         cache[cid] = ndiff;
         return ndiff;
@@ -2196,21 +2321,31 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           target[key] = val;
         }
       }
+      if (target[ROOT]) {
+        target.newRender = true;
+      }
     }
-    cloneMerge(target, source) {
+    cloneMerge(target, source, pruneMagicId) {
       let merged = __spreadValues(__spreadValues({}, target), source);
       for (let key in merged) {
         let val = source[key];
         let targetVal = target[key];
         if (isObject(val) && val[STATIC] === void 0 && isObject(targetVal)) {
-          merged[key] = this.cloneMerge(targetVal, val);
+          merged[key] = this.cloneMerge(targetVal, val, pruneMagicId);
         }
       }
+      if (pruneMagicId) {
+        delete merged.magicId;
+        delete merged.newRender;
+      } else if (target[ROOT]) {
+        merged.newRender = true;
+      }
       return merged;
     }
     componentToString(cid) {
-      let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid, null, false);
-      return [str, streams];
+      let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid, null);
+      let [strippedHTML, _before, _after] = modifyRoot(str, {});
+      return [strippedHTML, streams];
     }
     pruneCIDs(cids) {
       cids.forEach((cid) => delete this.rendered[COMPONENTS][cid]);
@@ -2228,17 +2363,46 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         return part;
       }
     }
-    toOutputBuffer(rendered, templates, output) {
+    nextMagicID() {
+      this.magicId++;
+      return `${this.parentViewId()}-${this.magicId}`;
+    }
+    toOutputBuffer(rendered, templates, output, changeTracking, rootAttrs = {}) {
       if (rendered[DYNAMICS]) {
         return this.comprehensionToBuffer(rendered, templates, output);
       }
       let { [STATIC]: statics } = rendered;
       statics = this.templateStatic(statics, templates);
+      let isRoot = rendered[ROOT];
+      let prevBuffer = output.buffer;
+      if (isRoot) {
+        output.buffer = "";
+      }
+      if (changeTracking && isRoot && !rendered.magicId) {
+        rendered.newRender = true;
+        rendered.magicId = this.nextMagicID();
+      }
       output.buffer += statics[0];
       for (let i = 1; i < statics.length; i++) {
-        this.dynamicToBuffer(rendered[i - 1], templates, output);
+        this.dynamicToBuffer(rendered[i - 1], templates, output, changeTracking);
         output.buffer += statics[i];
       }
+      if (isRoot) {
+        let skip = false;
+        let attrs;
+        if (changeTracking || Object.keys(rootAttrs).length > 0) {
+          skip = !rendered.newRender;
+          attrs = __spreadValues({ [PHX_MAGIC_ID]: rendered.magicId }, rootAttrs);
+        } else {
+          attrs = rootAttrs;
+        }
+        if (skip) {
+          attrs[PHX_SKIP] = true;
+        }
+        let [newRoot, commentBefore, commentAfter] = modifyRoot(output.buffer, attrs, skip);
+        rendered.newRender = false;
+        output.buffer = prevBuffer + commentBefore + newRoot + commentAfter;
+      }
     }
     comprehensionToBuffer(rendered, templates, output) {
       let { [DYNAMICS]: dynamics, [STATIC]: statics, [STREAM]: stream } = rendered;
@@ -2249,7 +2413,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         let dynamic = dynamics[d];
         output.buffer += statics[0];
         for (let i = 1; i < statics.length; i++) {
-          this.dynamicToBuffer(dynamic[i - 1], compTemplates, output);
+          let changeTracking = false;
+          this.dynamicToBuffer(dynamic[i - 1], compTemplates, output, changeTracking);
           output.buffer += statics[i];
         }
       }
@@ -2259,74 +2424,26 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         output.streams.add(stream);
       }
     }
-    dynamicToBuffer(rendered, templates, output) {
+    dynamicToBuffer(rendered, templates, output, changeTracking) {
       if (typeof rendered === "number") {
         let [str, streams] = this.recursiveCIDToString(output.components, rendered, output.onlyCids);
         output.buffer += str;
         output.streams = new Set([...output.streams, ...streams]);
       } else if (isObject(rendered)) {
-        this.toOutputBuffer(rendered, templates, output);
+        this.toOutputBuffer(rendered, templates, output, changeTracking, {});
       } else {
         output.buffer += rendered;
       }
     }
-    recursiveCIDToString(components, cid, onlyCids, allowRootComments = true) {
+    recursiveCIDToString(components, cid, onlyCids) {
       let component = components[cid] || logError(`no component for CID ${cid}`, components);
-      let template = document.createElement("template");
-      let [html, streams] = this.recursiveToString(component, components, onlyCids);
-      template.innerHTML = html;
-      let container = template.content;
+      let attrs = { [PHX_COMPONENT]: cid };
       let skip = onlyCids && !onlyCids.has(cid);
-      let [hasChildNodes, hasChildComponents] = Array.from(container.childNodes).reduce(([hasNodes, hasComponents], child, i) => {
-        if (child.nodeType === Node.ELEMENT_NODE) {
-          if (child.getAttribute(PHX_COMPONENT)) {
-            return [hasNodes, true];
-          }
-          child.setAttribute(PHX_COMPONENT, cid);
-          if (!child.id) {
-            child.id = `${this.parentViewId()}-${cid}-${i}`;
-          }
-          if (skip) {
-            child.setAttribute(PHX_SKIP, "");
-            child.innerHTML = "";
-          }
-          return [true, hasComponents];
-        } else if (child.nodeType === Node.COMMENT_NODE) {
-          if (!allowRootComments) {
-            child.remove();
-          }
-          return [hasNodes, hasComponents];
-        } else {
-          if (child.nodeValue.trim() !== "") {
-            logError(`only HTML element tags are allowed at the root of components.
-
-got: "${child.nodeValue.trim()}"
-
-within:
-`, template.innerHTML.trim());
-            child.replaceWith(this.createSpan(child.nodeValue, cid));
-            return [true, hasComponents];
-          } else {
-            child.remove();
-            return [hasNodes, hasComponents];
-          }
-        }
-      }, [false, false]);
-      if (!hasChildNodes && !hasChildComponents) {
-        logError("expected at least one HTML element tag inside a component, but the component is empty:\n", template.innerHTML.trim());
-        return [this.createSpan("", cid).outerHTML, streams];
-      } else if (!hasChildNodes && hasChildComponents) {
-        logError("expected at least one HTML element tag directly inside a component, but only subcomponents were found. A component must render at least one HTML tag directly inside itself.", template.innerHTML.trim());
-        return [template.innerHTML, streams];
-      } else {
-        return [template.innerHTML, streams];
-      }
-    }
-    createSpan(text, cid) {
-      let span = document.createElement("span");
-      span.innerText = text;
-      span.setAttribute(PHX_COMPONENT, cid);
-      return span;
+      component.newRender = !skip;
+      component.magicId = `${this.parentViewId()}-c-${cid}`;
+      let changeTracking = true;
+      let [html, streams] = this.recursiveToString(component, components, onlyCids, changeTracking, attrs);
+      return [html, streams];
     }
   };
 
@@ -2395,10 +2512,12 @@ within:
       this.__listeners.delete(callbackRef);
     }
     upload(name, files) {
-      return this.__view.dispatchUploads(name, files);
+      return this.__view.dispatchUploads(null, name, files);
     }
     uploadTo(phxTarget, name, files) {
-      return this.__view.withinTargets(phxTarget, (view) => view.dispatchUploads(name, files));
+      return this.__view.withinTargets(phxTarget, (view, targetCtx) => {
+        view.dispatchUploads(targetCtx, name, files);
+      });
     }
     __cleanup__() {
       this.__listeners.forEach((callbackRef) => this.removeHandleEvent(callbackRef));
@@ -2424,6 +2543,10 @@ within:
     isVisible(el) {
       return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length > 0);
     },
+    isInViewport(el) {
+      const rect = el.getBoundingClientRect();
+      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+    },
     exec_exec(eventType, phxEvent, view, sourceEl, el, [attr, to]) {
       let nodes = to ? dom_default.all(document, to) : [sourceEl];
       nodes.forEach((node) => {
@@ -2682,9 +2805,10 @@ within:
       this.children = this.parent ? null : {};
       this.root.children[this.id] = {};
       this.channel = this.liveSocket.channel(`lv:${this.id}`, () => {
+        let url = this.href && this.expandURL(this.href);
         return {
-          redirect: this.redirect ? this.href : void 0,
-          url: this.redirect ? void 0 : this.href || void 0,
+          redirect: this.redirect ? url : void 0,
+          url: this.redirect ? void 0 : url || void 0,
           params: this.connectParams(liveReferer),
           session: this.getSession(),
           static: this.getStatic(),
@@ -2882,7 +3006,7 @@ within:
       this.attachTrueDocEl();
       let patch = new DOMPatch(this, this.el, this.id, html, streams, null);
       patch.markPrunableContentForRemoval();
-      this.performPatch(patch, false);
+      this.performPatch(patch, false, true);
       this.joinNewChildren();
       this.execNewMounted();
       this.joinPending = false;
@@ -2921,7 +3045,7 @@ within:
         newHook.__mounted();
       }
     }
-    performPatch(patch, pruneCids) {
+    performPatch(patch, pruneCids, isJoinPatch = false) {
       let removedEls = [];
       let phxChildrenAdded = false;
       let updatedHookIds = new Set();
@@ -2956,7 +3080,7 @@ within:
         }
       });
       patch.after("transitionsDiscarded", (els) => this.afterElementsRemoved(els, pruneCids));
-      patch.perform();
+      patch.perform(isJoinPatch);
       this.afterElementsRemoved(removedEls, pruneCids);
       return phxChildrenAdded;
     }
@@ -3361,7 +3485,7 @@ within:
       if (isCid(targetCtx)) {
         return targetCtx;
       }
-      let cidOrSelector = target.getAttribute(this.binding("target"));
+      let cidOrSelector = opts.target || target.getAttribute(this.binding("target"));
       if (isCid(cidOrSelector)) {
         return parseInt(cidOrSelector);
       } else if (targetCtx && (cidOrSelector !== null || opts.target)) {
@@ -3445,7 +3569,7 @@ within:
     }
     pushInput(inputEl, targetCtx, forceCid, phxEvent, opts, callback) {
       let uploads;
-      let cid = isCid(forceCid) ? forceCid : this.targetComponentID(inputEl.form, targetCtx);
+      let cid = isCid(forceCid) ? forceCid : this.targetComponentID(inputEl.form, targetCtx, opts);
       let refGenerator = () => this.putRef([inputEl, inputEl.form], "change", opts);
       let formData;
       let meta = this.extractMeta(inputEl.form);
@@ -3541,7 +3665,7 @@ within:
       let cid = this.targetComponentID(formEl, targetCtx);
       if (LiveUploader.hasUploadsInProgress(formEl)) {
         let [ref, _els] = refGenerator();
-        let push = () => this.pushFormSubmit(formEl, submitter, targetCtx, phxEvent, opts, onReply);
+        let push = () => this.pushFormSubmit(formEl, targetCtx, phxEvent, submitter, opts, onReply);
         return this.scheduleSubmit(formEl, ref, opts, push);
       } else if (LiveUploader.inputsAwaitingPreflight(formEl).length > 0) {
         let [ref, els] = refGenerator();
@@ -3605,8 +3729,9 @@ within:
         });
       });
     }
-    dispatchUploads(name, filesOrBlobs) {
-      let inputs = dom_default.findUploadInputs(this.el).filter((el) => el.name === name);
+    dispatchUploads(targetCtx, name, filesOrBlobs) {
+      let targetElement = this.targetCtxElement(targetCtx) || this.el;
+      let inputs = dom_default.findUploadInputs(targetElement).filter((el) => el.name === name);
       if (inputs.length === 0) {
         logError(`no live file inputs found matching the name "${name}"`);
       } else if (inputs.length > 1) {
@@ -3615,6 +3740,16 @@ within:
         dom_default.dispatchEvent(inputs[0], PHX_TRACK_UPLOADS, { detail: { files: filesOrBlobs } });
       }
     }
+    targetCtxElement(targetCtx) {
+      if (isCid(targetCtx)) {
+        let [target] = dom_default.findComponentNodeList(this.el, targetCtx);
+        return target;
+      } else if (targetCtx) {
+        return targetCtx;
+      } else {
+        return null;
+      }
+    }
     pushFormRecovery(form, newCid, callback) {
       this.liveSocket.withinOwners(form, (view, targetCtx) => {
         let phxChange = this.binding("change");
@@ -4121,7 +4256,7 @@ within:
       if (!dead) {
         this.bindForms();
       }
-      this.bind({ keyup: "keyup", keydown: "keydown" }, (e, type, view, targetEl, phxEvent, eventTarget) => {
+      this.bind({ keyup: "keyup", keydown: "keydown" }, (e, type, view, targetEl, phxEvent, phxTarget) => {
         let matchKey = targetEl.getAttribute(this.binding(PHX_KEY));
         let pressedKey = e.key && e.key.toLowerCase();
         if (matchKey && matchKey.toLowerCase() !== pressedKey) {
@@ -4130,13 +4265,13 @@ within:
         let data = __spreadValues({ key: e.key }, this.eventMeta(type, e, targetEl));
         js_default.exec(type, phxEvent, view, targetEl, ["push", { data }]);
       });
-      this.bind({ blur: "focusout", focus: "focusin" }, (e, type, view, targetEl, phxEvent, eventTarget) => {
-        if (!eventTarget) {
+      this.bind({ blur: "focusout", focus: "focusin" }, (e, type, view, targetEl, phxEvent, phxTarget) => {
+        if (!phxTarget) {
           let data = __spreadValues({ key: e.key }, this.eventMeta(type, e, targetEl));
           js_default.exec(type, phxEvent, view, targetEl, ["push", { data }]);
         }
       });
-      this.bind({ blur: "blur", focus: "focus" }, (e, type, view, targetEl, targetCtx, phxEvent, phxTarget) => {
+      this.bind({ blur: "blur", focus: "focus" }, (e, type, view, targetEl, phxEvent, phxTarget) => {
         if (phxTarget === "window") {
           let data = this.eventMeta(type, e, targetEl);
           js_default.exec(type, phxEvent, view, targetEl, ["push", { data }]);
@@ -4217,7 +4352,7 @@ within:
       }
     }
     bindClicks() {
-      window.addEventListener("click", (e) => this.clickStartedAtTarget = e.target);
+      window.addEventListener("mousedown", (e) => this.clickStartedAtTarget = e.target);
       this.bindClick("click", "click", false);
       this.bindClick("mousedown", "capture-click", true);
     }
@@ -4259,7 +4394,7 @@ within:
         if (!(el.isSameNode(clickStartedAt) || el.contains(clickStartedAt))) {
           this.withinOwners(e.target, (view) => {
             let phxEvent = el.getAttribute(phxClickAway);
-            if (js_default.isVisible(el)) {
+            if (js_default.isVisible(el) && js_default.isInViewport(el)) {
               js_default.exec("click", phxEvent, view, el, ["push", { data: this.eventMeta("click", e, e.target) }]);
             }
           });
@@ -4308,7 +4443,7 @@ within:
         if (!type || !this.isConnected() || !this.main || dom_default.wantsNewTab(e)) {
           return;
         }
-        let href = target.href;
+        let href = target.href instanceof SVGAnimatedString ? target.href.baseVal : target.href;
         let linkState = target.getAttribute(PHX_LINK_STATE);
         e.preventDefault();
         e.stopImmediatePropagation();