@barefootjs/jsx 0.33.3 → 0.33.6

package/src/ir-to-client-js/collect-elements.ts

@@ -6,7 +6,7 @@ import { type IRNode, type IRElement, type IRComponent, type IRLoop, type IRProp
 import type { ClientJsContext, ConditionalBranchChildComponent, ConditionalBranchReactiveAttr, BranchLoop, ConditionalBranchTextEffect, ConditionalElement, LoopChildBindings, LoopChildBranchSummary, LoopChildConditional, LoopOffset, NestedLoop } from './types.ts'
 import { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM } from './utils.ts'
 import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings, buildLoopRowScope, anyNameIn } from './reactivity.ts'
-import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, renderFlatMapClientBody, renderFlatMapProjectionClientBody, flatMapCallbackHasKeyedLeaf, type SkeletonSlotPaths } from './html-template.ts'
+import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, jsxChildrenPropGetterExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, renderFlatMapClientBody, renderFlatMapProjectionClientBody, flatMapCallbackHasKeyedLeaf, type SkeletonSlotPaths } from './html-template.ts'
 import { detectRootNamespaceWrapTag } from './control-flow/stringify/template-parse.ts'
 import { expandDynamicPropValue, expandConstantForReactivity, resolveRestSpreadOrigin, resolveRestSpreadNames } from './prop-handling.ts'
 import { extractFreeIdentifiersFromText } from './csr-substitute.ts'
@@ -475,29 +475,6 @@ function jsxChildrenContainComponent(nodes: IRNode[]): boolean {
   return false
 }
 
