npm - phoenix_live_view - Versions diffs - 0.17.7 → 0.17.8 - Mend

phoenix_live_view 0.17.7 → 0.17.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +23 -7
package/README.md +1 -1
package/assets/js/phoenix_live_view/dom.js +5 -3
package/assets/js/phoenix_live_view/js.js +13 -10
package/assets/js/phoenix_live_view/live_socket.js +33 -22
package/assets/js/phoenix_live_view/view.js +20 -8
package/assets/js/phoenix_live_view/view_hook.js +1 -1
package/package.json +1 -1
package/priv/static/phoenix_live_view.cjs.js +69 -46
package/priv/static/phoenix_live_view.cjs.js.map +2 -2
package/priv/static/phoenix_live_view.esm.js +69 -46
package/priv/static/phoenix_live_view.esm.js.map +2 -2
package/priv/static/phoenix_live_view.js +69 -46
package/priv/static/phoenix_live_view.min.js +5 -5

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,21 @@
 # Changelog
+## 0.17.8 (2022-04-06)
+### Enhancements
+  - Add HEEx formatter
+  - Support `phx-change` on individual inputs
+  - Dispatch `MouseEvent` on client
+  - Add `:bubbles` option to `JS.dispatch` to control event bubbling
+  - Expose underlying `liveSocket` instance on hooks
+  - Enable client debug by default on localhost
+### Bug fixes
+  - Fix hook and sticky LiveView issues caused by back-to-back live redirects from mount
+  - Fix hook destroyed callback failing to be invoked for children of phx-remove in some cases
+  - Do not failsafe reload the page on push timeout if disconnected
+  - Do not bubble navigation click events to regular phx-click's
 ## 0.17.7 (2022-02-07)
 ### Enhancements
@@ -200,7 +216,7 @@ Some functionality that was previously deprecated has been removed:
 ## 0.16.0 (2021-08-10)
-## # Security Considerations Upgrading from 0.15
+### Security Considerations Upgrading from 0.15
 LiveView v0.16 optimizes live redirects by supporting navigation purely
 over the existing WebSocket connection. This is accomplished by the new
@@ -615,7 +631,7 @@ as LiveView introduces a macro with that name and it is special cased by the und
   - No longer send event metadata by default. Metadata is now opt-in and user defined at the `LiveSocket` level.
   To maintain backwards compatibility with pre-0.13 behaviour, you can provide the following metadata option:
