phoenix_live_view 0.20.1 → 0.20.3

package/README.md

@@ -29,10 +29,10 @@ model while keeping your code closer to your data (and ultimately your source of
 
   * **Rich templating language:** Enjoy HEEx: a templating language that supports function components, slots, HTML validation, verified routes, and more.
 
-  * **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.
+  * **Diffs over the wire:** Instead of sending "HTML over the wire", LiveView knows exactly which parts of your templates change, sending minimal diffs over the wire after the initial render, reducing latency and bandwidth usage. The client leverages this information and optimizes the browser with 5-10x faster updates, compared to solutions that replace whole HTML fragments.
 
   * **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.
 
   * **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.
@@ -47,9 +47,13 @@ model while keeping your code closer to your data (and ultimately your source of
 
   * **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
+## Learning
+
+Check our [comprehensive docs](https://hexdocs.pm/phoenix_live_view) to get started.
+
+The Phoenix framework documentation also keeps a list of [community resources](https://hexdocs.pm/phoenix/community.html), including books, videos, and other materials, and some include LiveView too.
 
-News from the Phoenix team on LiveView:
+Also follow these announcements from the Phoenix team on LiveView for more examples and rationale:
 
   * [LiveBeats: Building a Social Music App With Phoenix LiveView](https://fly.io/blog/livebeats/)
 
@@ -57,15 +61,11 @@ News from the Phoenix team on LiveView:
 
   * [Initial announcement](https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript)
 
-## Learning
-
-See our existing comprehensive [docs](https://hexdocs.pm/phoenix_live_view) and [guides](https://hexdocs.pm/phoenix_live_view/api-reference.html) for more information.
-
 ## Installation
 
 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).
+LiveView, see [the previous installation guide](https://github.com/phoenixframework/phoenix_live_view/blob/v0.20.1/guides/introduction/installation.md).
 
 ## What makes LiveView unique?
 
@@ -167,6 +167,7 @@ $ mix test
 ```
 
 Running the Javascript tests:
+
 ```bash
 $ cd assets
 $ npm run test

package/assets/js/phoenix_live_view/aria.js

@@ -17,7 +17,7 @@ let ARIA = {
       (el instanceof HTMLAreaElement && el.href !== undefined) ||
       (!el.disabled && (this.anyOf(el, [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, HTMLButtonElement]))) ||
       (el instanceof HTMLIFrameElement) ||
-      (el.tabIndex > 0 || (!interactiveOnly && el.tabIndex === 0 && el.getAttribute("tabindex") !== null && el.getAttribute("aria-hidden") !== "true"))
+      (el.tabIndex > 0 || (!interactiveOnly && el.getAttribute("tabindex") !== null && el.getAttribute("aria-hidden") !== "true"))
     )
   },
 

package/assets/js/phoenix_live_view/constants.js

@@ -21,6 +21,7 @@ export const PHX_DROP_TARGET = "drop-target"
 export const PHX_ACTIVE_ENTRY_REFS = "data-phx-active-refs"
 export const PHX_LIVE_FILE_UPDATED = "phx:live-file:updated"
 export const PHX_SKIP = "data-phx-skip"
+export const PHX_MAGIC_ID = "data-phx-id"
 export const PHX_PRUNE = "data-phx-prune"
 export const PHX_PAGE_LOADING = "page-loading"
 export const PHX_CONNECTED_CLASS = "phx-connected"
@@ -79,9 +80,10 @@ export const DEFAULTS = {
 // Rendered
 export const DYNAMICS = "d"
 export const STATIC = "s"
+export const ROOT = "r"
 export const COMPONENTS = "c"
 export const EVENTS = "e"
 export const REPLY = "r"
 export const TITLE = "t"
 export const TEMPLATES = "p"
-export const STREAM = "stream"
+export const STREAM = "stream"

package/assets/js/phoenix_live_view/dom.js

@@ -285,10 +285,15 @@ let DOM = {
     }
   },
 
-  maybeHideFeedback(container, input, phxFeedbackFor){
-    if(!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))){
-      let feedbacks = [input.name]
-      if(input.name.endsWith("[]")){ feedbacks.push(input.name.slice(0, -2)) }
+  maybeHideFeedback(container, inputs, phxFeedbackFor){
+    let feedbacks = []
+    inputs.forEach(input => {
+      if(!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))){
+        feedbacks.push(input.name)
+        if(input.name.endsWith("[]")){ feedbacks.push(input.name.slice(0, -2)) }
+      }
+    })
+    if(feedbacks.length > 0){
       let selector = feedbacks.map(f => `[${phxFeedbackFor}="${f}"]`).join(", ")
       DOM.all(container, selector, el => el.classList.add(PHX_NO_FEEDBACK_CLASS))
     }
@@ -358,7 +363,7 @@ let DOM = {
     for(let i = targetAttrs.length - 1; i >= 0; i--){
       let name = targetAttrs[i].name
       if(isIgnored){
-        if(name.startsWith("data-") && !source.hasAttribute(name)){ target.removeAttribute(name) }
+        if(name.startsWith("data-") && !source.hasAttribute(name) && ![PHX_REF, PHX_REF_SRC].includes(name)){ target.removeAttribute(name) }
       } else {
         if(!source.hasAttribute(name)){ target.removeAttribute(name) }
       }
@@ -366,8 +371,8 @@ let DOM = {
   },
 
   mergeFocusedInput(target, source){
-    // skip selects because FF will reset highlighted index for any setAttribute
-    if(!(target instanceof HTMLSelectElement)){ DOM.mergeAttrs(target, source, {exclude: ["value"]}) }
+    DOM.mergeAttrs(target, source, {exclude: ["value"]})
+
     if(source.readOnly){
       target.setAttribute("readonly", true)
     } else {

package/assets/js/phoenix_live_view/dom_patch.js

@@ -6,6 +6,7 @@ import {
   PHX_ROOT_ID,
   PHX_SESSION,
   PHX_SKIP,
+  PHX_MAGIC_ID,
   PHX_STATIC,
   PHX_TRIGGER_ACTION,
   PHX_UPDATE,
@@ -76,7 +77,7 @@ export default class DOMPatch {
     })
   }
 
-  perform(){
+  perform(isJoinPatch){
     let {view, liveSocket, container, html} = this
     let targetContainer = this.isCIDPatch() ? this.targetCIDContainer(html) : container
     if(this.isCIDPatch() && !targetContainer){ return }
@@ -96,21 +97,19 @@ export default class DOMPatch {
 
     let externalFormTriggered = null
 
-    let diffHTML = liveSocket.time("premorph container prep", () => {
-      return this.buildDiffHTML(container, html, phxUpdate, targetContainer)
-    })
-
     this.trackBefore("added", container)
     this.trackBefore("updated", container, container)
 
     liveSocket.time("morphdom", () => {
       this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
         Object.entries(inserts).forEach(([key, [streamAt, limit]]) => {
-          this.streamInserts[key] = {ref, streamAt, limit}
+          this.streamInserts[key] = {ref, streamAt, limit, resetKept: false}
         })
         if(reset !== undefined){
           DOM.all(container, `[${PHX_STREAM_REF}="${ref}"]`, child => {
-            if(!inserts[child.id]){
+            if(inserts[child.id]){
+              this.streamInserts[child.id].resetKept = true
+            } else {
               this.removeStreamChildElement(child)
             }
           })
@@ -121,10 +120,14 @@ export default class DOMPatch {
         })
       })
 
-      morphdom(targetContainer, diffHTML, {
+      morphdom(targetContainer, html, {
         childrenOnly: targetContainer.getAttribute(PHX_COMPONENT) === null,
         getNodeKey: (node) => {
-          return DOM.isPhxDestroyed(node) ? null : node.id
+          if(DOM.isPhxDestroyed(node)){ return null }
+          // If we have a join patch, then by definition there was no PHX_MAGIC_ID.
+          // This is important to reduce the amount of elements morphdom discards.
+          if(isJoinPatch){ return node.id }
+          return node.id || (node.getAttribute && node.getAttribute(PHX_MAGIC_ID))
         },
         // skip indexing from children when container is stream
         skipFromChildren: (from) => { return from.getAttribute(phxUpdate) === PHX_STREAM },
@@ -164,7 +167,7 @@ export default class DOMPatch {
           return el
         },
         onNodeAdded: (el) => {
-          if(el.getAttribute){ this.maybeReOrderStream(el) }
+          if(el.getAttribute){ this.maybeReOrderStream(el, true) }
 
           // hack to fix Safari handling of img srcset and video tags
           if(el instanceof HTMLImageElement && el.srcset){
@@ -185,6 +188,19 @@ export default class DOMPatch {
           }
           added.push(el)
         },
+        onBeforeElChildrenUpdated: (fromEl, toEl) => {
+          // before we update the children, we need to set existing stream children
+          // into the new order from the server if they were kept during a stream reset
+          if(fromEl.getAttribute(phxUpdate) === PHX_STREAM){
+            let toIds = Array.from(toEl.children).map(child => child.id)
+            Array.from(fromEl.children).filter(child => {
+              let {resetKept} = this.getStreamInsert(child)
+              return resetKept
+            }).forEach((child) => {
+              this.streamInserts[child.id].streamAt = toIds.indexOf(child.id)
+            })
+          }
+        },
         onNodeDiscarded: (el) => this.onNodeDiscarded(el),
         onBeforeNodeDiscarded: (el) => {
           if(el.getAttribute && el.getAttribute(PHX_PRUNE) !== null){ return true }
@@ -202,7 +218,7 @@ export default class DOMPatch {
             externalFormTriggered = el
           }
           updates.push(el)
-          this.maybeReOrderStream(el)
+          this.maybeReOrderStream(el, false)
         },
         onBeforeElUpdated: (fromEl, toEl) => {
           DOM.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom)
@@ -273,9 +289,7 @@ export default class DOMPatch {
       })
     }
 
-    trackedInputs.forEach(input => {
-      DOM.maybeHideFeedback(targetContainer, input, phxFeedbackFor)
-    })
+    DOM.maybeHideFeedback(targetContainer, trackedInputs, phxFeedbackFor)
 
     liveSocket.silenceEvents(() => DOM.restoreFocus(focused, selectionStart, selectionEnd))
     DOM.dispatchEvent(document, "phx:update")
@@ -320,9 +334,9 @@ export default class DOMPatch {
     return insert || {}
   }
 
-  maybeReOrderStream(el){
+  maybeReOrderStream(el, isNew){
     let {ref, streamAt, limit} = this.getStreamInsert(el)
-    if(streamAt === undefined){ return }
+    if(streamAt === undefined || (streamAt === 0 && !isNew)){ 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))
@@ -363,7 +377,7 @@ export default class DOMPatch {
   isCIDPatch(){ return this.cidPatch }
 
   skipCIDSibling(el){
-    return el.nodeType === Node.ELEMENT_NODE && el.getAttribute(PHX_SKIP) !== null
+    return el.nodeType === Node.ELEMENT_NODE && el.hasAttribute(PHX_SKIP)
   }
 
   targetCIDContainer(html){
@@ -376,37 +390,5 @@ export default class DOMPatch {
     }
   }
 
-  // builds HTML for morphdom patch
-  // - for full patches of LiveView or a component with a single
-  //   root node, simply returns the HTML
-  // - for patches of a component with multiple root nodes, the
-  //   parent node becomes the target container and non-component
-  //   siblings are marked as skip.
-  buildDiffHTML(container, html, phxUpdate, targetContainer){
-    let isCIDPatch = this.isCIDPatch()
-    let isCIDWithSingleRoot = isCIDPatch && targetContainer.getAttribute(PHX_COMPONENT) === this.targetCID.toString()
-    if(!isCIDPatch || isCIDWithSingleRoot){
-      return html
-    } else {
-      // component patch with multiple CID roots
-      let diffContainer = null
-      let template = document.createElement("template")
-      diffContainer = DOM.cloneNode(targetContainer)
-      let [firstComponent, ...rest] = DOM.findComponentNodeList(diffContainer, this.targetCID)
-      template.innerHTML = html
-      rest.forEach(el => el.remove())
-      Array.from(diffContainer.childNodes).forEach(child => {
-        // we can only skip trackable nodes with an ID
-        if(child.id && child.nodeType === Node.ELEMENT_NODE && child.getAttribute(PHX_COMPONENT) !== this.targetCID.toString()){
-          child.setAttribute(PHX_SKIP, "")
-          child.innerHTML = ""
-        }
-      })
-      Array.from(template.content.childNodes).forEach(el => diffContainer.insertBefore(el, firstComponent))
-      firstComponent.remove()
-      return diffContainer.outerHTML
-    }
-  }
-
   indexOf(parent, child){ return Array.from(parent.children).indexOf(child) }
 }

package/assets/js/phoenix_live_view/entry_uploader.js

@@ -15,6 +15,7 @@ export default class EntryUploader {
 
   error(reason){
     if(this.errored){ return }
+    this.uploadChannel.leave()
     this.errored = true
     clearTimeout(this.chunkTimer)
     this.entry.error(reason)

package/assets/js/phoenix_live_view/js.js

@@ -9,8 +9,6 @@ let JS = {
     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)
@@ -26,6 +24,16 @@ let JS = {
     return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length > 0)
   },
 
+  isInViewport(el){
+    const rect = el.getBoundingClientRect()
+    return (
+      rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    )
+  },
+
   // private
 
   // commands
@@ -46,13 +54,12 @@ let JS = {
   },
 
   exec_push(eventType, phxEvent, view, sourceEl, el, args){
-    if(!view.isConnected()){ return }
-
     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(!targetView.isConnected()){ return }
       if(eventType === "change"){
         let {newCid, _target} = args
         _target = _target || (DOM.isFormInput(sourceEl) ? sourceEl.name : undefined)
@@ -102,6 +109,10 @@ let JS = {
     this.addOrRemoveClasses(el, [], names, transition, time, view)
   },
 
+  exec_toggle_class(eventType, phxEvent, view, sourceEl, el, {to, names, transition, time}){
+    this.toggleClasses(el, names, transition, view)
+  },
+
   exec_transition(eventType, phxEvent, view, sourceEl, el, {time, transition}){
     this.addOrRemoveClasses(el, [], [], transition, time, view)
   },
@@ -193,6 +204,15 @@ let JS = {
     }
   },
 
+  toggleClasses(el, classes, transition, time, view){
+    window.requestAnimationFrame(() => {
+      let [prevAdds, prevRemoves] = DOM.getSticky(el, "classes", [[], []])
+      let newAdds = classes.filter(name => prevAdds.indexOf(name) < 0 && !el.classList.contains(name))
+      let newRemoves = classes.filter(name => prevRemoves.indexOf(name) < 0 && el.classList.contains(name))
+      this.addOrRemoveClasses(el, newAdds, newRemoves, transition, time, view)
+    })
+  },
+
   addOrRemoveClasses(el, adds, removes, transition, time, view){
     let [transitionRun, transitionStart, transitionEnd] = transition || [[], [], []]
     if(transitionRun.length > 0){

package/assets/js/phoenix_live_view/live_socket.js

@@ -522,7 +522,7 @@ export default class LiveSocket {
     if(!dead){ this.bindNav() }
     this.bindClicks()
     if(!dead){ this.bindForms() }
-    this.bind({keyup: "keyup", keydown: "keydown"}, (e, type, view, targetEl, phxEvent, eventTarget) => {
+    this.bind({keyup: "keyup", keydown: "keydown"}, (e, type, view, targetEl, phxEvent, phxTarget) => {
       let matchKey = targetEl.getAttribute(this.binding(PHX_KEY))
       let pressedKey = e.key && e.key.toLowerCase() // chrome clicked autocompletes send a keydown without key
       if(matchKey && matchKey.toLowerCase() !== pressedKey){ return }
@@ -530,13 +530,13 @@ export default class LiveSocket {
       let data = {key: e.key, ...this.eventMeta(type, e, targetEl)}
       JS.exec(type, phxEvent, view, targetEl, ["push", {data}])
     })
-    this.bind({blur: "focusout", focus: "focusin"}, (e, type, view, targetEl, phxEvent, eventTarget) => {
-      if(!eventTarget){
+    this.bind({blur: "focusout", focus: "focusin"}, (e, type, view, targetEl, phxEvent, phxTarget) => {
+      if(!phxTarget){
         let data = {key: e.key, ...this.eventMeta(type, e, targetEl)}
         JS.exec(type, phxEvent, view, targetEl, ["push", {data}])
       }
     })
-    this.bind({blur: "blur", focus: "focus"}, (e, type, view, targetEl, targetCtx, phxEvent, phxTarget) => {
+    this.bind({blur: "blur", focus: "focus"}, (e, type, view, targetEl, phxEvent, phxTarget) => {
       // blur and focus are triggered on document and window. Discard one to avoid dups
       if(phxTarget === "window"){
         let data = this.eventMeta(type, e, targetEl)
@@ -619,7 +619,7 @@ export default class LiveSocket {
   }
 
   bindClicks(){
-    window.addEventListener("click", e => this.clickStartedAtTarget = e.target)
+    window.addEventListener("mousedown", e => this.clickStartedAtTarget = e.target)
     this.bindClick("click", "click", false)
     this.bindClick("mousedown", "capture-click", true)
   }
@@ -661,7 +661,7 @@ export default class LiveSocket {
       if(!(el.isSameNode(clickStartedAt) || el.contains(clickStartedAt))){
         this.withinOwners(e.target, view => {
           let phxEvent = el.getAttribute(phxClickAway)
-          if(JS.isVisible(el)){
+          if(JS.isVisible(el) && JS.isInViewport(el)){
             JS.exec("click", phxEvent, view, el, ["push", {data: this.eventMeta("click", e, e.target)}])
           }
         })
@@ -703,7 +703,9 @@ export default class LiveSocket {
       let type = target && target.getAttribute(PHX_LIVE_LINK)
       if(!type || !this.isConnected() || !this.main || DOM.wantsNewTab(e)){ return }
 
-      let href = target.href
+      // When wrapping an SVG element in an anchor tag, the href can be an SVGAnimatedString
+      let href = target.href instanceof SVGAnimatedString ? target.href.baseVal : target.href
+
       let linkState = target.getAttribute(PHX_LINK_STATE)
       e.preventDefault()
       e.stopImmediatePropagation() // do not bubble click to regular phx-click bindings