phoenix_live_view 0.17.2 → 0.17.6

package/CHANGELOG.md

@@ -1,23 +1,70 @@
 # Changelog
 
+## 0.17.6 (2022-01-18)
+
+### Enhancements
+  - Add `JS.set_attribute` and `JS.remove_attribute`
+  - Add `sticky: true` option to `live_render` to maintain a nested child on across live redirects
+  - Dispatch `phx:show-start`, `phx:show-end`, `phx:hide-start` and `phx:hide-end` on `JS.show|hide|toggle`
+  - Add `get_connect_info/2` that also works on disconnected render
+  - Add `LiveSocket` constructor options for configuration failsafe behavior via new `maxReloads`, `reloadJitterMin`, `reloadJitterMax`, `failsafeJitter` options
+
+### Bug fixes
+  - Show form errors after submit even when no changes occur on server
+  - Fix `phx-disable-with` failing to disable elements outside of forms
+  - Fix phx ref tracking leaving elements in awaiting state when targeting an external LiveView
+  - Fix diff on response failing to await for active transitions in certain cases
+  - Fix `phx-click-away` not respecting `phx-target`
+  - Fix "disconnect" broadcast failing to failsafe refresh the page
+  - Fix `JS.push` with `:target` failing to send to correct component in certain cases
+
+### Deprecations
+   - Deprecate `Phoenix.LiveView.get_connect_info/1` in favor of `get_connect_info/2`
+   - Deprecate `Phoenix.LiveViewTest.put_connect_info/2` in favor of calling the relevant functions in `Plug.Conn`
+
+## 0.17.5 (2021-11-02)
+
+### Bug fixes
+  - Do not trigger `phx-click-away` if element is not visible
+  - Fix `phx-remove` failing to tear down nested live children
+
+## 0.17.4 (2021-11-01)
+
+### Bug fixes
+  - Fix variable scoping issues causing various content block or duplication rendering bugs
+
+## 0.17.3 (2021-10-28)
+
+### Enhancements
+  - Support 3-tuple for JS class transitions to support staged animations where a transition class is applied with a starting and ending class
+  - Allow JS commands to be executed on DOM nodes outside of the LiveView container
+
+### Optimization
+  - Avoid duplicate statics inside comprehension. In previous versions, comprehensions were able to avoid duplication only in the content of their root. Now we recursively traverse all comprehension nodes and send the static only once for the whole comprehension. This should massively reduce the cost of sending comprehensions over the wire
+
+### Bug fixes
+  - Fix HTML engine bug causing expressions to be duplicated or not rendered correctly
+  - Fix HTML engine bug causing slots to not be re-rendered when they should have
+  - Fix form recovery being sent to wrong target
+
 ## 0.17.2 (2021-10-22)
 
 ### Bug fixes
   - Fix HTML engine bug causing attribute expressions to be incorrectly evaluated in certain cases
-  - Fix show/hide/toggle custom display not being restored.
+  - Fix show/hide/toggle custom display not being restored
   - Fix default `to` target for `JS.show|hide|dispatch`
-  - Fix form input targetting
+  - Fix form input targeting
 
 ## 0.17.1 (2021-10-21)
 
 ### Bug fixes
-  - Fix SVG element support for phx binding interactions
+  - Fix SVG element support for `phx` binding interactions
 
 ## 0.17.0 (2021-10-21)
 
 ### Breaking Changes
 
-#### on_mount changes
+#### `on_mount` changes
 
 The hook API introduced in LiveView 0.16 has been improved based on feedback.
 LiveView 0.17 removes the custom module-function callbacks for the
@@ -63,17 +110,17 @@ atom `:default`.
 #### LEEx templates in stateful LiveComponents
 
 Stateful LiveComponents (where an `:id` is given) must now return HEEx templates
-(`~H` sigil or `.heex` extension). LEEx temlates (`~L` sigil or `.leex` extension)
+(`~H` sigil or `.heex` extension). LEEx templates (`~L` sigil or `.leex` extension)
 are no longer supported. This addresses bugs and allows stateful components
 to be rendered more efficiently client-side.
 
-#### phx-disconnected class has been replaced with phx-loading
+#### `phx-disconnected` class has been replaced with `phx-loading`
 
