phoenix_live_view 0.20.2 → 0.20.3

package/assets/js/phoenix_live_view/dom.js

@@ -363,7 +363,7 @@ let DOM = {
     for(let i = targetAttrs.length - 1; i >= 0; i--){
       let name = targetAttrs[i].name
       if(isIgnored){
-        if(name.startsWith("data-") && !source.hasAttribute(name)){ target.removeAttribute(name) }
+        if(name.startsWith("data-") && !source.hasAttribute(name) && ![PHX_REF, PHX_REF_SRC].includes(name)){ target.removeAttribute(name) }
       } else {
         if(!source.hasAttribute(name)){ target.removeAttribute(name) }
       }
@@ -371,8 +371,8 @@ let DOM = {
   },
 
   mergeFocusedInput(target, source){
-    // skip selects because FF will reset highlighted index for any setAttribute
-    if(!(target instanceof HTMLSelectElement)){ DOM.mergeAttrs(target, source, {exclude: ["value"]}) }
+    DOM.mergeAttrs(target, source, {exclude: ["value"]})
+
     if(source.readOnly){
       target.setAttribute("readonly", true)
     } else {

package/assets/js/phoenix_live_view/dom_patch.js

@@ -167,7 +167,7 @@ export default class DOMPatch {
           return el
         },
         onNodeAdded: (el) => {
-          if(el.getAttribute){ this.maybeReOrderStream(el) }
+          if(el.getAttribute){ this.maybeReOrderStream(el, true) }
 
           // hack to fix Safari handling of img srcset and video tags
           if(el instanceof HTMLImageElement && el.srcset){
@@ -196,17 +196,9 @@ export default class DOMPatch {
             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),
@@ -226,7 +218,7 @@ export default class DOMPatch {
             externalFormTriggered = el
           }
           updates.push(el)
-          this.maybeReOrderStream(el)
+          this.maybeReOrderStream(el, false)
         },
         onBeforeElUpdated: (fromEl, toEl) => {
           DOM.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom)
@@ -342,9 +334,9 @@ export default class DOMPatch {
     return insert || {}
   }
 
-  maybeReOrderStream(el){
+  maybeReOrderStream(el, isNew){
     let {ref, streamAt, limit} = this.getStreamInsert(el)
-    if(streamAt === undefined){ return }
+    if(streamAt === undefined || (streamAt === 0 && !isNew)){ return }
 
     // we need to the PHX_STREAM_REF here as well as addChild is invoked only for parents
     DOM.putSticky(el, PHX_STREAM_REF, el => el.setAttribute(PHX_STREAM_REF, ref))

package/assets/js/phoenix_live_view/js.js

@@ -9,8 +9,6 @@ let JS = {
     let commands = phxEvent.charAt(0) === "[" ?
       JSON.parse(phxEvent) : [[defaultKind, defaultArgs]]
 
-
-
     commands.forEach(([kind, args]) => {
       if(kind === defaultKind && defaultArgs.data){
         args.data = Object.assign(args.data || {}, defaultArgs.data)
@@ -56,13 +54,12 @@ let JS = {
   },
 
   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.isFormInput(sourceEl) ? sourceEl.name : undefined)
@@ -112,6 +109,10 @@ let JS = {
     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)
   },
@@ -203,6 +204,15 @@ let JS = {
     }
   },
 
+  toggleClasses(el, classes, transition, time, view){
+    window.requestAnimationFrame(() => {
+      let [prevAdds, prevRemoves] = DOM.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){

package/assets/js/phoenix_live_view/rendered.js

@@ -37,60 +37,41 @@ const VOID_TAGS = new Set([
   "track",
   "wbr"
 ])
-const endingTagNameChars = new Set([">", "/", " ", "\n", "\t", "\r"])
 const quoteChars = new Set(["'", '"'])
 
 export let 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 {
+
+  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
+
+  // Scan the opening tag for id, if there is any
+  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 char = html.charAt(i)
+      if (quoteChars.has(char)) {
+        let attrStartsAt = i
         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)
-      // Scan the opening tag for id, if there is any
-      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 char = html.charAt(i)
-          if (quoteChars.has(char)) {
-            let attrStartsAt = i
-            i++
-            for(i; i < html.length; i++){
-              if(html.charAt(i) === char){ break }
-            }
-            if (isId) {
-              id = html.slice(attrStartsAt + 1, i)
-              break
-            }
-          }
+        for(i; i < html.length; i++){
+          if(html.charAt(i) === char){ 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

package/assets/js/phoenix_live_view/view.js

@@ -389,6 +389,9 @@ export default class View {
 
     patch.after("added", el => {
       this.liveSocket.triggerDOM("onNodeAdded", [el])
+      let phxViewportTop = this.binding(PHX_VIEWPORT_TOP)
+      let phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM)
+      DOM.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom)
       this.maybeAddNewHook(el)
       if(el.getAttribute){ this.maybeMounted(el) }
     })
@@ -920,6 +923,7 @@ export default class View {
           this.uploadFiles(inputEl.form, targetCtx, ref, cid, (_uploads) => {
             callback && callback(resp)
             this.triggerAwaitingSubmit(inputEl.form)
+            this.undoRefs(ref)
           })
         }
       } else {
@@ -1064,7 +1068,7 @@ export default class View {
   }
 
   dispatchUploads(targetCtx, name, filesOrBlobs){
-    let targetElement = this.targetCtxElement(targetCtx) || this.el;
+    let targetElement = this.targetCtxElement(targetCtx) || this.el
     let inputs = DOM.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){ logError(`duplicate live file inputs found matching the name "${name}"`) }

package/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "repository": {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",

package/priv/static/phoenix_live_view.cjs.js

@@ -610,7 +610,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 {
@@ -621,9 +621,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 {
@@ -1854,7 +1852,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;
@@ -1878,17 +1876,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),
@@ -1912,7 +1902,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);
@@ -2020,9 +2010,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));
@@ -2100,66 +2090,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) {
@@ -2534,14 +2500,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);
@@ -2586,6 +2552,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);
   },
@@ -2668,6 +2637,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) {
@@ -3022,6 +2999,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);
@@ -3568,6 +3548,7 @@ var View = class {
           this.uploadFiles(inputEl.form, targetCtx, ref, cid, (_uploads) => {
             callback && callback(resp);
             this.triggerAwaitingSubmit(inputEl.form);
+            this.undoRefs(ref);
           });
         }
       } else {