@barefootjs/jsx 0.29.0 → 0.30.2

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__/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,

package/src/__tests__/preamble-attr-reactivity.test.ts

@@ -0,0 +1,217 @@
+/**
+ * An attribute reading a `.map()` callback preamble local is reactive — the
+ * #2447 follow-up.
+ *
+ * ## What was broken
+ *
+ * ```tsx
+ * {rows().map(row => {
+ *   const cls = row.done ? 'done' : 'open'
+ *   return <li key={row.id} class={cls}>{row.label}</li>
+ * })}
+ * ```
+ *
+ * `mapArray` reuses a row's DOM node on a same-key item update and re-runs
+ * only the wired slots. `class={cls}` was not one: `classifyReactivity` sees a
+ * bare local, not a signal or loop-param read, so it scored 'none' and the
+ * value was interpolated into the row template instead. Row 1's class stayed
+ * `open` after its item turned `done: true`, while the sibling `{row.label}`
+ * text updated normally — the child-position twin of this had already been
+ * fixed as a `preambleRegion` (#2389); the attribute position had not.
+ *
+ * ## The two halves, and why they are in different passes
+ *
+ *  1. **Phase 1 grants the slot** (`markPreambleAttrSlots`). An attribute is
+ *     only wirable if its element carries a `bf` slot id, and that is decided
+ *     when the element is BUILT — before the enclosing loop's preamble exists.
+ *     The client-JS pass cannot grant one retroactively: the SSR template is
+ *     rendered from this same IR and would not carry the marker.
+ *  2. **The client-JS pass wires it** (`collectLoopChildReactiveAttrs` +
+ *     `stringifyReactiveEffects`), re-running the preamble at the TOP of the
+ *     row effect so the declarations exist before the first write.
+ *
+ * ## The lazy row graph keeps the shape
+ *
+ * `lazyRowEligibility` used to refuse a binding that reads a preamble local,
+ * on the grounds that `applyOuter` could not prime a dependency the local
+ * hides. That refusal is gone: `analyzeLazyPreamble` now reports the
+ * preamble's own free identifiers and `classifyLazyBinding` substitutes them,
+ * so the binding's dependencies are what the INITIALIZER read (`selected`),
+ * and the apply bodies re-run the preamble on demand. Without that, this fix
+ * would have de-optimised the exact row the §9.5 widening was built for. The
+ * DOM behaviour is pinned in
+ * `packages/client/__tests__/runtime/lazy-row-preamble.test.ts`.
+ */
+
+import { describe, test, expect, beforeAll } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import type { IRElement, IRLoop, IRNode } from '../types'
+
+const ROWS = (row: string, preamble = `const cls = row.done ? 'done' : 'open'`) => `
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string; done: boolean }
+export function Rows(props: { rows: Row[] }) {
+  const [rows, setRows] = createSignal<Row[]>(props.rows)
+  return (
+    <ul>
+      {rows().map(row => {
+        ${preamble}
+        return ${row}
+      })}
+    </ul>
+  )
+}
+`
+
+function clientJs(source: string, file = 'Rows.tsx'): string {
+  const r = compileJSX(source, file, { adapter: new TestAdapter() })
+  const errors = r.errors.filter(e => e.severity !== 'warning')
+  if (errors.length > 0) throw new Error(errors.map(e => `${e.code}: ${e.message}`).join('\n'))
+  const js = r.files.find(f => f.type === 'clientJs')?.content
+  if (!js) throw new Error('no client JS emitted')
+  return js
+}
+
+function findLoop(node: IRNode | null): IRLoop | null {
+  if (!node) return null
+  if (node.type === 'loop') return node
+  const kids = (node as IRElement).children
+  if (!Array.isArray(kids)) return null
+  for (const c of kids) {
+    const hit = findLoop(c)
+    if (hit) return hit
+  }
+  return null
+}
+
+/** The `<li>` row root of the compiled loop. */
+function rowRoot(source: string): IRElement {
+  const loop = findLoop(jsxToIR(analyzeComponent(source, 'Rows.tsx')))
+  if (!loop) throw new Error('no loop in IR')
+  return loop.children[0] as IRElement
+}
+
+beforeAll(() => {
+  // The first analyzeComponent in a process pays TS program setup on its own.
+  analyzeComponent(ROWS(`<li key={row.id}>{row.label}</li>`), 'Warmup.tsx')
+}, 60_000)
+
+describe('Phase 1 — the slot the attribute needs', () => {
+  test('an element whose attribute reads a preamble local gets a slot id', () => {
+    const li = rowRoot(ROWS(`<li key={row.id} class={cls}>{row.label}</li>`))
+    expect(li.slotId).not.toBeNull()
+  })
+
+  test('a row with no preamble-reading attribute is untouched', () => {
+    // The guard against granting slots (and shifting every later slot id) to
+    // rows that do not need one.
+    const li = rowRoot(ROWS(`<li key={row.id} class="static">{row.label}</li>`))
+    expect(li.slotId).toBeNull()
+  })
+
+  test('`key` never counts — it is renamed to data-key and driven by keyFn', () => {
+    const li = rowRoot(ROWS(`<li key={cls}>{row.label}</li>`))
+    expect(li.slotId).toBeNull()
+  })
+
+  test('a nested element gets its own slot, not the row root', () => {
+    const li = rowRoot(ROWS(`<li key={row.id}><span class={cls}>{row.label}</span></li>`))
+    expect(li.slotId).toBeNull()
+    expect((li.children[0] as IRElement).slotId).not.toBeNull()
+  })
+})
+
+describe('client JS — the attribute is wired, and the preamble precedes it', () => {
+  const js = clientJs(ROWS(`<li key={row.id} class={cls}>{row.label}</li>`))
+  const plan = js.slice(js.indexOf('mapArrayLazy('), js.indexOf(`}, 'l0')`))
+
+  test('the attribute is written by a binding, not baked into the row template', () => {
+    const tpl = js.slice(js.indexOf('__tpl_l0.innerHTML'), js.indexOf('mapArrayLazy('))
+    expect(tpl).not.toContain('class=')
+    expect(plan).toContain(`setAttribute('class', String(__v))`)
+  })
+
+  test('applyItem re-runs the preamble ahead of the write', () => {
+    const applyItem = plan.slice(plan.indexOf('applyItem:'))
+    const preambleAt = applyItem.indexOf("const cls = row().done ? 'done' : 'open'")
+    const writeAt = applyItem.indexOf(`setAttribute('class'`)
+    expect(preambleAt).toBeGreaterThanOrEqual(0)
+    expect(writeAt).toBeGreaterThan(preambleAt)
+  })
+
+  test('the row stays on the lazy graph — no per-row reactive resource', () => {
+    expect(js).toContain('mapArrayLazy(')
+    expect(js).not.toMatch(/\bmapArray\(/)
+    expect(plan).not.toContain('createEffect')
+    expect(plan).not.toContain('createRoot')
+  })
+
+  test('this row is item-driven only, so no applyOuter is emitted', () => {
+    // `row.done` is the only dependency. The contrast — a preamble reading an
+    // outer signal, which must reach the prime list — is
+    // `lazy-preamble.test.ts`'s `applyOuter` pair.
+    expect(plan).not.toContain('applyOuter:')
+  })
+})
+
+describe('a STATIC-ARRAY loop must NOT be wired', () => {
+  // Regression: the first cut of this change classified the attribute here
+  // too, and the emitted `static-array-child-init` `forEach` — which has no
+  // per-row body and so no preamble in scope — wrote
+  // `setAttribute('data-active', active ? …)` against a FREE VARIABLE. The
+  // ReferenceError killed the whole component's init, taking any nested child
+  // component's hydration with it. Caught by the gallery-nav e2e (the shells
+  // are exactly this shape and the badges mounted inside them vanished), and
+  // pinned here so the compiler catches it next time.
+  const NAV = `
+'use client'
+const NAV_ITEMS = [
+  { key: 'a', href: '/a', label: 'A' },
+  { key: 'b', href: '/b', label: 'B' },
+]
+export function Nav(props: { current: string }) {
+  return (
+    <nav>
+      {NAV_ITEMS.map(item => {
+        const active = item.key === props.current
+        return <a key={item.key} href={item.href} data-active={active ? 'true' : 'false'}>{item.label}</a>
+      })}
+    </nav>
+  )
+}
+`
+  const js = clientJs(NAV, 'Nav.tsx')
+
+  test('no attribute effect reads the preamble local', () => {
+    // The `data-active` write must not be emitted into the init body at all:
+    // there is no scope there that declares `active`. The sibling `href`
+    // effect IS emitted, which is what makes this a targeted decline rather
+    // than the whole loop going unwired.
+    const init = js.slice(0, js.indexOf(`hydrate('Nav'`))
+    expect(init).not.toContain(`setAttribute('data-active'`)
+    expect(init).toContain(`setAttribute('href'`)
+  })
+
+  test('the value stays baked into the SSR template', () => {
+    expect(js).toContain('data-active=')
+  })
+})
+
+describe('unaffected shapes keep their emission', () => {
+  test('a loop with no preamble emits no preamble statements', () => {
+    const js = clientJs(`
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string; done: boolean }
+export function Plain(props: { rows: Row[] }) {
+  const [rows, setRows] = createSignal<Row[]>(props.rows)
+  return <ul>{rows().map(row => <li key={row.id} class={row.done ? 'done' : 'open'}>{row.label}</li>)}</ul>
+}
+`, 'Plain.tsx')
+    expect(js).not.toContain('const cls =')
+  })
+})