@barefootjs/jsx 0.29.0 → 0.30.0

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

@@ -0,0 +1,96 @@
+/**
+ * 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\)/)
+  })
+})

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>')
+  })
+})

package/src/__tests__/lazy-conditional.test.ts

@@ -0,0 +1,190 @@
+/**
+ * `analyzeLazyConditional` — the §9.5 "row contains a reactive conditional"
+ * widening (`plan/lazy-conditional.ts`).
+ *
+ * Unit half over hand-built `LoopChildConditional` values so each refusal is
+ * pinned to the exact shape that produces it, plus emission assertions that an
+ * accepted conditional is driven from the apply bodies with its arms hoisted
+ * once per loop. The DOM behaviour (does the swap actually land, both ways)
+ * lives in `packages/client/__tests__/runtime/lazy-row-conditional.test.ts` —
+ * emitted shape and emitted behaviour are different claims.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../index.ts'
+import { TestAdapter } from '../adapters/test-adapter'
+import { analyzeLazyConditional } from '../ir-to-client-js/control-flow/plan/lazy-conditional.ts'
+import type { LoopChildBranchSummary, LoopChildConditional } from '../ir-to-client-js/types.ts'
+
+const bare = (over: Partial<LoopChildBranchSummary> = {}): LoopChildBranchSummary => ({
+  childComponents: [],
+  ...over,
+})
+
+function cond(over: Partial<LoopChildConditional> = {}): LoopChildConditional {
+  return {
+    slotId: 's0',
+    condition: 'row.done',
+    whenTrueHtml: '<span class="yes">done</span>',
+    whenFalseHtml: '<em class="no">open</em>',
+    whenTrue: bare(),
+    whenFalse: bare(),
+    conditionFreeIdentifiers: new Set(['row']),
+    ...over,
+  }
+}
+
+/**
+ * The caller prepares each arm through `addCondAttrToTemplate` before handing it
+ * over — that is where `bf-c` comes from, and where the element-vs-fragment
+ * decision is made. These helpers stand in for it.
+ */
+const asElement = (html: string, slotId = 's0') => html.replace(/^(<\w+)/, `$1 bf-c="${slotId}"`)
+const asFragment = (html: string, slotId = 's0') =>
+  `<!--bf-cond-start:${slotId}-->${html}<!--bf-cond-end:${slotId}-->`
+
+const armsOf = (c: LoopChildConditional) => ({
+  whenTrueHtml: asElement(c.whenTrueHtml, c.slotId),
+  whenFalseHtml: asElement(c.whenFalseHtml, c.slotId),
+})
+
+describe('analyzeLazyConditional — accepted', () => {
+  test('two wiring-free static element arms', () => {
+    const c = cond()
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(true)
+    if (r.lazySafe) {
+      expect(r.facts.whenTrueHtml).toContain('bf-c="s0"')
+      expect(r.facts.condition).toBe('row.done')
+    }
+  })
+})
+
+describe('analyzeLazyConditional — refusals', () => {
+  const wiring: Array<[string, Partial<LoopChildBranchSummary>, RegExp]> = [
+    ['a child component', { childComponents: [{ name: 'X', slotId: null, props: [], children: [] }] }, /child components/],
+    ['an inner loop', { innerLoops: [{} as never] }, /an inner loop/],
+    ['a nested conditional', { conditionals: [{} as never] }, /a nested conditional/],
+    ['events', { events: [{} as never] }, /events/],
+    ['a reactive attr', { reactiveAttrs: [{} as never] }, /reactive attrs/],
+    ['reactive text', { reactiveTexts: [{} as never] }, /reactive text/],
+  ]
+
+  for (const [name, over, reason] of wiring) {
+    test(`the true arm owns ${name}`, () => {
+      const c = cond({ whenTrue: bare(over) })
+      const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+      expect(r.lazySafe).toBe(false)
+      if (!r.lazySafe) expect(r.reason).toMatch(reason)
+    })
+  }
+
+  test('the FALSE arm is checked too, not just the true one', () => {
+    const c = cond({ whenFalse: bare({ events: [{} as never] }) })
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/its false arm owns events/)
+  })
+
+  test('a fragment conditional has no single node to replace', () => {
+    const c = cond()
+    const r = analyzeLazyConditional(c, '__idx', {
+      whenTrueHtml: asFragment('text only'),
+      whenFalseHtml: asElement(c.whenFalseHtml),
+    })
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/fragment conditional/)
+  })
+
+  test('an arm that interpolates a value cannot be hoisted once per loop', () => {
+    const c = cond({ whenTrueHtml: '<span>${row().label}</span>' })
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/interpolates a value/)
+  })
+
+  test('a condition with no analyzable identifier set refuses rather than assumes', () => {
+    const c = cond({ conditionFreeIdentifiers: undefined })
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/no analyzable identifier set/)
+  })
+
+  test('a condition reading the loop index refuses — the apply bodies have none', () => {
+    const c = cond({ conditionFreeIdentifiers: new Set(['row', '__idx']) })
+    const r = analyzeLazyConditional(c, '__idx', armsOf(c))
+    expect(r.lazySafe).toBe(false)
+    if (!r.lazySafe) expect(r.reason).toMatch(/reads the loop index parameter '__idx'/)
+  })
+})
+
+// --- emission ---------------------------------------------------------------
+
+function clientJs(source: string, file: string): string {
+  const result = compileJSX(source, file, { adapter: new TestAdapter() })
+  const js = result.files.find(f => f.path.endsWith('.client.js'))
+  if (!js) throw new Error(`no client JS emitted for ${file}`)
+  return js.content
+}
+
+const ROWS = (arm: string) => `
+'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; label: string; done: boolean }
+export function CondRows(props: { rows: Row[] }) {
+  const [rows, setRows] = createSignal<Row[]>(props.rows)
+  return (
+    <ul>
+      {rows().map(row => (
+        <li key={row.id}>${arm}</li>
+      ))}
+    </ul>
+  )
+}
+`
+
+describe('lazy row emission — wiring-free row conditional', () => {
+  const js = clientJs(
+    ROWS('{row.done ? <span class="yes">done</span> : <em class="no">open</em>}'),
+    'CondRows.tsx',
+  )
+
+  test('the loop is lazy and calls no per-row insert()', () => {
+    expect(js).toContain('mapArrayLazy(')
+    expect(js).not.toMatch(/\bmapArray\(/)
+    expect(js).not.toContain('insert(')
+  })
+
+  test('both arms are parsed once per LOOP, outside every plan body', () => {
+    const beforeCall = js.slice(0, js.indexOf('mapArrayLazy('))
+    expect(beforeCall).toMatch(/const __cbt_l0_s\d+ = document\.createElement\('template'\)/)
+    expect(beforeCall).toMatch(/const __cbf_l0_s\d+ = document\.createElement\('template'\)/)
+  })
+
+  test('createRow only records the dedup boolean — the clone already has the right arm', () => {
+    const createRow = js.slice(js.indexOf('createRow:'), js.indexOf('applyItem:'))
+    expect(createRow).toMatch(/__l\[\d\] = !!\(row\(\)\.done\)/)
+    expect(createRow).not.toContain('replaceWith')
+  })
+
+  test('applyItem swaps by replaceWith and reassigns the ref', () => {
+    const applyItem = js.slice(js.indexOf('applyItem:'), js.indexOf("}, 'l0')"))
+    expect(applyItem).toContain('__c.replaceWith(__n)')
+    // Without this the next flip writes into the node the previous one detached.
+    expect(applyItem).toMatch(/__r\[\d\] = __n/)
+  })
+})
+
+describe('lazy row emission — conditionals that keep the eager path', () => {
+  const cases: Array<[string, string]> = [
+    ['an arm with an event', '{row.done ? <button onClick={() => {}}>x</button> : <em>open</em>}'],
+    ['an arm reading the item', '{row.done ? <span>{row.label}</span> : <em>open</em>}'],
+    ['a bare-value ternary (fragment form)', '{row.done ? "yes" : "no"}'],
+  ]
+  for (const [name, arm] of cases) {
+    test(name, () => {
+      const js = clientJs(ROWS(arm), 'EagerCond.tsx')
+      expect(js).not.toContain('mapArrayLazy(')
+    })
+  }
+})