@barefootjs/client 0.33.1 → 0.33.3

package/dist/runtime/standalone.js

@@ -1737,8 +1737,7 @@ function hydrateCommentScope(comment) {
   if (hydratedScopes.has(proxyEl))
     return;
   commentScopeRegistry.set(proxyEl, { commentNode: comment, scopeId });
-  const parsed = parseProps(propsJson || null, `comment scope ${scopeId}`);
-  const props = parsed[name] ?? {};
+  const props = parseProps(propsJson || null, `comment scope ${scopeId}`);
   runInit(proxyEl, def, props);
 }
 function nextElementSibling2(node) {
@@ -1775,25 +1774,25 @@ function mountRowRoot(el) {
   }
   return el;
 }
-function createComponent(nameOrDef, props = {}, key, slot, mountAt) {
-  const element = materializeComponent(nameOrDef, props, key, slot, mountAt);
+function createComponent(nameOrDef, props = {}, key, slot, mountAt, keyAttrName2 = BF_KEY) {
+  const element = materializeComponent(nameOrDef, props, key, slot, mountAt, keyAttrName2);
   if (mountAt && mountAt.parentNode && element !== mountAt) {
     mountAt.replaceWith(element);
   }
   return element;
 }
-function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
+function materializeComponent(nameOrDef, props = {}, key, slot, mountAt, keyAttrName2 = BF_KEY) {
   if (props == null)
     props = {};
   const rowMount = mountAt ? null : takeRowMountPoint();
   if (typeof nameOrDef !== "string") {
-    return createComponentFromDef(nameOrDef, props, key, mountAt, rowMount);
+    return createComponentFromDef(nameOrDef, props, key, mountAt, rowMount, keyAttrName2);
   }
   const name = nameOrDef;
   const templateFn = getTemplate(name);
   if (!templateFn) {
     console.warn(`[BarefootJS] Template not found for component: ${name}`);
-    return createPlaceholder(name, key);
+    return createPlaceholder(name, key, keyAttrName2);
   }
   const childrenDescriptor = Object.getOwnPropertyDescriptor(props, "children");
   const childrenIsGetter = childrenDescriptor != null && typeof childrenDescriptor.get === "function";
@@ -1818,13 +1817,16 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
   });
   const def = getRegisteredDef(name);
   const isCommentWrapper = def?.comment === true;
+  const isFragmentRoot = def?.fragmentRoot === true;
   const derivedScopeId = slot?.parent && slot.mount ? `${slot.parent}_${slot.mount}` : null;
-  const scopeId = isCommentWrapper ? null : derivedScopeId ?? `${def?.name ?? name}_${generateId()}`;
+  const scopeId = isCommentWrapper && !isFragmentRoot ? null : derivedScopeId ?? `${def?.name ?? name}_${generateId()}`;
   const prevParentScopeId = _parentScopeId;
   if (scopeId) {
     _parentScopeId = scopeId;
   } else if (slot?.parent) {
     _parentScopeId = slot.parent;
+  } else if (!_parentScopeId) {
+    _parentScopeId = `${def?.name ?? name}_${generateId()}`;
   }
   let html;
   try {
@@ -1832,12 +1834,18 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
   } finally {
     _parentScopeId = prevParentScopeId;
   }
-  const element = parseHTML(html.trim()).firstChild;
+  const parsedFragment = parseHTML(html.trim());
+  const roots = isFragmentRoot ? Array.from(parsedFragment.childNodes) : parsedFragment.firstChild ? [parsedFragment.firstChild] : [];
+  const element = isFragmentRoot ? roots.find((node) => node.nodeType === Node.ELEMENT_NODE) : roots[0];
+  if (isFragmentRoot && roots.length > 0 && !element) {
+    console.warn(`[BarefootJS] Fragment-root component ${name} rendered no element root; ` + "a scope needs at least one element to attach to. Wrap the content in an element.");
+    return createPlaceholder(name, key, keyAttrName2);
+  }
   if (!element) {
     console.warn(`[BarefootJS] Template returned empty HTML for component: ${name}`);
-    return createPlaceholder(name, key);
+    return createPlaceholder(name, key, keyAttrName2);
   }
