@barefootjs/client 0.26.4 → 0.27.0

package/dist/runtime/index.js

@@ -1352,8 +1352,6 @@ var _parentScopeId = null;
 function setParentScopeId(id) {
   _parentScopeId = id;
 }
-var propsUpdateMap = new WeakMap;
-var propsMap = new WeakMap;
 function createComponent(nameOrDef, props = {}, key, slot) {
   if (props == null)
     props = {};
@@ -1445,24 +1443,8 @@ function createComponent(nameOrDef, props = {}, key, slot) {
   }
   setCurrentScope(prevScope);
   hydratedScopes.add(element);
-  propsMap.set(element, props);
-  registerPropsUpdate(element, name, props);
   return element;
 }
-function getComponentProps(element) {
-  return propsMap.get(element);
-}
-function registerPropsUpdate(element, name, _initialProps) {
-  propsUpdateMap.set(element, (newProps) => {
-    const init = getComponentInit(name);
-    if (init) {
-      init(element, newProps);
-    }
-  });
-}
-function getPropsUpdateFn(element) {
-  return propsUpdateMap.get(element);
-}
 function renderChild(name, props, key, slotSuffix) {
   const templateFn = getTemplate(name);
   const suffix = slotSuffix ? `_${slotSuffix}` : "";
@@ -1528,6 +1510,11 @@ function escapeText(value) {
     return "";
   return escapeAttr(value);
 }
+function escapeTextOrNode(value) {
+  if (typeof Node !== "undefined" && value instanceof Node)
+    return value;
+  return escapeText(value);
+}
 var SVG_NS = "http://www.w3.org/2000/svg";
 function parseHTML(html, parent) {
   const tpl = document.createElement("template");
@@ -1592,7 +1579,6 @@ function createComponentFromDef(def, props, key) {
   }
   def.init(element, props);
   hydratedScopes.add(element);
-  propsMap.set(element, props);
   return element;
 }
 
@@ -1650,7 +1636,7 @@ function createPortal(children, container = document.body, options) {
     }
   };
 }
-// src/runtime/reconcile-elements.ts
+// src/runtime/loop-markers.ts
 function findLoopMarkers(container, markerId) {
   let startMarker = null;
   let endMarker = null;
@@ -1695,14 +1681,6 @@ function getElementsBetweenMarkers(start, end) {
   }
   return elements;
 }
