@barefootjs/jsx 0.31.4 → 0.31.6

package/src/__tests__/mutable-binding-writers.test.ts

@@ -0,0 +1,133 @@
+/**
+ * Unit coverage for `findAssignedNames` / `closeOverWritersOfMutableBindings`
+ * (#2598).
+ *
+ * The e2e half lives in `packages/vite/src/__tests__/mutable-binding-writers.test.ts`
+ * (real `vite build`, emitted template type-checked). This half pins what an
+ * e2e fixture can't isolate: which syntactic forms count as a WRITE, and the
+ * reads/false matches that must not. Those negative cases are why this uses
+ * the AST — a regex for `name\s*=` would match every one of them.
+ */
+import { describe, test, expect } from 'bun:test'
+import { findAssignedNames, closeOverWritersOfMutableBindings } from '../module-exports.ts'
+
+const candidates = (...names: string[]) => new Set(names)
+
+describe('findAssignedNames', () => {
+  test('plain assignment', () => {
+    expect([...findAssignedNames(`el = node`, candidates('el'))]).toEqual(['el'])
+  })
+
+  test('compound assignment', () => {
+    expect([...findAssignedNames(`seq += 1`, candidates('seq'))]).toEqual(['seq'])
+  })
+
+  test('logical assignment', () => {
+    expect([...findAssignedNames(`cached ??= build()`, candidates('cached'))]).toEqual(['cached'])
+  })
+
+  test('postfix and prefix update', () => {
+    expect([...findAssignedNames(`a++`, candidates('a'))]).toEqual(['a'])
+    expect([...findAssignedNames(`--b`, candidates('b'))]).toEqual(['b'])
+  })
+
+  test('assignment nested inside a function body', () => {
+    const body = `(el) => { if (el) { highlightEl = el } }`
+    expect([...findAssignedNames(body, candidates('highlightEl'))]).toEqual(['highlightEl'])
+  })
+
+  test('reports only the candidates asked about', () => {
+    const body = `a = 1; b = 2; c = 3`
+    expect([...findAssignedNames(body, candidates('b'))]).toEqual(['b'])
+  })
+
+  test('a read is not a write', () => {
+    expect([...findAssignedNames(`const x = el`, candidates('el'))]).toEqual([])
+  })
+
+  test('a comparison is not a write', () => {
+    expect([...findAssignedNames(`if (el == null) {}`, candidates('el'))]).toEqual([])
+    expect([...findAssignedNames(`if (el === other) {}`, candidates('el'))]).toEqual([])
+  })
+
+  test('a property write through the binding is not a write TO it', () => {
+    // `el` keeps whatever it already held — this cannot be what gives a
+    // never-narrowed binding its value.
+    expect([...findAssignedNames(`el.scrollTop = 0`, candidates('el'))]).toEqual([])
+  })
+
+  test('a same-named property key is not a write', () => {
+    expect([...findAssignedNames(`const o = { el: 1 }`, candidates('el'))]).toEqual([])
+  })
+
+  test('`name=` inside a string or JSX attribute is not a write', () => {
+    expect([...findAssignedNames(`const s = "el = node"`, candidates('el'))]).toEqual([])
+    expect([...findAssignedNames(`<div data-x="el = node" />`, candidates('el'))]).toEqual([])
+  })
+
+  test('no candidates means no parse and no results', () => {
+    expect([...findAssignedNames(`el = node`, candidates())]).toEqual([])
+  })
+})
+
+describe('closeOverWritersOfMutableBindings', () => {
+  // `declarations` carries the local `let` bindings themselves alongside the
+  // functions, exactly as the adapter builds it (localConstants +
+  // localFunctions) — a binding only counts as "surviving" if it is in this
+  // list and reachable.
+  const decls = [
+    { name: 'binding', body: `null` },
+    // Reachable from the rendered JSX below.
+    { name: 'reader', body: `() => { if (binding) return binding.x; return 0 }` },
+    // Reachable ONLY through a stripped attribute — the writer.
+    { name: 'writer', body: `(el) => { binding = el }` },
+    // Reachable from nothing at all; must stay pruned.
+    { name: 'orphan', body: `() => { unrelated = 1 }` },
+  ]
+  const rendered = `<div onScroll={reader} />`
+
+  test('pulls in the writer of a surviving mutable binding', () => {
+    const out = closeOverWritersOfMutableBindings(rendered, decls, new Set(['binding']))
+    expect(out.has('reader')).toBe(true)
+    expect(out.has('writer')).toBe(true)
+  })
+
+  test('leaves declarations that write nothing reachable alone', () => {
+    const out = closeOverWritersOfMutableBindings(rendered, decls, new Set(['binding']))
+    expect(out.has('orphan')).toBe(false)
+  })
+
+  test('does not retain a writer when the binding itself was pruned', () => {
+    // Nothing references `binding`, so it is not emitted and its writer is
+    // dead client-only code — the pruning this feature must not undo.
+    const out = closeOverWritersOfMutableBindings(`<div />`, decls, new Set(['binding']))
+    expect(out.has('writer')).toBe(false)
+    expect(out.has('reader')).toBe(false)
+  })
+
+  test('is a no-op when nothing is mutable', () => {
+    const withMutables = closeOverWritersOfMutableBindings(rendered, decls, new Set(['binding']))
+    const withoutMutables = closeOverWritersOfMutableBindings(rendered, decls, new Set())
+    expect(withoutMutables.has('writer')).toBe(false)
+    expect(withMutables.has('writer')).toBe(true)
+  })
+
+  test('reaches a writer that is only retained transitively', () => {
+    // `outerWriter` writes `a`; retaining it makes `b` reachable, whose own
+    // writer must then come along too — one round is not enough.
+    const chained = [
+      { name: 'a', body: `null` },
+      { name: 'b', body: `null` },
+      { name: 'reader', body: `() => (a ? a.x : 0)` },
+      { name: 'outerWriter', body: `(el) => { a = el; touch(b) }` },
+      { name: 'innerWriter', body: `(el) => { b = el }` },
+    ]
+    const out = closeOverWritersOfMutableBindings(
+      `<div onScroll={reader} />`,
+      chained,
+      new Set(['a', 'b']),
+    )
+    expect(out.has('outerWriter')).toBe(true)
+    expect(out.has('innerWriter')).toBe(true)
+  })
+})

