@barefootjs/jsx 0.32.0 → 0.33.1

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

@@ -367,4 +367,152 @@ describe('JSX props (#559)', () => {
       expect(clientJs!.content).toContain("kind: 'markup'")
     })
   })
+
+  // #2703 (Copilot review on #2667's PR): the naked ternary/array wrapper
+  // refusal, and the direct-JSX classification it sits beside, both used
+  // to unwrap only `ParenthesizedExpression` — a JSX-wrapping ternary/
+  // array (or a direct JSX element) additionally wrapped in a transparent
+  // TS annotation (`as`, `satisfies`, postfix non-null `!`) slipped past
+  // both checks and still spliced raw JSX into the emitted client JS.
+  describe('#2667/#2703: transparent TS wrappers around JSX in prop position', () => {
+    test('ternary wrapping `as`-cast JSX branches still refuses with BF021', () => {
+      const source = `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+        export function App() {
+          const [cond, setCond] = createSignal(true)
+          return (
+            <Layout header={cond() ? (<a>x</a> as any) : (<b>y</b> as any)} />
+          )
+        }
+      `
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      const errors = result.errors.filter(e => e.severity === 'error')
+      expect(errors).toHaveLength(1)
+      expect(errors[0].code).toBe('BF021')
+      // No raw JSX syntax leaked into the client bundle.
+      const clientJs = result.files.find(f => f.type === 'clientJs')
+      expect(clientJs?.content ?? '').not.toMatch(/<a>x<\/a>|<b>y<\/b>/)
+    })
+
+    test('ternary wrapping `satisfies`-annotated JSX branches still refuses with BF021', () => {
+      const source = `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+        export function App() {
+          const [cond, setCond] = createSignal(true)
+          return (
+            <Layout header={cond() ? (<a>x</a> satisfies any) : (<b>y</b> satisfies any)} />
+          )
+        }
+      `
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      const errors = result.errors.filter(e => e.severity === 'error')
+      expect(errors).toHaveLength(1)
+      expect(errors[0].code).toBe('BF021')
+    })
+
+    test('ternary wrapping non-null-asserted JSX branches still refuses with BF021', () => {
+      // `!` must trail the CLOSING paren, not sit inside it: TS's parser
+      // mis-parses `(<a/>!)` (non-null touching the JSX closing tag
+      // directly, inside the parens) — confirmed by direct AST dump
+      // during #2703's investigation, unrelated to this fix.
+      const source = `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+        export function App() {
+          const [cond, setCond] = createSignal(true)
+          return (
+            <Layout header={cond() ? (<a>x</a>)! : (<b>y</b>)!} />
+          )
+        }
+      `
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      const errors = result.errors.filter(e => e.severity === 'error')
+      expect(errors).toHaveLength(1)
+      expect(errors[0].code).toBe('BF021')
+    })
+
+    test('array literal wrapping `as`-cast JSX elements still refuses with BF021', () => {
+      const source = `
+        export function App() {
+          return (
+            <Layout header={[<a>x</a> as any, <b>y</b> as any]} />
+          )
+        }
+      `
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      const errors = result.errors.filter(e => e.severity === 'error')
+      expect(errors).toHaveLength(1)
+      expect(errors[0].code).toBe('BF021')
+    })
+
+    test('a bare `as`-cast JSX element (no ternary) still classifies as jsx-children, not a refusal', () => {
+      const source = `
+        export function App() {
+          return <Layout header={<a>x</a> as any} />
+        }
+      `
+      const ctx = analyzeComponent(source, 'App.tsx')
+      const ir = jsxToIR(ctx)
+      expect(ir).not.toBeNull()
+      const layout = findComponent(ir!, 'Layout')
+      const headerProp = layout!.props.find(p => p.name === 'header')
+      expect(headerProp!.value.kind).toBe('jsx-children')
+
+      // Phase 2: the compiled client JS brands it (#2651), matching the
+      // bare `<a>x</a>` form byte-for-byte — `as any` is erased, not
+      // spliced as source text.
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+      const clientJs = result.files.find(f => f.type === 'clientJs')
+      expect(clientJs!.content).toMatch(/bfMarkup\(`<a>x<\/a>`\)/)
+    })
+
+    test('a bare `satisfies`-annotated JSX element (no ternary) still classifies as jsx-children', () => {
+      const source = `
+        export function App() {
+          return <Layout header={<a>x</a> satisfies any} />
+        }
+      `
+      const ctx = analyzeComponent(source, 'App.tsx')
+      const ir = jsxToIR(ctx)
+      const layout = findComponent(ir!, 'Layout')
+      const headerProp = layout!.props.find(p => p.name === 'header')
+      expect(headerProp!.value.kind).toBe('jsx-children')
+    })
+
+    test('a bare non-null-asserted JSX element (no ternary) still classifies as jsx-children', () => {
+      // `!` must trail the closing paren (`(<a/>)!`), not touch the JSX
+      // closing tag directly (`<a/>!`) — the latter does not reliably
+      // parse as a NonNullExpression at all inside a JSX attribute
+      // expression (confirmed by direct AST dump during #2703's
+      // investigation: the bare form leaves stray tokens outside the
+      // JsxExpression entirely, so it never reaches this code path as a
+      // NonNullExpression in the first place — unrelated to this fix).
+      const source = `
+        export function App() {
+          return <Layout header={(<a>x</a>)!} />
+        }
+      `
+      const ctx = analyzeComponent(source, 'App.tsx')
+      const ir = jsxToIR(ctx)
+      const layout = findComponent(ir!, 'Layout')
+      const headerProp = layout!.props.find(p => p.name === 'header')
+      expect(headerProp!.value.kind).toBe('jsx-children')
+    })
+
+    test('a ternary with NO JSX inside, wrapped in `as`, is unaffected (ordinary expression, no refusal)', () => {
+      const source = `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+        export function App() {
+          const [cond, setCond] = createSignal(true)
+          return <Layout disabled={(cond() ? true : false) as any} />
+        }
+      `
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    })
+  })
 })