-  ```javascript
+  ```
   let liveSocket = new LiveSocket("/live", Socket, {
     params: {_csrf_token: csrfToken},
     metadata: {
@@ -714,7 +730,7 @@ The new implementation will check there is a button at `#term .buttons a`, with
   - `Phoenix.LiveViewTest.assert_remove/3` has been removed. If the LiveView crashes, it will cause the test to crash too
   - Passing a path with DOM IDs to `render_*` test functions is deprecated. Furthermore, they now require a `phx-target="<%= @id %>"` on the given DOM ID:
-    ```html
+    ```heex
     <div id="component-id" phx-target="component-id">
       ...
     </div>
@@ -931,14 +947,14 @@ The steps are:
   4) You should define the CSRF meta tag inside <head> in your layout, before `app.js` is included:
-      ```html
+      ```heex
       <%= csrf_meta_tag() %>
       <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
       ```
   5) Then in your app.js:
-      ```javascript
+      ```
       let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
       let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});
       ```
@@ -1019,7 +1035,7 @@ Also note that **the session from now on will have string keys**. LiveView will
   - All `phx-update` containers now require a unique ID
   - `LiveSocket` JavaScript constructor now requires explicit dependency injection of Phoenix Socket constructor. For example:
-```javascript
+```
 import {Socket} from "phoenix"
 import LiveSocket from "phoenix_live_view"
@@ -1035,7 +1051,7 @@ let liveSocket = new LiveSocket("/live", Socket, {...})
   - Fix params failing to update on re-mounts after live_redirect
   - Fix blur event metadata being sent with type of `"focus"`
-## 0.1.2
+## 0.1.2 (2019-08-28)
 ### Backwards incompatible changes
   - `phx-value` has no effect, use `phx-value-*` instead

package/README.md CHANGED Viewed

@@ -125,7 +125,7 @@ $ npm install --save --prefix assets mdn-polyfills url-search-params-polyfill fo
 Note: The `shim-keyboard-event-key` polyfill is also required for [MS Edge 12-18](https://caniuse.com/#feat=keyboardevent-key).
-```javascript
+```
 // assets/js/app.js
 import "mdn-polyfills/Object.assign"
 import "mdn-polyfills/CustomEvent"

package/assets/js/phoenix_live_view/dom.js CHANGED Viewed

@@ -250,8 +250,10 @@ let DOM = {
     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})
+  dispatchEvent(target, name, opts = {}){
+    let bubbles = opts.bubbles === undefined ? true : !!opts.bubbles
+    let eventOpts = {bubbles: bubbles, cancelable: true, detail: opts.detail || {}}
+    let event = name === "click" ? new MouseEvent("click", eventOpts) : new CustomEvent(name, eventOpts)
     target.dispatchEvent(event)
   },
@@ -287,7 +289,7 @@ let DOM = {
   mergeFocusedInput(target, source){
     // skip selects because FF will reset highlighted index for any setAttribute
-    if(!(target instanceof HTMLSelectElement)){ DOM.mergeAttrs(target, source, {except: ["value"]}) }
+    if(!(target instanceof HTMLSelectElement)){ DOM.mergeAttrs(target, source, {exclude: ["value"]}) }
     if(source.readOnly){
       target.setAttribute("readonly", true)
     } else {

package/assets/js/phoenix_live_view/js.js CHANGED Viewed

@@ -24,18 +24,23 @@ let JS = {
   // commands
-  exec_dispatch(eventType, phxEvent, view, sourceEl, el, {to, event, detail}){
-    DOM.dispatchEvent(el, event, detail)
+  exec_dispatch(eventType, phxEvent, view, sourceEl, el, {to, event, detail, bubbles}){
+    detail = detail || {}
+    detail.dispatcher = sourceEl
+    DOM.dispatchEvent(el, event, {detail, bubbles})
   },
   exec_push(eventType, phxEvent, view, sourceEl, el, args){
-    let {event, data, target, page_loading, loading, value} = args
+    if(!view.isConnected()){ return }
+    let {event, data, target, page_loading, loading, value, dispatcher} = args
     let pushOpts = {loading, value, target, page_loading: !!page_loading}
-    let targetSrc = eventType === "change" ? sourceEl.form : sourceEl
+    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
+        _target = _target || (sourceEl instanceof HTMLInputElement ? sourceEl.name : undefined)
         if(_target){ pushOpts._target = _target }
         targetView.pushInput(sourceEl, targetCtx, newCid, event || phxEvent, pushOpts, callback)
       } else if(eventType === "submit"){
@@ -170,10 +175,10 @@ let JS = {
   setOrRemoveAttrs(el, sets, removes){
     let [prevSets, prevRemoves] = DOM.getSticky(el, "attrs", [[], []])
-    let keepSets = sets.filter(([attr, _val]) => !this.hasSet(prevSets, attr) && !el.attributes.getNamedItem(attr))
-    let keepRemoves = removes.filter(attr => prevRemoves.indexOf(attr) < 0 && el.attributes.getNamedItem(attr))
-    let newSets = prevSets.filter(([attr, _val]) => removes.indexOf(attr) < 0).concat(keepSets)
-    let newRemoves = prevRemoves.filter(attr => !this.hasSet(sets, attr)).concat(keepRemoves)
+    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))
@@ -182,8 +187,6 @@ let JS = {
     })
   },
-  hasSet(sets, nameSearch){ return sets.find(([name, val]) => name === nameSearch) },
   hasAllClasses(el, classes){ return classes.every(name => el.classList.contains(name)) },
   isToggledOut(el, outClasses){

package/assets/js/phoenix_live_view/live_socket.js CHANGED Viewed

@@ -138,8 +138,9 @@ export default class LiveSocket {
     this.prevActive = null
     this.silenced = false
     this.main = null
+    this.outgoingMainEl = null
+    this.clickStartedAtTarget = null
     this.linkRef = 1
-    this.clickRef = 1
     this.roots = {}
     this.href = window.location.href
     this.pendingLink = null
@@ -173,11 +174,13 @@ export default class LiveSocket {
   isDebugEnabled(){ return this.sessionStorage.getItem(PHX_LV_DEBUG) === "true" }
+  isDebugDisabled(){ return this.sessionStorage.getItem(PHX_LV_DEBUG) === "false" }
   enableDebug(){ this.sessionStorage.setItem(PHX_LV_DEBUG, "true") }
   enableProfiling(){ this.sessionStorage.setItem(PHX_LV_PROFILE, "true") }
-  disableDebug(){ this.sessionStorage.removeItem(PHX_LV_DEBUG) }
+  disableDebug(){ this.sessionStorage.setItem(PHX_LV_DEBUG, "false") }
   disableProfiling(){ this.sessionStorage.removeItem(PHX_LV_PROFILE) }
@@ -197,6 +200,8 @@ export default class LiveSocket {
   getSocket(){ return this.socket }
   connect(){
+    // enable debug by default if on localhost and not explicitly disabled
+    if(window.location.hostname === "localhost" && !this.isDebugDisabled()){ this.enableDebug() }
     let doConnect = () => {
       if(this.joinRootViews()){
         this.bindTopLevelEvents()
@@ -262,7 +267,7 @@ export default class LiveSocket {
     let latency = this.getLatencySim()
     let oldJoinCount = view.joinCount
     if(!latency){
-      if(opts.timeout){
+      if(this.isConnected() && opts.timeout){
         return push().receive("timeout", () => {
           if(view.joinCount === oldJoinCount && !view.isDestroyed()){
             this.reloadWithJitter(view, () => {
@@ -342,8 +347,8 @@ export default class LiveSocket {
   }
   replaceMain(href, flash, callback = null, linkRef = this.setPendingLink(href)){
-    let oldMainEl = this.main.el
-    let newMainEl = DOM.cloneNode(oldMainEl, "")
+    this.outgoingMainEl = this.outgoingMainEl || this.main.el
+    let newMainEl = DOM.cloneNode(this.outgoingMainEl, "")
     this.main.showLoader(this.loaderTimeout)
     this.main.destroy()
@@ -354,7 +359,8 @@ export default class LiveSocket {
       if(joinCount === 1 && this.commitPendingLink(linkRef)){
         this.requestDOMUpdate(() => {
           DOM.findPhxSticky(document).forEach(el => newMainEl.appendChild(el))
-          oldMainEl.replaceWith(newMainEl)
+          this.outgoingMainEl.replaceWith(newMainEl)
+          this.outgoingMainEl = null
           callback && callback()
           onDone()
         })
@@ -457,7 +463,7 @@ export default class LiveSocket {
     this.boundTopLevelEvents = true
     // enter failsafe reload if server has gone away intentionally, such as "disconnect" broadcast
     this.socket.onClose(event => {
-      if(event.code === 1000 && this.main){
+      if(event && event.code === 1000 && this.main){
         this.reloadWithJitter(this.main)
       }
     })
@@ -569,6 +575,7 @@ export default class LiveSocket {
   }
   bindClicks(){
+    window.addEventListener("mousedown", e => this.clickStartedAtTarget = e.target)
     this.bindClick("click", "click", false)
     this.bindClick("mousedown", "capture-click", true)
   }
@@ -576,15 +583,14 @@ export default class LiveSocket {
   bindClick(eventName, bindingName, capture){
     let click = this.binding(bindingName)
     window.addEventListener(eventName, e => {
-      if(!this.isConnected()){ return }
-      this.clickRef++
-      let clickRefWas = this.clickRef
       let target = null
       if(capture){
         target = e.target.matches(`[${click}]`) ? e.target : e.target.querySelector(`[${click}]`)
       } else {
-        target = closestPhxBinding(e.target, click)
-        this.dispatchClickAway(e, clickRefWas)
+        let clickStartedAtTarget = this.clickStartedAtTarget || e.target
+        target = closestPhxBinding(clickStartedAtTarget, click)
+        this.dispatchClickAway(e, clickStartedAtTarget)
+        this.clickStartedAtTarget = null
       }
       let phxEvent = target && target.getAttribute(click)
       if(!phxEvent){ return }
@@ -598,15 +604,13 @@ export default class LiveSocket {
     }, capture)
   }
-  dispatchClickAway(e, clickRefWas){
+  dispatchClickAway(e, clickStartedAt){
     let phxClickAway = this.binding("click-away")
-    let phxClick = this.binding("click")
     DOM.all(document, `[${phxClickAway}]`, el => {
-      if(!(el.isSameNode(e.target) || el.contains(e.target))){
+      if(!(el.isSameNode(clickStartedAt) || el.contains(clickStartedAt))){
         this.withinOwners(e.target, view => {
           let phxEvent = el.getAttribute(phxClickAway)
           if(JS.isVisible(el)){
-            let target = e.target.closest(`[${phxClick}]`) || e.target
             JS.exec("click", phxEvent, view, el, ["push", {data: this.eventMeta("click", e, e.target)}])
           }
         })
@@ -649,9 +653,11 @@ export default class LiveSocket {
       let type = target && target.getAttribute(PHX_LIVE_LINK)
       let wantsNewTab = e.metaKey || e.ctrlKey || e.button === 1
       if(!type || !this.isConnected() || !this.main || wantsNewTab){ return }
       let href = target.href
       let linkState = target.getAttribute(PHX_LINK_STATE)
       e.preventDefault()
+      e.stopImmediatePropagation() // do not bubble click to regular phx-click bindings
       if(this.pendingLink === href){ return }
       this.requestDOMUpdate(() => {
@@ -667,7 +673,7 @@ export default class LiveSocket {
   }
   dispatchEvent(event, payload = {}){
-    DOM.dispatchEvent(window, `phx:${event}`, payload)
+    DOM.dispatchEvent(window, `phx:${event}`, {detail: payload})
   }
   dispatchEvents(events){
@@ -675,8 +681,8 @@ export default class LiveSocket {
   }
   withPageLoading(info, callback){
-    DOM.dispatchEvent(window, "phx:page-loading-start", info)
-    let done = () => DOM.dispatchEvent(window, "phx:page-loading-stop", info)
+    DOM.dispatchEvent(window, "phx:page-loading-start", {detail: info})
+    let done = () => DOM.dispatchEvent(window, "phx:page-loading-stop", {detail: info})
     return callback ? callback(done) : done
   }
@@ -735,10 +741,15 @@ export default class LiveSocket {
     for(let type of ["change", "input"]){
       this.on(type, e => {
+        let phxChange = this.binding("change")
         let input = e.target
-        let phxEvent = input.form && input.form.getAttribute(this.binding("change"))
+        let inputEvent = input.getAttribute(phxChange)
+        let formEvent = input.form && input.form.getAttribute(phxChange)
+        let phxEvent = inputEvent || formEvent
         if(!phxEvent){ return }
         if(input.type === "number" && input.validity && input.validity.badInput){ return }
+        let dispatcher = inputEvent ? input : input.form
         let currentIterations = iterations
         iterations++
         let {at: at, type: lastType} = DOM.private(input, "prev-iteration") || {}
@@ -748,12 +759,12 @@ export default class LiveSocket {
         DOM.putPrivate(input, "prev-iteration", {at: currentIterations, type: type})
         this.debounce(input, e, () => {
-          this.withinOwners(input.form, view => {
+          this.withinOwners(dispatcher, view => {
             DOM.putPrivate(input, PHX_HAS_FOCUSED, true)
             if(!DOM.isTextualInput(input)){
               this.setActiveElement(input)
             }
-            JS.exec("change", phxEvent, view, input, ["push", {_target: e.target.name}])
+            JS.exec("change", phxEvent, view, input, ["push", {_target: e.target.name, dispatcher: dispatcher}])
           })
         })
       }, false)

package/assets/js/phoenix_live_view/view.js CHANGED Viewed

@@ -50,7 +50,7 @@ import Rendered from "./rendered"
 import ViewHook from "./view_hook"
 import JS from "./js"
-let serializeForm = (form, meta = {}) => {
+let serializeForm = (form, meta, onlyNames = []) => {
   let formData = new FormData(form)
   let toRemove = []
@@ -62,7 +62,11 @@ let serializeForm = (form, meta = {}) => {
   toRemove.forEach(key => formData.delete(key))
   let params = new URLSearchParams()
-  for(let [key, val] of formData.entries()){ params.append(key, val) }
+  for(let [key, val] of formData.entries()){
+    if(onlyNames.length === 0 || onlyNames.indexOf(key) >= 0){
+      params.append(key, val)
+    }
+  }
   for(let metaKey in meta){ params.append(metaKey, meta[metaKey]) }
   return params.toString()
@@ -377,10 +381,13 @@ export default class View {
     let destroyedCIDs = []
     elements.forEach(parent => {
       let components = DOM.all(parent, `[${PHX_COMPONENT}]`)
-        components.concat(parent).forEach(el => {
+      let hooks = DOM.all(parent, `[${this.binding(PHX_HOOK)}]`)
+      components.concat(parent).forEach(el => {
         let cid = this.componentID(el)
         if(isCid(cid) && destroyedCIDs.indexOf(cid) === -1){ destroyedCIDs.push(cid) }
-        let hook = this.getHook(el)
+      })
+      hooks.concat(parent).forEach(hookEl => {
+        let hook = this.getHook(hookEl)
         hook && this.destroyHook(hook)
       })
     })
@@ -635,7 +642,7 @@ export default class View {
   }
   displayError(){
-    if(this.isMain()){ DOM.dispatchEvent(window, "phx:page-loading-start", {to: this.href, kind: "error"}) }
+    if(this.isMain()){ DOM.dispatchEvent(window, "phx:page-loading-start", {detail: {to: this.href, kind: "error"}}) }
     this.showLoader()
     this.setContainerClasses(PHX_DISCONNECTED_CLASS, PHX_ERROR_CLASS)
   }
@@ -821,7 +828,12 @@ export default class View {
     let uploads
     let cid = isCid(forceCid) ? forceCid : this.targetComponentID(inputEl.form, targetCtx)
     let refGenerator = () => this.putRef([inputEl, inputEl.form], "change", opts)
-    let formData = serializeForm(inputEl.form, {_target: opts._target})
+    let formData
+    if(inputEl.getAttribute(this.binding("change"))){
+      formData = serializeForm(inputEl.form, {_target: opts._target}, [inputEl.name])
+    } else {
+      formData = serializeForm(inputEl.form, {_target: opts._target})
+    }
     if(DOM.isUploadInput(inputEl) && inputEl.files && inputEl.files.length > 0){
       LiveUploader.trackFiles(inputEl, Array.from(inputEl.files))
     }
@@ -930,7 +942,7 @@ export default class View {
         }, onReply)
       })
     } else {
-      let formData = serializeForm(formEl)
+      let formData = serializeForm(formEl, {})
       this.pushWithReply(refGenerator, "event", {
         type: "form",
         event: phxEvent,
@@ -985,7 +997,7 @@ export default class View {
     let inputs = DOM.findUploadInputs(this.el).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}"`) }
-    else { DOM.dispatchEvent(inputs[0], PHX_TRACK_UPLOADS, {files: filesOrBlobs}) }
+    else { DOM.dispatchEvent(inputs[0], PHX_TRACK_UPLOADS, {detail: {files: filesOrBlobs}}) }
   }
   pushFormRecovery(form, newCid, callback){

package/assets/js/phoenix_live_view/view_hook.js CHANGED Viewed

@@ -5,7 +5,7 @@ export default class ViewHook {
   constructor(view, el, callbacks){
     this.__view = view
-    this.__liveSocket = view.liveSocket
+    this.liveSocket = view.liveSocket
     this.__callbacks = callbacks
     this.__listeners = new Set()
     this.__isDisconnected = false

package/package.json CHANGED Viewed

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