@barefootjs/jsx 0.4.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__/child-components-in-map.test.ts

@@ -729,4 +729,80 @@ describe('child components inside .map() (#344)', () => {
     expect(content).toContain('children[__idx]')
     expect(content).not.toContain('children[__idx + ')
   })
+
+  test('nested .map() with multiple inner components emits unique __compEl bindings (#1664)', () => {
+    const source = `
+      'use client'
+
+      export function Picker() {
+        const GROUPS = [
+          { id: 'a', items: [{ id: 'x', label: 'X' }] },
+        ]
+        return (
+          <div>
+            {GROUPS.map(group => (
+              <div key={group.id}>
+                {group.items.map(it => (
+                  <div key={it.id}>
+                    <SelectItem value={it.id}>{it.label}</SelectItem>
+                    <SelectIcon name={it.id} />
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Picker.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    const content = clientJs!.content
+
+    // Both inner-loop components must be initialised.
+    expect(content).toContain("initChild('SelectItem'")
+    expect(content).toContain("initChild('SelectIcon'")
+
+    // No re-declaration of `__compEl` in the shared inner-forEach scope:
+    // each comp must use a uniquely-suffixed binding.
+    expect(content).toContain('__compEl0')
+    expect(content).toContain('__compEl1')
+
+    // The bug threw "Identifier '__compEl' has already been declared" — the
+    // unsuffixed binding must not appear when multiple comps share a scope.
+    expect(content).not.toContain('const __compEl =')
+  })
+
+  test('nested .map() with a single inner component keeps the plain __compEl binding (#1664)', () => {
+    const source = `
+      'use client'
+
+      export function Picker() {
+        const GROUPS = [
+          { id: 'a', items: [{ id: 'x', label: 'X' }] },
+        ]
+        return (
+          <div>
+            {GROUPS.map(group => (
+              <div key={group.id}>
+                {group.items.map(it => (
+                  <SelectItem key={it.id} value={it.id}>{it.label}</SelectItem>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Picker.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toContain("initChild('SelectItem'")
+    // Single comp keeps the unsuffixed name.
+    expect(content).toContain('const __compEl =')
+    expect(content).not.toContain('__compEl0')
+  })
 })

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__/import-map.test.ts

@@ -0,0 +1,75 @@
+/**
+ * renderImportMapHtml tests
+ *
+ * The shared importmap-snippet renderer turns a parsed `barefoot-externals.json`
+ * into the `<script type="importmap">` (+ `<link rel="modulepreload">`) HTML that
+ * `bf build` emits as `barefoot-importmap.html` for template-string adapters
+ * (issue #1644). This is the single source of truth for that snippet.
+ */
+import { describe, test, expect } from 'bun:test'
+import { renderImportMapHtml } from '../import-map'
+
+function parseImportMap(html: string): Record<string, string> {
+  const match = html.match(/<script type="importmap">(.*?)<\/script>/s)
+  if (!match) throw new Error(`no importmap in: ${html}`)
+  // Decode the < escape the renderer applies before parsing.
+  return JSON.parse(match[1]).imports
+}
+
+describe('renderImportMapHtml', () => {
+  test('emits the manifest importmap imports verbatim', () => {
+    const html = renderImportMapHtml({
+      importmap: {
+        imports: {
+          '@barefootjs/client': '/components/barefoot.js',
+          '@barefootjs/client/runtime': '/components/barefoot.js',
+          zod: 'https://esm.sh/zod@4.4.3',
+        },
+      },
+      preloads: [],
+    })
+    expect(parseImportMap(html)).toEqual({
+      '@barefootjs/client': '/components/barefoot.js',
+      '@barefootjs/client/runtime': '/components/barefoot.js',
+      zod: 'https://esm.sh/zod@4.4.3',
+    })
+    expect(html).not.toContain('modulepreload')
+  })
+
+  test('emits modulepreload links with crossorigin for manifest preloads (#1648)', () => {
+    const html = renderImportMapHtml({
+      importmap: { imports: {} },
+      preloads: ['/components/form.js', 'https://esm.sh/zod@4.4.3'],
+    })
+    expect(html).toContain('<link rel="modulepreload" href="/components/form.js" crossorigin>')
+    expect(html).toContain('<link rel="modulepreload" href="https://esm.sh/zod@4.4.3" crossorigin>')
+  })
+
+  test('reads defensively from a partial manifest', () => {
+    expect(parseImportMap(renderImportMapHtml({}))).toEqual({})
+    expect(renderImportMapHtml({})).not.toContain('modulepreload')
+  })
+
+  test('ends with a trailing newline (template-include friendly)', () => {
+    expect(renderImportMapHtml({ importmap: { imports: {} } }).endsWith('\n')).toBe(true)
+  })
+
+  test('escapes < in the importmap JSON so a URL cannot break out of the script', () => {
+    const html = renderImportMapHtml({
+      importmap: { imports: { evil: 'https://x/</script><script>alert(1)</script>' } },
+    })
+    // The literal closing tag must not appear before the importmap's own.
+    const importmapClose = html.indexOf('</script>')
+    expect(html.slice(0, importmapClose)).not.toContain('</script>')
+    // But the value still round-trips through JSON.parse.
+    expect(parseImportMap(html).evil).toBe('https://x/</script><script>alert(1)</script>')
+  })
+
+  test('escapes double quotes and angle brackets in preload hrefs', () => {
+    const html = renderImportMapHtml({
+      preloads: ['/components/"onerror=alert(1).js'],
+    })
+    expect(html).not.toContain('"onerror=alert(1)')
+    expect(html).toContain('&quot;onerror=alert(1)')
+  })
+})

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__/ir-sort-comparator.test.ts

@@ -31,9 +31,10 @@ describe('sort().map() / toSorted().map()', () => {
       expect(loop).toBeDefined()
       if (loop?.type === 'loop') {
         expect(loop.sortComparator).toBeDefined()
-        expect(loop.sortComparator!.key).toEqual({ kind: 'field', field: 'price' })
-        expect(loop.sortComparator!.type).toBe('numeric')
-        expect(loop.sortComparator!.direction).toBe('asc')
+        expect(loop.sortComparator!.keys).toHaveLength(1)
+        expect(loop.sortComparator!.keys[0].key).toEqual({ kind: 'field', field: 'price' })
+        expect(loop.sortComparator!.keys[0].type).toBe('numeric')
+        expect(loop.sortComparator!.keys[0].direction).toBe('asc')
         expect(loop.sortComparator!.method).toBe('sort')
         expect(loop.sortComparator!.paramA).toBe('a')
         expect(loop.sortComparator!.paramB).toBe('b')
@@ -69,9 +70,10 @@ describe('sort().map() / toSorted().map()', () => {
       expect(loop).toBeDefined()
       if (loop?.type === 'loop') {
         expect(loop.sortComparator).toBeDefined()
-        expect(loop.sortComparator!.key).toEqual({ kind: 'field', field: 'price' })
-        expect(loop.sortComparator!.type).toBe('numeric')
-        expect(loop.sortComparator!.direction).toBe('desc')
+        expect(loop.sortComparator!.keys).toHaveLength(1)
+        expect(loop.sortComparator!.keys[0].key).toEqual({ kind: 'field', field: 'price' })
+        expect(loop.sortComparator!.keys[0].type).toBe('numeric')
+        expect(loop.sortComparator!.keys[0].direction).toBe('desc')
         expect(loop.sortComparator!.method).toBe('toSorted')
       }
     }
@@ -105,9 +107,10 @@ describe('sort().map() / toSorted().map()', () => {
         expect(loop.filterPredicate).toBeDefined()
         expect(loop.filterPredicate!.param).toBe('t')
         expect(loop.sortComparator).toBeDefined()
-        expect(loop.sortComparator!.key).toEqual({ kind: 'field', field: 'priority' })
-        expect(loop.sortComparator!.type).toBe('numeric')
-        expect(loop.sortComparator!.direction).toBe('asc')
+        expect(loop.sortComparator!.keys).toHaveLength(1)
+        expect(loop.sortComparator!.keys[0].key).toEqual({ kind: 'field', field: 'priority' })
+        expect(loop.sortComparator!.keys[0].type).toBe('numeric')
+        expect(loop.sortComparator!.keys[0].direction).toBe('asc')
         expect(loop.chainOrder).toBe('filter-sort')
         expect(loop.array).toBe('todos()')
       }
@@ -147,6 +150,206 @@ describe('sort().map() / toSorted().map()', () => {
     }
   })
 
+  test('multi-key (||-chain) produces one SortKey per operand', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        return (
+          <ul>
+            {products().sort((a, b) => b.price - a.price || a.name.localeCompare(b.name)).map(p => (
+              <li>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      expect(loop?.type).toBe('loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        expect(loop.sortComparator!.keys).toEqual([
+          { key: { kind: 'field', field: 'price' }, type: 'numeric', direction: 'desc' },
+          { key: { kind: 'field', field: 'name' }, type: 'string', direction: 'asc' },
+        ])
+      }
+    }
+  })
+
+  test('relational ternary comparator lowers to an auto key', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        return (
+          <ul>
+            {products().toSorted((a, b) => a.rank > b.rank ? 1 : -1).map(p => (
+              <li>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        expect(loop.sortComparator!.keys).toEqual([
+          { key: { kind: 'field', field: 'rank' }, type: 'auto', direction: 'asc' },
+        ])
+      }
+    }
+  })
+
+  test('3-way ternary comparator derives direction from the outer comparison', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function NumList() {
+        const [nums, setNums] = createSignal<number[]>([])
+        return (
+          <ul>
+            {nums().sort((a, b) => a < b ? -1 : a > b ? 1 : 0).map(n => (
+              <li>{n}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'NumList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        expect(loop.sortComparator!.keys).toEqual([
+          { key: { kind: 'self' }, type: 'auto', direction: 'asc' },
+        ])
+      }
+    }
+  })
+
+  test('arrow block body with single return unwraps to the comparator', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        return (
+          <ul>
+            {products().sort((a, b) => { return a.price - b.price }).map(p => (
+              <li>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        expect(loop.sortComparator!.keys).toEqual([
+          { key: { kind: 'field', field: 'price' }, type: 'numeric', direction: 'asc' },
+        ])
+        // block body unwraps to the returned expression, keeping the
+        // @client fallback's synthetic `(a, b) => raw` arrow valid.
+        expect(loop.sortComparator!.raw).toBe('a.price - b.price')
+      }
+    }
+  })
+
+  test('leading-equality 3-way ternary (a.f === b.f ? 0 : …) lowers to an auto key', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        return (
+          <ul>
+            {products().toSorted((a, b) => a.rank === b.rank ? 0 : a.rank > b.rank ? 1 : -1).map(p => (
+              <li>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        // The `=== ? 0` arm is a tie; direction comes from the inner
+        // relational ternary (a.rank > b.rank ? 1 : -1 → ascending).
+        expect(loop.sortComparator!.keys).toEqual([
+          { key: { kind: 'field', field: 'rank' }, type: 'auto', direction: 'asc' },
+        ])
+      }
+    }
+  })
+
+  test('multi-key mixing a numeric leaf and an auto (ternary) leaf', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        return (
+          <ul>
+            {products().sort((a, b) => a.price - b.price || (a.rank > b.rank ? 1 : -1)).map(p => (
+              <li>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        expect(loop.sortComparator!.keys).toEqual([
+          { key: { kind: 'field', field: 'price' }, type: 'numeric', direction: 'asc' },
+          { key: { kind: 'field', field: 'rank' }, type: 'auto', direction: 'asc' },
+        ])
+      }
+    }
+  })
+
   test('complex sort comparator with @client keeps sort in array', () => {
     const source = `
       'use client'

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()
+  })
+})