@barefootjs/client 0.29.0 → 0.30.2

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;AA2ND;;;;;;;;;;;;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,CAiDR;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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAG9D;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,gBAAgB,CAcjF"}
+{"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;AAyOD;;;;;;;;;;;;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,CAqER;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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAG9D;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,gBAAgB,CAcjF"}

package/dist/runtime/index.js

@@ -1412,12 +1412,13 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
   });
   const def = getRegisteredDef(name);
   const isCommentWrapper = def?.comment === true;
-  const scopeId = isCommentWrapper ? null : `${name}_${generateId()}`;
+  const derivedScopeId = slot?.parent && slot.mount ? `${slot.parent}_${slot.mount}` : null;
+  const scopeId = isCommentWrapper ? null : derivedScopeId ?? `${name}_${generateId()}`;
   const prevParentScopeId = _parentScopeId;
-  if (slot?.parent) {
-    _parentScopeId = slot.parent;
-  } else if (scopeId) {
+  if (scopeId) {
     _parentScopeId = scopeId;
+  } else if (slot?.parent) {
+    _parentScopeId = slot.parent;
   }
   let html;
   try {
@@ -1485,7 +1486,8 @@ function renderChild(name, props, key, slotSuffix) {
   if (!templateFn) {
     return `<div ${bfsAttr}${slotAttrs}${keyAttr}></div>`;
   }
-  let html = templateFn(props).trim().replace(PLACEHOLDER_ATTR_PATTERN, _parentScopeId ? ` bf-s="${_parentScopeId}"` : "");
+  const raw = templateFn(props);
+  let html = raw.trim().replace(PLACEHOLDER_ATTR_PATTERN, _parentScopeId ? ` bf-s="${_parentScopeId}"` : "");
   const firstElMatch = html.match(/<(\w+)/);
   if (!firstElMatch)
     return html;

package/dist/runtime/standalone.js

@@ -1818,12 +1818,13 @@ function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
   });
   const def = getRegisteredDef(name);
   const isCommentWrapper = def?.comment === true;
-  const scopeId = isCommentWrapper ? null : `${name}_${generateId()}`;
+  const derivedScopeId = slot?.parent && slot.mount ? `${slot.parent}_${slot.mount}` : null;
+  const scopeId = isCommentWrapper ? null : derivedScopeId ?? `${name}_${generateId()}`;
   const prevParentScopeId = _parentScopeId;
-  if (slot?.parent) {
-    _parentScopeId = slot.parent;
-  } else if (scopeId) {
+  if (scopeId) {
     _parentScopeId = scopeId;
+  } else if (slot?.parent) {
+    _parentScopeId = slot.parent;
   }
   let html;
   try {
@@ -1891,7 +1892,8 @@ function renderChild(name, props, key, slotSuffix) {
   if (!templateFn) {
     return `<div ${bfsAttr}${slotAttrs}${keyAttr}></div>`;
   }
-  let html = templateFn(props).trim().replace(PLACEHOLDER_ATTR_PATTERN, _parentScopeId ? ` bf-s="${_parentScopeId}"` : "");
+  const raw = templateFn(props);
+  let html = raw.trim().replace(PLACEHOLDER_ATTR_PATTERN, _parentScopeId ? ` bf-s="${_parentScopeId}"` : "");
   const firstElMatch = html.match(/<(\w+)/);
   if (!firstElMatch)
     return html;

package/package.json

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

package/src/runtime/component.ts

@@ -235,9 +235,18 @@ function materializeComponent(
   // already the inner component's root with its own bf-s. Don't overwrite
   // it (scopeId stays null), or `$c(__scope, 's0')` from the wrapper's
   // init resolves to null.
+  //
+  // `slot` is only supplied by `upsertChild` / `upsertChildItem` mounting a
+  // component nested below a loop row root — the SSR reference (Hono)
+  // derives that child's `bf-s` from `${hostScope}_${mountSlot}` rather
+  // than randomizing it (#2444), so CSR must match or the primary
+  // `(bf-h, bf-m)` SSR-scope lookup never finds the CSR-created element.
+  // A row root itself is never passed a `slot`, so it keeps its own
+  // random id, matching the reference behaviour.
   const def = getRegisteredDef(name)
   const isCommentWrapper = def?.comment === true
-  const scopeId = isCommentWrapper ? null : `${name}_${generateId()}`
+  const derivedScopeId = slot?.parent && slot.mount ? `${slot.parent}_${slot.mount}` : null
+  const scopeId = isCommentWrapper ? null : (derivedScopeId ?? `${name}_${generateId()}`)
 
   // 5. Generate HTML from props.
   //
@@ -246,13 +255,18 @@ function materializeComponent(
   // bf-m on child components — matching the SSR convention so a later
   // `$c(scope, 'sN')` lookup resolves them. Without this, CSR-created
   // children carry a random prefix and their event handlers never wire
-  // up (#1627). `slot.parent` takes precedence so hoisted-children
-  // placeholders (#1320) still resolve to the calling site's scope.
+  // up (#1627). `scopeId` takes precedence over `slot.parent` — once a
+  // slotted component derives its OWN scope id (above), that derived id
+  // is what ITS children must nest under, not the grandparent's `slot.parent`
+  // (that used to collapse a third composition level back onto the second,
+  // #2444's `grandchild-composition` case). A comment wrapper keeps
+  // `scopeId === null` and falls through to `slot?.parent`, preserving the
+  // hoisted-children placeholder resolution (#1320).
   const prevParentScopeId = _parentScopeId
-  if (slot?.parent) {
-    _parentScopeId = slot.parent
-  } else if (scopeId) {
+  if (scopeId) {
     _parentScopeId = scopeId
+  } else if (slot?.parent) {
+    _parentScopeId = slot.parent
   }
   let html: string
   try {
@@ -416,11 +430,31 @@ export function renderChild(
     return `<div ${bfsAttr}${slotAttrs}${keyAttr}></div>`
   }
 
+  // NOTE: does NOT push `_parentScopeId` to this child's own derived scope
+  // while `templateFn` evaluates. That was tried (deriving a GRANDCHILD's
+  // scope from this scope rather than the caller's, to fix a third
+  // composition level collapsing onto the second — `grandchild-composition`)
+  // but it collides with `comment: true` wrapper transparency (#1211
+  // synthesized inline-JSX-callback wrappers, e.g. a `renderNode` callback
+  // prop): such a wrapper's OWN scope element IS its single child's element,
+  // and its init resolves itself via `$c(scope, 's0')`'s short-suffix
+  // self-match fallback (`query.ts`'s `$cSingle`). Pushing this scope makes
+  // a nested descendant of that SAME child derive `..._s0_s0` whenever the
+  // descendant's own first slot id also happens to be `s0` — the PRECISE
+  // suffix match then finds that unrelated descendant instead of falling
+  // through to the self-match, silently misrouting `initChild` (confirmed
+  // via `site/ui`'s xyflow Highlight-Depth demo, where this broke the
+  // `--node-glow` style effect). `grandchild-composition` stays a known
+  // limitation (CSR conformance skip) until the self-match lookup can be
+  // made unambiguous against a nested descendant sharing the same slot
+  // suffix.
+  const raw = templateFn(props)
+
   // The placeholder substitution is anchored to the exact `bf-s="…"`
   // shape so user content that contains the sentinel as text survives
   // unchanged. When `_parentScopeId` is null (top-level render) the
   // attribute strips rather than emitting `bf-s=""`. (#1320)
-  let html = templateFn(props).trim().replace(
+  let html = raw.trim().replace(
     PLACEHOLDER_ATTR_PATTERN,
     _parentScopeId ? ` bf-s="${_parentScopeId}"` : '',
   )