-Due to a bug in the newly released Safari 15, the previously used `.phx-disconnected` class has been replaced by a new `.phx-loading` class. The reason for the change is `phx.new` included a `.phx-disconnected` rule in the generated `app.css` which triggers the Safari bug. Renaming the class avoids applying the erronous rule for existing applications. Folks can upgrade by simply renaming their `.phx-disconnected` rules to `.phx-loading`.
+Due to a bug in the newly released Safari 15, the previously used `.phx-disconnected` class has been replaced by a new `.phx-loading` class. The reason for the change is `phx.new` included a `.phx-disconnected` rule in the generated `app.css` which triggers the Safari bug. Renaming the class avoids applying the erroneous rule for existing applications. Folks can upgrade by simply renaming their `.phx-disconnected` rules to `.phx-loading`.
 
-#### phx-capture-click has been deprecated in favor of phx-click-away
+#### `phx-capture-click` has been deprecated in favor of `phx-click-away`
 
-The new phx-click-away binding replaces phx-capture-click and is much more versatile because it can detect "click focus" being lost on containers.
+The new `phx-click-away` binding replaces `phx-capture-click` and is much more versatile because it can detect "click focus" being lost on containers.
 
 #### Removal of previously deprecated functionality
 
@@ -84,23 +131,23 @@ Some functionality that was previously deprecated has been removed:
 
 ### Enhancements
   - Allow slots in function components: they are marked as `<:slot_name>` and can be rendered with `<%= render_slot @slot_name %>`
-  - Add JS command for executing JavaScript utility operations on the client with an extended push API
+  - Add `JS` command for executing JavaScript utility operations on the client with an extended push API
   - Optimize string attributes:
     - If the attribute is a string interpolation, such as `<div class={"foo bar #{@baz}"}>`, only the interpolation part is marked as dynamic
     - If the attribute can be empty, such as "class" and "style", keep the attribute name as static
   - Add a function component for rendering `Phoenix.LiveComponent`. Instead of `<%= live_component FormComponent, id: "form" %>`, you must now do: `<.live_component module={FormComponent} id="form" />`
 
 ### Bug fixes
-  - Fix LiveViews with form recovery failing to properly mount following a reconnect when preceeded by a live redirect
+  - Fix LiveViews with form recovery failing to properly mount following a reconnect when preceded by a live redirect
   - Fix stale session causing full redirect fallback when issuing a `push_redirect` from mount
-  - Add workaround for Safari bug causing img tags with srcset and video with autoplay to fail to render
+  - Add workaround for Safari bug causing `<img>` tags with srcset and video with autoplay to fail to render
   - Support EEx interpolation inside HTML comments in HEEx templates
   - Support HTML tags inside script tags (as in regular HTML)
   - Raise if using quotes in attribute names
   - Include the filename in error messages when it is not possible to parse interpolated attributes
   - Make sure the test client always sends the full URL on `live_patch`/`live_redirect`. This mirrors the behaviour of the JavaScript client
   - Do not reload flash from session on `live_redirect`s
-  - Fix select drop-down flashes in chrome when the DOM is patched during focus
+  - Fix select drop-down flashes in Chrome when the DOM is patched during focus
 
 ### Deprecations
   - `<%= live_component MyModule, id: @user.id, user: @user %>` is deprecated in favor of `<.live_component module={MyModule} id={@user.id} user={@user} />`. Notice the new API requires using HEEx templates. This change allows us to further improve LiveComponent and bring new features such as slots to them.
@@ -112,7 +159,7 @@ Some functionality that was previously deprecated has been removed:
   - Improve HEEx error messages
   - Relax HTML tag validation to support mixed case tags
   - Support self closing HTML tags
-  - Remove requirement for handle_params to be defined for lifecycle hooks
+  - Remove requirement for `handle_params` to be defined for lifecycle hooks
 
 ### Bug fixes
   - Fix pushes failing to include channel `join_ref` on messages
@@ -126,10 +173,10 @@ Some functionality that was previously deprecated has been removed:
 
 ### Enhancements
   - Improve error messages on tokenization
-  - Improve error message if inner_block is missing
+  - Improve error message if `@inner_block` is missing
 
 ### Bug fixes
-  - Fix phx-change form recovery event being sent to wrong component on reconnect when component order changes
+  - Fix `phx-change` form recovery event being sent to wrong component on reconnect when component order changes
 
 ## 0.16.1 (2021-08-26)
 
