phoenix_live_view 0.20.14 → 0.20.15

package/README.md

@@ -166,7 +166,12 @@ $ mix deps.get
 $ mix test
 ```
 
-Running the Javascript tests:
+Running all JavaScript tests:
+```bash
+$ npm run test
+```
+
+Running the JavaScript unit tests:
 
 ```bash
 $ cd assets
@@ -176,4 +181,23 @@ $ npm run test
 $ npm run test.watch
 ```
 
+or simply:
+
+```bash
+$ npm run js:test
+```
+
+Running the JavaScript end-to-end tests:
+
+```bash
+$ npm run e2e:test
+```
+
+Checking test coverage:
+
+```bash
+$ npm run cover
+$ npm run cover:report
+```
+
 JS contributions are very welcome, but please do not include an updated `priv/static/phoenix_live_view.js` in pull requests. The maintainers will update it as part of the release process.

package/assets/js/phoenix_live_view/dom.js

@@ -70,7 +70,8 @@ let DOM = {
     let wantsNewTab = e.ctrlKey || e.shiftKey || e.metaKey || (e.button && e.button === 1)
     let isDownload = (e.target instanceof HTMLAnchorElement && e.target.hasAttribute("download"))
     let isTargetBlank = e.target.hasAttribute("target") && e.target.getAttribute("target").toLowerCase() === "_blank"
-    return wantsNewTab || isTargetBlank || isDownload
+    let isTargetNamedTab = e.target.hasAttribute("target") && !e.target.getAttribute("target").startsWith("_")
+    return wantsNewTab || isTargetBlank || isDownload || isTargetNamedTab
   },
 
   isUnloadableFormSubmit(e){
@@ -222,7 +223,9 @@ let DOM = {
 
       case "blur":
         if(this.once(el, "debounce-blur")){
-          el.addEventListener("blur", () => callback())
+          el.addEventListener("blur", () => {
+            if(asyncFilter()){ callback() }
+          })
         }
         return
 
@@ -479,7 +482,6 @@ let DOM = {
     if(!DOM.isTextualInput(focused)){ return }
 
     let wasFocused = focused.matches(":focus")
-    if(focused.readOnly){ focused.blur() }
     if(!wasFocused){ focused.focus() }
     if(this.hasSelectionRange(focused)){
       focused.setSelectionRange(selectionStart, selectionEnd)
@@ -505,18 +507,9 @@ let DOM = {
     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}) }
-      DOM.putPrivate(fromEl, PHX_REF, toEl)
-      return false
-    } else {
-      PHX_EVENT_CLASSES.forEach(className => {
-        fromEl.classList.contains(className) && toEl.classList.add(className)
-      })
-      toEl.setAttribute(PHX_REF, ref)
-      toEl.setAttribute(PHX_REF_SRC, refSrc)
-      return true
-    }
+    if(DOM.isUploadInput(fromEl)){ DOM.mergeAttrs(fromEl, toEl, {isIgnored: true}) }
+    DOM.putPrivate(fromEl, PHX_REF, toEl)
+    return false
   },
 
   cleanChildNodes(container, phxUpdate){
@@ -526,7 +519,7 @@ let DOM = {
         if(!childNode.id){
           // Skip warning if it's an empty text node (e.g. a new-line)
           let isEmptyTextNode = childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue.trim() === ""
-          if(!isEmptyTextNode){
+          if(!isEmptyTextNode && childNode.nodeType !== Node.COMMENT_NODE){
             logError("only HTML element tags with an id are allowed inside containers with phx-update.\n\n" +
               `removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"\n\n`)
           }

package/assets/js/phoenix_live_view/dom_patch.js

