xote 6.1.1 → 6.2.0

package/src/Hydration.res.mjs

@@ -1,12 +1,15 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Node$Xote from "./Node.res.mjs";
+import * as View$Xote from "./View.res.mjs";
 import * as Effect$Xote from "./Effect.res.mjs";
 import * as Signal$Xote from "./Signal.res.mjs";
 import * as Stdlib_Dict from "@rescript/runtime/lib/es6/Stdlib_Dict.js";
 import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
+import * as RuntimeDom$Xote from "./RuntimeDom.res.mjs";
 import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+import * as RuntimeOwner$Xote from "./RuntimeOwner.res.mjs";
 import * as Primitive_exceptions from "@rescript/runtime/lib/es6/Primitive_exceptions.js";
+import * as RuntimeHydrationMarkers$Xote from "./RuntimeHydrationMarkers.res.mjs";
 
 function getChildNodes(el) {
   return (Array.from(el.childNodes || []));
@@ -41,8 +44,8 @@ function extractKey(node) {
     return;
   }
   let value = node.nodeValue;
-  if (!(value == null) && value.startsWith("k:")) {
-    return value.slice(2);
+  if (!(value == null) && value.startsWith(RuntimeHydrationMarkers$Xote.keyedItemPrefixContent)) {
+    return value.slice(RuntimeHydrationMarkers$Xote.keyedItemPrefixContent.length);
   }
 }
 
@@ -135,9 +138,9 @@ function hydrateNode(_node, domNode) {
         let children = node.children;
         let events = node.events;
         let attrs = node.attrs;
-        let owner = Node$Xote.Reactivity.createOwner();
-        Node$Xote.Reactivity.setOwner(domNode, owner);
-        return Node$Xote.Reactivity.runWithOwner(owner, () => {
+        let owner = RuntimeOwner$Xote.createOwner();
+        RuntimeOwner$Xote.setOwner(domNode, owner);
+        return RuntimeOwner$Xote.runWithOwner(owner, () => {
           attrs.forEach(param => {
             let value = param[1];
             let key = param[0];
@@ -147,15 +150,15 @@ function hydrateNode(_node, domNode) {
               case "SignalValue" :
                 let signal = value._0;
                 let disposer = Effect$Xote.runWithDisposer(() => {
-                  Node$Xote.DOM.setAttrOrProp(domNode, key, Signal$Xote.get(signal));
+                  RuntimeDom$Xote.setAttrOrProp(domNode, key, Signal$Xote.get(signal));
                 }, undefined);
-                return Node$Xote.Reactivity.addDisposer(owner, disposer);
+                return RuntimeOwner$Xote.addDisposer(owner, disposer);
               case "Compute" :
                 let compute = value._0;
                 let disposer$1 = Effect$Xote.runWithDisposer(() => {
-                  Node$Xote.DOM.setAttrOrProp(domNode, key, compute());
+                  RuntimeDom$Xote.setAttrOrProp(domNode, key, compute());
                 }, undefined);
-                return Node$Xote.Reactivity.addDisposer(owner, disposer$1);
+                return RuntimeOwner$Xote.addDisposer(owner, disposer$1);
             }
           });
           events.forEach(param => {
@@ -168,13 +171,13 @@ function hydrateNode(_node, domNode) {
         return;
       case "SignalText" :
         let signal = node._0;
-        let owner$1 = Node$Xote.Reactivity.createOwner();
-        Node$Xote.Reactivity.setOwner(domNode, owner$1);
-        return Node$Xote.Reactivity.runWithOwner(owner$1, () => {
+        let owner$1 = RuntimeOwner$Xote.createOwner();
+        RuntimeOwner$Xote.setOwner(domNode, owner$1);
+        return RuntimeOwner$Xote.runWithOwner(owner$1, () => {
           let disposer = Effect$Xote.runWithDisposer(() => {
             domNode.textContent = Signal$Xote.get(signal);
           }, undefined);
-          Node$Xote.Reactivity.addDisposer(owner$1, disposer);
+          RuntimeOwner$Xote.addDisposer(owner$1, disposer);
         });
       case "Fragment" :
         let walker = make(domNode);
@@ -182,36 +185,66 @@ function hydrateNode(_node, domNode) {
         return;
       case "SignalFragment" :
         let signal$1 = node._0;
-        let owner$2 = Node$Xote.Reactivity.createOwner();
-        Node$Xote.Reactivity.setOwner(domNode, owner$2);
-        return Node$Xote.Reactivity.runWithOwner(owner$2, () => {
+        let owner$2 = RuntimeOwner$Xote.createOwner();
+        RuntimeOwner$Xote.setOwner(domNode, owner$2);
+        let keyedItems = {};
+        let initialized = {
+          contents: false
+        };
+        return RuntimeOwner$Xote.runWithOwner(owner$2, () => {
           let disposer = Effect$Xote.runWithDisposer(() => {
             let children = Signal$Xote.get(signal$1);
-            let childNodes = (Array.from(domNode.childNodes || []));
-            childNodes.forEach(child => Node$Xote.Reactivity.disposeOwner(Stdlib_Option.getOr(Node$Xote.Reactivity.getOwner(child), Node$Xote.Reactivity.createOwner())));
-            ((domNode.innerHTML = ''));
-            children.forEach(child => {
-              let childEl = Node$Xote.Render.render(child);
-              domNode.appendChild(childEl);
-            });
+            let keyedChildren = View$Xote.Render.getKeyedChildren(children);
+            let exit = 0;
+            if (keyedChildren !== undefined && initialized.contents) {
+              View$Xote.Render.reconcileKeyedChildren(keyedChildren, keyedItems, domNode);
+            } else {
+              exit = 1;
+            }
+            if (exit === 1) {
+              View$Xote.Render.clearKeyedItems(keyedItems);
+              let childNodes = (Array.from(domNode.childNodes || []));
+              childNodes.forEach(child => RuntimeOwner$Xote.disposeOwner(Stdlib_Option.getOr(RuntimeOwner$Xote.getOwner(child), RuntimeOwner$Xote.createOwner())));
+              domNode.innerHTML = "";
+              if (keyedChildren !== undefined) {
+                keyedChildren.forEach(keyedChild => {
+                  let childEl = View$Xote.Render.render(keyedChild.child);
+                  keyedItems[keyedChild.key] = {
+                    key: keyedChild.key,
+                    item: keyedChild.identity,
+                    element: childEl
+                  };
+                  domNode.appendChild(childEl);
+                });
+              } else {
+                children.forEach(child => {
+                  let childEl = View$Xote.Render.render(child);
+                  domNode.appendChild(childEl);
+                });
+              }
+              initialized.contents = true;
+            }
           }, undefined);
-          Node$Xote.Reactivity.addDisposer(owner$2, disposer);
+          RuntimeOwner$Xote.addDisposer(owner$2, disposer);
         });
+      case "Keyed" :
+        _node = node.child;
+        continue;
       case "LazyComponent" :
-        let owner$3 = Node$Xote.Reactivity.createOwner();
-        let childNode = Node$Xote.Reactivity.runWithOwner(owner$3, node._0);
-        Node$Xote.Reactivity.setOwner(domNode, owner$3);
+        let owner$3 = RuntimeOwner$Xote.createOwner();
+        let childNode = RuntimeOwner$Xote.runWithOwner(owner$3, node._0);
+        RuntimeOwner$Xote.setOwner(domNode, owner$3);
         _node = childNode;
         continue;
       case "KeyedList" :
         let renderItem = node.renderItem;
         let keyFn = node.keyFn;
         let signal$2 = node.signal;
-        let owner$4 = Node$Xote.Reactivity.createOwner();
-        Node$Xote.Reactivity.setOwner(domNode, owner$4);
-        let keyedItems = {};
+        let owner$4 = RuntimeOwner$Xote.createOwner();
+        RuntimeOwner$Xote.setOwner(domNode, owner$4);
+        let keyedItems$1 = {};
         let walker$1 = make(domNode);
-        skipUntilMarker(walker$1, "kl");
+        skipUntilMarker(walker$1, RuntimeHydrationMarkers$Xote.keyedListStartContent);
         let parseKeyedItems = () => {
           while (true) {
             let node = walker$1.current;
@@ -219,8 +252,8 @@ function hydrateNode(_node, domNode) {
               return;
             }
             let node$1 = Primitive_option.valFromOption(node);
-            if (!isMarkerPrefix(node$1, "k:")) {
-              if (isMarker(node$1, "/kl")) {
+            if (!isMarkerPrefix(node$1, RuntimeHydrationMarkers$Xote.keyedItemPrefixContent)) {
+              if (isMarker(node$1, RuntimeHydrationMarkers$Xote.keyedListEndContent)) {
                 next(walker$1);
                 return;
               } else {
@@ -229,12 +262,12 @@ function hydrateNode(_node, domNode) {
             }
             let key = Stdlib_Option.getOr(extractKey(node$1), "");
             next(walker$1);
-            let itemElements = collectUntilMarker(walker$1, "/k");
+            let itemElements = collectUntilMarker(walker$1, RuntimeHydrationMarkers$Xote.keyedItemEndContent);
             let element = itemElements.find(el => el.nodeType === 1);
             if (element !== undefined) {
               let items = Signal$Xote.peek(signal$2);
               let item = Stdlib_Option.getOr(items.find(i => keyFn(i) === key), {});
-              keyedItems[key] = {
+              keyedItems$1[key] = {
                 key: key,
                 item: item,
                 element: Primitive_option.valFromOption(element)
@@ -244,7 +277,7 @@ function hydrateNode(_node, domNode) {
           };
         };
         parseKeyedItems();
-        return Node$Xote.Reactivity.runWithOwner(owner$4, () => {
+        return RuntimeOwner$Xote.runWithOwner(owner$4, () => {
           let startAnchor = document.createComment(" keyed-list-start ");
           let endAnchor = document.createComment(" keyed-list-end ");
           let firstChild = domNode.firstChild;
@@ -261,7 +294,7 @@ function hydrateNode(_node, domNode) {
               newKeyMap[keyFn(item)] = item;
             });
             let keysToRemove = [];
-            Object.keys(keyedItems).forEach(key => {
+            Object.keys(keyedItems$1).forEach(key => {
               let match = newKeyMap[key];
               if (match !== undefined) {
                 return;
@@ -271,11 +304,11 @@ function hydrateNode(_node, domNode) {
               }
             });
             keysToRemove.forEach(key => {
-              let keyedItem = keyedItems[key];
+              let keyedItem = keyedItems$1[key];
               if (keyedItem !== undefined) {
-                Node$Xote.Render.disposeElement(keyedItem.element);
-                ((keyedItem.element.remove()));
-                Stdlib_Dict.$$delete(keyedItems, key);
+                View$Xote.Render.disposeElement(keyedItem.element);
+                keyedItem.element.remove();
+                Stdlib_Dict.$$delete(keyedItems$1, key);
                 return;
               }
             });
@@ -283,33 +316,33 @@ function hydrateNode(_node, domNode) {
             let elementsToReplace = {};
             newItems.forEach(item => {
               let key = keyFn(item);
-              let existing = keyedItems[key];
+              let existing = keyedItems$1[key];
               if (existing !== undefined) {
                 if (existing.item !== item) {
                   elementsToReplace[key] = true;
                   let node = renderItem(item);
-                  let element = Node$Xote.Render.render(node);
+                  let element = View$Xote.Render.render(node);
                   let keyedItem = {
                     key: key,
                     item: item,
                     element: element
                   };
                   newOrder.push(keyedItem);
-                  keyedItems[key] = keyedItem;
+                  keyedItems$1[key] = keyedItem;
                   return;
                 }
                 newOrder.push(existing);
                 return;
               }
               let node$1 = renderItem(item);
-              let element$1 = Node$Xote.Render.render(node$1);
+              let element$1 = View$Xote.Render.render(node$1);
               let keyedItem$1 = {
                 key: key,
                 item: item,
                 element: element$1
               };
               newOrder.push(keyedItem$1);
-              keyedItems[key] = keyedItem$1;
+              keyedItems$1[key] = keyedItem$1;
             });
             let marker = {
               contents: startAnchor.nextSibling
@@ -330,7 +363,7 @@ function hydrateNode(_node, domNode) {
               }
               let needsReplacement = Stdlib_Option.getOr(elementsToReplace[keyedItem.key], false);
               if (needsReplacement) {
-                Node$Xote.Render.disposeElement(currentElement);
+                View$Xote.Render.disposeElement(currentElement);
                 domNode.replaceChild(keyedItem.element, currentElement);
                 marker.contents = keyedItem.element.nextSibling;
               } else {
@@ -342,155 +375,188 @@ function hydrateNode(_node, domNode) {
           let disposer = Effect$Xote.runWithDisposer(() => {
             reconcile();
           }, undefined);
-          Node$Xote.Reactivity.addDisposer(owner$4, disposer);
+          RuntimeOwner$Xote.addDisposer(owner$4, disposer);
         });
     }
   };
 }
 
-function hydrateNodeWithWalker(node, walker) {
-  switch (node.TAG) {
-    case "Element" :
-      let children = node.children;
-      let events = node.events;
-      let attrs = node.attrs;
-      let domNode = next(walker);
-      if (domNode === undefined) {
-        return logHydrationWarning("Missing DOM element for Element node");
-      }
-      let domNode$1 = Primitive_option.valFromOption(domNode);
-      let owner = Node$Xote.Reactivity.createOwner();
-      Node$Xote.Reactivity.setOwner(domNode$1, owner);
-      return Node$Xote.Reactivity.runWithOwner(owner, () => {
-        attrs.forEach(param => {
-          let value = param[1];
-          let key = param[0];
-          switch (value.TAG) {
-            case "Static" :
-              return;
-            case "SignalValue" :
-              let signal = value._0;
-              let disposer = Effect$Xote.runWithDisposer(() => {
-                Node$Xote.DOM.setAttrOrProp(domNode$1, key, Signal$Xote.get(signal));
-              }, undefined);
-              return Node$Xote.Reactivity.addDisposer(owner, disposer);
-            case "Compute" :
-              let compute = value._0;
-              let disposer$1 = Effect$Xote.runWithDisposer(() => {
-                Node$Xote.DOM.setAttrOrProp(domNode$1, key, compute());
-              }, undefined);
-              return Node$Xote.Reactivity.addDisposer(owner, disposer$1);
-          }
-        });
-        events.forEach(param => {
-          domNode$1.addEventListener(param[0], param[1]);
-        });
-        let childWalker = make(domNode$1);
-        children.forEach(child => hydrateNodeWithWalker(child, childWalker));
-      });
-    case "Text" :
-      next(walker);
-      return;
-    case "SignalText" :
-      let signal = node._0;
-      skipUntilMarker(walker, "$");
-      let textNode = next(walker);
-      if (textNode === undefined) {
-        return logHydrationWarning("Missing text node for SignalText");
-      }
-      let textNode$1 = Primitive_option.valFromOption(textNode);
-      let owner$1 = Node$Xote.Reactivity.createOwner();
-      Node$Xote.Reactivity.setOwner(textNode$1, owner$1);
-      Node$Xote.Reactivity.runWithOwner(owner$1, () => {
-        let disposer = Effect$Xote.runWithDisposer(() => {
-          textNode$1.textContent = Signal$Xote.get(signal);
-        }, undefined);
-        Node$Xote.Reactivity.addDisposer(owner$1, disposer);
-      });
-      skipUntilMarker(walker, "/$");
-      return;
-    case "Fragment" :
-      node._0.forEach(child => hydrateNodeWithWalker(child, walker));
-      return;
-    case "SignalFragment" :
-      let signal$1 = node._0;
-      skipUntilMarker(walker, "#");
-      let contentNodes = collectUntilMarker(walker, "/#");
-      let container = document.createElement("div");
-      container.setAttribute("style", "display: contents");
-      let firstNode = contentNodes[0];
-      let parent = firstNode !== undefined ? firstNode.parentNode : undefined;
-      contentNodes.forEach(node => {
-        container.appendChild(node);
-      });
-      let match = walker.current;
-      if (parent !== undefined) {
-        let p = Primitive_option.valFromOption(parent);
-        if (match !== undefined) {
-          p.insertBefore(container, Primitive_option.valFromOption(match));
-        } else {
-          p.appendChild(container);
+function hydrateNodeWithWalker(_node, walker) {
+  while (true) {
+    let node = _node;
+    switch (node.TAG) {
+      case "Element" :
+        let children = node.children;
+        let events = node.events;
+        let attrs = node.attrs;
+        let domNode = next(walker);
+        if (domNode === undefined) {
+          return logHydrationWarning("Missing DOM element for Element node");
         }
-      }
-      let owner$2 = Node$Xote.Reactivity.createOwner();
-      Node$Xote.Reactivity.setOwner(container, owner$2);
-      return Node$Xote.Reactivity.runWithOwner(owner$2, () => {
-        let disposer = Effect$Xote.runWithDisposer(() => {
-          let children = Signal$Xote.get(signal$1);
-          let childNodes = (Array.from(container.childNodes || []));
-          childNodes.forEach(Node$Xote.Render.disposeElement);
-          ((container.innerHTML = ''));
-          children.forEach(child => {
-            let childEl = Node$Xote.Render.render(child);
-            container.appendChild(childEl);
+        let domNode$1 = Primitive_option.valFromOption(domNode);
+        let owner = RuntimeOwner$Xote.createOwner();
+        RuntimeOwner$Xote.setOwner(domNode$1, owner);
+        return RuntimeOwner$Xote.runWithOwner(owner, () => {
+          attrs.forEach(param => {
+            let value = param[1];
+            let key = param[0];
+            switch (value.TAG) {
+              case "Static" :
+                return;
+              case "SignalValue" :
+                let signal = value._0;
+                let disposer = Effect$Xote.runWithDisposer(() => {
+                  RuntimeDom$Xote.setAttrOrProp(domNode$1, key, Signal$Xote.get(signal));
+                }, undefined);
+                return RuntimeOwner$Xote.addDisposer(owner, disposer);
+              case "Compute" :
+                let compute = value._0;
+                let disposer$1 = Effect$Xote.runWithDisposer(() => {
+                  RuntimeDom$Xote.setAttrOrProp(domNode$1, key, compute());
+                }, undefined);
+                return RuntimeOwner$Xote.addDisposer(owner, disposer$1);
+            }
           });
-        }, undefined);
-        Node$Xote.Reactivity.addDisposer(owner$2, disposer);
-      });
-    case "LazyComponent" :
-      skipUntilMarker(walker, "lc");
-      let childNode = node._0();
-      hydrateNodeWithWalker(childNode, walker);
-      skipUntilMarker(walker, "/lc");
-      return;
-    case "KeyedList" :
-      let keyFn = node.keyFn;
-      let signal$2 = node.signal;
-      skipUntilMarker(walker, "kl");
-      let keyedItems = {};
-      let parseKeyedItems = () => {
-        while (true) {
-          let node = walker.current;
-          if (node === undefined) {
-            return;
+          events.forEach(param => {
+            domNode$1.addEventListener(param[0], param[1]);
+          });
+          let childWalker = make(domNode$1);
+          children.forEach(child => hydrateNodeWithWalker(child, childWalker));
+        });
+      case "Text" :
+        next(walker);
+        return;
+      case "SignalText" :
+        let signal = node._0;
+        skipUntilMarker(walker, RuntimeHydrationMarkers$Xote.signalTextStartContent);
+        let textNode = next(walker);
+        if (textNode === undefined) {
+          return logHydrationWarning("Missing text node for SignalText");
+        }
+        let textNode$1 = Primitive_option.valFromOption(textNode);
+        let owner$1 = RuntimeOwner$Xote.createOwner();
+        RuntimeOwner$Xote.setOwner(textNode$1, owner$1);
+        RuntimeOwner$Xote.runWithOwner(owner$1, () => {
+          let disposer = Effect$Xote.runWithDisposer(() => {
+            textNode$1.textContent = Signal$Xote.get(signal);
+          }, undefined);
+          RuntimeOwner$Xote.addDisposer(owner$1, disposer);
+        });
+        skipUntilMarker(walker, RuntimeHydrationMarkers$Xote.signalTextEndContent);
+        return;
+      case "Fragment" :
+        node._0.forEach(child => hydrateNodeWithWalker(child, walker));
+        return;
+      case "SignalFragment" :
+        let signal$1 = node._0;
+        skipUntilMarker(walker, RuntimeHydrationMarkers$Xote.signalFragmentStartContent);
+        let contentNodes = collectUntilMarker(walker, RuntimeHydrationMarkers$Xote.signalFragmentEndContent);
+        let container = document.createElement("div");
+        container.setAttribute("style", "display: contents");
+        let firstNode = contentNodes[0];
+        let parent = firstNode !== undefined ? firstNode.parentNode : undefined;
+        contentNodes.forEach(node => {
+          container.appendChild(node);
+        });
+        let match = walker.current;
+        if (parent !== undefined) {
+          let p = Primitive_option.valFromOption(parent);
+          if (match !== undefined) {
+            p.insertBefore(container, Primitive_option.valFromOption(match));
+          } else {
+            p.appendChild(container);
           }
-          let node$1 = Primitive_option.valFromOption(node);
-          if (!isMarkerPrefix(node$1, "k:")) {
-            if (isMarker(node$1, "/kl")) {
-              next(walker);
-              return;
+        }
+        let owner$2 = RuntimeOwner$Xote.createOwner();
+        RuntimeOwner$Xote.setOwner(container, owner$2);
+        let keyedItems = {};
+        let initialized = {
+          contents: false
+        };
+        return RuntimeOwner$Xote.runWithOwner(owner$2, () => {
+          let disposer = Effect$Xote.runWithDisposer(() => {
+            let children = Signal$Xote.get(signal$1);
+            let keyedChildren = View$Xote.Render.getKeyedChildren(children);
+            let exit = 0;
+            if (keyedChildren !== undefined && initialized.contents) {
+              View$Xote.Render.reconcileKeyedChildren(keyedChildren, keyedItems, container);
             } else {
+              exit = 1;
+            }
+            if (exit === 1) {
+              View$Xote.Render.clearKeyedItems(keyedItems);
+              let childNodes = (Array.from(container.childNodes || []));
+              childNodes.forEach(View$Xote.Render.disposeElement);
+              container.innerHTML = "";
+              if (keyedChildren !== undefined) {
+                keyedChildren.forEach(keyedChild => {
+                  let childEl = View$Xote.Render.render(keyedChild.child);
+                  keyedItems[keyedChild.key] = {
+                    key: keyedChild.key,
+                    item: keyedChild.identity,
+                    element: childEl
+                  };
+                  container.appendChild(childEl);
+                });
+              } else {
+                children.forEach(child => {
+                  let childEl = View$Xote.Render.render(child);
+                  container.appendChild(childEl);
+                });
+              }
+              initialized.contents = true;
+            }
+          }, undefined);
+          RuntimeOwner$Xote.addDisposer(owner$2, disposer);
+        });
+      case "Keyed" :
+        _node = node.child;
+        continue;
+      case "LazyComponent" :
+        skipUntilMarker(walker, RuntimeHydrationMarkers$Xote.lazyComponentStartContent);
+        let childNode = node._0();
+        hydrateNodeWithWalker(childNode, walker);
+        skipUntilMarker(walker, RuntimeHydrationMarkers$Xote.lazyComponentEndContent);
+        return;
+      case "KeyedList" :
+        let keyFn = node.keyFn;
+        let signal$2 = node.signal;
+        skipUntilMarker(walker, RuntimeHydrationMarkers$Xote.keyedListStartContent);
+        let keyedItems$1 = {};
+        let parseKeyedItems = () => {
+          while (true) {
+            let node = walker.current;
+            if (node === undefined) {
               return;
             }
-          }
-          let key = Stdlib_Option.getOr(extractKey(node$1), "");
-          next(walker);
-          let itemElements = collectUntilMarker(walker, "/k");
-          let element = itemElements.find(el => el.nodeType === 1);
-          if (element !== undefined) {
-            let items = Signal$Xote.peek(signal$2);
-            let item = Stdlib_Option.getOr(items.find(i => keyFn(i) === key), {});
-            keyedItems[key] = {
-              key: key,
-              item: item,
-              element: Primitive_option.valFromOption(element)
-            };
-          }
-          continue;
+            let node$1 = Primitive_option.valFromOption(node);
+            if (!isMarkerPrefix(node$1, RuntimeHydrationMarkers$Xote.keyedItemPrefixContent)) {
+              if (isMarker(node$1, RuntimeHydrationMarkers$Xote.keyedListEndContent)) {
+                next(walker);
+                return;
+              } else {
+                return;
+              }
+            }
+            let key = Stdlib_Option.getOr(extractKey(node$1), "");
+            next(walker);
+            let itemElements = collectUntilMarker(walker, RuntimeHydrationMarkers$Xote.keyedItemEndContent);
+            let element = itemElements.find(el => el.nodeType === 1);
+            if (element !== undefined) {
+              let items = Signal$Xote.peek(signal$2);
+              let item = Stdlib_Option.getOr(items.find(i => keyFn(i) === key), {});
+              keyedItems$1[key] = {
+                key: key,
+                item: item,
+                element: Primitive_option.valFromOption(element)
+              };
+            }
+            continue;
+          };
         };
-      };
-      return parseKeyedItems();
-  }
+        return parseKeyedItems();
+    }
+  };
 }
 
 function hydrate(component, container, optionsOpt) {
@@ -526,9 +592,12 @@ let DOM;
 
 let Reactivity;
 
+let Markers;
+
 export {
   DOM,
   Reactivity,
+  Markers,
   DOMWalker,
   HydrationMismatch,
   logHydrationWarning,
@@ -537,4 +606,4 @@ export {
   hydrate,
   hydrateById,
 }
-/* Node-Xote Not a pure module */
+/* View-Xote Not a pure module */