@barefootjs/jsx 0.33.1 → 0.33.3

package/src/ir-to-client-js/prop-handling.ts

@@ -5,6 +5,89 @@
 import type { ParamInfo, SignalInfo } from '../types.ts'
 import type { ClientJsContext } from './types.ts'
 import type { BindingScope } from '../scope/binding-scope.ts'
+import { resolveRestSpreadOriginCore } from '../props-binding.ts'
+
+/**
+ * Which of the component's two "forwards the caller's leftover props"
+ * bindings `name` ultimately names — `'rest'` for `ctx.restPropsName`
+ * (the destructured `...rest` binding), `'props'` for `ctx.propsObjectName`
+ * (a whole undestructured `(props)` parameter spread whole), or `null` when
+ * `name` is neither, walking through any bare `const x__alias = <name>`
+ * alias chain to get there (#2723's `alias-props` mutation aliases every
+ * destructured binding, the rest parameter included, e.g.
+ * `const props__alias = props`).
+ *
+ * A `{...spread}` attribute is recognised as "forwards the caller's
+ * leftover props" (routed to the `applyRestAttrs` runtime helper /
+ * excluded from the SSR template's `spreadAttrs({...})` merge, and — only
+ * for the `'rest'` case — given the destructured prop names to exclude
+ * from what it forwards) by comparing its source expression against
+ * exactly `ctx.restPropsName` / `ctx.propsObjectName`. Without this
+ * resolver an alias hop makes that comparison fail even though the spread
+ * still forwards the SAME object — `collect-elements.ts` then never
+ * registers the rest-attrs application at all, and `html-template.ts`'s
+ * merge path stops filtering the spread out, folding it into a
+ * `spreadAttrs({...})` call keyed by the alias name instead of the
+ * runtime-visible one.
+ *
+ * The walk itself lives in `props-binding.ts`'s `resolveRestSpreadOriginCore`,
+ * shared with Phase 1's slot-id decision so both phases agree on which
+ * spreads forward the caller's leftover props (#2754). This wrapper only
+ * supplies the `ClientJsContext`-shaped inputs.
+ */
+export function resolveRestSpreadOrigin(ctx: ClientJsContext, name: string): 'rest' | 'props' | null {
+  return resolveRestSpreadOriginCore(ctx, localConstantValues(ctx), name)
+}
+
+/**
+ * `ctx.localConstants` indexed by name, memoized per `ctx`.
+ *
+ * A `Map` rather than the `.find(` this file's other two constant lookups
+ * use, deliberately: those two are SHADOW-GUARDED lookups that
+ * `binding-scope-ratchet.test.ts` deliberately counts, and that ledger is
+ * shrink-only and at its floor. Resolving an alias chain hop-by-hop would
+ * have added a third counted use — and a hot one, since the walk queries
+ * once per hop — so it indexes instead, which is both outside the ledger's
+ * concern and cheaper than a linear scan per hop.
+ */
+const _localConstantValuesCache: WeakMap<ClientJsContext, ReadonlyMap<string, string | undefined>> = new WeakMap()
+
+function localConstantValues(ctx: ClientJsContext): ReadonlyMap<string, string | undefined> {
+  const cached = _localConstantValuesCache.get(ctx)
+  if (cached) return cached
+  const byName = new Map<string, string | undefined>()
+  for (const constant of ctx.localConstants) {
+    if (!byName.has(constant.name)) byName.set(constant.name, constant.value)
+  }
+  _localConstantValuesCache.set(ctx, byName)
+  return byName
+}
+
+/**
+ * Every name that resolves (via `resolveRestSpreadOrigin`) to either of the
+ * component's "forwards the caller's leftover props" bindings — used where
+ * callers need SET membership (`restSpreadNames?.has(...)` in
+ * `html-template.ts`) rather than a per-name resolution. Memoized per
+ * `ctx` (`WeakMap`, mirroring `free-refs.ts`'s `_bindingMapCache`) since
+ * some callers build this once per component and query it while walking
+ * the whole tree.
+ */
+const _restSpreadNamesCache: WeakMap<ClientJsContext, ReadonlySet<string>> = new WeakMap()
+
+export function resolveRestSpreadNames(ctx: ClientJsContext): ReadonlySet<string> {
+  const cached = _restSpreadNamesCache.get(ctx)
+  if (cached) return cached
+
+  const names = new Set<string>()
+  if (ctx.restPropsName) names.add(ctx.restPropsName)
+  if (ctx.propsObjectName) names.add(ctx.propsObjectName)
+  for (const constant of ctx.localConstants) {
+    if (resolveRestSpreadOrigin(ctx, constant.name) !== null) names.add(constant.name)
+  }
+
+  _restSpreadNamesCache.set(ctx, names)
+  return names
+}
 
 /**
  * Expand dynamic prop value by resolving local constants.

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

@@ -174,11 +174,30 @@ export function decideWrapForChildProp(
  * The signal-getter and memo regexes (`\b<name>\s*\(`) still run against
  * the raw string — those are call-shape patterns, not bare-identifier
  * checks, and are outside the scope of #1267.
+ *
+ * A reference that only reaches a signal/memo/prop through an intervening
+ * `const x__alias = x` hop is walked via `ctx.localConstants` below (#2723)
+ * — see that block's own comment for why this lives here rather than on
+ * `BindingScope` or a new tracking structure.
  */
 export function needsEffectWrapper(
   expr: string,
   ctx: ClientJsContext,
   freeIdentifiers?: ReadonlySet<string>,
+): boolean {
+  return needsEffectWrapperCore(expr, ctx, freeIdentifiers, new Set())
+}
+
+/**
+ * `needsEffectWrapper`'s actual body, with a `visitedConstants` accumulator
+ * threaded through the local-constant recursion below so a cycle
+ * (`const a = b; const b = a`) terminates instead of looping forever.
+ */
+function needsEffectWrapperCore(
+  expr: string,
+  ctx: ClientJsContext,
+  freeIdentifiers: ReadonlySet<string> | undefined,
+  visitedConstants: Set<string>,
 ): boolean {
   for (const signal of ctx.signals) {
     if (identifierCallPattern(signal.getter).test(expr)) {
@@ -209,6 +228,46 @@ export function needsEffectWrapper(
     if (propsAccess.test(expr)) return true
   }
 
+  // #2723: a bare `const x__alias = x` hop between a destructured prop and
+  // its use site breaks every check above — `expr` (or its precomputed
+  // `freeIdentifiers`) names the ALIAS, never the prop it stands for, so
+  // none of the direct prop/signal/memo checks fire even though the value
+  // is exactly as reactive as `x` itself. Phase 1's `isReactiveExpression`
+  // already sees through this (`isPropsReference` / `isSignalOrMemoReference`
+  // in jsx-to-ir.ts recursively walk `ctx.patterns.constants`, the
+  // `TransformContext` twin of this function's `ctx.localConstants`) —
+  // this is that SAME constant-chain walk, ported onto Phase 2's string
+  // expression so its independent wrap decision agrees with Phase 1's
+  // `hasReactiveAttributes` slotId decision instead of silently
+  // disagreeing on whether the attribute gets a `createEffect` at all.
+  //
+  // This is NOT loop/callback binding resolution — `BindingScope` (#2482)
+  // answers "what name is this loop row's own item/index/destructure
+  // binding," a question with no bearing on a component-body `const`
+  // aliasing a prop — so it does not belong there. It also isn't a new ad
+  // hoc tracking structure: `ctx.localConstants` is the existing per-
+  // component constant list this file already reads (see
+  // `expandConstantForReactivity` above), walked here with a `visited`
+  // guard for the same reason `free-refs.ts`'s `resolveConstantInitializerRefs`
+  // carries one — a constant cycle must terminate, not loop forever.
+  //
+  // Constants whose initializer contains an arrow/function expression are
+  // skipped, mirroring `resolveConstantInitializerRefs`'s `containsArrow`
+  // skip: refs inside a function body run when (and if) the function is
+  // invoked, not merely because something reads the bare function value.
+  for (const constant of ctx.localConstants) {
+    if (visitedConstants.has(constant.name)) continue
+    if (constant.value === undefined || constant.containsArrow) continue
+    const referenced = freeIdentifiers
+      ? freeIdentifiers.has(constant.name)
+      : tokenContainsIdent(expr, constant.name)
+    if (!referenced) continue
+    visitedConstants.add(constant.name)
+    if (needsEffectWrapperCore(constant.value, ctx, constant.freeIdentifiers, visitedConstants)) {
+      return true
+    }
+  }
+
   return false
 }
 

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

@@ -1,7 +1,8 @@
 /**
- * AST-based rename of the source-level props object name (e.g. `props`
- * or a user-supplied destructure name) → the generated parameter name
- * `_p` across the joined init-body string.
+ * AST-based rename of the source-level props object name(s) (e.g. `props`,
+ * a user-supplied destructure name, or a destructured rest binding like
+ * `...rest`) → the generated parameter name `_p` across the joined
+ * init-body string.
  *
  * Replaces the pre-C2 regex hack `\\b<propsObjectName>\\b` which silently
  * matched contexts that should NOT have been rewritten:
@@ -27,15 +28,54 @@ import { PROPS_PARAM } from './utils.ts'
 import { identifierPattern } from '../identifier-pattern.ts'
 
 /**
- * Rename every value-position reference to `propsObjectName` in `code`
- * to `_p`. No-op when `propsObjectName` is null (destructured-prop mode
- * — the analyzer already pre-rewrites bare prop refs into `templateXxx`
- * fields) or already equals `_p`.
+ * Rename every value-position reference to `propsObjectName` — and,
+ * independently, to `restPropsName` (#2723) — in `code` to `_p`.
+ *
+ * `restPropsName` matters even in destructured-prop mode (where
+ * `propsObjectName` is null and the analyzer already pre-rewrites bare
+ * NAMED-prop refs into `templateXxx` fields, per the historical
+ * `propsObjectName ?? 'props'` fallback this replaces): a destructured
+ * rest binding (`const { className, ...rest } = props` /
+ * `function F({ className, ...rest })`) is not itself a "named prop," so
+ * nothing pre-rewrites a bare reference to it. Such a reference reaches
+ * this pass whenever the init body needs `rest`'s OWN VALUE rather than
+ * just recognising a `{...rest}` spread by name — e.g. a `const
+ * rest__alias = rest` hop (#2723's `alias-props` mutation aliases the
+ * rest parameter along with every named one). A rest binding named
+ * anything but "props" (`...rest`, `...leftover`) left such a reference
+ * dangling as a `ReferenceError`, so the analyzer's actual
+ * `restPropsName` is passed in to remove that guesswork.
+ *
+ * The `propsObjectName ?? 'props'` fallback is KEPT alongside it, not
+ * replaced by it. The two do different jobs, and reading the fallback as
+ * merely a lucky guess at the rest binding's name regressed the
+ * doc-example `StatementExample`: a component that destructures its
+ * parameters can still write `props.itemId` inside a handler body, and
+ * `propsObjectName` is null for exactly that shape — so dropping the
+ * fallback left `props.itemId` in the emitted init, where no `props`
+ * binding exists to satisfy it.
+ *
+ * Each candidate name is rewritten independently and skipped when null,
+ * already `_p`, or a duplicate of one already processed (a component
+ * whose props param IS its own rest destructure target, if that shape
+ * ever arises, would otherwise walk the AST twice for the same name).
  */
-export function rewritePropsObjectRef(code: string, propsObjectName: string | null): string {
-  const srcPropsName = propsObjectName ?? 'props'
-  if (srcPropsName === PROPS_PARAM) return code
+export function rewritePropsObjectRef(
+  code: string,
+  propsObjectName: string | null,
+  restPropsName: string | null = null,
+): string {
+  let result = code
+  const seen = new Set<string>()
+  for (const srcPropsName of [propsObjectName ?? 'props', restPropsName]) {
+    if (srcPropsName === null || srcPropsName === PROPS_PARAM || seen.has(srcPropsName)) continue
+    seen.add(srcPropsName)
+    result = rewriteOneName(result, srcPropsName)
+  }
+  return result
+}
 
+function rewriteOneName(code: string, srcPropsName: string): string {
   // Quick exit when the name doesn't appear at all.
   if (!identifierPattern(srcPropsName).test(code)) return code
 

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

@@ -25,6 +25,7 @@ import {
   loopEndMarker,
   loopItemMarker,
   toHTMLAttrName as toHtmlAttrName,
+  keyAttrName as sharedKeyAttrName,
 } from '@barefootjs/shared'
 
 export { DATA_KEY, DATA_KEY_PREFIX, DATA_BF_PH, BF_LOOP_START, BF_LOOP_END, loopStartMarker, loopEndMarker, loopItemMarker, toHtmlAttrName }
@@ -39,9 +40,36 @@ export const PROPS_PARAM = '_p'
  * Get the data-key attribute name for a given loop depth.
  * Outer loop (depth 0): 'data-key'
  * Nested loops (depth N): 'data-key-N'
+ *
+ * Re-exported from `@barefootjs/shared` (the single source of truth also
+ * used by `jsx-to-ir.ts`'s `IRElement.keyAttr` resolution) so existing
+ * imports of this module keep working.
  */
-export function keyAttrName(loopDepth: number): string {
-  return loopDepth > 0 ? `${DATA_KEY_PREFIX}${loopDepth}` : DATA_KEY
+export const keyAttrName = sharedKeyAttrName
+
+/**
+ * Build the trailing `, <bfId>, <keyAttrName>` arguments for a NESTED
+ * (`loopDepth > 0`) `mapArray(...)` call — `inner-loop.ts` / `loop-child-arm.ts`,
+ * the only two stringify sites whose loop can be nested (#2753 Shape B: the
+ * runtime otherwise has no way to know it isn't the outermost loop, and
+ * always stamped the plain `data-key` name).
+ *
+ * A depth-0 (or unkeyed) loop needs no change at all: `mapArray`'s own
+ * default (`BF_KEY`, `'data-key'`) is already correct there, and an unkeyed
+ * loop's runtime never stamps a key attribute regardless of the name — so
+ * this returns `bfIdArg` UNCHANGED, keeping every other call site (and every
+ * existing depth-0 call here) byte-identical.
+ *
+ * `bfIdArg` is the existing profiling-id suffix (e.g. `profileBindingId(...)`,
+ * either `''` or `, "<id>"`) already threaded through these two call sites —
+ * an empty one is widened to an explicit `, undefined` placeholder so the
+ * name lands in the right positional slot (`mapArray`'s 6th parameter is
+ * `bfId`, not `keyAttrName`).
+ */
+export function mapArrayKeyArgs(bfIdArg: string, keyed: boolean, loopDepth: number): string {
+  if (!keyed || loopDepth <= 0) return bfIdArg
+  const bfIdSlot = bfIdArg || ', undefined'
+  return `${bfIdSlot}, ${JSON.stringify(keyAttrName(loopDepth))}`
 }
 
 /**