phoenix_live_view 1.0.2 → 1.0.4

package/README.md

@@ -193,19 +193,11 @@ $ npm run test
 
 Running the JavaScript unit tests:
 
-```bash
-$ cd assets
-$ npm install
-$ npm run test
-# to automatically run tests for files that have been changed
-$ npm run test.watch
-```
-
-or simply:
-
 ```bash
 $ npm run setup
 $ npm run js:test
+# to automatically run tests for files that have been changed
+$ npm run js:test.watch
 ```
 
 Running the JavaScript end-to-end tests:

package/assets/js/phoenix_live_view/dom.js

@@ -10,6 +10,7 @@ import {
   PHX_PARENT_ID,
   PHX_PRIVATE,
   PHX_REF_SRC,
+  PHX_REF_LOCK,
   PHX_PENDING_ATTRS,
   PHX_ROOT_ID,
   PHX_SESSION,
@@ -148,7 +149,7 @@ let DOM = {
     cids.forEach(cid => {
       this.filterWithinSameLiveView(this.all(node, `[${PHX_COMPONENT}="${cid}"]`), node).forEach(parent => {
         parentCids.add(cid)
-        this.all(parent, `[${PHX_COMPONENT}]`)
+        this.filterWithinSameLiveView(this.all(parent, `[${PHX_COMPONENT}]`), parent)
           .map(el => parseInt(el.getAttribute(PHX_COMPONENT)))
           .forEach(childCID => childrenCids.add(childCID))
       })
@@ -545,6 +546,10 @@ let DOM = {
     if(!ops){ return }
 
     ops.forEach(([name, op, _stashed]) => this.putSticky(el, name, op))
+  },
+
+  isLocked(el){
+    return el.hasAttribute && el.hasAttribute(PHX_REF_LOCK)
   }
 }
 

package/assets/js/phoenix_live_view/dom_patch.js

@@ -18,6 +18,7 @@ import {
 
 import {
   detectDuplicateIds,
+  detectInvalidStreamInserts,
   isCid
 } from "./utils"
 
@@ -26,40 +27,7 @@ import DOMPostMorphRestorer from "./dom_post_morph_restorer"
 import morphdom from "morphdom"
 
 export default class DOMPatch {
-  static patchWithClonedTree(container, clonedTree, liveSocket){
-    let focused = liveSocket.getActiveElement()
-    let {selectionStart, selectionEnd} = focused && DOM.hasSelectionRange(focused) ? focused : {}
-    let phxUpdate = liveSocket.binding(PHX_UPDATE)
-    let externalFormTriggered = null
-
-    morphdom(container, clonedTree, {
-      childrenOnly: false,
-      onBeforeElUpdated: (fromEl, toEl) => {
-        DOM.syncPendingAttrs(fromEl, toEl)
-        // we cannot morph locked children
-        if(!container.isSameNode(fromEl) && fromEl.hasAttribute(PHX_REF_LOCK)){ return false }
-        if(DOM.isIgnored(fromEl, phxUpdate)){ return false }
-        if(focused && focused.isSameNode(fromEl) && DOM.isFormInput(fromEl)){
-          DOM.mergeFocusedInput(fromEl, toEl)
-          return false
-        }
-        if(DOM.isNowTriggerFormExternal(toEl, liveSocket.binding(PHX_TRIGGER_ACTION))){
-          externalFormTriggered = toEl
-        }
-      }
-    })
-
-    if(externalFormTriggered){
-      liveSocket.unload()
-      // use prototype's submit in case there's a form control with name or id of "submit"
-      // https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
-      Object.getPrototypeOf(externalFormTriggered).submit.call(externalFormTriggered)
-    }
-
-    liveSocket.silenceEvents(() => DOM.restoreFocus(focused, selectionStart, selectionEnd))
-  }
-
-  constructor(view, container, id, html, streams, targetCID){
+  constructor(view, container, id, html, streams, targetCID, opts={}){
     this.view = view
     this.liveSocket = view.liveSocket
     this.container = container
@@ -79,6 +47,8 @@ export default class DOMPatch {
       afteradded: [], afterupdated: [], afterdiscarded: [], afterphxChildAdded: [],
       aftertransitionsDiscarded: []
     }
+    this.withChildren = opts.withChildren || opts.undoRef || false
+    this.undoRef = opts.undoRef
   }
 
   before(kind, callback){ this.callbacks[`before${kind}`].push(callback) }
@@ -115,7 +85,7 @@ export default class DOMPatch {
 
     let externalFormTriggered = null
 
-    function morph(targetContainer, source, withChildren=false){
+    function morph(targetContainer, source, withChildren=this.withChildren){
       let morphCallbacks = {
         // normally, we are running with childrenOnly, as the patch HTML for a LV
         // does not include the LV attrs (data-phx-session, etc.)
@@ -247,7 +217,8 @@ export default class DOMPatch {
           // apply any changes that happened while the element was locked.
           let isFocusedFormEl = focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl)
           let focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl)
-          if(fromEl.hasAttribute(PHX_REF_SRC)){
+          // only perform the clone step if this is not a patch that unlocks
+          if(fromEl.hasAttribute(PHX_REF_SRC) && fromEl.getAttribute(PHX_REF_LOCK) != this.undoRef){
             if(DOM.isUploadInput(fromEl)){
               DOM.mergeAttrs(fromEl, toEl, {isIgnored: true})
               this.trackBefore("updated", fromEl, toEl)
@@ -341,6 +312,7 @@ export default class DOMPatch {
 
     if(liveSocket.isDebugEnabled()){
       detectDuplicateIds()
+      detectInvalidStreamInserts(this.streamInserts)
       // warn if there are any inputs named "id"
       Array.from(document.querySelectorAll("input[name=id]")).forEach(node => {
         if(node.form){
@@ -461,7 +433,7 @@ export default class DOMPatch {
   transitionPendingRemoves(){
     let {pendingRemoves, liveSocket} = this
     if(pendingRemoves.length > 0){
-      liveSocket.transitionRemoves(pendingRemoves, false, () => {
+      liveSocket.transitionRemoves(pendingRemoves, () => {
         pendingRemoves.forEach(el => {
           let child = DOM.firstPhxChild(el)
           if(child){ liveSocket.destroyViewByEl(child) }

package/assets/js/phoenix_live_view/element_ref.js

@@ -11,6 +11,15 @@ import {
 import DOM from "./dom"
 
 export default class ElementRef {
+  static onUnlock(el, callback){
+    if(!DOM.isLocked(el) && !el.closest(`[${PHX_REF_LOCK}]`)){ return callback() }
+    const closestLock = el.closest(`[${PHX_REF_LOCK}]`)
+    const ref = closestLock.closest(`[${PHX_REF_LOCK}]`).getAttribute(PHX_REF_LOCK)
+    closestLock.addEventListener(`phx:undo-lock:${ref}`, () => {
+      callback()
+    }, {once: true})
+  }
+
   constructor(el){
     this.el = el
     this.loadingRef = el.hasAttribute(PHX_REF_LOADING) ? parseInt(el.getAttribute(PHX_REF_LOADING), 10) : null

package/assets/js/phoenix_live_view/hooks.js

@@ -47,11 +47,32 @@ let Hooks = {
     mounted(){
       this.focusStart = this.el.firstElementChild
       this.focusEnd = this.el.lastElementChild
-      this.focusStart.addEventListener("focus", () => ARIA.focusLast(this.el))
-      this.focusEnd.addEventListener("focus", () => ARIA.focusFirst(this.el))
-      this.el.addEventListener("phx:show-end", () => this.el.focus())
-      if(window.getComputedStyle(this.el).display !== "none"){
-        ARIA.focusFirst(this.el)
+      this.focusStart.addEventListener("focus", (e) => {
+        if(!e.relatedTarget || !this.el.contains(e.relatedTarget)){ 
+          // Handle focus entering from outside (e.g. Tab when body is focused)
+          // https://github.com/phoenixframework/phoenix_live_view/issues/3636
+          const nextFocus = e.target.nextElementSibling
+          ARIA.attemptFocus(nextFocus) || ARIA.focusFirst(nextFocus)
+        } else {
+          ARIA.focusLast(this.el)
+        }
+      })
+      this.focusEnd.addEventListener("focus", (e) => {
+        if(!e.relatedTarget || !this.el.contains(e.relatedTarget)){ 
+          // Handle focus entering from outside (e.g. Shift+Tab when body is focused)
+          // https://github.com/phoenixframework/phoenix_live_view/issues/3636
+          const nextFocus = e.target.previousElementSibling
+          ARIA.attemptFocus(nextFocus) || ARIA.focusLast(nextFocus)
+        } else {
+          ARIA.focusFirst(this.el)
+        }
+      })
+      // only try to change the focus if it is not already inside
+      if(!this.el.contains(document.activeElement)){
+        this.el.addEventListener("phx:show-end", () => this.el.focus())
+        if(window.getComputedStyle(this.el).display !== "none"){
+          ARIA.focusFirst(this.el)
+        }
       }
     }
   }

package/assets/js/phoenix_live_view/js.js

@@ -97,11 +97,11 @@ let JS = {
   },
 
   exec_focus(e, eventType, phxEvent, view, sourceEl, el){
-    window.requestAnimationFrame(() => ARIA.attemptFocus(el))
+    ARIA.attemptFocus(el)
   },
 
   exec_focus_first(e, eventType, phxEvent, view, sourceEl, el){
-    window.requestAnimationFrame(() => ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el))
+    ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el)
   },
 
   exec_push_focus(e, eventType, phxEvent, view, sourceEl, el){
@@ -219,18 +219,14 @@ let JS = {
       }
     } else {
       if(this.isVisible(el)){
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:hide-start"))
-          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = "none")
-          el.dispatchEvent(new Event("phx:hide-end"))
-        })
+        el.dispatchEvent(new Event("phx:hide-start"))
+        DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = "none")
+        el.dispatchEvent(new Event("phx:hide-end"))
       } else {
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:show-start"))
-          let stickyDisplay = display || this.defaultDisplay(el)
-          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
-          el.dispatchEvent(new Event("phx:show-end"))
-        })
+        el.dispatchEvent(new Event("phx:show-start"))
+        let stickyDisplay = display || this.defaultDisplay(el)
+        DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
+        el.dispatchEvent(new Event("phx:show-end"))
       }
     }
   },

package/assets/js/phoenix_live_view/live_socket.js

@@ -375,7 +375,9 @@ export default class LiveSocket {
     DOM.all(document, `${PHX_VIEW_SELECTOR}:not([${PHX_PARENT_ID}])`, rootEl => {
       if(!this.getRootById(rootEl.id)){
         let view = this.newRootView(rootEl)
-        view.setHref(this.getHref())
+        // stickies cannot be mounted at the router and therefore should not
+        // get a href set on them
+        if(!DOM.isPhxSticky(rootEl)){ view.setHref(this.getHref()) }
         view.join()
         if(rootEl.hasAttribute(PHX_MAIN)){ this.main = view }
       }
@@ -391,22 +393,26 @@ export default class LiveSocket {
   }
 
   replaceMain(href, flash, callback = null, linkRef = this.setPendingLink(href)){
-    let liveReferer = this.currentLocation.href
+    const liveReferer = this.currentLocation.href
     this.outgoingMainEl = this.outgoingMainEl || this.main.el
-    let removeEls = DOM.all(this.outgoingMainEl, `[${this.binding("remove")}]`)
-    let newMainEl = DOM.cloneNode(this.outgoingMainEl, "")
+
+    const stickies = DOM.findPhxSticky(document) || []
+    const removeEls = DOM.all(this.outgoingMainEl, `[${this.binding("remove")}]`)
+      .filter(el => !DOM.isChildOfAny(el, stickies))
+
+    const newMainEl = DOM.cloneNode(this.outgoingMainEl, "")
     this.main.showLoader(this.loaderTimeout)
     this.main.destroy()
 
     this.main = this.newRootView(newMainEl, flash, liveReferer)
     this.main.setRedirect(href)
-    this.transitionRemoves(removeEls, true)
+    this.transitionRemoves(removeEls)
     this.main.join((joinCount, onDone) => {
       if(joinCount === 1 && this.commitPendingLink(linkRef)){
         this.requestDOMUpdate(() => {
           // remove phx-remove els right before we replace the main element
           removeEls.forEach(el => el.remove())
-          DOM.findPhxSticky(document).forEach(el => newMainEl.appendChild(el))
+          stickies.forEach(el => newMainEl.appendChild(el))
           this.outgoingMainEl.replaceWith(newMainEl)
           this.outgoingMainEl = null
           callback && callback(linkRef)
@@ -416,12 +422,8 @@ export default class LiveSocket {
     })
   }
 
-  transitionRemoves(elements, skipSticky, callback){
+  transitionRemoves(elements, callback){
     let removeAttr = this.binding("remove")
-    if(skipSticky){
-      const stickies = DOM.findPhxSticky(document) || []
-      elements = elements.filter(el => !DOM.isChildOfAny(el, stickies))
-    }
     let silenceEvents = (e) => {
       e.preventDefault()
       e.stopImmediatePropagation()
@@ -693,7 +695,7 @@ export default class LiveSocket {
     })
     window.addEventListener("popstate", event => {
       if(!this.registerNewLocation(window.location)){ return }
-      let {type, backType, id, root, scroll, position} = event.state || {}
+      let {type, backType, id, scroll, position} = event.state || {}
       let href = window.location.href
 
       // Compare positions to determine direction
@@ -707,15 +709,11 @@ export default class LiveSocket {
 
       DOM.dispatchEvent(window, "phx:navigate", {detail: {href, patch: type === "patch", pop: true, direction: isForward ? "forward" : "backward"}})
       this.requestDOMUpdate(() => {
+        const callback = () => { this.maybeScroll(scroll) }
         if(this.main.isConnected() && (type === "patch" && id === this.main.id)){
-          this.main.pushLinkPatch(event, href, null, () => {
-            this.maybeScroll(scroll)
-          })
+          this.main.pushLinkPatch(event, href, null, callback)
         } else {
-          this.replaceMain(href, null, () => {
-            if(root){ this.replaceRootHistory() }
-            this.maybeScroll(scroll)
-          })
+          this.replaceMain(href, null, callback)
         }
       })
     }, false)
@@ -802,7 +800,8 @@ export default class LiveSocket {
   }
 
   historyRedirect(e, href, linkState, flash, targetEl){
-    if(targetEl && e.isTrusted && e.type !== "popstate"){ targetEl.classList.add("phx-click-loading") }
+    const clickLoading = targetEl && e.isTrusted && e.type !== "popstate"
+    if(clickLoading){ targetEl.classList.add("phx-click-loading") }
     if(!this.isConnected() || !this.main.isMain()){ return Browser.redirect(href, flash) }
 
     // convert to full href if only path prefix
@@ -831,20 +830,14 @@ export default class LiveSocket {
           DOM.dispatchEvent(window, "phx:navigate", {detail: {href, patch: false, pop: false, direction: "forward"}})
           this.registerNewLocation(window.location)
         }
+        // explicitly undo click-loading class
+        // (in case it originated in a sticky live view, otherwise it would be removed anyway)
+        if(clickLoading){ targetEl.classList.remove("phx-click-loading") }
         done()
       })
     })
   }
 
-  replaceRootHistory(){
-    Browser.pushState("replace", {
-      root: true,
-      type: "patch",
-      id: this.main.id,
-      position: this.currentHistoryPosition // Preserve current position
-    })
-  }
-
   registerNewLocation(newLocation){
     let {pathname, search} = this.currentLocation
     if(pathname + search === newLocation.pathname + newLocation.search){

package/assets/js/phoenix_live_view/utils.js

@@ -23,6 +23,17 @@ export function detectDuplicateIds(){
   }
 }
 
+export function detectInvalidStreamInserts(inserts){
+  const errors = new Set()
+  Object.keys(inserts).forEach((id) => {
+    const streamEl = document.getElementById(id)
+    if(streamEl && streamEl.parentElement && streamEl.parentElement.getAttribute("phx-update") !== "stream"){
+      errors.add(`The stream container with id "${streamEl.parentElement.id}" is missing the phx-update="stream" attribute. Ensure it is set for streams to work properly.`)
+    }
+  })
+  errors.forEach(error => console.error(error))
+}
+
 export let debug = (view, kind, msg, obj) => {
   if(view.liveSocket.isDebugEnabled()){
     console.log(`${view.id} ${kind}: ${msg} - `, obj)

package/assets/js/phoenix_live_view/view.js

@@ -318,8 +318,12 @@ export default class View {
       this.formsForRecovery = this.getFormsForRecovery()
     }
     if(this.isMain() && window.history.state === null){
-      // set initial history entry if this is the first page load
-      this.liveSocket.replaceRootHistory()
+      // set initial history entry if this is the first page load (no history)
+      Browser.pushState("replace", {
+        type: "patch",
+        id: this.id,
+        position: this.liveSocket.currentHistoryPosition
+      })
     }
 
     if(liveview_version !== this.liveSocket.version()){
@@ -697,6 +701,9 @@ export default class View {
   addHook(el){
     let hookElId = ViewHook.elementID(el)
 
+    // only ever try to add hooks to elements owned by this view
+    if(el.getAttribute && !this.ownsElement(el)){ return }
+
     if(hookElId && !this.viewHooks[hookElId]){
       // hook created, but not attached (createHook for web component)
       let hook = DOM.getCustomElHook(el) || logError(`no hook found for custom element: ${el.id}`)
@@ -710,7 +717,6 @@ export default class View {
     } else {
       // new hook found with phx-hook attribute
       let hookName = el.getAttribute(`data-phx-${PHX_HOOK}`) || el.getAttribute(this.binding(PHX_HOOK))
-      if(hookName && !this.ownsElement(el)){ return }
       let callbacks = this.liveSocket.getHookCallbacks(hookName)
 
       if(callbacks){
@@ -725,9 +731,12 @@ export default class View {
   }
 
   destroyHook(hook){
+    // __destroyed clears the elementID from the hook, therefore
+    // we need to get it before calling __destroyed
+    const hookId = ViewHook.elementID(hook.el)
     hook.__destroyed()
     hook.__cleanup__()
-    delete this.viewHooks[ViewHook.elementID(hook.el)]
+    delete this.viewHooks[hookId]
   }
 
   applyPendingUpdates(){
@@ -971,11 +980,12 @@ export default class View {
     let elRef = new ElementRef(el)
 
     elRef.maybeUndo(ref, phxEvent, clonedTree => {
-      let hook = this.triggerBeforeUpdateHook(el, clonedTree)
-      DOMPatch.patchWithClonedTree(el, clonedTree, this.liveSocket)
+      // we need to perform a full patch on unlocked elements
+      // to perform all the necessary logic (like calling updated for hooks, etc.)
+      let patch = new DOMPatch(this, el, this.id, clonedTree, [], null, {undoRef: ref})
+      const phxChildrenAdded = this.performPatch(patch, true)
       DOM.all(el, `[${PHX_REF_SRC}="${this.refSrc()}"]`, child => this.undoElRef(child, ref, phxEvent))
-      this.execNewMounted(el)
-      if(hook){ hook.__updated() }
+      if(phxChildrenAdded){ this.joinNewChildren() }
     })
   }
 
@@ -1182,15 +1192,20 @@ export default class View {
     }
     this.pushWithReply(refGenerator, "event", event).then(({resp}) => {
       if(DOM.isUploadInput(inputEl) && DOM.isAutoUpload(inputEl)){
-        if(LiveUploader.filesAwaitingPreflight(inputEl).length > 0){
-          let [ref, _els] = refGenerator()
-          this.undoRefs(ref, phxEvent, [inputEl.form])
-          this.uploadFiles(inputEl.form, phxEvent, targetCtx, ref, cid, (_uploads) => {
-            callback && callback(resp)
-            this.triggerAwaitingSubmit(inputEl.form, phxEvent)
-            this.undoRefs(ref, phxEvent)
-          })
-        }
+        // the element could be inside a locked parent for other unrelated changes;
+        // we can only start uploads when the tree is unlocked and the
+        // necessary data attributes are set in the real DOM
+        ElementRef.onUnlock(inputEl, () => {
+          if(LiveUploader.filesAwaitingPreflight(inputEl).length > 0){
+            let [ref, _els] = refGenerator()
+            this.undoRefs(ref, phxEvent, [inputEl.form])
+            this.uploadFiles(inputEl.form, phxEvent, targetCtx, ref, cid, (_uploads) => {
+              callback && callback(resp)
+              this.triggerAwaitingSubmit(inputEl.form, phxEvent)
+              this.undoRefs(ref, phxEvent)
+            })
+          }
+        })
       } else {
         callback && callback(resp)
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",
@@ -23,17 +23,35 @@
     "priv/static/*",
     "assets/js/phoenix_live_view/*"
   ],
+  "dependencies": {
+    "morphdom": "2.7.4"
+  },
   "devDependencies": {
-    "@eslint/js": "^9.10.0",
-    "@playwright/test": "^1.47.1",
+    "@babel/cli": "7.26.4",
+    "@babel/core": "7.26.0",
+    "@babel/preset-env": "7.26.0",
+    "@eslint/js": "^9.18.0",
+    "@playwright/test": "^1.49.1",
+    "@stylistic/eslint-plugin-js": "^2.12.1",
+    "css.escape": "^1.5.1",
+    "eslint": "9.18.0",
+    "eslint-plugin-jest": "28.10.0",
     "eslint-plugin-playwright": "^2.1.0",
-    "monocart-reporter": "^2.8.0"
+    "globals": "^15.14.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-monocart-coverage": "^1.1.1",
+    "monocart-reporter": "^2.9.13",
+    "phoenix": "1.7.18"
   },
   "scripts": {
-    "setup": "mix deps.get && npm install && cd assets && npm install",
+    "setup": "mix deps.get && npm install",
     "e2e:server": "MIX_ENV=e2e mix test --cover --export-coverage e2e test/e2e/test_helper.exs",
     "e2e:test": "mix assets.build && cd test/e2e && npx playwright install && npx playwright test",
-    "js:test": "cd assets && npm install && npm run test",
+    "js:test": "jest",
+    "js:test.coverage": "jest --coverage",
+    "js:test.watch": "jest --watch",
+    "js:lint": "eslint --fix && cd assets && eslint --fix",
     "test": "npm run js:test && npm run e2e:test",
     "cover:merge": "node test/e2e/merge-coverage.mjs",
     "cover": "npm run test && npm run cover:merge",