@barefootjs/jsx 0.33.3 → 0.33.6

package/src/ir-to-client-js/emit-reactive.ts

@@ -15,6 +15,7 @@ import { datePlugin, DATE_METHODS } from '../date-lowering.ts'
 import { toLocaleDatePlugin, foldedArgToClientJs } from '../to-locale-date-lowering.ts'
 import { tsNodeToParsedExpr } from '../expression-parser.ts'
 import type { LoweringMatcher } from '../lowering-registry.ts'
+import { rewriteBarePropRefs } from '../prop-rewrite.ts'
 
 /**
  * Profile mode (#1690, SR3/SR4): the id appended to a DOM-binding effect so the
@@ -127,28 +128,43 @@ export function emitAttrUpdate(target: string, attrName: string, expression: str
 /**
  * Rewrite destructured prop names in an expression to `(props.xxx ?? default)`.
  * Only applies when the component uses destructured props (not props.xxx style).
+ *
+ * Delegates the actual walk to `rewriteBarePropRefs` (`prop-rewrite.ts`) — the
+ * one AST walk in the compiler that already distinguishes a VALUE reference
+ * from an object-literal key, a property-access name, a shorthand property,
+ * or a name shadowed by an inner binding (`items.map((tag) => tag.x)`).
+ * This function used to run its own `\btag\b`-style regex over the raw
+ * expression text with no such distinction, so `queryHref(base, { tag: tag })`
+ * rewrote the KEY too (`{ _p.tag: _p.tag }`, a syntax error) — #2741. Only
+ * the default-value `(_p.x ?? <default>)` wrapping is specific to this call
+ * site, supplied via `replacementFor` rather than a second copy of the walk.
  */
 export function rewriteDestructuredPropsInExpr(expr: string, ctx: ClientJsContext): string {
   if (ctx.propsObjectName) return expr
 
-  const { protect, restore } = createTemplateAwareStringProtector()
-  let result = protect(expr)
-
+  const propNames = new Set<string>()
+  const propAliases = new Map<string, string>()
+  const propsByName = new Map<string, ClientJsContext['propsParams'][number]>()
   for (const prop of ctx.propsParams) {
     if (prop.name === 'children') continue
-    const pattern = new RegExp(`(?<![-.])\\b${prop.name}\\b`, 'g')
-    if (!pattern.test(result)) continue
-
+    propNames.add(prop.name)
+    propsByName.set(prop.name, prop)
     // `_p` is always keyed by the caller-facing name (#2524 CSR half).
-    const callerKey = prop.sourceName ?? prop.name
-    const defaultVal = prop.defaultValue
-    const replacement = defaultVal
-      ? `(${PROPS_PARAM}.${callerKey} ?? ${prop.defaultContainsArrow ? `(${defaultVal})` : defaultVal})`
-      : `${PROPS_PARAM}.${callerKey}`
-    result = result.replace(new RegExp(`(?<![-.])\\b${prop.name}\\b`, 'g'), replacement)
+    if (prop.sourceName && prop.sourceName !== prop.name) propAliases.set(prop.name, prop.sourceName)
   }
+  if (propNames.size === 0) return expr
 
-  return restore(result)
+  const replacementFor = (localName: string, callerKey: string): string => {
+    const defaultVal = propsByName.get(localName)?.defaultValue
+    if (!defaultVal) return `${PROPS_PARAM}.${callerKey}`
+    const defaultContainsArrow = propsByName.get(localName)?.defaultContainsArrow
+    return `(${PROPS_PARAM}.${callerKey} ?? ${defaultContainsArrow ? `(${defaultVal})` : defaultVal})`
+  }
+
+  // Parenthesized so an object-literal or arrow-function expression parses
+  // standalone — same convention `applyScopedPropRefRewrite` itself uses.
+  const sourceFile = ts.createSourceFile('__bf_reactive_expr.ts', `(${expr}\n)`, ts.ScriptTarget.Latest, true)
+  return rewriteBarePropRefs(expr, sourceFile, propNames, undefined, propAliases, replacementFor) ?? expr
 }
 
 /**

package/src/ir-to-client-js/emit-registration.ts

@@ -223,7 +223,7 @@ export function emitRegistrationAndHydration(
     // (#2651) — see `generateCsrTemplate`'s identical derivation below
     // for why this is reused as-is rather than re-derived.
     const markupSlotIds = new Set(ctx.dynamicElements.map(e => e.slotId))
-    const templateHtml = irToComponentTemplate(_ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds)
+    const templateHtml = irToComponentTemplate(_ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds, ctx.restPropsName)
     if (templateHtml) {
       defParts.push(buildTemplateDefPart(ctx, templateHtml))
     }

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

@@ -2,17 +2,18 @@
  * IR → HTML template string generation and validation.
  */
 
