@barefootjs/jsx 0.5.0 → 0.5.1

package/src/__tests__/adapter-output.test.ts

@@ -653,4 +653,53 @@ describe('Adapter output', () => {
       expect(template.content).not.toMatch(/\b0\s+as\s+number\b/)
     })
   })
+
+  // The no-arg props default (`= {}`) makes a JSX-returning arrow hoisted from
+  // an object-literal value renderable at SSR (#1663). `hasRequiredProps`
+  // treats a prop with a destructuring default as non-required, but the
+  // declared props type may still mark that field required — so a bare `= {}`
+  // would fail `tsc` ("Property 'x' is missing in type '{}'..."). The default
+  // must be asserted to the param's annotated type (`{} as T`).
+  describe('no-arg props default is type-safe for typed required props (#1663 follow-up)', () => {
+    const cases = [
+      ['TestAdapter', () => new TestAdapter()],
+      ['HonoAdapter', () => new HonoAdapter()],
+    ] as const
+
+    for (const [label, make] of cases) {
+      test(`typed required prop with a default emits \`= {} as T\` (${label})`, () => {
+        // `label` is required in the type but carries a destructuring default,
+        // the exact shape that made a bare `= {}` fail tsc.
+        const source = `
+          export function Badge({ label = 'x' }: { label: string }) {
+            return <span>{label}</span>
+          }
+        `
+        const result = compileJSX(source, 'Badge.tsx', { adapter: make() })
+        expect(result.errors).toHaveLength(0)
+
+        const template = result.files.find(f => f.type === 'markedTemplate')!
+        const sig = template.content.split('\n').find(l => l.includes('function Badge'))!
+        // Asserted to the generated props type, never a bare `= {}`.
+        expect(sig).toContain('= {} as BadgePropsWithHydration')
+        expect(sig).not.toMatch(/=\s*\{\}\s*\)/)
+      })
+    }
+
+    test('untyped props still default to a bare `= {} as <hydration type>` (TestAdapter)', () => {
+      const source = `
+        export function Plain() {
+          return <span>hi</span>
+        }
+      `
+      const result = compileJSX(source, 'Plain.tsx', { adapter: new TestAdapter() })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!
+      const sig = template.content.split('\n').find(l => l.includes('function Plain'))!
+      // No declared props type → default asserted to the hydration-only type.
+      expect(sig).toContain('= {} as {')
+      expect(sig).toContain('__instanceId')
+    })
+  })
 })

package/src/__tests__/client-js-generation.test.ts

@@ -2300,8 +2300,11 @@ describe('Client JS generation', () => {
       expect(clientJs).toBeDefined()
       const content = clientJs!.content
 
-      // Text node assignment must guard against nullish values
-      expect(content).toContain("String(__val ?? '')")
+      // Text node updates route through `__bfText`, which renders nullish
+      // values as '' (not the string "undefined") and also splices live
+      // Nodes by identity (#1663). The nullish guard moved from the inline
+      // `String(__val ?? '')` assignment into that helper.
+      expect(content).toContain('__bfText(')
       expect(content).not.toMatch(/\.nodeValue = String\(__val\)(?! )/)
     })
 

package/src/__tests__/inline-jsx-callback.test.ts

@@ -367,3 +367,98 @@ export function Demo() {
     expect(sharedJs).toMatch(/hydrate\(\s*['"]BFInlineJsxCallback1(?:__|['"])/)
   })
 })