-  if (scopeId) {
+  if (scopeId && !isFragmentRoot) {
     element.setAttribute(BF_SCOPE, scopeId);
   }
   if (slot) {
@@ -1846,13 +1854,38 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
     element.setAttribute(BF_AT, slot.mount);
   }
   if (key !== undefined) {
-    element.setAttribute(BF_KEY, String(key));
+    element.setAttribute(keyAttrName2, String(key));
+  }
+  const fragmentComments = isFragmentRoot && scopeId ? {
+    start: document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${scopeId}`),
+    end: document.createComment(`${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}`)
+  } : null;
+  if (fragmentComments) {
+    commentScopeRegistry.set(element, { commentNode: fragmentComments.start, scopeId });
   }
   const rootIsDeferredPlaceholder = element.hasAttribute(BF_PLACEHOLDER);
+  let bareFragment = null;
   if (mountAt && !rootIsDeferredPlaceholder) {
-    mountAt.replaceWith(element);
+    if (fragmentComments) {
+      mountAt.replaceWith(fragmentComments.start, ...roots, fragmentComments.end);
+    } else {
+      mountAt.replaceWith(element);
+    }
   } else if (rowMount && !rootIsDeferredPlaceholder) {
-    rowMount.container.insertBefore(element, rowMount.anchor);
+    if (fragmentComments) {
+      rowMount.container.insertBefore(fragmentComments.start, rowMount.anchor);
+      rowMount.container.insertBefore(element, rowMount.anchor);
+      rowMount.container.insertBefore(fragmentComments.end, rowMount.anchor);
+      element.__bfScopeComments = fragmentComments;
+      if (roots.length > 1) {
+        console.warn(`[BarefootJS] Fragment-root component ${name} used as a loop row renders ` + `${roots.length} top-level nodes; only the first element is connected here. ` + "See https://github.com/piconic-ai/barefootjs/issues/2733");
+      }
+    } else {
+      rowMount.container.insertBefore(element, rowMount.anchor);
+    }
+  } else if (fragmentComments && !rootIsDeferredPlaceholder) {
+    bareFragment = document.createDocumentFragment();
+    bareFragment.append(fragmentComments.start, ...roots, fragmentComments.end);
   }
   const prevScope = setCurrentScope(element);
   let placeholderWrapper = null;
@@ -1880,18 +1913,30 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
   }
   setCurrentScope(prevScope);
   hydratedScopes.add(element);
-  return element;
+  return bareFragment ?? element;
+}
+var FIRST_TAG_PATTERN = /<([a-zA-Z][^\s/>]*)/;
+var TAG_HEAD_PATTERN = /^(<[a-zA-Z][^\s/>]*)/;
+function spliceAttrsAfterFirstTag(html, attrs) {
+  const firstElMatch = html.match(FIRST_TAG_PATTERN);
+  if (!firstElMatch)
+    return html;
+  const insertPos = firstElMatch.index;
+  return html.slice(0, insertPos) + html.slice(insertPos).replace(TAG_HEAD_PATTERN, `$1${attrs}`);
 }
 function renderChild(name, props, key, slotSuffix) {
   const templateFn = getTemplate(name);
   const suffix = slotSuffix ? `_${slotSuffix}` : "";
-  const displayName = getRegisteredDef(name)?.name ?? name;
+  const def = getRegisteredDef(name);
+  const displayName = def?.name ?? name;
+  const isFragmentRoot = def?.fragmentRoot === true;
   const scopePrefix = _parentScopeId && slotSuffix ? _parentScopeId : `${displayName}_${generateId()}`;
+  const scopeId = `${scopePrefix}${suffix}`;
   const keyAttr = key !== undefined ? ` ${BF_KEY}="${key}"` : "";
   const slotAttrs = _parentScopeId && slotSuffix ? ` ${BF_HOST}="${_parentScopeId}" ${BF_AT}="${slotSuffix}"` : "";
-  const bfsAttr = `${BF_SCOPE}="${scopePrefix}${suffix}"`;
+  const bfsAttr = `${BF_SCOPE}="${scopeId}"`;
   if (!templateFn) {
-    return `<div ${bfsAttr}${slotAttrs}${keyAttr}></div>`;
+    return isFragmentRoot ? `<!--${BF_SCOPE_COMMENT_PREFIX}${scopeId}--><div></div><!--${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}-->` : `<div ${bfsAttr}${slotAttrs}${keyAttr}></div>`;
   }
   const prevParentScopeId = _parentScopeId;
   _parentScopeId = `${scopePrefix}${suffix}`;
@@ -1902,7 +1947,12 @@ function renderChild(name, props, key, slotSuffix) {
     _parentScopeId = prevParentScopeId;
   }
   let html = raw.trim().replace(PLACEHOLDER_ATTR_PATTERN, _parentScopeId ? ` bf-s="${_parentScopeId}"` : "");
-  const firstElMatch = html.match(/<(\w+)/);
+  if (isFragmentRoot) {
+    const hostSuffix = _parentScopeId && slotSuffix ? `|h=${_parentScopeId}|m=${slotSuffix}` : "";
+    const keyedHtml = keyAttr ? spliceAttrsAfterFirstTag(html, keyAttr) : html;
+    return `<!--${BF_SCOPE_COMMENT_PREFIX}${scopeId}${hostSuffix}-->${keyedHtml}<!--${BF_SCOPE_COMMENT_END_PREFIX}${scopeId}-->`;
+  }
+  const firstElMatch = html.match(FIRST_TAG_PATTERN);
   if (!firstElMatch)
     return html;
   const insertPos = firstElMatch.index;
@@ -1911,20 +1961,20 @@ function renderChild(name, props, key, slotSuffix) {
   if (ROOT_HAS_BFS_PATTERN.test(afterInsert)) {
     if (!extraAttrs)
       return html;
-    return html.slice(0, insertPos) + afterInsert.replace(/^(<\w+)/, `$1${extraAttrs}`);
+    return html.slice(0, insertPos) + afterInsert.replace(TAG_HEAD_PATTERN, `$1${extraAttrs}`);
   }
-  return html.slice(0, insertPos) + afterInsert.replace(/^(<\w+)/, `$1 ${bfsAttr}${extraAttrs}`);
+  return html.slice(0, insertPos) + afterInsert.replace(TAG_HEAD_PATTERN, `$1 ${bfsAttr}${extraAttrs}`);
 }
 var PLACEHOLDER_ATTR_PATTERN = new RegExp(`\\s+bf-s="${BF_PARENT_SCOPE_PLACEHOLDER}"`, "g");
 var ROOT_HAS_BFS_PATTERN = /^<\w+[^>]*\sbf-s="/;
 function generateId() {
   return Math.random().toString(36).slice(2, 8);
 }
-function createPlaceholder(name, key) {
+function createPlaceholder(name, key, keyAttrName2 = BF_KEY) {
   const el = document.createElement("div");
   el.setAttribute(BF_SCOPE, `${name}_placeholder`);
   if (key !== undefined) {
-    el.setAttribute(BF_KEY, String(key));
+    el.setAttribute(keyAttrName2, String(key));
   }
   el.textContent = `[${name}]`;
   el.style.cssText = "color: red; border: 1px dashed red; padding: 4px;";
@@ -1973,6 +2023,9 @@ function escapeTextOrMarkup(value) {
     return value[BF_MARKUP_BRAND];
   return escapeText(value);
 }
+function markupOrEmpty(value) {
+  return value == null ? "" : value;
+}
 function escapeTextOrNode(value) {
   if (isBfMarkup(value))
     return value[BF_MARKUP_BRAND];
@@ -2034,7 +2087,7 @@ function insertGetterChildren(element, children) {
     element.appendChild(document.createTextNode(String(children)));
   }
 }
-function createComponentFromDef(def, props, key, mountAt, rowMount) {
+function createComponentFromDef(def, props, key, mountAt, rowMount, keyAttrName2 = BF_KEY) {
   if (!def.template) {
     throw new Error("[BarefootJS] createComponent with ComponentDef requires a template function");
   }
@@ -2051,7 +2104,7 @@ function createComponentFromDef(def, props, key, mountAt, rowMount) {
   const scopeId = `${name}_${generateId()}`;
   element.setAttribute(BF_SCOPE, scopeId);
   if (key !== undefined) {
-    element.setAttribute(BF_KEY, String(key));
+    element.setAttribute(keyAttrName2, String(key));
   }
   if (mountAt) {
     mountAt.replaceWith(element);
@@ -2243,6 +2296,11 @@ function upsertChildItem(primaryEl, name, slotId, props, key, anchorScope) {
   return null;
 }
 // src/runtime/map-array.ts
+function scopeIdOf(start) {
+  const rest = (start.nodeValue ?? "").slice(BF_SCOPE_COMMENT_PREFIX.length);
+  const pipe = rest.indexOf("|");
+  return pipe >= 0 ? rest.slice(0, pipe) : rest;
+}
 function findLoopMarkers2(container, markerId) {
   let start = null;
   let end = null;
@@ -2280,31 +2338,55 @@ function findItemRanges(start, end) {
   const ranges = [];
   let current = null;
   let sawItemMarker = false;
+  let pendingScopeStart = null;
+  let openScopeComments = null;
   let node = start.nextSibling;
   while (node && node !== end) {
-    if (node.nodeType === Node.COMMENT_NODE && node.nodeValue === BF_LOOP_ITEM) {
-      sawItemMarker = true;
-      current = { startMarker: node, primaryEl: null, extras: [] };
-      ranges.push(current);
+    if (node.nodeType === Node.COMMENT_NODE) {
+      const value = node.nodeValue ?? "";
+      if (value === BF_LOOP_ITEM) {
+        sawItemMarker = true;
+        current = { startMarker: node, primaryEl: null, extras: [], scopeComments: null };
+        ranges.push(current);
+      } else if (value.startsWith(BF_SCOPE_COMMENT_PREFIX)) {
+        pendingScopeStart = node;
+      } else if (openScopeComments && value === BF_SCOPE_COMMENT_END_PREFIX + scopeIdOf(openScopeComments.start)) {
+        openScopeComments.end = node;
+        openScopeComments = null;
+      }
     } else if (node.nodeType === Node.ELEMENT_NODE) {
       const el = node;
+      let scopeComments = null;
+      if (pendingScopeStart) {
+        scopeComments = { start: pendingScopeStart, end: null };
+        openScopeComments = scopeComments;
+        pendingScopeStart = null;
+      }
       if (sawItemMarker) {
-        if (!current.primaryEl)
+        if (!current.primaryEl) {
           current.primaryEl = el;
-        else
+          current.scopeComments = scopeComments;
+        } else
           current.extras.push(el);
       } else {
-        ranges.push({ startMarker: null, primaryEl: el, extras: [] });
+        ranges.push({ startMarker: null, primaryEl: el, extras: [], scopeComments });
       }
     }
     node = node.nextSibling;
   }
-  return ranges.filter((r) => r.primaryEl !== null);
+  return ranges.filter((r) => r.primaryEl !== null).map((r) => ({
+    ...r,
+    scopeComments: r.scopeComments?.end ? r.scopeComments : null
+  }));
 }
 function insertScope(scope, target, anchor) {
   if (scope.startMarker)
     target.insertBefore(scope.startMarker, anchor);
+  if (scope.scopeComments)
+    target.insertBefore(scope.scopeComments.start, anchor);
   target.insertBefore(scope.primaryEl, anchor);
+  if (scope.scopeComments)
+    target.insertBefore(scope.scopeComments.end, anchor);
   for (const ex of scope.extras)
     target.insertBefore(ex, anchor);
 }
@@ -2343,19 +2425,24 @@ function longestIncreasingSubsequenceIndices(arr) {
 function removeScope(scope) {
   if (scope.startMarker?.parentNode)
     scope.startMarker.remove();
+  if (scope.scopeComments?.start.parentNode)
+    scope.scopeComments.start.remove();
   if (scope.primaryEl.parentNode)
     scope.primaryEl.remove();
+  if (scope.scopeComments?.end.parentNode)
+    scope.scopeComments.end.remove();
   for (const ex of scope.extras) {
     if (ex.parentNode)
       ex.remove();
   }
 }
-function createItemScope(item, index, renderItem, existingPrimary, existingExtras, existingStart, rowMount) {
+function createItemScope(item, index, renderItem, existingPrimary, existingExtras, existingStart, existingScopeComments, rowMount) {
   let primaryEl;
   let dispose;
   let setItem;
   let extras = [];
   let startMarker = null;
+  let scopeComments = null;
   createRoot((d) => {
     dispose = d;
     const [itemAccessor, itemSetter] = createSignal(item);
@@ -2378,6 +2465,7 @@ function createItemScope(item, index, renderItem, existingPrimary, existingExtra
     if (existingPrimary) {
       extras = existingExtras ?? [];
       startMarker = existingStart ?? null;
+      scopeComments = existingScopeComments ?? null;
     } else {
       const stashed = primaryEl.__bfExtras;
       if (stashed && stashed.length > 0) {
@@ -2385,15 +2473,19 @@ function createItemScope(item, index, renderItem, existingPrimary, existingExtra
         startMarker = document.createComment(BF_LOOP_ITEM);
       }
       delete primaryEl.__bfExtras;
+      const stashedScopeComments = primaryEl.__bfScopeComments;
+      if (stashedScopeComments)
+        scopeComments = stashedScopeComments;
+      delete primaryEl.__bfScopeComments;
     }
     return;
   });
   if (rowMount && !existingPrimary && extras.length > 0 && primaryEl.parentNode) {
     primaryEl.remove();
   }
-  return { startMarker, primaryEl, extras, dispose, setItem };
+  return { startMarker, primaryEl, extras, scopeComments, dispose, setItem };
 }
-function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
+function mapArray(accessor, container, getKey, renderItem, markerId, bfId, keyAttrName2 = BF_KEY) {
   if (!container)
     return;
   const scopes = new Map;
@@ -2417,24 +2509,26 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
     const anchor = endMarker ?? null;
     if (!hydrated) {
       hydrated = true;
-      const existingRanges = startMarker ? findItemRanges(startMarker, endMarker) : Array.from(container.children).map((el) => ({ startMarker: null, primaryEl: el, extras: [] }));
-      const needsHydration = existingRanges.length > 0 && (!existingRanges[0]?.primaryEl.hasAttribute("data-key") || scopes.size === 0);
+      const existingRanges = startMarker ? findItemRanges(startMarker, endMarker) : Array.from(container.children).map((el) => ({ startMarker: null, primaryEl: el, extras: [], scopeComments: null }));
+      const needsHydration = existingRanges.length > 0;
       if (needsHydration) {
         for (let i2 = 0;i2 < existingRanges.length && i2 < items.length; i2++) {
           const range = existingRanges[i2];
           const item = items[i2];
           const key = getKey ? getKey(item, i2) : String(i2);
-          range.primaryEl.setAttribute(BF_KEY, key);
-          const scope = createItemScope(item, i2, renderItem, range.primaryEl, range.extras, range.startMarker);
+          if (getKey && !range.primaryEl.getAttribute(keyAttrName2)) {
+            range.primaryEl.setAttribute(keyAttrName2, key);
+          }
+          const scope = createItemScope(item, i2, renderItem, range.primaryEl, range.extras, range.startMarker, range.scopeComments);
           scopes.set(key, scope);
           hydratedScopes.add(range.primaryEl);
         }
         for (let i2 = existingRanges.length;i2 < items.length; i2++) {
           const item = items[i2];
           const key = getKey ? getKey(item, i2) : String(i2);
-          const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, { container, anchor });
-          if (!scope.primaryEl.dataset.key)
-            scope.primaryEl.setAttribute(BF_KEY, key);
+          const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, undefined, { container, anchor });
+          if (getKey && !scope.primaryEl.getAttribute(keyAttrName2))
+            scope.primaryEl.setAttribute(keyAttrName2, key);
           scopes.set(key, scope);
           insertScope(scope, container, anchor);
         }
@@ -2442,8 +2536,12 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
           const range = existingRanges[i2];
           if (range.startMarker?.parentNode)
             range.startMarker.remove();
+          if (range.scopeComments?.start.parentNode)
+            range.scopeComments.start.remove();
           if (range.primaryEl.parentNode)
             range.primaryEl.remove();
+          if (range.scopeComments?.end.parentNode)
+            range.scopeComments.end.remove();
           for (const ex of range.extras) {
             if (ex.parentNode)
               ex.remove();
@@ -2453,14 +2551,15 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
       }
     }
     if (scopes.size === 0) {
-      const loopRanges = startMarker ? findItemRanges(startMarker, endMarker) : Array.from(container.children).map((el) => ({ startMarker: null, primaryEl: el, extras: [] }));
+      const loopRanges = startMarker ? findItemRanges(startMarker, endMarker) : Array.from(container.children).map((el) => ({ startMarker: null, primaryEl: el, extras: [], scopeComments: null }));
       for (const range of loopRanges) {
-        const existingKey = range.primaryEl.dataset?.key;
+        const existingKey = range.primaryEl.getAttribute(keyAttrName2);
         if (existingKey && !scopes.has(existingKey)) {
           scopes.set(existingKey, {
             startMarker: range.startMarker,
             primaryEl: range.primaryEl,
             extras: range.extras,
+            scopeComments: range.scopeComments,
             dispose: () => {},
             setItem: () => {}
           });
@@ -2479,7 +2578,7 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
         } else {
           let expectedNodeCount = 0;
           for (const scope of scopes.values()) {
-            expectedNodeCount += 1 + scope.extras.length + (scope.startMarker ? 1 : 0);
+            expectedNodeCount += 1 + scope.extras.length + (scope.startMarker ? 1 : 0) + (scope.scopeComments ? 2 : 0);
           }
           let actualNodeCount = 0;
           for (let node = container.firstChild;node; node = node.nextSibling)
@@ -2511,9 +2610,9 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
         existing.setItem(item);
         desiredOrder.push(existing);
       } else {
-        const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, { container, anchor });
-        if (!scope.primaryEl.dataset.key)
-          scope.primaryEl.setAttribute(BF_KEY, key);
+        const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, undefined, { container, anchor });
+        if (getKey && !scope.primaryEl.getAttribute(keyAttrName2))
+          scope.primaryEl.setAttribute(keyAttrName2, key);
         scopes.set(key, scope);
         desiredOrder.push(scope);
       }
@@ -2550,7 +2649,7 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
       let j = i;
       while (j < desiredOrder.length && !stationary[j])
         j++;
-      const before = j < desiredOrder.length ? desiredOrder[j].startMarker ?? desiredOrder[j].primaryEl : anchor;
+      const before = j < desiredOrder.length ? desiredOrder[j].startMarker ?? desiredOrder[j].scopeComments?.start ?? desiredOrder[j].primaryEl : anchor;
       if (j - i === 1) {
         insertScope(desiredOrder[i], container, before);
       } else {
@@ -2708,7 +2807,7 @@ function mapArrayAnchored(accessor, container, getKey, renderItem, markerId, bfI
   }, bfId);
 }
 // src/runtime/map-array-lazy.ts
-function mapArrayLazy(accessor, container, getKey, plan, markerId, bfId) {
+function mapArrayLazy(accessor, container, getKey, plan, markerId, bfId, keyAttrName2 = BF_KEY) {
   if (!container)
     return;
   const entries = new Map;
@@ -2747,8 +2846,8 @@ function mapArrayLazy(accessor, container, getKey, plan, markerId, bfId) {
       last: null
     };
     entry.primaryEl = untrack(() => plan.createRow(entry, index));
-    if (!entry.primaryEl.dataset.key)
-      entry.primaryEl.setAttribute(BF_KEY, key);
+    if (getKey && !entry.primaryEl.getAttribute(keyAttrName2))
+      entry.primaryEl.setAttribute(keyAttrName2, key);
     markStranded();
     return entry;
   };
@@ -2770,7 +2869,7 @@ function mapArrayLazy(accessor, container, getKey, plan, markerId, bfId) {
         const shared = Math.min(doms.length, items.length);
         for (let i2 = 0;i2 < shared; i2++) {
           const el = doms[i2];
-          const ssrKey = el.getAttribute(BF_KEY);
+          const ssrKey = el.getAttribute(keyAttrName2);
           const key = ssrKey !== null ? ssrKey : getKey ? getKey(items[i2], i2) : String(i2);
           const entry = { key, primaryEl: el, item: items[i2], refs: null, last: null };
           entries.set(key, entry);
@@ -3712,6 +3811,7 @@ export {
   onMount,
   onCleanup,
   mountRowRoot,
+  markupOrEmpty,
   mapArrayLazy,
   mapArrayAnchored,
   mapArray,

package/dist/runtime/types.d.ts

@@ -20,7 +20,25 @@ export interface ComponentDef {
     init: InitFn;
     /** Template function for client-side component creation */
     template?: (props: Record<string, unknown>) => string;
-    /** When true, use comment-based scope hydration (fragment roots) */
+    /**
+     * When true, this component's scope has no `bf-s`-carrying element of
+     * its own — a proxy element stands in for it. Set for TWO distinct
+     * shapes (see `fragmentRoot` below, which tells them apart):
+     *   - a genuine fragment root (`<>...</>`), where the proxy is the
+     *     fragment's own rendered content;
+     *   - a root that is itself a single child component call, where the
+     *     proxy is that child's own already-scoped element (#2649).
+     */
     comment?: boolean;
+    /**
+     * True only for the genuine-fragment-root shape of `comment` above
+     * (`ir.root.type === 'fragment'`) — never for the root-is-a-child-call
+     * shape. `materializeComponent` (component.ts) uses this to decide
+     * whether a CSR mount must generate its OWN scope id (fragment root: yes,
+     * so nested `renderChild()` calls get parent-prefixed naming matching
+     * SSR/hydrate) or leave the scope id null to avoid overwriting the
+     * child's own (#2649's shape, #2722).
+     */
+    fragmentRoot?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/runtime/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/runtime/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;GAIG;AACH,MAAM,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;AAE7E;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAA;IACrD,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/runtime/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;GAIG;AACH,MAAM,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;AAE7E;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAA;IACrD;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.33.1",
+  "version": "0.33.3",
   "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.33.1"
+    "@barefootjs/shared": "0.33.3"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0"