-function removeElementsBetweenMarkers(start, end) {
-  let node = start.nextSibling;
-  while (node && node !== end) {
-    const next = node.nextSibling;
-    node.parentNode?.removeChild(node);
-    node = next;
-  }
-}
 function getLoopChildren(container, markerId) {
   const { startMarker, endMarker } = findLoopMarkers(container, markerId);
   if (startMarker && endMarker) {
@@ -1723,159 +1701,6 @@ function getLoopNodes(container, markerId) {
   }
   return Array.from(container.childNodes);
 }
-function reconcileElements(container, items, getKey, renderItem, firstElement, markerId) {
-  if (!container || !items)
-    return;
-  const { startMarker, endMarker } = findLoopMarkers(container, markerId);
-  const existingByKey = new Map;
-  let hasKeyedChildren = false;
-  const loopChildren = startMarker ? getElementsBetweenMarkers(startMarker, endMarker) : Array.from(container.children);
-  for (const child of loopChildren) {
-    const el = child;
-    const key = el.dataset?.key;
-    if (key !== undefined) {
-      existingByKey.set(key, el);
-      hasKeyedChildren = true;
-    }
-  }
-  if (!hasKeyedChildren) {
-    if (items.length === 0) {
-      if (startMarker) {
-        removeElementsBetweenMarkers(startMarker, endMarker);
-      } else {
-        container.innerHTML = "";
-      }
-      return;
-    }
-    const fragment = document.createDocumentFragment();
-    for (let i = 0;i < items.length; i++) {
-      const el = i === 0 && firstElement ? firstElement : renderItem(items[i], i);
-      const key = getKey ? getKey(items[i], i) : String(i);
-      if (!el.dataset.key)
-        el.setAttribute(BF_KEY, key);
-      fragment.appendChild(el);
-    }
-    if (startMarker) {
-      removeElementsBetweenMarkers(startMarker, endMarker);
-      endMarker.parentNode.insertBefore(fragment, endMarker);
-    } else {
-      container.innerHTML = "";
-      container.appendChild(fragment);
-    }
-    return;
-  }
-  let insertAnchor = endMarker ?? null;
-  if (!startMarker) {
-    let foundKeyed = false;
-    for (const child of Array.from(container.childNodes)) {
-      if (child.nodeType === Node.ELEMENT_NODE && child.dataset.key !== undefined) {
-        foundKeyed = true;
-      } else if (foundKeyed) {
-        insertAnchor = child;
-        break;
-      }
-    }
-  }
-  let focusedKey = null;
-  const activeEl = document.activeElement;
-  if (activeEl && activeEl !== document.body) {
-    const tag = activeEl.tagName;
-    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || activeEl.isContentEditable) {
-      for (const [key, el] of existingByKey) {
-        if (el.contains(activeEl)) {
-          focusedKey = key;
-          break;
-        }
-      }
-    }
-  }
-  const desiredElements = [];
-  const toRemove = [];
-  let focusTarget = null;
-  for (let i = 0;i < items.length; i++) {
-    const item = items[i];
-    const key = getKey ? getKey(item, i) : String(i);
-    const createEl = () => i === 0 && firstElement ? firstElement : renderItem(item, i);
-    const existing = existingByKey.get(key);
-    if (existing) {
-      existingByKey.delete(key);
-      if (existing.getAttribute(BF_SCOPE) && !hydratedScopes.has(existing)) {
-        const newEl = createEl();
-        if (!newEl.dataset.key)
-          newEl.setAttribute(BF_KEY, key);
-        desiredElements.push(newEl);
-        toRemove.push(existing);
-      } else if (focusedKey === key) {
-        const newEl = createEl();
-        if (!newEl.dataset.key)
-          newEl.setAttribute(BF_KEY, key);
-        focusTarget = prepareInputTransfer(existing, newEl);
-        desiredElements.push(newEl);
-        toRemove.push(existing);
-      } else {
-        const newEl = createEl();
-        if (!newEl.dataset.key)
-          newEl.setAttribute(BF_KEY, key);
-        desiredElements.push(newEl);
-        toRemove.push(existing);
-      }
-    } else {
-      const el = createEl();
-      if (!el.dataset.key)
-        el.setAttribute(BF_KEY, key);
-      desiredElements.push(el);
-    }
-  }
-  for (const el of existingByKey.values()) {
-    toRemove.push(el);
-  }
-  for (const el of toRemove) {
-    if (el.parentNode)
-      el.remove();
-  }
-  for (const el of desiredElements) {
-    container.insertBefore(el, insertAnchor);
-  }
-  if (focusTarget) {
-    focusTarget.target.focus();
-    if (typeof focusTarget.selectionStart === "number") {
-      focusTarget.target.selectionStart = focusTarget.selectionStart;
-      focusTarget.target.selectionEnd = focusTarget.selectionEnd;
-    }
-  }
-}
-function prepareInputTransfer(oldEl, newEl) {
-  const focused = oldEl.contains(document.activeElement) ? document.activeElement : null;
-  if (!focused)
-    return null;
-  const tag = focused.tagName;
-  const oldInputs = Array.from(oldEl.querySelectorAll(tag));
-  const idx = oldInputs.indexOf(focused);
-  if (idx < 0)
-    return null;
-  const newInputs = Array.from(newEl.querySelectorAll(tag));
-  const target = newInputs[idx];
-  if (!target)
-    return null;
-  target.value = focused.value;
-  return {
-    target,
-    selectionStart: focused.selectionStart,
-    selectionEnd: focused.selectionEnd
-  };
-}
-
-// src/runtime/list.ts
-function reconcileList(container, items, getKey, renderItem) {
-  if (!container || !items)
-    return;
-  if (items.length === 0) {
-    container.innerHTML = "";
-    return;
-  }
-  const firstElement = renderItem(items[0], 0);
-  reconcileElements(container, items, getKey, renderItem, firstElement);
-}
 // src/runtime/qsa-item.ts
 function* itemRootElements(primaryEl) {
   yield primaryEl;
@@ -2412,35 +2237,44 @@ function patchLeaf(el, html) {
   }
   el.replaceChildren(...Array.from(next.childNodes));
 }