+
+/**
+ * Inline JSX as an object-literal arrow value (#1663).
+ *
+ * A `Record<K, () => JSX>` lookup map (`{ piconic: () => <BrandLogo/> }`)
+ * left the JSX untransformed: a module-level map had its const dropped from
+ * the emitted module (`ReferenceError: THEME_LOGOS is not defined` at SSR),
+ * and a function-local map leaked raw `<...>` into the client bundle
+ * (`SyntaxError: Unexpected token '<'`). Both arrow values must be hoisted
+ * into synthesized components, exactly like an arrow in attribute position.
+ */
+describe('inline JSX as object-literal arrow value (#1663)', () => {
+  function markedTemplate(source: string, fileName = 'Header.tsx'): string {
+    const result = compileJSX(source, fileName, { adapter })
+    expect(result.errors).toEqual([])
+    const file = result.files.find(f => f.type === 'markedTemplate')
+    expect(file).toBeDefined()
+    return file!.content
+  }
+
+  test('module-level lookup map: const is preserved and JSX is lowered (repro A)', () => {
+    const source = `
+      'use client'
+      import { BrandLogo } from './brand-logo'
+
+      const THEME_LOGOS: Record<string, () => unknown> = {
+        piconic: () => <BrandLogo name="piconic" />,
+        other: () => <BrandLogo name="other" />,
+      }
+      function themeLogo(id: string) { return THEME_LOGOS[id]() }
+
+      export function Header(props: { id: string }) {
+        return <div class="hdr">{themeLogo(props.id)}</div>
+      }
+    `
+    const js = clientJs(source)
+    const tmpl = markedTemplate(source)
+
+    // The arrow bodies must not survive as live JSX in either output.
+    expect(js).not.toMatch(/=>\s*<BrandLogo\b/)
+    expect(tmpl).not.toMatch(/=>\s*<BrandLogo\b/)
+
+    // The arrow values are replaced by synthesized component references, so
+    // the THEME_LOGOS const survives (it is no longer dropped → no SSR
+    // ReferenceError).
+    expect(js).toContain('THEME_LOGOS')
+    expect(js).toMatch(/piconic:\s*BFInlineJsxCallback1\b/)
+    expect(js).toMatch(/hydrate\(\s*['"]BFInlineJsxCallback1(?:__|['"])/)
+    expect(tmpl).toContain('THEME_LOGOS')
+  })
+
+  test('function-local lookup map: JSX is lowered, not leaked to client (repro B)', () => {
+    const source = `
+      'use client'
+      import { BrandLogo } from './brand-logo'
+
+      export function Header(props: { id: string }) {
+        function themeLogo(id: string) {
+          const logos: Record<string, () => unknown> = {
+            piconic: () => <BrandLogo name="piconic" />,
+          }
+          return logos[id]()
+        }
+        return <div class="hdr">{themeLogo(props.id)}</div>
+      }
+    `
+    const js = clientJs(source)
+    // No raw JSX in the client bundle (the #1663 SyntaxError).
+    expect(js).not.toMatch(/=>\s*<BrandLogo\b/)
+    expect(js).not.toMatch(/return\s*<BrandLogo\b/)
+    expect(js).toMatch(/hydrate\(\s*['"]BFInlineJsxCallback1(?:__|['"])/)
+  })
+
+  test('dynamic JSX-returning call routes the slot through __bfText', () => {
+    // The child expression `{themeLogo(props.id)}` evaluates to a live
+    // component element on the client; the slot update must splice it in by
+    // identity via __bfText rather than stringify it into "[object …]".
+    const source = `
+      'use client'
+      import { BrandLogo } from './brand-logo'
+
+      const THEME_LOGOS: Record<string, () => unknown> = {
+        piconic: () => <BrandLogo name="piconic" />,
+      }
+      function themeLogo(id: string) { return THEME_LOGOS[id]() }
+
+      export function Header(props: { id: string }) {
+        return <div class="hdr">{themeLogo(props.id)}</div>
+      }
+    `
+    const js = clientJs(source)
+    expect(js).toContain('__bfText(')
+    expect(js).toMatch(/__bfText[^']*from '@barefootjs\/client\/runtime'/)
+  })
+})

package/src/__tests__/ir-jsx-props.test.ts

@@ -359,8 +359,11 @@ describe('JSX props (#559)', () => {
 
       const clientJs = result.files.find(f => f.type === 'clientJs')
       expect(clientJs).toBeDefined()
-      // The generated effect should check __isSlot before updating nodeValue
-      expect(clientJs!.content).toContain('__isSlot')
+      // The text update routes through `__bfText`, which preserves the
+      // server-rendered DOM for `__isSlot` values (and splices live Nodes
+      // by identity) instead of the old inline `nodeValue = String(...)`
+      // assignment. The `__isSlot` guard now lives inside that helper (#1663).
+      expect(clientJs!.content).toContain('__bfText')
     })
   })
 })

package/src/__tests__/loop-item-conditional-codegen.test.ts

@@ -0,0 +1,81 @@
+/**
+ * Codegen-routing tests for whole-item loop conditionals (#1665).
+ *
+ * Two concerns:
+ *  1. Detection boundary — which `.map()` body shapes route to the anchored
+ *     `mapArrayAnchored` path (an item may render 0-or-1 element) vs. stay on
+ *     the legacy element-tracking `mapArray` path (always exactly one element).
+ *  2. Keyless robustness — a whole-item conditional without a key is a BF023
+ *     error, but the emitted client JS must still be syntactically valid (an
+ *     empty key once produced `createComment(`bf-loop-i:${}`)`, a SyntaxError
+ *     that breaks the whole bundle).
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { ErrorCodes } from '../errors'
+
+const adapter = new TestAdapter()
+
+function clientJsFor(body: string, withKey = true): { js: string; errorCodes: string[] } {
+  const key = withKey ? ' key={t.id}' : ''
+  const source = `
+    'use client'
+    import { createSignal } from '@barefootjs/client'
+    export function C() {
+      const [items] = createSignal([{ id: 'a', on: true }])
+      const [sel] = createSignal('a')
+      return <ul>{items().map(t => ${body.replace('KEY', key)})}</ul>
+    }
+  `
+  const result = compileJSX(source, 'C.tsx', { adapter })
+  return {
+    js: result.files.find((f) => f.type === 'clientJs')?.content ?? '',
+    errorCodes: result.errors.map((e) => e.code),
+  }
+}
+
+const usesAnchored = (js: string) => js.includes('mapArrayAnchored(')
+const usesLegacy = (js: string) => js.includes('mapArray(') && !js.includes('mapArrayAnchored(')
+
+describe('#1665 — anchored-vs-legacy routing for .map() bodies', () => {
+  test('logical && JSX body routes to mapArrayAnchored', () => {
+    expect(usesAnchored(clientJsFor('sel() === t.id && <li KEY>{t.id}</li>').js)).toBe(true)
+  })
+
+  test('ternary with a null branch routes to mapArrayAnchored', () => {
+    expect(usesAnchored(clientJsFor('sel() === t.id ? <li KEY>{t.id}</li> : null').js)).toBe(true)
+  })
+
+  test('logical || JSX body routes to mapArrayAnchored', () => {
+    expect(usesAnchored(clientJsFor('t.on || <li KEY>{t.id}</li>').js)).toBe(true)
+  })
+
+  test('ternary with a scalar branch routes to mapArrayAnchored', () => {
+    // The element-less side renders text, never a tracked element, so the item
+    // is still 0-or-1 element across states — anchored, not legacy.
+    expect(usesAnchored(clientJsFor("sel() === t.id ? <li KEY>{t.id}</li> : 'none'").js)).toBe(true)
+  })
+
+  test('ternary with two element branches stays on the legacy mapArray path', () => {
+    // Always exactly one element, so element tracking is sufficient — must NOT
+    // pay the anchored-emission cost.
+    const { js } = clientJsFor('sel() === t.id ? <li KEY>A</li> : <span KEY>B</span>')
+    expect(usesLegacy(js)).toBe(true)
+    expect(usesAnchored(js)).toBe(false)
+  })
+})
+
+describe('#1665 — keyless whole-item conditional emits valid JS (BF023)', () => {
+  test('logical && without a key raises BF023 but still emits parseable JS', () => {
+    const { js, errorCodes } = clientJsFor('sel() === t.id && <li>{t.id}</li>', /* withKey */ false)
+    expect(errorCodes).toContain(ErrorCodes.MISSING_KEY_IN_LIST)
+    // No empty template-literal interpolation, and the anchor falls back to the
+    // iteration index so the comment value is well-formed.
+    expect(js).not.toContain('${}')
+    expect(js).toContain('bf-loop-i:${__idx}')
+    // The whole client module must parse.
+    const body = js.replace(/^import[^\n]*\n/gm, '').replace(/^export /gm, '')
+    expect(() => new Function(body)).not.toThrow()
+  })
+})

