@barefootjs/client 0.21.2 → 0.21.3

package/dist/runtime/index.js

@@ -712,6 +712,20 @@ function find(scope, selector, ignoreScope) {
     return findInPortals(scopeId, selector);
   return null;
 }
+function findCondTarget(scope, selector) {
+  const commentInfo = commentScopeRegistry.get(scope);
+  if (!commentInfo) {
+    return scope.querySelector(selector);
+  }
+  for (const candidate of candidatesInScope(scope, selector)) {
+    if (candidate.parentElement === commentInfo.commentNode.parentElement)
+      return candidate;
+    const nearestScope = candidate.closest(`[${BF_SCOPE}]`);
+    if (!nearestScope || !isInCommentScopeRange(nearestScope, commentInfo.commentNode))
+      return candidate;
+  }
+  return null;
+}
 function findInPortals(scopeId, selector) {
   const portals = document.querySelectorAll(`[${BF_PORTAL_OWNER}="${scopeId}"]`);
   for (const portal of portals) {
@@ -2531,7 +2545,7 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse, bfId) {
 }
 function autoFocusConditionalElement(region, id) {
   requestAnimationFrame(() => {
-    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
+    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`);
     if (condEl) {
       const autofocusEl = condEl.matches("[autofocus]") ? condEl : condEl.querySelector("[autofocus]");
       if (autofocusEl && typeof autofocusEl.focus === "function") {
@@ -2572,15 +2586,14 @@ function updateFragmentConditional(region, id, result) {
   if (region.anchor) {
     startComment = findCondStartInRange(region.anchor, id);
   } else {
-    const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
-    while (walker.nextNode()) {
-      if (walker.currentNode.nodeValue === startMarker) {
-        startComment = walker.currentNode;
+    for (const comment of commentsInScope(scope)) {
+      if (comment.nodeValue === startMarker) {
+        startComment = comment;
         break;
       }
     }
   }
-  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : scope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(scope, `[${BF_COND}="${id}"]`);
   const endMarker = `bf-cond-end:${id}`;
   if (startComment) {
     const nodesToRemove = [];
@@ -2620,7 +2633,7 @@ function updateFragmentConditional(region, id, result) {
   }
 }
 function updateElementConditional(region, id, result) {
-  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`);
   if (!condEl)
     return;
   const { html, slots } = result;

package/dist/runtime/query.d.ts

@@ -30,6 +30,32 @@ export declare function findScope(name: string, idx: number, parent: Element | D
  * @returns The matching element or null
  */
 export declare function find(scope: Element | null, selector: string, ignoreScope?: boolean): Element | null;
+/**
+ * Find a conditional's own target (a `bf-c="id"` element, for `insert.ts`)
+ * within `scope`'s content range.
+ *
+ * Deliberately narrower than `find()`: for a regular (non-comment) scope,
+ * this is a **plain, unfiltered** `scope.querySelector(selector)` — not
+ * `find()`'s `belongsToScope`-gated search. `belongsToScope` accepts a
+ * candidate only if `candidate.closest('[bf-s]')` is *exactly* `scope` —
+ * which can never hold when `scope` itself carries no `bf-s`. That's the
+ * common case for `insert()`'s `region.bindScope`: a `mapArray` loop item's
+ * cloned template root (e.g. a `.comment-item` `<div>`) is keyed by
+ * `data-key` for reconciliation, not given its own `bf-s`, so any `bf-c`
+ * conditional inside that item would be rejected outright by
+ * `belongsToScope` — not because of any nested-child-scope subtlety, just
+ * because `scope` itself isn't `bf-s`-addressable. Using `find()` here
+ * previously broke exactly that shape (piconic-ai/barefootjs#2313's first
+ * attempt, caught by the `site/ui` e2e suite's `SocialThreadDemo`
+ * comment-editing test — a per-comment `editing` conditional inside a
+ * `sortedComments().map(...)` loop item with no `bf-s` of its own).
+ *
+ * A comment-scope proxy (fragment-root component) still gets the
+ * comment-range-bounded, nested-fragment-excluding search — the same rule
+ * `find()`'s comment branch uses — since that IS what's needed to walk past
+ * a fragment-root's own top-level siblings correctly (#2312).
+ */
+export declare function findCondTarget(scope: Element, selector: string): Element | null;
 /**
  * Find an element matching a selector, checking the element itself first,
  * then its descendants. Unlike querySelector() which only searches descendants,
@@ -98,6 +124,22 @@ export declare function $c(scope: Element | null, ...ids: string[]): (Element |
  * walker-owned root fragments.
  */
 export declare function findCommentChildScope(scope: Element, parentIds: readonly string[], slotId: string): Element | null;
+/**
+ * Enumerate comment nodes in a scope's DOM range: the comment-scope
+ * sibling range for comment-anchored scopes, the element subtree
+ * otherwise. Mirrors candidatesInScope's notion of "where the scope's
+ * content lives", but yields comments instead of elements.
+ *
+ * Exported for `insert.ts`'s branch-swap path (`updateFragmentConditional`),
+ * which otherwise walked `scope`'s own descendants with a bare
+ * `document.createTreeWalker` — never finding a conditional's
+ * `bf-cond-start:`/`bf-cond-end:` markers when they sit as a *sibling* of
+ * the scope's comment-scope proxy rather than nested inside it (true for
+ * any fragment-root component's own top-level conditional, since the proxy
+ * is one specific top-level element and the conditional's markers may be
+ * others). See piconic-ai/sora's `ListSidebar` for the real-world repro.
+ */
+export declare function commentsInScope(scope: Element): Generator<Comment>;
 /**
  * Find Text nodes for reactive text expressions marked by comment nodes.
  * Expects marker format: <!--bf:sX-->text<!--/-->

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

@@ -1 +1 @@
-{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../src/runtime/query.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,sFAAsF;AACtF,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAGJ,CAAA;AAqCnC;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,EACjC,OAAO,CAAC,EAAE,OAAO,GAChB,OAAO,GAAG,IAAI,CAoDhB;AAiLD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAClB,KAAK,EAAE,OAAO,GAAG,IAAI,EACrB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,OAAO,GACpB,OAAO,GAAG,IAAI,CAiChB;AAuBD;;;;;;;GAOG;AACH,wBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CA0BxE;AA+CD;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAU9E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE,CAO1E;AAED;;;;;;;;GAQG;AACH,wBAAgB,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAO7E;AAED;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAE9E;AAkDD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,MAAM,EAAE,MAAM,GACb,OAAO,GAAG,IAAI,CAehB;AAmFD;;;;;;;GAOG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAkC3E;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAS3D;AAED,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,CAAA"}
+{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../src/runtime/query.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,sFAAsF;AACtF,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAGJ,CAAA;AAqCnC;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,EACjC,OAAO,CAAC,EAAE,OAAO,GAChB,OAAO,GAAG,IAAI,CAoDhB;AAiLD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAClB,KAAK,EAAE,OAAO,GAAG,IAAI,EACrB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,OAAO,GACpB,OAAO,GAAG,IAAI,CAiChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAW/E;AAuBD;;;;;;;GAOG;AACH,wBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CA0BxE;AA+CD;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAU9E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE,CAO1E;AAED;;;;;;;;GAQG;AACH,wBAAgB,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAO7E;AAED;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAE9E;AAkDD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,MAAM,EAAE,MAAM,GACb,OAAO,GAAG,IAAI,CAehB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAiB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAkBnE;AAyDD;;;;;;;GAOG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAkC3E;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAS3D;AAED,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,CAAA"}

package/dist/runtime/standalone.js

@@ -1120,6 +1120,20 @@ function find(scope, selector, ignoreScope) {
     return findInPortals(scopeId, selector);
   return null;
 }
+function findCondTarget(scope, selector) {
+  const commentInfo = commentScopeRegistry.get(scope);
+  if (!commentInfo) {
+    return scope.querySelector(selector);
+  }
+  for (const candidate of candidatesInScope(scope, selector)) {
+    if (candidate.parentElement === commentInfo.commentNode.parentElement)
+      return candidate;
+    const nearestScope = candidate.closest(`[${BF_SCOPE}]`);
+    if (!nearestScope || !isInCommentScopeRange(nearestScope, commentInfo.commentNode))
+      return candidate;
+  }
+  return null;
+}
 function findInPortals(scopeId, selector) {
   const portals = document.querySelectorAll(`[${BF_PORTAL_OWNER}="${scopeId}"]`);
   for (const portal of portals) {
@@ -2932,7 +2946,7 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse, bfId) {
 }
 function autoFocusConditionalElement(region, id) {
   requestAnimationFrame(() => {
-    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
+    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`);
     if (condEl) {
       const autofocusEl = condEl.matches("[autofocus]") ? condEl : condEl.querySelector("[autofocus]");
       if (autofocusEl && typeof autofocusEl.focus === "function") {
@@ -2973,15 +2987,14 @@ function updateFragmentConditional(region, id, result) {
   if (region.anchor) {
     startComment = findCondStartInRange(region.anchor, id);
   } else {
-    const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
-    while (walker.nextNode()) {
-      if (walker.currentNode.nodeValue === startMarker) {
-        startComment = walker.currentNode;
+    for (const comment of commentsInScope(scope)) {
+      if (comment.nodeValue === startMarker) {
+        startComment = comment;
         break;
       }
     }
   }
-  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : scope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(scope, `[${BF_COND}="${id}"]`);
   const endMarker = `bf-cond-end:${id}`;
   if (startComment) {
     const nodesToRemove = [];
@@ -3021,7 +3034,7 @@ function updateFragmentConditional(region, id, result) {
   }
 }
 function updateElementConditional(region, id, result) {
-  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`);
   if (!condEl)
     return;
   const { html, slots } = result;

package/package.json

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

package/src/runtime/insert.ts

@@ -7,7 +7,7 @@
  */
 
 import { createEffect, untrack } from '@barefootjs/client/reactive'
-import { find } from './query.ts'
+import { find, findCondTarget, commentsInScope } from './query.ts'
 import { setParentScopeId, parseHTML } from './component.ts'
 import { commentScopeRegistry, getCommentScopeBoundary } from './scope.ts'
 import { BF_COND, BF_SCOPE, BF_LOOP_ITEM } from '@barefootjs/shared'
@@ -342,7 +342,7 @@ function autoFocusConditionalElement(region: CondRegion, id: string): void {
   requestAnimationFrame(() => {
     const condEl = region.anchor
       ? findCondElInRange(region.anchor, id)
-      : region.bindScope.querySelector(`[${BF_COND}="${id}"]`)
+      : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`)
     if (condEl) {
       const autofocusEl = condEl.matches('[autofocus]')
         ? condEl
@@ -406,10 +406,15 @@ function updateFragmentConditional(region: CondRegion, id: string, result: Branc
   if (region.anchor) {
     startComment = findCondStartInRange(region.anchor, id)
   } else {
-    const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT)
-    while (walker.nextNode()) {
-      if (walker.currentNode.nodeValue === startMarker) {
-        startComment = walker.currentNode as Comment
+    // commentsInScope is comment-scope-aware: for a fragment-root
+    // component's scope (a comment-scope proxy element), it walks the
+    // proxy's *sibling* range rather than only `scope`'s own descendants —
+    // required when this conditional's markers are themselves a top-level
+    // sibling of the proxy, not nested inside it (a bare TreeWalker(scope)
+    // never finds them, silently freezing the branch after first render).
+    for (const comment of commentsInScope(scope)) {
+      if (comment.nodeValue === startMarker) {
+        startComment = comment
         break
       }
     }
@@ -417,7 +422,7 @@ function updateFragmentConditional(region: CondRegion, id: string, result: Branc
 
   const condEl = region.anchor
     ? findCondElInRange(region.anchor, id)
-    : scope.querySelector(`[${BF_COND}="${id}"]`)
+    : findCondTarget(scope, `[${BF_COND}="${id}"]`)
 
   const endMarker = `bf-cond-end:${id}`
 
@@ -486,9 +491,15 @@ function updateFragmentConditional(region: CondRegion, id: string, result: Branc
  * Update element conditional (single element with bf-c)
  */
 function updateElementConditional(region: CondRegion, id: string, result: BranchTemplateResult): void {
+  // findCondTarget, not find(): for a comment-scope proxy it resolves a
+  // top-level sibling conditional the same way first hydration does, but
+  // for a regular scope it's a plain scope.querySelector(...) — not
+  // find()'s belongsToScope-gated search, which requires scope itself to
+  // carry bf-s (a mapArray loop item's cloned root usually doesn't; see
+  // findCondTarget's doc comment in query.ts).
   const condEl = region.anchor
     ? findCondElInRange(region.anchor, id)
-    : region.bindScope.querySelector(`[${BF_COND}="${id}"]`)
+    : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`)
   if (!condEl) return
 
   const { html, slots } = result

package/src/runtime/query.ts

@@ -345,6 +345,44 @@ export function find(
   return null
 }
 
+/**
+ * Find a conditional's own target (a `bf-c="id"` element, for `insert.ts`)
+ * within `scope`'s content range.
+ *
+ * Deliberately narrower than `find()`: for a regular (non-comment) scope,
+ * this is a **plain, unfiltered** `scope.querySelector(selector)` — not
+ * `find()`'s `belongsToScope`-gated search. `belongsToScope` accepts a
+ * candidate only if `candidate.closest('[bf-s]')` is *exactly* `scope` —
+ * which can never hold when `scope` itself carries no `bf-s`. That's the
+ * common case for `insert()`'s `region.bindScope`: a `mapArray` loop item's
+ * cloned template root (e.g. a `.comment-item` `<div>`) is keyed by
+ * `data-key` for reconciliation, not given its own `bf-s`, so any `bf-c`
+ * conditional inside that item would be rejected outright by
+ * `belongsToScope` — not because of any nested-child-scope subtlety, just
+ * because `scope` itself isn't `bf-s`-addressable. Using `find()` here
+ * previously broke exactly that shape (piconic-ai/barefootjs#2313's first
+ * attempt, caught by the `site/ui` e2e suite's `SocialThreadDemo`
+ * comment-editing test — a per-comment `editing` conditional inside a
+ * `sortedComments().map(...)` loop item with no `bf-s` of its own).
+ *
+ * A comment-scope proxy (fragment-root component) still gets the
+ * comment-range-bounded, nested-fragment-excluding search — the same rule
+ * `find()`'s comment branch uses — since that IS what's needed to walk past
+ * a fragment-root's own top-level siblings correctly (#2312).
+ */
+export function findCondTarget(scope: Element, selector: string): Element | null {
+  const commentInfo = commentScopeRegistry.get(scope)
+  if (!commentInfo) {
+    return scope.querySelector(selector)
+  }
+  for (const candidate of candidatesInScope(scope, selector)) {
+    if (candidate.parentElement === commentInfo.commentNode.parentElement) return candidate
+    const nearestScope = candidate.closest(`[${BF_SCOPE}]`)
+    if (!nearestScope || !isInCommentScopeRange(nearestScope, commentInfo.commentNode)) return candidate
+  }
+  return null
+}
+
 /**
  * Search in portals owned by a scope.
  */
@@ -609,8 +647,17 @@ export function findCommentChildScope(
  * sibling range for comment-anchored scopes, the element subtree
  * otherwise. Mirrors candidatesInScope's notion of "where the scope's
  * content lives", but yields comments instead of elements.
+ *
+ * Exported for `insert.ts`'s branch-swap path (`updateFragmentConditional`),
+ * which otherwise walked `scope`'s own descendants with a bare
+ * `document.createTreeWalker` — never finding a conditional's
+ * `bf-cond-start:`/`bf-cond-end:` markers when they sit as a *sibling* of
+ * the scope's comment-scope proxy rather than nested inside it (true for
+ * any fragment-root component's own top-level conditional, since the proxy
+ * is one specific top-level element and the conditional's markers may be
+ * others). See piconic-ai/sora's `ListSidebar` for the real-world repro.
  */
-function* commentsInScope(scope: Element): Generator<Comment> {
+export function* commentsInScope(scope: Element): Generator<Comment> {
   const commentInfo = commentScopeRegistry.get(scope)
 
   if (commentInfo) {