xote 6.1.2 → 6.2.0

package/src/Hydration.res

@@ -1,5 +1,6 @@
-module DOM = Node.DOM
-module Reactivity = Node.Reactivity
+module DOM = View.DOM
+module Reactivity = View.Reactivity
+module Markers = RuntimeHydrationMarkers
 
 /* ============================================================================
  * Hydration Options
@@ -15,7 +16,7 @@ type hydrateOptions = {
  * ============================================================================ */
 
 module DOMWalker = {
-  /* Node types */
+  /* View types */
   let elementNode = 1
   let textNode = 3
   let commentNode = 8
@@ -66,7 +67,8 @@ module DOMWalker = {
   let extractKey = (node: Dom.element): option<string> => {
     if nodeType(node) == commentNode {
       switch nodeValue(node)->Nullable.toOption {
-      | Some(value) if String.startsWith(value, "k:") => Some(String.slice(value, ~start=2))
+      | Some(value) if String.startsWith(value, Markers.keyedItemPrefixContent) =>
+        Some(String.slice(value, ~start=String.length(Markers.keyedItemPrefixContent)))
       | _ => None
       }
     } else {
@@ -155,12 +157,12 @@ let logHydrationWarning = (msg: string): unit => {
  * ============================================================================ */
 
 /* Hydrate a single node, attaching reactivity to existing DOM */
-let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
+let rec hydrateNode = (node: View.node, domNode: Dom.element): unit => {
   switch node {
-  | Node.Text(_content) => /* Static text - nothing to hydrate, DOM already has the content */
+  | View.Text(_content) => /* Static text - nothing to hydrate, DOM already has the content */
     ()
 
-  | Node.SignalText(signal) => {
+  | View.SignalText(signal) => {
       /*
        * Server rendered: <!--$-->text<!--/$-->
        * We need to find the text node between markers and attach an effect
@@ -177,7 +179,7 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
       })
     }
 
-  | Node.Fragment(children) => {
+  | View.Fragment(children) => {
       /* Fragment children are directly in the parent - hydrate each */
       let walker = DOMWalker.make(domNode)
       children->Array.forEach(child => {
@@ -185,36 +187,60 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
       })
     }
 
-  | Node.SignalFragment(signal) => {
+  | View.SignalFragment(signal) => {
       /*
        * Server rendered: <!--#-->...children...<!--/#-->
        * We need to replace the content when the signal changes
        */
       let owner = Reactivity.createOwner()
       Reactivity.setOwner(domNode, owner)
+      let keyedItems: Dict.t<View.Render.keyedItem<Obj.t>> = Dict.make()
+      let initialized = ref(false)
 
       Reactivity.runWithOwner(owner, () => {
         let disposer = Effect.runWithDisposer(() => {
           let children = Signal.get(signal)
 
-          /* Clear existing children */
-          let childNodes: array<Dom.element> = %raw(`Array.from(domNode.childNodes || [])`)
-          childNodes->Array.forEach(
-            child => {
-              Reactivity.disposeOwner(
-                Reactivity.getOwner(child)->Option.getOr(Reactivity.createOwner()),
+          switch View.Render.getKeyedChildren(children) {
+          | Some(keyedChildren) if initialized.contents =>
+            View.Render.reconcileKeyedChildren(~keyedChildren, ~keyedItems, ~parent=domNode)
+          | keyedChildrenOpt => {
+              View.Render.clearKeyedItems(keyedItems)
+
+              /* Clear existing children */
+              let childNodes: array<Dom.element> = %raw(`Array.from(domNode.childNodes || [])`)
+              childNodes->Array.forEach(
+                child => {
+                  Reactivity.disposeOwner(
+                    Reactivity.getOwner(child)->Option.getOr(Reactivity.createOwner()),
+                  )
+                },
               )
-            },
-          )
-          let _ = (%raw(`domNode.innerHTML = ''`): unit)
-
-          /* Render and append new children */
-          children->Array.forEach(
-            child => {
-              let childEl = Node.Render.render(child)
-              domNode->DOM.appendChild(childEl)
-            },
-          )
+              DOM.setInnerHTML(domNode, "")
+
+              switch keyedChildrenOpt {
+              | Some(keyedChildren) =>
+                keyedChildren->Array.forEach(keyedChild => {
+                  let childEl = View.Render.render(keyedChild.child)
+                  keyedItems->Dict.set(keyedChild.key, {
+                    key: keyedChild.key,
+                    item: keyedChild.identity,
+                    element: childEl,
+                  })
+                  domNode->DOM.appendChild(childEl)
+                })
+              | None =>
+                children->Array.forEach(
+                  child => {
+                    let childEl = View.Render.render(child)
+                    domNode->DOM.appendChild(childEl)
+                  },
+                )
+              }
+
+              initialized := true
+            }
+          }
 
           None
         })
@@ -222,7 +248,9 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
       })
     }
 
-  | Node.Element({attrs, events, children}) => {
+  | View.Keyed({child, key: _, identity: _}) => hydrateNode(child, domNode)
+
+  | View.Element({attrs, events, children}) => {
       let owner = Reactivity.createOwner()
       Reactivity.setOwner(domNode, owner)
 
@@ -230,8 +258,8 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
         /* Hydrate reactive attributes */
         attrs->Array.forEach(((key, value)) => {
           switch value {
-          | Node.Static(_) => () /* Already rendered, nothing to do */
-          | Node.SignalValue(signal) => {
+          | View.Static(_) => () /* Already rendered, nothing to do */
+          | View.SignalValue(signal) => {
               let disposer = Effect.runWithDisposer(
                 () => {
                   DOM.setAttrOrProp(domNode, key, Signal.get(signal))
@@ -240,7 +268,7 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
               )
               Reactivity.addDisposer(owner, disposer)
             }
-          | Node.Compute(compute) => {
+          | View.Compute(compute) => {
               let disposer = Effect.runWithDisposer(
                 () => {
                   DOM.setAttrOrProp(domNode, key, compute())
@@ -265,7 +293,7 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
       })
     }
 
-  | Node.LazyComponent(fn) => {
+  | View.LazyComponent(fn) => {
       /* Execute lazy component and hydrate its result */
       let owner = Reactivity.createOwner()
       let childNode = Reactivity.runWithOwner(owner, fn)
@@ -273,7 +301,7 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
       hydrateNode(childNode, domNode)
     }
 
-  | Node.KeyedList({signal, keyFn, renderItem}) => {
+  | View.KeyedList({signal, keyFn, renderItem}) => {
       /*
        * Server rendered: <!--kl--><!--k:key1-->item1<!--/k--><!--k:key2-->item2<!--/k--><!--/kl-->
        * We need to set up the reconciliation effect
@@ -282,21 +310,21 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
       Reactivity.setOwner(domNode, owner)
 
       /* Build initial key -> element map from existing DOM */
-      let keyedItems: Dict.t<Node.Render.keyedItem<Obj.t>> = Dict.make()
+      let keyedItems: Dict.t<View.Render.keyedItem<Obj.t>> = Dict.make()
       let walker = DOMWalker.make(domNode)
 
       /* Skip to list start marker */
-      let _ = DOMWalker.skipUntilMarker(walker, "kl")
+      let _ = DOMWalker.skipUntilMarker(walker, Markers.keyedListStartContent)
 
       /* Parse existing keyed items */
       let rec parseKeyedItems = () => {
         switch DOMWalker.peek(walker) {
-        | Some(node) if DOMWalker.isMarkerPrefix(node, "k:") => {
+        | Some(node) if DOMWalker.isMarkerPrefix(node, Markers.keyedItemPrefixContent) => {
             let key = DOMWalker.extractKey(node)->Option.getOr("")
             let _ = DOMWalker.next(walker) // consume start marker
 
             /* Collect item elements until end marker */
-            let itemElements = DOMWalker.collectUntilMarker(walker, "/k")
+            let itemElements = DOMWalker.collectUntilMarker(walker, Markers.keyedItemEndContent)
 
             /* Get the first actual element (skip text nodes) */
             switch itemElements->Array.find(el => DOMWalker.nodeType(el) == DOMWalker.elementNode) {
@@ -311,7 +339,7 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
 
             parseKeyedItems()
           }
-        | Some(node) if DOMWalker.isMarker(node, "/kl") => {
+        | Some(node) if DOMWalker.isMarker(node, Markers.keyedListEndContent) => {
             let _ = DOMWalker.next(walker) // consume end marker
           }
         | _ => ()
@@ -353,8 +381,8 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
           keysToRemove->Array.forEach(key => {
             switch keyedItems->Dict.get(key) {
             | Some(keyedItem) => {
-                Node.Render.disposeElement(keyedItem.element)
-                let _ = (%raw(`keyedItem.element.remove()`): unit)
+                View.Render.disposeElement(keyedItem.element)
+              keyedItem.element->DOM.remove
                 keyedItems->Dict.delete(key)->ignore
               }
             | None => ()
@@ -362,7 +390,7 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
           })
 
           /* Build new order */
-          let newOrder: array<Node.Render.keyedItem<Obj.t>> = []
+          let newOrder: array<View.Render.keyedItem<Obj.t>> = []
           let elementsToReplace: Dict.t<bool> = Dict.make()
 
           newItems->Array.forEach(item => {
@@ -373,8 +401,8 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
               if existing.item !== item {
                 elementsToReplace->Dict.set(key, true)
                 let node = renderItem(item)
-                let element = Node.Render.render(node)
-                let keyedItem: Node.Render.keyedItem<Obj.t> = {key, item, element}
+                let element = View.Render.render(node)
+                let keyedItem: View.Render.keyedItem<Obj.t> = {key, item, element}
                 newOrder->Array.push(keyedItem)->ignore
                 keyedItems->Dict.set(key, keyedItem)
               } else {
@@ -382,8 +410,8 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
               }
             | None => {
                 let node = renderItem(item)
-                let element = Node.Render.render(node)
-                let keyedItem: Node.Render.keyedItem<Obj.t> = {key, item, element}
+                let element = View.Render.render(node)
+                let keyedItem: View.Render.keyedItem<Obj.t> = {key, item, element}
                 newOrder->Array.push(keyedItem)->ignore
                 keyedItems->Dict.set(key, keyedItem)
               }
@@ -405,7 +433,7 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
                   elementsToReplace->Dict.get(keyedItem.key)->Option.getOr(false)
 
                 if needsReplacement {
-                  Node.Render.disposeElement(elem)
+                  View.Render.disposeElement(elem)
                   DOM.replaceChild(domNode, keyedItem.element, elem)
                   marker := DOM.getNextSibling(keyedItem.element)
                 } else {
@@ -429,16 +457,16 @@ let rec hydrateNode = (node: Node.node, domNode: Dom.element): unit => {
 }
 
 /* Hydrate using a walker (for traversing children) */
-and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
+and hydrateNodeWithWalker = (node: View.node, walker: DOMWalker.t): unit => {
   switch node {
-  | Node.Text(_) => {
+  | View.Text(_) => {
       /* Skip text node in DOM */
       let _ = DOMWalker.next(walker)
     }
 
-  | Node.SignalText(signal) => {
+  | View.SignalText(signal) => {
       /* Find the marker, then hydrate the text node */
-      let _ = DOMWalker.skipUntilMarker(walker, "$")
+      let _ = DOMWalker.skipUntilMarker(walker, Markers.signalTextStartContent)
 
       /* Get the text node */
       switch DOMWalker.next(walker) {
@@ -455,24 +483,24 @@ and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
           })
 
           /* Skip end marker */
-          let _ = DOMWalker.skipUntilMarker(walker, "/$")
+          let _ = DOMWalker.skipUntilMarker(walker, Markers.signalTextEndContent)
         }
       | None => logHydrationWarning("Missing text node for SignalText")
       }
     }
 
-  | Node.Fragment(children) =>
+  | View.Fragment(children) =>
     /* Fragment children are inline - hydrate each */
     children->Array.forEach(child => {
       hydrateNodeWithWalker(child, walker)
     })
 
-  | Node.SignalFragment(signal) => {
+  | View.SignalFragment(signal) => {
       /* Find the container (div with display:contents in SSR, markers in comments) */
-      let _ = DOMWalker.skipUntilMarker(walker, "#")
+      let _ = DOMWalker.skipUntilMarker(walker, Markers.signalFragmentStartContent)
 
       /* Collect all nodes until end marker - these become the container's content */
-      let contentNodes = DOMWalker.collectUntilMarker(walker, "/#")
+      let contentNodes = DOMWalker.collectUntilMarker(walker, Markers.signalFragmentEndContent)
 
       /* Create a container div to hold the signal fragment */
       let container = DOM.createElement("div")
@@ -502,22 +530,47 @@ and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
       /* Set up reactivity */
       let owner = Reactivity.createOwner()
       Reactivity.setOwner(container, owner)
+      let keyedItems: Dict.t<View.Render.keyedItem<Obj.t>> = Dict.make()
+      let initialized = ref(false)
 
       Reactivity.runWithOwner(owner, () => {
         let disposer = Effect.runWithDisposer(() => {
           let children = Signal.get(signal)
 
-          /* Clear and re-render */
-          let childNodes: array<Dom.element> = %raw(`Array.from(container.childNodes || [])`)
-          childNodes->Array.forEach(Node.Render.disposeElement)
-          let _ = (%raw(`container.innerHTML = ''`): unit)
+          switch View.Render.getKeyedChildren(children) {
+          | Some(keyedChildren) if initialized.contents =>
+            View.Render.reconcileKeyedChildren(~keyedChildren, ~keyedItems, ~parent=container)
+          | keyedChildrenOpt => {
+              View.Render.clearKeyedItems(keyedItems)
+
+              /* Clear and re-render */
+              let childNodes: array<Dom.element> = %raw(`Array.from(container.childNodes || [])`)
+              childNodes->Array.forEach(View.Render.disposeElement)
+              DOM.setInnerHTML(container, "")
+
+              switch keyedChildrenOpt {
+              | Some(keyedChildren) =>
+                keyedChildren->Array.forEach(keyedChild => {
+                  let childEl = View.Render.render(keyedChild.child)
+                  keyedItems->Dict.set(keyedChild.key, {
+                    key: keyedChild.key,
+                    item: keyedChild.identity,
+                    element: childEl,
+                  })
+                  container->DOM.appendChild(childEl)
+                })
+              | None =>
+                children->Array.forEach(
+                  child => {
+                    let childEl = View.Render.render(child)
+                    container->DOM.appendChild(childEl)
+                  },
+                )
+              }
 
-          children->Array.forEach(
-            child => {
-              let childEl = Node.Render.render(child)
-              container->DOM.appendChild(childEl)
-            },
-          )
+              initialized := true
+            }
+          }
 
           None
         })
@@ -525,7 +578,9 @@ and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
       })
     }
 
-  | Node.Element({attrs, events, children}) =>
+  | View.Keyed({child, key: _, identity: _}) => hydrateNodeWithWalker(child, walker)
+
+  | View.Element({attrs, events, children}) =>
     switch DOMWalker.next(walker) {
     | Some(domNode) => {
         let owner = Reactivity.createOwner()
@@ -535,8 +590,8 @@ and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
           /* Hydrate reactive attributes */
           attrs->Array.forEach(((key, value)) => {
             switch value {
-            | Node.Static(_) => ()
-            | Node.SignalValue(signal) => {
+            | View.Static(_) => ()
+            | View.SignalValue(signal) => {
                 let disposer = Effect.runWithDisposer(
                   () => {
                     DOM.setAttrOrProp(domNode, key, Signal.get(signal))
@@ -545,7 +600,7 @@ and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
                 )
                 Reactivity.addDisposer(owner, disposer)
               }
-            | Node.Compute(compute) => {
+            | View.Compute(compute) => {
                 let disposer = Effect.runWithDisposer(
                   () => {
                     DOM.setAttrOrProp(domNode, key, compute())
@@ -572,30 +627,30 @@ and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
     | None => logHydrationWarning("Missing DOM element for Element node")
     }
 
-  | Node.LazyComponent(fn) => {
+  | View.LazyComponent(fn) => {
       /* Skip the lazy component markers and hydrate the content */
-      let _ = DOMWalker.skipUntilMarker(walker, "lc")
+      let _ = DOMWalker.skipUntilMarker(walker, Markers.lazyComponentStartContent)
 
       let childNode = fn()
       hydrateNodeWithWalker(childNode, walker)
 
-      let _ = DOMWalker.skipUntilMarker(walker, "/lc")
+      let _ = DOMWalker.skipUntilMarker(walker, Markers.lazyComponentEndContent)
     }
 
-  | Node.KeyedList({signal, keyFn, renderItem: _}) => {
+  | View.KeyedList({signal, keyFn, renderItem: _}) => {
       /* Find the keyed list in the DOM */
-      let _ = DOMWalker.skipUntilMarker(walker, "kl")
+      let _ = DOMWalker.skipUntilMarker(walker, Markers.keyedListStartContent)
 
       /* Parse existing keyed items from DOM */
-      let keyedItems: Dict.t<Node.Render.keyedItem<Obj.t>> = Dict.make()
+      let keyedItems: Dict.t<View.Render.keyedItem<Obj.t>> = Dict.make()
 
       let rec parseKeyedItems = () => {
         switch DOMWalker.peek(walker) {
-        | Some(node) if DOMWalker.isMarkerPrefix(node, "k:") => {
+        | Some(node) if DOMWalker.isMarkerPrefix(node, Markers.keyedItemPrefixContent) => {
             let key = DOMWalker.extractKey(node)->Option.getOr("")
             let _ = DOMWalker.next(walker)
 
-            let itemElements = DOMWalker.collectUntilMarker(walker, "/k")
+            let itemElements = DOMWalker.collectUntilMarker(walker, Markers.keyedItemEndContent)
 
             switch itemElements->Array.find(el => DOMWalker.nodeType(el) == DOMWalker.elementNode) {
             | Some(element) => {
@@ -609,7 +664,7 @@ and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
 
             parseKeyedItems()
           }
-        | Some(node) if DOMWalker.isMarker(node, "/kl") => {
+        | Some(node) if DOMWalker.isMarker(node, Markers.keyedListEndContent) => {
             let _ = DOMWalker.next(walker)
           }
         | _ => ()
@@ -629,7 +684,7 @@ and hydrateNodeWithWalker = (node: Node.node, walker: DOMWalker.t): unit => {
 
 /* Hydrate a server-rendered component */
 let hydrate = (
-  component: unit => Node.node,
+  component: unit => View.node,
   container: Dom.element,
   ~options: hydrateOptions={},
 ): unit => {
@@ -664,7 +719,7 @@ let hydrate = (
 
 /* Hydrate by element ID */
 let hydrateById = (
-  component: unit => Node.node,
+  component: unit => View.node,
   containerId: string,
   ~options: hydrateOptions={},
 ): unit => {