phoenix_live_view 0.20.2 → 0.20.4

package/assets/js/phoenix_live_view/js.js

@@ -2,6 +2,7 @@ import DOM from "./dom"
 import ARIA from "./aria"
 
 let focusStack = null
+let default_transition_time = 200
 
 let JS = {
   exec(eventType, phxEvent, view, sourceEl, defaults){
@@ -9,8 +10,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)
@@ -40,7 +39,7 @@ let JS = {
 
   // commands
 
-  exec_exec(eventType, phxEvent, view, sourceEl, el, [attr, to]){
+  exec_exec(eventType, phxEvent, view, sourceEl, el, {attr, to}){
     let nodes = to ? DOM.all(document, to) : [sourceEl]
     nodes.forEach(node => {
       let encodedJS = node.getAttribute(attr)
@@ -56,13 +55,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 +110,28 @@ 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_toggle_attr(eventType, phxEvent, view, sourceEl, el, {attr: [attr, val1, val2]}){
+    if(el.hasAttribute(attr)){
+      if(val2 !== undefined){
+        // toggle between val1 and val2
+        if(el.getAttribute(attr) === val1){
+          this.setOrRemoveAttrs(el, [[attr, val2]], [])
+        } else {
+          this.setOrRemoveAttrs(el, [[attr, val1]], [])
+        }
+      } else {
+        // remove attr
+        this.setOrRemoveAttrs(el, [], [attr])
+      }
+    } else {
+      this.setOrRemoveAttrs(el, [[attr, val1]], [])
+    }
+  },
+
   exec_transition(eventType, phxEvent, view, sourceEl, el, {time, transition}){
     this.addOrRemoveClasses(el, [], [], transition, time, view)
   },
@@ -151,6 +171,7 @@ let JS = {
   },
 
   toggle(eventType, view, el, display, ins, outs, time){
+    time = time || default_transition_time
     let [inClasses, inStartClasses, inEndClasses] = ins || [[], [], []]
     let [outClasses, outStartClasses, outEndClasses] = outs || [[], [], []]
     if(inClasses.length > 0 || outClasses.length > 0){
@@ -203,7 +224,17 @@ 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){
+    time = time || default_transition_time
     let [transitionRun, transitionStart, transitionEnd] = transition || [[], [], []]
     if(transitionRun.length > 0){
       let onStart = () => {
@@ -235,9 +266,9 @@ let JS = {
   setOrRemoveAttrs(el, sets, removes){
     let [prevSets, prevRemoves] = DOM.getSticky(el, "attrs", [[], []])
 
-    let alteredAttrs = sets.map(([attr, _val]) => attr).concat(removes);
-    let newSets = prevSets.filter(([attr, _val]) => !alteredAttrs.includes(attr)).concat(sets);
-    let newRemoves = prevRemoves.filter((attr) => !alteredAttrs.includes(attr)).concat(removes);
+    let alteredAttrs = sets.map(([attr, _val]) => attr).concat(removes)
+    let newSets = prevSets.filter(([attr, _val]) => !alteredAttrs.includes(attr)).concat(sets)
+    let newRemoves = prevRemoves.filter((attr) => !alteredAttrs.includes(attr)).concat(removes)
 
     DOM.putSticky(el, "attrs", currentEl => {
       newRemoves.forEach(attr => currentEl.removeAttribute(attr))

package/assets/js/phoenix_live_view/live_socket.js

@@ -106,7 +106,6 @@ import {
   closestPhxBinding,
   closure,
   debug,
-  isObject,
   maybe
 } from "./utils"
 
@@ -400,23 +399,28 @@ export default class LiveSocket {
 
     this.main = this.newRootView(newMainEl, flash, liveReferer)
     this.main.setRedirect(href)
-    this.transitionRemoves()
+    this.transitionRemoves(null, true)
     this.main.join((joinCount, onDone) => {
       if(joinCount === 1 && this.commitPendingLink(linkRef)){
         this.requestDOMUpdate(() => {
           DOM.findPhxSticky(document).forEach(el => newMainEl.appendChild(el))
           this.outgoingMainEl.replaceWith(newMainEl)
           this.outgoingMainEl = null
-          callback && requestAnimationFrame(() => callback(linkRef))
+          callback && callback(linkRef)
           onDone()
         })
       }
     })
   }
 
-  transitionRemoves(elements){
+  transitionRemoves(elements, skipSticky){
     let removeAttr = this.binding("remove")
     elements = elements || DOM.all(document, `[${removeAttr}]`)
+
+    if(skipSticky){
+      const stickies = DOM.findPhxSticky(document) || []
+      elements = elements.filter(el => !DOM.isChildOfAny(el, stickies))
+    }
     elements.forEach(el => {
       this.execJS(el, el.getAttribute(removeAttr), "remove")
     })
@@ -631,6 +635,9 @@ export default class LiveSocket {
       if(capture){
         target = e.target.matches(`[${click}]`) ? e.target : e.target.querySelector(`[${click}]`)
       } else {
+        // a synthetic click event (detail 0) will not have caused a mousedown event,
+        // therefore the clickStartedAtTarget is stale
+        if(e.detail === 0) this.clickStartedAtTarget = e.target
         let clickStartedAtTarget = this.clickStartedAtTarget || e.target
         target = closestPhxBinding(clickStartedAtTarget, click)
         this.dispatchClickAway(e, clickStartedAtTarget)
@@ -659,7 +666,7 @@ export default class LiveSocket {
     let phxClickAway = this.binding("click-away")
     DOM.all(document, `[${phxClickAway}]`, el => {
       if(!(el.isSameNode(clickStartedAt) || el.contains(clickStartedAt))){
-        this.withinOwners(e.target, view => {
+        this.withinOwners(el, view => {
           let phxEvent = el.getAttribute(phxClickAway)
           if(JS.isVisible(el) && JS.isInViewport(el)){
             JS.exec("click", phxEvent, view, el, ["push", {data: this.eventMeta("click", e, e.target)}])
@@ -727,7 +734,7 @@ export default class LiveSocket {
     }, false)
   }
 
-  maybeScroll(scroll) {
+  maybeScroll(scroll){
     if(typeof(scroll) === "number"){
       requestAnimationFrame(() => {
         window.scrollTo(0, scroll)
@@ -750,7 +757,7 @@ export default class LiveSocket {
   }
 
   pushHistoryPatch(href, linkState, targetEl){
-    if(!this.isConnected()){ return Browser.redirect(href) }
+    if(!this.isConnected() || !this.main.isMain()){ return Browser.redirect(href) }
 
     this.withPageLoading({to: href, kind: "patch"}, done => {
       this.main.pushLinkPatch(href, targetEl, linkRef => {
@@ -769,8 +776,9 @@ export default class LiveSocket {
   }
 
   historyRedirect(href, linkState, flash){
+    if(!this.isConnected() || !this.main.isMain()){ return Browser.redirect(href, flash) }
+
     // convert to full href if only path prefix
-    if(!this.isConnected()){ return Browser.redirect(href, flash) }
     if(/^\/$|^\/[^\/]+.*$/.test(href)){
       let {protocol, host} = window.location
       href = `${protocol}//${host}${href}`
@@ -873,10 +881,12 @@ export default class LiveSocket {
       let form = e.target
       DOM.resetForm(form, this.binding(PHX_FEEDBACK_FOR))
       let input = Array.from(form.elements).find(el => el.type === "reset")
-      // wait until next tick to get updated input value
-      window.requestAnimationFrame(() => {
-        input.dispatchEvent(new Event("input", {bubbles: true, cancelable: false}))
-      })
+      if(input){
+        // wait until next tick to get updated input value
+        window.requestAnimationFrame(() => {
+          input.dispatchEvent(new Event("input", {bubbles: true, cancelable: false}))
+        })
+      }
     })
   }
 

package/assets/js/phoenix_live_view/live_uploader.js

@@ -94,7 +94,11 @@ export default class LiveUploader {
   }
 
   static filesAwaitingPreflight(input){
-    return this.activeFiles(input).filter(f => !UploadEntry.isPreflighted(input, f))
+    return this.activeFiles(input).filter(f => !UploadEntry.isPreflighted(input, f) && !UploadEntry.isPreflightInProgress(f))
+  }
+
+  static markPreflightInProgress(entries){
+    entries.forEach(entry => UploadEntry.markPreflightInProgress(entry.file))
   }
 
   constructor(inputEl, view, onComplete){
@@ -104,6 +108,9 @@ export default class LiveUploader {
       Array.from(LiveUploader.filesAwaitingPreflight(inputEl) || [])
         .map(file => new UploadEntry(inputEl, file, view))
 
+    // prevent sending duplicate preflight requests 
+    LiveUploader.markPreflightInProgress(this._entries)
+
     this.numEntriesInProgress = this._entries.length
   }
 

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
@@ -174,6 +155,14 @@ export default class Rendered {
 
   getComponent(diff, cid){ return diff[COMPONENTS][cid] }
 
+  resetRender(cid){
+    // we are racing a component destroy, it could not exist, so
+    // make sure that we don't try to set reset on undefined
+    if(this.rendered[COMPONENTS][cid]){
+      this.rendered[COMPONENTS][cid].reset = true
+    }
+  }
+
   mergeDiff(diff){
     let newc = diff[COMPONENTS]
     let cache = {}
@@ -305,7 +294,7 @@ export default class Rendered {
   //
   // changeTracking controls if we can apply the PHX_SKIP optimization.
   // It is disabled for comprehensions since we must re-render the entire collection
-  // and no invidial element is tracked inside the comprehension.
+  // and no individual element is tracked inside the comprehension.
   toOutputBuffer(rendered, templates, output, changeTracking, rootAttrs = {}){
     if(rendered[DYNAMICS]){ return this.comprehensionToBuffer(rendered, templates, output) }
     let {[STATIC]: statics} = rendered
@@ -314,6 +303,8 @@ export default class Rendered {
     let prevBuffer = output.buffer
     if(isRoot){ output.buffer = "" }
 
+    // this condition is called when first rendering an optimizable function component.
+    // LC have their magicId previously set
     if(changeTracking && isRoot && !rendered.magicId){
       rendered.newRender = true
       rendered.magicId = this.nextMagicID()
@@ -332,13 +323,17 @@ export default class Rendered {
     if(isRoot){
       let skip = false
       let attrs
-      if(changeTracking || Object.keys(rootAttrs).length > 0){
-        skip = !rendered.newRender
+      // when a LC is added on the page, we need to re-render the entire LC tree,
+      // therefore changeTracking is false; however, we need to keep all the magicIds
+      // from any function component so the next time the LC is updated, we can apply
+      // the skip optimization
+      if(changeTracking || rendered.magicId){
+        skip = changeTracking && !rendered.newRender
         attrs = {[PHX_MAGIC_ID]: rendered.magicId, ...rootAttrs}
       } else {
         attrs = rootAttrs
       }
-      if(skip){ attrs[PHX_SKIP] = true}
+      if(skip){ attrs[PHX_SKIP] = true }
       let [newRoot, commentBefore, commentAfter] = modifyRoot(output.buffer, attrs, skip)
       rendered.newRender = false
       output.buffer = prevBuffer + commentBefore + newRoot + commentAfter
@@ -395,15 +390,23 @@ export default class Rendered {
     //
     //   2. The root PHX_SKIP optimization generalizes to all HEEx function components, and
     //     works in the same PHX_SKIP attribute fashion as 1, but the newRender tracking is done
-    //     at the general diff merge level. If we merge a diff with new dynamics, we necessariy have
+    //     at the general diff merge level. If we merge a diff with new dynamics, we necessarily have
     //     experienced a change which must be a newRender, and thus we can't skip the render.
     //
     // Both optimization flows apply here. newRender is set based on the onlyCids optimization, and
     // we track a deterministic magicId based on the cid.
+    //
+    // By default changeTracking is enabled, but we special case the flow where the client is pruning
+    // cids and the server adds the component back. In such cases, we explicitly disable changeTracking
+    // with resetRender for this cid, then re-enable it after the recursive call to skip the optimization
+    // for the entire component tree.
     component.newRender = !skip
     component.magicId = `${this.parentViewId()}-c-${cid}`
-    let changeTracking = true
+    // enable change tracking as long as the component hasn't been reset
+    let changeTracking = !component.reset
     let [html, streams] = this.recursiveToString(component, components, onlyCids, changeTracking, attrs)
+    // disable reset after we've rendered
+    delete component.reset
 
     return [html, streams]
   }

package/assets/js/phoenix_live_view/upload_entry.js

@@ -15,9 +15,10 @@ import DOM from "./dom"
 export default class UploadEntry {
   static isActive(fileEl, file){
     let isNew = file._phxRef === undefined
+    let isPreflightInProgress = UploadEntry.isPreflightInProgress(file)
     let activeRefs = fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(",")
     let isActive = activeRefs.indexOf(LiveUploader.genFileRef(file)) >= 0
-    return file.size > 0 && (isNew || isActive)
+    return file.size > 0 && (isNew || isActive || !isPreflightInProgress)
   }
 
   static isPreflighted(fileEl, file){
@@ -26,6 +27,14 @@ export default class UploadEntry {
     return isPreflighted && this.isActive(fileEl, file)
   }
 
+  static isPreflightInProgress(file){
+    return file._preflightInProgress === true
+  }
+
+  static markPreflightInProgress(file){
+    file._preflightInProgress = true
+  }
+
   constructor(fileEl, file, view){
     this.ref = LiveUploader.genFileRef(file)
     this.fileEl = fileEl

package/assets/js/phoenix_live_view/view.js

@@ -56,18 +56,28 @@ import ViewHook from "./view_hook"
 import JS from "./js"
 
 let serializeForm = (form, metadata, onlyNames = []) => {
-  let {submitter, ...meta} = metadata
-
-  // TODO: Replace with `new FormData(form, submitter)` when supported by latest browsers,
-  //       and mention `formdata-submitter-polyfill` in the docs.
-  let formData = new FormData(form)
-
-  // TODO: Remove when FormData constructor supports the submitter argument.
-  if(submitter && submitter.hasAttribute("name") && submitter.form && submitter.form === form){
-    formData.append(submitter.name, submitter.value)
+  const {submitter, ...meta} = metadata
+
+  // We must inject the submitter in the order that it exists in the DOM
+  // releative to other inputs. For example, for checkbox groups, the order must be maintained.
+  let injectedElement
+  if(submitter && submitter.name){
+    const input = document.createElement("input")
+    input.type = "hidden"
+    // set the form attribute if the submitter has one;
+    // this can happen if the element is outside the actual form element
+    const formId = submitter.getAttribute("form")
+    if(formId){
+      input.setAttribute("form", form)
+    }
+    input.name = submitter.name
+    input.value = submitter.value
+    submitter.parentElement.insertBefore(input, submitter)
+    injectedElement = input
   }
 
-  let toRemove = []
+  const formData = new FormData(form)
+  const toRemove = []
 
   formData.forEach((val, key, _index) => {
     if(val instanceof File){ toRemove.push(key) }
@@ -76,12 +86,20 @@ let serializeForm = (form, metadata, onlyNames = []) => {
   // Cleanup after building fileData
   toRemove.forEach(key => formData.delete(key))
 
-  let params = new URLSearchParams()
+  const params = new URLSearchParams()
+
   for(let [key, val] of formData.entries()){
     if(onlyNames.length === 0 || onlyNames.indexOf(key) >= 0){
       params.append(key, val)
     }
   }
+
+  // remove the injected element again
+  // (it would be removed by the next dom patch anyway, but this is cleaner)
+  if(submitter && injectedElement){
+    submitter.parentElement.removeChild(injectedElement)
+  }
+
   for(let metaKey in meta){ params.append(metaKey, meta[metaKey]) }
 
   return params.toString()
@@ -303,6 +321,9 @@ export default class View {
       let fromEl = toEl.id && this.el.querySelector(`[id="${toEl.id}"]`)
       let phxStatic = fromEl && fromEl.getAttribute(PHX_STATIC)
       if(phxStatic){ toEl.setAttribute(PHX_STATIC, phxStatic) }
+      // set PHX_ROOT_ID to prevent events from being dispatched to the root view
+      // while the child join is still pending
+      if(fromEl){ fromEl.setAttribute(PHX_ROOT_ID, this.root.id) }
       return this.joinChild(toEl)
     })
 
@@ -389,6 +410,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) }
     })
@@ -750,12 +774,13 @@ export default class View {
 
     DOM.all(document, `[${PHX_REF_SRC}="${this.id}"][${PHX_REF}="${ref}"]`, el => {
       let disabledVal = el.getAttribute(PHX_DISABLED)
+      let readOnlyVal = el.getAttribute(PHX_READONLY)
       // remove refs
       el.removeAttribute(PHX_REF)
       el.removeAttribute(PHX_REF_SRC)
       // restore inputs
-      if(el.getAttribute(PHX_READONLY) !== null){
-        el.readOnly = false
+      if(readOnlyVal !== null){
+        el.readOnly = readOnlyVal === "true" ? true : false
         el.removeAttribute(PHX_READONLY)
       }
       if(disabledVal !== null){
@@ -795,6 +820,8 @@ export default class View {
           el.setAttribute(PHX_DISABLE_WITH_RESTORE, el.innerText)
         }
         if(disableText !== ""){ el.innerText = disableText }
+        // PHX_DISABLED could have already been set in disableForm
+        el.setAttribute(PHX_DISABLED, el.getAttribute(PHX_DISABLED) || el.disabled)
         el.setAttribute("disabled", "")
       }
     })
@@ -895,6 +922,7 @@ export default class View {
     let refGenerator = () => this.putRef([inputEl, inputEl.form], "change", opts)
     let formData
     let meta  = this.extractMeta(inputEl.form)
+    if(inputEl instanceof HTMLButtonElement){ meta.submitter = inputEl }
     if(inputEl.getAttribute(this.binding("change"))){
       formData = serializeForm(inputEl.form, {_target: opts._target, ...meta}, [inputEl.name])
     } else {
@@ -920,6 +948,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 +1093,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}"`) }
@@ -1139,7 +1168,7 @@ export default class View {
         .map(form => {
           // attribute given via JS module needs to be escaped as it contains the symbols []",
           // which result in an invalid css selector otherwise.
-          const phxChangeValue = form.getAttribute(phxChange).replaceAll(/([\[\]"])/g, '\\$1')
+          const phxChangeValue = CSS.escape(form.getAttribute(phxChange))
           let newForm = template.content.querySelector(`form[id="${form.id}"][${phxChange}="${phxChangeValue}"]`)
           if(newForm){
             return [form, newForm, this.targetComponentID(newForm)]
@@ -1152,17 +1181,18 @@ export default class View {
   }
 
   maybePushComponentsDestroyed(destroyedCIDs){
-    let willDestroyCIDs = destroyedCIDs.filter(cid => {
+    let willDestroyCIDs = destroyedCIDs.concat(this.pruningCIDs).filter(cid => {
       return DOM.findComponentNodeList(this.el, cid).length === 0
     })
+    // make sure this is a copy and not a reference
+    this.pruningCIDs = willDestroyCIDs.concat([])
+
     if(willDestroyCIDs.length > 0){
-      this.pruningCIDs.push(...willDestroyCIDs)
+      // we must reset the render change tracking for cids that
+      // could be added back from the server so we don't skip them
+      willDestroyCIDs.forEach(cid => this.rendered.resetRender(cid))
 
       this.pushWithReply(null, "cids_will_destroy", {cids: willDestroyCIDs}, () => {
-        // The cids are either back on the page or they will be fully removed,
-        // so we can remove them from the pruningCIDs.
-        this.pruningCIDs = this.pruningCIDs.filter(cid => willDestroyCIDs.indexOf(cid) !== -1)
-
         // See if any of the cids we wanted to destroy were added back,
         // if they were added back, we don't actually destroy them.
         let completelyDestroyCIDs = willDestroyCIDs.filter(cid => {
@@ -1171,6 +1201,7 @@ export default class View {
 
         if(completelyDestroyCIDs.length > 0){
           this.pushWithReply(null, "cids_destroyed", {cids: completelyDestroyCIDs}, (resp) => {
+            this.pruningCIDs = this.pruningCIDs.filter(cid => resp.cids.indexOf(cid) === -1)
             this.rendered.pruneCIDs(resp.cids)
           })
         }

package/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.20.2",
+  "version": "0.20.4",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "repository": {},
@@ -10,15 +10,17 @@
     "test.watch": "jest --watch"
   },
   "dependencies": {
-    "morphdom": "2.7.1"
+    "morphdom": "2.7.2"
   },
   "devDependencies": {
-    "@babel/cli": "7.14.3",
-    "@babel/core": "7.14.3",
-    "@babel/preset-env": "7.14.2",
-    "eslint": "7.27.0",
-    "eslint-plugin-jest": "24.3.6",
-    "jest": "^27.0.1",
-    "phoenix": "1.5.9"
+    "@babel/cli": "7.23.4",
+    "@babel/core": "7.23.7",
+    "@babel/preset-env": "7.23.8",
+    "css.escape": "^1.5.1",
+    "eslint": "8.56.0",
+    "eslint-plugin-jest": "27.6.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "phoenix": "1.7.10"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.20.2",
+  "version": "0.20.4",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",
@@ -22,5 +22,12 @@
     "package.json",
     "priv/static/*",
     "assets/js/phoenix_live_view/*"
-  ]
+  ],
+  "devDependencies": {
+    "@playwright/test": "^1.41.0"
+  },
+  "scripts": {
+    "e2e:server": "MIX_ENV=e2e mix run test/e2e/test_helper.exs",
+    "e2e:test": "mix assets.build && cd test/e2e && npx playwright test"
+  }
 }