phoenix_live_view 0.20.0 → 0.20.2

package/assets/js/phoenix_live_view/rendered.js

@@ -5,10 +5,12 @@ import {
   EVENTS,
   PHX_COMPONENT,
   PHX_SKIP,
+  PHX_MAGIC_ID,
   REPLY,
   STATIC,
   TITLE,
   STREAM,
+  ROOT,
 } from "./constants"
 
 import {
@@ -17,6 +19,122 @@ import {
   isCid,
 } from "./utils"
 
+const VOID_TAGS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "command",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+])
+const endingTagNameChars = new Set([">", "/", " ", "\n", "\t", "\r"])
+const quoteChars = new Set(["'", '"'])
+
+export let modifyRoot = (html, attrs, clearInnerHTML) => {
+  let i = 0
+  let insideComment = false
+  let beforeTag, afterTag, tag, tagNameEndsAt, id, newHTML
+  while(i < html.length){
+    let char = html.charAt(i)
+    if(insideComment){
+      if(char === "-" && html.slice(i, i + 3) === "-->"){
+        insideComment = false
+        i += 3
+      } else {
+        i++
+      }
+    } else if(char === "<" && html.slice(i, i + 4) === "<!--"){
+      insideComment = true
+      i += 4
+    } else if(char === "<"){
+      beforeTag = html.slice(0, i)
+      let iAtOpen = i
+      i++
+      for(i; i < html.length; i++){
+        if(endingTagNameChars.has(html.charAt(i))){ break }
+      }
+      tagNameEndsAt = i
+      tag = html.slice(iAtOpen + 1, tagNameEndsAt)
+      // Scan the opening tag for id, if there is any
+      for(i; i < html.length; i++){
+        if(html.charAt(i) === ">" ){ break }
+        if(html.charAt(i) === "="){
+          let isId = html.slice(i - 3, i) === " id"
+          i++;
+          let char = html.charAt(i)
+          if (quoteChars.has(char)) {
+            let attrStartsAt = i
+            i++
+            for(i; i < html.length; i++){
+              if(html.charAt(i) === char){ break }
+            }
+            if (isId) {
+              id = html.slice(attrStartsAt + 1, i)
+              break
+            }
+          }
+        }
+      }
+      break
+    } else {
+      i++
+    }
+  }
+  if(!tag){ throw new Error(`malformed html ${html}`) }
+
+  let closeAt = html.length - 1
+  insideComment = false
+  while(closeAt >= beforeTag.length + tag.length){
+    let char = html.charAt(closeAt)
+    if(insideComment){
+      if(char === "-" && html.slice(closeAt - 3, closeAt) === "<!-"){
+        insideComment = false
+        closeAt -= 4
+      } else {
+        closeAt -= 1
+      }
+    } else if(char === ">" && html.slice(closeAt - 2, closeAt) === "--"){
+      insideComment = true
+      closeAt -= 3
+    } else if(char === ">"){
+      break
+    } else {
+      closeAt -= 1
+    }
+  }
+  afterTag = html.slice(closeAt + 1, html.length)
+
+  let attrsStr =
+    Object.keys(attrs)
+    .map(attr => attrs[attr] === true ? attr : `${attr}="${attrs[attr]}"`)
+    .join(" ")
+
+  if(clearInnerHTML){
+    // Keep the id if any
+    let idAttrStr = id ? ` id="${id}"` : "";
+    if(VOID_TAGS.has(tag)){
+      newHTML = `<${tag}${idAttrStr}${attrsStr === "" ? "" : " "}${attrsStr}/>`
+    } else {
+      newHTML = `<${tag}${idAttrStr}${attrsStr === "" ? "" : " "}${attrsStr}></${tag}>`
+    }
+  } else {
+    let rest = html.slice(tagNameEndsAt, closeAt + 1)
+    newHTML = `<${tag}${attrsStr === "" ? "" : " "}${attrsStr}${rest}`
+  }
+
+  return [newHTML, beforeTag, afterTag]
+}
+
 export default class Rendered {
   static extract(diff){
     let {[REPLY]: reply, [EVENTS]: events, [TITLE]: title} = diff
@@ -29,20 +147,21 @@ export default class Rendered {
   constructor(viewId, rendered){
     this.viewId = viewId
     this.rendered = {}
+    this.magicId = 0
     this.mergeDiff(rendered)
   }
 
   parentViewId(){ return this.viewId }
 
   toString(onlyCids){
-    let [str, streams] = this.recursiveToString(this.rendered, this.rendered[COMPONENTS], onlyCids)
+    let [str, streams] = this.recursiveToString(this.rendered, this.rendered[COMPONENTS], onlyCids, true, {})
     return [str, streams]
   }
 
-  recursiveToString(rendered, components = rendered[COMPONENTS], onlyCids){
+  recursiveToString(rendered, components = rendered[COMPONENTS], onlyCids, changeTracking, rootAttrs){
     onlyCids = onlyCids ? new Set(onlyCids) : null
     let output = {buffer: "", components: components, onlyCids: onlyCids, streams: new Set()}
-    this.toOutputBuffer(rendered, null, output)
+    this.toOutputBuffer(rendered, null, output, changeTracking, rootAttrs)
     return [output.buffer, output.streams]
   }
 
@@ -90,10 +209,11 @@ export default class Rendered {
         }
 
         stat = tdiff[STATIC]
-        ndiff = this.cloneMerge(tdiff, cdiff)
+        ndiff = this.cloneMerge(tdiff, cdiff, true)
         ndiff[STATIC] = stat
       } else {
-        ndiff = cdiff[STATIC] !== undefined ? cdiff : this.cloneMerge(oldc[cid] || {}, cdiff)
+        ndiff = cdiff[STATIC] !== undefined || oldc[cid] === undefined ?
+          cdiff : this.cloneMerge(oldc[cid], cdiff, false)
       }
 
       cache[cid] = ndiff
@@ -121,23 +241,41 @@ export default class Rendered {
         target[key] = val
       }
     }
+    if(target[ROOT]){
+      target.newRender = true
+    }
   }
 
-  cloneMerge(target, source){
+  // Merges cid trees together, copying statics from source tree.
+  //
+  // The `pruneMagicId` is passed to control pruning the magicId of the
+  // target. We must always prune the magicId when we are sharing statics
+  // from another component. If not pruning, we replicate the logic from
+  // mutableMerge, where we set newRender to true if there is a root
+  // (effectively forcing the new version to be rendered instead of skipped)
+  //
+  cloneMerge(target, source, pruneMagicId){
     let merged = {...target, ...source}
     for(let key in merged){
       let val = source[key]
       let targetVal = target[key]
       if(isObject(val) && val[STATIC] === undefined && isObject(targetVal)){
-        merged[key] = this.cloneMerge(targetVal, val)
+        merged[key] = this.cloneMerge(targetVal, val, pruneMagicId)
       }
     }
+    if(pruneMagicId){
+      delete merged.magicId
+      delete merged.newRender
+    } else if(target[ROOT]){
+      merged.newRender = true
+    }
     return merged
   }
 
   componentToString(cid){
-    let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid, null, false)
-    return [str, streams]
+    let [str, streams] = this.recursiveCIDToString(this.rendered[COMPONENTS], cid, null)
+    let [strippedHTML, _before, _after] = modifyRoot(str, {})
+    return [strippedHTML, streams]
   }
 
   pruneCIDs(cids){
@@ -158,16 +296,53 @@ export default class Rendered {
     }
   }
 
-  toOutputBuffer(rendered, templates, output){
+  nextMagicID(){
+    this.magicId++
+    return `${this.parentViewId()}-${this.magicId}`
+  }
+
+  // Converts rendered tree to output buffer.
+  //
+  // changeTracking controls if we can apply the PHX_SKIP optimization.
+  // It is disabled for comprehensions since we must re-render the entire collection
+  // and no invidial element is tracked inside the comprehension.
+  toOutputBuffer(rendered, templates, output, changeTracking, rootAttrs = {}){
     if(rendered[DYNAMICS]){ return this.comprehensionToBuffer(rendered, templates, output) }
     let {[STATIC]: statics} = rendered
     statics = this.templateStatic(statics, templates)
+    let isRoot = rendered[ROOT]
+    let prevBuffer = output.buffer
+    if(isRoot){ output.buffer = "" }
+
+    if(changeTracking && isRoot && !rendered.magicId){
+      rendered.newRender = true
+      rendered.magicId = this.nextMagicID()
+    }
 
     output.buffer += statics[0]
     for(let i = 1; i < statics.length; i++){
-      this.dynamicToBuffer(rendered[i - 1], templates, output)
+      this.dynamicToBuffer(rendered[i - 1], templates, output, changeTracking)
       output.buffer += statics[i]
     }
+
+    // Applies the root tag "skip" optimization if supported, which clears
+    // the root tag attributes and innerHTML, and only maintains the magicId.
+    // We can only skip when changeTracking is supported (outside of a comprehension),
+    // and when the root element hasn't experienced an unrendered merge (newRender true).
+    if(isRoot){
+      let skip = false
+      let attrs
+      if(changeTracking || Object.keys(rootAttrs).length > 0){
+        skip = !rendered.newRender
+        attrs = {[PHX_MAGIC_ID]: rendered.magicId, ...rootAttrs}
+      } else {
+        attrs = rootAttrs
+      }
+      if(skip){ attrs[PHX_SKIP] = true}
+      let [newRoot, commentBefore, commentAfter] = modifyRoot(output.buffer, attrs, skip)
+      rendered.newRender = false
+      output.buffer = prevBuffer + commentBefore + newRoot + commentAfter
+    }
   }
 
   comprehensionToBuffer(rendered, templates, output){
@@ -179,7 +354,12 @@ export default class Rendered {
       let dynamic = dynamics[d]
       output.buffer += statics[0]
       for(let i = 1; i < statics.length; i++){
-        this.dynamicToBuffer(dynamic[i - 1], compTemplates, output)
+        // Inside a comprehension, we don't track how dynamics change
+        // over time (and features like streams would make that impossible
+        // unless we move the stream diffing away from morphdom),
+        // so we can't perform root change tracking.
+        let changeTracking = false
+        this.dynamicToBuffer(dynamic[i - 1], compTemplates, output, changeTracking)
         output.buffer += statics[i]
       }
     }
@@ -191,75 +371,40 @@ export default class Rendered {
     }
   }
 
-  dynamicToBuffer(rendered, templates, output){
+  dynamicToBuffer(rendered, templates, output, changeTracking){
     if(typeof (rendered) === "number"){
       let [str, streams] = this.recursiveCIDToString(output.components, rendered, output.onlyCids)
       output.buffer += str
       output.streams = new Set([...output.streams, ...streams])
     } else if(isObject(rendered)){
-      this.toOutputBuffer(rendered, templates, output)
+      this.toOutputBuffer(rendered, templates, output, changeTracking, {})
     } else {
       output.buffer += rendered
     }
   }
 
-  recursiveCIDToString(components, cid, onlyCids, allowRootComments = true){
+  recursiveCIDToString(components, cid, onlyCids){
     let component = components[cid] || logError(`no component for CID ${cid}`, components)
-    let template = document.createElement("template")
-    let [html, streams] = this.recursiveToString(component, components, onlyCids)
-    template.innerHTML = html
-    let container = template.content
+    let attrs = {[PHX_COMPONENT]: cid}
     let skip = onlyCids && !onlyCids.has(cid)
-
-    let [hasChildNodes, hasChildComponents] =
-      Array.from(container.childNodes).reduce(([hasNodes, hasComponents], child, i) => {
-        if(child.nodeType === Node.ELEMENT_NODE){
-          if(child.getAttribute(PHX_COMPONENT)){
-            return [hasNodes, true]
-          }
-          child.setAttribute(PHX_COMPONENT, cid)
-          if(!child.id){ child.id = `${this.parentViewId()}-${cid}-${i}` }
-          if(skip){
-            child.setAttribute(PHX_SKIP, "")
-            child.innerHTML = ""
-          }
-          return [true, hasComponents]
-        } else if(child.nodeType === Node.COMMENT_NODE){
-          // we have to strip root comments when rendering a component directly
-          // for patching because the morphdom target must be exactly the root entrypoint
-          if(!allowRootComments){ child.remove() }
-          return [hasNodes, hasComponents]
-        } else {
-          if(child.nodeValue.trim() !== ""){
-            logError("only HTML element tags are allowed at the root of components.\n\n" +
-              `got: "${child.nodeValue.trim()}"\n\n` +
-              "within:\n", template.innerHTML.trim())
-            child.replaceWith(this.createSpan(child.nodeValue, cid))
-            return [true, hasComponents]
-          } else {
-            child.remove()
-            return [hasNodes, hasComponents]
-          }
-        }
-      }, [false, false])
-
-    if(!hasChildNodes && !hasChildComponents){
-      logError("expected at least one HTML element tag inside a component, but the component is empty:\n",
-        template.innerHTML.trim())
-      return [this.createSpan("", cid).outerHTML, streams]
-    } else if(!hasChildNodes && hasChildComponents){
-      logError("expected at least one HTML element tag directly inside a component, but only subcomponents were found. A component must render at least one HTML tag directly inside itself.",
-        template.innerHTML.trim())
-      return [template.innerHTML, streams]
-    } else {
-      return [template.innerHTML, streams]
-    }
-  }
-
-  createSpan(text, cid){
-    let span = document.createElement("span")
-    span.innerText = text
-    span.setAttribute(PHX_COMPONENT, cid)
-    return span
+    // Two optimization paths apply here:
+    //
+    //   1. The onlyCids optimization works by the server diff telling us only specific
+    //     cid's have changed. This allows us to skip rendering any component that hasn't changed,
+    //     which ultimately sets PHX_SKIP root attribute and avoids rendering the innerHTML.
+    //
+    //   2. The root PHX_SKIP optimization generalizes to all HEEx function components, and
+    //     works in the same PHX_SKIP attribute fashion as 1, but the newRender tracking is done
+    //     at the general diff merge level. If we merge a diff with new dynamics, we necessariy have
+    //     experienced a change which must be a newRender, and thus we can't skip the render.
+    //
+    // Both optimization flows apply here. newRender is set based on the onlyCids optimization, and
+    // we track a deterministic magicId based on the cid.
+    component.newRender = !skip
+    component.magicId = `${this.parentViewId()}-c-${cid}`
+    let changeTracking = true
+    let [html, streams] = this.recursiveToString(component, components, onlyCids, changeTracking, attrs)
+
+    return [html, streams]
   }
-}
+}

package/assets/js/phoenix_live_view/upload_entry.js

@@ -96,7 +96,8 @@ export default class UploadEntry {
       relative_path: this.file.webkitRelativePath,
       size: this.file.size,
       type: this.file.type,
-      ref: this.ref
+      ref: this.ref,
+      meta: typeof(this.file.meta) === "function" ? this.file.meta() : undefined
     }
   }
 

package/assets/js/phoenix_live_view/view.js

@@ -115,9 +115,10 @@ export default class View {
     this.children = this.parent ? null : {}
     this.root.children[this.id] = {}
     this.channel = this.liveSocket.channel(`lv:${this.id}`, () => {
+      let url = this.href && this.expandURL(this.href)
       return {
-        redirect: this.redirect ? this.href : undefined,
-        url: this.redirect ? undefined : this.href || undefined,
+        redirect: this.redirect ? url : undefined,
+        url: this.redirect ? undefined : url || undefined,
         params: this.connectParams(liveReferer),
         session: this.getSession(),
         static: this.getStatic(),
@@ -340,7 +341,7 @@ export default class View {
     this.attachTrueDocEl()
     let patch = new DOMPatch(this, this.el, this.id, html, streams, null)
     patch.markPrunableContentForRemoval()
-    this.performPatch(patch, false)
+    this.performPatch(patch, false, true)
     this.joinNewChildren()
     this.execNewMounted()
 
@@ -381,7 +382,7 @@ export default class View {
     if(newHook){ newHook.__mounted() }
   }
 
-  performPatch(patch, pruneCids){
+  performPatch(patch, pruneCids, isJoinPatch = false){
     let removedEls = []
     let phxChildrenAdded = false
     let updatedHookIds = new Set()
@@ -414,7 +415,7 @@ export default class View {
     })
 
     patch.after("transitionsDiscarded", els => this.afterElementsRemoved(els, pruneCids))
-    patch.perform()
+    patch.perform(isJoinPatch)
     this.afterElementsRemoved(removedEls, pruneCids)
 
     return phxChildrenAdded
@@ -808,7 +809,7 @@ export default class View {
   targetComponentID(target, targetCtx, opts = {}){
     if(isCid(targetCtx)){ return targetCtx }
 
-    let cidOrSelector = target.getAttribute(this.binding("target"))
+    let cidOrSelector = opts.target || target.getAttribute(this.binding("target"))
     if(isCid(cidOrSelector)){
       return parseInt(cidOrSelector)
     } else if(targetCtx && (cidOrSelector !== null || opts.target)){
@@ -890,7 +891,7 @@ export default class View {
 
   pushInput(inputEl, targetCtx, forceCid, phxEvent, opts, callback){
     let uploads
-    let cid = isCid(forceCid) ? forceCid : this.targetComponentID(inputEl.form, targetCtx)
+    let cid = isCid(forceCid) ? forceCid : this.targetComponentID(inputEl.form, targetCtx, opts)
     let refGenerator = () => this.putRef([inputEl, inputEl.form], "change", opts)
     let formData
     let meta  = this.extractMeta(inputEl.form)
@@ -994,7 +995,7 @@ export default class View {
     let cid = this.targetComponentID(formEl, targetCtx)
     if(LiveUploader.hasUploadsInProgress(formEl)){
       let [ref, _els] = refGenerator()
-      let push = () => this.pushFormSubmit(formEl, submitter, targetCtx, phxEvent, opts, onReply)
+      let push = () => this.pushFormSubmit(formEl, targetCtx, phxEvent, submitter, opts, onReply)
       return this.scheduleSubmit(formEl, ref, opts, push)
     } else if(LiveUploader.inputsAwaitingPreflight(formEl).length > 0){
       let [ref, els] = refGenerator()
@@ -1062,13 +1063,25 @@ export default class View {
     })
   }
 
-  dispatchUploads(name, filesOrBlobs){
-    let inputs = DOM.findUploadInputs(this.el).filter(el => el.name === name)
+  dispatchUploads(targetCtx, name, filesOrBlobs){
+    let targetElement = this.targetCtxElement(targetCtx) || this.el;
+    let inputs = DOM.findUploadInputs(targetElement).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, {detail: {files: filesOrBlobs}}) }
   }
 
+  targetCtxElement(targetCtx) {
+    if(isCid(targetCtx)){
+      let [target] = DOM.findComponentNodeList(this.el, targetCtx)
+      return target
+    } else if(targetCtx) {
+      return targetCtx
+    } else {
+      return null
+    }
+  }
+
   pushFormRecovery(form, newCid, callback){
     this.liveSocket.withinOwners(form, (view, targetCtx) => {
       let phxChange = this.binding("change")

package/assets/js/phoenix_live_view/view_hook.js

@@ -53,11 +53,13 @@ export default class ViewHook {
   }
 
   upload(name, files){
-    return this.__view.dispatchUploads(name, files)
+    return this.__view.dispatchUploads(null, name, files)
   }
 
   uploadTo(phxTarget, name, files){
-    return this.__view.withinTargets(phxTarget, view => view.dispatchUploads(name, files))
+    return this.__view.withinTargets(phxTarget, (view, targetCtx) => {
+      view.dispatchUploads(targetCtx, name, files)
+    })
   }
 
   __cleanup__(){

package/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "repository": {},
@@ -10,7 +10,7 @@
     "test.watch": "jest --watch"
   },
   "dependencies": {
-    "morphdom": "2.7.0"
+    "morphdom": "2.7.1"
   },
   "devDependencies": {
     "@babel/cli": "7.14.3",

package/package.json

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