package/src/__tests__/map-logical-jsx-helper.test.ts

@@ -0,0 +1,159 @@
+/**
+ * BarefootJS Compiler — `.map()` callback whose body is a logical
+ * expression (`&&` / `||` / `??`) that renders JSX.
+ *
+ * Regression for #1665: calling a module-level JSX helper from inside a
+ * reactive `.map()` child (`THEMES.map(t => sel === t.id && themeLogo(t.id))`)
+ * threw `ReferenceError: themeLogo is not defined` at hydration.
+ *
+ * Root cause: `transformMapCall` only recognised JSX-element, ternary,
+ * parenthesized, flatMap-array, and block callback bodies. A logical-`&&`
+ * body fell through, leaving `children` empty, so the whole `.map(...)`
+ * was emitted verbatim as a reactive-text expression — the inline JSX was
+ * never compiled and the JSX helper was never inlined nor declared,
+ * producing a ReferenceError.
+ *
+ * The fix routes a JSX-rendering logical callback body through the shared
+ * JSX expression transformer, which lowers it into an IRConditional and
+ * inlines any JSX helper (the same path the ternary form already used).
+ * The routing is scoped to logical operators so the bare-call body
+ * (`map(t => renderItem(t))`, owned by #546) and scalar logical bodies
+ * (`t.active && t.label`) keep their existing reactive-text behaviour.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('.map() with logical / JSX-helper-call body (#1665)', () => {
+  test('module-level JSX helper in a `&&` map body is inlined, not left as a bare call', () => {
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      function themeLogo(id: string) {
+        if (id === 'hono') return <span>hono</span>
+        return <span>piconic</span>
+      }
+      export function Header(props: { sel: string }) {
+        return <div>{THEMES.map(t => props.sel === t.id && themeLogo(t.id))}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+
+    // The helper must NOT survive as a runtime call in the client bundle —
+    // it is inlined. A surviving `themeLogo(` call with no declaration is
+    // the exact ReferenceError the issue reported.
+    expect(clientJs).not.toMatch(/themeLogo\s*\(/)
+
+    // The map is compiled into a loop, and the helper's JSX is inlined.
+    expect(clientJs).toContain('<!--bf-loop')
+    expect(clientJs).toContain('hono')
+    expect(clientJs).toContain('piconic')
+  })
+
+  test('parenthesized `&&` with a single-return JSX helper is inlined', () => {
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      function themeLogo(id: string) { return <span>{id}</span> }
+      export function Header(props: { sel: string }) {
+        return <div>{THEMES.map(t => (props.sel === t.id && themeLogo(t.id)))}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+
+    expect(clientJs).not.toMatch(/themeLogo\s*\(/)
+    expect(clientJs).toContain('<!--bf-loop')
+    expect(clientJs).toContain('<span')
+  })
+
+  test('`??` JSX-helper fallback in a map body is inlined', () => {
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      function themeLogo(id: string) { return <span>{id}</span> }
+      export function Header(props: { current?: string }) {
+        return <div>{THEMES.map(t => props.current ?? themeLogo(t.id))}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+
+    // `transformJsxExpression` now routes a `||`/`??` whose right operand
+    // renders JSX via a tracked helper through the nullish transformer, so
+    // the helper is inlined rather than left as a verbatim call.
+    expect(clientJs).not.toMatch(/themeLogo\s*\(/)
+    expect(clientJs).toContain('<span')
+  })
+
+  test('bare JSX-helper call body keeps its #546 reactive-text behaviour', () => {
+    // Boundary guard: the narrowed fix must NOT re-route a bare call body
+    // into the conditional path — that remains #546 territory. A local
+    // arrow helper is declared in init scope, so the call survives.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function List() {
+        const [items, _set] = createSignal([{ id: '1' }])
+        const renderItem = (item: any) => <li>{item.id}</li>
+        return <ul>{items().map(item => renderItem(item))}</ul>
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+    // The bare call is preserved (not inlined into a conditional loop).
+    expect(clientJs).toMatch(/renderItem\s*\(/)
+  })
+
+  test('inline JSX in a `&&` map body compiles instead of emitting raw JSX verbatim', () => {
+    // `key` is required on the `&&` JSX operand (#1665 / BF023): a whole-item
+    // conditional renders 0-or-1 element per iteration and needs a stable key
+    // for correct reconciliation, exactly like a ternary branch.
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      export function Header(props: { sel: string }) {
+        return <div>{THEMES.map(t => props.sel === t.id && <span key={t.id}>{t.id}</span>)}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+    // Compiled into a loop with a conditional branch — not the raw,
+    // un-compiled `<span>{t.id}</span>` JSX literal the buggy path left
+    // inside the client-bundle template string.
+    expect(clientJs).toContain('<!--bf-loop')
+    expect(clientJs).not.toContain('<span>{t.id}</span>')
+  })
+
+  test('scalar `&&` map body keeps its plain reactive-text behaviour', () => {
+    // Guard: a non-JSX logical body must NOT be re-routed into the
+    // conditional-control-flow path. It stays a verbatim map expression.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Labels() {
+        const [items, _set] = createSignal([{ active: true, name: 'A' }])
+        return <div>{items().map(t => t.active && t.name)}</div>
+      }
+    `
+    const result = compileJSX(source, 'Labels.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+    // Still rendered as the raw map expression (no loop control flow).
+    expect(clientJs).not.toContain('<!--bf-loop')
+    expect(clientJs).toContain('.map(')
+  })
+})

package/src/__tests__/missing-key-in-list.test.ts

@@ -224,6 +224,55 @@ describe('BF023 — ternary .map() callback', () => {
   })
 })
 
+// ---------------------------------------------------------------------------
+// BF023 — logical (&&, ||, ??) .map() callback (#1665)
+//
+// A whole-item conditional (`cond && <li>`) renders 0-or-1 element per
+// iteration. The same key reconciliation applies — without a key, toggling
+// items collapses or misorders them — so the JSX element inside a logical
+// expression must carry a key, just like a ternary branch.
+// ---------------------------------------------------------------------------
+
+describe('BF023 — logical && / || .map() callback (#1665)', () => {
+  test('&& body without key raises BF023', () => {
+    const source = `
+      interface Item { active: boolean; id: string }
+      export function List({ items }: { items: Item[] }) {
+        return <ul>{items.map(item => item.active && <li>{item.id}</li>)}</ul>
+      }
+    `
+    const errs = errorsFor(ErrorCodes.MISSING_KEY_IN_LIST, source)
+    expect(errs).toHaveLength(1)
+    expect(errs[0].severity).toBe('error')
+  })
+
+  test('&& body with key — no error', () => {
+    const source = `
+      interface Item { active: boolean; id: string }
+      export function List({ items }: { items: Item[] }) {
+        return <ul>{items.map(item => item.active && <li key={item.id}>{item.id}</li>)}</ul>
+      }
+    `
+    const result = compile(source)
+    const errs = result.errors.filter(
+      (e) => e.code === ErrorCodes.MISSING_KEY_IN_LIST || e.code === ErrorCodes.MISSING_KEY_IN_NESTED_LIST,
+    )
+    expect(errs).toHaveLength(0)
+  })
+
+  test('|| body without key raises BF023', () => {
+    const source = `
+      interface Item { hidden: boolean; id: string }
+      export function List({ items }: { items: Item[] }) {
+        return <ul>{items.map(item => item.hidden || <li>{item.id}</li>)}</ul>
+      }
+    `
+    const errs = errorsFor(ErrorCodes.MISSING_KEY_IN_LIST, source)
+    expect(errs).toHaveLength(1)
+    expect(errs[0].severity).toBe('error')
+  })
+})
+
 // ---------------------------------------------------------------------------
 // BF024 — nested map
 // ---------------------------------------------------------------------------

package/src/__tests__/reactive-attrs-in-map.test.ts

@@ -236,6 +236,47 @@ describe('reactive attributes inside .map() callbacks', () => {
     expect(forEachMatches.length).toBe(1)
   })
 
+  test('per-item attr reading an outer signal via helper+index gets a createEffect (#1673)', () => {
+    // A per-item attribute whose value reads the source array signal through
+    // a helper indexed by position (`widthAt(i)` → `items()[i].w`) used to
+    // emit NO reactive effect — the value was baked into the item template
+    // once and froze at its SSR value. The identical binding on a top-level
+    // element works, because the top-level path wraps opaque function calls
+    // via the Solid-style AST-flag fallback (#940). This test pins that the
+    // loop-child path now applies the same fallback.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ReproLoopAttr() {
+        const [items, setItems] = createSignal([{ id: 'a', w: 20 }, { id: 'b', w: 50 }])
+        const widthAt = (i) => items()[i].w
+        return (
+          <ul>
+            {items().map((it, i) => (
+              <li key={it.id} data-b style={\`width:\${widthAt(i)}%\`}>{it.id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const result = compileJSX(source, 'ReproLoopAttr.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    // The per-item style binding must be wired through a createEffect that
+    // re-reads the helper and writes the style attribute, so it tracks the
+    // `items()` signal and updates after hydration. Pin the helper call
+    // *inside* the createEffect alongside the style write — `widthAt(` also
+    // appears in the static template clone, so asserting it independently
+    // could pass even if the effect was missing (the exact regression here).
+    // The index resolves to the loop's renderItem index param, in scope
+    // inside the factory.
+    expect(clientJs).toMatch(
+      /createEffect\(\(\)\s*=>\s*\{[\s\S]*?widthAt\([\s\S]*?setAttribute\('style'/,
+    )
+  })
+
   test('keyed loop: `key` prop is not emitted as a reactive DOM attribute', () => {
     // Regression guard for the "key duplicate emission" bug:
     // `<li key={item.id}>` used to be both rendered as `data-key=` in the

package/src/adapters/test-adapter.ts

@@ -138,11 +138,26 @@ export class TestAdapter extends JsxAdapter {
     }
     const fullPropsDestructure = `{ ${parts.join(', ')} }`
 
+    // Default the props param to `{}` when the component has no required
+    // props, so a bare no-arg call (`Foo()`) doesn't crash on destructuring
+    // `undefined`. This is what makes a JSX-returning arrow hoisted from an
+    // object-literal value (e.g. `THEME_LOGOS[id]()`) renderable at SSR
+    // (#1663). `hasRequiredProps` ignores props that carry a destructuring
+    // default, but the declared props type may still mark that field
+    // required — so a bare `= {}` would fail `tsc` ("Property 'x' is missing
+    // in type '{}'..."). Assert the default to the param's own annotated type
+    // (`{} as T`); the destructuring defaults supply the values at runtime.
+    const hasRequiredProps = ir.metadata.propsParams.some(
+      (p: ParamInfo) => !p.optional && p.defaultValue === undefined && !p.isRest,
+    )
+    const propsTypeExpr = typeAnnotation.replace(/^:\s*/, '')
+    const noArgDefault = hasRequiredProps ? '' : ` = {} as ${propsTypeExpr}`
+
     const lines: string[] = []
     // 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}) {`)
