Fix morphdom bug

morph.html

@@ -5,23 +5,19 @@
 
 <div id="before">
 <!-- Before markup goes here: -->
-<button>
-    <div>
-        <div>second</div>
-        <div>third</div>
-    </div>
-</button>
+<ul>
+    <li key="1">foo<input></li>
+    <li key="2">bar<input></li>
+    <li key="3">baz<input></li>
+</ul>
 </div>
 
 <div id="after" style="display: none;">
 <!-- After markup goes here: -->
-<button>
-    <div>first</div>
-    <div>
-        <div>second</div>
-        <div>third</div>
-    </div>
-</button>
+<ul>
+    <li key="1">foo<input></li>
+    <li key="3">baz<input></li>
+</ul>
 </div>
 
     <div style="display: flex;">
@@ -38,6 +34,7 @@
     <script>
         function start() {
             Alpine.morph.log((message, from, to) => {
+                console.log(message, from, to)
                 document.querySelector('#log-from').innerHTML = escape(from.outerHTML)
                 document.querySelector('#log-to').innerHTML = escape(to.outerHTML)
                 let li = document.createElement('li')

packages/morph/src/dom.js

@@ -12,9 +12,13 @@ export function textOrComment(el) {
 
 export let dom = {
     replace(children, old, replacement) {
+        // Here's what's happening here:
+        // First, we're swapping the actual dom element with the new one
+        // Then, we're replaceing the old one with the new one in the children array
+        // Finally, because the old has been replaced by the new, we can remove the previous new element in it's old position...
         let index = children.indexOf(old)
 
-        let replacementIndex = children.indexOf(old)
+        let replacementIndex = children.indexOf(replacement)
 
         if (index === -1) throw 'Cant find element in children'
 

packages/morph/src/morph.js

@@ -133,7 +133,6 @@ export function morph(from, toHtml, options) {
     }
 
     function patchChildren(fromChildren, toChildren, appendFn) {
-        // I think I can get rid of this for now:
         let fromKeyDomNodeMap = keyToMap(fromChildren)
         let fromKeyHoldovers = {}