@@ -140,7 +187,7 @@ Some functionality that was previously deprecated has been removed:
 
 ### Bug fixes
   - Do not generate CSRF tokens for non-POST forms
-  - Do not add compile-time dependencies on on_mount declarations
+  - Do not add compile-time dependencies on `on_mount` declarations
 
 ## 0.16.0 (2021-08-10)
 
@@ -178,7 +225,7 @@ and example usage.
 
 ### New HTML Engine
 
-LiveView v0.16 introduces HEEx (HTML+EEx) templates and the concept of function
+LiveView v0.16 introduces HEEx (HTML + EEx) templates and the concept of function
 components via `Phoenix.Component`. The new HEEx templates validate the markup in
 the template while also providing smarter change tracking as well as syntax
 conveniences to make it easier to build composable components.
@@ -302,6 +349,9 @@ Additionally on the client, the root LiveView element no longer exposes the
 LiveView module name, therefore the `phx-view` attribute is never set.
 Similarly, the `viewName` property of client hooks has been removed.
 
+Codebases calling a custom function `component/3` should rename it or specify its module to avoid a conflict,
+as LiveView introduces a macro with that name and it is special cased by the underlying engine.
+
 ### Enhancements
   - Introduce HEEx templates
   - Introduce `Phoenix.Component`
@@ -320,12 +370,12 @@ Similarly, the `viewName` property of client hooks has been removed.
 
 ### Bug fixes
   - Make sure components are loaded on `render_component` to ensure all relevant callbacks are invoked
-  - Fix `Phoenix.LiveViewTest.page_title` returning nil in some cases
+  - Fix `Phoenix.LiveViewTest.page_title` returning `nil` in some cases
   - Fix buttons being re-enabled when explicitly set to disabled on server
   - Fix live patch failing to update URL when live patch link is patched again via `handle_params` within the same callback lifecycle
   - Fix `phx-no-feedback` class not applied when page is live-patched
-  - Fix `DOMException, querySelector, not a valid selector` when performing DOM lookups on non-stanard IDs
-  - Fix select dropdown flashing close/opened when assigns are updated on Chrome/MacOS
+  - Fix `DOMException, querySelector, not a valid selector` when performing DOM lookups on non-standard IDs
+  - Fix select dropdown flashing close/opened when assigns are updated on Chrome/macOS
   - Fix error with multiple `live_file_input` in one form
   - Fix race condition in `showError` causing null `querySelector`
   - Fix statics not resolving correctly across recursive diffs
@@ -350,7 +400,7 @@ Similarly, the `viewName` property of client hooks has been removed.
   - Fix live patch failing to update URL when live patch link is patched again from `handle_params`
   - Fix regression in `LiveViewTest.render_upload/3` when using channel uploads and progress callback
   - Fix component uploads not being cleaned up on remove
-  - Fix KeyError on LiveView reconnect when an active upload was previously in progress
+  - Fix `KeyError` on LiveView reconnect when an active upload was previously in progress
 
 ### Enhancements
   - Support function components via `component/3`
@@ -376,8 +426,8 @@ Similarly, the `viewName` property of client hooks has been removed.
   - Fix nested `live_render`'s causing remound of child LiveView even when ID does not change
   - Do not attempt push hook events unless connected
   - Fix preflighted refs causing `auto_upload: true` to fail to submit form
-  - Replace single upload entry when max_entires is 1 instead of accumulating multiple file selections
-  - Fix static_path in open_browser failing to load stylesheets
+  - Replace single upload entry when `max_entries` is 1 instead of accumulating multiple file selections
+  - Fix `static_path` in `open_browser` failing to load stylesheets
 
 ## 0.15.3 (2021-01-02)
 
@@ -387,11 +437,11 @@ Similarly, the `viewName` property of client hooks has been removed.
 ## 0.15.2 (2021-01-01)
 
 ### Backwards incompatible changes
-  - Remove `beforeDestroy` from phx-hook callbacks
+  - Remove `beforeDestroy` from `phx-hook` callbacks
 
 ### Bug fixes
   - Fix form recovery failing to send input on first connection failure
-  - Fix hooks not getting remounted after liveview reconnect
+  - Fix hooks not getting remounted after LiveView reconnect
   - Fix hooks `reconnected` callback being fired with no prior disconnect
 
 ## 0.15.1 (2020-12-20)