-// src/runtime/patch-slot-range.ts
-function patchSlotRange(scope, id, html) {
+// src/runtime/claim-slots.ts
+function resolvePath(root, path) {
+  let node = root;
+  for (const index of path) {
+    const child = node.childNodes[index];
+    if (!child)
+      return null;
+    node = child;
+  }
+  return node;
+}
+function isSlotComment(node, id) {
+  return node != null && node.nodeType === Node.COMMENT_NODE && node.nodeValue === `bf:${id}`;
+}
+function findOwnedMarker(root, id) {
   const marker = `bf:${id}`;
-  let start = null;
-  const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
-  while (walker.nextNode()) {
-    const comment = walker.currentNode;
+  const parentOwned = id.startsWith(BF_PARENT_OWNED_PREFIX);
+  const registryInfo = commentScopeRegistry.get(root);
+  const boundary = registryInfo ? registryInfo.commentNode.parentElement : root;
+  for (const comment of commentsInScope(root)) {
     if (comment.nodeValue !== marker)
       continue;
+    if (parentOwned)
+      return comment;
     let owned = true;
-    for (let el = comment.parentElement;el && el !== scope; el = el.parentElement) {
+    for (let el = comment.parentElement;el && el !== boundary; el = el.parentElement) {
       if (el.hasAttribute(BF_SCOPE)) {
         owned = false;
         break;
       }
     }
-    if (owned) {
-      start = comment;
-      break;
-    }
-  }
-  const parent = start?.parentNode;
-  if (!start || !parent) {
-    console.warn(`[barefootjs] preamble region marker bf:${id} not found in row; skipping patch`);
-    return;
+    if (owned)
+      return comment;
   }
+  return null;
+}
+function findMarkupEnd(start) {
   let depth = 0;
-  let end = null;
-  const toRemove = [];
   let node = start.nextSibling;
   while (node) {
     if (node.nodeType === Node.COMMENT_NODE) {
@@ -2448,25 +2282,131 @@ function patchSlotRange(scope, id, html) {
       if (value.startsWith("bf:")) {
         depth++;
       } else if (value === "/") {
-        if (depth === 0) {
-          end = node;
-          break;
-        }
+        if (depth === 0)
+          return node;
         depth--;
       }
     }
-    toRemove.push(node);
     node = node.nextSibling;
   }
+  return null;
+}
+function resolveAnchor(root, spec) {
+  if (spec.path.length > 0) {
+    const resolved = resolvePath(root, spec.path);
+    if (isSlotComment(resolved, spec.id))
+      return resolved;
+    console.warn(`[barefootjs] claim path for slot ${spec.id} did not resolve to its bf:${spec.id} marker; falling back to a scan`);
+  }
+  const found = findOwnedMarker(root, spec.id);
+  if (!found) {
+    console.warn(`[barefootjs] slot ${spec.id} marker not found; skipping`);
+  }
+  return found;
+}
+function claimMarkerlessText(root, spec) {
+  if (spec.path.length === 0) {
+    console.warn(`[barefootjs] markerless slot ${spec.id} has an empty path; skipping`);
+    return null;
+  }
+  const parentPath = spec.path.slice(0, -1);
+  const idx = spec.path[spec.path.length - 1];
+  const parent = resolvePath(root, parentPath);
+  if (!parent) {
+    console.warn(`[barefootjs] markerless claim path for slot ${spec.id} did not resolve to a parent node; skipping`);
+    return null;
+  }
+  const existing = parent.childNodes[idx];
+  if (existing && existing.nodeType === Node.TEXT_NODE) {
+    return { kind: "text", node: existing };
+  }
+  const node = document.createTextNode("");
+  parent.insertBefore(node, existing ?? null);
+  return { kind: "text", node };
+}
+function claimOne(root, spec) {
+  if (spec.kind === "text" && spec.markerless) {
+    return claimMarkerlessText(root, spec);
+  }
+  const anchor = resolveAnchor(root, spec);
+  if (!anchor)
+    return null;
+  if (spec.kind === "text") {
+    return { kind: "text", node: textNodeAfterComment(anchor) };
+  }
+  const end = findMarkupEnd(anchor);
   if (!end) {
-    console.warn(`[barefootjs] preamble region bf:${id} has no end marker; skipping patch`);
+    console.warn(`[barefootjs] slot ${spec.id} has no end marker; skipping`);
+    return null;
+  }
+  return { kind: "markup", start: anchor, end, last: undefined };
+}
+function writeText(ref, value) {
+  ref.node.nodeValue = String(value ?? "");
+}
+function clearMarkupRange(start, end) {
+  const parent = end.parentNode;
+  if (!parent)
+    return;
+  let node = start.nextSibling;
+  while (node && node !== end) {
+    const next = node.nextSibling;
+    parent.removeChild(node);
+    node = next;
+  }
+}
+function writeMarkup(ref, value) {
+  const { start, end } = ref;
+  const parent = end.parentNode;
+  if (!parent)
+    return;
+  if (value != null && value.__isSlot)
+    return;
+  if (typeof Node !== "undefined" && value instanceof Node) {
+    if (value === ref.last)
+      return;
+    clearMarkupRange(start, end);
+    parent.insertBefore(value, end);
+    ref.last = value;
     return;
   }
-  for (const n of toRemove)
-    parent.removeChild(n);
+  const text = String(value ?? "");
+  if (text === ref.last)
+    return;
+  clearMarkupRange(start, end);
   const tpl = document.createElement("template");
-  tpl.innerHTML = html;
+  tpl.innerHTML = text;
   parent.insertBefore(tpl.content, end);
+  ref.last = text;
+}
+function writeSlot(refs, id, value) {
+  const ref = refs.get(id);
+  if (!ref) {
+    console.warn(`[barefootjs] no claimed slot for id ${id}; write ignored`);
+    return;
+  }
+  if (ref.kind === "text") {
+    writeText(ref, value);
+  } else {
+    writeMarkup(ref, value);
+  }
+}
+function claimSlots(root, plan) {
+  const refs = new Map;
+  for (const spec of plan) {
+    const ref = claimOne(root, spec);
+    if (ref)
+      refs.set(spec.id, ref);
+  }
+  return { write: (id, value) => writeSlot(refs, id, value) };
+}
+function lazySlots(root, plan) {
+  let claimed = null;
+  return (id, value) => {
+    if (!claimed)
+      claimed = claimSlots(root, plan);
+    claimed.write(id, value);
+  };
 }
 // src/runtime/apply-rest-attrs.ts
 import { createEffect as createEffect2 } from "@barefootjs/client/reactive";
@@ -2914,26 +2854,6 @@ function __bfText(current, value) {
   }
   return textNode;
 }
-// src/runtime/client-marker.ts
-function updateClientMarker(scope, id, value) {
-  if (!scope)
-    return;
-  const marker = `bf-client:${id}`;
-  const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
-  while (walker.nextNode()) {
-    if (walker.currentNode.nodeValue === marker) {
-      const comment = walker.currentNode;
-      let textNode = comment.nextSibling;
-      if (textNode?.nodeType !== Node.TEXT_NODE || !textNode.nodeValue?.startsWith("​")) {
-        textNode = document.createTextNode("​" + String(value ?? ""));
-        comment.parentNode?.insertBefore(textNode, comment.nextSibling);
-      } else {
-        textNode.nodeValue = "​" + String(value ?? "");
-      }
-      return;
-    }
-  }
-}
 // src/runtime/render.ts
 function render(container, nameOrDef, props = {}) {
   let name;
@@ -3014,7 +2934,6 @@ export {
   useContext,
   upsertChildItem,
   upsertChild,
-  updateClientMarker,
   unwrap,
   untrack3 as untrack,
   textNodeAfterComment as tAfter,
@@ -3030,21 +2949,19 @@ export {
   rehydrateAll,
   registerTemplate,
   registerComponent,
-  reconcileList,
-  reconcileElements,
   queryHref,
   qsaItem,
   qsaChildScopes,
   qsaChildScope,
   qsa,
   provideContext,
-  patchSlotRange,
   patchLeaf,
   parseHTML,
   onMount,
   onCleanup,
   mapArrayAnchored,
   mapArray,
+  lazySlots,
   isSSRPortal,
   insert,
   initChild,
@@ -3053,10 +2970,8 @@ export {
   hasTemplate,
   getTemplate,
   getRegisteredDef,
-  getPropsUpdateFn,
   getLoopNodes,
   getLoopChildren,
-  getComponentProps,
   getComponentInit,
   forwardProps,
   formatDate,
@@ -3064,6 +2979,7 @@ export {
   findSiblingSlot,
   findScope,
   find,
+  escapeTextOrNode,
   escapeText,
   escapeAttr,
   endTurn,
@@ -3082,6 +2998,7 @@ export {
   createContext,
   createComponent,
   cleanupPortalPlaceholder,
+  claimSlots,
   beginTurn,
   batch,
   applyRestAttrs,

package/dist/runtime/loop-markers.d.ts

@@ -0,0 +1,26 @@
+/**
+ * BarefootJS - Loop Boundary Marker Lookup
+ *
+ * `<!--bf-loop:<id>-->` / `<!--bf-/loop:<id>-->` comment markers delimit a
+ * loop's rendered range inside its container so `mapArray`/`mapArrayAnchored`
+ * (`./map-array.ts`) can reconcile only that range without disturbing
+ * non-loop siblings. These lookups used to also back the now-removed
+ * `reconcileElements`/`reconcileList` element-reconciler (slot unification
+ * A4); they remain as the compiler-facing marker API.
+ */
+/**
+ * Get loop children from a container, respecting bf-loop boundary markers.
+ * When markers are present, returns only elements between them.
+ * When absent, returns all children (backward compatible).
+ * Exported for use by compiler-generated hydration code.
+ */
+export declare function getLoopChildren(container: HTMLElement, markerId?: string): HTMLElement[];
+/**
+ * Like {@link getLoopChildren}, but returns every node between the loop
+ * boundary markers — Comments (per-item `<!--bf-loop-i-->` markers) and
+ * text included. The branch-clearing path needs to remove the per-item
+ * marker comments alongside elements; otherwise stale markers would
+ * accumulate when a branch swap forces mapArray to start over (#1212).
+ */
+export declare function getLoopNodes(container: HTMLElement, markerId?: string): Node[];
+//# sourceMappingURL=loop-markers.d.ts.map

package/dist/runtime/loop-markers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loop-markers.d.ts","sourceRoot":"","sources":["../../src/runtime/loop-markers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAyDH;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,EAAE,CAMxF;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,CAY9E"}