phoenix_live_view 0.20.7 → 0.20.9

package/assets/js/phoenix_live_view/dom_patch.js

@@ -331,14 +331,15 @@ export default class DOMPatch {
   }
 
   removeStreamChildElement(child){
-    if(!this.maybePendingRemove(child)){
-      if(this.streamInserts[child.id]){
-        // we need to store children so we can morph them later
-        this.streamComponentRestore[child.id] = child
-        child.remove()
-      } else {
+    // we need to store the node if it is actually re-added in the same patch
+    // we do NOT want to execute phx-remove, we do NOT want to call onNodeDiscarded
+    if(this.streamInserts[child.id]){
+      this.streamComponentRestore[child.id] = child
+      child.remove()
+    } else {
+      // only remove the element now if it has no phx-remove binding
+      if(!this.maybePendingRemove(child)){
         child.remove()
-        // TODO: check if we really don't want to call discarded for re-added stream items
         this.onNodeDiscarded(child)
       }
     }
@@ -365,6 +366,12 @@ export default class DOMPatch {
       return
     }
 
+    // check if the element has a parent element;
+    // it doesn't if we are currently recursively morphing (restoring a saved stream child)
+    // because the element is not yet added to the real dom;
+    // reordering does not make sense in that case anyway
+    if(!el.parentElement){ return }
+
     if(streamAt === 0){
       el.parentElement.insertBefore(el, el.parentElement.firstElementChild)
     } else if(streamAt > 0){

package/assets/js/phoenix_live_view/rendered.js

@@ -167,13 +167,6 @@ export default class Rendered {
     let newc = diff[COMPONENTS]
     let cache = {}
     delete diff[COMPONENTS]
-    // we must consider all newly added components as reset for proper change tracking
-    if(newc){
-      let prevComponents = this.rendered[COMPONENTS] || {}
-      for(let cid in newc){
-        if(prevComponents[cid] === undefined){ newc[cid].reset = true }
-      }
-    }
     this.rendered = this.mutableMerge(this.rendered, diff)
     this.rendered[COMPONENTS] = this.rendered[COMPONENTS] || {}
 
@@ -257,6 +250,8 @@ export default class Rendered {
       let targetVal = target[key]
       if(isObject(val) && val[STATIC] === undefined && isObject(targetVal)){
         merged[key] = this.cloneMerge(targetVal, val, pruneMagicId)
+      } else if(val === undefined && isObject(targetVal)){
+        merged[key] = this.cloneMerge(targetVal, {}, pruneMagicId)
       }
     }
     if(pruneMagicId){
@@ -294,7 +289,7 @@ export default class Rendered {
 
   nextMagicID(){
     this.magicId++
-    return `${this.parentViewId()}-${this.magicId}`
+    return `m${this.magicId}-${this.parentViewId()}`
   }
 
   // Converts rendered tree to output buffer.
@@ -330,7 +325,7 @@ export default class Rendered {
     if(isRoot){
       let skip = false
       let attrs
-      // when a LC is added on the page, we need to re-render the entire LC tree,
+      // When a LC is re-added to the page, we need to re-render the entire LC tree,
       // therefore changeTracking is false; however, we need to keep all the magicIds
       // from any function component so the next time the LC is updated, we can apply
       // the skip optimization
@@ -403,12 +398,15 @@ export default class Rendered {
     // Both optimization flows apply here. newRender is set based on the onlyCids optimization, and
     // we track a deterministic magicId based on the cid.
     //
+    // changeTracking is about the entire tree
+    // newRender is about the current root in the tree
+    //
     // By default changeTracking is enabled, but we special case the flow where the client is pruning
     // cids and the server adds the component back. In such cases, we explicitly disable changeTracking
     // with resetRender for this cid, then re-enable it after the recursive call to skip the optimization
     // for the entire component tree.
     component.newRender = !skip
-    component.magicId = `${this.parentViewId()}-c-${cid}`
+    component.magicId = `c${cid}-${this.parentViewId()}`
     // enable change tracking as long as the component hasn't been reset
     let changeTracking = !component.reset
     let [html, streams] = this.recursiveToString(component, components, onlyCids, changeTracking, attrs)

package/assets/js/phoenix_live_view/view.js

@@ -120,7 +120,6 @@ export default class View {
     this.childJoins = 0
     this.loaderTimer = null
     this.pendingDiffs = []
-    this.pruningCIDs = []
     this.redirect = false
     this.href = null
     this.joinCount = this.parent ? this.parent.joinCount - 1 : 0
@@ -130,7 +129,6 @@ export default class View {
     this.stopCallback = function(){ }
     this.pendingJoinOps = this.parent ? null : []
     this.viewHooks = {}
-    this.uploaders = {}
     this.formSubmits = []
     this.children = this.parent ? null : {}
     this.root.children[this.id] = {}
@@ -560,7 +558,7 @@ export default class View {
       let tag = this.el.tagName
       // Don't skip any component in the diff nor any marked as pruned
       // (as they may have been added back)
-      let cids = diff ? this.rendered.componentCIDs(diff).concat(this.pruningCIDs) : null
+      let cids = diff ? this.rendered.componentCIDs(diff) : null
       let [html, streams] = this.rendered.toString(cids)
       return [`<${tag}>${html}</${tag}>`, streams]
     })
@@ -1065,9 +1063,13 @@ export default class View {
         if(numFileInputsInProgress === 0){ onComplete() }
       });
 
-      this.uploaders[inputEl] = uploader
       let entries = uploader.entries().map(entry => entry.toPreflightPayload())
 
+      if (entries.length === 0) {
+        numFileInputsInProgress--
+        return
+      }
+
       let payload = {
         ref: inputEl.getAttribute(PHX_UPLOAD_REF),
         entries: entries,
@@ -1183,11 +1185,9 @@ export default class View {
   }
 
   maybePushComponentsDestroyed(destroyedCIDs){
-    let willDestroyCIDs = destroyedCIDs.concat(this.pruningCIDs).filter(cid => {
+    let willDestroyCIDs = destroyedCIDs.filter(cid => {
       return DOM.findComponentNodeList(this.el, cid).length === 0
     })
-    // make sure this is a copy and not a reference
-    this.pruningCIDs = willDestroyCIDs.concat([])
 
     if(willDestroyCIDs.length > 0){
       // we must reset the render change tracking for cids that
@@ -1203,7 +1203,6 @@ export default class View {
 
         if(completelyDestroyCIDs.length > 0){
           this.pushWithReply(null, "cids_destroyed", {cids: completelyDestroyCIDs}, (resp) => {
-            this.pruningCIDs = this.pruningCIDs.filter(cid => resp.cids.indexOf(cid) === -1)
             this.rendered.pruneCIDs(resp.cids)
           })
         }

package/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.20.7",
+  "version": "0.20.9",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "repository": {},

package/package.json

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

package/priv/static/phoenix_live_view.cjs.js

@@ -2363,11 +2363,11 @@ var DOMPatch = class {
     }
   }
   removeStreamChildElement(child) {
-    if (!this.maybePendingRemove(child)) {
-      if (this.streamInserts[child.id]) {
-        this.streamComponentRestore[child.id] = child;
-        child.remove();
-      } else {
+    if (this.streamInserts[child.id]) {
+      this.streamComponentRestore[child.id] = child;
+      child.remove();
+    } else {
+      if (!this.maybePendingRemove(child)) {
         child.remove();
         this.onNodeDiscarded(child);
       }
@@ -2389,6 +2389,9 @@ var DOMPatch = class {
     if (!reset && !isNew) {
       return;
     }
+    if (!el.parentElement) {
+      return;
+    }
     if (streamAt === 0) {
       el.parentElement.insertBefore(el, el.parentElement.firstElementChild);
     } else if (streamAt > 0) {
@@ -2606,14 +2609,6 @@ var Rendered = class {
     let newc = diff[COMPONENTS];
     let cache = {};
     delete diff[COMPONENTS];
-    if (newc) {
-      let prevComponents = this.rendered[COMPONENTS] || {};
-      for (let cid in newc) {
-        if (prevComponents[cid] === void 0) {
-          newc[cid].reset = true;
-        }
-      }
-    }
     this.rendered = this.mutableMerge(this.rendered, diff);
     this.rendered[COMPONENTS] = this.rendered[COMPONENTS] || {};
     if (newc) {
@@ -2679,6 +2674,8 @@ var Rendered = class {
       let targetVal = target[key];
       if (isObject(val) && val[STATIC] === void 0 && isObject(targetVal)) {
         merged[key] = this.cloneMerge(targetVal, val, pruneMagicId);
+      } else if (val === void 0 && isObject(targetVal)) {
+        merged[key] = this.cloneMerge(targetVal, {}, pruneMagicId);
       }
     }
     if (pruneMagicId) {
@@ -2712,7 +2709,7 @@ var Rendered = class {
   }
   nextMagicID() {
     this.magicId++;
-    return `${this.parentViewId()}-${this.magicId}`;
+    return `m${this.magicId}-${this.parentViewId()}`;
   }
   toOutputBuffer(rendered, templates, output, changeTracking, rootAttrs = {}) {
     if (rendered[DYNAMICS]) {
@@ -2787,7 +2784,7 @@ var Rendered = class {
     let attrs = { [PHX_COMPONENT]: cid };
     let skip = onlyCids && !onlyCids.has(cid);
     component.newRender = !skip;
-    component.magicId = `${this.parentViewId()}-c-${cid}`;
+    component.magicId = `c${cid}-${this.parentViewId()}`;
     let changeTracking = !component.reset;
     let [html, streams] = this.recursiveToString(component, components, onlyCids, changeTracking, attrs);
     delete component.reset;
@@ -2923,7 +2920,6 @@ var View = class {
     this.childJoins = 0;
     this.loaderTimer = null;
     this.pendingDiffs = [];
-    this.pruningCIDs = [];
     this.redirect = false;
     this.href = null;
     this.joinCount = this.parent ? this.parent.joinCount - 1 : 0;
@@ -2936,7 +2932,6 @@ var View = class {
     };
     this.pendingJoinOps = this.parent ? null : [];
     this.viewHooks = {};
-    this.uploaders = {};
     this.formSubmits = [];
     this.children = this.parent ? null : {};
     this.root.children[this.id] = {};
@@ -3331,7 +3326,7 @@ var View = class {
   renderContainer(diff, kind) {
     return this.liveSocket.time(`toString diff (${kind})`, () => {
       let tag = this.el.tagName;
-      let cids = diff ? this.rendered.componentCIDs(diff).concat(this.pruningCIDs) : null;
+      let cids = diff ? this.rendered.componentCIDs(diff) : null;
       let [html, streams] = this.rendered.toString(cids);
       return [`<${tag}>${html}</${tag}>`, streams];
     });
@@ -3850,8 +3845,11 @@ var View = class {
           onComplete();
         }
       });
-      this.uploaders[inputEl] = uploader;
       let entries = uploader.entries().map((entry) => entry.toPreflightPayload());
+      if (entries.length === 0) {
+        numFileInputsInProgress--;
+        return;
+      }
       let payload = {
         ref: inputEl.getAttribute(PHX_UPLOAD_REF),
         entries,
@@ -3953,10 +3951,9 @@ var View = class {
     }).filter(([form, newForm, newCid]) => newForm);
   }
   maybePushComponentsDestroyed(destroyedCIDs) {
-    let willDestroyCIDs = destroyedCIDs.concat(this.pruningCIDs).filter((cid) => {
+    let willDestroyCIDs = destroyedCIDs.filter((cid) => {
       return dom_default.findComponentNodeList(this.el, cid).length === 0;
     });
-    this.pruningCIDs = willDestroyCIDs.concat([]);
     if (willDestroyCIDs.length > 0) {
       willDestroyCIDs.forEach((cid) => this.rendered.resetRender(cid));
       this.pushWithReply(null, "cids_will_destroy", { cids: willDestroyCIDs }, () => {
@@ -3965,7 +3962,6 @@ var View = class {
         });
         if (completelyDestroyCIDs.length > 0) {
           this.pushWithReply(null, "cids_destroyed", { cids: completelyDestroyCIDs }, (resp) => {
-            this.pruningCIDs = this.pruningCIDs.filter((cid) => resp.cids.indexOf(cid) === -1);
             this.rendered.pruneCIDs(resp.cids);
           });
         }