@barefootjs/client 0.26.3 → 0.27.0

package/dist/runtime/standalone.js

@@ -1758,8 +1758,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 = {};
@@ -1851,24 +1849,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}` : "";
@@ -1934,6 +1916,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");
@@ -1998,7 +1985,6 @@ function createComponentFromDef(def, props, key) {
   }
   def.init(element, props);
   hydratedScopes.add(element);
-  propsMap.set(element, props);
   return element;
 }
 
@@ -2056,7 +2042,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;
@@ -2101,14 +2087,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) {
@@ -2129,159 +2107,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;
@@ -2792,6 +2617,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/style.ts
 function styleToCss(value) {
   if (value == null)
@@ -3233,26 +3254,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;
@@ -3333,7 +3334,6 @@ export {
   useContext,
   upsertChildItem,
   upsertChild,
-  updateClientMarker,
   unwrap,
   untrack,
   textNodeAfterComment as tAfter,
@@ -3349,19 +3349,19 @@ export {
   rehydrateAll,
   registerTemplate,
   registerComponent,
-  reconcileList,
-  reconcileElements,
   queryHref,
   qsaItem,
   qsaChildScopes,
   qsaChildScope,
   qsa,
   provideContext,
+  patchLeaf,
   parseHTML,
   onMount,
   onCleanup,
   mapArrayAnchored,
   mapArray,
+  lazySlots,
   isSSRPortal,
   insert,
   initChild,
@@ -3370,10 +3370,8 @@ export {
   hasTemplate,
   getTemplate,
   getRegisteredDef,
-  getPropsUpdateFn,
   getLoopNodes,
   getLoopChildren,
-  getComponentProps,
   getComponentInit,
   forwardProps,
   formatDate,
@@ -3381,6 +3379,7 @@ export {
   findSiblingSlot,
   findScope,
   find,
+  escapeTextOrNode,
   escapeText,
   escapeAttr,
   endTurn,
@@ -3399,6 +3398,7 @@ export {
   createContext,
   createComponent,
   cleanupPortalPlaceholder,
+  claimSlots,
   beginTurn,
   batch,
   applyRestAttrs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.26.3",
+  "version": "0.27.0",
   "description": "BarefootJS client package: reactive primitives (SSR-safe) plus browser runtime under the `/runtime` subpath (compiler target)",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,7 +55,7 @@
     "directory": "packages/client"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.26.3"
+    "@barefootjs/shared": "0.27.0"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0"

package/src/reactive.ts

@@ -319,7 +319,8 @@ export function createSignal<T>(initialValue: T, __bfId?: string): Signal<T> {
 export function createEffect(fn: EffectFn, __bfId?: string, __bfKind: SubscriberKind = 'effect'): void {
   // Note: Nested effects are now allowed. runEffect() properly saves/restores
   // prevEffect, so nested effects correctly track their own dependencies.
-  // This enables synchronous component initialization in reconcileList.
+  // This enables synchronous component initialization inside loop reconcilers
+  // (mapArray/mapArrayAnchored).
 
   const effect: EffectContext = {
     fn,