wip

index.html

@@ -9,6 +9,13 @@
     <script src="./packages/alpinejs/dist/cdn.js" defer></script>
     <script src="//cdn.tailwindcss.com"></script>
 
+    <!-- if -->    |  <!-- if -->
+    foo            |  yo
+    bar            |  <!-- end-->
+    <!-- end -->   |
+                   |  baz
+    baz
+
     <div>
         <!-- if -->
         <div>foo<input></div>

packages/morph/src/morph.js

@@ -156,11 +156,31 @@ export async function morph(from, toHtml, options) {
 
         let domKeyHoldovers = {}
 
+        let isInsideWall = false
+
         while (currentTo) {
+            // If "<!-- end -->"
+            if (
+                currentTo.nodeType === 8
+                && currentTo.textContent === ' end '
+            ) {
+                isInsideWall = false
+                currentTo = dom(currentTo).nodes().next()
+                currentFrom = dom(currentFrom).nodes().next()
+                continue
+            }
+
+            if (insideWall) {
+
+            }
+
+            if (isInsideWall) {
+                console.log(currentFrom, currentTo)
+            }
+
             let toKey = getKey(currentTo)
             let domKey = getKey(currentFrom)
 
-            debugger
             // Add new elements
             if (! currentFrom) {
                 if (toKey && domKeyHoldovers[toKey]) {
@@ -181,6 +201,19 @@ export async function morph(from, toHtml, options) {
                 }
             }
 
+            // If "<!-- if -->"
+            if (
+                currentTo.nodeType === 8
+                && currentTo.textContent === ' if '
+                && currentFrom.nodeType === 8
+                && currentFrom.textContent === ' if '
+            ) {
+                isInsideWall = true
+                currentTo = dom(currentTo).nodes().next()
+                currentFrom = dom(currentFrom).nodes().next()
+                continue
+            }
+
             if (lookahead) {
                 let nextToElementSibling = dom(currentTo).next()