Fix ordering of stream existing stream items with reset: true. Closes #…

…2864

assets/js/phoenix_live_view/dom_patch.js

@@ -103,11 +103,13 @@ export default class DOMPatch {
     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)
             }
           })
@@ -183,6 +185,27 @@ 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
+            }).sort((a, b) => {
+              let aIdx = toIds.indexOf(a.id)
+              let bIdx = toIds.indexOf(b.id)
+              if(aIdx === bIdx){
+                return 0
+              } else if(aIdx < bIdx){
+                return -1
+              } else {
+                return 1
+              }
+            }).forEach(child => fromEl.appendChild(child))
+          }
+        },
         onNodeDiscarded: (el) => this.onNodeDiscarded(el),
         onBeforeNodeDiscarded: (el) => {
           if(el.getAttribute && el.getAttribute(PHX_PRUNE) !== null){ return true }

priv/static/phoenix_live_view.js

@@ -1811,11 +1811,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       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 !== void 0) {
             dom_default.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);
               }
             });
@@ -1890,6 +1892,25 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             }
             added.push(el);
           },
+          onBeforeElChildrenUpdated: (fromEl, toEl) => {
+            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;
+              }).sort((a, b) => {
+                let aIdx = toIds.indexOf(a.id);
+                let bIdx = toIds.indexOf(b.id);
+                if (aIdx === bIdx) {
+                  return 0;
+                } else if (aIdx < bIdx) {
+                  return -1;
+                } else {
+                  return 1;
+                }
+              }).forEach((child) => fromEl.appendChild(child));
+            }
+          },
           onNodeDiscarded: (el) => this.onNodeDiscarded(el),
           onBeforeNodeDiscarded: (el) => {
             if (el.getAttribute && el.getAttribute(PHX_PRUNE) !== null) {