package/src/__tests__/preamble-conditional-reactivity.test.ts

@@ -0,0 +1,191 @@
+/**
+ * #2596 — inside a `.map()` callback, a conditional whose condition is a
+ * bare reference to a preamble-declared local (a pre-return `const` in the
+ * callback body) never got its IR `reactive` flag set, even when the
+ * preamble local reads a signal:
+ *
+ *   {items().map((item) => {
+ *     const label = item.title || fallback()   // preamble local reading a signal
+ *     return <li>{label ? <Badge/> : <Placeholder/>}</li>   // never re-evaluated
+ *   })}
+ *
+ * Root cause: Phase 1's conditional-reactivity classifiers
+ * (`isReactiveExpression` for the condition's own text, `referencesLoopParam`
+ * for item/index/destructure names via `BindingScope.valueBoundNames()`) only
+ * ever see the token `label` — never its declaration — so a bare preamble-
+ * local reference tripped neither.
+ *
+ * Fix (`jsx-to-ir.ts`):
+ *  - `computePreambleReactiveNames` determines which preamble-declared names
+ *    are THEMSELVES reactive — read a signal/memo/reactive prop, directly or
+ *    transitively through an earlier preamble declaration — by re-running
+ *    the SAME `isReactiveExpression` classifier already used for ordinary
+ *    conditions, against each declaration's initializer.
+ *  - `markPreambleConditionalReactivity` is a new post-hoc pass (same shape
+ *    as `collectPreambleRegions`/`markPreambleAttrSlots`, #2447) that grants
+ *    `reactive: true` + a slot id to a loop-body conditional whose condition
+ *    bare-references one of those names.
+ *
+ * This alone isn't sufficient — Phase 2's `collectLoopChildConditionals`
+ * independently re-derives reactivity from the condition's EXPANDED text via
+ * `classifyReactivity`, and `expandConstantForReactivity`'s shadow guard
+ * (#2482 Stage 1b) deliberately leaves a preamble-bound identifier like
+ * `label` unexpanded, so `classifyReactivity('label', …)` always reads
+ * 'none'. `collectLoopChildConditionals` and `emitOuterConditional` (in
+ * `ir-to-client-js/`) got the same `readsPreamble` bypass +
+ * preamble-re-run-in-getter treatment `collectLoopChildReactiveAttrs`
+ * already had (#2447) — the condition-position twin.
+ *
+ * These tests assert the COMPILED OUTPUT shape (mirrors
+ * `csr-materialize-loop-preamble-shadow.test.ts` and
+ * `preamble-region-patch.test.ts`'s convention: compiler-internals
+ * correctness is a generated-code-shape pin, not a live-DOM test — DOM
+ * execution of `insert()`/`mapArrayLazy`'s own reactive-tracking contract is
+ * covered by their own runtime unit tests).
+ *
+ * Depending on loop-row shape, the fix surfaces through one of two Phase 2
+ * plans — both draw from the SAME `collectLoopChildConditionals` fix:
+ *  - Both branches "wiring-free static elements" (`analyzeLazyConditional`,
+ *    §9.4 L3): the lazy-row plan (`mapArrayLazy`), which recomputes the
+ *    preamble in `applyItem` (per-row) AND `applyOuter` (outer-signal
+ *    effect, primed by reading the signal unconditionally).
+ *  - Otherwise: the eager `mapArray` + `insert()` plan, which recomputes the
+ *    preamble inside the getter passed to `insert()`.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function clientJsFor(source: string): string {
+  const result = compileJSX(source, 'Repro.tsx', { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')
+  expect(clientJs).toBeDefined()
+  return clientJs!.content
+}
+
+describe('preamble-conditional-reactivity (#2596)', () => {
+  test('(a) a conditional condition reading a signal-derived preamble local is reactive (lazy-row plan)', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: { id: number; title: string }[] }) {
+        const [fallback, setFallback] = createSignal('x')
+        return (
+          <ul>
+            {items.map((item) => {
+              const label = item.title || fallback()
+              return <li key={item.id}>{label ? <span>yes</span> : <span>no</span>}</li>
+            })}
+          </ul>
+        )
+      }
+    `)
+    // Both arms are wiring-free static elements — eligible for the lazy-row
+    // plan (§9.4 L3), which carries no per-row insert()/createEffect.
+    expect(js).toContain('mapArrayLazy(')
+    // The preamble re-runs (loop-param accessor form, `item()`) inside BOTH
+    // apply bodies — `applyItem` (per-row, same-key update) and `applyOuter`
+    // (the outer-signal effect) — never the plain (`item.title`) form.
+    const preambleRerun = /const label = item\(\)\.title \|\| fallback\(\);/g
+    expect(js.match(preambleRerun)?.length).toBeGreaterThanOrEqual(2)
+    // `applyOuter` primes the signal read unconditionally (§9.3(3)) so the
+    // effect subscribes even when the row list is momentarily empty — this
+    // IS the fix: before it, nothing in the emitted plan read `fallback()`
+    // outside the one-time row-construction line, so the effect never
+    // subscribed and the branch froze at its SSR-time value.
+    expect(js).toMatch(/applyOuter:\s*\(__es, __seed\) => \{\s*fallback\(\)/)
+    // The conditional actually got wired — not the empty no-op body a
+    // non-reactive conditional gets (see negative-case test below).
+    expect(js).not.toContain('applyItem: () => {}')
+  })
+
+  test('(b) the same shape through the eager insert() plan when a branch carries its own reactive text', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: { id: number; title: string }[] }) {
+        const [fallback, setFallback] = createSignal('x')
+        return (
+          <ul>
+            {items.map((item) => {
+              const label = item.title || fallback()
+              return <li key={item.id}>{label ? <span>{item.title} yes</span> : <span>no</span>}</li>
+            })}
+          </ul>
+        )
+      }
+    `)
+    // A branch with its own reactive text disqualifies the lazy-row plan
+    // (`analyzeLazyConditional` requires wiring-free arms) — this exercises
+    // the OTHER Phase 2 path the fix threads through.
+    expect(js).toContain('mapArray(')
+    expect(js).not.toContain('mapArrayLazy(')
+    // `insert()`'s condition getter re-runs the preamble before reading
+    // `label` — the local isn't otherwise in scope inside that closure.
+    expect(js).toMatch(
+      /insert\(__el, 's1', \(\) => \{ const label = item\(\)\.title \|\| fallback\(\);; return \(label\) \}/,
+    )
+  })
+
+  test('(c) a conditional reading a NON-reactive preamble local stays non-reactive', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: { id: number; title: string }[] }) {
+        const [count, setCount] = createSignal(0)
+        return (
+          <ul>
+            {items.map((item) => {
+              const label = item.title
+              return <li key={item.id}>{label ? <span>yes</span> : <span>no</span>}</li>
+            })}
+          </ul>
+        )
+      }
+    `)
+    // Still lazy-eligible (both arms are wiring-free statics), but the
+    // conditional itself never got a slot id / reactive flag — no per-row
+    // OR per-outer wiring for it at all.
+    expect(js).toContain('mapArrayLazy(')
+    expect(js).toContain('applyItem: () => {}')
+    expect(js).not.toContain('applyOuter')
+    expect(js).not.toContain('insert(')
+    // The condition's static, row-construction-time value is still baked
+    // into the row template (correct — it's genuinely never going to
+    // change without a fresh row).
+    expect(js).toMatch(/label \? `<span>yes<\/span>` : `<span>no<\/span>`/)
+  })
+
+  test('(d) transitive: a preamble local reading another preamble local that reads a signal', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Widget({ items }: { items: { id: number; title: string }[] }) {
+        const [fallback, setFallback] = createSignal('x')
+        return (
+          <ul>
+            {items.map((item) => {
+              const base = fallback()
+              const label = item.title || base
+              return <li key={item.id}>{label ? <span>yes</span> : <span>no</span>}</li>
+            })}
+          </ul>
+        )
+      }
+    `)
+    // `computePreambleReactiveNames` walks preamble declarations in source
+    // order, folding each name into the reactive set when its initializer
+    // reads a signal/memo/prop directly OR references an earlier name
+    // already in that set — `label` qualifies via `base`, not via any
+    // signal call of its own.
+    expect(js).toContain('mapArrayLazy(')
+    expect(js).not.toContain('applyItem: () => {}')
+    expect(js).toMatch(/applyOuter:\s*\(__es, __seed\) => \{\s*fallback\(\)/)
+    const preambleRerun = /const base = fallback\(\); const label = item\(\)\.title \|\| base;/g
+    expect(js.match(preambleRerun)?.length).toBeGreaterThanOrEqual(2)
+  })
+})

package/src/__tests__/signal-setter-updater-type.test.ts

@@ -0,0 +1,81 @@
+/**
+ * Regression test for #2573 (chart TS7006 family): the SSR no-op signal
+ * setter stub was declared as `(..._args: any[]) => {}`. Calling it with
+ * an updater function — `setBars((prev) => [...prev, bar])` — puts that
+ * arrow in a rest-`any[]` argument position, not a function-typed one, so
+ * TypeScript has no contextual signature to infer the arrow's own
+ * parameter from and flags it implicit-any (TS7006). Runtime output
+ * (client JS) was always correct; this is a type-level emission defect in
+ * the SSR template only.
+ *
+ * The real `createSignal<T>` setter accepts `T | ((prev: T) => T)`
+ * (`packages/client/src/reactive.ts`'s `Signal<T>`). The stub now mirrors
+ * that signature whenever the signal's type is known (`SignalInfo.type`,
+ * the same field `needsTypeAssertion` already reads for the getter), so
+ * the updater arrow's parameter infers from the real element type.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { HonoAdapter } from '../../../../packages/adapter-hono/src/adapter/hono-adapter'
+
+describe('signal setter updater-function typing in emitted templates (#2573)', () => {
+  test('a typed signal gets an updater-aware setter stub', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Bar { id: string; height: number }
+
+      export function Chart() {
+        const [bars, setBars] = createSignal<Bar[]>([])
+
+        // Called directly from the returned JSX (not from an onXxx handler
+        // prop, which SSR stubs to a no-op) so it — and the setter call
+        // inside it — stays reachable into the emitted template.
+        const addBar = (bar: Bar) => {
+          setBars((prev) => [...prev, bar])
+          return bars().length
+        }
+
+        return <div>{addBar({ id: 'a', height: 1 })}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'Chart.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    expect(template.content).toContain(
+      'const setBars: (valueOrFn: Bar[] | ((prev: Bar[]) => Bar[])) => void = () => {}',
+    )
+  })
+
+  test('a signal with no resolvable type keeps the untyped rest-args stub', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function Widget(props: { initial: unknown }) {
+        const [value, setValue] = createSignal(props.initial)
+
+        const reset = () => {
+          setValue(props.initial)
+          return value()
+        }
+
+        return <div>{String(reset())}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'Widget.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    expect(template.content).toContain('const setValue = (..._args: any[]) => {}')
+  })
+})

package/src/adapters/jsx-adapter.ts

@@ -17,7 +17,7 @@ import { BF_SCOPE, BF_SLOT, BF_COND } from '@barefootjs/shared'
 import { BaseAdapter } from './interface.ts'
 import type { CallbackBodyAcceptor } from './interface.ts'
 import { ENV_SIGNAL_CLIENT_FACTORY } from './env-signal.ts'
-import { formatParamWithType, findReachableNames } from '../module-exports.ts'
+import { formatParamWithType, closeOverWritersOfMutableBindings } from '../module-exports.ts'
 import { extractFreeIdentifiersFromText } from '../ir-to-client-js/csr-substitute.ts'
 import { identifierPattern } from '../identifier-pattern.ts'
 
@@ -113,7 +113,15 @@ export abstract class JsxAdapter extends BaseAdapter {
     ]
 
     // Find reachable declarations via transitive dependency analysis
-    const reachable = findReachableNames(primaryRefText, declarations)
+    const reachable = closeOverWritersOfMutableBindings(
+      primaryRefText,
+      declarations,
+      new Set(
+        ir.metadata.localConstants
+          .filter(c => (c.declarationKind ?? 'const') !== 'const')
+          .map(c => c.name),
+      ),
+    )
 
     // Also check which signal setters are referenced
     const reachableBodies = [...reachable].map(name => {
@@ -168,7 +176,25 @@ export abstract class JsxAdapter extends BaseAdapter {
       if (signal.setter) {
         const setterUsed = identifierPattern(signal.setter).test(setterRefText)
         if (setterUsed) {
-          lines.push(`  const ${signal.setter} = (..._args: any[]) => {}`)
+          // The real `createSignal<T>` setter accepts `T | ((prev: T) =>
+          // T)` (`packages/client/src/reactive.ts`'s `Signal<T>`). The
+          // untyped `(..._args: any[]) => {}` stub gave every `setX((prev)
+          // => ...)` updater-function call site an `any[]`-typed argument
+          // position — not a function-typed one — so the arrow's own
+          // `prev` parameter had no contextual type to infer from and
+          // `tsc` flagged it implicit-any (TS7006, #2573 chart family).
+          // Mirror the real setter's signature whenever the signal's type
+          // is known, so updater-function callers keep their inference;
+          // fall back to the untyped stub only when it isn't (matches
+          // `needsTypeAssertion`'s `'unknown'` guard just above).
+          const setterType = preserveTypes && signal.type.kind !== 'unknown'
+            ? `(valueOrFn: ${signal.type.raw} | ((prev: ${signal.type.raw}) => ${signal.type.raw})) => void`
+            : null
+          lines.push(
+            setterType
+              ? `  const ${signal.setter}: ${setterType} = () => {}`
+              : `  const ${signal.setter} = (..._args: any[]) => {}`,
+          )
         }
       }
     }

package/src/adapters/loop-bound-names.ts

@@ -16,6 +16,24 @@
  * degrades to the ALREADY-accepted residual (`+` falls back to numeric,
  * same as before #2212 for an unresolvable operand) rather than ever
  * producing silently-wrong output.
+ *
+ * #2482 (BindingScope) does NOT replace this: it answers "is NAME bound
+ * AT THIS POSITION", a live, position-accurate query built by walking
+ * INTO scopes during a render-time (or render-shaped) tree walk. This
+ * function answers a deliberately different, coarser question —
+ * "is NAME EVER a loop-bound name ANYWHERE in the component" — a single
+ * whole-component prepass run once at `generate()` entry, before any
+ * loop scope exists to thread. The two are complementary, not
+ * duplicative: swapping this for `BindingScope` would require re-deriving
+ * a position-accurate answer at every string-typed-operand call site,
+ * which is exactly the coarse-but-safe trade-off this function exists to
+ * avoid. Stays outside the `binding-scope-ratchet.test.ts` ledger for an
+ * incidental reason too — a lowercase-`l`-led spelling of this file's own
+ * export once lived as a per-adapter ref-counted-map field name (fully
+ * migrated away in an earlier #2482 stage) that the ledger's scan tracked;
+ * this function's own `collectLoopBoundNames` name is capitalized
+ * differently (a capital `L`) and so was never inside that scan's reach in
+ * the first place.
  */
 
 import type { ComponentIR, IRNode } from '../types.ts'