@@ -401,12 +451,12 @@ Similarly, the `viewName` property of client hooks has been removed.
   - Run `consume_uploaded_entries` in LiveView caller process
 
 ### Bug fixes
-  - Fix hooks not getting remounted after liveview recovery
+  - Fix hooks not getting remounted after LiveView recovery
   - Fix bug causing reload with jitter on timeout from previously closed channel
   - Fix component child nodes being lost when component patch goes from single root node to multiple child siblings
   - Fix `phx-capture-click` triggering on mouseup during text selection
   - Fix LiveView `push_event`'s not clearing up in components
-  - Fix textarea being patched by LV while focused
+  - Fix `<textarea>` being patched by LiveView while focused
 
 ## 0.15.0 (2020-11-20)
 
@@ -437,7 +487,7 @@ Similarly, the `viewName` property of client hooks has been removed.
 ### Bug fixes
   - Fix `redirect(socket, external: ...)` when returned from an event
   - Properly follow location hashes on live patch/redirect
-  - Fix failure in `Phoenix.LiveViewTest` when phx-update has non-HTML nodes as children
+  - Fix failure in `Phoenix.LiveViewTest` when `phx-update` has non-HTML nodes as children
   - Fix `phx_trigger_action` submitting the form before the DOM updates are complete
 
 ## 0.14.6 (2020-09-21)
@@ -480,16 +530,16 @@ Similarly, the `viewName` property of client hooks has been removed.
   - Fix `LiveViewTest` failing to patch children properly for append/prepend based phx-update's
   - Fix argument error when providing `:as` option to a `live` route
   - Fix page becoming unresponsive when the server crashes while handling a live patch
-  - Fix empty diff causing pending data-ref based updates, such as classes and disable-with content to not be updated
+  - Fix empty diff causing pending data-ref based updates, such as classes and `phx-disable-with` content to not be updated
   - Fix bug where throttling keydown events would eat key presses
-  - Fix textarea's failing to be disabled on form submit
-  - Fix text node DOM memory leak when using phx-update append/prepend
+  - Fix `<textarea>`'s failing to be disabled on form submit
+  - Fix text node DOM memory leak when using `phx-update` append/prepend
 
 ### Enhancements
   - Allow `:router` to be given to `render_component`
   - Display file on compile warning for `~L`
   - Log error on client when using a hook without a DOM ID
-  - Optimize phx-update append/prepend based DOM updates
+  - Optimize `phx-update` append/prepend based DOM updates
 
 ## 0.14.1 (2020-07-09)
 
@@ -502,7 +552,7 @@ Similarly, the `viewName` property of client hooks has been removed.
 ### Bug fixes
   - Fix IE11 issue where `document.activeElement` creates a null reference
   - Fix setup and teardown of root views when explicitly calling `liveSocket.disconnect()` followed by `liveSocket.connect()`
-  - Fix `error_tag` failing to be displayed for non-text based inputs such as selects and checkboxes as the phx-no-feedback class was always applied
+  - Fix `error_tag` failing to be displayed for non-text based inputs such as selects and checkboxes as the `phx-no-feedback` class was always applied
   - Fix `phx-error` class being applied on `live_redirect`
   - Properly handle Elixir's special variables, such as `__MODULE__`
   - No longer set disconnected class during patch
@@ -528,7 +578,7 @@ Similarly, the `viewName` property of client hooks has been removed.
 
 ### Bug fixes
   - Fix duplicate debounced events from being triggered on blur with timed debounce
-  - Fix client error when live_redirected'd route results in a redirect to a non-live route on the server
+  - Fix client error when `live_redirect`ed route results in a redirect to a non-live route on the server
   - Fix DOM siblings being removed when a rootless component is updated
   - Fix debounced input failing to send last change when blurred via Tab, Meta, or other non-printable keys
 
@@ -543,7 +593,7 @@ Similarly, the `viewName` property of client hooks has been removed.
 ## 0.13.1 (2020-05-26)
 
 ### Bug fixes
-  - Fix forced page refresh when push_redirect from a live_redirect
+  - Fix forced page refresh when `push_redirect` from a `live_redirect`
 
 ### Enhancements
   - Optimize component diffs to avoid sending empty diffs

package/README.md

@@ -17,9 +17,14 @@ steps:
   * Use a declarative model to render HTML on the server
     over WebSockets with optional LongPolling fallback
 
