@barefootjs/jsx 0.28.1 → 0.30.0

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

@@ -0,0 +1,213 @@
+/**
+ * `IRComponent.loopItemRoot` / `derivesScopeFromSlot()` (#2444): a
+ * component that is the DIRECT root of a loop row gets its own randomized
+ * scope id; a component nested BELOW the row root derives its scope id
+ * from parent scope + slot, like any other slotted child. Mirrors Hono's
+ * `renderChildrenInLoop` / `renderConditional` ctx-forwarding exactly.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { derivesScopeFromSlot } from '../adapters/child-scope'
+import type { IRComponent, IRElement, IRLoop, IRNode } from '../types'
+
+const adapter = new TestAdapter()
+
+function findLoop(node: IRNode): IRLoop {
+  if (node.type === 'loop') return node
+  if (node.type === 'element') {
+    for (const child of node.children) {
+      if (child.type === 'loop') return child
+    }
+  }
+  throw new Error('no loop found in IR')
+}
+
+describe('IRComponent.loopItemRoot (#2444)', () => {
+  test('a component nested below a plain-element loop row root is NOT a loop item root', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function Badge(props: { text: string }) {
+        return <span>{props.text}</span>
+      }
+      export function Rows(props: { items: { id: number; label: string }[] }) {
+        const [rows] = createSignal(props.items)
+        return (
+          <ul>
+            {rows().map(row => (
+              <li key={row.id}>
+                <Badge text={row.label} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const ctx = analyzeComponent(source, 'Rows.tsx', 'Rows')
+    const ir = jsxToIR(ctx)
+    expect(ir).not.toBeNull()
+
+    const loop = findLoop(ir!)
+    expect(loop.children).toHaveLength(1)
+    const li = loop.children[0] as IRElement
+    expect(li.type).toBe('element')
+    const badge = li.children.find(c => c.type === 'component') as IRComponent
+    expect(badge).toBeDefined()
+    expect(badge.loopItemRoot).not.toBe(true)
+    expect(derivesScopeFromSlot(badge)).toBe(true)
+  })
+
+  test('a component that IS the loop row root IS a loop item root', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function Row(props: { label: string }) {
+        return <li>{props.label}</li>
+      }
+      export function Rows(props: { items: { id: number; label: string }[] }) {
+        const [rows] = createSignal(props.items)
+        return (
+          <ul>
+            {rows().map(row => (
+              <Row key={row.id} label={row.label} />
+            ))}
+          </ul>
+        )
+      }
+    `
+    const ctx = analyzeComponent(source, 'Rows.tsx', 'Rows')
+    const ir = jsxToIR(ctx)
+    expect(ir).not.toBeNull()
+
+    const loop = findLoop(ir!)
+    expect(loop.children).toHaveLength(1)
+    const row = loop.children[0] as IRComponent
+    expect(row.type).toBe('component')
+    expect(row.loopItemRoot).toBe(true)
+    expect(derivesScopeFromSlot(row)).toBe(false)
+  })
+
+  test('a component in a whole-item conditional loop body IS a loop item root (matches Hono ctx-forwarding)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function Row(props: { label: string }) {
+        return <li>{props.label}</li>
+      }
+      export function Rows(props: { items: { id: number; label: string; show: boolean }[] }) {
+        const [rows] = createSignal(props.items)
+        return (
+          <ul>
+            {rows().map(row => row.show && <Row key={row.id} label={row.label} />)}
+          </ul>
+        )
+      }
+    `
+    const ctx = analyzeComponent(source, 'Rows.tsx', 'Rows')
+    const ir = jsxToIR(ctx)
+    expect(ir).not.toBeNull()
+
+    const loop = findLoop(ir!)
+    expect(loop.children).toHaveLength(1)
+    const cond = loop.children[0]
+    expect(cond.type).toBe('conditional')
+    if (cond.type !== 'conditional') throw new Error('unreachable')
+    const row = cond.whenTrue as IRComponent
+    expect(row.type).toBe('component')
+    expect(row.loopItemRoot).toBe(true)
+  })
+
+  test('a component nested inside a fragment loop body is NOT a loop item root (Hono does not forward through fragments)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function Badge(props: { text: string }) {
+        return <span>{props.text}</span>
+      }
+      export function Rows(props: { items: { id: number; label: string }[] }) {
+        const [rows] = createSignal(props.items)
+        return (
+          <ul>
+            {rows().map(row => (
+              <>
+                <Badge key={row.id} text={row.label} />
+              </>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const ctx = analyzeComponent(source, 'Rows.tsx', 'Rows')
+    const ir = jsxToIR(ctx)
+    expect(ir).not.toBeNull()
+
+    const loop = findLoop(ir!)
+    expect(loop.children).toHaveLength(1)
+    const fragment = loop.children[0]
+    expect(fragment.type).toBe('fragment')
+    if (fragment.type !== 'fragment') throw new Error('unreachable')
+    const badge = fragment.children.find(c => c.type === 'component') as IRComponent
+    expect(badge).toBeDefined()
+    expect(badge.loopItemRoot).not.toBe(true)
+  })
+
+  test('CSR template: a component nested below the row root passes its slot suffix to renderChild', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function Badge(props: { text: string }) {
+        return <span>{props.text}</span>
+      }
+      export function Rows(props: { items: { id: number; label: string }[] }) {
+        const [rows] = createSignal(props.items)
+        return (
+          <ul>
+            {rows().map(row => (
+              <li key={row.id}>
+                <Badge text={row.label} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Rows.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    // The nested Badge must receive a slot suffix (4th renderChild arg) so
+    // it derives its scope id — a bare `renderChild('Badge', {...})` with
+    // no suffix would mean the fix regressed.
+    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', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function Row(props: { label: string }) {
+        return <li>{props.label}</li>
+      }
+      export function Rows(props: { items: { id: number; label: string }[] }) {
+        const [rows] = createSignal(props.items)
+        return (
+          <ul>
+            {rows().map(row => (
+              <Row key={row.id} label={row.label} />
+            ))}
+          </ul>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Rows.tsx', { adapter })
+    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+'\)/)
+  })
+})

package/src/__tests__/loop-row-creation-paths.test.ts

@@ -0,0 +1,169 @@
+/**
+ * Which code creates a loop row's root element, and whether that row is
+ * connected before its body's tail runs.
+ *
+ * The "connect before init" invariant exists because `useContext` resolves by
+ * walking `parentElement`: a child that initialises inside a detached row finds
+ * no ancestors and falls through to the global last-writer-wins context store,
+ * silently reading whichever provider on the page wrote last. So the creation
+ * site has to know its destination in advance, and there are two ways to tell
+ * it — a PLACEHOLDER already in the tree (`mountAt`, child slots), or the
+ * AMBIENT row mount point.
+ *
+ * Both work because a runtime FUNCTION creates the element and can take an
+ * argument. A row whose root is a template clone written inline in the emitted
+ * body has no such function, so the compiler emits `mountRowRoot(clone)` to
+ * consume the same ambient point — but only for the variant that initialises
+ * anything inside the row. A row with no nested init has nothing that could
+ * resolve wrongly, and skipping it there keeps the high-volume `mapArrayLazy`
+ * emission untouched.
+ *
+ * This matrix pins that split against compiled output rather than
+ * recollection. `mountsRow` is the load-bearing column: if it ever flips to
+ * false for a shape that initialises a child, that shape has silently gone
+ * back to initialising detached, and nothing else in the suite would say so —
+ * the wrong value it produces is only wrong when a second provider of the same
+ * context happens to be on the page.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+interface RowShape {
+  /** How the row's root element comes into existence. */
+  rowRoot: 'createComponent' | 'template-clone'
+  /**
+   * Does a child inside the row reach its `init` through a placeholder slot
+   * (`upsertChild` / `upsertChildItem`)?
+   *
+   * Narrower than "something initialises in this row" — a conditional child
+   * arrives via `insert` + `initChild` and reads false here. Read it alongside
+   * `mountsRow`, never as a substitute.
+   *
+   * `initChild` on the row ROOT is deliberately excluded: that is the
+   * hydration branch adopting an SSR-rendered row, which is in the document by
+   * construction and never part of this problem.
+   */
+  nestedChildInit: boolean
+  /** Multi-root (Fragment) body — the sibling-walk lookup path. */
+  multiRoot: boolean
+  /** Is the fresh row connected before the body's tail runs? */
+  mountsRow: boolean
+  /** Which list runtime the loop compiles to. */
+  loopRuntime: string
+}
+
+function classify(loopBody: string): RowShape {
+  const source = `"use client"
+import { createSignal } from '@barefootjs/client'
+import { Chip } from './chip'
+function T() {
+  const [items] = createSignal([{ id: '1', name: 'a' }])
+  return <ul>{items().map((it) => ${loopBody})}</ul>
+}
+export { T }`
+  const result = compileJSX(source, 'T.tsx', { adapter: new TestAdapter() })
+  const hard = result.errors.filter((e) => e.severity !== 'warning')
+  if (hard.length > 0) throw new Error(`unexpected compile error: ${hard.map((e) => e.code).join(',')}`)
+  const js = result.files.find((f) => f.type === 'clientJs')?.content ?? ''
+
+  // Slice from the list call to the end of the emitted init function.
+  // Everything the row does at setup time is in there, and the top-level
+  // `createComponent('T', …)` export sits after it, so it cannot be mistaken
+  // for a row root. Starting at the call also excludes the import line, so
+  // `mountsRow` reflects a real call site rather than the import of one.
+  const call = /mapArray(?:Lazy|Anchored)?\(/.exec(js)
+  if (!call) throw new Error('no list runtime call emitted')
+  const hydrateAt = js.indexOf('\nhydrate(')
+  const region = js.slice(call.index, hydrateAt === -1 ? undefined : hydrateAt)
+
+  return {
+    rowRoot: /cloneNode\(/.test(region) ? 'template-clone' : 'createComponent',
+    nestedChildInit: /upsertChild\(|upsertChildItem\(/.test(region),
+    multiRoot: /__bfExtras|upsertChildItem\(|qsaItem\(/.test(region),
+    mountsRow: /mountRowRoot\(/.test(region),
+    loopRuntime: /mapArray(?:Lazy|Anchored)?/.exec(region)?.[0] ?? 'unknown',
+  }
+}
+
+describe('loop row creation paths — who makes the row root, and when it is connected', () => {
+  test('component row root: the runtime creates it, so it takes the mount point itself', () => {
+    // `<Chip/>` IS the row. `createComponent` consumes the ambient point in its
+    // own step 7b, so no separate call is emitted.
+    expect(classify('<Chip key={it.id} id={it.id} />')).toEqual({
+      rowRoot: 'createComponent',
+      nestedChildInit: false,
+      multiRoot: false,
+      mountsRow: false,
+      loopRuntime: 'mapArray',
+    })
+  })
+
+  test('markup row root with no component inside: a clone, and deliberately not mounted', () => {
+    // Nothing initialises inside this row, so there is no `useContext` call
+    // during setup to resolve wrongly — and this is the high-volume path, so
+    // leaving it alone keeps the `mapArrayLazy` emission and the measurements
+    // taken against it untouched. `mountsRow: false` here is a decision.
+    expect(classify('<li key={it.id}>{it.name}</li>')).toEqual({
+      rowRoot: 'template-clone',
+      nestedChildInit: false,
+      multiRoot: false,
+      mountsRow: false,
+      loopRuntime: 'mapArrayLazy',
+    })
+  })
+
+  test('markup row root with a nested component: clone, mounted before the tail', () => {
+    // The row root is user markup, so it is not and cannot become a component;
+    // `mountRowRoot` is what gives it a destination. Flip `mountsRow` to false
+    // and `upsertChild` goes back to running the child's `init` against a
+    // detached element.
+    expect(classify('<li key={it.id}><Chip id={it.id} /></li>')).toEqual({
+      rowRoot: 'template-clone',
+      nestedChildInit: true,
+      multiRoot: false,
+      mountsRow: true,
+      loopRuntime: 'mapArray',
+    })
+  })
+
+  test('two nested components in one markup row: same case, one mount', () => {
+    expect(classify('<li key={it.id}><Chip id={it.id} /><Chip id={it.name} /></li>')).toEqual({
+      rowRoot: 'template-clone',
+      nestedChildInit: true,
+      multiRoot: false,
+      mountsRow: true,
+      loopRuntime: 'mapArray',
+    })
+  })
+
+  test('Fragment row with a nested component: mounted, and the multi-root lookup copes', () => {
+    // A Fragment root can never be a component, so this shape only became
+    // reachable for a mount point once the clone path got one. It is also the
+    // multi-root lookup, whose sibling walk in `qsa-item.ts` used to end with
+    // `return` and skip the `__bfExtras` stash the moment the primary was
+    // attached — a `break` now, so an attached primary still finds its extras.
+    expect(classify('<><Chip id={it.id} /><span>{it.name}</span></>')).toEqual({
+      rowRoot: 'template-clone',
+      nestedChildInit: true,
+      multiRoot: true,
+      mountsRow: true,
+      loopRuntime: 'mapArray',
+    })
+  })
+
+  test('conditional child in a markup row: mounted, though it inits through `insert`', () => {
+    // `nestedChildInit` is false because this child arrives via `insert` +
+    // `initChild` rather than `upsertChild` — but it is still a child
+    // initialising inside the row, and the emission is keyed on the loop
+    // variant (composite), not on which call the child arrives through. This
+    // row is why the two columns have to be read separately.
+    expect(classify('<li key={it.id}>{it.name ? <Chip id={it.id} /> : null}</li>')).toEqual({
+      rowRoot: 'template-clone',
+      nestedChildInit: false,
+      multiRoot: false,
+      mountsRow: true,
+      loopRuntime: 'mapArray',
+    })
+  })
+})

package/src/__tests__/map-multi-return-body.test.ts

@@ -133,13 +133,23 @@ describe('.map() multi-return body fold (Stage 2)', () => {
     })
   })
 
-  describe('leading-const preamble is adapter-gated (JS folds, DSL refuses)', () => {
+  describe('leading-const preamble — folded on JS, lowered on DSL, gated on shape', () => {
     const preambleBody = `{
       const label = it.kind.toUpperCase()
       if (it.on) return <b key={it.id}>{label}</b>
       return <span key={it.id}>{label}</span>
     }`
 
+    // The same fold, but with a preamble no template language can declare: a
+    // destructuring binding takes several names off one initializer, and no
+    // adapter has a single per-row local form for that. Nothing lowers, so
+    // both branches would read an unassigned name.
+    const undeclarableBody = `{
+      const { kind } = it
+      if (it.on) return <b key={it.id}>{kind}</b>
+      return <span key={it.id}>{kind}</span>
+    }`
+
     function compileWith(source: string, dsl: boolean) {
       const a = new TestAdapter()
       // Model a DSL adapter: its template runtime can't run a callback body
@@ -156,15 +166,32 @@ describe('.map() multi-return body fold (Stage 2)', () => {
       expect(cj.content).not.toMatch(/return <(b|span)/)
     })
 
-    test('a DSL adapter refuses with BF021 + the /* @client */ escape', () => {
+    test('a DSL adapter accepts it too — the preamble lowers to a per-row local (#2447)', () => {
+      // This used to be a BF021 refusal, on the premise that a loop-local
+      // can't reach a conditional branch template. The fold puts the
+      // conditional INSIDE the loop body, so once the preamble lowers to a
+      // per-row declaration the local is in scope in both arms — see the
+      // `map-preamble-branch-body` fixture, which now renders on all nine
+      // adapters.
       const r = compileWith(wrap(preambleBody), true)
+      expect(r.errors.filter(e => e.severity !== 'warning')).toHaveLength(0)
+    })
+
+    test('a preamble that is NOT declarable still refuses with BF021 + /* @client */', () => {
+      const r = compileWith(wrap(undeclarableBody), true)
       const bf021 = r.errors.filter(e => e.code === 'BF021')
       expect(bf021).toHaveLength(1)
+      expect(bf021[0].message).toMatch(/preamble is not a sequence of value declarations/)
       expect(bf021[0].suggestion?.message).toContain('@client')
     })
 
+    test('a JS runtime runs the undeclarable preamble verbatim — no refusal', () => {
+      const r = compileWith(wrap(undeclarableBody), false)
+      expect(r.errors.filter(e => e.severity !== 'warning')).toHaveLength(0)
+    })
+
     test('/* @client */ suppresses the DSL refusal', () => {
-      const clientSource = wrap(preambleBody).replace('items.map', '/* @client */ items.map')
+      const clientSource = wrap(undeclarableBody).replace('items.map', '/* @client */ items.map')
       const r = compileWith(clientSource, true)
       expect(r.errors.filter(e => e.code === 'BF021')).toHaveLength(0)
     })

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

@@ -342,14 +342,35 @@ describe('nested loops/conditionals inside mapArray (#830, #839)', () => {
     // Locate the nested mapArray callback body — the inner one is the
     // `node.children.map(child => ...)` that uses `child.id` as its key.
     // Note: pre-O-1 the inner mapArray was emitted twice (once per
-    // SSR/CSR side of the outer renderItem) so this regex used to find
-    // 2+ matches. After the O-1 dedup we only need at least 1.
-    const mapCalls = content.match(/mapArray\([\s\S]*?\}\)\s*\}/g)
-    expect(mapCalls).not.toBeNull()
-    expect(mapCalls!.length).toBeGreaterThanOrEqual(1)
+    // SSR/CSR side of the outer renderItem) so this used to find 2+
+    // matches. After the O-1 dedup we only need at least 1.
+    //
+    // Extracted via a balanced-PAREN scan from each `mapArray(` call site
+    // (a call is itself a single balanced-paren expression) — NOT a lazy
+    // `[\s\S]*?...\}\)\s*\}` regex, which coincidentally matched the old
+    // output only because the FIRST `}) }` byte sequence anywhere in the
+    // file happened to fall right after the inner mapArray call. Any
+    // unrelated text elsewhere containing that same 3-character sequence
+    // (e.g. the SSR template's `renderChild(..., 's1')` slot argument,
+    // #2444) silently shifted or erased the match with no relation to
+    // mapArray's actual extent — a real balanced scan can't have that failure mode.
+    const mapCalls: string[] = []
+    const mapArrayCallRe = /mapArray\(/g
+    let callMatch: RegExpExecArray | null
+    while ((callMatch = mapArrayCallRe.exec(content)) !== null) {
+      let depth = 1
+      let i = callMatch.index + callMatch[0].length
+      while (i < content.length && depth > 0) {
+        if (content[i] === '(') depth++
+        else if (content[i] === ')') depth--
+        i++
+      }
+      mapCalls.push(content.slice(callMatch.index, i))
+    }
+    expect(mapCalls.length).toBeGreaterThanOrEqual(1)
 
     // Pick the inner mapArray. It references `child.id` as the key function.
-    const innerMapArray = mapCalls!.find(m => /\(child\)\s*=>\s*String\(child\.id\)/.test(m))
+    const innerMapArray = mapCalls.find(m => /\(child\)\s*=>\s*String\(child\.id\)/.test(m))
     expect(innerMapArray).toBeDefined()
 
     // Count initChild('Checkbox', ...) occurrences inside the inner callback,