@barefootjs/client 0.26.3 → 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;
@@ -2387,6 +2212,202 @@ function mapArrayAnchored(accessor, container, getKey, renderItem, markerId, bfI
     }
   }, bfId);
 }
+// src/runtime/patch-leaf.ts
+function patchLeaf(el, html) {
+  const tpl = document.createElement("template");
+  tpl.innerHTML = html;
+  const next = tpl.content.firstElementChild;
+  if (!next)
+    return;
+  if (next.tagName !== el.tagName) {
+    console.warn("[barefootjs] flatMap leaf root tag changed under a stable key " + `(<${el.tagName.toLowerCase()}> -> <${next.tagName.toLowerCase()}>); ` + "give each branch its own key so the node is replaced instead of patched.");
+  }
+  for (const name of el.getAttributeNames()) {
+    if (name === "data-key")
+      continue;
+    if (!next.hasAttribute(name))
+      el.removeAttribute(name);
+  }
+  for (const name of next.getAttributeNames()) {
+    if (name === "data-key")
+      continue;
+    const value = next.getAttribute(name);
+    if (value !== null && el.getAttribute(name) !== value)
+      el.setAttribute(name, value);
+  }
+  el.replaceChildren(...Array.from(next.childNodes));
+}
+// 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}`;
+  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 !== boundary; el = el.parentElement) {
+      if (el.hasAttribute(BF_SCOPE)) {
+        owned = false;
+        break;
+      }
+    }
+    if (owned)
+      return comment;
+  }
+  return null;
+}
+function findMarkupEnd(start) {
+  let depth = 0;
+  let node = start.nextSibling;
+  while (node) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      const value = node.nodeValue ?? "";
+      if (value.startsWith("bf:")) {
+        depth++;
+      } else if (value === "/") {
+        if (depth === 0)
+          return node;
+        depth--;
+      }
+    }
+    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] 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;
+  }
+  const text = String(value ?? "");
+  if (text === ref.last)
+    return;
+  clearMarkupRange(start, end);
+  const tpl = document.createElement("template");
+  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";
 
@@ -2833,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;
@@ -2933,7 +2934,6 @@ export {
   useContext,
   upsertChildItem,
   upsertChild,
-  updateClientMarker,
   unwrap,
   untrack3 as untrack,
   textNodeAfterComment as tAfter,
@@ -2949,19 +2949,19 @@ export {
   rehydrateAll,
   registerTemplate,
   registerComponent,
-  reconcileList,
-  reconcileElements,
   queryHref,
   qsaItem,
   qsaChildScopes,
   qsaChildScope,
   qsa,
   provideContext,
+  patchLeaf,
   parseHTML,
   onMount,
   onCleanup,
   mapArrayAnchored,
   mapArray,
+  lazySlots,
   isSSRPortal,
   insert,
   initChild,
@@ -2970,10 +2970,8 @@ export {
   hasTemplate,
   getTemplate,
   getRegisteredDef,
-  getPropsUpdateFn,
   getLoopNodes,
   getLoopChildren,
-  getComponentProps,
   getComponentInit,
   forwardProps,
   formatDate,
@@ -2981,6 +2979,7 @@ export {
   findSiblingSlot,
   findScope,
   find,
+  escapeTextOrNode,
   escapeText,
   escapeAttr,
   endTurn,
@@ -2999,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"}

package/dist/runtime/patch-leaf.d.ts

@@ -0,0 +1,17 @@
+/**
+ * In-place patch for flatMap leaf elements (the descriptor-based
+ * `mapArray` path — see `stringifyPlainLoop`'s flatMap branch in
+ * `@barefootjs/jsx`).
+ *
+ * flatMap leaves carry no per-slot reactive wiring (the compiler refuses
+ * leaves that would need it), so a leaf whose rendered HTML changed under a
+ * stable key is updated wholesale: attributes are synced and children are
+ * replaced from the freshly rendered string. The element's identity is
+ * preserved — `mapArray` holds the node in its keyed scope map, so the
+ * patch must never swap the node itself.
+ *
+ * `data-key` is excluded from attribute sync: reconciliation identity is
+ * owned by `mapArray` (stamped via `setAttribute`), never by leaf content.
+ */
+export declare function patchLeaf(el: Element, html: string): void;
+//# sourceMappingURL=patch-leaf.d.ts.map

package/dist/runtime/patch-leaf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"patch-leaf.d.ts","sourceRoot":"","sources":["../../src/runtime/patch-leaf.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAyBzD"}