@barefootjs/jsx 0.33.2 → 0.33.3

package/src/jsx-to-ir.ts

@@ -49,7 +49,7 @@ import {
   rewriteBarePropRefs as rewriteBarePropRefsCore,
   collectAstPropRefs,
 } from './prop-rewrite.ts'
-import { buildPropAliasMap } from './props-binding.ts'
+import { buildPropAliasMap, resolveRestSpreadOriginCore } from './props-binding.ts'
 import { resolveFreeRefs, isNameBound as isNameBoundInEnv, type BindingEnvironment } from './free-refs.ts'
 import { computeFileScope } from './ir-to-client-js/component-scope.ts'
 import { createTemplateAwareStringProtector } from './ir-to-client-js/html-template.ts'
@@ -61,7 +61,7 @@ import { extractFreeIdentifiersFromNode, initializerShapeContainsJsx, extractMul
 import { iterateJsTokens, replaceInExprContexts } from './scanner/js-scanner.ts'
 import { reconstructAsSegments } from './strip-types.ts'
 import { templatePartsToJsExpr } from './template-parts.ts'
-import { toHTMLAttrName, decodeEntities } from '@barefootjs/shared'
+import { toHTMLAttrName, decodeEntities, BF_KEY, keyAttrName } from '@barefootjs/shared'
 import { BindingScope } from './scope/binding-scope.ts'
 import { identifierPattern, identifierCallPattern } from './identifier-pattern.ts'
 
@@ -93,6 +93,8 @@ interface TransformContext {
   _reactiveGetterNames?: Set<string>
   /** Cached set of module-scope @client signal/memo names. */
   _moduleClientSignalNames?: Set<string>
+  /** Cached `localConstants` index for `forwardsCallerRestProps`'s alias walk */
+  _restSpreadConstantValues?: ReadonlyMap<string, string | undefined>
   /** Cached set of destructured prop names for AST-based rewriting */
   _destructuredPropNames?: Set<string> | null
   /**
@@ -982,9 +984,82 @@ function attachParsedExpressions(node: IRNode, analyzer: AnalyzerContext, bound:
   }
 }
 
+/**
+ * Resolve #2753's "mechanism 2" `keyAttr`: the component's own possible
+ * render root(s) relay a key value an external caller supplies at runtime
+ * (a `data-key` prop / Rust `bf.data_key` field / client `createComponent`
+ * key argument) when THIS component is itself invoked as a caller's keyed
+ * loop row. Ported, once, from the `element.needsScope` test each of the 10
+ * SSR adapters previously applied at EMIT time, on every compile. Resolving
+ * it here means every adapter instead reads one IR field.
+ *
+ * The relay belongs on exactly the elements carrying `needsScope` — the
+ * elements that also carry `bf-s`, i.e. this component's rendered root(s).
+ * That is the same predicate, evaluated at the same set of elements, as the
+ * reference (Hono) adapter applied before #2762, and it matches what the
+ * client runtime does for the CSR half of the contract: `renderChild` /
+ * `materializeComponent` splice `data-key` onto the rendered markup's FIRST
+ * element (component.ts), whatever wrapper nodes stand above it. A walk
+ * that stops at the first non-element node instead of testing `needsScope`
+ * throughout answers differently for every component whose root is a
+ * `<Ctx.Provider>` — `transformProviderElement` passes `ctx.isRoot` through
+ * to its children, so the provider's inner element is a rendered root and
+ * gets `needsScope`, but the walk never reaches it (#2753 regression).
+ *
+ * `needsScope` is `ctx.isRoot` at element-transform time, and `ctx.isRoot`
+ * is consumed by the first element/component/scope-comment fragment on the
+ * way down, so nothing inside a loop body or a child component's slot
+ * children can be true here. Visiting the whole tree therefore costs
+ * nothing in reach but cannot go stale the way an enumeration of
+ * "`isRoot`-transparent constructs" can.
+ *
+ * A `needsScopeComment` fragment root (#2732) is handled separately, at
+ * `transformFragment` build time (`markDataKeyCarrier`): `ctx.isRoot` can be
+ * true for at most one node in a component's whole tree, so that one shape
+ * is fully resolved the moment the fragment itself is built and does not
+ * need a second, tree-wide pass to find it again. Its children carry
+ * `needsScope: false` by construction, so this walk's `n.needsScope` guard
+ * naturally skips them without double-marking.
+ *
+ * The `!keyAttr` guard keeps mechanism 1 (`applyLoopKeyAttr`, an inline
+ * `.map()` row root's own concretely-known key expression, resolved during
+ * the transform) — strictly more useful than a relay marker — from being
+ * overwritten.
+ */
+function resolveRootKeyAttr(node: IRNode | null): void {
+  if (!node) return
+  switch (node.type) {
+    case 'element':
+      if (node.needsScope && !node.keyAttr) node.keyAttr = { name: BF_KEY }
+      for (const c of node.children) resolveRootKeyAttr(c)
+      return
+    case 'fragment':
+    case 'component':
+    case 'provider':
+    case 'loop':
+      for (const c of node.children) resolveRootKeyAttr(c)
+      return
+    case 'async':
+      resolveRootKeyAttr(node.fallback)
+      for (const c of node.children) resolveRootKeyAttr(c)
+      return
+    case 'conditional':
+      resolveRootKeyAttr(node.whenTrue)
+      resolveRootKeyAttr(node.whenFalse)
+      return
+    case 'if-statement':
+      resolveRootKeyAttr(node.consequent)
+      resolveRootKeyAttr(node.alternate)
+      return
+  }
+}
+
 export function jsxToIR(analyzer: AnalyzerContext): IRNode | null {
   const root = buildIRRoot(analyzer)
-  if (root) attachParsedExpressions(root, analyzer)
+  if (root) {
+    attachParsedExpressions(root, analyzer)
+    resolveRootKeyAttr(root)
+  }
   return root
 }
 
@@ -1388,13 +1463,12 @@ function lowerFormControlValueSsr(
     children.push({
       type: 'expression',
       expr,
-      // The client-side registration template interpolates slotless
-      // expression children RAW (no text-slot `escapeText` wrapper), so a
-      // value containing `</textarea>` would break out of the element on
-      // CSR mount. Escape in the client-only template variant; `expr`
-      // stays clean for the SSR adapters, whose template engines (and
-      // hono/jsx) already escape text children natively.
+      // Escaped for client string-building; `expr` stays raw since SSR
+      // engines escape text children natively.
       templateExpr: `escapeText(${templateExpr ?? expr})`,
+      // Init-scope builders can't just swap in `templateExpr` (its `_p.`
+      // binding differs) — see `escapeInClientTemplate`'s docstring.
+      escapeInClientTemplate: true,
       typeInfo: null,
       reactive: false,
       slotId: null,
@@ -1471,7 +1545,7 @@ function transformHtmlElement(
 
   // Determine if this element needs a slot ID
   // Elements need slotIds if they have: events, dynamic children, reactive attributes, or refs
-  const needsSlot = events.length > 0 || hasDynamicContent(children) || hasReactiveAttributes(attrs, ctx) || ref !== null
+  const needsSlot = events.length > 0 || hasDynamicContent(children) || hasReactiveAttributes(attrs, ctx) || ref !== null || forwardsCallerRestProps(attrs, ctx)
   const slotId = needsSlot ? generateSlotId(ctx) : null
 
   // Propagate slotId to loop children (they need to use parent's marker)
@@ -1527,7 +1601,7 @@ function transformSelfClosingElement(
   lowerFormControlValueSsr(tagName, attrs, selfClosingChildren)
 
   // Elements need slotIds if they have events, reactive attributes, or refs
-  const needsSlot = events.length > 0 || hasReactiveAttributes(attrs, ctx) || ref !== null
+  const needsSlot = events.length > 0 || hasReactiveAttributes(attrs, ctx) || ref !== null || forwardsCallerRestProps(attrs, ctx)
   const slotId = needsSlot ? generateSlotId(ctx) : null
 
   const needsScope = ctx.isRoot
@@ -1946,10 +2020,12 @@ function unwrapHoistedFragment(node: IRNode): IRNode {
 
 // #2732: a `needsScopeComment` fragment's five hydration markers move to
 // the wrapping comment, but `data-key` needs to stay on an element (see
-// `IRElement.carriesDataKey`'s docstring for why). Mark the first ELEMENT
-// among `children` — immutably (`{ ...el, carriesDataKey: true }`), matching
+// `IRElement.keyAttr`'s docstring for why). Mark the first ELEMENT among
+// `children` — immutably (`{ ...el, keyAttr: { name: BF_KEY } }`), matching
 // the rest of this file's post-hoc IR tagging (e.g. `unwrapHoistedFragment`)
-// rather than mutating the child in place.
+// rather than mutating the child in place. No `value`: this fragment relays
+// whatever key its OWN caller supplies at runtime (#2753's "mechanism 2" —
+// see `IRElement.keyAttr`), not a locally-known expression.
 function markDataKeyCarrier(children: IRNode[]): IRNode[] {
   for (let i = 0; i < children.length; i++) {
     const marked = markCarrierIn(children[i])
@@ -1978,7 +2054,13 @@ function markDataKeyCarrier(children: IRNode[]): IRNode[] {
  */
 function markCarrierIn(node: IRNode): IRNode | null {
   if (node.type === 'element') {
-    return { ...(node as IRElement), carriesDataKey: true }
+    // Never overwrite an element that already resolved a LOCAL loop key
+    // (mechanism 1, `resolveLoopKeyAttr` below) — that can only happen if
+    // this same element is simultaneously a `.map()` row root AND this
+    // fragment's relay carrier, and the local, concretely-known expression
+    // is strictly more useful than the relay marker.
+    if ((node as IRElement).keyAttr) return null
+    return { ...(node as IRElement), keyAttr: { name: BF_KEY } }
   }
   if (node.type === 'conditional') {
     const cond = node as IRConditional
@@ -2171,8 +2253,11 @@ function transformExpressionInner(
     return null
   }
 
-  // Check for bare signal/memo identifier (BF044)
-  checkBareSignalOrMemoIdentifier(expr, ctx)
+  // Check for bare signal/memo identifier (BF044). A JSX text child is
+  // inherently a RENDERED position — unlike a component prop, `{expr}`
+  // here always becomes literal rendered output, never an opaque value
+  // handed to a consumer to call later — so nested descent is always on.
+  checkBareSignalOrMemoIdentifier(expr, ctx, { descendNested: true })
 
   // #547: Inline a JSX constant referenced by identifier. Unique to JSX-child
   // position — conditional branches and return position don't resolve
@@ -4104,6 +4189,46 @@ function tagLoopItemRootComponents(nodes: readonly IRNode[]): void {
   }
 }
 
+/**
+ * Attach the loop's resolved key ATTRIBUTE (name + value) to the element(s)
+ * that will actually render it — the write-side twin of `extractLoopKey`,
+ * which reads the SAME `key={}` JSX attribute (#2753: the SSR-side row-key
+ * decision is resolved once here, so the 9 SSR adapters stop re-deriving the
+ * attribute name from their own depth tracking, and stop disagreeing about
+ * whether an unkeyed row gets one at all).
+ *
+ * Mutates in place — `tagLoopItemRootComponents`'s style, run immediately
+ * after `key`/`depth` resolve, on the same node objects `children` already
+ * owns — rather than rebuilding the tree immutably: unlike `markCarrierIn`
+ * (which hands a fresh tree back to a caller holding the old one), this runs
+ * on IR this same function just built and is about to return, so there is
+ * no stale external reference to protect.
+ *
+ * Deliberately does NOT remove the literal `key` entry from `.attrs`: the
+ * CSR/client-JS codegen path (`ir-to-client-js/html-template.ts`'s
+ * `a.name === 'key' ? keyAttrName(loopDepth) : ...`) already reads it
+ * directly and is not part of #2753's 16-site duplication — it derives the
+ * same name from the same `keyAttrName()` single source of truth, just at a
+ * different phase (client-template bake time, not SSR emit time). Adapters
+ * skip the raw `key` attr in their generic `renderAttributes` loop instead
+ * (Hono's own JSX runtime already drops it silently either way).
+ *
+ * `component` bodies are left untouched: a `<Comp key={x}/>` row root's key
+ * is a PROP (`renderComponentProps`'s own `data-key` prop-forwarding), not
+ * an `IRElement` — a separate mechanism #2753 did not measure as broken and
+ * this change does not touch.
+ */
+function applyLoopKeyAttr(node: IRNode, name: string, value: string): void {
+  if (node.type === 'element') {
+    node.keyAttr = { name, value }
+    return
+  }
+  if (node.type === 'conditional') {
+    applyLoopKeyAttr(node.whenTrue, name, value)
+    applyLoopKeyAttr(node.whenFalse, name, value)
+  }
+}
+
 function loopBodyItemConditional(children: IRNode[]): IRConditional | null {
   const real = children.filter(
     (c) => !(c.type === 'text' && typeof c.value === 'string' && !c.value.trim())
@@ -4946,6 +5071,20 @@ function transformMapCall(
     ? extractItemConditionalKey(itemConditional!)
     : (children.length > 0 ? extractLoopKey(children[0]) : null)
 
+  // #2753: resolve this row's key ATTRIBUTE (name + value) here, once, and
+  // stamp it onto the element(s) that render it — `null` (unkeyed) means no
+  // `IRElement.keyAttr` at all, which is the correct final answer for every
+  // adapter and the client runtime alike, not a hint they still have to
+  // gate. See `IRElement.keyAttr` / `applyLoopKeyAttr`'s docstrings.
+  if (key !== null) {
+    const resolvedKeyAttrName = keyAttrName(depth)
+    if (bodyIsItemConditional) {
+      applyLoopKeyAttr(itemConditional!, resolvedKeyAttrName, key)
+    } else if (children.length > 0) {
+      applyLoopKeyAttr(children[0], resolvedKeyAttrName, key)
+    }
+  }
+
   // Stage 3 / D5 (spec/callback-fidelity.md) — the keyFn is hoisted: `mapArray`
   // computes it from the raw item BEFORE the callback body runs, so the key must
   // be derivable from the item (and index), never from a value the preamble
@@ -6244,8 +6383,20 @@ function getAttributeValue(attr: ts.JsxAttribute, ctx: TransformContext): AttrVa
       return AttrValueOf.expression('undefined')
     }
 
-    // Check for bare signal/memo identifier (BF044)
-    checkBareSignalOrMemoIdentifier(expr, ctx)
+    // Check for bare signal/memo identifier (BF044). `getAttributeValue`
+    // serves BOTH a DOM element's attributes and a component's props
+    // (two call sites above, in `processElementAttributes` and
+    // `processComponentProps`), and only the element-attribute case is
+    // a RENDERED position — a component prop is an opaque value handed
+    // to the component, and this codebase's Context-Provider idiom
+    // depends on that value being an uncalled accessor (`value={{
+    // open }}`, ui/components/ui/select/index.tsx — calling it eagerly
+    // there would freeze the value at provider-render time and break
+    // every consumer's reactivity). So nested descent is gated on
+    // element-vs-component, derived from the tag this attribute lives
+    // on; the top-level bare-identifier check stays unconditional
+    // either way, unchanged from this diagnostic's original behaviour.
+    checkBareSignalOrMemoIdentifier(expr, ctx, { descendNested: isRenderedElementAttribute(attr, ctx) })
 
     // Static style object: style={{ key: 'value', ... }} → CSS string at compile time
     if (attr.name.getText(ctx.sourceFile) === 'style' && ts.isObjectLiteralExpression(expr)) {
@@ -7300,53 +7451,287 @@ function processComponentProps(
 // =============================================================================
 
 /**
- * Check if a bare identifier is a signal getter or memo name.
- * Emits BF044 error when a signal/memo getter is passed without calling it.
+ * Is `attr` an attribute on a DOM/SVG element's opening tag, as opposed
+ * to a prop on a component? `JsxAttributes.parent` is always the
+ * `JsxOpeningElement`/`JsxSelfClosingElement` the attribute list belongs
+ * to (`JsxOpeningLikeElement`); its `tagName` follows the same
+ * uppercase-means-component convention `transformSelfClosingElement`
+ * already uses (`isComponent = /^[A-Z]/.test(tagName)`) — lowercase or
+ * hyphenated (a custom element) is a real DOM node, capitalised or
+ * dotted (`Select.Provider`) is a component.
+ *
+ * Feeds `checkBareSignalOrMemoIdentifier`'s `descendNested` gate: a
+ * DOM attribute value is a RENDERED position (this is genuinely what
+ * ends up in the DOM), so a bare getter buried inside it — `style={{
+ * color: val }}` — is exactly as much a forgotten `()` as a top-level
+ * one. A component prop is not rendered — it's an opaque value handed
+ * to the component — and this codebase's Context-Provider idiom
+ * depends on that value being an UNCALLED accessor
+ * (`ui/components/ui/select/index.tsx`'s `value={{ open, ... }}`), so
+ * nested descent must not fire there.
+ */
+function isRenderedElementAttribute(attr: ts.JsxAttribute, ctx: TransformContext): boolean {
+  const tagName = attr.parent.parent.tagName.getText(ctx.sourceFile)
+  return !/^[A-Z]/.test(tagName)
+}
+
+/**
+ * Check for a bare signal/memo getter reference in `expr`.
+ * Emits BF044 when a signal/memo getter is passed without calling it.
  * e.g., value={count} instead of value={count()}
+ *
+ * The top-level check — is `expr` itself a bare reactive identifier —
+ * always runs, unchanged from this diagnostic's original behaviour
+ * (`value={count}`, `<Foo x={count} />` keep firing regardless of
+ * position). `descendNested` additionally opts into walking INSIDE a
+ * composite expression — call arguments, template-literal spans,
+ * ternary branches (condition + both arms), array/object literal
+ * members, binary/logical operands, parenthesized wrappers — to catch
+ * a bare reference buried anywhere in that reachable set (#2755,
+ * #2751: this is the single upstream gate whose shallow top-level-only
+ * check let both downstream bugs through). Callers opt in only for
+ * RENDERED positions (a JSX text child; a DOM element's attribute value
+ * via `isRenderedElementAttribute`) — never for a component prop, where
+ * a bare getter is this codebase's deliberate Context-Provider idiom
+ * (measured: 66 such uses across `ui/components/**`/`site/**`, all
+ * legitimate, none a forgotten `()` — widening the gate to fire there
+ * would be a correctness regression, not a fix).
+ *
+ * Two structural exclusions apply whenever descending, both required
+ * so the walk doesn't false-positive on shapes that read the name
+ * without evaluating its signal value:
+ *   - the callee of a zero-arg call (`val()`) is the CORRECT form and
+ *     is never visited as a bare reference — only the call's arguments
+ *     (there are none) would be descended into.
+ *   - a property-access chain's object is visited but its property
+ *     NAME never is, so `ctx.val` never fires when a signal `val`
+ *     exists — the exact bug class documented in this file's
+ *     `csr-substitute.ts` sibling walker, #1100.
+ * JSX embedded inside the checked expression (a `.map()`/`.filter()`
+ * callback returning JSX is the common shape) is NOT this walk's
+ * territory either: `transformNode` independently descends into that
+ * element's own attributes and children, each re-entering this same
+ * check on its own real value expression. Descending into it here
+ * would be actively wrong, not just redundant — a JSX element's `name`
+ * nodes (an attribute's NAME, a tag name) are plain `ts.Identifier`s
+ * with no marker distinguishing them from a value read, so without
+ * this guard an attribute like `checked={x}` gets its own NAME flagged
+ * whenever a same-named signal is in scope (measured directly against
+ * `checkbox-demo.tsx` while building this walk).
+ * A nested function/arrow body that rebinds the name shadows it for
+ * everything under that body — modeled with a local bound-name stack,
+ * same shape as `csrSubstituteOnce`'s `boundStack`
+ * (`ir-to-client-js/csr-substitute.ts`), which solves this exact
+ * member-access/shadowing pair of problems for the CSR-substitution
+ * walk. Deliberately NOT threaded through the shared `BindingScope`
+ * service (`scope/binding-scope.ts`) — that scope answers "what does
+ * the surrounding loop/callback bind"; this walk only needs shadowing
+ * introduced by nested function literals inside the single expression
+ * being checked, the same reasoning `csrSubstituteOnce` already
+ * documents for its own local `boundStack`.
  */
 function checkBareSignalOrMemoIdentifier(
   expr: ts.Expression,
-  ctx: TransformContext
+  ctx: TransformContext,
+  options?: { descendNested?: boolean }
 ): void {
-  if (!ts.isIdentifier(expr)) return
-
-  const name = expr.text
+  const reactiveNames = new Map<string, 'signal' | 'memo'>()
+  for (const signal of ctx.analyzer.signals) reactiveNames.set(signal.getter, 'signal')
+  for (const memo of ctx.analyzer.memos) reactiveNames.set(memo.name, 'memo')
+  if (reactiveNames.size === 0) return
 
-  for (const signal of ctx.analyzer.signals) {
-    if (signal.getter === name) {
-      ctx.analyzer.errors.push(
-        createError(ErrorCodes.SIGNAL_GETTER_NOT_CALLED,
-          getSourceLocation(expr, ctx.sourceFile, ctx.filePath),
-          {
-            message: `Signal getter '${name}' passed without calling it`,
-            suggestion: {
-              message: `Signal getters must be called to read the value. Use \`${name}()\` instead of \`${name}\`.`,
-              replacement: `${name}()`,
-            },
-          }
-        )
+  const report = (id: ts.Identifier, name: string, kind: 'signal' | 'memo'): void => {
+    const label = kind === 'signal' ? 'Signal' : 'Memo'
+    ctx.analyzer.errors.push(
+      createError(ErrorCodes.SIGNAL_GETTER_NOT_CALLED,
+        getSourceLocation(id, ctx.sourceFile, ctx.filePath),
+        {
+          message: `${label} getter '${name}' passed without calling it`,
+          suggestion: {
+            message: `${label} getters must be called to read the value. Use \`${name}()\` instead of \`${name}\`.`,
+            replacement: `${name}()`,
+          },
+        }
       )
+    )
+  }
+
+  // Top-level check — unchanged from this diagnostic's original
+  // position-gating (fires unconditionally, everywhere), but NOW also
+  // respects the ambient loop/callback `BindingScope` a shadowed name
+  // needs — a pre-existing gap (the original single-line
+  // `if (!ts.isIdentifier(expr)) return` never consulted scope either)
+  // that stayed invisible only because a bare top-level identifier
+  // shadowed by a `.map(name => ...)` row param never happened to be
+  // exercised by any prior test. `ctx.scope` is the LIVE scope at this
+  // JSX node — already entered for the current loop row/callback frame
+  // by the time an attribute/child expression under it is checked
+  // (`enterLoopRow`/`enterCallback`, `scope/binding-scope.ts`) — so
+  // `isBound` here is a shadow-guard read in exactly the sense
+  // `spec/compiler.md`'s `BindingScope` section describes: is a signal
+  // getter of this name shadowed HERE, not "does this expression need
+  // its own reactive slot".
+  if (ts.isIdentifier(expr)) {
+    const kind = reactiveNames.get(expr.text)
+    if (kind && !ctx.scope.isBound(expr.text)) report(expr, expr.text, kind)
+    return
+  }
+
+  if (!options?.descendNested) return
+
+  const boundStack: Array<Set<string>> = []
+  const isBound = (name: string): boolean => {
+    for (let i = boundStack.length - 1; i >= 0; i--) {
+      if (boundStack[i].has(name)) return true
+    }
+    return ctx.scope.isBound(name)
+  }
+
+  /**
+   * Visit the default VALUES in a binding pattern (`const { x = count } = obj`,
+   * `(f = count) => …`), binding each name into `bound` as it is introduced.
+   *
+   * `collectBindingNames` deliberately walks only NAMES — a binding name is
+   * not a reference — but a default value is an ordinary expression, so a bare
+   * getter can hide there. Not hypothetical: measured, such a shape emits a
+   * module-scope `template` thunk that references a component-scope binding
+   * and throws `ReferenceError` on CSR mount, which is #2751's mechanism —
+   * the class this check exists to close.
+   *
+   * Binds as it goes because JS binds left to right WITHIN a pattern too:
+   * `({ a, b = a })` reads the already-initialized `a`, so `b`'s default must
+   * be checked against a scope that already contains `a`. Visiting every
+   * default first and binding afterwards would flag `a` as a bare signal read
+   * whenever a pattern name happens to collide with a real signal — a false
+   * positive, which is the direction that breaks working code.
+   */
+  const visitBindingDefaults = (name: ts.BindingName, bound: Set<string>): void => {
+    if (ts.isIdentifier(name)) {
+      bound.add(name.text)
       return
     }
+    for (const el of name.elements) {
+      if (ts.isOmittedExpression(el)) continue
+      if (el.initializer) visit(el.initializer)
+      visitBindingDefaults(el.name, bound)
+    }
   }
 
-  for (const memo of ctx.analyzer.memos) {
-    if (memo.name === name) {
-      ctx.analyzer.errors.push(
-        createError(ErrorCodes.SIGNAL_GETTER_NOT_CALLED,
-          getSourceLocation(expr, ctx.sourceFile, ctx.filePath),
-          {
-            message: `Memo getter '${name}' passed without calling it`,
-            suggestion: {
-              message: `Memo getters must be called to read the value. Use \`${name}()\` instead of \`${name}\`.`,
-              replacement: `${name}()`,
-            },
-          }
-        )
-      )
+  const collectBindingNames = (name: ts.BindingName, out: Set<string>): void => {
+    if (ts.isIdentifier(name)) out.add(name.text)
+    else if (ts.isObjectBindingPattern(name)) {
+      for (const el of name.elements) collectBindingNames(el.name, out)
+    } else if (ts.isArrayBindingPattern(name)) {
+      for (const el of name.elements) {
+        if (!ts.isOmittedExpression(el)) collectBindingNames(el.name, out)
+      }
+    }
+  }
+
+  const collectBlockDeclarations = (block: ts.Block, out: Set<string>): void => {
+    for (const stmt of block.statements) {
+      if (ts.isVariableStatement(stmt)) {
+        for (const decl of stmt.declarationList.declarations) collectBindingNames(decl.name, out)
+      } else if (ts.isFunctionDeclaration(stmt) && stmt.name) {
+        out.add(stmt.name.text)
+      }
+    }
+  }
+
+  function visit(node: ts.Node): void {
+    // JSX embedded inside the checked expression — see docstring.
+    if (
+      ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node) || ts.isJsxFragment(node)
+    ) {
       return
     }
+
+    // Type positions are not value positions. `({} as { count?: unknown })`
+    // in a rendered position would otherwise read the type literal's property
+    // name `count` as a bare reference to a signal of the same name and refuse
+    // valid code — a false positive, the direction that breaks working code.
+    // Covers every type node reachable from an expression: `as`/`satisfies`
+    // types, type assertions, and generic type arguments.
+    if (ts.isTypeNode(node)) return
+
+    // Zero-arg call with bare-identifier callee (`val()`): the correct
+    // form. The callee is never visited as a bare reference; there are
+    // no arguments to descend into either.
+    if (ts.isCallExpression(node) && node.arguments.length === 0 && ts.isIdentifier(node.expression)) {
+      return
+    }
+
+    // Property access: `obj.prop` — visit `obj` (a real reference),
+    // never `prop` (a member-access tail, not a value read). #1100.
+    if (ts.isPropertyAccessExpression(node)) {
+      visit(node.expression)
+      return
+    }
+
+    // Object literal key: `{ X: value }` — `X` is a key, not a read.
+    if (ts.isPropertyAssignment(node)) {
+      if (ts.isComputedPropertyName(node.name)) visit(node.name.expression)
+      visit(node.initializer)
+      return
+    }
+
+    // Shorthand property: `{ X }` — `X` is both key and value, so the
+    // value side IS a bare reference.
+    if (ts.isShorthandPropertyAssignment(node)) {
+      if (ts.isIdentifier(node.name) && !isBound(node.name.text)) {
+        const kind = reactiveNames.get(node.name.text)
+        if (kind) report(node.name, node.name.text, kind)
+      }
+      return
+    }
+
+    // Nested function/arrow: bind params + block-scoped locals declared
+    // in its body, recurse, unbind. A name shadowed here is a different
+    // binding, not the signal/memo of the same name.
+    if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) {
+      const bound = new Set<string>()
+      // Parameters bind LEFT TO RIGHT, and each default is evaluated against
+      // the scope as it stands at that point: `(a, b = a) => …` reads the
+      // already-bound parameter `a`, never an outer binding of the same name
+      // (verified against V8). So `bound` is pushed FIRST and grows as the
+      // loop walks — each default sees only the parameters before it.
+      boundStack.push(bound)
+      for (const p of node.parameters) {
+        if (p.initializer) visit(p.initializer)
+        visitBindingDefaults(p.name, bound)
+      }
+      if (node.body && ts.isBlock(node.body)) collectBlockDeclarations(node.body, bound)
+      if (node.body) visit(node.body)
+      boundStack.pop()
+      return
+    }
+
+    // Variable declaration: the binding name itself isn't a reference;
+    // only its initializer can be.
+    if (ts.isVariableDeclaration(node)) {
+      if (node.initializer) visit(node.initializer)
+      // The names this declaration introduces shadow outer ones for any LATER
+      // default in the same pattern (`const { a, b = a } = obj`), so they bind
+      // into a scope of their own rather than leaking into the enclosing one.
+      const declared = new Set<string>()
+      boundStack.push(declared)
+      visitBindingDefaults(node.name, declared)
+      boundStack.pop()
+      return
+    }
+
+    // Bare identifier reference — the case this check exists for.
+    if (ts.isIdentifier(node)) {
+      if (isBound(node.text)) return
+      const kind = reactiveNames.get(node.text)
+      if (kind) report(node, node.text, kind)
+      return
+    }
+
+    ts.forEachChild(node, visit)
   }
+
+  visit(expr)
 }
 
 /**
@@ -7532,6 +7917,49 @@ function isPropsReference(expr: string, ctx: TransformContext, visited?: Set<str
   return false
 }
 
+/**
+ * Does this element carry a `{...spread}` that forwards the caller's
+ * leftover props (the destructured `...rest` binding or a whole `(props)`
+ * parameter, through any alias hop)?
+ *
+ * Such a spread is the one attribute source whose keys are unknowable at
+ * compile time, so neither template can carry it: the SSR adapters render
+ * it through their own spread helper against real request data, and the
+ * client's registration template drops it entirely, leaving the runtime's
+ * `applyRestAttrs` as the only thing that can apply it after a pure CSR
+ * mount. `applyRestAttrs` addresses its element by slot id, so an element
+ * whose only dynamic attribute source is this spread still needs one —
+ * otherwise `init` has no patch point, and every caller-supplied attribute
+ * is silently absent under `createComponent` while SSR and hydration look
+ * correct (#2754).
+ *
+ * Deliberately narrower than "has any spread": a spread of an ordinary
+ * object (`{...extra}`) IS statically emitted into both templates, needs
+ * no runtime application, and must not start allocating slot ids.
+ */
+function forwardsCallerRestProps(attrs: IRAttribute[], ctx: TransformContext): boolean {
+  for (const attr of attrs) {
+    if (attr.value.kind !== 'spread') continue
+    const constants = restSpreadConstantValues(ctx)
+    for (const name of new Set([attr.value.expr, attr.value.templateExpr])) {
+      if (!name) continue
+      if (resolveRestSpreadOriginCore(ctx.analyzer, constants, name) !== null) return true
+    }
+  }
+  return false
+}
+
+/** `ctx.analyzer.localConstants` indexed by name, memoized per component walk. */
+function restSpreadConstantValues(ctx: TransformContext): ReadonlyMap<string, string | undefined> {
+  if (ctx._restSpreadConstantValues) return ctx._restSpreadConstantValues
+  const byName = new Map<string, string | undefined>()
+  for (const constant of ctx.analyzer.localConstants) {
+    if (!byName.has(constant.name)) byName.set(constant.name, constant.value)
+  }
+  ctx._restSpreadConstantValues = byName
+  return byName
+}
+
 /**
  * Check if any attributes in the list are reactive (depend on signals/memos).
  * Reactive attributes need a slotId so the client JS can update them.