@barefootjs/client 0.21.3 → 0.21.4

package/dist/runtime/index.js

@@ -656,6 +656,21 @@ function isInsideNestedCommentScope(element, scope) {
   }
   return false;
 }
+function isInsideNestedChildScope(element, root) {
+  let current = element;
+  while (current !== root) {
+    const parent = current.parentNode;
+    if (!parent)
+      return false;
+    if (parent !== root && parent.nodeType === Node.ELEMENT_NODE && parent.hasAttribute(BF_SCOPE)) {
+      return true;
+    }
+    if (isTopLevelCommentScopeNode(current))
+      return true;
+    current = parent;
+  }
+  return false;
+}
 function isTopLevelCommentScopeNode(node) {
   const parent = node.parentNode;
   if (!parent)
@@ -760,7 +775,14 @@ function qsa(el, selector) {
   }
   if (el.matches(selector))
     return el;
-  return el.querySelector(selector);
+  const first = el.querySelector(selector);
+  if (!first || !isInsideNestedChildScope(first, el))
+    return first;
+  for (const candidate of el.querySelectorAll(selector)) {
+    if (candidate !== first && !isInsideNestedChildScope(candidate, el))
+      return candidate;
+  }
+  return null;
 }
 function splitTopLevelCommas(selector) {
   const out = [];

package/dist/runtime/query.d.ts

@@ -61,6 +61,12 @@ export declare function findCondTarget(scope: Element, selector: string): Elemen
  * then its descendants. Unlike querySelector() which only searches descendants,
  * this also matches the root element.
  *
+ * Descendant candidates that fall inside a nested child component's own
+ * scope are skipped (`isInsideNestedChildScope`) — compiler slot IDs
+ * (`bf="sN"`) are assigned independently per component file, so a slot
+ * number can coincidentally collide between `el`'s own template and a
+ * child component mounted somewhere inside it (#2316).
+ *
  * Used by compiler-generated code for event binding and attribute updates
  * on loop items where the target may be the loop item's root element itself.
  */

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;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"}
+{"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;AA2ND;;;;;;;;;;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;;;;;;;;;;;;;GAaG;AACH,wBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAsCxE;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

@@ -1064,6 +1064,21 @@ function isInsideNestedCommentScope(element, scope) {
   }
   return false;
 }
+function isInsideNestedChildScope(element, root) {
+  let current = element;
+  while (current !== root) {
+    const parent = current.parentNode;
+    if (!parent)
+      return false;
+    if (parent !== root && parent.nodeType === Node.ELEMENT_NODE && parent.hasAttribute(BF_SCOPE)) {
+      return true;
+    }
+    if (isTopLevelCommentScopeNode(current))
+      return true;
+    current = parent;
+  }
+  return false;
+}
 function isTopLevelCommentScopeNode(node) {
   const parent = node.parentNode;
   if (!parent)
@@ -1168,7 +1183,14 @@ function qsa(el, selector) {
   }
   if (el.matches(selector))
     return el;
-  return el.querySelector(selector);
+  const first = el.querySelector(selector);
+  if (!first || !isInsideNestedChildScope(first, el))
+    return first;
+  for (const candidate of el.querySelectorAll(selector)) {
+    if (candidate !== first && !isInsideNestedChildScope(candidate, el))
+      return candidate;
+  }
+  return null;
 }
 function splitTopLevelCommas(selector) {
   const out = [];

package/package.json

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

package/src/runtime/query.ts

@@ -251,6 +251,48 @@ function isInsideNestedCommentScope(element: Element, scope: Element): boolean {
   return false
 }
 
+/**
+ * True if `element` sits inside a nested child component's own scope
+ * boundary somewhere on the path up to `root` — a plain `[bf-s]` element
+ * (a regular child component's root) or a fragment-rooted child's
+ * comment-scope range mounted as a sibling along that path.
+ *
+ * Generalizes `isInsideNestedCommentScope` (which only catches the
+ * comment-scope case) to also catch plain `bf-s` boundaries, for `qsa()`
+ * — the loose, unfiltered sibling of `find()`'s `belongsToScope`-gated
+ * search. Unlike `belongsToScope`, this walks up to `root` by object
+ * identity rather than requiring `root` itself to carry `bf-s`: `qsa()`'s
+ * roots include `insert()`'s whole-component branch scope (which does
+ * carry `bf-s`) but also loop-item template clones (which normally don't),
+ * so a `.closest('[bf-s]') === root` check can't be reused here.
+ *
+ * Without this, a slot number that happens to collide between a component
+ * and a nested child mounted earlier in its DOM (compiler slot IDs are
+ * assigned independently per component file, so collisions are expected)
+ * makes `qsa()` return the child's element instead of the component's own.
+ *
+ * Deliberately does NOT reject `element` itself for carrying `bf-s`
+ * (unlike `belongsToScope`'s own-scope check) — `qsa()` doubles as the
+ * lookup for a nested child component's *own* scope root (e.g. compiled
+ * `qsa(parentScope, '[bf-h="X"][bf-m="sN"], [bf-s$="_sN"]')` calls feeding
+ * `initChild()`), and that target legitimately carries `bf-s`. Only an
+ * *intermediate* `bf-s` between `element` and `root` — i.e. `element`
+ * nested inside some other, unrelated child scope — disqualifies it.
+ */
+function isInsideNestedChildScope(element: Element, root: Element): boolean {
+  let current: Node = element
+  while (current !== root) {
+    const parent: Node | null = current.parentNode
+    if (!parent) return false
+    if (parent !== root && parent.nodeType === Node.ELEMENT_NODE && (parent as Element).hasAttribute(BF_SCOPE)) {
+      return true
+    }
+    if (isTopLevelCommentScopeNode(current)) return true
+    current = parent
+  }
+  return false
+}
+
 /**
  * True if `node` falls inside a `<!--bf-scope:...-->` … `<!--bf-/scope:...-->`
  * range among its own siblings — i.e. `node` is (or is inside) a top-level
@@ -409,6 +451,12 @@ function findInPortals(scopeId: string, selector: string): Element | null {
  * then its descendants. Unlike querySelector() which only searches descendants,
  * this also matches the root element.
  *
+ * Descendant candidates that fall inside a nested child component's own
+ * scope are skipped (`isInsideNestedChildScope`) — compiler slot IDs
+ * (`bf="sN"`) are assigned independently per component file, so a slot
+ * number can coincidentally collide between `el`'s own template and a
+ * child component mounted somewhere inside it (#2316).
+ *
  * Used by compiler-generated code for event binding and attribute updates
  * on loop items where the target may be the loop item's root element itself.
  */
@@ -437,7 +485,19 @@ export function qsa(el: Element | null, selector: string): Element | null {
     return qsaChildScope(el, selector)
   }
   if (el.matches(selector)) return el
-  return el.querySelector(selector)
+
+  // Fast path: the overwhelmingly common case has no nested-child-scope
+  // collision, so a single querySelector() (matching the old behavior)
+  // resolves it without the cost of enumerating every match. Only fall
+  // back to the full querySelectorAll() scan — needed to skip past a
+  // rejected candidate to the next DOM-order match — when the first hit
+  // actually turns out to belong to a nested child scope.
+  const first = el.querySelector(selector)
+  if (!first || !isInsideNestedChildScope(first, el)) return first
+  for (const candidate of el.querySelectorAll(selector)) {
+    if (candidate !== first && !isInsideNestedChildScope(candidate, el)) return candidate
+  }
+  return null
 }
 
 /** Split a CSS selector list on top-level commas, ignoring commas inside