@@ -99,9 +99,13 @@ export default class DOMPatch {
 
     let externalFormTriggered = null
 
-    function morph(targetContainer, source){
+    function morph(targetContainer, source, withChildren=false){
       morphdom(targetContainer, source, {
-        childrenOnly: targetContainer.getAttribute(PHX_COMPONENT) === null,
+        // normally, we are running with childrenOnly, as the patch HTML for a LV
+        // does not include the LV attrs (data-phx-session, etc.)
+        // when we are patching a live component, we do want to patch the root element as well;
+        // another case is the recursive patch of a stream item that was kept on reset (-> onBeforeNodeAdded)
+        childrenOnly: targetContainer.getAttribute(PHX_COMPONENT) === null && !withChildren,
         getNodeKey: (node) => {
           if(DOM.isPhxDestroyed(node)){ return null }
           // If we have a join patch, then by definition there was no PHX_MAGIC_ID.
@@ -137,7 +141,7 @@ export default class DOMPatch {
           if(!isJoinPatch && this.streamComponentRestore[el.id]){
             morphedEl = this.streamComponentRestore[el.id]
             delete this.streamComponentRestore[el.id]
-            morph.bind(this)(morphedEl, el)
+            morph.call(this, morphedEl, el, true)
           }
 
           return morphedEl
@@ -198,7 +202,7 @@ export default class DOMPatch {
           if(DOM.isPhxSticky(fromEl)){ return false }
           if(DOM.isIgnored(fromEl, phxUpdate) || (fromEl.form && fromEl.form.isSameNode(externalFormTriggered))){
             this.trackBefore("updated", fromEl, toEl)
-            DOM.mergeAttrs(fromEl, toEl, {isIgnored: true})
+            DOM.mergeAttrs(fromEl, toEl, {isIgnored: DOM.isIgnored(fromEl, phxUpdate)})
             updates.push(fromEl)
             DOM.applyStickyOperations(fromEl)
             return false
@@ -286,10 +290,18 @@ export default class DOMPatch {
         })
       }
 
-      morph.bind(this)(targetContainer, html)
+      morph.call(this, targetContainer, html)
     })
 
-    if(liveSocket.isDebugEnabled()){ detectDuplicateIds() }
+    if(liveSocket.isDebugEnabled()){
+      detectDuplicateIds()
+      // warn if there are any inputs named "id"
+      Array.from(document.querySelectorAll("input[name=id]")).forEach(node => {
+        if(node.form){
+          console.error("Detected an input with name=\"id\" inside a form! This will cause problems when patching the DOM.\n", node)
+        }
+      })
+    }
 
     if(appendPrependUpdates.length > 0){
       liveSocket.time("post-morph append/prepend restoration", () => {

package/assets/js/phoenix_live_view/hooks.js

@@ -58,8 +58,10 @@ let Hooks = {
 }
 
 let findScrollContainer = (el) => {
+  // the scroll event won't be fired on the html/body element even if overflow is set
+  // therefore we return null to instead listen for scroll events on document
+  if (["HTML", "BODY"].indexOf(el.nodeName.toUpperCase()) >= 0) return null
   if(["scroll", "auto"].indexOf(getComputedStyle(el).overflowY) >= 0) return el
-  if(document.documentElement === el) return null
   return findScrollContainer(el.parentElement)
 }
 

package/assets/js/phoenix_live_view/js.js

@@ -1,7 +1,7 @@
 import DOM from "./dom"
 import ARIA from "./aria"
 
-let focusStack = null
+let focusStack = []
 let default_transition_time = 200
 
 let JS = {
@@ -96,13 +96,13 @@ let JS = {
   },
 
   exec_push_focus(eventType, phxEvent, view, sourceEl, el){
-    window.requestAnimationFrame(() => focusStack = el || sourceEl)
+    window.requestAnimationFrame(() => focusStack.push(el || sourceEl))
   },
 
   exec_pop_focus(eventType, phxEvent, view, sourceEl, el){
     window.requestAnimationFrame(() => {
-      if(focusStack){ focusStack.focus() }
-      focusStack = null
+      const el = focusStack.pop()
+      if(el){ el.focus() }
     })
   },
 
@@ -115,7 +115,7 @@ let JS = {
   },
 
   exec_toggle_class(eventType, phxEvent, view, sourceEl, el, {to, names, transition, time}){
-    this.toggleClasses(el, names, transition, view)
+    this.toggleClasses(el, names, transition, time, view)
   },
 
   exec_toggle_attr(eventType, phxEvent, view, sourceEl, el, {attr: [attr, val1, val2]}){

package/assets/js/phoenix_live_view/live_socket.js

@@ -158,7 +158,13 @@ export default class LiveSocket {
     this.localStorage = opts.localStorage || window.localStorage
     this.sessionStorage = opts.sessionStorage || window.sessionStorage
     this.boundTopLevelEvents = false
-    this.domCallbacks = Object.assign({onNodeAdded: closure(), onBeforeElUpdated: closure()}, opts.dom || {})
+    this.serverCloseRef = null
+    this.domCallbacks = Object.assign({
+      onPatchStart: closure(),
+      onPatchEnd: closure(),
+      onNodeAdded: closure(),
+      onBeforeElUpdated: closure()},
+    opts.dom || {})
     this.transitions = new TransitionSet()
     window.addEventListener("pagehide", _e => {
       this.unloaded = true
@@ -173,6 +179,8 @@ export default class LiveSocket {
 
   // public
 
+  version(){ return LV_VSN }
+
   isProfileEnabled(){ return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true" }
 
   isDebugEnabled(){ return this.sessionStorage.getItem(PHX_LV_DEBUG) === "true" }
@@ -225,6 +233,12 @@ export default class LiveSocket {
 
   disconnect(callback){
     clearTimeout(this.reloadWithJitterTimer)
+    // remove the socket close listener to avoid trying to handle
+    // a server close event when it is actually caused by us disconnecting
+    if(this.serverCloseRef){
+      this.socket.off(this.serverCloseRef)
+      this.serverCloseRef = null
+    }
     this.socket.disconnect(callback)
   }
 
@@ -512,7 +526,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 => {
+    this.serverCloseRef = this.socket.onClose(event => {
       // failsafe reload if normal closure and we still have a main LV
       if(event && event.code === 1000 && this.main){ return this.reloadWithJitter(this.main) }
     })
@@ -625,28 +639,23 @@ export default class LiveSocket {
 
   bindClicks(){
     window.addEventListener("mousedown", e => this.clickStartedAtTarget = e.target)
-    this.bindClick("click", "click", false)
-    this.bindClick("mousedown", "capture-click", true)
+    this.bindClick("click", "click")
   }
 
-  bindClick(eventName, bindingName, capture){
+  bindClick(eventName, bindingName){
     let click = this.binding(bindingName)
     window.addEventListener(eventName, e => {
       let target = null
-      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)
-        this.clickStartedAtTarget = null
-      }
+      // 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)
+      this.clickStartedAtTarget = null
       let phxEvent = target && target.getAttribute(click)
       if(!phxEvent){
-        if(!capture && DOM.isNewPageClick(e, window.location)){ this.unload() }
+        if(DOM.isNewPageClick(e, window.location)){ this.unload() }
         return
       }
 
@@ -660,7 +669,7 @@ export default class LiveSocket {
           JS.exec("click", phxEvent, view, target, ["push", {data: this.eventMeta("click", e, target)}])
         })
       })
-    }, capture)
+    }, false)
   }
 
   dispatchClickAway(e, clickStartedAt){