@barefootjs/jsx 0.33.4 → 0.34.0

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/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/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/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

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))
     }