package/src/__tests__/issue-2705-branch-inner-loop-container.test.ts

@@ -0,0 +1,91 @@
+/**
+ * Compiler-unit regression pin for #2705 (fixed).
+ *
+ * A loop nested inside a loop-row conditional's branch, behind a wrapper
+ * element the branch's own IR subtree never sees (`<article>{cond &&
+ * items.map(...)}</article>`), gets no `containerSlotId` of its own
+ * (`collectInnerLoops`'s branch walk in ir-to-client-js/collect-elements.ts
+ * never observes an ancestor outside the branch). `buildBranchInnerLoopsPlan`
+ * (control-flow/plan/build-loop-child-arm.ts) must fall back to
+ * `findCondContainer(__branchScope, '<condSlotId>')` — NOT the raw
+ * `__branchScope` (the whole conditional's bind scope, several elements
+ * wider than the loop's actual container; the pre-fix behavior that caused
+ * the runtime defect in issue-2705-nested-loop-branch-container-slot.test.ts).
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('#2705 — branch inner-loop container fallback', () => {
+  test('inner loop behind a wrapped loop-row `&&` conditional resolves its container via findCondContainer', () => {
+    const source = `
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      type Item = { id: string; label: string }
+      type Group = { id: string; show: boolean; items: Item[] }
+      export function Repro() {
+        const [groups] = createSignal<Group[]>([])
+        return (
+          <div>
+            {groups().map((group) => (
+              <div key={group.id}>
+                <article>
+                  Group
+                  {group.show &&
+                    group.items.map((item) => (
+                      <section key={item.id}>{item.label}</section>
+                    ))}
+                </article>
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Repro.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+
+    // The conditional's own slot id feeds `findCondContainer` — never a raw
+    // `__branchScope` container for this inner mapArray.
+    expect(content).toMatch(/const __bic\w+ = findCondContainer\(__branchScope, '(s\d+)'\)/)
+    expect(content).not.toMatch(/const __bic\w+ = __branchScope\s*$/m)
+    expect(content).toContain('findCondContainer')
+  })
+
+  test('an existing (non-null containerSlotId) inner-loop container is unaffected', () => {
+    // Control: a loop DIRECTLY inside a component whose own element carries
+    // a slot id continues to resolve via the qsa/bf-h fallback chain, not
+    // `findCondContainer` — the fix only changes the previously-null path.
+    const source = `
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      type TreeNode = { id: number; name: string; type: 'file' | 'folder'; expanded: boolean; children: TreeNode[] }
+      export function FileBrowser() {
+        const [tree] = createSignal<TreeNode[]>([])
+        return (
+          <div>
+            {tree().map(node => (
+              <div key={node.id}>
+                {node.expanded ? (
+                  <div>
+                    {node.children.map(child => (
+                      <div key={child.id}>{child.name}</div>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'FileBrowser.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).not.toContain('findCondContainer')
+    expect(content).toMatch(/\.querySelector\('\[bf="s\d+"\]'\)/)
+  })
+})

package/src/__tests__/markup-prop-brand.test.ts

@@ -158,4 +158,53 @@ describe('markup-prop brand (#2651)', () => {
     // `__slot(...)` live-node wrapping — not itself re-wrapped in bfMarkup.
     expect(clientJs).toMatch(/get header\(\)\s*\{\s*return __slot\(/)
   })
+
+  // KNOWN BUG (#2702) — pins the CURRENT (broken) emission, not the
+  // correct one. `isSingleElementJsxChildren` (`ir-to-client-js/collect-
+  // elements.ts`) only brands the single-element jsx-children shape;
+  // #2651's PR body enumerated "conditional-in-fragment" as deliberately
+  // out of that PR's scope, and #2702 confirms it is actually broken, not
+  // merely unbranded-but-harmless: the child's own `escapeTextOrNode`
+  // reactive effect re-escapes the chosen branch's HTML as literal text
+  // the moment it first runs (real DOM corruption, verified directly —
+  // see `jsx-element-prop-fragment-conditional`'s fixture docstring,
+  // `packages/adapter-tests/fixtures/`, for the full mechanism and why no
+  // other shared conformance suite observes it: SSR is genuinely correct,
+  // and CSR conformance's `createEffect` mock never runs the effect).
+  //
+  // Graduation: once `bfMarkup()` branding is extended to this multi-part
+  // shape, this assertion starts failing — replace it with a positive
+  // `bfMarkup(...)`-wrapped assertion (mirroring test (b) above) and
+  // delete this comment block; that is the fixture's own graduation
+  // trigger too (its `expectedHtml` is already the correct SSR output, so
+  // no fixture change is needed, only this pin's removal and #2667's
+  // BF021 suggestion regaining the fragment-wrap escape).
+  test('(h) KNOWN BUG (#2702): a conditional-in-fragment jsx-children prop reaches initChild UNbranded', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Card(props: { header?: any; children?: any }) {
+        return (
+          <section>
+            <header>{props.header}</header>
+            <div>{props.children}</div>
+          </section>
+        )
+      }
+      export function JsxElementPropFragmentConditional() {
+        const [cond, setCond] = createSignal(true)
+        return (
+          <Card header={<>{cond() ? <a>x</a> : <b>y</b>}</>}>
+            <p>body text</p>
+          </Card>
+        )
+      }
+    `
+    const clientJs = clientJsFor(source)
+    // Bug: the getter returns a bare template-literal ternary — NOT
+    // wrapped in bfMarkup(...). If this ever starts matching bfMarkup(...)
+    // the bug is fixed; see the graduation note above.
+    expect(clientJs).toMatch(/get header\(\)\s*\{\s*return cond\(\)\s*\?\s*`<a>x<\/a>`\s*:\s*`<b>y<\/b>`\s*\}/)
+    expect(clientJs).not.toMatch(/get header\(\)\s*\{\s*return bfMarkup\(/)
+  })
 })

package/src/__tests__/nested-loop-conditional.test.ts

@@ -134,14 +134,15 @@ describe('nested loops/conditionals inside mapArray (#830, #839)', () => {
     expect(mapArrayCount).toBeGreaterThanOrEqual(3)
   })
 
-  test('reactive text inside conditional inside inner loop uses re-claim pattern (#840)', () => {
-    // When a reactive text is inside a conditional branch inside a nested (inner) loop,
-    // insert() may replace the SSR element after the text node is captured.
-    // Slot unification A3: the generated code must re-claim on EVERY run via
-    // a fresh `claimSlots(...).write(...)` call inside the effect body — not
-    // a `lazySlots` writer built once outside it, which would go stale once
-    // insert() swaps the branch's DOM (see `stringifyInnerLoops`' docstring
-    // in `ir-to-client-js/control-flow/stringify/inner-loop.ts`).
+  test('reactive text inside conditional inside inner loop gets a real insert() (#840, fixed by #2706)', () => {
+    // A per-item conditional living inside a NESTED (inner) loop's row now
+    // gets full insert() parity with a top-level loop's row conditional
+    // (#2706) — the condition is a real reactive `createEffect` dependency,
+    // not baked once at row creation, and the branch's reactive text binds
+    // through the arm's own `lazySlots(__branchScope, ...)` +
+    // `createDisposableEffect` (same shape `stringifyLoopChildArm` emits for
+    // any other insert() arm), never a bare-claimSlots reclaim racing
+    // against a marker the active branch may not have rendered.
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -176,9 +177,17 @@ describe('nested loops/conditionals inside mapArray (#830, #839)', () => {
     expect(clientJs).toBeDefined()
     const content = clientJs!.content
 
-    // Re-claim pattern: a fresh `claimSlots(...)` call inside createEffect so
-    // it always resolves against the live node, never a cached stale ref.
-    expect(content).toMatch(/createEffect\(\(\) => \{ claimSlots\(__innerEl\w*, \[\{ id: 's\d+', kind: 'text', path: \[\] \}\]\)\.write\('s\d+', String\(/)
+    // A real insert() over the row's own element, keyed to the conditional's
+    // slot id and condition — not a static bake.
+    expect(content).toMatch(/insert\(__innerEl\w*, 's\d+', \(\) => child\(\)\.type === 'text', \{/)
+
+    // The branch's reactive text binds inside `bindEvents` via the standard
+    // arm-text shape (`lazySlots` + `createDisposableEffect`), scoped to
+    // `__branchScope` — the node insert() actually mounts for this branch —
+    // never a bare `claimSlots` reclaim against `__innerEl<uid>` racing the
+    // branch's own mount/unmount.
+    expect(content).toMatch(/const __bfw_s\d+ = lazySlots\(__branchScope, \[\{ id: 's\d+', kind: 'markup', path: \[\] \}\]\)/)
+    expect(content).toMatch(/createDisposableEffect\(\(\) => \{ __bfw_s\d+\('s\d+', escapeTextOrNode\(child\(\)\.label\)\) \}\)/)
   })
 
   test('event handler inside conditional branch of loop item appears in bindEvents (#839)', () => {

package/src/__tests__/return-through-local-var.test.ts

@@ -0,0 +1,269 @@
+/**
+ * Regression tests for #2720: a component whose render is bound to a local
+ * const and returned by name —
+ *
+ *   export function Button() {
+ *     const __root = (<button>Go</button>)
+ *     return __root
+ *   }
+ *
+ * — previously produced `{files: [], errors: []}`: neither sound (nothing
+ * emitted) nor loud (nothing reported). Two structural variants of this
+ * shape need two separate detectors, both landing here:
+ *
+ * 1. **Flat** (statements are direct children of the component body, as
+ *    written above): `ctx.jsxReturn` DOES get set (to the `__root`
+ *    Identifier — `visitComponentBody`'s return handler captures any
+ *    return expression, not just syntactic JSX), but return position never
+ *    resolves an identifier through its initializer the way JSX-child
+ *    position does via `jsxConstants` / `inlineableJsxConsts` (#547 /
+ *    #1409) — so `transformJsxExpression`'s scalar-leaf case returns `null`
+ *    and `buildIRRoot` (`jsx-to-ir.ts`) drops the component silently. Fixed
+ *    there: recognize a bare Identifier at return position that names a
+ *    local already proven to hold JSX by those two maps, and report BF027
+ *    instead of dropping it.
+ *
+ * 2. **Nested-block** (`{ const __root = <jsx/>; return __root }` as a
+ *    single block statement — the exact shape the #2481 mutation sweep's
+ *    `block-body` mutation produces by wrapping the ORIGINAL return
+ *    statement): the block is a direct child of the component body, so
+ *    `visitComponentBody`'s opaque-block preservation (#930 — "a bare
+ *    block at the top of a component body is inert side-effect scoping,
+ *    preserve it verbatim, don't recurse") swallows it whole. Neither
+ *    `jsxConstants` nor `jsxReturn` are EVER set, so the flat-case fix
+ *    above never runs. Fixed in `analyzer.ts`'s `visitComponentBody`:
+ *    before preserving such a block, `findBlockBodyReturnedJsxLocalName`
+ *    checks whether it is exactly this "name the JSX, then return the
+ *    name" shape and reports BF027 directly.
+ *
+ * The "faithful" fix (resolving the identifier through its initializer so
+ * the component actually compiles, for either variant) is tracked
+ * separately by #2720 and not implemented here — this PR is the loud
+ * stopgap only.
+ *
+ * Found by the #2481 mutation sweep's `block-body` mutation
+ * (`packages/adapter-tests/mutation/mutations.ts`, the nested-block shape
+ * above): 41/41 corpus fixtures reproduced this identically before this
+ * fix, classified `broken` with `refused` at 0. This fix flips them to
+ * `refused` (a pass under the sound-or-loud trichotomy).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('BF027: return-through-local-variable is not recognized as JSX (#2720)', () => {
+  test('function component: `const __root = (<jsx/>); return __root` reports BF027 instead of silently emitting nothing', () => {
+    const source = `
+      export function Button() {
+        const __root = (<button>Go</button>)
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+
+    // Neither silent-drop nor silent-emit: no files, but a loud diagnostic.
+    expect(result.files).toHaveLength(0)
+    const bf027 = result.errors.find(e => e.code === 'BF027')
+    expect(bf027).toBeDefined()
+    expect(bf027!.severity).toBe('error')
+    expect(bf027!.message).toContain('Button')
+    expect(bf027!.message).toMatch(/not recognized as JSX/)
+  })
+
+  test('arrow component: same shape via `export const Button = () => {...}`', () => {
+    const source = `
+      export const Button = () => {
+        const __root = <button>Go</button>
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    expect(result.errors.find(e => e.code === 'BF027')).toBeDefined()
+  })
+
+  test('non-root JSX initializer (ternary) through a local also reports BF027', () => {
+    const source = `
+      export function Button({ ok }: { ok: boolean }) {
+        const __root = ok ? <button>Go</button> : <span>No</span>
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    expect(result.errors.find(e => e.code === 'BF027')).toBeDefined()
+  })
+
+  test('nested-block shape (the actual mutation-sweep output): `{ const __root = <jsx/>; return __root }` reports BF027', () => {
+    // This is the shape `packages/adapter-tests/mutation/mutations.ts`'s
+    // `blockBody` mutation actually produces (it wraps the ORIGINAL return
+    // statement in a new block rather than splicing the const/return in as
+    // top-level statements) — structurally distinct from the flat case
+    // above because the block is opaque to `visitComponentBody` (#930).
+    const source = `
+      export function Button() {
+        {
+          const __root = <button>Go</button>
+          return __root
+        }
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    const bf027 = result.errors.find(e => e.code === 'BF027')
+    expect(bf027).toBeDefined()
+    expect(bf027!.message).toContain('Button')
+  })
+
+  test('nested-block shape with a ternary JSX initializer also reports BF027', () => {
+    const source = `
+      export function Button({ ok }: { ok: boolean }) {
+        {
+          const __root = ok ? <button>Go</button> : <span>No</span>
+          return __root
+        }
+      }
+    `
+    const result = compileJSX(source, 'Button.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    expect(result.errors.find(e => e.code === 'BF027')).toBeDefined()
+  })
+
+  test('nested-block shape with a `.map()`-with-JSX-callback initializer also reports BF027', () => {
+    // `initializerShapeContainsJsx` stops at arrow boundaries, so this
+    // variant needs the same `isMapLikeCallWithJsx` check `collectConstant`
+    // uses (#1554) — without it this shape slipped back into the silent
+    // drop even after BF027 landed (Copilot review on #2726).
+    const source = `
+      export function List() {
+        {
+          const __root = ['a', 'b'].map((item) => <div>{item}</div>)
+          return __root
+        }
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    const bf027 = result.errors.find(e => e.code === 'BF027')
+    expect(bf027).toBeDefined()
+    expect(bf027!.message).toContain('List')
+  })
+
+  test('flat shape with a `.map()`-with-JSX-callback initializer reports BF027 (via inlineableJsxConsts)', () => {
+    const source = `
+      export function List() {
+        const __root = ['a', 'b'].map((item) => <div>{item}</div>)
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.files).toHaveLength(0)
+    expect(result.errors.find(e => e.code === 'BF027')).toBeDefined()
+  })
+
+  test('multi-component file: the broken sibling is flagged but the good sibling still compiles', () => {
+    const source = `
+      export function Good() { return <div>ok</div> }
+      export function Bad() {
+        const __root = <button>Go</button>
+        return __root
+      }
+    `
+    const result = compileJSX(source, 'Multi.tsx', { adapter })
+    const bf027 = result.errors.find(e => e.code === 'BF027')
+    expect(bf027).toBeDefined()
+    expect(bf027!.message).toContain('Bad')
+    // Good still produces output despite Bad's failure.
+    expect(result.files.length).toBeGreaterThan(0)
+  })
+
+  describe('control: direct JSX return keeps compiling clean', () => {
+    test('function component returning JSX directly has no BF027 and produces files', () => {
+      const source = `
+        export function Button() {
+          return (<button>Go</button>)
+        }
+      `
+      const result = compileJSX(source, 'Button.tsx', { adapter })
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+      expect(result.files.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('no false positive: PascalCase exports that legitimately do not return JSX stay silent', () => {
+    test('a PascalCase function returning a plain object is untouched (not a component at all)', () => {
+      const source = `
+        export function CreateUser() {
+          return { name: 'x' }
+        }
+      `
+      const result = compileJSX(source, 'CreateUser.tsx', { adapter })
+      // Pre-existing behaviour for a non-component PascalCase export:
+      // no files, no errors. BF027 must not fire here — there is no local
+      // proven to hold JSX anywhere in this function.
+      expect(result.files).toHaveLength(0)
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+    })
+
+    test('render-nothing literals (null / <></> / false) returned directly stay clean', () => {
+      const source = `
+        export function ReturnsNull() { return null }
+        export function ReturnsFragment() { return <></> }
+        export function ReturnsFalse(): any { return false }
+      `
+      const result = compileJSX(source, 'ReturnsNull.tsx', { adapter })
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+    })
+
+    test('a local const unrelated to JSX does not spuriously trip BF027', () => {
+      const source = `
+        export function Button() {
+          const count = 1
+          return <button>{count}</button>
+        }
+      `
+      const result = compileJSX(source, 'Button.tsx', { adapter })
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+      expect(result.files.length).toBeGreaterThan(0)
+    })
+
+    test('an ordinary top-level scoping block with no returned local is untouched', () => {
+      // A bare block used for legitimate imperative scoping ahead of the
+      // real render — #930's opaque-block preservation path — must not be
+      // mistaken for the #2720 shape just because SOME block sits at the
+      // top of the component body.
+      const source = `
+        export function Button() {
+          {
+            const x = 1
+            console.log(x)
+          }
+          return <button>Go</button>
+        }
+      `
+      const result = compileJSX(source, 'Button.tsx', { adapter })
+      expect(result.errors.find(e => e.code === 'BF027')).toBeUndefined()
+      expect(result.files.length).toBeGreaterThan(0)
+    })
+
+    test('a nested block whose returned identifier is not locally JSX-initialized stays silent', () => {
+      // The block's last statement returns `result`, but nothing in the
+      // block declares `result` as JSX — e.g. it is a prop or an outer
+      // local. Must not false-positive just because the shape ends in
+      // `return <identifier>`.
+      const source = `
+        export function Widget({ result }: { result: number }) {
+          {
+            const other = 1
+            return result
+          }
+        }
+      `
+      const compileResult = compileJSX(source, 'Widget.tsx', { adapter })
+      expect(compileResult.errors.find(e => e.code === 'BF027')).toBeUndefined()
+    })
+  })
+})

package/src/__tests__/serialize-parsed-expr.test.ts

@@ -98,12 +98,26 @@ describe('serializeParsedExpr', () => {
     })
   })
 
-  test('map body: object literal carries key + value (no keyKind / shorthand)', () => {
+  test('map body: object literal carries kind + key + value (no keyKind / shorthand)', () => {
+    // #2696 Step 2: each entry now carries its own `kind` tag ('prop' here —
+    // no source spread in this body) so the evaluator can distinguish a
+    // `prop` from a `spread` entry without re-deriving it from field shape.
     expect(evalJSON('({ id: item.id, n: item.n })')).toEqual({
       kind: 'object-literal',
       properties: [
-        { key: 'id', value: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'id' } },
-        { key: 'n', value: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'n' } },
+        { kind: 'prop', key: 'id', value: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'id' } },
+        { kind: 'prop', key: 'n', value: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'n' } },
+      ],
+    })
+  })
+
+  test('map body: object literal carries a spread entry as `{ kind: "spread", expr }`', () => {
+    // The todo-app motivating shape (#2696): `{ ...t, editing: false }`.
+    expect(evalJSON("({ ...t, editing: false })")).toEqual({
+      kind: 'object-literal',
+      properties: [
+        { kind: 'spread', expr: { kind: 'identifier', name: 't' } },
+        { kind: 'prop', key: 'editing', value: { kind: 'literal', value: false } },
       ],
     })
   })