-  * Smart templating and change tracking - after connected,
-    LiveView sends only what changed to the client, skipping
-    the template markup and reducing the payload
+  * A rich templating language, called HEEx, with support
+    for function components, slots, HTML validation, and more
+
+  * Smart change tracking - after 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
 
   * Live form validation with file upload support
 
@@ -27,9 +32,12 @@ steps:
     `phx-focus`, `phx-blur`, `phx-submit`, etc. `phx-hook` is
     included for the cases where you have to write JavaScript
 
-  * Code reuse via components, which break templates, state, and
-    event handling into reusable bits, which is essential in large
-    applications
+  * Perform optimistic updates and transitions via JavaScript
+    commands (`Phoenix.LiveView.JS`)
+
+  * Code reuse via stateful components, which break templates,
+    state, and event handling into reusable bits, which is essential
+    in large applications
 
   * Live navigation to enrich links and redirects to only load the
     minimum amount of content as users navigate between pages
@@ -106,14 +114,6 @@ anywhere else:
     sent over the wire. This is achievable thanks to Elixir's
     immutability and its ability to treat code as data.
 
-  * LiveView separates the static and dynamic parts of your templates.
-    When you first render a page, Phoenix LiveView renders and sends
-    the whole template to the browser. Then, for any new update, only
-    the modified dynamic content is resent. This alongside diff tracking
-    makes it so LiveView only sends a few bytes on every update, instead
-    of sending kilobytes on every other user interaction - which would
-    be detrimental to the user experience.
-
 ## Browser Support
 
 All current Chrome, Safari, Firefox, and MS Edge are supported.
@@ -148,7 +148,7 @@ import "core-js/features/set"
 import "core-js/features/url"
 
 import {Socket} from "phoenix"
