phoenix_live_view 0.20.2 → 0.20.3

package/priv/static/phoenix_live_view.js

@@ -639,7 +639,7 @@ var LiveView = (() => {
       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 {
@@ -650,9 +650,7 @@ var LiveView = (() => {
       }
     },
     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 {
@@ -1883,7 +1881,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           },
           onNodeAdded: (el) => {
             if (el.getAttribute) {
-              this.maybeReOrderStream(el);
+              this.maybeReOrderStream(el, true);
             }
             if (el instanceof HTMLImageElement && el.srcset) {
               el.srcset = el.srcset;
@@ -1907,17 +1905,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               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),
@@ -1941,7 +1931,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               externalFormTriggered = el;
             }
             updates.push(el);
-            this.maybeReOrderStream(el);
+            this.maybeReOrderStream(el, false);
           },
           onBeforeElUpdated: (fromEl, toEl) => {
             dom_default.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom);
@@ -2049,9 +2039,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       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));
@@ -2129,66 +2119,42 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     "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) {
@@ -2563,14 +2529,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       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);
@@ -2615,6 +2581,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     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);
     },
@@ -2697,6 +2666,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       }
     },
+    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) {
@@ -3051,6 +3028,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       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);
@@ -3597,6 +3577,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             this.uploadFiles(inputEl.form, targetCtx, ref, cid, (_uploads) => {
               callback && callback(resp);
               this.triggerAwaitingSubmit(inputEl.form);
+              this.undoRefs(ref);
             });
           }
         } else {