package/src/adapters/test-adapter.ts

@@ -164,7 +164,10 @@ export class TestAdapter extends JsxAdapter {
     // Module-export keyword belongs to the adapter: it knows the target language
     // and whether the source declared the component as exported.
     const exportPrefix = ir.metadata.isExported === false ? '' : 'export '
-    lines.push(`${exportPrefix}function ${name}(${fullPropsDestructure}${typeAnnotation}${noArgDefault}) {`)
+    // Carry the source component's own generic type parameters, if any
+    // (mirrors `HonoAdapter` — see `IRMetadata.typeParameters`'s docstring).
+    const typeParameters = ir.metadata.typeParameters ?? ''
+    lines.push(`${exportPrefix}function ${name}${typeParameters}(${fullPropsDestructure}${typeAnnotation}${noArgDefault}) {`)
 
     // Generate scope ID
     if (hasClientInteractivity) {

package/src/augment-inherited-props.ts

@@ -464,14 +464,26 @@ export function collectModuleStringConsts(
  * compile-time lookup (the icon registry's `strokePaths['chevron-down']`,
  * pagination's `variantClasses.ghost`; #1896 / #1897). Returns the
  * looked-up scalar, or `null` for any other shape so callers fall back
- * to their generic lowering. Shared by all three SSR template adapters;
+ * to their generic lowering. Shared by all seven template-string adapters;
  * the prop-KEYED variant of the pattern lives in `parseRecordIndexAccess`.
+ *
+ * `isShadowed` is REQUIRED (#2482 Stage 2) rather than left to caller
+ * discipline: an enclosing loop callback's own param/index/destructure/
+ * preamble binding of the same name as `objectName` (`.map((cfg) =>
+ * <li>{cfg.x}</li>)` shadowing a module `const cfg = {…}`) must resolve to
+ * the ROW value, not the outer const's member — every call site used to
+ * check this itself, against its own ad-hoc per-adapter shadow-name
+ * bookkeeping, with no static guarantee a new caller wouldn't forget it.
+ * Pass `scope.isBound` (or `scope.asShadowPredicate()`) from the caller's
+ * threaded `BindingScope`.
  */
 export function lookupStaticRecordLiteral(
   objectName: string,
   key: string,
   constants: IRMetadata['localConstants'] | undefined,
+  isShadowed: (name: string) => boolean,
 ): { kind: 'string' | 'number'; text: string } | null {
+  if (isShadowed(objectName)) return null
   const constInfo = (constants ?? []).find(c => c.name === objectName && c.isModule)
   if (constInfo?.value === undefined) return null
   const sf = ts.createSourceFile(

package/src/compiler.ts

@@ -624,6 +624,23 @@ function compileMultipleComponents(
 // Helpers
 // =============================================================================
 
+/**
+ * Verbatim text of the component function's own generic type parameter
+ * list (`<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase
+ * = EdgeBase>`), or `null` when the component isn't generic. Source text
+ * per parameter (`node.getText(sourceFile)`), not a re-printed AST, so
+ * constraints/defaults/comments round-trip exactly like `ConstantInfo.
+ * typeAnnotation` does for `let` (#2589) — see `IRMetadata.typeParameters`.
+ */
+function componentTypeParametersText(
+  componentNode: ts.FunctionDeclaration | ts.ArrowFunction | null,
+  sourceFile: ts.SourceFile,
+): string | null {
+  const typeParameters = componentNode?.typeParameters
+  if (!typeParameters || typeParameters.length === 0) return null
+  return `<${typeParameters.map(p => p.getText(sourceFile)).join(', ')}>`
+}
+
 export function buildMetadata(
   ctx: ReturnType<typeof analyzeComponent>,
 ): IRMetadata {
@@ -634,6 +651,7 @@ export function buildMetadata(
     isClientComponent: ctx.hasUseClientDirective,
     typeDefinitions: ctx.typeDefinitions,
     propsType: ctx.propsType,
+    typeParameters: componentTypeParametersText(ctx.componentNode, ctx.sourceFile),
     propsParams: ctx.propsParams,
     propsObjectName: ctx.propsObjectName,
     restPropsName: ctx.restPropsName,