@barefootjs/client 0.33.0 → 0.33.2

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) {
@@ -1818,8 +1817,9 @@ 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;
@@ -1832,12 +1832,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);
+  }
   if (!element) {
     console.warn(`[BarefootJS] Template returned empty HTML for component: ${name}`);
     return createPlaceholder(name, key);
   }
-  if (scopeId) {
+  if (scopeId && !isFragmentRoot) {
     element.setAttribute(BF_SCOPE, scopeId);
   }
   if (slot) {
@@ -1848,11 +1854,36 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
   if (key !== undefined) {
     element.setAttribute(BF_KEY, 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,22 +1911,46 @@ 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}`;
+  let raw;
+  try {
+    raw = templateFn(props);
+  } finally {
+    _parentScopeId = prevParentScopeId;
   }
-  const raw = templateFn(props);
   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;
@@ -1904,9 +1959,9 @@ 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="/;
@@ -2236,6 +2291,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;
@@ -2273,31 +2333,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);
 }
@@ -2336,19 +2420,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);
@@ -2371,6 +2460,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) {
@@ -2378,13 +2468,17 @@ 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) {
   if (!container)
@@ -2410,7 +2504,7 @@ 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 existingRanges = startMarker ? findItemRanges(startMarker, endMarker) : Array.from(container.children).map((el) => ({ startMarker: null, primaryEl: el, extras: [], scopeComments: null }));
       const needsHydration = existingRanges.length > 0 && (!existingRanges[0]?.primaryEl.hasAttribute("data-key") || scopes.size === 0);
       if (needsHydration) {
         for (let i2 = 0;i2 < existingRanges.length && i2 < items.length; i2++) {
@@ -2418,14 +2512,14 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
           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);
+          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 });
+          const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, undefined, { container, anchor });
           if (!scope.primaryEl.dataset.key)
             scope.primaryEl.setAttribute(BF_KEY, key);
           scopes.set(key, scope);
@@ -2435,8 +2529,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();
@@ -2446,7 +2544,7 @@ 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;
         if (existingKey && !scopes.has(existingKey)) {
@@ -2454,6 +2552,7 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
             startMarker: range.startMarker,
             primaryEl: range.primaryEl,
             extras: range.extras,
+            scopeComments: range.scopeComments,
             dispose: () => {},
             setItem: () => {}
           });
@@ -2472,7 +2571,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)
@@ -2504,7 +2603,7 @@ 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 });
+        const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, undefined, { container, anchor });
         if (!scope.primaryEl.dataset.key)
           scope.primaryEl.setAttribute(BF_KEY, key);
         scopes.set(key, scope);
@@ -2543,7 +2642,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 {
@@ -3316,6 +3415,15 @@ function findCondStartInRange(anchor, id) {
   }
   return null;
 }
+function findCondContainer(scope, id) {
+  const want = `bf-cond-start:${id}`;
+  for (const comment of commentsInScope(scope)) {
+    if (comment.nodeValue === want) {
+      return comment.parentElement ?? scope;
+    }
+  }
+  return scope;
+}
 var EMPTY_SLOTS = [];
 function normalizeTemplate(value) {
   return typeof value === "string" ? { html: value, slots: EMPTY_SLOTS } : value;
@@ -3718,6 +3826,7 @@ export {
   flushHydration,
   findSiblingSlot,
   findScope,
+  findCondContainer,
   find,
   escapeTextOrNode,
   escapeTextOrMarkup,

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.0",
+  "version": "0.33.2",
   "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.0"
+    "@barefootjs/shared": "0.33.2"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0"