@barefootjs/jsx 0.29.0 → 0.30.2

package/src/__tests__/branch-loop-plain.test.ts

@@ -109,23 +109,19 @@ describe('plain `.map()` inside a conditional branch (#1065)', () => {
     expect(renderItemSection).not.toMatch(/const\s+cls\s*=\s*flag\b/)
   })
 
-  test('regression #1065: single-line renderItem shape (no reactive effects) wraps preamble', () => {
-    // The plain branch-loop emitter has two emission shapes — a multi-line
-    // body when `loop.childReactive*` is non-empty, and a single-line body
-    // (everything packed into one `mapArray(...)` line) when there are no
-    // reactive effects on item children. The previous two tests had a
-    // `{cell.value}` reactive text inside the `<li>` body, which forced
-    // the multi-line branch; the single-line branch's preamble wrap was
-    // therefore untested and could have silently regressed.
+  test('regression #1065: a reactive-effect-free branch loop wraps its preamble', () => {
+    // The #1065 obligation is that the preamble goes through
+    // `wrapLoopParamAsAccessor`, so a bare item read (`cell.flag`) becomes
+    // `cell().flag` and stays consistent with the already-wrapped template
+    // literal. `mapPreambleWrapped` is computed once in
+    // `plan/build-branch-loop.ts` and feeds every emission shape, so that is
+    // what this asserts.
     //
-    // This source has no reactive expressions inside the loop item, so the
-    // emitter takes the single-line path:
-    //
-    //   mapArray(...,(cell, idx, __existing) => {
-    //     if (__existing) return __existing;
-    //     const cls = cell().flag ? 'on' : 'off';   ← must be wrapped
-    //     ...
-    //   })
+    // The SHAPE this source takes moved with the §9.5 preamble widening: a
+    // call-free `const` preamble no longer refuses the lazy row graph, so
+    // this loop now emits `mapArrayLazy` with the preamble in `createRow`
+    // rather than the eager single-line `mapArray(...)` body. The wrap is
+    // asserted where the preamble actually lands.
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -155,28 +151,21 @@ describe('plain `.map()` inside a conditional branch (#1065)', () => {
     expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
     const js = result.files.find(f => f.type === 'clientJs')!.content
 
-    const renderItemSection = js.slice(
-      js.indexOf('__disposers.push(createDisposableEffect'),
-      js.indexOf('return () => __disposers'),
-    )
-    expect(renderItemSection.length).toBeGreaterThan(0)
-    // Confirm we're in the single-line branch by asserting all of
-    // `mapArray(...)` lives on one source line — multi-line would split
-    // across newlines.
-    const mapArrayLine = renderItemSection
-      .split('\n')
-      .find(l => l.includes('mapArray('))
-    expect(mapArrayLine).toBeDefined()
-    expect(mapArrayLine!).toContain(' return __existing;')
-    expect(mapArrayLine!).toContain('cell().flag')
-    expect(mapArrayLine!).not.toContain(' cell.flag')
+    const createRow = js.slice(js.indexOf('createRow:'), js.indexOf('applyItem:'))
+    expect(createRow.length).toBeGreaterThan(0)
+    expect(createRow).toContain('cell().flag')
+    expect(createRow).not.toContain(' cell.flag')
+    // The preamble must precede the clone: the row template interpolates
+    // `cls`.
+    expect(createRow.indexOf('const cls =')).toBeLessThan(createRow.indexOf('const __el ='))
   })
 
-  test('regression #1065: destructured + single-line shape rewrites bindings to __bfItem()', () => {
+  test('regression #1065: a destructured param rewrites preamble bindings to __bfItem()', () => {
     // Cross-product of the two sub-features: destructured callback param
-    // (#951) AND single-line emission shape (no reactive effects). Both
-    // wrap pathways must compose so the preamble stays consistent with
-    // the template literal's already-wrapped reads.
+    // (#951) AND a reactive-effect-free loop item. Both wrap pathways must
+    // compose so the preamble stays consistent with the template literal's
+    // already-wrapped reads. Same shape note as the test above — this loop
+    // is lazy-eligible since the §9.5 preamble widening.
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -206,17 +195,11 @@ describe('plain `.map()` inside a conditional branch (#1065)', () => {
     expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
     const js = result.files.find(f => f.type === 'clientJs')!.content
 
-    const renderItemSection = js.slice(
-      js.indexOf('__disposers.push(createDisposableEffect'),
-      js.indexOf('return () => __disposers'),
-    )
-    const mapArrayLine = renderItemSection
-      .split('\n')
-      .find(l => l.includes('mapArray('))
-    expect(mapArrayLine).toBeDefined()
-    expect(mapArrayLine!).toContain('__bfItem().flag')
+    const createRow = js.slice(js.indexOf('createRow:'), js.indexOf('applyItem:'))
+    expect(createRow.length).toBeGreaterThan(0)
+    expect(createRow).toContain('__bfItem().flag')
     // Bare `flag` reference (without `__bfItem().` prefix) would mean the
     // wrap pass missed the destructured binding.
-    expect(mapArrayLine!).not.toMatch(/\bcls\s*=\s*flag\b/)
+    expect(createRow).not.toMatch(/\bcls\s*=\s*flag\b/)
   })
 })

package/src/__tests__/csr-substitution-safety-divergence.test.ts

@@ -129,9 +129,15 @@ describe('CSR template: Stage-2 / post-substitution inline-safety divergence (#2
 
     // No bare `cls` identifier left in the template — it was inlined.
     expect(templateBody).not.toMatch(/(?<![-.\w$])cls(?![\w$])/)
-    // The module-scope object literal was substituted in place of `sizeMap`,
-    // and the prop was correctly bridged to `_p.size` — not marked unsafe.
-    expect(templateBody).toContain(`{ sm: 'h-4', md: 'h-6' })[_p.size]`)
+    // The record was substituted in place of `sizeMap`, and the prop was
+    // correctly bridged to `_p.size` — not marked unsafe. Since #2477 the
+    // one-hop const resolves at IR-build time through the shared `lookup`
+    // template part (the same route as an inline `sizeMap[size]`, #2300),
+    // so the baked record is the JSON-normalised lookup form rather than
+    // the CSR-substitution splice of the source text. The guard this test
+    // exists for — no over-suppression, no bare identifier, no
+    // `undefined` — is unchanged.
+    expect(templateBody).toContain(`({"sm": "h-4", "md": "h-6"})[_p.size]`)
     expect(templateBody).not.toContain('undefined')
   })
 })

package/src/__tests__/csr-template-scope-soundness.test.ts

@@ -0,0 +1,167 @@
+/**
+ * CSR template scope soundness (#2468 / adapter-tests scope-gate holes).
+ *
+ * The `hydrate('X', { template: (_p) => ... })` lambda runs at module
+ * scope, so every identifier it references must be either `_p`, a
+ * template-local binding, or a global. These tests pin the three
+ * emission paths that leaked init-scoped bindings into the lambda
+ * (each one a guaranteed `ReferenceError` on CSR mount):
+ *
+ *  A. a memo body inlined into the template kept its bare destructured
+ *     prop refs (`(value * 10)` instead of `(_p.value * 10)`);
+ *  B. a component prop carrying a template literal over a destructured
+ *     prop rendered into `renderChild(...)` un-rewritten
+ *     (`${className}` instead of `${_p.className}`);
+ *  C. a getter-elided signal (`const [, setActive] = createSignal(0)`)
+ *     was dropped from init entirely while its setter stayed referenced
+ *     by the emitted handler.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../index'
+import { HonoAdapter } from '../../../adapter-hono/src/adapter'
+
+function clientJsOf(source: string): string {
+  const result = compileJSX(source, 'scope-soundness.tsx', { adapter: new HonoAdapter() })
+  const errors = result.errors.filter(e => e.severity === 'error')
+  expect(errors).toEqual([])
+  const clientJs = result.files.filter(f => f.type === 'clientJs').map(f => f.content).join('\n')
+  expect(clientJs).not.toBe('')
+  return clientJs
+}
+
+/** The registration template lambda's source, extracted per component. */
+function templateLambdaOf(clientJs: string, name: string): string {
+  const start = clientJs.indexOf(`hydrate('${name}'`)
+  expect(start).toBeGreaterThan(-1)
+  const end = clientJs.indexOf('\n', start)
+  return clientJs.slice(start, end === -1 ? undefined : end)
+}
+
+describe('CSR template scope soundness (#2468)', () => {
+  test('A: memo body inlined into the template rewrites destructured prop refs to _p.*', () => {
+    const clientJs = clientJsOf(`
+"use client"
+import { createMemo } from '@barefootjs/client'
+
+export function Derived({ value }: { value: number }) {
+  const doubled = createMemo(() => value * 10)
+  return <span>{doubled()}</span>
+}
+`)
+    const template = templateLambdaOf(clientJs, 'Derived')
+    expect(template).toContain('_p.value * 10')
+    expect(template).not.toMatch(/[^.\w]value \* 10/)
+  })
+
+  test('B: component-prop template literal rewrites destructured prop refs to _p.*', () => {
+    const clientJs = clientJsOf(`
+"use client"
+import { Slot } from './slot'
+
+const base = 'chip'
+
+interface BaseProps { className?: string }
+interface ChipProps extends BaseProps { asChild?: boolean; children?: unknown }
+
+export function Chip({ className = '', asChild = false, children, ...props }: ChipProps) {
+  const classes = \`\${base} \${className}\`
+  if (asChild) {
+    return <Slot className={classes} {...props}>{children}</Slot>
+  }
+  return <span class={classes} {...props}>{children}</span>
+}
+`)
+    const template = templateLambdaOf(clientJs, 'Chip')
+    // The renderChild props object must read the prop off _p, exactly
+    // like the sibling element attribute already does.
+    expect(template).not.toMatch(/\$\{className\}/)
+    expect(template).toContain('_p.className')
+  })
+
+  test('C: a getter-elided signal declaration still lands in init', () => {
+    const clientJs = clientJsOf(`
+"use client"
+import { createSignal } from '@barefootjs/client'
+
+export function Fire() {
+  const [, setFlag] = createSignal(0)
+  return <button onClick={() => setFlag(1)}>go</button>
+}
+`)
+    // The setter is referenced by the click handler, so its declaring
+    // statement must exist in the emitted init.
+    expect(clientJs).toMatch(/setFlag\s*\]\s*=\s*createSignal\(0\)/)
+  })
+})
+
+/**
+ * Scope-aware prop rewrite (#2482 audit): `rewriteBarePropRefs` must
+ * not touch a name where a binding INSIDE the expression shadows the
+ * prop — a nested callback's parameter above all. The pre-fix global
+ * word-boundary regex rewrote the parameter declaration itself,
+ * emitting `.map((_p.title) => _p.title.a)`: a parse error that killed
+ * the whole client bundle.
+ */
+describe('scope-aware prop rewrite (nested callback param sharing a prop name)', () => {
+  test('memo computation keeps the callback param bare', () => {
+    const clientJs = clientJsOf(`
+"use client"
+import { createSignal, createMemo } from '@barefootjs/client'
+
+export function Titles({ title }: { title: string }) {
+  const [items, setItems] = createSignal([{ a: 'x' }])
+  const joined = createMemo(() => items().map((title) => title.a).join(','))
+  return <div><span>{joined()}</span><button onClick={() => setItems([])}>x</button></div>
+}
+`)
+    expect(clientJs).not.toMatch(/\(\s*_p\.title\s*\)\s*=>/)
+    expect(clientJs).not.toMatch(/_p\.title\.a/)
+  })
+
+  test('signal initializer keeps the callback param bare', () => {
+    const clientJs = clientJsOf(`
+"use client"
+import { createSignal } from '@barefootjs/client'
+
+export function Titles({ title }: { title: string }) {
+  const [joined, setJoined] = createSignal([{ a: 'x' }].map((title) => title.a).join(','))
+  return <div><span>{joined()}</span><button onClick={() => setJoined('')}>x</button></div>
+}
+`)
+    expect(clientJs).not.toMatch(/\(\s*_p\.title\s*\)\s*=>/)
+  })
+
+  test('mixed usage rewrites exactly the genuine outer reference', () => {
+    const clientJs = clientJsOf(`
+"use client"
+import { createSignal, createMemo } from '@barefootjs/client'
+
+export function Titles({ title }: { title: string }) {
+  const [items, setItems] = createSignal([{ a: 'x' }])
+  const label = createMemo(() => title + ':' + items().map((title) => title.a).join(','))
+  return <div><span>{label()}</span><button onClick={() => setItems([])}>x</button></div>
+}
+`)
+    const template = templateLambdaOf(clientJs, 'Titles')
+    // outer ref rewritten…
+    expect(template).toContain('_p.title +')
+    // …inner param and its references untouched
+    expect(template).toMatch(/\(\s*title\s*\)\s*=>\s*title\.a/)
+    expect(template).not.toMatch(/\(\s*_p\.title\s*\)\s*=>/)
+  })
+
+  test('a loop-shadowed record const is not folded into a template span', () => {
+    const clientJs = clientJsOf(`
+const tone = { a: 'outer-a', b: 'outer-b' }
+
+export function Tones({ items, k }: { items: { id: number; a: string; b: string }[]; k: string }) {
+  return <ul>{items.map((tone) => <li key={tone.id} data-t={\`t \${tone[k]}\`}>{tone.a}</li>)}</ul>
+}
+`)
+    const template = templateLambdaOf(clientJs, 'Tones')
+    // The span must read the row binding, not the outer record literal.
+    expect(template).toContain('tone[_p.k]')
+    expect(template).not.toContain('outer-a')
+  })
+})

package/src/__tests__/early-return-branch-switch.test.ts

@@ -0,0 +1,96 @@
+/**
+ * Signal-conditioned early return lowers to the root-ternary plan (#2463).
+ *
+ * `if (loading()) return <A/>; return <B/>` is semantically the root
+ * ternary `return loading() ? <A/> : <B/>`, and the IRIfStatement
+ * contract (spec/compiler.md) says the client JS handles all branches
+ * and switches at runtime. Before this fix the statement form emitted
+ * NO branch-switch effect — clicking called the setter and nothing
+ * subscribed, so the UI could never leave the SSR branch — and the CSR
+ * template lambda referenced the init-scoped signal (`ReferenceError`
+ * on CSR mount; the adapter-tests scope gate pinned it).
+ *
+ * The fix: a conditional-return chain whose conditions are ALL reactive
+ * (signal/memo reads) and that declares no branch-local scope variables
+ * is built as the same IRConditional chain the root ternary produces,
+ * wrapped in the synthetic display:contents scope element. Chains with
+ * static/prop conditions or branch-local declarations keep the
+ * IRIfStatement path (#1401/#1414 semantics) unchanged.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../index'
+import { HonoAdapter } from '../../../adapter-hono/src/adapter'
+
+function clientJsOf(source: string): string {
+  const result = compileJSX(source, 'early-return.tsx', { adapter: new HonoAdapter() })
+  expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+  return result.files.filter(f => f.type === 'clientJs').map(f => f.content).join('\n')
+}
+
+const EARLY = `
+"use client"
+import { createSignal } from '@barefootjs/client'
+
+export function LoadGate() {
+  const [loading, setLoading] = createSignal(true)
+  if (loading()) {
+    return <button onClick={() => setLoading(false)}>Loading...</button>
+  }
+  return <p>Ready</p>
+}
+`
+
+const TERNARY = `
+"use client"
+import { createSignal } from '@barefootjs/client'
+
+export function LoadGate() {
+  const [loading, setLoading] = createSignal(true)
+  return loading() ? <button onClick={() => setLoading(false)}>Loading...</button> : <p>Ready</p>
+}
+`
+
+describe('signal-conditioned early return (#2463)', () => {
+  test('emits the branch-switch insert() plan', () => {
+    const clientJs = clientJsOf(EARLY)
+    // The statement form must subscribe to the signal and swap branches
+    // at runtime, exactly like the expression form.
+    expect(clientJs).toContain('insert(')
+    expect(clientJs).toContain('() => loading()')
+  })
+
+  test('CSR template lambda is scope-sound (signal substituted to its initial)', () => {
+    const clientJs = clientJsOf(EARLY)
+    const template = clientJs.match(/hydrate\('LoadGate'.*/)?.[0] ?? ''
+    // The module-scope lambda must not reference the init-scoped signal.
+    expect(template).not.toContain('loading()')
+    expect(template).toContain('(true) ?')
+  })
+
+  test('statement form and expression form lower to the same plan shape', () => {
+    const early = clientJsOf(EARLY)
+    const ternary = clientJsOf(TERNARY)
+    // Same runtime imports (insert present in both) and both templates
+    // wrapped in the synthetic scope element.
+    for (const js of [early, ternary]) {
+      expect(js).toContain('insert(')
+      expect(js).toContain('display:contents')
+    }
+  })
+
+  test('a prop-conditioned chain keeps the IRIfStatement path', () => {
+    const clientJs = clientJsOf(`
+export function Badge({ active }: { active: boolean }) {
+  if (active) {
+    return <strong>on</strong>
+  }
+  return <em>off</em>
+}
+`)
+    // Static condition: no runtime branch switching, no synthetic wrapper —
+    // the pre-#2463 emission is unchanged.
+    expect(clientJs).not.toContain('insert(')
+    expect(clientJs).not.toContain('display:contents')
+  })
+})

