@barefootjs/client 0.33.1 → 0.33.2

package/dist/csr-adapter.js

@@ -169873,6 +169873,10 @@ var EMPTY_BOUND = new Set;
 var constInitializerCache = new WeakMap;
 var functionInfoExprCache = new WeakMap;
 
+// ../jsx/src/ir-to-client-js/prop-handling.ts
+var _localConstantValuesCache = new WeakMap;
+var _restSpreadNamesCache = new WeakMap;
+
 // ../jsx/src/ir-to-client-js/control-flow/stringify/template-parse.ts
 var SVG_ROOT_TAGS = new Set([
   "svg",

package/dist/runtime/component.d.ts

@@ -80,7 +80,33 @@ export interface CreateComponentSlotInfo {
     /** Slot id in the host (this child's `bf-m` value). */
     mount: string;
 }
-export declare function createComponent(nameOrDef: string | ComponentDef, props?: Record<string, unknown>, key?: string | number, slot?: CreateComponentSlotInfo, mountAt?: Element | null): HTMLElement;
+/**
+ * The `HTMLElement | DocumentFragment` return covers exactly one shape: a
+ * BARE call (no `mountAt`, no ambient row-mount point) for a genuine
+ * fragment-root component (#2722). Every other combination — a normal
+ * component, or a fragment-root one with `mountAt`/row-mount already
+ * telling this function where to connect — still returns the real,
+ * single `HTMLElement`, unchanged (that element stays the caller-visible
+ * proxy even when the fragment root has further sibling roots of its own
+ * — #2735 — those travel alongside it, never in place of it). Only the
+ * no-known-destination case has no single element to hand back: the
+ * fragment root's own `<!--bf-scope:-->` boundary comments PLUS every
+ * top-level node the fragment's template rendered — elements, bare text
+ * and `<!--bf:sN-->` slot markers alike (`materializeComponent` step 7b)
+ * — must travel to wherever the caller inserts the result, and a
+ * `DocumentFragment` is the one `Node` a plain `container.appendChild(...)`
+ * / `el.replaceWith(...)` moves as a unit without the caller needing to
+ * know why.
+ *
+ * The first overload states that in the type system rather than only here:
+ * a call that passes a non-null `mountAt` is telling this function where to
+ * connect, so it can only get the real `HTMLElement` back. Callers on that
+ * overload need no cast, which is why `upsertChild` (registry.ts) and
+ * `upsertChildItem` (qsa-item.ts) assert nothing — the narrowing is the
+ * signature's job, not theirs.
+ */
+export declare function createComponent(nameOrDef: string | ComponentDef, props: Record<string, unknown>, key: string | number | undefined, slot: CreateComponentSlotInfo | undefined, mountAt: Element): HTMLElement;
+export declare function createComponent(nameOrDef: string | ComponentDef, props?: Record<string, unknown>, key?: string | number, slot?: CreateComponentSlotInfo, mountAt?: Element | null): HTMLElement | DocumentFragment;
 /**
  * Render a child component's template to an HTML string.
  * Used by compiler-generated template functions when a stateless component

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/runtime/component.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAS9C,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAExD;AAED;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG;IAAE,SAAS,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,CAAA;AAsB9F,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI,GAAG,aAAa,GAAG,IAAI,CAI9E;AAQD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,OAAO,GAAG,OAAO,CAQjD;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH;;;GAGG;AACH;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,GAAG,YAAY,EAChC,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACnC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,IAAI,CAAC,EAAE,uBAAuB,EAC9B,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,GACvB,WAAW,CAcb;AA4OD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,CA6ER;AA+DD;;;;;GAKG;AACH;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjD;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAOjD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAGjD;AAED;;;;;;GAMG;AACH,QAAA,MAAM,eAAe,eAAe,CAAA;AAEpC;;;;;;GAMG;AACH,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;CACnC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,CAE/C;AAED,8GAA8G;AAC9G,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,QAAQ,CAU5D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAGzD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAI9D;AAaD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,gBAAgB,CAejF"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/runtime/component.ts"],"names":[],"mappings":"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"}

package/dist/runtime/index.js

@@ -1330,8 +1330,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) {
@@ -1412,8 +1411,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;
@@ -1426,12 +1426,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) {
@@ -1442,11 +1448,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;
@@ -1474,18 +1505,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}`;
@@ -1496,7 +1539,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;
@@ -1505,9 +1553,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="/;
@@ -1838,6 +1886,11 @@ function upsertChildItem(primaryEl, name, slotId, props, key, anchorScope) {
 }
 // src/runtime/map-array.ts
 import { createSignal, createEffect, createRoot as createRoot2 } from "@barefootjs/client/reactive";
+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;
@@ -1875,31 +1928,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);
 }
@@ -1938,19 +2015,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;
   createRoot2((d) => {
     dispose = d;
     const [itemAccessor, itemSetter] = createSignal(item);
@@ -1973,6 +2055,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) {
@@ -1980,13 +2063,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)
@@ -2012,7 +2099,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++) {
@@ -2020,14 +2107,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);
@@ -2037,8 +2124,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();
@@ -2048,7 +2139,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)) {
@@ -2056,6 +2147,7 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
             startMarker: range.startMarker,
             primaryEl: range.primaryEl,
             extras: range.extras,
+            scopeComments: range.scopeComments,
             dispose: () => {},
             setItem: () => {}
           });
@@ -2074,7 +2166,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)
@@ -2106,7 +2198,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);
@@ -2145,7 +2237,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 {

package/dist/runtime/map-array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"map-array.d.ts","sourceRoot":"","sources":["../../src/runtime/map-array.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAqCH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,WAAW,EACtB,QAAQ,CAAC,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,CA+BhD;AA8DD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mCAAmC,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CA2B3E;AA2FD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,EACnD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,KAAK,WAAW,EACjF,QAAQ,CAAC,EAAE,MAAM,EACjB,IAAI,CAAC,EAAE,MAAM,GACZ,IAAI,CA6RN;AAqHD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,EACnD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,gBAAgB,GAAG,OAAO,EAC5F,QAAQ,CAAC,EAAE,MAAM,EACjB,IAAI,CAAC,EAAE,MAAM,GACZ,IAAI,CA+FN"}
+{"version":3,"file":"map-array.d.ts","sourceRoot":"","sources":["../../src/runtime/map-array.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAkEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,WAAW,EACtB,QAAQ,CAAC,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAAC,GAAG,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,CA+BhD;AAyHD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mCAAmC,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CA2B3E;AA4GD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,EACnD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,KAAK,WAAW,EACjF,QAAQ,CAAC,EAAE,MAAM,EACjB,IAAI,CAAC,EAAE,MAAM,GACZ,IAAI,CAuSN;AAqHD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,EACnD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,gBAAgB,GAAG,OAAO,EAC5F,QAAQ,CAAC,EAAE,MAAM,EACjB,IAAI,CAAC,EAAE,MAAM,GACZ,IAAI,CA+FN"}

package/dist/runtime/qsa-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"qsa-item.d.ts","sourceRoot":"","sources":["../../src/runtime/qsa-item.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AA4CH;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAQnF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,WAAW,GAAG,IAAI,CAuBpB"}
+{"version":3,"file":"qsa-item.d.ts","sourceRoot":"","sources":["../../src/runtime/qsa-item.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AA4CH;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAQnF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,WAAW,GAAG,IAAI,CAyBpB"}

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

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/runtime/registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAaxC;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAclE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEjE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,OAAO,GAAG,IAAI,EAC1B,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GAClC,IAAI,CAoCN;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,WAAW,GAAG,IAAI,CAgCpB"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/runtime/registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAaxC;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAclE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEjE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,OAAO,GAAG,IAAI,EAC1B,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GAClC,IAAI,CAoCN;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,WAAW,GAAG,IAAI,CAmCpB"}