phoenix_live_view 0.20.2 → 0.20.3

package/priv/static/phoenix_live_view.esm.js

@@ -597,7 +597,7 @@ var DOM = {
     for (let i = targetAttrs.length - 1; i >= 0; i--) {
       let name = targetAttrs[i].name;
       if (isIgnored) {
-        if (name.startsWith("data-") && !source.hasAttribute(name)) {
+        if (name.startsWith("data-") && !source.hasAttribute(name) && ![PHX_REF, PHX_REF_SRC].includes(name)) {
           target.removeAttribute(name);
         }
       } else {
@@ -608,9 +608,7 @@ var DOM = {
     }
   },
   mergeFocusedInput(target, source) {
-    if (!(target instanceof HTMLSelectElement)) {
-      DOM.mergeAttrs(target, source, { exclude: ["value"] });
-    }
+    DOM.mergeAttrs(target, source, { exclude: ["value"] });
     if (source.readOnly) {
       target.setAttribute("readonly", true);
     } else {
@@ -1841,7 +1839,7 @@ var DOMPatch = class {
         },
         onNodeAdded: (el) => {
           if (el.getAttribute) {
-            this.maybeReOrderStream(el);
+            this.maybeReOrderStream(el, true);
           }
           if (el instanceof HTMLImageElement && el.srcset) {
             el.srcset = el.srcset;
@@ -1865,17 +1863,9 @@ var DOMPatch = class {
             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));
+            }).forEach((child) => {
+              this.streamInserts[child.id].streamAt = toIds.indexOf(child.id);
+            });
           }
         },
         onNodeDiscarded: (el) => this.onNodeDiscarded(el),
@@ -1899,7 +1889,7 @@ var DOMPatch = class {
             externalFormTriggered = el;
           }
           updates.push(el);
-          this.maybeReOrderStream(el);
+          this.maybeReOrderStream(el, false);
         },
         onBeforeElUpdated: (fromEl, toEl) => {
           dom_default.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom);
@@ -2007,9 +1997,9 @@ var DOMPatch = class {
     let insert = el.id ? this.streamInserts[el.id] : {};
     return insert || {};
   }
-  maybeReOrderStream(el) {
+  maybeReOrderStream(el, isNew) {
     let { ref, streamAt, limit } = this.getStreamInsert(el);
-    if (streamAt === void 0) {
+    if (streamAt === void 0 || streamAt === 0 && !isNew) {
       return;
     }
     dom_default.putSticky(el, PHX_STREAM_REF, (el2) => el2.setAttribute(PHX_STREAM_REF, ref));
@@ -2087,66 +2077,42 @@ var VOID_TAGS = new Set([
   "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;
+  let lookahead = html.match(/^(\s*(?:<!--.*?-->\s*)*)<([^\s\/>]+)/);
+  if (lookahead === null) {
+    throw new Error(`malformed html ${html}`);
+  }
+  i = lookahead[0].length;
+  beforeTag = lookahead[1];
+  tag = lookahead[2];
+  tagNameEndsAt = i;
+  for (i; i < html.length; i++) {
+    if (html.charAt(i) === ">") {
+      break;
+    }
+    if (html.charAt(i) === "=") {
+      let isId = html.slice(i - 3, i) === " id";
       i++;
-      for (i; i < html.length; i++) {
-        if (endingTagNameChars.has(html.charAt(i))) {
-          break;
+      let char = html.charAt(i);
+      if (quoteChars.has(char)) {
+        let attrStartsAt = i;
+        i++;
+        for (i; i < html.length; i++) {
+          if (html.charAt(i) === char) {
+            break;
+          }
         }
-      }
-      tagNameEndsAt = i;
-      tag = html.slice(iAtOpen + 1, tagNameEndsAt);
-      for (i; i < html.length; i++) {
-        if (html.charAt(i) === ">") {
+        if (isId) {
+          id = html.slice(attrStartsAt + 1, 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) {
@@ -2521,14 +2487,14 @@ var JS = {
     dom_default.dispatchEvent(el, event, { detail, bubbles });
   },
   exec_push(eventType, phxEvent, view, sourceEl, el, args) {
-    if (!view.isConnected()) {
-      return;
-    }
     let { event, data, target, page_loading, loading, value, dispatcher, callback } = args;
     let pushOpts = { loading, value, target, page_loading: !!page_loading };
     let targetSrc = eventType === "change" && dispatcher ? dispatcher : sourceEl;
     let phxTarget = target || targetSrc.getAttribute(view.binding("target")) || targetSrc;
     view.withinTargets(phxTarget, (targetView, targetCtx) => {
+      if (!targetView.isConnected()) {
+        return;
+      }
       if (eventType === "change") {
         let { newCid, _target } = args;
         _target = _target || (dom_default.isFormInput(sourceEl) ? sourceEl.name : void 0);
@@ -2573,6 +2539,9 @@ var JS = {
   exec_remove_class(eventType, phxEvent, view, sourceEl, el, { names, transition, time }) {
     this.addOrRemoveClasses(el, [], names, transition, time, view);
   },
+  exec_toggle_class(eventType, phxEvent, view, sourceEl, el, { to, names, transition, time }) {
+    this.toggleClasses(el, names, transition, view);
+  },
   exec_transition(eventType, phxEvent, view, sourceEl, el, { time, transition }) {
     this.addOrRemoveClasses(el, [], [], transition, time, view);
   },
@@ -2655,6 +2624,14 @@ var JS = {
       }
     }
   },
+  toggleClasses(el, classes, transition, time, view) {
+    window.requestAnimationFrame(() => {
+      let [prevAdds, prevRemoves] = dom_default.getSticky(el, "classes", [[], []]);
+      let newAdds = classes.filter((name) => prevAdds.indexOf(name) < 0 && !el.classList.contains(name));
+      let newRemoves = classes.filter((name) => prevRemoves.indexOf(name) < 0 && el.classList.contains(name));
+      this.addOrRemoveClasses(el, newAdds, newRemoves, transition, time, view);
+    });
+  },
   addOrRemoveClasses(el, adds, removes, transition, time, view) {
     let [transitionRun, transitionStart, transitionEnd] = transition || [[], [], []];
     if (transitionRun.length > 0) {
@@ -3009,6 +2986,9 @@ var View = class {
     let updatedHookIds = new Set();
     patch.after("added", (el) => {
       this.liveSocket.triggerDOM("onNodeAdded", [el]);
+      let phxViewportTop = this.binding(PHX_VIEWPORT_TOP);
+      let phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM);
+      dom_default.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom);
       this.maybeAddNewHook(el);
       if (el.getAttribute) {
         this.maybeMounted(el);
@@ -3555,6 +3535,7 @@ var View = class {
           this.uploadFiles(inputEl.form, targetCtx, ref, cid, (_uploads) => {
             callback && callback(resp);
             this.triggerAwaitingSubmit(inputEl.form);
+            this.undoRefs(ref);
           });
         }
       } else {