package/src/__tests__/form-control-value-ssr.test.ts

@@ -0,0 +1,102 @@
+/**
+ * SSR projection of controlled form-control `value` (#2464 / #2465).
+ *
+ * `value` is not an attribute on `<textarea>` or `<select>` — emitting it
+ * verbatim ships invalid HTML that browsers ignore, so no-JS and
+ * pre-hydration users saw an empty textarea / the wrong option until the
+ * hydrate-time `.value` effect snapped it. The shared-IR lowering marks
+ * the attr `clientOnly` (SSR skips it; the property binding is unchanged)
+ * and projects the value into element content (textarea) or per-option
+ * `selected` comparisons (select — the shape `select-option-selected`
+ * already proves across every adapter).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../index'
+import { HonoAdapter } from '../../../adapter-hono/src/adapter'
+
+function compiled(source: string): { template: string; clientJs: string } {
+  const result = compileJSX(source, 'form-value.tsx', { adapter: new HonoAdapter() })
+  expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+  return {
+    template: result.files.find(f => f.type === 'markedTemplate')?.content ?? '',
+    clientJs: result.files.filter(f => f.type === 'clientJs').map(f => f.content).join('\n'),
+  }
+}
+
+describe('controlled form-control value SSR lowering (#2464/#2465)', () => {
+  test('textarea value lowers to element content, keeps the .value binding', () => {
+    const { template, clientJs } = compiled(`
+"use client"
+import { createSignal } from '@barefootjs/client'
+export function NoteBox() {
+  const [note, setNote] = createSignal('hi')
+  return <textarea value={note()} onInput={(e) => setNote(e.target.value)} />
+}
+`)
+    expect(template).toContain('<textarea')
+    expect(template).not.toContain('value={')
+    expect(template).toContain('{note()}')
+    expect(clientJs).toContain('.value = __val')
+    // CSR registration template interpolates slotless children raw, so the
+    // client-only variant must escape — a value containing `</textarea>`
+    // must not break out of the element on CSR mount (Copilot review).
+    expect(clientJs).toMatch(/<textarea[^`]*\$\{escapeText\(/)
+  })
+
+  test('select value lowers to selected on statically-valued options', () => {
+    const { template } = compiled(`
+"use client"
+import { createSignal } from '@barefootjs/client'
+export function Pick() {
+  const [v, setV] = createSignal('b')
+  return (
+    <select value={v()} onChange={(e) => setV(e.target.value)}>
+      <option value="a">A</option>
+      <optgroup label="rest">
+        <option value="b">B</option>
+      </optgroup>
+    </select>
+  )
+}
+`)
+    expect(template).not.toMatch(/<select[^>]*value=/)
+    expect(template).toContain(`((v()) === "a")`)
+    expect(template).toContain(`((v()) === "b")`)
+  })
+
+  test('an authored selected wins; dynamic option loops are left to hydrate', () => {
+    const { template } = compiled(`
+"use client"
+import { createSignal } from '@barefootjs/client'
+export function Pick() {
+  const [v, setV] = createSignal('b')
+  const [opts] = createSignal(['a', 'b'])
+  return (
+    <div>
+      <select value={v()}>
+        <option value="a" selected={false}>A</option>
+      </select>
+      <select value={v()}>
+        {opts().map((o) => <option key={o} value={o}>{o}</option>)}
+      </select>
+    </div>
+  )
+}
+`)
+    // The authored selected={false} is untouched (exactly one selected on
+    // that option), and the invalid select value attr is gone everywhere.
+    expect(template).toContain('selected={(false) || undefined}')
+    expect(template).not.toContain('(v()) === "a"')
+    expect(template).not.toMatch(/<select[^>]*value=/)
+  })
+
+  test('textarea with explicit children is left untouched', () => {
+    const { template } = compiled(`
+export function Fixed() {
+  return <textarea value={undefined}>seed</textarea>
+}
+`)
+    expect(template).toContain('>seed</textarea>')
+  })
+})