-/**
- * Narrow gate for branding a `jsx-children` getter's value with `bfMarkup()`
- * (#2651). The constructor (`jsx-to-ir.ts`'s `processComponentProps`) always
- * stores exactly one node here (`AttrValueOf.jsxChildren([...])`), so
- * `nodes[0]` is the whole payload; `irChildrenToJsExpr` (`html-template.ts`)
- * turns a single `'element'` node into ONE HTML-string template literal —
- * the same shape the `renderChild` / `irToComponentTemplateWithOpts` /
- * `generateCsrTemplateWithOpts` "jsx-children" doors always produce (they
- * join every child into one string regardless of shape), and the shape
- * this fixture's `header={<strong>Title</strong>}` exercises.
- *
- * Deliberately narrow — NOT a general "does this reduce to one string"
- * check: a `'fragment'` node (`header={<>text<strong/></>}`, multiple
- * children) or a `'conditional'` node reduces through `irChildrenToJsExpr`
- * to an array literal or a nested ternary of un-escaped-vs-escaped parts,
- * for which `escapeTextOrNode`/`escapeTextOrMarkup` have no (array) or an
- * unproven (ternary) contract. Those shapes are left unbranded — see
- * #2651's door inventory — rather than guessed at here.
- */
-function isSingleElementJsxChildren(nodes: IRNode[]): boolean {
-  return nodes.length === 1 && nodes[0].type === 'element'
-}
-
 /** Build propsExpr for a child component from its IR props. */
 function buildComponentPropsExpr(props: IRProp[], ctx: ClientJsContext): string {
   const knownSpreadProp = props.find(p => {
@@ -526,19 +503,13 @@ function buildComponentPropsExpr(props: IRProp[], ctx: ClientJsContext): string
     }
     switch (prop.value.kind) {
       case 'jsx-children': {
-        const jsxExpr = irChildrenToJsExpr(prop.value.children)
         if (jsxChildrenContainComponent(prop.value.children)) {
+          const jsxExpr = irChildrenToJsExpr(prop.value.children)
           propsForInit.push(`get ${quotePropName(prop.name)}() { return __slot(() => ${jsxExpr}) }`)
-        } else if (prop.name !== 'children' && isSingleElementJsxChildren(prop.value.children)) {
-          // Brand (#2651): `jsxExpr` is the single HTML-string template
-          // literal `irChildrenToJsExpr` builds for a lone 'element' node —
-          // see `isSingleElementJsxChildren`'s docstring for why only this
-          // shape is branded here. Excludes an explicit `children={<jsx/>}`
-          // prop (out of scope, unchanged) — the child's `{children}`
-          // interpolation is a bare passthrough with no unwrap call, so a
-          // branded object there would stringify to `[object Object]`.
-          propsForInit.push(`get ${quotePropName(prop.name)}() { return bfMarkup(${jsxExpr}) }`)
         } else {
+          // Brand via the shared door (#2651/#2702) — see
+          // `jsxChildrenPropGetterExpr`'s docstring.
+          const jsxExpr = jsxChildrenPropGetterExpr(prop.value.children, prop.name)
           propsForInit.push(`get ${quotePropName(prop.name)}() { return ${jsxExpr} }`)
         }
         break
@@ -772,10 +743,11 @@ export function collectElements(
         // passed), matching the plain-element path's `staticItemTemplate`.
         if (l.isStaticArray && l.children[0]) {
           // `l.children[0]` is the loop's row-root component — already
-          // tagged `loopItemRoot` in the IR, so `derivesScopeFromSlot`
-          // drops the parent's slot suffix automatically. Each iteration
-          // owns a distinct scope identified by `data-key`, mirroring the
-          // SSR template's renderChild emit.
+          // tagged `loopItemRoot` in the IR, so `renderChildScopeArgs`
+          // passes its slotId with the `loopItemRoot` flag (#2833) instead
+          // of deriving its own scope from the parent slot. Each iteration
+          // still owns a distinct scope identified by `data-key`, mirroring
+          // the SSR template's renderChild emit.
           staticItemTemplate = irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, undefined, undefined)
         }
       } else if (l.children[0] && !projectionInner) {

package/src/ir-to-client-js/component-scope.ts

@@ -1,3 +1,5 @@
+import type { ImportInfo } from '../types.ts'
+
 /**
  * File-scoped component name disambiguation for the runtime registry.
  *
@@ -63,8 +65,66 @@ export function setActiveComponentScope(scope: { fileScope: string; nonExportedS
   _activeScope = scope
 }
 
+/**
+ * #2777 — a client component referenced under an import alias
+ * (`import { Foo as Bar } from './Foo'`, `<Bar/>`) must resolve its
+ * registry key to the DECLARED/exported name (`Foo`, what the child's own
+ * module registers under via `hydrate('Foo', ...)`), not the caller-local
+ * binding (`Bar`) — the registry is keyed by string name, so a mismatch
+ * here left `initChild('Bar', ...)` unable to find `Foo`'s registration
+ * and hydration silently never ran.
+ *
+ * A local alias → exported name map, active per client-JS generation the
+ * same way `_activeScope` is (module-level state, installed/cleared by
+ * `generateClientJsWithSourceMap`) rather than threaded through every
+ * recursive emitter — same rationale as `_activeScope` above.
+ */
+let _activeImportAliases: ReadonlyMap<string, string> | null = null
+
+/**
+ * Build a local-alias → exported-name map from a component's parsed
+ * imports. Only VALUE, non-default, non-namespace, ALIASED specifiers
+ * produce an entry — a bare `import { Foo }` needs no rewrite (`name`
+ * already equals what's registered), and default/namespace imports can't
+ * be resolved this way (a default's exported name isn't recorded here,
+ * and a namespace member reference isn't an aliased specifier at all).
+ */
+export function buildImportAliasMap(imports: readonly ImportInfo[]): Map<string, string> {
+  const aliases = new Map<string, string>()
+  for (const imp of imports) {
+    if (imp.isTypeOnly) continue
+    for (const spec of imp.specifiers) {
+      if (spec.isTypeOnly || spec.isDefault || spec.isNamespace || spec.alias === null) continue
+      aliases.set(spec.alias, spec.name)
+    }
+  }
+  return aliases
+}
+
+export function setActiveImportAliases(aliases: ReadonlyMap<string, string> | null): void {
+  _activeImportAliases = aliases
+}
+
+/**
+ * Resolve a local JSX tag name to the name the referenced component's own
+ * module registers under (`hydrate(<name>, ...)`) — the caller-facing
+ * alias if imported under one, otherwise the name unchanged. Used
+ * anywhere a name needs to reach the runtime registry WITHOUT also going
+ * through the non-exported-sibling rewrite below (the `@bf-child:` marker
+ * comment, which must never carry a same-file sibling's hash).
+ */
+export function resolveImportedComponentName(name: string): string {
+  return _activeImportAliases?.get(name) ?? name
+}
+
 /** Resolve a component name to its registry key under the active file scope. */
 export function nameForRegistryRef(name: string): string {
+  // An aliased IMPORT always wins over the non-exported-sibling rewrite:
+  // `import { Foo as Bar } from './Foo'` plus a private same-file
+  // `function Foo() {}` must still resolve `<Bar/>` to the imported
+  // `Foo`, not hash the sibling's `Foo` key onto it.
+  const imported = _activeImportAliases?.get(name)
+  if (imported !== undefined) return imported
   if (!_activeScope) return name
   if (!_activeScope.fileScope) return name
   if (!_activeScope.nonExportedSiblings.has(name)) return name

package/src/ir-to-client-js/compute-inlinability.ts

@@ -32,7 +32,7 @@ import type { RelocateEnv, RelocateDecision } from '../relocate.ts'
 import { createError, ErrorCodes } from '../errors.ts'
 import { attrValueToString } from './utils.ts'
 import { walkIR, type IRVisitor } from './walker.ts'
-import { buildSignalMemoEnv, csrSubstitute, type CsrEnv, type CsrSubstitution } from './csr-substitute.ts'
+import { buildSignalMemoEnv, csrSubstitute, resolveGetterAliases, type CsrEnv, type CsrSubstitution } from './csr-substitute.ts'
 
 /**
  * Build a `RelocateEnv` from a live `ClientJsContext`. The IR-keyed env
@@ -237,6 +237,13 @@ export function computeInlinability(
   const signalGetters = new Set(ctx.signals.map(s => s.getter))
   const signalSetters = new Set(ctx.signals.filter(s => s.setter).map(s => s.setter!))
   const memoNames = new Set(ctx.memos.map(m => m.name))
+  // A bare alias-hop chain that ultimately names a signal/memo getter
+  // (`const items__alias = items`, #2778) is `reactive-read` the same as
+  // a direct reference — computed once here and threaded to both the
+  // per-const classification below AND `populateCsrInlinable`, so the
+  // two passes can't independently reach different verdicts for the
+  // same alias.
+  const getterAliases = resolveGetterAliases(ctx.localConstants, (n) => signalGetters.has(n) || memoNames.has(n))
 
   // RelocateEnv is built once per component from the live ClientJsContext.
   // The adapter capabilities (`templatePrimitives` / `acceptsTemplateCall`)
@@ -253,6 +260,7 @@ export function computeInlinability(
       signalSetters,
       memoNames,
       env,
+      getterAliases,
     )
     constants.set(c.name, status)
     decisionsByName.set(c.name, decisions)
@@ -267,7 +275,7 @@ export function computeInlinability(
   // transformation. The map lives on `ClientJsContext` — not on the
   // cross-adapter `ConstantInfo` IR — so SSR adapters don't see CSR
   // substitution semantics they have no use for.
-  populateCsrInlinable(ctx, env)
+  populateCsrInlinable(ctx, env, getterAliases)
 
   return { constants, functions, decisionsByName, templateRiskyNames }
 }
@@ -289,20 +297,26 @@ export function computeInlinability(
  *   - the value contains an arrow / function expression (identity per render)
  *   - it's a system construct (`createContext`, `new WeakMap`)
  *   - it's a JSX literal (handled by jsx-inline routing)
+ *   - it's a bare alias-hop chain naming a signal/memo getter (`getterAliases`)
  *   - the substituted form fails `isInlinableInTemplate` (would re-execute
  *     a non-pure call at template-eval time — #1138)
  */
-function populateCsrInlinable(ctx: ClientJsContext, relocateEnv: RelocateEnv): void {
+function populateCsrInlinable(ctx: ClientJsContext, relocateEnv: RelocateEnv, getterAliases: ReadonlyMap<string, string>): void {
   if (ctx.localConstants.length === 0) return
 
-  // Base env: signal getters + memo calls in raw (props.X) form. We
-  // keep the substitution map raw so the post-substitution
-  // `isInlinableInTemplate` check sees bridged prop references (the
-  // form `useYjs(props.X)`) and rejects them via
-  // `hasCallWithBridgedArg` (#1138). The final `_p.X` rewrite happens
+  // Base env: signal getters + memo calls in raw (props.X) form, PLUS
+  // `getterAliases`'s call-kind entries (`buildSignalMemoEnv`'s own
+  // `localConstants` param, #2778) — the same call-kind entry an
+  // alias's origin already has, so `items__alias()` substitutes exactly
+  // like `items()` rather than through this function's generic
+  // identifier-inlining path below (see the pre-mark loop's comment for
+  // why that path must never see these names). We keep the substitution
+  // map raw so the post-substitution `isInlinableInTemplate` check sees
+  // bridged prop references (the form `useYjs(props.X)`) and rejects them
+  // via `hasCallWithBridgedArg` (#1138). The final `_p.X` rewrite happens
   // when the template emitter calls `csrSubstitute` on the IR text —
   // by then it's safe because we already know the form is inline-safe.
-  const baseEnv = buildSignalMemoEnv(ctx.signals, ctx.memos, ctx.propsObjectName)
+  const baseEnv = buildSignalMemoEnv(ctx.signals, ctx.memos, ctx.propsObjectName, ctx.localConstants)
   const constSubs = new Map<string, CsrSubstitution>()
   const finalised = new Set<string>()
 
@@ -314,8 +328,18 @@ function populateCsrInlinable(ctx: ClientJsContext, relocateEnv: RelocateEnv): v
   // Pre-mark consts that are structurally ineligible — they record
   // `null` in `ctx.csrInlinable`. Mirrors `classifyConstantInitial`
   // for the kinds that have no value to substitute.
+  //
+  // A `getterAliases` name is pre-marked `null` here too — NOT because
+  // it can't be substituted (it already IS, as a call-kind entry in
+  // `baseEnv` above) but because this function's generic path below
+  // would otherwise resolve it through `isInlinableInTemplate`, whose
+  // signal-getter FALLBACK verdict (`rewrittenAs: 'undefined'`, meant
+  // for a getter referenced bare and uncalled) would freeze in as an
+  // identifier-kind override that wins over `baseEnv`'s correct
+  // call-kind entry (`buildEnvWithConsts`'s Map spread puts `constSubs`
+  // last) — the literal `(undefined)()` this issue is about (#2778).
   for (const c of ctx.localConstants) {
-    if (c.isJsx || !c.value || c.containsArrow || c.systemConstructKind) {
+    if (c.isJsx || !c.value || c.containsArrow || c.systemConstructKind || getterAliases.has(c.name)) {
       ctx.csrInlinable.set(c.name, null)
       finalised.add(c.name)
     }
@@ -371,7 +395,7 @@ function populateCsrInlinable(ctx: ClientJsContext, relocateEnv: RelocateEnv): v
       // stay out of the template lambda. The relocate output
       // (`rewrittenValue`) is the bridged form (bare destructured prop
       // refs lifted to `_p.X`); we store that so the emit-time
-      // `applyPropsRewrite` doesn't need to redo the AST work. The
+      // `rewritePropsObjectRef` doesn't need to redo the AST work. The
       // free identifiers are re-extracted from the bridged form so
       // the post-substitution unsafe-name check stays exact.
       const inlineResult = isInlinableInTemplate(rewritten, relocateEnv)
@@ -598,11 +622,22 @@ function classifyConstantInitial(
   signalSetters: Set<string>,
   memoNames: Set<string>,
   env: RelocateEnv,
+  getterAliases: ReadonlyMap<string, string>,
 ): { status: ConstantInlinability; decisions: RelocateDecision[] } {
   if (c.isJsx) return { status: { kind: 'jsx-inline' }, decisions: [] }
   if (!c.value) return { status: { kind: 'placeholder-let' }, decisions: [] }
   if (c.containsArrow) return { status: { kind: 'arrow-literal' }, decisions: [] }
   if (c.systemConstructKind) return { status: { kind: 'system-construct' }, decisions: [] }
+  // A multi-hop alias chain to a getter (`const a = items; const b = a`)
+  // has `b`'s OWN free id as `a` — an `init-local`, not a getter — so the
+  // direct free-id check just below only catches the one-hop case. Without
+  // this, `b` falls through to the stage-2 `isInlinableInTemplate` check,
+  // which resolves `a` to `init-local fallback` and (since `b` is
+  // template-risky) turns a now-correctly-substituted reference into a
+  // spurious BF061 error (#2778). `getterAliases` already walked the full
+  // chain, so checking it here makes every hop agree with the one-hop case
+  // without re-deriving the walk.
+  if (getterAliases.has(c.name)) return { status: { kind: 'reactive-read' }, decisions: [] }
 
   const freeIds = c.freeIdentifiers
   if (freeIds) {

package/src/ir-to-client-js/control-flow/plan/build-component-loop.ts

@@ -26,9 +26,10 @@ import {
   isTextOnlyConditional,
   buildChildRefBindings,
 } from '../shared.ts'
-import { irChildrenToJsExpr } from '../../html-template.ts'
+import { irChildrenToJsExpr, renderPreamble } from '../../html-template.ts'
 import { buildReactiveEffectsPlan } from './build-reactive-effects.ts'
 import type { ComponentLoopPlan, NestedComponentInit } from './types.ts'
+import { internalInvariant } from '../../../errors.ts'
 
 /** @internal — prefer `buildLoopPlan`. */
 export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?: string): ComponentLoopPlan {
@@ -37,6 +38,22 @@ export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?
   const keyExpr = wrapLoopParamAsAccessor(elem.key || '__idx', elem.param, elem.paramBindings)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings)
 
+  // A component-root loop's preamble is JS-only by construction: Phase 1
+  // (jsx-to-ir.ts) already refuses and strips any preamble with a JSX leaf
+  // (`builderNames.length > 0`) on this shape, because a lowered HTML-string
+  // leaf passed as a prop would diverge from SSR's real JSX elements — see
+  // `rowConstruction: 'dom-ops'` below. `renderLeaf` is therefore never
+  // reachable here; if it ever fires, a Phase-1 refusal for the new shape
+  // that let a JSX-bearing preamble through is missing, not this line.
+  const mapPreambleWrapped = elem.preamble
+    ? renderPreamble(elem.preamble, {
+        transformJs: text => wrapLoopParamAsAccessor(text, elem.param, elem.paramBindings),
+        renderLeaf: () => {
+          internalInvariant(false, 'component-root loop received a JSX-bearing preamble — Phase 1 should have refused it')
+        },
+      })
+    : ''
+
   // Only init components at loopDepth 0 — inner-loop components are handled by their own loop
   const outerNestedComps = (elem.nestedComponents ?? []).filter(c => !c.loopDepth)
   const nestedComps: NestedComponentInit[] = outerNestedComps.map(comp => {
@@ -64,6 +81,7 @@ export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?
     // prop would diverge from SSR (which passes real JSX elements). The plan
     // dispatcher refuses a JSX-bearing preamble on this variant.
     rowConstruction: 'dom-ops',
+    mapPreambleWrapped,
     containerVar: `_${varSlotId(elem.slotId)}`,
     markerId: elem.markerId,
     arrayExpr: buildChainedArrayExpr(elem),

package/src/ir-to-client-js/control-flow/plan/loop.ts

@@ -77,6 +77,8 @@ interface DynamicLoopCommon extends LoopPlanCommon {
   paramHead: string
   /** Statement to unwrap a destructured param at body entry. Empty when not needed. */
   paramUnwrap: string
+  /** Pre-render preamble line (already wrapped with loop param accessor). Empty when none. */
+  mapPreambleWrapped: string
 }
 
 /**
@@ -117,8 +119,6 @@ export interface LoopChildRefBinding {
  */
 interface PlainLoopVariant extends DynamicLoopCommon {
   kind: 'plain'
-  /** Pre-render preamble line (already wrapped with loop param accessor). Empty when none. */
-  mapPreambleWrapped: string
   /** HTML template string for one item. */
   template: string
   /**
@@ -225,8 +225,6 @@ interface ComponentLoopVariant extends DynamicLoopCommon {
  */
 interface CompositeLoopVariant extends DynamicLoopCommon {
   kind: 'composite'
-  /** Wrapped mapPreamble line, hoisted before the SSR/CSR split. Empty when none. */
-  mapPreambleWrapped: string
   /** Inner template HTML for the loop body (single item). */
   template: string
   /** Outer-level child components (depth 0), with `insideConditional` ones already filtered out. */

package/src/ir-to-client-js/control-flow/shared.ts

@@ -16,7 +16,7 @@ import type { LoopChildEvent, LoopChildRef, TopLevelLoop, NestedLoop, CollectedL
 import type { IRLoopChildComponent, LoopParamBinding } from '../../types.ts'
 import { preambleAnalysisText } from '../../types.ts'
 import { quotePropName, wrapLoopParamAsAccessor, irChildrenFreeIds, attrValueToString } from '../utils.ts'
-import { irChildrenToJsExpr } from '../html-template.ts'
+import { irChildrenToJsExpr, jsxChildrenPropGetterExpr } from '../html-template.ts'
 import { emitListenerBlock } from './stringify/event-listener.ts'
 import { nameForRegistryRef } from '../component-scope.ts'
 import { BF_SCOPE, BF_HOST, BF_AT } from '@barefootjs/shared'
@@ -285,7 +285,13 @@ export function buildComponentPropsExpr(
       case 'boolean-attr':
         return `get ${quotePropName(p.name)}() { return true }`
       case 'jsx-children': {
-        const childExpr = irChildrenToJsExpr(p.value.children)
+        // Brand via the shared door (#2651/#2702) — see
+        // `jsxChildrenPropGetterExpr`'s docstring. This builder is shared
+        // by loop and conditional-branch component reconciliation, so a
+        // named jsx-children prop on a component instantiated in either
+        // context used to reach its getter unbranded (pullfrog review, PR
+        // #2820).
+        const childExpr = jsxChildrenPropGetterExpr(p.value.children, p.name)
         return `get ${quotePropName(p.name)}() { return ${wrap(childExpr)} }`
       }
       case 'expression':
@@ -360,9 +366,10 @@ function emitEventSetup(
  * e.g. `qsa(__el, ${buildCompSelector(c)})`.
  *
  * - With `slotId`: primary `(bf-h, bf-m)` against the enclosing scope's
- *   `__scopeId`, with a `[bf-s$="_<slot>"]` fallback for `renderChild`
- *   paths that stamp only the parent-anchored bf-s. See `spec/compiler.md`
- *   "Slot identity".
+ *   `__scopeId`, with a `[bf-s$="_<slot>"]` fallback for a DSL adapter's SSR
+ *   output that doesn't stamp `(bf-h, bf-m)` on this shape (CSR's own
+ *   `renderChild` stamps both, loop item root included, since #2833). See
+ *   `spec/compiler.md` "Slot identity".
  * - Without `slotId`: `bf-s^="<Name>_"` name-prefix for top-level lookup.
  */
 export function buildCompSelector(comp: { slotId?: string | null; name: string }): string {

package/src/ir-to-client-js/control-flow/stringify/component-loop.ts

@@ -49,11 +49,18 @@ export function stringifyComponentLoop(lines: string[], plan: ComponentLoopPlan)
     nestedComps,
     childConditionalEffects,
     profileLoopId,
+    mapPreambleWrapped,
   } = plan
 
   const loopBfId = profileLoopId ? `, ${JSON.stringify(profileLoopId)}` : ''
   lines.push(`  mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => {`)
   if (paramUnwrap) lines.push(`    ${paramUnwrap}`)
+  // The preamble's consts are referenced by componentPropsExpr's getters
+  // below, in BOTH the `initChild` (hydration-reuse) and `createComponent`
+  // (fresh row) branches — a row rebuild and a hydration-reused row must
+  // read the same preamble-computed value, so it can't be hoisted into only
+  // one branch.
+  if (mapPreambleWrapped) lines.push(`    ${mapPreambleWrapped}`)
 
   const scopedComp = nameForRegistryRef(componentName)
 

package/src/ir-to-client-js/control-flow/stringify/loop.ts

@@ -421,7 +421,12 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
       // insert them in order. `__iterEl` is the first root (the one reactive
       // bindings attach to); the rest land alongside it via insertBefore.
       lines.push(`        const __mtpl = document.createElement('template')`)
-      lines.push(`        __mtpl.innerHTML = \`${itemHtml}\``)
+      // Materialize runs during init, after the parent's own template
+      // evaluation (and its ambient parent-scope id) has already unwound —
+      // `withParentScope` re-establishes it just for this row's HTML so
+      // `renderChild` inside it stamps `bf-h` with the same `__scopeId` the
+      // static init's own selector interpolates (#2833).
+      lines.push(`        __mtpl.innerHTML = withParentScope(__scopeId, () => \`${itemHtml}\`)`)
       lines.push(`        const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`)
       lines.push(`        let __first = null`)
       lines.push(`        let __sib = __mtpl.content${childPath}.firstElementChild`)
@@ -435,7 +440,8 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
       lines.push(`        __iterEl = __first`)
     } else {
       lines.push(`        const __tpl = document.createElement('template')`)
-      lines.push(`        __tpl.innerHTML = \`${itemHtml}\``)
+      // See the multi-root branch's comment above (#2833).
+      lines.push(`        __tpl.innerHTML = withParentScope(__scopeId, () => \`${itemHtml}\`)`)
       lines.push(`        const __cloned = __tpl.content${childPath}`)
       lines.push(`        if (__cloned) {`)
       lines.push(`          const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`)

package/src/ir-to-client-js/control-flow.ts

@@ -86,6 +86,18 @@ export function emitLoopUpdates(lines: string[], ctx: ClientJsContext, unsafeLoc
       !(elem.preamble && elem.preamble.builderNames.length > 0 && plan.rowConstruction === 'dom-ops'),
       `loop variant '${plan.kind}' declares dom-ops row construction but received a JSX-bearing preamble — add a Phase-1 refusal (or wire renderPreamble support) for this shape`,
     )
+    // #2797's hole, generalized: a JS-only preamble (no JSX leaf, so the
+    // check above doesn't fire) can still be silently dropped if a variant
+    // just never reads `elem.preamble` at all — which is exactly what
+    // happened to the 'component' variant before it grew
+    // `mapPreambleWrapped`. A variant that doesn't declare that field can't
+    // be checked here (nothing to read), so this only catches a variant
+    // that declares it but leaves it unpopulated for a preamble that has
+    // names to declare.
+    internalInvariant(
+      !(elem.preamble && elem.preamble.declaredNames.length > 0 && 'mapPreambleWrapped' in plan && plan.mapPreambleWrapped === ''),
+      `loop variant '${plan.kind}' has a preamble with declared names (${elem.preamble?.declaredNames.join(', ')}) but its plan's mapPreambleWrapped is empty — wire it up or the emitted call site references a name nothing declares`,
+    )
     stringifyLoop(lines, plan)
     emitLoopEventDelegation(lines, elem, plan.kind, ctx.profile ? ctx.componentName : undefined)
   }

package/src/ir-to-client-js/csr-substitute.ts

@@ -25,10 +25,11 @@
  */
 
 import ts from 'typescript'
-import { PROPS_PARAM, inferDefaultValue } from './utils.ts'
+import { inferDefaultValue } from './utils.ts'
 import { extractFreeIdentifiersFromNode } from '../analyzer.ts'
-import type { MemoInfo, SignalInfo } from '../types.ts'
+import type { ConstantInfo, MemoInfo, SignalInfo } from '../types.ts'
 import type { BindingScope } from '../scope/binding-scope.ts'
+import { resolveAliasOrigin } from '../props-binding.ts'
 
 /**
  * CSR-substituted const value: the const's initializer with every
@@ -321,23 +322,34 @@ function csrSubstituteOnce(
   // lets `isInlinableInTemplate` see bridged prop references and
   // reject calls like `useYjs(props.X)` from the inline path (#1138).
   // Callers that want the emit-form (`_p.X`) apply the rewrite via
-  // `applyPropsRewrite` after the inline-safety check.
+  // `rewritePropsObjectRef` (rewrite-props-object.ts) after the
+  // inline-safety check — an AST walk, not a regex, so it survives a
+  // parenthesised receiver (`(props).label`, produced when `props`
+  // itself was just constant-inlined under a local alias) and skips
+  // non-value positions a regex can't distinguish (#2737).
 
   // Compute free identifiers of the rewritten form by re-parsing. Avoids
   // having to track analytically through nested substitutions, which is
   // exactly the bookkeeping that made the legacy code drift from emission.
-  return { rewritten, freeIdentifiers: extractFreeIdentifiersFromText(rewritten) }
-}
-
-/**
- * Apply the source-level `propsObjectName.X → _p.X` rewrite. Runs as
- * a separate step (not inside `csrSubstitute`) so the substitution
- * output stays in raw form long enough for `isInlinableInTemplate`
- * to detect bridged-arg calls (#1138).
- */
-export function applyPropsRewrite(text: string, propsObjectName: string | null): string {
-  if (!propsObjectName || propsObjectName === PROPS_PARAM) return text
-  return text.replace(new RegExp(`\\b${propsObjectName}\\.`, 'g'), `${PROPS_PARAM}.`)
+  //
+  // `extractFreeIdentifiersFromText` only sees `rewritten` in isolation —
+  // it has no way to know about `enclosingScope`, the loop-row bindings
+  // introduced OUTSIDE this expression's own AST (`isBound`'s second half,
+  // above). Without filtering by it too, a name legitimately shadowed by
+  // the enclosing loop row (never substituted, since `isBound` already
+  // skipped it during `visit`) still comes back as "free" here and trips
+  // the caller's `unsafeLocalNames` check — the exact same identifier the
+  // substitution step correctly left alone gets the UNSAFE sentinel
+  // anyway. Filtering by the same `enclosingScope.isBound` predicate keeps
+  // the two checks in agreement, matching this function's own docstring
+  // contract above (#2814 review).
+  const freeIdentifiers = extractFreeIdentifiersFromText(rewritten)
+  if (enclosingScope) {
+    for (const name of freeIdentifiers) {
+      if (enclosingScope.isBound(name)) freeIdentifiers.delete(name)
+    }
+  }
+  return { rewritten, freeIdentifiers }
 }
 
 export function extractFreeIdentifiersFromText(text: string): Set<string> {
@@ -430,6 +442,50 @@ export function extractMemoBodyExpr(computation: string): string {
   return `(() => ${body})()`
 }
 
+/**
+ * Which local consts are bare alias-hop chains that ultimately name a
+ * substitutable signal/memo getter (`isGetter`) — e.g. `const
+ * items__alias = items` where `items` is a signal getter. Returns
+ * alias name → origin getter name (the alias itself is never a key of
+ * its own map, so `origin !== alias` always holds for entries returned).
+ *
+ * A bare identifier alias of a getter is NOT an "inlinable const" in the
+ * ordinary sense (#2778): `populateCsrInlinable`'s generic path resolves
+ * a const's initializer through `csrSubstitute`/relocate, and `items`
+ * used bare (not called) is a `signal-getter` there, which relocate can
+ * only answer with its own `undefined` FALLBACK (correct when `items`
+ * itself appears bare, wrong once frozen as `items__alias`'s permanent
+ * value — a wrong substitution, not a missing one, so the #2468 scope
+ * gate can't see it either since `undefined` is a real in-scope global).
+ * Resolving the alias to its origin BEFORE that generic path runs, and
+ * registering it as the origin's own call-kind entry, means
+ * `items__alias()` is substituted by the exact mechanism that already
+ * substitutes `items()` correctly — one call-kind entry, not a second
+ * "identifier that means undefined-unless-called" special case.
+ *
+ * Reuses `resolveAliasOrigin` (`props-binding.ts`) — the same hop-walker
+ * `resolveRestSpreadOriginCore` uses for the props/rest alias question —
+ * rather than a second alias-chain walker for this different terminal
+ * set (a signal/memo NAME here, `restPropsName`/`propsObjectName` there).
+ */
+export function resolveGetterAliases(
+  localConstants: readonly ConstantInfo[],
+  isGetter: (name: string) => boolean,
+): Map<string, string> {
+  const constantValues = new Map<string, string | undefined>()
+  for (const c of localConstants) {
+    if (c.isModule) continue
+    constantValues.set(c.name, c.value)
+  }
+  const aliases = new Map<string, string>()
+  for (const c of localConstants) {
+    if (c.isModule || isGetter(c.name)) continue
+    const origin = resolveAliasOrigin(constantValues, c.name, (current) => (isGetter(current) ? current : null))
+    if (origin !== null && origin !== c.name) aliases.set(c.name, origin)
+  }
+  return aliases
+}
+
 /**
  * Build the CSR substitution env from the live `ClientJsContext`.
  *
@@ -442,11 +498,18 @@ export function extractMemoBodyExpr(computation: string): string {
  * in `compute-inlinability.ts`). Inlinable-const substitutions are
  * layered into a copy of this env at `generateCsrTemplate`'s entry,
  * reading from `ClientJsContext.csrInlinable`.
+ *
+ * `localConstants` is consulted ONLY to resolve bare getter aliases
+ * (`resolveGetterAliases`, #2778) — a name that is itself a signal/memo
+ * getter always wins the `substitutions.has` check there, so `signals`/
+ * `memos` stay the single source of truth for what a getter name means;
+ * this just extends which SOURCE NAMES reach that same meaning.
  */
 export function buildSignalMemoEnv(
   signals: readonly SignalInfo[],
   memos: readonly MemoInfo[],
   propsObjectName: string | null,
+  localConstants: readonly ConstantInfo[] = [],
 ): CsrEnv {
   const substitutions = new Map<string, CsrSubstitution>()
   for (const s of signals) {
@@ -474,6 +537,9 @@ export function buildSignalMemoEnv(
       freeIdentifiers: m.computationFreeIdentifiers ?? new Set(),
     })
   }
+  for (const [alias, origin] of resolveGetterAliases(localConstants, (n) => substitutions.has(n))) {
+    substitutions.set(alias, substitutions.get(origin)!)
+  }
   return { substitutions, propsObjectName }
 }
 
@@ -481,7 +547,7 @@ export function buildSignalMemoEnv(
  * Add the `?? <default>` SSR fallback to a signal's initial value when
  * the value is a bare `propsName.X` reference. Returns the value in raw
  * (props.X) form — the `propsObjectName → _p` rewrite is deferred to
- * `applyPropsRewrite` at emit time so the post-substitution
+ * `rewritePropsObjectRef` at emit time so the post-substitution
  * `isInlinableInTemplate` check still sees bridged-arg shapes (#1138).
  *
  * The `??` fallback prevents literal `undefined` from leaking into the