phoenix_live_view 0.20.0 → 0.20.2

package/priv/static/phoenix_live_view.esm.js

@@ -27,6 +27,7 @@ var PHX_DROP_TARGET = "drop-target";
 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";
@@ -81,6 +82,7 @@ var DEFAULTS = {
 };
 var DYNAMICS = "d";
 var STATIC = "s";
+var ROOT = "r";
 var COMPONENTS = "c";
 var EVENTS = "e";
 var REPLY = "r";
@@ -103,6 +105,7 @@ var EntryUploader = class {
     if (this.errored) {
       return;
     }
+    this.uploadChannel.leave();
     this.errored = true;
     clearTimeout(this.chunkTimer);
     this.entry.error(reason);
@@ -522,12 +525,17 @@ var DOM = {
       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));
     }
@@ -814,7 +822,8 @@ var UploadEntry = class {
       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) {
@@ -871,6 +880,9 @@ var LiveUploader = class {
       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;
@@ -960,7 +972,7 @@ var ARIA = {
     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)) {
@@ -1536,7 +1548,7 @@ function morphdomFactory(morphAttrs2) {
       }
     }
     function morphChildren(fromEl, toEl) {
-      var skipFrom = skipFromChildren(fromEl);
+      var skipFrom = skipFromChildren(fromEl, toEl);
       var curToNodeChild = toEl.firstChild;
       var curFromNodeChild = fromEl.firstChild;
       var curToNodeKey;
@@ -1739,7 +1751,7 @@ var DOMPatch = class {
       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) {
@@ -1758,19 +1770,18 @@ var DOMPatch = class {
     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);
             }
           });
@@ -1782,10 +1793,16 @@ var DOMPatch = class {
           }
         });
       });
-      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;
@@ -1842,6 +1859,25 @@ var DOMPatch = class {
           }
           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) {
@@ -1935,9 +1971,7 @@ var DOMPatch = class {
         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));
@@ -2016,7 +2050,7 @@ var DOMPatch = class {
     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()) {
@@ -2029,35 +2063,125 @@ var DOMPatch = class {
       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;
@@ -2069,19 +2193,20 @@ var Rendered = class {
   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) {
@@ -2126,10 +2251,10 @@ var Rendered = class {
           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;
@@ -2154,21 +2279,31 @@ var Rendered = class {
         target[key] = val;
       }
     }
+    if (target[ROOT]) {
+      target.newRender = true;
+    }
   }
-  cloneMerge(target, source) {
+  cloneMerge(target, source, pruneMagicId) {
     let merged = { ...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]);
@@ -2186,17 +2321,46 @@ var Rendered = class {
       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 = { [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;
@@ -2207,7 +2371,8 @@ var Rendered = class {
       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];
       }
     }
@@ -2217,74 +2382,26 @@ var Rendered = class {
       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];
   }
 };
 
@@ -2353,10 +2470,12 @@ var ViewHook = class {
     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));
@@ -2382,6 +2501,10 @@ var JS = {
   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) => {
@@ -2640,9 +2763,10 @@ var View = class {
     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(),
@@ -2840,7 +2964,7 @@ var View = class {
     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;
@@ -2879,7 +3003,7 @@ var View = class {
       newHook.__mounted();
     }
   }
-  performPatch(patch, pruneCids) {
+  performPatch(patch, pruneCids, isJoinPatch = false) {
     let removedEls = [];
     let phxChildrenAdded = false;
     let updatedHookIds = new Set();
@@ -2914,7 +3038,7 @@ var View = class {
       }
     });
     patch.after("transitionsDiscarded", (els) => this.afterElementsRemoved(els, pruneCids));
-    patch.perform();
+    patch.perform(isJoinPatch);
     this.afterElementsRemoved(removedEls, pruneCids);
     return phxChildrenAdded;
   }
@@ -3319,7 +3443,7 @@ var View = class {
     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)) {
@@ -3403,7 +3527,7 @@ var View = class {
   }
   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);
@@ -3499,7 +3623,7 @@ var View = class {
     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();
@@ -3563,8 +3687,9 @@ var View = class {
       });
     });
   }
-  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) {
@@ -3573,6 +3698,16 @@ var View = class {
       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");
@@ -4079,7 +4214,7 @@ var LiveSocket = class {
     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) {
@@ -4088,13 +4223,13 @@ var LiveSocket = class {
       let data = { 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 = { 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 }]);
@@ -4175,7 +4310,7 @@ var LiveSocket = class {
     }
   }
   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);
   }
@@ -4217,7 +4352,7 @@ var LiveSocket = class {
       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) }]);
           }
         });
@@ -4266,7 +4401,7 @@ var LiveSocket = class {
       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();