-import LiveSocket from "phoenix_live_view"
+import {LiveSocket} from "phoenix_live_view"
 ...
 ```
 

package/assets/js/phoenix_live_view/constants.js

@@ -1,7 +1,8 @@
 
 export const CONSECUTIVE_RELOADS = "consecutive-reloads"
 export const MAX_RELOADS = 10
-export const RELOAD_JITTER = [1000, 3000]
+export const RELOAD_JITTER_MIN = 1000
+export const RELOAD_JITTER_MAX = 3000
 export const FAILSAFE_JITTER = 30000
 export const PHX_EVENT_CLASSES = [
   "phx-click-loading", "phx-change-loading", "phx-submit-loading",
@@ -12,6 +13,7 @@ export const PHX_LIVE_LINK = "data-phx-link"
 export const PHX_TRACK_STATIC = "track-static"
 export const PHX_LINK_STATE = "data-phx-link-state"
 export const PHX_REF = "data-phx-ref"
+export const PHX_REF_SRC = "data-phx-ref-src"
 export const PHX_TRACK_UPLOADS = "track-uploads"
 export const PHX_UPLOAD_REF = "data-phx-upload-ref"
 export const PHX_PREFLIGHTED_REFS = "data-phx-preflighted-refs"
@@ -32,11 +34,12 @@ export const PHX_ROOT_ID = "data-phx-root-id"
 export const PHX_TRIGGER_ACTION = "trigger-action"
 export const PHX_FEEDBACK_FOR = "feedback-for"
 export const PHX_HAS_FOCUSED = "phx-has-focused"
-export const FOCUSABLE_INPUTS = ["text", "textarea", "number", "email", "password", "search", "tel", "url", "date", "time"]
+export const FOCUSABLE_INPUTS = ["text", "textarea", "number", "email", "password", "search", "tel", "url", "date", "time", "datetime-local", "color", "range"]
 export const CHECKABLE_INPUTS = ["checkbox", "radio"]
 export const PHX_HAS_SUBMITTED = "phx-has-submitted"
 export const PHX_SESSION = "data-phx-session"
 export const PHX_VIEW_SELECTOR = `[${PHX_SESSION}]`
+export const PHX_STICKY = "data-phx-sticky"
 export const PHX_STATIC = "data-phx-static"
 export const PHX_READONLY = "data-phx-readonly"
 export const PHX_DISABLED = "data-phx-disabled"
@@ -74,3 +77,4 @@ export const COMPONENTS = "c"
 export const EVENTS = "e"
 export const REPLY = "r"
 export const TITLE = "t"
+export const TEMPLATES = "p"

package/assets/js/phoenix_live_view/dom.js

@@ -12,11 +12,13 @@ import {
   PHX_PARENT_ID,
   PHX_PRIVATE,
   PHX_REF,
+  PHX_REF_SRC,
   PHX_ROOT_ID,
   PHX_SESSION,
   PHX_STATIC,
   PHX_UPLOAD_REF,
   PHX_VIEW_SELECTOR,
+  PHX_STICKY,
   THROTTLED
 } from "./constants"
 
@@ -75,6 +77,8 @@ let DOM = {
     return el.getAttribute && updateTypes.indexOf(el.getAttribute(phxUpdate)) >= 0
   },
 
+  findPhxSticky(el){ return this.all(el, `[${PHX_STICKY}]`) },
+
   findPhxChildren(el, parentId){
     return this.all(el, `${PHX_VIEW_SELECTOR}[${PHX_PARENT_ID}="${parentId}"]`)
   },
@@ -238,6 +242,14 @@ let DOM = {
     return node.getAttribute && node.getAttribute(PHX_PARENT_ID)
   },
 
+  isPhxSticky(node){
+    return node.getAttribute && node.getAttribute(PHX_STICKY) !== null
+  },
+
+  firstPhxChild(el){
+    return this.isPhxChild(el) ? el : this.all(el, `[${PHX_PARENT_ID}]`)[0]
+  },
+
   dispatchEvent(target, eventString, detail = {}){
     let event = new CustomEvent(eventString, {bubbles: true, cancelable: true, detail: detail})
     target.dispatchEvent(event)
@@ -314,6 +326,7 @@ let DOM = {
   syncPendingRef(fromEl, toEl, disableWith){
     let ref = fromEl.getAttribute(PHX_REF)
     if(ref === null){ return true }
+    let refSrc = fromEl.getAttribute(PHX_REF_SRC)
 
     if(DOM.isFormInput(fromEl) || fromEl.getAttribute(disableWith) !== null){
       if(DOM.isUploadInput(fromEl)){ DOM.mergeAttrs(fromEl, toEl, {isIgnored: true}) }
@@ -324,6 +337,7 @@ let DOM = {
         fromEl.classList.contains(className) && toEl.classList.add(className)
       })
       toEl.setAttribute(PHX_REF, ref)
+      toEl.setAttribute(PHX_REF_SRC, refSrc)
       return true
     }
   },

package/assets/js/phoenix_live_view/dom_patch.js

@@ -114,14 +114,14 @@ export default class DOMPatch {
           //input handling
           DOM.discardError(targetContainer, el, phxFeedbackFor)
           // nested view handling
-          if(DOM.isPhxChild(el) && view.ownsElement(el)){
+          if((DOM.isPhxChild(el) && view.ownsElement(el)) || DOM.isPhxSticky(el) && view.ownsElement(el.parentNode)){
             this.trackAfter("phxChildAdded", el)
           }
           added.push(el)
         },
         onNodeDiscarded: (el) => {
           // nested view handling
-          if(DOM.isPhxChild(el)){ liveSocket.destroyViewByEl(el) }
+          if(DOM.isPhxChild(el) || DOM.isPhxSticky(el)){ liveSocket.destroyViewByEl(el) }
           this.trackAfter("discarded", el)
         },
         onBeforeNodeDiscarded: (el) => {
@@ -143,6 +143,7 @@ export default class DOMPatch {
         onBeforeElUpdated: (fromEl, toEl) => {
           DOM.cleanChildNodes(toEl, phxUpdate)
           if(this.skipCIDSibling(toEl)){ return false }
+          if(DOM.isPhxSticky(fromEl)){ return false }
           if(DOM.isIgnored(fromEl, phxUpdate)){
             this.trackBefore("updated", fromEl, toEl)
             DOM.mergeAttrs(fromEl, toEl, {isIgnored: true})
@@ -211,7 +212,11 @@ export default class DOMPatch {
     if(pendingRemoves.length > 0){
       liveSocket.transitionRemoves(pendingRemoves)
       liveSocket.requestDOMUpdate(() => {
-        pendingRemoves.forEach(el => el.remove())
+        pendingRemoves.forEach(el => {
+          let child = DOM.firstPhxChild(el)
+          if(child){ liveSocket.destroyViewByEl(child) }
+          el.remove()
+        })
         this.trackAfter("transitionsDiscarded", pendingRemoves)
       })
     }