-import type { AttrValue, FlatMapCallback, IRAttribute, IRExpression, IRNode, IRProp, MapCallbackPreamble } from '../types.ts'
+import type { AttrValue, FlatMapCallback, IRAttribute, IRElement, IRExpression, IRNode, IRProp, MapCallbackPreamble } from '../types.ts'
 import { isBooleanAttr } from '../html-constants.ts'
 import { toHtmlAttrName, attrValueToString, quotePropName, PROPS_PARAM, DATA_BF_PH, keyAttrName, loopStartMarker, loopEndMarker, loopItemMarker, freeIdsFromRefs, setIntersects, wrapExprWithLoopParams } from './utils.ts'
 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'
 
 /**
@@ -547,6 +548,25 @@ export interface MergeContext {
   honorClientOnly: boolean
 }
 
+/**
+ * The client-template twin of `IRElement.keyAttr`'s SSR-side decision
+ * (`jsx-to-ir.ts`'s `extractLoopKey`/`applyLoopKeyAttr`) — #2763. A raw
+ * `key={}` JSX attribute survives on `.attrs` regardless of whether the
+ * loop/relay actually recognized it as a row key (a fragment-bodied loop
+ * row before #2763's fix, or heterogeneous keys across conditional
+ * branches) — baking `data-key` from the mere presence of that attribute
+ * would disagree with every SSR adapter, which all gate on `keyAttr`
+ * instead. Returns the resolved attribute name only when `node.keyAttr` is
+ * actually set; `null` otherwise, so the caller drops the raw `key`
+ * attribute entirely rather than emitting a `data-key` no SSR adapter
+ * agrees with. `keyAttr.name` and `keyAttrName(loopDepth)` are already the
+ * same value (both derive from `@barefootjs/shared`'s `keyAttrName`, see
+ * `IRElement.keyAttr`'s docstring) — this only decides WHETHER to use it.
+ */
+function resolvedKeyAttrName(node: IRElement, loopDepth: number): string | null {
+  return node.keyAttr ? keyAttrName(loopDepth) : null
+}
+
 /** Return true if this attribute should participate in the merge object. */
 function isMergeableAttr(a: IRAttribute, ctx: MergeContext): boolean {
   if (ctx.honorClientOnly && a.clientOnly) return false
@@ -639,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`.
  */
 /**
@@ -876,10 +897,11 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: ReadonlySet<str
             // others are already represented inside the merge object.
             return idx === firstMergeableIdx ? mergeCall! : ''
           }
-          const attrName = a.name === '...'
-            ? '...'
-            : (a.name === 'key' ? keyAttrName(loopDepth) : toHtmlAttrName(a.name))
-          return renderTemplateAttrPart(a, attrName, wrapExpr, restSpreadNames)
+          if (a.name === 'key') {
+            const attrName = resolvedKeyAttrName(node, loopDepth)
+            return attrName ? renderTemplateAttrPart(a, attrName, wrapExpr, restSpreadNames) : ''
+          }
+          return renderTemplateAttrPart(a, toHtmlAttrName(a.name), wrapExpr, restSpreadNames)
         })
         .filter(Boolean)
 
@@ -1059,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': {
@@ -1189,7 +1210,9 @@ export function buildLoopSkeletonTemplate(node: IRNode, safe: LoopSkeletonSafeSl
         if (a.name === '...') return null
         if (a.name === 'dangerouslySetInnerHTML') return null
         if (a.name === 'key') {
-          attrParts.push(`${keyAttrName(0)}=""`)
+          if (resolvedKeyAttrName(node, 0)) {
+            attrParts.push(`${keyAttrName(0)}=""`)
+          }
           continue
         }
         const v = a.value
@@ -1208,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
@@ -1485,9 +1523,11 @@ export function irToPlaceholderTemplate(node: IRNode, restSpreadNames?: Readonly
           // composite-row twin of it, so a row it builds must carry the
           // same attributes a hydration-reused row does (#2756).
           if (a.clientOnly) return ''
-          const attrName = a.name === '...'
-            ? '...'
-            : (a.name === 'key' ? keyAttrName(loopDepth) : toHtmlAttrName(a.name))
+          if (a.name === 'key') {
+            const attrName = resolvedKeyAttrName(node, loopDepth)
+            return attrName ? renderTemplateAttrPart(a, attrName, wrapExpr, restSpreadNames) : ''
+          }
+          const attrName = a.name === '...' ? '...' : toHtmlAttrName(a.name)
           return renderTemplateAttrPart(a, attrName, wrapExpr, restSpreadNames)
         })
         .filter(Boolean)
@@ -1604,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
@@ -1642,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)} }`
@@ -1683,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
@@ -1747,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
@@ -1838,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)
@@ -1865,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) {
@@ -2250,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) {
@@ -2268,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 })
 }
 
 /**
@@ -2345,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) {
@@ -2463,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
@@ -2492,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
@@ -2550,9 +2643,26 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
             if (mergeCtx.isFilteredSpread(v)) return ''
             return `\${spreadAttrs(${transformExpr(v.expr, v.templateExpr)})}`
           }
-          const attrName = a.name === 'key'
-            ? keyAttrName(loopDepth)
-            : toHtmlAttrName(a.name)
+          if (a.name === 'key') {
+            const keyName = resolvedKeyAttrName(node, loopDepth)
+            if (!keyName) return ''
+            switch (v.kind) {
+              case 'boolean-attr':
+                return keyName
+              case 'literal':
+                return `${keyName}="${escapeHtml(v.value)}"`
+              case 'expression':
+                return templateAttrExpr(keyName, transformExpr(v.expr, v.templateExpr), v.presenceOrUndefined)
+              case 'template': {
+                const valueStr = attrValueToString(v, { useTemplate: true })
+                return valueStr ? templateAttrExpr(keyName, transformExpr(valueStr)) : ''
+              }
+              case 'boolean-shorthand':
+              case 'jsx-children':
+                return ''
+            }
+          }
+          const attrName = toHtmlAttrName(a.name)
           switch (v.kind) {
             case 'boolean-attr':
               return attrName
@@ -2731,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': {
@@ -2800,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)),
         })
@@ -2808,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