@barefootjs/jsx 0.33.2 → 0.33.4

package/src/__tests__/issue-2756-loop-row-honors-client-only.test.ts

@@ -0,0 +1,173 @@
+/**
+ * #2756 — a client-built row/branch must carry the SAME attributes a
+ * hydration-reused (SSR-origin) row carries.
+ *
+ * `lowerFormControlValueSsr` already lowers a controlled `<textarea>` /
+ * `<select>` `value` in the SHARED IR: the attr becomes `clientOnly` and
+ * the value is re-expressed as element content / per-option `selected`,
+ * so every SSR adapter omits the attribute. `irToHtmlTemplate` — the
+ * builder for keyed-loop rows and conditional branches — ignored that
+ * flag and baked `value="…"` back in, so a rebuilt row and a reused row
+ * disagreed the moment a row-count change made both coexist in one list.
+ *
+ * Each assertion here is paired with the effect that OWNS the value, so
+ * "the attribute is gone" can never be satisfied by dropping the binding.
+ */
+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
+}
+
+/** The `__tpl.innerHTML = \`…\`` / `insert(... html: \`…\`)` builder strings. */
+function builderTemplates(content: string): string[] {
+  return [...content.matchAll(/innerHTML = `([^`]*)`/g)].map(m => m[1])
+    .concat([...content.matchAll(/html: `([^`]*)`/g)].map(m => m[1]))
+}
+
+describe('#2756 — client-built rows honour clientOnly', () => {
+  test('a keyed-loop row builder omits the controlled textarea `value` attribute and keeps the child text', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function LoopTextarea() {
+        const [val, setVal] = createSignal(0)
+        const [items] = createSignal([1, 2, 3])
+        return (
+          <ul>
+            {items().filter(i => i > 0).map(i => (
+              <li key={i}>
+                <textarea value={val()} onInput={() => setVal(1)} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('<textarea'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      expect(tpl).not.toContain('value=')
+      // The SSR projection of the same value — element content — must stay.
+      expect(tpl).toMatch(/<textarea[^>]*>\$\{/)
+    }
+    // The effect that owns the value is still emitted, so the attribute is
+    // absent because the effect applies it, not because nothing does.
+    expect(content).toContain(`'value' in`)
+  })
+
+  test('a conditional-branch builder omits it too, and still binds the value effect', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function CondTextarea() {
+        const [on, setOn] = createSignal(true)
+        const [v, setV] = createSignal('x')
+        return <div>{on() ? <textarea value={v()} onInput={() => setV('y')} /> : <p>off</p>}</div>
+      }
+    `)
+    const branchTemplates = builderTemplates(content).filter(t => t.includes('<textarea'))
+    expect(branchTemplates.length).toBeGreaterThan(0)
+    for (const tpl of branchTemplates) expect(tpl).not.toContain('value=')
+    expect(content).toContain('createDisposableEffect')
+  })
+
+  test('a loop row keeps per-option `selected` — the select value projection is not collateral', () => {
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function LoopSelect() {
+        const [val, setVal] = createSignal('a')
+        const [rows] = createSignal([1, 2])
+        return (
+          <ul>
+            {rows().filter(r => r > 0).map(r => (
+              <li key={r}>
+                <select value={val()}>
+                  <option value="a">A</option>
+                  <option value="b">B</option>
+                </select>
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('<select'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      // The `<select …>` opening tag only — `<option value="a">` is the
+      // literal option value and must survive.
+      const selectTag = tpl.slice(tpl.indexOf('<select'), tpl.indexOf('<option'))
+      expect(selectTag).not.toMatch(/value=/)
+      expect(tpl).toContain("'selected'")
+    }
+  })
+
+  test('the composite-row placeholder builder omits it too', () => {
+    // `irToPlaceholderTemplate` is the twin builder used when a row also
+    // hosts a child component (components become `data-bf-ph` placeholders).
+    // Same contract, separate function — it had the same gap.
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      function Badge({ label }: { label: string }) { return <em>{label}</em> }
+      export function CompositeRows() {
+        const [val, setVal] = createSignal('a')
+        const [rows] = createSignal([{ id: 1, label: 'x' }])
+        return (
+          <ul>
+            {rows().map(row => (
+              <li key={row.id}>
+                <Badge label={row.label} />
+                <textarea value={val()} onInput={() => setVal('b')} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('data-bf-ph'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      expect(tpl).toContain('<textarea')
+      expect(tpl).not.toMatch(/\bvalue=/)
+    }
+  })
+
+  test('an ordinary reactive attribute on the same row IS still emitted by the builder', () => {
+    // Reverse direction, on one row so both halves are read off the same
+    // builder string: `clientOnly` is the ONLY thing now deferred. The
+    // row's own `title` / `data-n` must keep their inline emission.
+    const content = clientJs(`
+      "use client";
+      import { createSignal } from '@barefootjs/client'
+      export function MixedRow() {
+        const [val, setVal] = createSignal('a')
+        const [rows] = createSignal([1, 2])
+        return (
+          <ul>
+            {rows().filter(r => r > 0).map(r => (
+              <li key={r} title={String(r)} data-n={r}>
+                <textarea value={val()} onInput={() => setVal('b')} />
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const rowTemplates = builderTemplates(content).filter(t => t.includes('<textarea'))
+    expect(rowTemplates.length).toBeGreaterThan(0)
+    for (const tpl of rowTemplates) {
+      expect(tpl).toMatch(/title=/)
+      expect(tpl).toMatch(/data-n=/)
+      expect(tpl).not.toMatch(/\bvalue=/)
+    }
+  })
+})

package/src/__tests__/merge-template-imports.test.ts

@@ -56,7 +56,7 @@ describe('mergeTemplateImports', () => {
     expect(out).toBe("import { Foo, Baz } from 'x'\nimport type { Bar } from 'x'")
   })
 
-  test('passes through and dedupes side-effect / default imports by line', () => {
+  test('passes through and dedupes side-effect imports, and a lone default import, by line', () => {
     const out = mergeTemplateImports([
       "import './a.css'",
       "import Foo from 'foo'",
@@ -65,4 +65,44 @@ describe('mergeTemplateImports', () => {
     ])
     expect(out).toBe("import './a.css'\nimport Foo from 'foo'\nimport { x } from 'm'")
   })
+
+  // #2767 follow-up: two sibling components in a multi-component file both
+  // compile from the SAME module-scope `import cfg from 'lib'` declaration,
+  // but each component's own compiled output only lists the specifiers IT
+  // uses — so one component's output can carry `import cfg from 'lib'` and
+  // another's `import cfg, { helper } from 'lib'`. Exact-line dedup keeps
+  // BOTH (they're different strings), redeclaring `cfg` — a hard
+  // `SyntaxError`. Folding by source must collapse them into one line.
+  test('folds a default import shared across sibling components instead of redeclaring the binding', () => {
+    const out = mergeTemplateImports([
+      "import cfg from 'lib'",
+      "import cfg, { helper } from 'lib'",
+    ])
+    expect(out).toBe("import cfg, { helper } from 'lib'")
+    expect((out.match(/\bcfg\b/g) ?? []).length).toBe(1)
+  })
+
+  test('folds a default import with named specifiers arriving in the opposite order', () => {
+    const out = mergeTemplateImports([
+      "import cfg, { helperA } from 'lib'",
+      "import cfg, { helperB } from 'lib'",
+    ])
+    expect(out).toBe("import cfg, { helperA, helperB } from 'lib'")
+  })
+
+  test('keeps a default import separate from a differently-sourced named import', () => {
+    const out = mergeTemplateImports([
+      "import cfg from 'lib'",
+      "import { helper } from 'other-lib'",
+    ])
+    expect(out).toBe("import cfg from 'lib'\nimport { helper } from 'other-lib'")
+  })
+
+  test('dedupes an identical namespace import shared across sibling components', () => {
+    const out = mergeTemplateImports([
+      "import * as NS from 'lib'",
+      "import * as NS from 'lib'",
+    ])
+    expect(out).toBe("import * as NS from 'lib'")
+  })
 })

package/src/__tests__/multi-component-shared-default-import.test.ts

@@ -0,0 +1,55 @@
+/**
+ * #2767 follow-up: two sibling components in the SAME multi-component file
+ * compile independently from the same module-scope default import — each
+ * component's compiled client JS only lists the specifiers IT actually
+ * uses, so one component can emit `import cfg from './config'` while
+ * another emits `import cfg, { helper } from './config'` for the exact
+ * same source declaration. `compileMultipleComponents`'s client-JS merge
+ * used to dedupe import lines by EXACT STRING, which kept both — a hard
+ * `SyntaxError: Identifier 'cfg' has already been declared` in the merged
+ * `.client.js`, with zero compile diagnostics. This is an end-to-end test
+ * through the real `compileJSX` multi-component path (not the unit-level
+ * `mergeTemplateImports`/`collectExternalImports` tests, which are correct
+ * per-component but can't see this cross-component merge on their own).
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('multi-component file sharing a default import (#2767 follow-up)', () => {
+  test('merges into one import line instead of redeclaring the default binding', () => {
+    const source = `
+'use client'
+import cfg, { helper } from './config'
+import { createSignal } from '@barefootjs/client'
+
+export function CompA() {
+  const [n, setN] = createSignal(cfg.start)
+  return <button onClick={() => setN(n() + 1)}>{n()}</button>
+}
+
+export function CompB() {
+  const [m, setM] = createSignal(cfg.start + helper())
+  return <button onClick={() => setM(m() + 1)}>{m()}</button>
+}
+`
+    const result = compileJSX(source, 'shared-default.tsx', { adapter })
+    const errors = result.errors.filter(e => e.severity === 'error')
+    expect(errors).toEqual([])
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+
+    const importLines = clientJs!.content
+      .split('\n')
+      .filter(l => l.includes("from './config'"))
+    // Exactly one declaration for './config' — not one per component.
+    expect(importLines).toEqual(["import cfg, { helper } from './config'"])
+
+    // The binding is declared exactly once, not once per component.
+    const declarationCount = (clientJs!.content.match(/\bimport\s+cfg\b/g) ?? []).length
+    expect(declarationCount).toBe(1)
+  })
+})

package/src/__tests__/multi-root-loop-body.test.ts

@@ -48,7 +48,11 @@ export function Edges() {
     const { markedTemplate, clientJs } = compile(source, 'Edges.tsx')
 
     // SSR: per-item start marker is emitted inside the .map() body.
-    expect(markedTemplate.content).toContain(`bfComment('bf-loop-i')`)
+    // `bfComment(k)` itself prepends `bf-`, so the call argument is
+    // `'loop-i'`, yielding `<!--bf-loop-i-->` (#2763 fixed a stray extra
+    // `bf-` prefix here that had gone unexercised until that issue's
+    // fixture was the first `bodyIsMultiRoot` case rendered on this adapter).
+    expect(markedTemplate.content).toContain(`bfComment('loop-i')`)
     // Loop boundary markers also still present.
     expect(markedTemplate.content).toMatch(/bfComment\('loop:[^']+'\)/)
     expect(markedTemplate.content).toMatch(/bfComment\('\/loop:[^']+'\)/)
@@ -79,7 +83,7 @@ export function Items() {
     const { markedTemplate, clientJs } = compile(source, 'Items.tsx')
 
     // No per-item markers in the single-root case (zero-cost).
-    expect(markedTemplate.content).not.toContain(`bfComment('bf-loop-i')`)
+    expect(markedTemplate.content).not.toContain(`bfComment('loop-i')`)
     expect(clientJs).toBeDefined()
     expect(clientJs!.content).not.toContain('__bfExtras')
   })
@@ -104,7 +108,7 @@ export function Items() {
 }
 `
     const { markedTemplate, clientJs } = compile(source, 'NestedFrag.tsx')
-    expect(markedTemplate.content).not.toContain(`bfComment('bf-loop-i')`)
+    expect(markedTemplate.content).not.toContain(`bfComment('loop-i')`)
     expect(clientJs).toBeDefined()
     expect(clientJs!.content).not.toContain('__bfExtras')
   })

package/src/__tests__/preamble-declarations.test.ts

@@ -205,3 +205,45 @@ export function Rows(props: { rows: Row[] }) {
     expect(dslErrors(source)).toEqual([])
   })
 })
+
+describe('preamble value declarations — function-literal elision (#2797)', () => {
+  // An event handler hoisted into the preamble (rather than written inline in
+  // the JSX attribute) has no template-expression form on any DSL backend —
+  // but every adapter's own SSR prop-builder already skips an event-handler
+  // prop outright, so a name read ONLY that way needs no SSR representation
+  // at all. Elided, not refused: `declarations` legally ends up `[]`.
+  test('a handler read only as an event-handler prop value elides clean, no refusal', () => {
+    const source = ROWS(`const handleClick = () => {}`, `<li key={r.id} onClick={handleClick}>{r.label}</li>`)
+    expect(loopOf(source).preamble?.declarations).toEqual([])
+    expect(dslErrors(source)).toEqual([])
+  })
+
+  test('an elided handler coexists with a genuinely lowered declaration', () => {
+    const loop = loopOf(
+      ROWS(
+        `const cls = r.done ? 'done' : 'open'\n        const handleClick = () => {}`,
+        `<li key={r.id} class={cls} onClick={handleClick}>{r.label}</li>`,
+      ),
+    )
+    // Only the lowerable declaration survives — the elided one contributes no entry.
+    expect(loop.preamble?.declarations?.map(d => d.name)).toEqual(['cls'])
+  })
+
+  // Soundness: a function-valued local read ANYWHERE other than an
+  // event-handler prop value still refuses — elision only widens what's
+  // SAFE, it never lets an SSR-relevant function read through unassigned.
+  test('a handler also read in a non-event position still refuses', () => {
+    const errors = dslErrors(
+      ROWS(`const handleClick = () => {}`, `<li key={r.id}>{handleClick.name}</li>`),
+    )
+    expect(errors.length).toBeGreaterThan(0)
+    expect(errors[0]).toMatch(/not a sequence of value declarations/)
+  })
+
+  test('a handler passed to a NON-event child prop still refuses', () => {
+    const errors = dslErrors(
+      ROWS(`const handleClick = () => {}`, `<li key={r.id} data-fn={handleClick}>{r.label}</li>`),
+    )
+    expect(errors.length).toBeGreaterThan(0)
+  })
+})

package/src/__tests__/root-key-relay.test.ts

@@ -0,0 +1,170 @@
+/**
+ * Render-root row-key relay (`IRElement.keyAttr` with no `value`) — #2753's
+ * "mechanism 2".
+ *
+ * A component's rendered root is whatever element carries `bf-s`
+ * (`needsScope`). When that component is used as a caller's keyed loop row,
+ * the caller's key has to land on THAT element: `mapArray` reconciles rows
+ * by reading the key attribute off the row's primary element, and the CSR
+ * half of the contract (`renderChild` / `materializeComponent` in
+ * `@barefootjs/client`) splices `data-key` onto the rendered markup's first
+ * element regardless of what wrapper nodes sit above it. `resolveRootKeyAttr`
+ * is the SSR half, and it must agree.
+ *
+ * The regression these tests exist for: resolving the relay by walking DOWN
+ * from the IR root and stopping at the first node that is not an
+ * element/fragment/if-statement. `<Ctx.Provider>` is neither, but
+ * `transformProviderElement` passes `ctx.isRoot` through to its children — so
+ * a provider-rooted component (select, popover, accordion, carousel,
+ * combobox, command, dropdown-menu, radio-group) has a `needsScope` element
+ * the walk never reaches, and every adapter silently stopped relaying its
+ * caller's key.
+ */
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import type { IRElement, IRNode } from '../types'
+
+function compile(source: string, name = 'Test'): IRNode {
+  const ir = jsxToIR(analyzeComponent(source, `${name}.tsx`))
+  expect(ir).not.toBeNull()
+  return ir!
+}
+
+/** Every `element` node in the tree, in document order. */
+function allElements(node: IRNode): IRElement[] {
+  const out: IRElement[] = []
+  const visit = (n: IRNode | null | undefined): void => {
+    if (!n) return
+    if (n.type === 'element') out.push(n)
+    switch (n.type) {
+      case 'element':
+      case 'fragment':
+      case 'component':
+      case 'provider':
+      case 'loop':
+        for (const c of n.children) visit(c)
+        return
+      case 'async':
+        visit(n.fallback)
+        for (const c of n.children) visit(c)
+        return
+      case 'conditional':
+        visit(n.whenTrue)
+        visit(n.whenFalse)
+        return
+      case 'if-statement':
+        visit(n.consequent)
+        visit(n.alternate)
+        return
+    }
+  }
+  visit(node)
+  return out
+}
+
+const PROVIDER_ROOT = `
+'use client'
+import { createContext, createSignal } from '@barefootjs/client'
+
+const SelectContext = createContext({ open: false })
+
+export function Select(props: { children?: unknown }) {
+  const [open, setOpen] = createSignal(false)
+  return (
+    <SelectContext.Provider value={{ open: open(), setOpen }}>
+      <div data-slot="select">{props.children}</div>
+    </SelectContext.Provider>
+  )
+}
+`
+
+describe('render-root row-key relay (#2753)', () => {
+  test('a provider-rooted component relays the key on the element under the provider', () => {
+    const ir = compile(PROVIDER_ROOT, 'Select')
+
+    expect(ir.type).toBe('provider')
+    const div = allElements(ir).find(e => e.tag === 'div')
+    expect(div).toBeDefined()
+    // The element under the provider IS the rendered root: `ctx.isRoot`
+    // survives `transformProviderElement`.
+    expect(div!.needsScope).toBe(true)
+    // Relay marker: a name and no value — the value arrives at runtime from
+    // whoever renders this component as a keyed row.
+    expect(div!.keyAttr).toEqual({ name: 'data-key' })
+  })
+
+  test.each([
+    ['plain element root', `
+      export function C() { return <div class="root"><span>x</span></div> }
+    `],
+    ['early-return (if-statement) root — every branch top element', `
+      export function C(props: { on?: boolean }) {
+        if (props.on) return <section>on</section>
+        return <article>off</article>
+      }
+    `],
+    ['provider root', PROVIDER_ROOT],
+    ['provider wrapping an early-return root', `
+      'use client'
+      import { createContext } from '@barefootjs/client'
+      const Ctx = createContext(0)
+      export function C(props: { on?: boolean }) {
+        if (props.on) return <Ctx.Provider value={1}><section>on</section></Ctx.Provider>
+        return <Ctx.Provider value={0}><article>off</article></Ctx.Provider>
+      }
+    `],
+    ['nested providers around the root element', `
+      'use client'
+      import { createContext } from '@barefootjs/client'
+      const A = createContext(0)
+      const B = createContext(0)
+      export function C() {
+        return <A.Provider value={1}><B.Provider value={2}><div>x</div></B.Provider></A.Provider>
+      }
+    `],
+  ])('invariant: %s — every needsScope element carries a relay keyAttr', (_label, source) => {
+    const roots = allElements(compile(source)).filter(e => e.needsScope)
+    expect(roots.length).toBeGreaterThan(0)
+    for (const el of roots) {
+      expect({ tag: el.tag, keyAttr: el.keyAttr }).toEqual({
+        tag: el.tag,
+        keyAttr: { name: 'data-key' },
+      })
+    }
+  })
+
+  test('an inline .map() row root keeps its own resolved key expression', () => {
+    const ir = compile(`
+      export function List(props: { items: { id: number; name: string }[] }) {
+        return <ul>{props.items.map(i => <li key={i.id}>{i.name}</li>)}</ul>
+      }
+    `, 'List')
+
+    const li = allElements(ir).find(e => e.tag === 'li')
+    expect(li).toBeDefined()
+    // Mechanism 1 (a concretely-known local expression) wins over the relay
+    // marker; the relay pass must not overwrite it with a bare name.
+    expect(li!.needsScope).toBe(false)
+    expect(li!.keyAttr).toEqual({ name: 'data-key', value: 'i.id' })
+
+    const ul = allElements(ir).find(e => e.tag === 'ul')!
+    expect(ul.needsScope).toBe(true)
+    expect(ul.keyAttr).toEqual({ name: 'data-key' })
+  })
+
+  test('a scope-comment fragment root marks exactly one carrier, not every child', () => {
+    const ir = compile(`
+      export function C() {
+        return <><h1>title</h1><p>body</p></>
+      }
+    `)
+
+    expect(ir.type).toBe('fragment')
+    const els = allElements(ir)
+    // #2732: hydration markers moved to the wrapping comment, so no child is
+    // a `needsScope` element and the relay pass adds nothing of its own.
+    expect(els.every(e => !e.needsScope)).toBe(true)
+    expect(els.filter(e => e.keyAttr !== undefined).map(e => e.tag)).toEqual(['h1'])
+  })
+})