@barefootjs/jsx 0.33.4 → 0.33.6

package/src/__tests__/issue-2806-rest-bag-template-rewrite.test.ts

@@ -0,0 +1,136 @@
+/**
+ * #2806 — a component reading its own rest-bag spread directly in JSX
+ * (`{rest.header}`, not spread onto an element's attrs) emitted a CSR
+ * template that referenced the bare, unbound `rest` identifier.
+ *
+ * The rest binding IS `_p` at runtime (`applyRestAttrs` excludes the
+ * consumed keys by name rather than constructing a narrower object, and
+ * the init body already rewrites `rest.x` → `_p.x` via
+ * `rewritePropsObjectRef`, #2723). The four CSR/static template builders
+ * in `html-template.ts` each call that same function for `propsObjectName`
+ * but were passing `null` for the rest name, so a direct rest-bag read
+ * never got the same treatment there.
+ */
+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
+}
+
+describe('#2806 — rest-bag identifier resolves in the CSR template', () => {
+  test('a direct rest-bag read in a text expression emits `_p.x`, not bare `rest`', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function Card({ children, ...rest }: { children?: any; [key: string]: any }) {
+        const [cond, setCond] = createSignal(true)
+        return (
+          <section>
+            <header>{cond() ? rest.header : null}</header>
+            <div>{children}</div>
+          </section>
+        )
+      }
+    `)
+    expect(content).toContain('_p.header')
+    expect(content).not.toMatch(/[^.\w]rest\.header/)
+  })
+
+  test('a rest-bag read inside a `.map()` row still resolves', () => {
+    // NOTE: `rest.items ?? []` is classified `isStaticArray` here (no signal,
+    // no `isArrayExprDirectPropRef` match — see `jsx-to-ir.ts`'s `isStaticArray`
+    // derivation), so this row is emitted through `buildStaticLoopPlan`'s
+    // SSR-time-only `forEach`, NOT through the reactive `mapArray`/`mapArrayLazy`
+    // loop emitters. It does not exercise those two paths — the tests below do.
+    const content = clientJs(`
+      "use client";
+      export function Row({ children, ...rest }: { children?: any; items?: Array<{ id: number }>; [key: string]: any }) {
+        return (
+          <ul>
+            {(rest.items ?? []).map((item: { id: number }) => (
+              <li key={item.id}>{rest.suffix}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(content).toContain('_p.suffix')
+    expect(content).not.toMatch(/[^.\w]rest\.suffix/)
+  })
+
+  test('a rest-bag read inside a lazy-eligible `.map()` row resolves (`mapArrayLazy`)', () => {
+    // Signal-backed source + a keyed, single-root, child-component-free row
+    // is lazy-eligible (`lazyRowEligibility`), so this hits the `createRow`/
+    // `applyOuter` bodies emitted by `stringify/lazy-row.ts` — a SEPARATE
+    // emitter from the whole-init-body rewrite the other tests here exercise
+    // only incidentally through the eager `mapArray` row body.
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function Row({ children, ...rest }: { children?: any; [key: string]: any }) {
+        const [items, setItems] = createSignal<{ id: number }[]>([])
+        return (
+          <ul>
+            {items().map((item: { id: number }) => (
+              <li key={item.id}>{item.id}{rest.suffix}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(content).toContain('mapArrayLazy')
+    expect(content).toContain('_p.suffix')
+    expect(content).not.toMatch(/[^.\w]rest\.suffix/)
+  })
+
+  test('a rest-bag read inside an eager `.map()` row with a child component resolves (`mapArray`)', () => {
+    // A child component in the row forces eager `mapArray` eligibility
+    // (`lazyRowEligibility`'s `hasChildComponent` gate) — the loop-row-body
+    // emission path #2812 actually fixed (the `hydrate(... template: ...)`
+    // line and the CSR/static template builders in `html-template.ts`).
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      function Item(props: { id: number }) {
+        return <span>{props.id}</span>
+      }
+      export function Row({ children, ...rest }: { children?: any; [key: string]: any }) {
+        const [items, setItems] = createSignal<{ id: number }[]>([])
+        return (
+          <ul>
+            {items().map((item: { id: number }) => (
+              <li key={item.id}><Item id={item.id} />{rest.suffix}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(content).toContain('mapArray(')
+    expect(content).toContain('_p.suffix')
+    expect(content).not.toMatch(/[^.\w]rest\.suffix/)
+  })
+
+  test('a `.map()` row PARAMETER literally named `rest` is not rewritten (shadow guard)', () => {
+    const content = clientJs(`
+      "use client";
+      export function List({ children, ...outer }: { children?: any; [key: string]: any }) {
+        const rows = [{ id: 1, name: 'a' }]
+        return (
+          <ul>
+            {rows.map(rest => (
+              <li key={rest.id}>{rest.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(content).not.toContain('_p.name')
+    expect(content).toContain('rest.name')
+  })
+})

package/src/__tests__/issue-2835-props-type-member-name-collision.test.ts

@@ -0,0 +1,259 @@
+/**
+ * #2835 — `isDirectPropBindingName` (jsx-to-ir.ts) checked `ctx.patterns.props`,
+ * a regex-matching set that, for a whole `(props: Props)` parameter, includes
+ * every one of `Props`'s type-member names regardless of whether that name is
+ * bound to anything in the current component (`extractPropsFromTypeMembers`,
+ * analyzer.ts — needed there so `props.<key>` still regex-matches). Reused as
+ * a "is this name a prop binding" check, that over-inclusion let an unrelated
+ * module/local identifier resolve as prop-derived purely by sharing a type
+ * member's name, with zero aliasing involved (reproduces identically on
+ * pre-#2724 `main`).
+ *
+ * Fix: `isDirectPropBindingName` now reads `ctx.boundPropNames`
+ * (`boundPropLocalNames`, `props-binding.ts`) — empty for a whole
+ * non-destructured props parameter, since `propsParams` there is type-member
+ * names, not local bindings.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { TestAdapter } from '../adapters/test-adapter'
+import type { IRNode } from '../types'
+
+const adapter = new TestAdapter()
+
+function getClientJs(source: string, filename: string): string {
+  const result = compileJSX(source, filename, { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')
+  expect(clientJs).toBeDefined()
+  return clientJs!.content
+}
+
+/** First `IRLoop` node found in a DFS of the component IR. */
+function findLoop(node: IRNode | null, predicate: (n: any) => boolean = () => true): any {
+  if (!node || typeof node !== 'object') return undefined
+  if ((node as any).type === 'loop' && predicate(node)) return node
+  for (const key of Object.keys(node)) {
+    const v = (node as any)[key]
+    if (Array.isArray(v)) {
+      for (const c of v) {
+        const found = findLoop(c, predicate)
+        if (found) return found
+      }
+    } else if (v && typeof v === 'object') {
+      const found = findLoop(v, predicate)
+      if (found) return found
+    }
+  }
+  return undefined
+}
+
+/** First element node with a non-null `slotId`, found in a DFS of the IR. */
+function findSlottedElement(node: IRNode | null): any {
+  if (!node || typeof node !== 'object') return undefined
+  if ((node as any).type === 'element' && (node as any).slotId) return node
+  for (const key of Object.keys(node)) {
+    const v = (node as any)[key]
+    if (Array.isArray(v)) {
+      for (const c of v) {
+        const found = findSlottedElement(c)
+        if (found) return found
+      }
+    } else if (v && typeof v === 'object') {
+      const found = findSlottedElement(v)
+      if (found) return found
+    }
+  }
+  return undefined
+}
+
+function loopFlags(source: string, filename: string, predicate?: (n: any) => boolean) {
+  const ctx = analyzeComponent(source, filename, 'List')
+  const ir = jsxToIR(ctx)
+  expect(ir).not.toBeNull()
+  const loop = findLoop(ir, predicate)
+  expect(loop).toBeDefined()
+  return { isStaticArray: loop.isStaticArray as boolean, isPropDerivedArray: loop.isPropDerivedArray as boolean | undefined }
+}
+
+const CHILD = `
+  type ItemProps = { label: string }
+  function Item(props: ItemProps) {
+    const [on, setOn] = createSignal(false)
+    return <button onClick={() => setOn(!on())}>{props.label}: {on() ? 'ON' : 'OFF'}</button>
+  }
+`
+
+describe('#2835 — name collision with a whole-props type member is not prop-derived', () => {
+  test('headline: a module const colliding with `Props.base` stays static (type alias)', () => {
+    const flags = loopFlags(`
+      'use client'
+      ${CHILD}
+      const base = [{ label: 'z' }]
+      type Props = { base: ItemProps[] }
+      export function List(props: Props) {
+        return <div>{base.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'ModuleConstCollision.tsx')
+    expect(flags.isStaticArray).toBe(true)
+    expect(flags.isPropDerivedArray).toBeUndefined()
+  })
+
+  test('same collision with `interface Props`', () => {
+    const flags = loopFlags(`
+      'use client'
+      ${CHILD}
+      const base = [{ label: 'z' }]
+      interface Props { base: ItemProps[] }
+      export function List(props: Props) {
+        return <div>{base.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'InterfaceCollision.tsx')
+    expect(flags.isStaticArray).toBe(true)
+    expect(flags.isPropDerivedArray).toBeUndefined()
+  })
+
+  test('same collision with an inline type-literal props annotation', () => {
+    const flags = loopFlags(`
+      'use client'
+      ${CHILD}
+      const base = [{ label: 'z' }]
+      export function List(props: { base: ItemProps[] }) {
+        return <div>{base.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'InlineTypeCollision.tsx')
+    expect(flags.isStaticArray).toBe(true)
+    expect(flags.isPropDerivedArray).toBeUndefined()
+  })
+
+  test('a component-local const literal colliding with a type member also stays static (not reachable via Go BF101 either — bakedChildLoop screens it out first)', () => {
+    const flags = loopFlags(`
+      'use client'
+      ${CHILD}
+      type Props = { base: ItemProps[] }
+      export function List(props: Props) {
+        const base = [{ label: 'z' }]
+        return <div>{base.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'LocalConstCollision.tsx')
+    expect(flags.isStaticArray).toBe(true)
+    expect(flags.isPropDerivedArray).toBeUndefined()
+  })
+
+  test('the collision survives an alias hop', () => {
+    const flags = loopFlags(`
+      'use client'
+      ${CHILD}
+      const base = [{ label: 'z' }]
+      type Props = { base: ItemProps[] }
+      export function List(props: Props) {
+        const b = base
+        return <div>{b.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'AliasedCollision.tsx')
+    expect(flags.isStaticArray).toBe(true)
+    expect(flags.isPropDerivedArray).toBeUndefined()
+  })
+
+  test('regression guard: destructured props still resolve to mapArray', () => {
+    const clientJs = getClientJs(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      ${CHILD}
+      type Props = { base: ItemProps[] }
+      export function List({ base }: Props) {
+        return <div>{base.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'DestructuredRegression.tsx')
+    expect(clientJs).toMatch(/\bmapArray(Lazy)?\s*\(/)
+    expect(clientJs).not.toMatch(/qsaChildScopes\(/)
+  })
+
+  test('regression guard: a renamed destructure ({ base: rows }) still resolves to mapArray', () => {
+    const clientJs = getClientJs(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      ${CHILD}
+      type Props = { base: ItemProps[] }
+      export function List({ base: rows }: Props) {
+        return <div>{rows.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'RenamedDestructureRegression.tsx')
+    expect(clientJs).toMatch(/\bmapArray(Lazy)?\s*\(/)
+    expect(clientJs).not.toMatch(/qsaChildScopes\(/)
+  })
+
+  test('regression guard: a renamed destructure keeps a same-named module const static (no name collision through the rename)', () => {
+    const flags = loopFlags(`
+      'use client'
+      ${CHILD}
+      const base = [{ label: 'z' }]
+      type Props = { base: ItemProps[] }
+      export function List({ base: rows }: Props) {
+        return <div>{base.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'RenamedDestructureModuleConst.tsx')
+    expect(flags.isStaticArray).toBe(true)
+    expect(flags.isPropDerivedArray).toBeUndefined()
+  })
+
+  test('regression guard: whole-props body destructure (`const { base } = props`) still resolves to mapArray via `.parsed`, not the name-only branch', () => {
+    const clientJs = getClientJs(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      ${CHILD}
+      type Props = { base: ItemProps[] }
+      export function List(props: Props) {
+        const { base } = props
+        return <div>{base.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'WholePropsBodyDestructure.tsx')
+    expect(clientJs).toMatch(/\bmapArray(Lazy)?\s*\(/)
+    expect(clientJs).not.toMatch(/qsaChildScopes\(/)
+  })
+
+  test('regression guard: direct `props.base` access still resolves to mapArray', () => {
+    const clientJs = getClientJs(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      ${CHILD}
+      type Props = { base: ItemProps[] }
+      export function List(props: Props) {
+        return <div>{props.base.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'DirectMemberAccessRegression.tsx')
+    expect(clientJs).toMatch(/\bmapArray(Lazy)?\s*\(/)
+    expect(clientJs).not.toMatch(/qsaChildScopes\(/)
+  })
+
+  test('regression guard: a rest-spread sibling name is unaffected (no collision to guard against)', () => {
+    const clientJs = getClientJs(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      ${CHILD}
+      const base = [{ label: 'z' }]
+      type Props = { other: string; base: ItemProps[] }
+      export function List({ other, ...rest }: Props) {
+        return <div>{other}{base.map((item) => <Item key={item.label} label={item.label} />)}</div>
+      }
+    `, 'RestSpreadSibling.tsx')
+    expect(clientJs).not.toMatch(/\bmapArray(Lazy)?\s*\(/)
+  })
+
+  test('non-impact pin: `ctx.patterns.props`\' regex detection of `props.<key>` in a whole-props component is unaffected — the element still gets a slot id', () => {
+    const ctx = analyzeComponent(`
+      'use client'
+      type Props = { base: { label: string }[] }
+      export function List(props: Props) {
+        return <div class={props.base.length ? 'a' : 'b'}>static</div>
+      }
+    `, 'NonImpactPin.tsx', 'List')
+    const ir = jsxToIR(ctx)
+    const el = findSlottedElement(ir)
+    expect(el).toBeDefined()
+    expect(el.slotId).not.toBeNull()
+  })
+})

package/src/__tests__/loop-item-root-scope.test.ts

@@ -185,7 +185,7 @@ describe('IRComponent.loopItemRoot (#2444)', () => {
     expect(clientJs!.content).toMatch(/renderChild\('Badge[^']*',\s*\{text:\s*row\.label\},\s*undefined,\s*'s\d+'\)/)
   })
 
-  test('CSR template: a component that IS the loop row root gets no slot suffix', () => {
+  test('CSR template: a component that IS the loop row root still passes its slot id, with the loopItemRoot flag (#2833)', () => {
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -207,7 +207,11 @@ describe('IRComponent.loopItemRoot (#2444)', () => {
     expect(result.errors).toHaveLength(0)
     const clientJs = result.files.find(f => f.type === 'clientJs')
     expect(clientJs).toBeDefined()
-    // Static-array loop item root: no slot suffix — it owns its own random id.
-    expect(clientJs!.content).not.toMatch(/renderChild\('row',[^)]*'s\d+'\)/)
+    // A row root still doesn't DERIVE its scope from the slot (no `_sN`
+    // scope-id suffix elsewhere in this file's other assertions), but it
+    // must keep slot identity — a pure-CSR mount's static init selector
+    // depends on the `bf-h`/`bf-m` this renders, per `renderChild`'s
+    // `loopItemRoot` param docstring (component.ts).
+    expect(clientJs!.content).toMatch(/renderChild\('Row[^']*',\s*\{label: row\.label\},\s*row\.id,\s*'s\d+',\s*true\)/)
   })
 })

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

@@ -159,27 +159,18 @@ describe('markup-prop brand (#2651)', () => {
     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', () => {
+  // #2702: a conditional-in-fragment jsx-children prop now brands EACH
+  // element branch with `bfMarkup()` (`jsxChildrenPropGetterExpr`,
+  // `ir-to-client-js/html-template.ts`) — the shape `isSingleElementJsx
+  // Children`'s narrower single-element gate (#2651) left unbranded,
+  // which corrupted the DOM the moment the child's own `escapeTextOrNode`
+  // reactive effect first ran (re-escaped the chosen branch's HTML as
+  // literal text; see `jsx-element-prop-fragment-conditional`'s fixture
+  // docstring for the full mechanism). Branding each LEAF rather than the
+  // whole ternary keeps a non-element branch (text/expression/`&&`'s
+  // `''`) unbranded and thus still escaped normally — see the sibling
+  // tests below.
+  test('(h) a conditional-in-fragment jsx-children prop brands each element branch with bfMarkup()', () => {
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -201,10 +192,158 @@ describe('markup-prop brand (#2651)', () => {
       }
     `
     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\(/)
+    expect(clientJs).toMatch(/get header\(\)\s*\{\s*return cond\(\)\s*\?\s*bfMarkup\(`<a>x<\/a>`\)\s*:\s*bfMarkup\(`<b>y<\/b>`\)\s*\}/)
+  })
+
+  test('(i) a conditional-in-fragment jsx-children prop leaves a non-element branch unbranded', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Card(props: { header?: any }) {
+        return <section><header>{props.header}</header></section>
+      }
+      export function label() { return 'x' }
+      export function TextBranch() {
+        const [cond, setCond] = createSignal(true)
+        return <Card header={<>{cond() ? <a>x</a> : 'plain'}</>} />
+      }
+      export function ExpressionBranch() {
+        const [cond, setCond] = createSignal(true)
+        return <Card header={<>{cond() ? <a>x</a> : label()}</>} />
+      }
+      export function LogicalAnd() {
+        const [cond, setCond] = createSignal(true)
+        return <Card header={<>{cond() && <a>x</a>}</>} />
+      }
+    `
+    const clientJs = clientJsFor(source)
+    expect(clientJs).toMatch(/get header\(\)\s*\{\s*return cond\(\)\s*\?\s*bfMarkup\(`<a>x<\/a>`\)\s*:\s*'plain'\s*\}/)
+    expect(clientJs).toMatch(/get header\(\)\s*\{\s*return cond\(\)\s*\?\s*bfMarkup\(`<a>x<\/a>`\)\s*:\s*label\(\)\s*\}/)
+    expect(clientJs).toMatch(/get header\(\)\s*\{\s*return cond\(\)\s*\?\s*bfMarkup\(`<a>x<\/a>`\)\s*:\s*''\s*\}/)
+  })
+
+  test('(j) nested conditionals brand every element branch', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Card(props: { header?: any }) {
+        return <section><header>{props.header}</header></section>
+      }
+      export function P() {
+        const [a, setA] = createSignal(true)
+        const [b, setB] = createSignal(true)
+        return <Card header={<>{a() ? (b() ? <a>x</a> : <c>z</c>) : <b>y</b>}</>} />
+      }
+    `
+    const clientJs = clientJsFor(source)
+    expect(clientJs).toMatch(
+      /get header\(\)\s*\{\s*return a\(\)\s*\?\s*b\(\)\s*\?\s*bfMarkup\(`<a>x<\/a>`\)\s*:\s*bfMarkup\(`<c>z<\/c>`\)\s*:\s*bfMarkup\(`<b>y<\/b>`\)\s*\}/,
+    )
+  })
+
+  // A multi-child fragment (more than one flattened part) has no `bfMarkup`/
+  // `escapeTextOrNode` array contract — stays unbranded, unchanged from
+  // before #2702 (a separate, pre-existing gap, not this fix's scope).
+  test('(k) a multi-child fragment jsx-children prop stays unbranded', () => {
+    const source = `
+      'use client'
+      export function Card(props: { header?: any }) {
+        return <section><header>{props.header}</header></section>
+      }
+      export function P() {
+        return <Card header={<>text<strong>x</strong></>} />
+      }
+    `
+    const clientJs = clientJsFor(source)
+    expect(clientJs).toMatch(/get header\(\)\s*\{\s*return \["text", `<strong>x<\/strong>`\]\s*\}/)
+  })
+
+  // An explicit `children={<jsx/>}` prop stays unbranded regardless of
+  // shape — its consumer is a bare `{children}` passthrough with no
+  // unwrap call (test (b)'s comment above explains the same exclusion).
+  // pullfrog review, PR #2820: `jsxChildrenPropGetterExpr` (the shared
+  // brand-decision door test (h)-(k) pin) wasn't wired into EVERY builder
+  // that constructs the identical `get <propName>() { return <expr> }`
+  // getter — `buildComponentPropsExpr` (`control-flow/shared.ts`, shared by
+  // loop AND conditional-branch component reconciliation) and
+  // `buildStaticPropsExpr` (`build-static-array-child-init.ts`) both still
+  // called the plain, unbranded `irChildrenToJsExpr` directly. The same
+  // conditional-in-fragment shape test (h) pins for a top-level component
+  // corrupted the DOM at hydrate time when the component was instead
+  // instantiated inside a `.map()` loop.
+  test('(m) a conditional-in-fragment jsx-children prop is branded for a component instantiated inside a .map() loop', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Card(props: { header?: any }) {
+        return <header>{props.header}</header>
+      }
+      export function List() {
+        const [items, setItems] = createSignal([{ id: 1 }])
+        return (
+          <div>
+            {items().map(item => (
+              <Card key={item.id} header={<>{item.id > 0 ? <a>x</a> : <b>y</b>}</>} />
+            ))}
+          </div>
+        )
+      }
+    `
+    const clientJs = clientJsFor(source)
+    // Both the reactive-patch (initChild) and initial-mount (createComponent)
+    // paths through mapArray's callback must brand each element branch.
+    expect(clientJs).toMatch(
+      /initChild\('Card', __existing, \{ get header\(\) \{ return item\(\)\.id > 0 \? bfMarkup\(`<a>x<\/a>`\) : bfMarkup\(`<b>y<\/b>`\) \} \}\)/,
+    )
+    expect(clientJs).toMatch(
+      /createComponent\('Card', \{ get header\(\) \{ return item\(\)\.id > 0 \? bfMarkup\(`<a>x<\/a>`\) : bfMarkup\(`<b>y<\/b>`\) \} \}, item\(\)\.id\)/,
+    )
+  })
+
+  // pullfrog review, PR #2820: test (m) covers the SIGNAL-driven `.map()`
+  // loop (`buildComponentPropsExpr`); `buildStaticPropsExpr`
+  // (`build-static-array-child-init.ts`) — the sibling builder for a
+  // STATIC, non-signal array `.map()` — got the identical fix but no
+  // dedicated test, which is exactly the untested-call-site pattern that
+  // let #2702's original corruption go uncaught. Pins the hydrate-time
+  // `initChild` path this builder feeds.
+  test('(n) a conditional-in-fragment jsx-children prop is branded for a component instantiated inside a static (non-signal) array .map()', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Card(props: { header?: any }) {
+        return <header>{props.header}</header>
+      }
+      export function List() {
+        const [cond, setCond] = createSignal(true)
+        return (
+          <div>
+            {[{ id: 1 }].map(item => (
+              <Card key={item.id} header={<>{cond() ? <a>x</a> : <b>y</b>}</>} />
+            ))}
+          </div>
+        )
+      }
+    `
+    const clientJs = clientJsFor(source)
+    expect(clientJs).toMatch(
+      /initChild\('Card', childScope, \{ get header\(\) \{ return cond\(\) \? bfMarkup\(`<a>x<\/a>`\) : bfMarkup\(`<b>y<\/b>`\) \} \}\)/,
+    )
+  })
+
+  test('(l) an explicit children prop with a conditional stays unbranded', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Card(props: { children?: any }) {
+        return <section>{props.children}</section>
+      }
+      export function P() {
+        const [cond, setCond] = createSignal(true)
+        return <Card children={<>{cond() ? <a>x</a> : <b>y</b>}</>} />
+      }
+    `
+    const clientJs = clientJsFor(source)
+    expect(clientJs).toMatch(/get children\(\)\s*\{\s*return cond\(\)\s*\?\s*`<a>x<\/a>`\s*:\s*`<b>y<\/b>`\s*\}/)
   })
 })