@barefootjs/jsx 0.33.4 → 0.34.0

package/src/ir-to-client-js/html-template.ts

@@ -8,11 +8,12 @@ import { toHtmlAttrName, attrValueToString, quotePropName, PROPS_PARAM, DATA_BF_
 import type { LoopParamSpec } from './utils.ts'
 import { nameForRegistryRef } from './component-scope.ts'
 import { assertNever } from './walker.ts'
-import { buildSignalMemoEnv, csrSubstitute, applyPropsRewrite, type CsrEnv } from './csr-substitute.ts'
+import { buildSignalMemoEnv, csrSubstitute, type CsrEnv } from './csr-substitute.ts'
+import { rewritePropsObjectRef } from './rewrite-props-object.ts'
 import type { ClientJsContext } from './types.ts'
-import { BF_PARENT_SCOPE_PLACEHOLDER, BF_SCOPE, escapeHtml } from '@barefootjs/shared'
+import { BF_PARENT_SCOPE_PLACEHOLDER, BF_SCOPE, classifyDOMProp, escapeHtml } from '@barefootjs/shared'
 import { buildLoopChainExpr } from '../loop-chain.ts'
-import { derivesScopeFromSlot } from '../adapters/child-scope.ts'
+import { renderChildScopeArgs } from '../adapters/child-scope.ts'
 import { BindingScope } from '../scope/binding-scope.ts'
 
 /**
@@ -658,10 +659,11 @@ function buildSpreadAttrsMergeCall(args: {
  *    are wrapped with `__bfSlot(EXPR, <branchSlotsVar>)` so the runtime can
  *    splice live `Node` returns into the parsed fragment instead of
  *    stringifying them via the template literal (#1213).
- *  Component nodes omit their `slotId` from the `renderChild` call exactly
- *  when `derivesScopeFromSlot()` says so — a loop-item-root component (its
- *  own scope, identified by `data-key`) never derives from the parent slot;
- *  a component nested below the row root does (#2444). See
+ *  Component nodes always pass their `slotId` to `renderChild` (via
+ *  `renderChildScopeArgs`) — a loop-item-root component (its own scope,
+ *  identified by `data-key`) keeps `bf-h`/`bf-m` slot identity without
+ *  DERIVING its `bf-s` scope id from the parent slot (#2833); a component
+ *  nested below the row root derives from it as usual (#2444). See
  *  `IRComponent.loopItemRoot` / `./adapters/child-scope.ts`.
  */
 /**
@@ -1079,12 +1081,11 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: ReadonlySet<str
       const keyArg = keyProp ? `, ${attrValueToString(keyProp.value) ?? 'undefined'}` : ''
       // Pass slotId as suffix so $c() can find the child component by slot
       // after branch swap. A loop-item-root component owns a separate scope
-      // per iteration (identified by `data-key`), so the parent-slot suffix
-      // is dropped to avoid anchoring it to a wrong component-wrapper scope
-      // (#1268) — a component nested BELOW the row root still derives from
-      // its slot, matching the Hono reference (#2444).
-      const slotArg = derivesScopeFromSlot(node) ? `, '${node.slotId}'` : ''
-      return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${keyArg || (slotArg ? ', undefined' : '')}${slotArg})}`
+      // per iteration (identified by `data-key`) rather than deriving from
+      // the slot — `renderChildScopeArgs` still passes its slotId with the
+      // `loopItemRoot` flag (#2833) so it keeps `bf-h`/`bf-m` slot identity,
+      // matching the Hono reference (#2444).
+      return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${renderChildScopeArgs(node, keyArg)})}`
     }
 
     case 'loop': {
@@ -1230,6 +1231,21 @@ export function buildLoopSkeletonTemplate(node: IRNode, safe: LoopSkeletonSafeSl
           case 'template': {
             const attrKey = node.slotId ? `${node.slotId}::${a.name}` : null
             if (!attrKey || !safe.reactiveAttrKeys.has(attrKey)) return null
+            // #2756 (input sub-mechanism): "omit and let the effect's eager
+            // first run fill it in" only holds for attribute-reflected
+            // binds — the effect calls `setAttribute`, so a freshly-cloned
+            // row ends up byte-identical to an SSR-baked/hydrated one. A
+            // property-only bind (`value`/`checked`, `classifyDOMProp`)
+            // never does: `emitAttrUpdate`'s value/boolean-attr branches
+            // deliberately write only the DOM PROPERTY (#2716), never the
+            // attribute. SSR still bakes the attribute (`clientOnly` is
+            // false here — `clientOnly` binds, e.g. textarea/select's
+            // `value`, take neither path since SSR omits their attribute
+            // too, so omitting stays correct for them). Refuse the whole
+            // skeleton fast path instead of just this attribute; the
+            // caller falls back to `irToHtmlTemplate`, which already bakes
+            // this attribute correctly.
+            if (!a.clientOnly && classifyDOMProp(a.name).kind === 'property') return null
             // Covered by a loop-child createEffect — omit from the skeleton
             // entirely; the effect's eager first run fills it in.
             break
@@ -1628,34 +1644,52 @@ export function irToPlaceholderTemplate(node: IRNode, restSpreadNames?: Readonly
  * - IRConditional → ternary expression
  * - Single child → single expression; multiple → array literal
  */
-export function irChildrenToJsExpr(children: IRNode[]): string {
+export function irChildrenToJsExpr(children: IRNode[], brandMarkup = false): string {
   // Flatten fragments and filter empty text nodes
-  const exprs = children.flatMap(c => irNodeToJsExprs(c)).filter(Boolean)
+  const exprs = children.flatMap(c => irNodeToJsExprs(c, brandMarkup)).filter(Boolean)
   if (exprs.length === 0) return "''"
   if (exprs.length === 1) return exprs[0]
   return `[${exprs.join(', ')}]`
 }
 
 /**
- * Narrow gate for branding a nested `jsx-children` getter's value with
- * `bfMarkup()` (#2651) — the `irNodeToJsExprs` counterpart of
- * `collect-elements.ts`'s `isSingleElementJsxChildren` (duplicated rather
- * than imported: `collect-elements.ts` already imports FROM this file, so
- * the reverse import would cycle). Same shape, same reasoning: a
- * `jsx-children` prop's value is always a single stored node
- * (`AttrValueOf.jsxChildren([...])`); only when that node is a lone
- * `'element'` does `irChildrenToJsExpr` reduce it to ONE HTML-string
- * template literal — the shape `bfMarkup` + `escapeTextOrNode` /
- * `escapeTextOrMarkup` have a proven contract for. A `'fragment'` (multiple
- * children) or `'conditional'` node reduces to an array literal or a
- * nested ternary instead — left unbranded here for the same reason as the
- * `collect-elements.ts` twin.
+ * Build the getter-body expression for a `jsx-children` prop value —
+ * `collect-elements.ts`'s `buildComponentPropsExpr` and this file's
+ * `irNodeToJsExprs` 'component' case both hand a child component this exact
+ * value through `get <propName>() { return <expr> }`. The ONE place that
+ * decides whether (and how) to brand it with `bfMarkup()` (#2651, #2702).
+ *
+ * `children` itself is never branded — its consumer is a bare
+ * `{children}` passthrough interpolation with no unwrap call, so a branded
+ * object there would stringify to `[object Object]`.
+ *
+ * Otherwise, brand every `'element'` LEAF (`irNodeToJsExprs(..., true)`),
+ * not the whole assembled value: `escapeTextOrNode`/`escapeTextOrMarkup`
+ * (`@barefootjs/client/runtime`) unwrap a `bfMarkup()`-branded STRING, so a
+ * lone element (`header={<strong/>}`), a fragment wrapping one (`header={<>
+ * <strong/></>}`), and a conditional/nested-conditional between elements
+ * (`header={<>{cond ? <a/> : <b/>}</>}`, #2702) all reduce, after flattening,
+ * to exactly ONE branded expression — brand-at-the-leaf makes this sound
+ * even when a branch is plain text or an arbitrary expression
+ * (`cond ? <a/> : label()`): `irNodeToJsExprs`'s 'text'/'expression' cases
+ * never brand, so `label()` still reaches `escapeTextOrNode` unescaped-HTML-free
+ * and gets escaped normally, while the `<a/>` branch is trusted.
+ *
+ * A multi-child fragment (`header={<>text<strong/></>}`) flattens to MORE
+ * than one expression — an array, per `irChildrenToJsExpr`'s own contract —
+ * and neither runtime unwrapper has an array contract, so that shape stays
+ * exactly as it rendered before this function existed: unbranded, via the
+ * plain (unbranded) `irChildrenToJsExpr` call below. This is a pre-existing,
+ * separate gap (tracked apart from #2702), not something this function
+ * silently "fixes" by guessing at a new consumer contract.
  */
-function isSingleElementJsxChildren(nodes: IRNode[]): boolean {
-  return nodes.length === 1 && nodes[0].type === 'element'
+export function jsxChildrenPropGetterExpr(children: IRNode[], propName: string): string {
+  if (propName === 'children') return irChildrenToJsExpr(children)
+  const brandedExprs = children.flatMap(c => irNodeToJsExprs(c, true)).filter(Boolean)
+  return brandedExprs.length === 1 ? brandedExprs[0] : irChildrenToJsExpr(children)
 }
 
-function irNodeToJsExprs(node: IRNode): string[] {
+function irNodeToJsExprs(node: IRNode, brandMarkup = false): string[] {
   switch (node.type) {
     case 'component': {
       const propsEntries: string[] = node.props
@@ -1666,17 +1700,10 @@ function irNodeToJsExprs(node: IRNode): string[] {
           }
           switch (p.value.kind) {
             case 'jsx-children': {
-              // Brand (#2651) only the lone-'element' shape, and never an
-              // explicit `children={<jsx/>}` prop — see
-              // `isSingleElementJsxChildren` (this file) for the shape
-              // argument and the `collect-elements.ts` twin for the
-              // `children`-exclusion argument (bare-passthrough consumer,
-              // no unwrap call).
-              const jsxExpr = irChildrenToJsExpr(p.value.children)
-              const wrapped = (p.name !== 'children' && isSingleElementJsxChildren(p.value.children))
-                ? `bfMarkup(${jsxExpr})`
-                : jsxExpr
-              return `get ${quotePropName(p.name)}() { return ${wrapped} }`
+              // Brand (#2651/#2702) via the shared door — see
+              // `jsxChildrenPropGetterExpr`'s docstring.
+              const jsxExpr = jsxChildrenPropGetterExpr(p.value.children, p.name)
+              return `get ${quotePropName(p.name)}() { return ${jsxExpr} }`
             }
             case 'literal':
               return `get ${quotePropName(p.name)}() { return ${JSON.stringify(p.value.value)} }`
@@ -1707,14 +1734,16 @@ function irNodeToJsExprs(node: IRNode): string[] {
       if (!node.value.trim()) return []
       return [JSON.stringify(node.value)]
 
-    case 'element':
-      return [`\`${irToHtmlTemplate(node)}\``]
+    case 'element': {
+      const html = `\`${irToHtmlTemplate(node)}\``
+      return [brandMarkup ? `bfMarkup(${html})` : html]
+    }
 
     case 'fragment':
-      return node.children.flatMap(c => irNodeToJsExprs(c))
+      return node.children.flatMap(c => irNodeToJsExprs(c, brandMarkup))
 
     case 'conditional':
-      return [`${node.condition} ? ${irChildrenToJsExpr([node.whenTrue])} : ${irChildrenToJsExpr([node.whenFalse])}`]
+      return [`${node.condition} ? ${irChildrenToJsExpr([node.whenTrue], brandMarkup)} : ${irChildrenToJsExpr([node.whenFalse], brandMarkup)}`]
 
     // The kinds below previously fell through to `default: return []` and so
     // were silently dropped when used as a component child. The explicit
@@ -1771,6 +1800,21 @@ export interface TemplateOptions {
   inlinableConstants?: Map<string, string>
   restSpreadNames?: ReadonlySet<string>
   propsObjectName?: string | null
+  /**
+   * The rest-bag binding's source name (`ctx.restPropsName` — `'rest'` in
+   * `{ children, ...rest }`), threaded alongside `propsObjectName` into
+   * `rewritePropsObjectRef` so a component that reads the rest binding
+   * directly in its own body (`{rest.header}`, not just spread onto an
+   * element via `applyRestAttrs`) resolves to `_p` here too (#2806).
+   * Not folded into `restSpreadNames`: that set is spread-filter
+   * membership keyed by raw expression text (`isFilteredSpread`,
+   * `collect-elements.ts`'s exclude-key resolution) and must keep seeing
+   * the untouched name; this field is the separate "identifier to rewrite"
+   * input `rewritePropsObjectRef` already accepts for the init body
+   * (`generate-init.ts`) — the four template builders below were the only
+   * callers still passing `null` for it.
+   */
+  restPropsName?: string | null
   /**
    * Names that exist only in the init-body scope (or were demoted to unsafe
    * during chained-ref resolution). The CSR template runs at module scope
@@ -1862,13 +1906,14 @@ export function irToComponentTemplate(
   inlinableConstants?: Map<string, string>,
   restSpreadNames?: ReadonlySet<string>,
   propsObjectName?: string | null,
-  markupSlotIds?: ReadonlySet<string>
+  markupSlotIds?: ReadonlySet<string>,
+  restPropsName?: string | null
 ): string {
-  return irToComponentTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, loopDepth: -1, markupSlotIds })
+  return irToComponentTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, loopDepth: -1, markupSlotIds, restPropsName })
 }
 
 function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): string {
-  const { inlinableConstants, restSpreadNames, propsObjectName, loopDepth = 0 } = opts
+  const { inlinableConstants, restSpreadNames, propsObjectName, restPropsName, loopDepth = 0 } = opts
   // `recurse` preserves `inHoistedChildren` for structural pass-through
   // (fragment / conditional); `childrenRecurse` clears it so element
   // descendants don't re-emit the placeholder. (#1320)
@@ -1889,15 +1934,31 @@ function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): str
       }
     }
 
-    // Normalize source-level props object access (e.g., props.xxx → _p.xxx)
-    if (propsObjectName && propsObjectName !== PROPS_PARAM) {
-      result = result.replace(
-        new RegExp(`\\b${propsObjectName}\\.`, 'g'),
-        `${PROPS_PARAM}.`,
-      )
-    }
-
-    return restore(result)
+    // Normalize source-level props object access (e.g., props.xxx → _p.xxx).
+    // Restore FIRST: `rewritePropsObjectRef` parses `result` as real
+    // TypeScript, and a still-protected string/template-literal span would
+    // parse as an opaque placeholder token instead of the source text it
+    // stands for (harmless for the placeholder itself, but it must not be
+    // mistaken for unparsed leftover input by a caller reading `result`
+    // before this point). Regex-based `\b${propsObjectName}\.` (removed
+    // here) required the name to be immediately followed by `.`, so a
+    // parenthesised receiver — `(props).label`, produced by this same
+    // function's own constant-inlining step just above when the inlined
+    // value is itself `props` (a local alias of the whole props object) —
+    // silently kept the pre-rewrite name instead of `_p`.
+    //
+    // The gate stays keyed on `propsObjectName` for the destructured-prop
+    // case (unconditionally rewriting here would also change static-path
+    // output for components with neither a props object nor a rest binding
+    // — a separate alignment, not this fix) but widens to fire when only
+    // a rest binding exists (`{ children, ...rest }` with no whole-props
+    // param), so `rest.header` resolves to `_p.header` here the same way
+    // it already does in the init body (`generate-init.ts`, #2723) instead
+    // of reaching the template as a bare, undeclared `rest` (#2806).
+    const restored = restore(result)
+    return (propsObjectName && propsObjectName !== PROPS_PARAM) || restPropsName
+      ? rewritePropsObjectRef(restored, propsObjectName ?? null, restPropsName ?? null, { enclosingScope: opts.scope })
+      : restored
   }
 
   switch (node.type) {
@@ -2274,8 +2335,11 @@ export function generateCsrTemplate(
   // Build the substitution env once per component. Signals + memos come
   // from `buildSignalMemoEnv`; inlinable constants layer in here so
   // each call to `transformExpr` is a pure AST projection over the
-  // shared env (no per-call Map cloning).
-  const base = buildSignalMemoEnv(ctx.signals, ctx.memos, propsObjectName ?? null)
+  // shared env (no per-call Map cloning). `ctx.localConstants` lets
+  // `buildSignalMemoEnv` also resolve a bare getter-alias chain
+  // (`const items__alias = items`, #2778) to the same call-kind entry
+  // its origin has.
+  const base = buildSignalMemoEnv(ctx.signals, ctx.memos, propsObjectName ?? null, ctx.localConstants)
   const csrEnv: CsrEnv = { substitutions: new Map(base.substitutions), propsObjectName: base.propsObjectName }
   if (inlinableConstants) {
     for (const [name, value] of inlinableConstants) {
@@ -2292,7 +2356,7 @@ export function generateCsrTemplate(
   // by construction (`collectElements`'s `expression` visitor only pushes
   // here). Reused as-is, not re-derived.
   const markupSlotIds = new Set(ctx.dynamicElements.map(e => e.slotId))
-  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames: effectiveUnsafeLocalNames, deferredChildSlots, loopDepth: -1, markupSlotIds })
+  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames: effectiveUnsafeLocalNames, deferredChildSlots, loopDepth: -1, markupSlotIds, restPropsName: ctx.restPropsName })
 }
 
 /**
@@ -2369,7 +2433,7 @@ function buildCsrEnvForCtx(
   inlinableConstants: Map<string, string> | undefined,
   propsObjectName?: string | null,
 ): CsrEnv {
-  const base = buildSignalMemoEnv(ctx.signals, ctx.memos, propsObjectName ?? null)
+  const base = buildSignalMemoEnv(ctx.signals, ctx.memos, propsObjectName ?? null, ctx.localConstants)
   const csrEnv: CsrEnv = { substitutions: new Map(base.substitutions), propsObjectName: base.propsObjectName }
   if (inlinableConstants) {
     for (const [name, value] of inlinableConstants) {
@@ -2487,7 +2551,7 @@ export function computeDeferredChildSlots(
 }
 
 function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): string {
-  const { restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames, loopDepth = 0 } = opts
+  const { restSpreadNames, propsObjectName, restPropsName, csrEnv, unsafeLocalNames, loopDepth = 0 } = opts
   const env: CsrEnv = csrEnv ?? { substitutions: new Map(), propsObjectName: propsObjectName ?? null }
   const transformExpr = (expr: string, templateExpr?: string): string => {
     // Single AST substitution pass: replaces signal getter calls
@@ -2516,11 +2580,16 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
     if (unsafeLocalNames && unsafeLocalNames.size > 0 && setIntersects(freeIdentifiers, unsafeLocalNames)) {
       return UNSAFE_TEMPLATE_EXPR
     }
-    // Final emit-form: rewrite `propsName.X → _p.X`. Deferred until
-    // after the unsafe-name check because the check used raw form
+    // Final emit-form: rewrite `propsName.X → _p.X` (and a direct
+    // rest-bag read, `restName.X → _p.X` — the rest binding IS `_p` at
+    // runtime, same as the init body's `rewritePropsObjectRef` call and
+    // `applyRestAttrs`'s exclude-key filtering both already assume; a
+    // computed "props minus consumed keys" object here would be a second,
+    // divergent implementation of that same decision, #2806). Deferred
+    // until after the unsafe-name check because the check used raw form
     // (consistent with `populateCsrInlinable`'s `isInlinableInTemplate`
     // gate — #1138).
-    return applyPropsRewrite(rewritten, propsObjectName ?? null)
+    return rewritePropsObjectRef(rewritten, propsObjectName ?? null, restPropsName ?? null, { enclosingScope: opts.scope })
   }
 
   // `recurse` preserves `inHoistedChildren` for structural pass-through
@@ -2772,8 +2841,10 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
       const propsExpr = propsEntries.length > 0 ? `{${propsEntries.join(', ')}}` : '{}'
       const keyProp = node.props.find(p => p.name === 'key')
       const keyArg = keyProp ? `, ${transformKeyValue(keyProp.value, transformExpr)}` : ''
-      const slotArg = derivesScopeFromSlot(node) ? `, '${node.slotId}'` : ''
-      return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${keyArg || (slotArg ? ', undefined' : '')}${slotArg})}`
+      // See `renderChildScopeArgs`'s docstring — a loop item root still gets
+      // its slotId, plus the `loopItemRoot` flag (#2833), rather than no
+      // slot argument at all.
+      return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${renderChildScopeArgs(node, keyArg)})}`
     }
 
     case 'loop': {
@@ -2841,7 +2912,7 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
         // its own props context via recurseInLoopBody.
         const body = renderPreamble(node.flatMapCallback, {
           textVariant: 'template',
-          transformJs: (t) => applyPropsRewrite(t, propsObjectName ?? null),
+          transformJs: (t) => rewritePropsObjectRef(t, propsObjectName ?? null, restPropsName ?? null, { enclosingScope: childScope }),
           // Leaf `key` stripped — see the irToHtmlTemplate site above.
           renderLeaf: (ir) => recurseInLoopBody(stripLeafKeyAttr(ir)),
         })
@@ -2849,7 +2920,7 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
       } else if (node.preamble) {
         // Stage 3 / D4 — template-variant js text with the props rewrite
         // applied per segment; JSX leaves render via the loop-body recursion.
-        const preamble = renderPreamble(node.preamble, { textVariant: 'template', transformJs: (t) => applyPropsRewrite(t, propsObjectName ?? null), renderLeaf: (ir) => recurseInLoopBody(ir) })
+        const preamble = renderPreamble(node.preamble, { textVariant: 'template', transformJs: (t) => rewritePropsObjectRef(t, propsObjectName ?? null, restPropsName ?? null, { enclosingScope: childScope }), renderLeaf: (ir) => recurseInLoopBody(ir) })
         mapExpr = `\${${iterArrayExpr}.${iterMethod}(${callbackParam} => { ${preamble} return \`${childTemplate}\` }).join('')}`
       } else {
         mapExpr = `\${${iterArrayExpr}.${iterMethod}(${callbackParam} => \`${childTemplate}\`).join('')}`

package/src/ir-to-client-js/imports.ts

@@ -23,6 +23,10 @@ export const RUNTIME_IMPORT_CANDIDATES = [
   // falling through to the global store. The clone-root counterpart of the
   // mount point `createComponent` consumes for component-root rows.
   'mountRowRoot',
+  // Ambient parent-scope override for a static loop's materialize `forEach`
+  // (#2833) — that codepath runs during `init`, after the parent's own
+  // template evaluation (and its `_parentScopeId`) has already unwound.
+  'withParentScope',
   'createPortal',
   'provideContext', 'createContext', 'useContext',
   'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText', 'escapeTextOrNode',

package/src/ir-to-client-js/index.ts

@@ -18,7 +18,7 @@ import { canGenerateStaticTemplate, irToComponentTemplate, generateCsrTemplate }
 import { PROPS_PARAM } from './utils.ts'
 import { buildInlinableConstants, csrInlinableConstantsFromCtx } from './emit-registration.ts'
 import { buildEnvFromCtx } from './compute-inlinability.ts'
-import { nameForRegistryRef } from './component-scope.ts'
+import { nameForRegistryRef, buildImportAliasMap, setActiveImportAliases } from './component-scope.ts'
 import { resolveRestSpreadNames } from './prop-handling.ts'
 import { IMPORT_PLACEHOLDER, RUNTIME_MODULE, detectUsedImports, collectExternalImports } from './imports.ts'
 import { isInlinableInTemplate } from '../relocate.ts'
@@ -85,32 +85,43 @@ export function generateClientJsWithSourceMap(
   adapterCapabilities?: AdapterCapabilities,
   profile?: boolean,
 ): ClientJsResult {
-  const ctx = createContext(ir, scope, adapterCapabilities, profile)
-  const siblingOffsets = computeLoopSiblingOffsets(ir.root)
-  collectElements(ir.root, ctx, siblingOffsets)
+  // #2777 — installed for the whole body (not just via `compiler.ts`'s
+  // `setActiveComponentScope`) because this function is also called
+  // directly, bypassing `compiler.ts` entirely: the CSR-conformance
+  // harness (`csr-render.ts`) and `analyzeClientNeeds` both do. Cleared
+  // in `finally` so a thrown error never leaks the alias map into an
+  // unrelated later compile.
+  setActiveImportAliases(buildImportAliasMap(ir.metadata.imports))
+  try {
+    const ctx = createContext(ir, scope, adapterCapabilities, profile)
+    const siblingOffsets = computeLoopSiblingOffsets(ir.root)
+    collectElements(ir.root, ctx, siblingOffsets)
 
-  // Both `generateTemplateOnlyMount` and `generateInitFunction` run inline
-  // analysis passes (buildInlinableConstants → computeInlinability) that
-  // can add to `ctx.warnings` — most notably the BF060/BF061 stage-violation
-  // diagnostics. Flush warnings to `ir.errors` AFTER those passes so the
-  // diagnostics survive to the caller.
-  if (!needsClientJs(ctx)) {
-    const code = generateTemplateOnlyMount(ir, ctx)
+    // Both `generateTemplateOnlyMount` and `generateInitFunction` run inline
+    // analysis passes (buildInlinableConstants → computeInlinability) that
+    // can add to `ctx.warnings` — most notably the BF060/BF061 stage-violation
+    // diagnostics. Flush warnings to `ir.errors` AFTER those passes so the
+    // diagnostics survive to the caller.
+    if (!needsClientJs(ctx)) {
+      const code = generateTemplateOnlyMount(ir, ctx)
+      ir.errors.push(...ctx.warnings)
+      return { code }
+    }
+
+    const code = generateInitFunction(ir, ctx, siblingComponents, localImportPrefixes)
     ir.errors.push(...ctx.warnings)
-    return { code }
-  }
 
-  const code = generateInitFunction(ir, ctx, siblingComponents, localImportPrefixes)
-  ir.errors.push(...ctx.warnings)
+    if (options?.sourceMaps && code) {
+      const fileName = options.generatedFileName ?? `${ir.metadata.componentName}.client.js`
+      const sourceMap = buildSourceMapFromIR(code, ir, fileName)
+      const codeWithUrl = code + `\n//# sourceMappingURL=${fileName}.map`
+      return { code: codeWithUrl, sourceMap }
+    }
 
-  if (options?.sourceMaps && code) {
-    const fileName = options.generatedFileName ?? `${ir.metadata.componentName}.client.js`
-    const sourceMap = buildSourceMapFromIR(code, ir, fileName)
-    const codeWithUrl = code + `\n//# sourceMappingURL=${fileName}.map`
-    return { code: codeWithUrl, sourceMap }
+    return { code }
+  } finally {
+    setActiveImportAliases(null)
   }
-
-  return { code }
 }
 
 /**
@@ -275,7 +286,7 @@ function generateTemplateOnlyMount(ir: ComponentIR, ctx: ClientJsContext): strin
     // matches `emitRegistrationAndHydration`'s derivation byte-for-byte
     // rather than special-casing "no markup slots here" (#2651).
     const markupSlotIds = new Set(ctx.dynamicElements.map(e => e.slotId))
-    templateHtml = irToComponentTemplate(ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds)
+    templateHtml = irToComponentTemplate(ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds, ctx.restPropsName)
   }
 
   // CSR fallback: when static template generation fails (e.g., components with

package/src/ir-to-client-js/plan/build-static-array-child-init.ts

@@ -20,7 +20,7 @@
 import type { IRLoopChildComponent, MapCallbackPreamble } from '../../types.ts'
 import type { ClientJsContext, NestedLoop, TopLevelLoop } from '../types.ts'
 import { quotePropName, varSlotId, attrValueToString, buildLoopChildIndexExpr } from '../utils.ts'
-import { irChildrenToJsExpr, renderPreamble, irToHtmlTemplate } from '../html-template.ts'
+import { jsxChildrenPropGetterExpr, renderPreamble, irToHtmlTemplate } from '../html-template.ts'
 
 /**
  * Render a loop preamble for the static-array init context. Static `forEach`
@@ -232,7 +232,12 @@ function buildStaticPropsExpr(props: readonly LoopChildCompProp[]): PropsExpr {
       case 'boolean-attr':
         return `${quotePropName(p.name)}: true`
       case 'jsx-children':
-        return `get ${quotePropName(p.name)}() { return ${irChildrenToJsExpr(p.value.children)} }`
+        // Brand via the shared door (#2651/#2702) — see
+        // `jsxChildrenPropGetterExpr`'s docstring. A named jsx-children
+        // prop on a component instantiated inside a static-array `.map()`
+        // loop used to reach its getter unbranded (pullfrog review, PR
+        // #2820).
+        return `get ${quotePropName(p.name)}() { return ${jsxChildrenPropGetterExpr(p.value.children, p.name)} }`
       case 'expression':
       case 'template':
       case 'spread':

package/src/ir-to-client-js/rewrite-props-object.ts

@@ -26,6 +26,18 @@
 import ts from 'typescript'
 import { PROPS_PARAM } from './utils.ts'
 import { identifierPattern } from '../identifier-pattern.ts'
+import type { BindingScope } from '../scope/binding-scope.ts'
+
+export interface PropsObjectRewriteOptions {
+  /**
+   * SHADOW GUARD (CLAUDE.md's `BindingScope` distinction — `isBound()`,
+   * not `valueBoundNames()`): a `.map(props => ...)` row whose callback
+   * PARAMETER happens to be named the same as the outer `propsObjectName`
+   * must not have that parameter rewritten to `_p` — it shadows the outer
+   * props object inside its own row, same as any other bound name would.
+   */
+  enclosingScope?: BindingScope
+}
 
 /**
  * Rename every value-position reference to `propsObjectName` — and,
@@ -64,11 +76,13 @@ export function rewritePropsObjectRef(
   code: string,
   propsObjectName: string | null,
   restPropsName: string | null = null,
+  opts?: PropsObjectRewriteOptions,
 ): string {
   let result = code
   const seen = new Set<string>()
   for (const srcPropsName of [propsObjectName ?? 'props', restPropsName]) {
     if (srcPropsName === null || srcPropsName === PROPS_PARAM || seen.has(srcPropsName)) continue
+    if (opts?.enclosingScope?.isBound(srcPropsName)) continue
     seen.add(srcPropsName)
     result = rewriteOneName(result, srcPropsName)
   }