+    lines.push(`${exportPrefix}function ${name}(${fullPropsDestructure}${typeAnnotation}${noArgDefault}) {`)
 
     // Generate scope ID
     if (hasClientInteractivity) {

package/src/ir-to-client-js/collect-elements.ts

@@ -231,6 +231,7 @@ export function collectInnerLoops(
           key: n.key,
           markerId: n.markerId,
           bodyIsMultiRoot: n.bodyIsMultiRoot,
+          bodyIsItemConditional: n.bodyIsItemConditional,
           iterationShape: n.iterationShape,
           containerSlotId: scope.parentSlotId,
           template,
@@ -564,6 +565,7 @@ export function collectElements(
         key: l.key,
         markerId: l.markerId,
         bodyIsMultiRoot: l.bodyIsMultiRoot,
+        bodyIsItemConditional: l.bodyIsItemConditional,
         iterationShape: l.iterationShape,
         template,
         staticItemTemplate,
@@ -898,6 +900,7 @@ function collectBranchLoops(
         key: n.key,
         markerId: n.markerId,
         bodyIsMultiRoot: n.bodyIsMultiRoot,
+        bodyIsItemConditional: n.bodyIsItemConditional,
         iterationShape: n.iterationShape,
         template: childTemplate,
         containerSlotId: containerSlot,

package/src/ir-to-client-js/control-flow/plan/build-loop.ts

@@ -56,6 +56,15 @@ export interface BuildLoopPlanOptions {
  * described above and returns the discriminated `LoopPlan`.
  */
 export function buildLoopPlan(elem: TopLevelLoop, opts: BuildLoopPlanOptions): LoopPlan {
+  // Whole-item conditional bodies (#1665) render 0-or-1 element per item, so
+  // they need anchored `mapArrayAnchored` emission regardless of whether the
+  // array is static or dynamic. Routing both through the plain (anchored)
+  // path keeps `const arr` and `signal()` behaviour identical — a static
+  // array's per-item conditional still toggles reactively instead of freezing
+  // in the SSR-time `forEach` (which has no conditional handling at all).
+  if (elem.bodyIsItemConditional) {
+    return buildPlainLoopPlan(elem)
+  }
   if (elem.isStaticArray) {
     return buildStaticLoopPlan(elem, opts.unsafeLocalNames)
   }
@@ -92,6 +101,14 @@ export function buildPlainLoopPlan(elem: TopLevelLoop): PlainLoopPlan {
     reactiveEffects: hasReactive ? buildLoopReactiveEffectsPlan(elem) : null,
     childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,
+    anchored: elem.bodyIsItemConditional ?? false,
+    // Fall back to the iteration index when the loop has no key. A whole-item
+    // conditional without a key is a BF023 error, but the emitted client JS
+    // must still parse — an empty `anchorKeyExpr` would produce
+    // `createComment(`bf-loop-i:${}`)` (a SyntaxError that breaks the whole
+    // bundle). `elem.index || '__idx'` matches `indexParam` above, so the
+    // anchor value stays consistent with the renderItem's own index param.
+    anchorKeyExpr: elem.key ? wrap(elem.key) : (elem.index || '__idx'),
   }
 }
 

package/src/ir-to-client-js/control-flow/plan/loop.ts

@@ -95,6 +95,20 @@ interface PlainLoopVariant extends DynamicLoopCommon {
    * `<!--bf-loop-i-->` marker emission, and `qsaItem` slot lookups (#1212).
    */
   bodyIsMultiRoot: boolean
+  /**
+   * True when the loop body is a whole-item conditional (#1665). Switches
+   * emission to `mapArrayAnchored`: the renderItem returns a fragment headed
+   * by a `<!--bf-loop-i:KEY-->` anchor and seeded with the conditional's
+   * markers, and `insert(anchor, …)` (not `insert(__el, …)`) owns the
+   * possibly-empty content.
+   */
+  anchored: boolean
+  /**
+   * Key expression wrapped as a loop-param accessor (`t().id`), used to bake
+   * the per-item `bf-loop-i:KEY` anchor value inside the anchored renderItem.
+   * Empty when the loop has no key (only meaningful when `anchored`).
+   */
+  anchorKeyExpr: string
 }
 
 /**

package/src/ir-to-client-js/control-flow/stringify/insert.ts

@@ -163,10 +163,15 @@ function emitArmBody(
 
   for (const te of body.textEffects) {
     const v = varSlotId(te.slotId)
-    lines.push(`${indent}const [__el_${v}] = $t(__branchScope, '${te.slotId}')`)
+    // Route through `__bfText` so a JSX-valued expression (`{cond && logo(id)}`)
+    // re-splices the live element by identity instead of stringifying it to
+    // "[object HTMLElement]" — the branch template already spliced it via
+    // `__bfSlot`, and this effect re-renders it when its deps change (#1663).
+    // The `let` tracker carries the replaced node across reactive re-runs.
+    lines.push(`${indent}let __anchor_${v} = $t(__branchScope, '${te.slotId}')[0]`)
     lines.push(`${indent}__disposers.push(createDisposableEffect(() => {`)
     lines.push(`${indent}  const __val = ${te.expression}`)
-    lines.push(`${indent}  if (__el_${v} && !__val?.__isSlot) __el_${v}.nodeValue = String(__val ?? '')`)
+    lines.push(`${indent}  __anchor_${v} = __bfText(__anchor_${v}, __val)`)
     lines.push(`${indent}}))`)
   }