@barefootjs/jsx 0.33.1 → 0.33.3

package/src/__tests__/issue-2756-loop-row-honors-client-only.test.ts

@@ -0,0 +1,173 @@
+/**
+ * #2756 — a client-built row/branch must carry the SAME attributes a
+ * hydration-reused (SSR-origin) row carries.
+ *
+ * `lowerFormControlValueSsr` already lowers a controlled `<textarea>` /
+ * `<select>` `value` in the SHARED IR: the attr becomes `clientOnly` and
+ * the value is re-expressed as element content / per-option `selected`,
+ * so every SSR adapter omits the attribute. `irToHtmlTemplate` — the
+ * builder for keyed-loop rows and conditional branches — ignored that
+ * flag and baked `value="…"` back in, so a rebuilt row and a reused row
+ * disagreed the moment a row-count change made both coexist in one list.
+ *
+ * Each assertion here is paired with the effect that OWNS the value, so
+ * "the attribute is gone" can never be satisfied by dropping the binding.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function clientJs(source: string): string {
+  const result = compileJSX(source, 'Repro.tsx', { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  return result.files.find(f => f.type === 'clientJs')!.content
+}
+
+/** The `__tpl.innerHTML = \`…\`` / `insert(... html: \`…\`)` builder strings. */
+function builderTemplates(content: string): string[] {
+  return [...content.matchAll(/innerHTML = `([^`]*)`/g)].map(m => m[1])
+    .concat([...content.matchAll(/html: `([^`]*)`/g)].map(m => m[1]))
+}
+
+describe('#2756 — client-built rows honour clientOnly', () => {
+  test('a keyed-loop row builder omits the controlled textarea `value` attribute and keeps the child text', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function LoopTextarea() {
+        const [val, setVal] = createSignal(0)
+        const [items] = createSignal([1, 2, 3])
+        return (
+          <ul>
+            {items().filter(i => i > 0).map(i => (
+              <li key={i}>
+                <textarea value={val()} onInput={() => setVal(1)} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('<textarea'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      expect(tpl).not.toContain('value=')
+      // The SSR projection of the same value — element content — must stay.
+      expect(tpl).toMatch(/<textarea[^>]*>\$\{/)
+    }
+    // The effect that owns the value is still emitted, so the attribute is
+    // absent because the effect applies it, not because nothing does.
+    expect(content).toContain(`'value' in`)
+  })
+
+  test('a conditional-branch builder omits it too, and still binds the value effect', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function CondTextarea() {
+        const [on, setOn] = createSignal(true)
+        const [v, setV] = createSignal('x')
+        return <div>{on() ? <textarea value={v()} onInput={() => setV('y')} /> : <p>off</p>}</div>
+      }
+    `)
+    const branchTemplates = builderTemplates(content).filter(t => t.includes('<textarea'))
+    expect(branchTemplates.length).toBeGreaterThan(0)
+    for (const tpl of branchTemplates) expect(tpl).not.toContain('value=')
+    expect(content).toContain('createDisposableEffect')
+  })
+
+  test('a loop row keeps per-option `selected` — the select value projection is not collateral', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function LoopSelect() {
+        const [val, setVal] = createSignal('a')
+        const [rows] = createSignal([1, 2])
+        return (
+          <ul>
+            {rows().filter(r => r > 0).map(r => (
+              <li key={r}>
+                <select value={val()}>
+                  <option value="a">A</option>
+                  <option value="b">B</option>
+                </select>
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('<select'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      // The `<select …>` opening tag only — `<option value="a">` is the
+      // literal option value and must survive.
+      const selectTag = tpl.slice(tpl.indexOf('<select'), tpl.indexOf('<option'))
+      expect(selectTag).not.toMatch(/value=/)
+      expect(tpl).toContain("'selected'")
+    }
+  })
+
+  test('the composite-row placeholder builder omits it too', () => {
+    // `irToPlaceholderTemplate` is the twin builder used when a row also
+    // hosts a child component (components become `data-bf-ph` placeholders).
+    // Same contract, separate function — it had the same gap.
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      function Badge({ label }: { label: string }) { return <em>{label}</em> }
+      export function CompositeRows() {
+        const [val, setVal] = createSignal('a')
+        const [rows] = createSignal([{ id: 1, label: 'x' }])
+        return (
+          <ul>
+            {rows().map(row => (
+              <li key={row.id}>
+                <Badge label={row.label} />
+                <textarea value={val()} onInput={() => setVal('b')} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('data-bf-ph'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      expect(tpl).toContain('<textarea')
+      expect(tpl).not.toMatch(/\bvalue=/)
+    }
+  })
+
+  test('an ordinary reactive attribute on the same row IS still emitted by the builder', () => {
+    // Reverse direction, on one row so both halves are read off the same
+    // builder string: `clientOnly` is the ONLY thing now deferred. The
+    // row's own `title` / `data-n` must keep their inline emission.
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function MixedRow() {
+        const [val, setVal] = createSignal('a')
+        const [rows] = createSignal([1, 2])
+        return (
+          <ul>
+            {rows().filter(r => r > 0).map(r => (
+              <li key={r} title={String(r)} data-n={r}>
+                <textarea value={val()} onInput={() => setVal('b')} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('<textarea'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      expect(tpl).toMatch(/title=/)
+      expect(tpl).toMatch(/data-n=/)
+      expect(tpl).not.toMatch(/\bvalue=/)
+    }
+  })
+})

package/src/__tests__/merge-template-imports.test.ts

@@ -56,7 +56,7 @@ describe('mergeTemplateImports', () => {
     expect(out).toBe("import { Foo, Baz } from 'x'\nimport type { Bar } from 'x'")
   })
 
-  test('passes through and dedupes side-effect / default imports by line', () => {
+  test('passes through and dedupes side-effect imports, and a lone default import, by line', () => {
     const out = mergeTemplateImports([
       "import './a.css'",
       "import Foo from 'foo'",
@@ -65,4 +65,44 @@ describe('mergeTemplateImports', () => {
     ])
     expect(out).toBe("import './a.css'\nimport Foo from 'foo'\nimport { x } from 'm'")
   })
+
+  // #2767 follow-up: two sibling components in a multi-component file both
+  // compile from the SAME module-scope `import cfg from 'lib'` declaration,
+  // but each component's own compiled output only lists the specifiers IT
+  // uses — so one component's output can carry `import cfg from 'lib'` and
+  // another's `import cfg, { helper } from 'lib'`. Exact-line dedup keeps
+  // BOTH (they're different strings), redeclaring `cfg` — a hard
+  // `SyntaxError`. Folding by source must collapse them into one line.
+  test('folds a default import shared across sibling components instead of redeclaring the binding', () => {
+    const out = mergeTemplateImports([
+      "import cfg from 'lib'",
+      "import cfg, { helper } from 'lib'",
+    ])
+    expect(out).toBe("import cfg, { helper } from 'lib'")
+    expect((out.match(/\bcfg\b/g) ?? []).length).toBe(1)
+  })
+
+  test('folds a default import with named specifiers arriving in the opposite order', () => {
+    const out = mergeTemplateImports([
+      "import cfg, { helperA } from 'lib'",
+      "import cfg, { helperB } from 'lib'",
+    ])
+    expect(out).toBe("import cfg, { helperA, helperB } from 'lib'")
+  })
+
+  test('keeps a default import separate from a differently-sourced named import', () => {
+    const out = mergeTemplateImports([
+      "import cfg from 'lib'",
+      "import { helper } from 'other-lib'",
+    ])
+    expect(out).toBe("import cfg from 'lib'\nimport { helper } from 'other-lib'")
+  })
+
+  test('dedupes an identical namespace import shared across sibling components', () => {
+    const out = mergeTemplateImports([
+      "import * as NS from 'lib'",
+      "import * as NS from 'lib'",
+    ])
+    expect(out).toBe("import * as NS from 'lib'")
+  })
 })

package/src/__tests__/multi-component-shared-default-import.test.ts

@@ -0,0 +1,55 @@
+/**
+ * #2767 follow-up: two sibling components in the SAME multi-component file
+ * compile independently from the same module-scope default import — each
+ * component's compiled client JS only lists the specifiers IT actually
+ * uses, so one component can emit `import cfg from './config'` while
+ * another emits `import cfg, { helper } from './config'` for the exact
+ * same source declaration. `compileMultipleComponents`'s client-JS merge
+ * used to dedupe import lines by EXACT STRING, which kept both — a hard
+ * `SyntaxError: Identifier 'cfg' has already been declared` in the merged
+ * `.client.js`, with zero compile diagnostics. This is an end-to-end test
+ * through the real `compileJSX` multi-component path (not the unit-level
+ * `mergeTemplateImports`/`collectExternalImports` tests, which are correct
+ * per-component but can't see this cross-component merge on their own).
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('multi-component file sharing a default import (#2767 follow-up)', () => {
+  test('merges into one import line instead of redeclaring the default binding', () => {
+    const source = `
+'use client'
+import cfg, { helper } from './config'
+import { createSignal } from '@barefootjs/client'
+
+export function CompA() {
+  const [n, setN] = createSignal(cfg.start)
+  return <button onClick={() => setN(n() + 1)}>{n()}</button>
+}
+
+export function CompB() {
+  const [m, setM] = createSignal(cfg.start + helper())
+  return <button onClick={() => setM(m() + 1)}>{m()}</button>
+}
+`
+    const result = compileJSX(source, 'shared-default.tsx', { adapter })
+    const errors = result.errors.filter(e => e.severity === 'error')
+    expect(errors).toEqual([])
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+
+    const importLines = clientJs!.content
+      .split('\n')
+      .filter(l => l.includes("from './config'"))
+    // Exactly one declaration for './config' — not one per component.
+    expect(importLines).toEqual(["import cfg, { helper } from './config'"])
+
+    // The binding is declared exactly once, not once per component.
+    const declarationCount = (clientJs!.content.match(/\bimport\s+cfg\b/g) ?? []).length
+    expect(declarationCount).toBe(1)
+  })
+})

package/src/__tests__/rewrite-props-object.test.ts

@@ -60,13 +60,50 @@ describe('rewritePropsObjectRef', () => {
     expect(out).toBe('const name = _p.name')
   })
 
-  test('no-op when propsObjectName is null (destructured-props mode)', () => {
-    const code = 'const x = props.name'
-    const out = rewritePropsObjectRef(code, null)
-    // null → defaults to 'props'; rewritten.
+  test('still rewrites a literal `props` read when propsObjectName is null', () => {
+    // The `propsObjectName ?? 'props'` fallback survives the #2723 work.
+    // A destructured component can still write `props.itemId` inside a
+    // handler body — `propsObjectName` is null for that shape, so without
+    // the fallback the emitted init keeps a `props` reference that no
+    // binding satisfies (the doc-example `StatementExample` regressed
+    // exactly this way before the fallback was restored).
+    const out = rewritePropsObjectRef('const x = props.name', null)
     expect(out).toBe('const x = _p.name')
   })
 
+  test('rewrites via restPropsName when propsObjectName is null (#2723)', () => {
+    // The destructured-props shape this exists for: `function F({ a,
+    // ...rest })` has no `propsObjectName` at all, but a `const
+    // rest__alias = rest` hop (or any other bare read of the rest
+    // binding) still needs `rest` rewritten to `_p`.
+    const out = rewritePropsObjectRef('const restAlias = rest', null, 'rest')
+    expect(out).toBe('const restAlias = _p')
+  })
+
+  test('restPropsName rewrite is not tied to the literal name "props"', () => {
+    // Regression guard for the bug the widened fallback replaced: a rest
+    // binding named anything OTHER than "props" left the reference
+    // dangling (a runtime ReferenceError) because the old fallback only
+    // ever guessed the literal word "props".
+    const out = rewritePropsObjectRef('const leftoverAlias = leftover', null, 'leftover')
+    expect(out).toBe('const leftoverAlias = _p')
+  })
+
+  test('rewrites BOTH propsObjectName and restPropsName when both are set', () => {
+    // A `(props)`-arg component that ALSO body-destructures a rest
+    // binding out of it (`const { a, ...rest } = props`) has both names
+    // live in the same init body.
+    const out = rewritePropsObjectRef('const x = props.a + rest.b', 'props', 'rest')
+    expect(out).toBe('const x = _p.a + _p.b')
+  })
+
+  test('restPropsName defaulting to null preserves the two-arg call shape', () => {
+    // Existing call sites that only ever passed `propsObjectName` (the
+    // pre-#2723 signature) must keep working unchanged.
+    const out = rewritePropsObjectRef('const name = props.name', 'props')
+    expect(out).toBe('const name = _p.name')
+  })
+
   test('no-op when propsObjectName equals _p', () => {
     const code = 'const x = _p.name'
     const out = rewritePropsObjectRef(code, '_p')

package/src/__tests__/root-key-relay.test.ts

@@ -0,0 +1,170 @@
+/**
+ * Render-root row-key relay (`IRElement.keyAttr` with no `value`) — #2753's
+ * "mechanism 2".
+ *
+ * A component's rendered root is whatever element carries `bf-s`
+ * (`needsScope`). When that component is used as a caller's keyed loop row,
+ * the caller's key has to land on THAT element: `mapArray` reconciles rows
+ * by reading the key attribute off the row's primary element, and the CSR
+ * half of the contract (`renderChild` / `materializeComponent` in
+ * `@barefootjs/client`) splices `data-key` onto the rendered markup's first
+ * element regardless of what wrapper nodes sit above it. `resolveRootKeyAttr`
+ * is the SSR half, and it must agree.
+ *
+ * The regression these tests exist for: resolving the relay by walking DOWN
+ * from the IR root and stopping at the first node that is not an
+ * element/fragment/if-statement. `<Ctx.Provider>` is neither, but
+ * `transformProviderElement` passes `ctx.isRoot` through to its children — so
+ * a provider-rooted component (select, popover, accordion, carousel,
+ * combobox, command, dropdown-menu, radio-group) has a `needsScope` element
+ * the walk never reaches, and every adapter silently stopped relaying its
+ * caller's key.
+ */
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import type { IRElement, IRNode } from '../types'
+
+function compile(source: string, name = 'Test'): IRNode {
+  const ir = jsxToIR(analyzeComponent(source, `${name}.tsx`))
+  expect(ir).not.toBeNull()
+  return ir!
+}
+
+/** Every `element` node in the tree, in document order. */
+function allElements(node: IRNode): IRElement[] {
+  const out: IRElement[] = []
+  const visit = (n: IRNode | null | undefined): void => {
+    if (!n) return
+    if (n.type === 'element') out.push(n)
+    switch (n.type) {
+      case 'element':
+      case 'fragment':
+      case 'component':
+      case 'provider':
+      case 'loop':
+        for (const c of n.children) visit(c)
+        return
+      case 'async':
+        visit(n.fallback)
+        for (const c of n.children) visit(c)
+        return
+      case 'conditional':
+        visit(n.whenTrue)
+        visit(n.whenFalse)
+        return
+      case 'if-statement':
+        visit(n.consequent)
+        visit(n.alternate)
+        return
+    }
+  }
+  visit(node)
+  return out
+}
+
+const PROVIDER_ROOT = `
+'use client'
+import { createContext, createSignal } from '@barefootjs/client'
+
+const SelectContext = createContext({ open: false })
+
+export function Select(props: { children?: unknown }) {
+  const [open, setOpen] = createSignal(false)
+  return (
+    <SelectContext.Provider value={{ open: open(), setOpen }}>
+      <div data-slot="select">{props.children}</div>
+    </SelectContext.Provider>
+  )
+}
+`
+
+describe('render-root row-key relay (#2753)', () => {
+  test('a provider-rooted component relays the key on the element under the provider', () => {
+    const ir = compile(PROVIDER_ROOT, 'Select')
+
+    expect(ir.type).toBe('provider')
+    const div = allElements(ir).find(e => e.tag === 'div')
+    expect(div).toBeDefined()
+    // The element under the provider IS the rendered root: `ctx.isRoot`
+    // survives `transformProviderElement`.
+    expect(div!.needsScope).toBe(true)
+    // Relay marker: a name and no value — the value arrives at runtime from
+    // whoever renders this component as a keyed row.
+    expect(div!.keyAttr).toEqual({ name: 'data-key' })
+  })
+
+  test.each([
+    ['plain element root', `
+      export function C() { return <div class="root"><span>x</span></div> }
+    `],
+    ['early-return (if-statement) root — every branch top element', `
+      export function C(props: { on?: boolean }) {
+        if (props.on) return <section>on</section>
+        return <article>off</article>
+      }
+    `],
+    ['provider root', PROVIDER_ROOT],
+    ['provider wrapping an early-return root', `
+      'use client'
+      import { createContext } from '@barefootjs/client'
+      const Ctx = createContext(0)
+      export function C(props: { on?: boolean }) {
+        if (props.on) return <Ctx.Provider value={1}><section>on</section></Ctx.Provider>
+        return <Ctx.Provider value={0}><article>off</article></Ctx.Provider>
+      }
+    `],
+    ['nested providers around the root element', `
+      'use client'
+      import { createContext } from '@barefootjs/client'
+      const A = createContext(0)
+      const B = createContext(0)
+      export function C() {
+        return <A.Provider value={1}><B.Provider value={2}><div>x</div></B.Provider></A.Provider>
+      }
+    `],
+  ])('invariant: %s — every needsScope element carries a relay keyAttr', (_label, source) => {
+    const roots = allElements(compile(source)).filter(e => e.needsScope)
+    expect(roots.length).toBeGreaterThan(0)
+    for (const el of roots) {
+      expect({ tag: el.tag, keyAttr: el.keyAttr }).toEqual({
+        tag: el.tag,
+        keyAttr: { name: 'data-key' },
+      })
+    }
+  })
+
+  test('an inline .map() row root keeps its own resolved key expression', () => {
+    const ir = compile(`
+      export function List(props: { items: { id: number; name: string }[] }) {
+        return <ul>{props.items.map(i => <li key={i.id}>{i.name}</li>)}</ul>
+      }
+    `, 'List')
+
+    const li = allElements(ir).find(e => e.tag === 'li')
+    expect(li).toBeDefined()
+    // Mechanism 1 (a concretely-known local expression) wins over the relay
+    // marker; the relay pass must not overwrite it with a bare name.
+    expect(li!.needsScope).toBe(false)
+    expect(li!.keyAttr).toEqual({ name: 'data-key', value: 'i.id' })
+
+    const ul = allElements(ir).find(e => e.tag === 'ul')!
+    expect(ul.needsScope).toBe(true)
+    expect(ul.keyAttr).toEqual({ name: 'data-key' })
+  })
+
+  test('a scope-comment fragment root marks exactly one carrier, not every child', () => {
+    const ir = compile(`
+      export function C() {
+        return <><h1>title</h1><p>body</p></>
+      }
+    `)
+
+    expect(ir.type).toBe('fragment')
+    const els = allElements(ir)
+    // #2732: hydration markers moved to the wrapping comment, so no child is
+    // a `needsScope` element and the relay pass adds nothing of its own.
+    expect(els.every(e => !e.needsScope)).toBe(true)
+    expect(els.filter(e => e.keyAttr !== undefined).map(e => e.tag)).toEqual(['h1'])
+  })
+})

package/src/__tests__/signal-getter-not-called.test.ts

@@ -266,4 +266,153 @@ describe('Signal Getter Not Called (BF044)', () => {
       expect(bf044[0].severity).toBe('error')
     })
   })
+
+  /**
+   * Nested descent (#2755 / #2751 upstream fix).
+   *
+   * The gate used to open with `if (!ts.isIdentifier(expr)) return`, so it saw
+   * only an expression's TOP-LEVEL node. Every shape below reaches a rendered
+   * position through some wrapper, and every one of them used to compile
+   * silently and then miscompile downstream — the accessor stringified into a
+   * DOM property (#2755) or referenced from a module-scope template thunk that
+   * cannot see it (#2751).
+   *
+   * The negative cases are the load-bearing half: descending EVERYWHERE would
+   * break the Context-Provider idiom, where handing a descendant an uncalled
+   * accessor is the whole point. The rule is "rendered position", not "nested".
+   */
+  describe('nested descent into rendered positions', () => {
+    // `Child` is declared AFTER `Counter` deliberately: `analyzeComponent`
+    // analyzes the FIRST function in the module, so hoisting the child above
+    // would silently analyze `Child` instead and make every case below report
+    // zero diagnostics — the negative cases would then pass for the wrong
+    // reason. The positive block is the control that proves the walk is
+    // actually live in this exact module shape.
+    const wrap = (body: string) => `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function Counter() {
+        const [count, setCount] = createSignal(0)
+        const [items, setItems] = createSignal([1, 2])
+        const obj: Record<string, unknown> = {}
+        return ${body}
+      }
+
+      function Child(props: { value?: unknown }) { return <span /> }
+    `
+    const bf044Of = (body: string) =>
+      compileToIR(wrap(body)).errors.filter(e => e.code === ErrorCodes.SIGNAL_GETTER_NOT_CALLED)
+
+    describe('fires — the getter reaches a rendered position', () => {
+      test.each([
+        ['ternary condition', '<div className={count ? "on" : "off"} />'],
+        ['template literal span', '<div className={`x-${count}`} />'],
+        ['call argument', '<div className={String(count)} />'],
+        ['array literal member', '<div className={[count].join("")} />'],
+        ['style object property value', '<div style={{ color: count }} />'],
+        ['JSX text child', '<div>{count ? "a" : "b"}</div>'],
+      ])('%s', (_label, body) => {
+        const bf044 = bf044Of(body)
+        expect(bf044).toHaveLength(1)
+        expect(bf044[0].message).toContain("'count'")
+      })
+    })
+
+    describe('stays silent — the getter is handed onward, not rendered', () => {
+      test.each([
+        // The `<SelectContext.Provider value={{ open, ... }}>` shape: every
+        // member is an accessor BY CONTRACT. Calling it here would freeze the
+        // value at provider-render time and break every consumer.
+        ['component prop, object literal member', '<Child value={{ x: count }} />'],
+        ['component prop, ternary', '<Child value={count ? 1 : 2} />'],
+        ['component prop, call argument', '<Child value={String(count)} />'],
+      ])('%s', (_label, body) => {
+        expect(bf044Of(body)).toHaveLength(0)
+      })
+
+      test('a loop-row param shadowing a same-named signal', () => {
+        // `count` here is the row item, not the signal — resolved through the
+        // ambient `BindingScope`, which sees bindings introduced OUTSIDE the
+        // checked expression.
+        expect(bf044Of('<ul>{items().map(count => <li className={count ? "a" : "b"} />)}</ul>')).toHaveLength(0)
+      })
+
+      test('correctly called getter in every nested shape', () => {
+        expect(bf044Of('<div className={count() ? "on" : "off"} />')).toHaveLength(0)
+        expect(bf044Of('<div style={{ color: count() }} />')).toHaveLength(0)
+      })
+    })
+
+    describe('binding and parameter defaults', () => {
+      // A default VALUE is an ordinary expression in the enclosing scope, but
+      // the walk used to visit only binding NAMES. Measured before the fix:
+      // both shapes compiled silently and emitted a module-scope `template`
+      // thunk referencing a component-scope binding — `ReferenceError` on CSR
+      // mount, i.e. #2751's mechanism surviving inside the very check meant to
+      // close it.
+      test('destructuring default in a rendered position', () => {
+        expect(bf044Of('<div className={(() => { const { x = count } = ({} as { x?: unknown }); return String(x) })()} />')).toHaveLength(1)
+      })
+
+      test('parameter default in a rendered position', () => {
+        expect(bf044Of('<div className={((f = count) => String(f))()} />')).toHaveLength(1)
+      })
+
+      test('a later default reading an EARLIER parameter stays silent', () => {
+        // JS binds parameters left to right: `(count, x = count) => …` reads
+        // the already-bound parameter, not the signal it shadows (verified
+        // against V8). Visiting every default before binding any parameter
+        // would flag this — a false positive on working code.
+        expect(bf044Of('<div className={((count2: unknown, x = count2) => String(x))(1)} />')).toHaveLength(0)
+        expect(bf044Of('<div className={((count: unknown, x = count) => String(x))(1)} />')).toHaveLength(0)
+      })
+
+      test('a later default reading an EARLIER pattern element stays silent', () => {
+        // The same left-to-right rule applies WITHIN a pattern.
+        //
+        // The declaration sits inside a NESTED block on purpose. At a function
+        // body's top level, `collectBlockDeclarations` pre-scans the whole
+        // `VariableStatement` and binds every name in the pattern up front,
+        // regardless of order — so a top-level version of this case passes
+        // even with the sequential threading removed, and pins nothing.
+        // `collectBlockDeclarations` does not descend into an `if` block, so
+        // here the only thing that can bind `c` before `x`'s default is read
+        // is `visitBindingDefaults` itself.
+        expect(bf044Of('<div className={(() => { if (obj) { const { count, x = count } = obj; return String(x) } return "" })()} />')).toHaveLength(0)
+      })
+
+      test('a literal default stays silent', () => {
+        // The overwhelmingly common shape (`{ size = 'md' }`): the default is
+        // not a reactive name, so widening the walk must not touch it.
+        expect(bf044Of(`<div className={(({ size = 'md' }: { size?: string }) => size)({})} />`)).toHaveLength(0)
+      })
+    })
+
+    test('does not misfire on a TYPE position', () => {
+      // A type is not a value. `({} as { count?: unknown })` in a rendered
+      // position used to read the type literal's property name as a bare
+      // reference to the same-named signal and refuse valid code.
+      expect(bf044Of('<div className={String(({} as { count?: unknown }).count)} />')).toHaveLength(0)
+    })
+
+    test('does not misfire on a nested element ATTRIBUTE NAME', () => {
+      // The walk stops at a nested JSX boundary. Without that guard, descending
+      // into a `.map()` body that returns JSX read the nested element's own
+      // attribute NAME (`checked=`) as a bare reference to the same-named
+      // signal — `transformNode` re-walks that element independently anyway.
+      const source = `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+
+        export function Boxes() {
+          const [checked, setChecked] = createSignal(false)
+          const [items, setItems] = createSignal([1, 2])
+          return <ul>{items().map(n => <li><input checked={checked()} /></li>)}</ul>
+        }
+      `
+      const bf044 = compileToIR(source).errors.filter(e => e.code === ErrorCodes.SIGNAL_GETTER_NOT_CALLED)
+      expect(bf044).toHaveLength(0)
+    })
+  })
 })