phoenix_live_view 0.18.18 → 0.19.1

package/README.md

@@ -2,11 +2,10 @@
 
 [![Actions Status](https://github.com/phoenixframework/phoenix_live_view/workflows/CI/badge.svg)](https://github.com/phoenixframework/phoenix_live_view/actions?query=workflow%3ACI) [![Hex.pm](https://img.shields.io/hexpm/v/phoenix_live_view.svg)](https://hex.pm/packages/phoenix_live_view) [![Documentation](https://img.shields.io/badge/documentation-gray)](https://hexdocs.pm/phoenix_live_view)
 
-Phoenix LiveView enables rich, real-time user experiences
-with server-rendered HTML.
+Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML.
 
-Visit the [https://livebeats.fly.dev](https://livebeats.fly.dev/) demo to see the kinds of applications
-you can build, or see a sneak peek below:
+Visit the [https://livebeats.fly.dev](https://livebeats.fly.dev/) demo to see
+the kinds of applications you can build, or see a sneak peek below:
 
 https://user-images.githubusercontent.com/576796/162234098-31b580fe-e424-47e6-b01d-cd2cfcf823a9.mp4
 
@@ -19,42 +18,34 @@ steps:
     $ mix archive.install hex phx_new
     $ mix phx.new demo
 
-## Features
+## Feature highlights
 
-  * Use a declarative model to render HTML on the server
-    over WebSockets with optional LongPolling fallback
+LiveView brings a unified experience to building web applications. You no longer
+have to split work between client and server, across different toolings, layers, and
+abstractions. Instead, LiveView enriches the server with a declarative and powerful
+model while keeping your code closer to your data (and ultimately your source of truth):
 
-  * A rich templating language, called HEEx, with support
-    for function components, slots, HTML validation, and more
+  * **Declarative rendering:** Render HTML on the server over WebSockets with a declarative model, including an optional LongPolling fallback.
 
-  * Smart change tracking - once connected, LiveView sends
-    only what changed to the client, skipping the template
-    markup and reducing the payload. This makes LiveView
-    payloads much smaller than server-rendered HTML and on
-    par with fine-tuned SPA applications
+  * **Rich templating language:** Enjoy HEEx: a templating language that supports function components, slots, HTML validation, verified routes, and more.
 
-  * Live form validation with file upload support
+  * **Small payloads:** LiveView is smart enough to track changes so it only sends what the client needs, making LiveView payloads much smaller than server-rendered HTML.
 
-  * A rich integration API with the client with `phx-click`,
-    `phx-focus`, `phx-blur`, `phx-submit`, etc. `phx-hook` is
-    included for the cases where you have to write JavaScript
+  * **Live form validation:** LiveView supports real-time form validation out of the box. Create rich user interfaces with features like uploads, nested inputs, and [specialized recovery](https://hexdocs.pm/phoenix_live_view/form-bindings.html#recovery-following-crashes-or-disconnects).
+  
+  * **File uploads:** Real-time file uploads with progress indicators and image previews. Process your uploads on the fly or submit them to your desired cloud service.
 
-  * Perform optimistic updates and transitions via JavaScript
-    commands (`Phoenix.LiveView.JS`)
+  * **Rich integration API:** Use the rich integration API to interact with the client, with `phx-click`, `phx-focus`, `phx-blur`, `phx-submit`, and `phx-hook` included for cases where you have to write JavaScript.
 
-  * Code reuse via stateful components, which break templates,
-    state, and event handling into reusable bits, which is essential
-    in large applications
+  * **Optimistic updates and transitions:** Perform optimistic updates and transitions with JavaScript commands via `Phoenix.LiveView.JS`.
 
-  * Live navigation to enrich links and redirects to only load the
-    minimum amount of content as users navigate between pages
+  * **Loose coupling:** Reuse more code via stateful components with loosely-coupled templates, state, and event handling — a must for enterprise application development.
 
-  * A latency simulator so you can emulate how slow clients will
-    interact with your application
+  * **Live navigation:** Enriched links and redirects are just more ways LiveView keeps your app light and performant. Clients load the minimum amount of content needed as users navigate around your app without any compromise in user experience.
 
-  * Testing tools that allow you to write a confident test suite
-    without the complexity of running a whole browser alongside
-    your tests
+  * **Latency simulator:** Emulate how slow clients will interact with your application with the latency simulator.
+
+  * **Robust test suite:** Write tests with confidence alongside Phoenix LiveView built-in testing tools. No more running a whole browser alongside your tests.
 
 ## Official announcements
 
@@ -72,11 +63,9 @@ See our existing comprehensive [docs](https://hexdocs.pm/phoenix_live_view) and
 
 ## Installation
 
-There are currently two methods for installing LiveView. For projects that
-require more stability, it is recommended that you install using the
-[installation guide on HexDocs](https://hexdocs.pm/phoenix_live_view/installation.html).
-If you want to use the latest features, you should follow the instructions
-given in the markdown file [here](guides/introduction/installation.md).
+LiveView is included by default in all new Phoenix v1.6+ applications and
+later. If you have an older existing Phoenix app and you wish to add
+LiveView, see [the installation guide on HexDocs](https://hexdocs.pm/phoenix_live_view/installation.html).
 
 ## What makes LiveView unique?
 
@@ -115,7 +104,7 @@ anywhere else:
     the system. Do you want to notify a user that their best friend
     just connected? This is easily done without a single line of
     custom JavaScript and with no extra external dependencies
-    (no extra databases, no extra message queues, etc.).
+    (no extra databases, no Redis, no extra message queues, etc.).
 
   * LiveView performs change tracking: whenever you change a value on
     the server, LiveView will send to the client only the values that

package/assets/js/phoenix_live_view/constants.js

@@ -24,12 +24,16 @@ export const PHX_SKIP = "data-phx-skip"
 export const PHX_PRUNE = "data-phx-prune"
 export const PHX_PAGE_LOADING = "page-loading"
 export const PHX_CONNECTED_CLASS = "phx-connected"
-export const PHX_DISCONNECTED_CLASS = "phx-loading"
+export const PHX_LOADING_CLASS = "phx-loading"
 export const PHX_NO_FEEDBACK_CLASS = "phx-no-feedback"
 export const PHX_ERROR_CLASS = "phx-error"
+export const PHX_CLIENT_ERROR_CLASS = "phx-client-error"
+export const PHX_SERVER_ERROR_CLASS = "phx-server-error"
 export const PHX_PARENT_ID = "data-phx-parent-id"
 export const PHX_MAIN = "data-phx-main"
 export const PHX_ROOT_ID = "data-phx-root-id"
+export const PHX_VIEWPORT_TOP = "viewport-top"
+export const PHX_VIEWPORT_BOTTOM = "viewport-bottom"
 export const PHX_TRIGGER_ACTION = "trigger-action"
 export const PHX_FEEDBACK_FOR = "feedback-for"
 export const PHX_HAS_FOCUSED = "phx-has-focused"
@@ -49,6 +53,7 @@ export const PHX_DEBOUNCE = "debounce"
 export const PHX_THROTTLE = "throttle"
 export const PHX_UPDATE = "update"
 export const PHX_STREAM = "stream"
+export const PHX_STREAM_REF = "data-phx-stream"
 export const PHX_KEY = "key"
 export const PHX_PRIVATE = "phxPrivate"
 export const PHX_AUTO_RECOVER = "auto-recover"

package/assets/js/phoenix_live_view/dom.js

@@ -60,15 +60,22 @@ let DOM = {
 
   wantsNewTab(e){
     let wantsNewTab = e.ctrlKey || e.shiftKey || e.metaKey || (e.button && e.button === 1)
-    return wantsNewTab || e.target.getAttribute("target") === "_blank"
+    let isDownload = (e.target instanceof HTMLAnchorElement && e.target.hasAttribute("download"))
+    let isTargetBlank = e.target.getAttribute("target") === "_blank"
+    return wantsNewTab || isTargetBlank || isDownload
   },
 
   isUnloadableFormSubmit(e){
     return !e.defaultPrevented && !this.wantsNewTab(e)
   },
 
-  isNewPageHref(href, currentLocation){
+  isNewPageClick(e, currentLocation){
+    let href = e.target instanceof HTMLAnchorElement ? e.target.getAttribute("href") : null
     let url
+
+    if(e.defaultPrevented || href === null || this.wantsNewTab(e)){ return false }
+    if(href.startsWith("mailto:") || href.startsWith("tel:")){ return false }
+
     try {
       url = new URL(href)
     } catch(e) {
@@ -181,6 +188,7 @@ let DOM = {
   debounce(el, event, phxDebounce, defaultDebounce, phxThrottle, defaultThrottle, asyncFilter, callback){
     let debounce = el.getAttribute(phxDebounce)
     let throttle = el.getAttribute(phxThrottle)
+
     if(debounce === ""){ debounce = defaultDebounce }
     if(throttle === ""){ throttle = defaultThrottle }
     let value = debounce || throttle
@@ -259,14 +267,18 @@ let DOM = {
     return currentCycle
   },
 
-  discardError(container, el, phxFeedbackFor){
-    let field = el.getAttribute && el.getAttribute(phxFeedbackFor)
-    // TODO: Remove id lookup after we update Phoenix to use input_name instead of input_id
-    let input = field && container.querySelector(`[id="${field}"], [name="${field}"], [name="${field}[]"]`)
-    if(!input){ return }
+  maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom){
+    if(el.hasAttribute && (el.hasAttribute(phxViewportTop) || el.hasAttribute(phxViewportBottom))){
+      el.setAttribute("data-phx-hook", "Phoenix.InfiniteScroll")
+    }
+  },
 
+  maybeHideFeedback(container, input, phxFeedbackFor){
     if(!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))){
-      el.classList.add(PHX_NO_FEEDBACK_CLASS)
+      let feedbacks = [input.name]
+      if(input.name.endsWith("[]")){ feedbacks.push(input.name.slice(0, -2)) }
+      let selector = feedbacks.map(f => `[${phxFeedbackFor}="${f}"]`).join(", ")
+      DOM.all(container, selector, el => el.classList.add(PHX_NO_FEEDBACK_CLASS))
     }
   },
 

package/assets/js/phoenix_live_view/dom_patch.js

@@ -10,6 +10,9 @@ import {
   PHX_TRIGGER_ACTION,
   PHX_UPDATE,
   PHX_STREAM,
+  PHX_STREAM_REF,
+  PHX_VIEWPORT_TOP,
+  PHX_VIEWPORT_BOTTOM,
 } from "./constants"
 
 import {
@@ -83,8 +86,11 @@ export default class DOMPatch {
     let phxUpdate = liveSocket.binding(PHX_UPDATE)
     let phxFeedbackFor = liveSocket.binding(PHX_FEEDBACK_FOR)
     let disableWith = liveSocket.binding(PHX_DISABLE_WITH)
+    let phxViewportTop = liveSocket.binding(PHX_VIEWPORT_TOP)
+    let phxViewportBottom = liveSocket.binding(PHX_VIEWPORT_BOTTOM)
     let phxTriggerExternal = liveSocket.binding(PHX_TRIGGER_ACTION)
     let added = []
+    let trackedInputs = []
     let updates = []
     let appendPrependUpdates = []
 
@@ -98,16 +104,18 @@ export default class DOMPatch {
     this.trackBefore("updated", container, container)
 
     liveSocket.time("morphdom", () => {
-      this.streams.forEach(([inserts, deleteIds]) => {
-        this.streamInserts = Object.assign(this.streamInserts, inserts)
+      this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
+        Object.entries(inserts).forEach(([key, [streamAt, limit]]) => {
+          this.streamInserts[key] = {ref, streamAt, limit}
+        })
+        if(reset !== undefined){
+          DOM.all(container, `[${PHX_STREAM_REF}="${ref}"]`, child => {
+            this.removeStreamChildElement(child)
+          })
+        }
         deleteIds.forEach(id => {
           let child = container.querySelector(`[id="${id}"]`)
-          if(child){
-            if(!this.maybePendingRemove(child)){
-              child.remove()
-              this.onNodeDiscarded(child)
-            }
-          }
+          if(child){ this.removeStreamChildElement(child) }
         })
       })
 
@@ -120,8 +128,10 @@ export default class DOMPatch {
         skipFromChildren: (from) => { return from.getAttribute(phxUpdate) === PHX_STREAM },
         // tell morphdom how to add a child
         addChild: (parent, child) => {
-          let streamAt = child.id ? this.streamInserts[child.id] : undefined
-          if(streamAt === undefined) { return parent.appendChild(child) }
+          let {ref, streamAt, limit} = this.getStreamInsert(child)
+          if(ref === undefined) { return parent.appendChild(child) }
+
+          DOM.putSticky(child, PHX_STREAM_REF, el => el.setAttribute(PHX_STREAM_REF, ref))
 
           // streaming
           if(streamAt === 0){
@@ -132,12 +142,28 @@ export default class DOMPatch {
             let sibling = Array.from(parent.children)[streamAt]
             parent.insertBefore(child, sibling)
           }
+          let children = limit !== null && Array.from(parent.children)
+          let childrenToRemove = []
+          if(limit && limit < 0 && children.length > limit * -1){
+            childrenToRemove = children.slice(0, children.length + limit)
+          } else if(limit && limit >= 0 && children.length > limit){
+            childrenToRemove = children.slice(limit)
+          }
+          childrenToRemove.forEach(removeChild => {
+            // do not remove child as part of limit if we are re-adding it
+            if(!this.streamInserts[removeChild.id]){
+              this.removeStreamChildElement(removeChild)
+            }
+          })
         },
         onBeforeNodeAdded: (el) => {
+          DOM.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom)
           this.trackBefore("added", el)
           return el
         },
         onNodeAdded: (el) => {
+          if(el.getAttribute){ this.maybeReOrderStream(el) }
+
           // hack to fix Safari handling of img srcset and video tags
           if(el instanceof HTMLImageElement && el.srcset){
             el.srcset = el.srcset
@@ -147,8 +173,10 @@ export default class DOMPatch {
           if(DOM.isNowTriggerFormExternal(el, phxTriggerExternal)){
             externalFormTriggered = el
           }
-          //input handling
-          DOM.discardError(targetContainer, el, phxFeedbackFor)
+
+          if(el.getAttribute && el.getAttribute("name") && DOM.isFormInput(el)){
+            trackedInputs.push(el)
+          }
           // nested view handling
           if((DOM.isPhxChild(el) && view.ownsElement(el)) || DOM.isPhxSticky(el) && view.ownsElement(el.parentNode)){
             this.trackAfter("phxChildAdded", el)
@@ -159,7 +187,7 @@ export default class DOMPatch {
         onBeforeNodeDiscarded: (el) => {
           if(el.getAttribute && el.getAttribute(PHX_PRUNE) !== null){ return true }
           if(el.parentElement !== null && el.id &&
-             DOM.isPhxUpdate(el.parentElement, phxUpdate, [PHX_STREAM, "append", "prepend"])){
+            DOM.isPhxUpdate(el.parentElement, phxUpdate, [PHX_STREAM, "append", "prepend"])){
             return false
           }
           if(this.maybePendingRemove(el)){ return false }
@@ -207,7 +235,6 @@ export default class DOMPatch {
 
           // input handling
           DOM.copyPrivates(toEl, fromEl)
-          DOM.discardError(targetContainer, toEl, phxFeedbackFor)
 
           let isFocusedFormEl = focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl)
           if(isFocusedFormEl && fromEl.type !== "hidden"){
@@ -216,13 +243,19 @@ export default class DOMPatch {
             DOM.syncAttrsToProps(fromEl)
             updates.push(fromEl)
             DOM.applyStickyOperations(fromEl)
+            trackedInputs.push(fromEl)
             return false
           } else {
             if(DOM.isPhxUpdate(toEl, phxUpdate, ["append", "prepend"])){
               appendPrependUpdates.push(new DOMPostMorphRestorer(fromEl, toEl, toEl.getAttribute(phxUpdate)))
             }
+
+            DOM.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom)
             DOM.syncAttrsToProps(toEl)
             DOM.applyStickyOperations(toEl)
+            if(toEl.getAttribute("name") && DOM.isFormInput(toEl)){
+              trackedInputs.push(toEl)
+            }
             this.trackBefore("updated", fromEl, toEl)
             return true
           }
@@ -238,6 +271,10 @@ export default class DOMPatch {
       })
     }
 
+    trackedInputs.forEach(input => {
+      DOM.maybeHideFeedback(targetContainer, input, phxFeedbackFor)
+    })
+
     liveSocket.silenceEvents(() => DOM.restoreFocus(focused, selectionStart, selectionEnd))
     DOM.dispatchEvent(document, "phx:update")
     added.forEach(el => this.trackAfter("added", el))
@@ -267,10 +304,25 @@ export default class DOMPatch {
     }
   }
 
+  removeStreamChildElement(child){
+    if(!this.maybePendingRemove(child)){
+      child.remove()
+      this.onNodeDiscarded(child)
+    }
+  }
+
+  getStreamInsert(el){
+    let insert = el.id ? this.streamInserts[el.id] : {}
+    return insert || {}
+  }
+
   maybeReOrderStream(el){
-    let streamAt = el.id ? this.streamInserts[el.id] : undefined
+    let {ref, streamAt, limit} = this.getStreamInsert(el)
     if(streamAt === undefined){ 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))
+
     if(streamAt === 0){
       el.parentElement.insertBefore(el, el.parentElement.firstElementChild)
     } else if(streamAt > 0){

package/assets/js/phoenix_live_view/hooks.js

@@ -57,4 +57,111 @@ let Hooks = {
   }
 }
 
+let scrollTop = () => document.documentElement.scrollTop || document.body.scrollTop
+let winHeight = () => window.innerHeight || document.documentElement.clientHeight
+
+let isAtViewportTop = (el) => {
+  let rect = el.getBoundingClientRect()
+  return rect.top >= 0 && rect.left >= 0 && rect.top <= winHeight()
+}
+
+let isAtViewportBottom = (el) => {
+  let rect = el.getBoundingClientRect()
+  return rect.right >= 0 && rect.left >= 0 && rect.bottom <= winHeight()
+}
+
+let isWithinViewport = (el) => {
+  let rect = el.getBoundingClientRect()
+  return rect.top >= 0 && rect.left >= 0 && rect.top <= winHeight()
+}
+
+Hooks.InfiniteScroll = {
+  mounted(){
+    let scrollBefore = scrollTop()
+    let topOverran = false
+    let throttleInterval = 500
+    let pendingOp = null
+
+    let onTopOverrun = this.throttle(throttleInterval, (topEvent, firstChild) => {
+      pendingOp = () => true
+      this.liveSocket.execJSHookPush(this.el, topEvent, {id: firstChild.id, _overran: true}, () => {
+        pendingOp = null
+      })
+    })
+
+    let onFirstChildAtTop = this.throttle(throttleInterval, (topEvent, firstChild) => {
+      pendingOp = () => firstChild.scrollIntoView({block: "start"})
+      this.liveSocket.execJSHookPush(this.el, topEvent, {id: firstChild.id}, () => {
+        pendingOp = null
+        if(!isWithinViewport(firstChild)){ firstChild.scrollIntoView({block: "start"}) }
+      })
+    })
+
+    let onLastChildAtBottom = this.throttle(throttleInterval, (bottomEvent, lastChild) => {
+      pendingOp = () => lastChild.scrollIntoView({block: "end"})
+      this.liveSocket.execJSHookPush(this.el, bottomEvent, {id: lastChild.id}, () => {
+        pendingOp = null
+        if(!isWithinViewport(lastChild)){ lastChild.scrollIntoView({block: "end"}) }
+      })
+    })
+
+    this.onScroll = (e) => {
+      let scrollNow = scrollTop()
+
+      if(pendingOp){
+        scrollBefore = scrollNow
+        return pendingOp()
+      }
+      let rect = this.el.getBoundingClientRect()
+      let topEvent = this.el.getAttribute(this.liveSocket.binding("viewport-top"))
+      let bottomEvent = this.el.getAttribute(this.liveSocket.binding("viewport-bottom"))
+      let lastChild = this.el.lastElementChild
+      let firstChild = this.el.firstElementChild
+      let isScrollingUp = scrollNow < scrollBefore
+      let isScrollingDown = scrollNow > scrollBefore
+
+      // el overran while scrolling up
+      if(isScrollingUp && topEvent && !topOverran && rect.top >= 0){
+        topOverran = true
+        onTopOverrun(topEvent, firstChild)
+      } else if(isScrollingDown && topOverran && rect.top <= 0){
+        topOverran = false
+      }
+
+      if(topEvent && isScrollingUp && isAtViewportTop(firstChild)){
+        onFirstChildAtTop(topEvent, firstChild)
+      } else if(bottomEvent && isScrollingDown && isAtViewportBottom(lastChild)){
+        onLastChildAtBottom(bottomEvent, lastChild)
+      }
+      scrollBefore = scrollNow
+    }
+    window.addEventListener("scroll", this.onScroll)
+  },
+  destroyed(){ window.removeEventListener("scroll", this.onScroll) },
+
+  throttle(interval, callback){
+    let lastCallAt = 0
+    let timer
+
+    return (...args) => {
+      let now = Date.now()
+      let remainingTime = interval - (now - lastCallAt)
+
+      if(remainingTime <= 0 || remainingTime > interval){
+        if(timer) {
+          clearTimeout(timer)
+          timer = null
+        }
+        lastCallAt = now
+        callback(...args)
+      } else if(!timer){
+        timer = setTimeout(() => {
+          lastCallAt = Date.now()
+          timer = null
+          callback(...args)
+        }, remainingTime)
+      }
+    }
+  }
+}
 export default Hooks

package/assets/js/phoenix_live_view/js.js

@@ -5,13 +5,16 @@ let focusStack = null
 
 let JS = {
   exec(eventType, phxEvent, view, sourceEl, defaults){
-    let [defaultKind, defaultArgs] = defaults || [null, {}]
+    let [defaultKind, defaultArgs] = defaults || [null, {callback: defaults && defaults.callback}]
     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)
+        args.callback = args.callback || defaultArgs.callback
       }
       this.filterToEls(sourceEl, args).forEach(el => {
         this[`exec_${kind}`](eventType, phxEvent, view, sourceEl, el, args)
@@ -45,21 +48,21 @@ let JS = {
   exec_push(eventType, phxEvent, view, sourceEl, el, args){
     if(!view.isConnected()){ return }
 
-    let {event, data, target, page_loading, loading, value, dispatcher} = args
+    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(eventType === "change"){
-        let {newCid, _target, callback} = args
+        let {newCid, _target} = args
         _target = _target || (DOM.isFormInput(sourceEl) ? sourceEl.name : undefined)
         if(_target){ pushOpts._target = _target }
         targetView.pushInput(sourceEl, targetCtx, newCid, event || phxEvent, pushOpts, callback)
       } else if(eventType === "submit"){
         let {submitter} = args
-        targetView.submitForm(sourceEl, targetCtx, event || phxEvent, submitter, pushOpts)
+        targetView.submitForm(sourceEl, targetCtx, event || phxEvent, submitter, pushOpts, callback)
       } else {
-        targetView.pushEvent(eventType, sourceEl, targetCtx, event || phxEvent, data, pushOpts)
+        targetView.pushEvent(eventType, sourceEl, targetCtx, event || phxEvent, data, pushOpts, callback)
       }
     })
   },

package/assets/js/phoenix_live_view/live_socket.js

@@ -98,6 +98,7 @@ import {
   PHX_FEEDBACK_FOR,
   RELOAD_JITTER_MIN,
   RELOAD_JITTER_MAX,
+  PHX_REF,
 } from "./constants"
 
 import {
@@ -239,6 +240,12 @@ export default class LiveSocket {
 
   // private
 
+  execJSHookPush(el, phxEvent, data, callback){
+    this.withinOwners(el, view => {
+      JS.exec("hook", phxEvent, view, el, ["push", {data, callback}])
+    })
+  }
+
   unload(){
     if(this.unloaded){ return }
     if(this.main && this.isConnected()){ this.log(this.main, "socket", () => ["disconnect for page nav"]) }
@@ -411,9 +418,7 @@ export default class LiveSocket {
     let removeAttr = this.binding("remove")
     elements = elements || DOM.all(document, `[${removeAttr}]`)
     elements.forEach(el => {
-      if(document.body.contains(el)){ // skip children already removed
-        this.execJS(el, el.getAttribute(removeAttr), "remove")
-      }
+      this.execJS(el, el.getAttribute(removeAttr), "remove")
     })
   }
 
@@ -503,8 +508,6 @@ export default class LiveSocket {
     this.boundTopLevelEvents = true
     // enter failsafe reload if server has gone away intentionally, such as "disconnect" broadcast
     this.socket.onClose(event => {
-      // unload when navigating href or form submit (such as for firefox)
-      if(event && event.code === 1001){ return this.unload() }
       // failsafe reload if normal closure and we still have a main LV
       if(event && event.code === 1000 && this.main){ return this.reloadWithJitter(this.main) }
     })
@@ -635,14 +638,15 @@ export default class LiveSocket {
       }
       let phxEvent = target && target.getAttribute(click)
       if(!phxEvent){
-        let href = e.target instanceof HTMLAnchorElement ? e.target.getAttribute("href") : null
-        if(!capture && href !== null && !DOM.wantsNewTab(e) && DOM.isNewPageHref(href, window.location)){
-          this.unload()
-        }
+        if(!capture && DOM.isNewPageClick(e, window.location)){ this.unload() }
         return
       }
+
       if(target.getAttribute("href") === "#"){ e.preventDefault() }
 
+      // noop if we are in the middle of awaiting an ack for this el already
+      if(target.hasAttribute(PHX_REF)){ return }
+
       this.debounce(target, e, "click", () => {
         this.withinOwners(target, view => {
           JS.exec("click", phxEvent, view, target, ["push", {data: this.eventMeta("click", e, target)}])

package/assets/js/phoenix_live_view/rendered.js

@@ -172,7 +172,7 @@ export default class Rendered {
 
   comprehensionToBuffer(rendered, templates, output){
     let {[DYNAMICS]: dynamics, [STATIC]: statics, [STREAM]: stream} = rendered
-    let [_inserts, deleteIds] = stream || [{}, []]
+    let [_ref, _inserts, deleteIds, reset] = stream || [null, {}, [], null]
     statics = this.templateStatic(statics, templates)
     let compTemplates = templates || rendered[TEMPLATES]
     for(let d = 0; d < dynamics.length; d++){
@@ -184,8 +184,8 @@ export default class Rendered {
       }
     }
 
-    if(stream !== undefined && (rendered[DYNAMICS].length > 0 || deleteIds.length > 0)){
-      rendered[DYNAMICS] = []
+    if(stream !== undefined && (rendered[DYNAMICS].length > 0 || deleteIds.length > 0 || reset)){
+      delete rendered[STREAM]
       output.streams.add(stream)
     }
   }