@barefootjs/jsx 0.4.0 → 0.5.1

package/src/__tests__/map-logical-jsx-helper.test.ts

@@ -0,0 +1,159 @@
+/**
+ * BarefootJS Compiler — `.map()` callback whose body is a logical
+ * expression (`&&` / `||` / `??`) that renders JSX.
+ *
+ * Regression for #1665: calling a module-level JSX helper from inside a
+ * reactive `.map()` child (`THEMES.map(t => sel === t.id && themeLogo(t.id))`)
+ * threw `ReferenceError: themeLogo is not defined` at hydration.
+ *
+ * Root cause: `transformMapCall` only recognised JSX-element, ternary,
+ * parenthesized, flatMap-array, and block callback bodies. A logical-`&&`
+ * body fell through, leaving `children` empty, so the whole `.map(...)`
+ * was emitted verbatim as a reactive-text expression — the inline JSX was
+ * never compiled and the JSX helper was never inlined nor declared,
+ * producing a ReferenceError.
+ *
+ * The fix routes a JSX-rendering logical callback body through the shared
+ * JSX expression transformer, which lowers it into an IRConditional and
+ * inlines any JSX helper (the same path the ternary form already used).
+ * The routing is scoped to logical operators so the bare-call body
+ * (`map(t => renderItem(t))`, owned by #546) and scalar logical bodies
+ * (`t.active && t.label`) keep their existing reactive-text behaviour.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('.map() with logical / JSX-helper-call body (#1665)', () => {
+  test('module-level JSX helper in a `&&` map body is inlined, not left as a bare call', () => {
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      function themeLogo(id: string) {
+        if (id === 'hono') return <span>hono</span>
+        return <span>piconic</span>
+      }
+      export function Header(props: { sel: string }) {
+        return <div>{THEMES.map(t => props.sel === t.id && themeLogo(t.id))}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+
+    // The helper must NOT survive as a runtime call in the client bundle —
+    // it is inlined. A surviving `themeLogo(` call with no declaration is
+    // the exact ReferenceError the issue reported.
+    expect(clientJs).not.toMatch(/themeLogo\s*\(/)
+
+    // The map is compiled into a loop, and the helper's JSX is inlined.
+    expect(clientJs).toContain('<!--bf-loop')
+    expect(clientJs).toContain('hono')
+    expect(clientJs).toContain('piconic')
+  })
+
+  test('parenthesized `&&` with a single-return JSX helper is inlined', () => {
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      function themeLogo(id: string) { return <span>{id}</span> }
+      export function Header(props: { sel: string }) {
+        return <div>{THEMES.map(t => (props.sel === t.id && themeLogo(t.id)))}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+
+    expect(clientJs).not.toMatch(/themeLogo\s*\(/)
+    expect(clientJs).toContain('<!--bf-loop')
+    expect(clientJs).toContain('<span')
+  })
+
+  test('`??` JSX-helper fallback in a map body is inlined', () => {
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      function themeLogo(id: string) { return <span>{id}</span> }
+      export function Header(props: { current?: string }) {
+        return <div>{THEMES.map(t => props.current ?? themeLogo(t.id))}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+
+    // `transformJsxExpression` now routes a `||`/`??` whose right operand
+    // renders JSX via a tracked helper through the nullish transformer, so
+    // the helper is inlined rather than left as a verbatim call.
+    expect(clientJs).not.toMatch(/themeLogo\s*\(/)
+    expect(clientJs).toContain('<span')
+  })
+
+  test('bare JSX-helper call body keeps its #546 reactive-text behaviour', () => {
+    // Boundary guard: the narrowed fix must NOT re-route a bare call body
+    // into the conditional path — that remains #546 territory. A local
+    // arrow helper is declared in init scope, so the call survives.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function List() {
+        const [items, _set] = createSignal([{ id: '1' }])
+        const renderItem = (item: any) => <li>{item.id}</li>
+        return <ul>{items().map(item => renderItem(item))}</ul>
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+    // The bare call is preserved (not inlined into a conditional loop).
+    expect(clientJs).toMatch(/renderItem\s*\(/)
+  })
+
+  test('inline JSX in a `&&` map body compiles instead of emitting raw JSX verbatim', () => {
+    // `key` is required on the `&&` JSX operand (#1665 / BF023): a whole-item
+    // conditional renders 0-or-1 element per iteration and needs a stable key
+    // for correct reconciliation, exactly like a ternary branch.
+    const source = `
+      'use client'
+      const THEMES = [{ id: 'piconic' }, { id: 'hono' }]
+      export function Header(props: { sel: string }) {
+        return <div>{THEMES.map(t => props.sel === t.id && <span key={t.id}>{t.id}</span>)}</div>
+      }
+    `
+    const result = compileJSX(source, 'Header.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+    // Compiled into a loop with a conditional branch — not the raw,
+    // un-compiled `<span>{t.id}</span>` JSX literal the buggy path left
+    // inside the client-bundle template string.
+    expect(clientJs).toContain('<!--bf-loop')
+    expect(clientJs).not.toContain('<span>{t.id}</span>')
+  })
+
+  test('scalar `&&` map body keeps its plain reactive-text behaviour', () => {
+    // Guard: a non-JSX logical body must NOT be re-routed into the
+    // conditional-control-flow path. It stays a verbatim map expression.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Labels() {
+        const [items, _set] = createSignal([{ active: true, name: 'A' }])
+        return <div>{items().map(t => t.active && t.name)}</div>
+      }
+    `
+    const result = compileJSX(source, 'Labels.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+    // Still rendered as the raw map expression (no loop control flow).
+    expect(clientJs).not.toContain('<!--bf-loop')
+    expect(clientJs).toContain('.map(')
+  })
+})

package/src/__tests__/missing-key-in-list.test.ts

@@ -224,6 +224,55 @@ describe('BF023 — ternary .map() callback', () => {
   })
 })
 
+// ---------------------------------------------------------------------------
+// BF023 — logical (&&, ||, ??) .map() callback (#1665)
+//
+// A whole-item conditional (`cond && <li>`) renders 0-or-1 element per
+// iteration. The same key reconciliation applies — without a key, toggling
+// items collapses or misorders them — so the JSX element inside a logical
+// expression must carry a key, just like a ternary branch.
+// ---------------------------------------------------------------------------
+
+describe('BF023 — logical && / || .map() callback (#1665)', () => {
+  test('&& body without key raises BF023', () => {
+    const source = `
+      interface Item { active: boolean; id: string }
+      export function List({ items }: { items: Item[] }) {
+        return <ul>{items.map(item => item.active && <li>{item.id}</li>)}</ul>
+      }
+    `
+    const errs = errorsFor(ErrorCodes.MISSING_KEY_IN_LIST, source)
+    expect(errs).toHaveLength(1)
+    expect(errs[0].severity).toBe('error')
+  })
+
+  test('&& body with key — no error', () => {
+    const source = `
+      interface Item { active: boolean; id: string }
+      export function List({ items }: { items: Item[] }) {
+        return <ul>{items.map(item => item.active && <li key={item.id}>{item.id}</li>)}</ul>
+      }
+    `
+    const result = compile(source)
+    const errs = result.errors.filter(
+      (e) => e.code === ErrorCodes.MISSING_KEY_IN_LIST || e.code === ErrorCodes.MISSING_KEY_IN_NESTED_LIST,
+    )
+    expect(errs).toHaveLength(0)
+  })
+
+  test('|| body without key raises BF023', () => {
+    const source = `
+      interface Item { hidden: boolean; id: string }
+      export function List({ items }: { items: Item[] }) {
+        return <ul>{items.map(item => item.hidden || <li>{item.id}</li>)}</ul>
+      }
+    `
+    const errs = errorsFor(ErrorCodes.MISSING_KEY_IN_LIST, source)
+    expect(errs).toHaveLength(1)
+    expect(errs[0].severity).toBe('error')
+  })
+})
+
 // ---------------------------------------------------------------------------
 // BF024 — nested map
 // ---------------------------------------------------------------------------

package/src/__tests__/reactive-attrs-in-map.test.ts

@@ -236,6 +236,47 @@ describe('reactive attributes inside .map() callbacks', () => {
     expect(forEachMatches.length).toBe(1)
   })
 
+  test('per-item attr reading an outer signal via helper+index gets a createEffect (#1673)', () => {
+    // A per-item attribute whose value reads the source array signal through
+    // a helper indexed by position (`widthAt(i)` → `items()[i].w`) used to
+    // emit NO reactive effect — the value was baked into the item template
+    // once and froze at its SSR value. The identical binding on a top-level
+    // element works, because the top-level path wraps opaque function calls
+    // via the Solid-style AST-flag fallback (#940). This test pins that the
+    // loop-child path now applies the same fallback.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ReproLoopAttr() {
+        const [items, setItems] = createSignal([{ id: 'a', w: 20 }, { id: 'b', w: 50 }])
+        const widthAt = (i) => items()[i].w
+        return (
+          <ul>
+            {items().map((it, i) => (
+              <li key={it.id} data-b style={\`width:\${widthAt(i)}%\`}>{it.id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const result = compileJSX(source, 'ReproLoopAttr.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    // The per-item style binding must be wired through a createEffect that
+    // re-reads the helper and writes the style attribute, so it tracks the
+    // `items()` signal and updates after hydration. Pin the helper call
+    // *inside* the createEffect alongside the style write — `widthAt(` also
+    // appears in the static template clone, so asserting it independently
+    // could pass even if the effect was missing (the exact regression here).
+    // The index resolves to the loop's renderItem index param, in scope
+    // inside the factory.
+    expect(clientJs).toMatch(
+      /createEffect\(\(\)\s*=>\s*\{[\s\S]*?widthAt\([\s\S]*?setAttribute\('style'/,
+    )
+  })
+
   test('keyed loop: `key` prop is not emitted as a reactive DOM attribute', () => {
     // Regression guard for the "key duplicate emission" bug:
     // `<li key={item.id}>` used to be both rendered as `data-key=` in the

package/src/__tests__/token-contains-ident.test.ts

@@ -129,6 +129,33 @@ describe('tokenContainsIdent', () => {
     })
   })
 
+  // Regex literals were invisible to the previous hand-rolled char scanner:
+  // a lone quote inside the regex flipped it into string state (swallowing
+  // real references), and an identifier inside the regex body was counted as
+  // a reference. The shared ts.createScanner-based lexer recognises regex
+  // literals, so both cases are now correct (#1370).
+  describe('regex literals', () => {
+    test('reference after a regex literal containing an apostrophe', () => {
+      expect(tokenContainsIdent("/it's/.test(className)", 'className')).toBe(true)
+    })
+
+    test('reference after a regex literal containing a quote', () => {
+      expect(tokenContainsIdent('/a"b/.test(className)', 'className')).toBe(true)
+    })
+
+    test('identifier inside a regex body is not a reference', () => {
+      expect(tokenContainsIdent('/className/.test(x)', 'className')).toBe(false)
+    })
+
+    test('regex with escaped slash does not leak into following code', () => {
+      expect(tokenContainsIdent('/a\\/b/.test(className)', 'className')).toBe(true)
+    })
+
+    test('division is not mistaken for a regex literal', () => {
+      expect(tokenContainsIdent('total / className', 'className')).toBe(true)
+    })
+  })
+
   describe('non-matches', () => {
     test('substring is not a match (word boundary)', () => {
       expect(tokenContainsIdent('myClassName', 'className')).toBe(false)

package/src/__tests__/unsupported-expression.test.ts

@@ -136,21 +136,22 @@ describe('Unsupported Expression Error (BF021)', () => {
 })
 
 describe('Unsupported Sort Comparator (BF021)', () => {
-  test('emits BF021 for multi-key comparator (||-chained) — outside accepted catalogue', () => {
-    // #1448 Tier B widened the accepted catalogue to include
-    // `.localeCompare` and primitive `(a,b) => a - b`. Multi-key
-    // shapes (`a.x - b.x || a.y - b.y`) are still out of scope —
-    // they refuse here and must be `@client`-marked or rewritten
-    // to a single-key sort.
+  test('emits BF021 for function-reference comparator — outside accepted catalogue', () => {
+    // #1448 Tier B follow-up widened the catalogue to include
+    // multi-key (`a.x - b.x || a.y - b.y`), relational ternary, and
+    // single-`return` block bodies. Function-reference comparators
+    // (`arr.sort(cmp)` where `cmp` is a named function) are still out
+    // of scope — they need scope resolution and refuse here.
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
 
       export function TodoList() {
         const [items, setItems] = createSignal<any[]>([])
+        const cmp = (a, b) => a.priority - b.priority
         return (
           <ul>
-            {items().sort((a, b) => a.priority - b.priority || a.id - b.id).map(t => (
+            {items().sort(cmp).map(t => (
               <li>{t.name}</li>
             ))}
           </ul>
@@ -162,7 +163,6 @@ describe('Unsupported Sort Comparator (BF021)', () => {
     const bf021 = errors.filter(e => e.code === ErrorCodes.UNSUPPORTED_JSX_PATTERN)
 
     expect(bf021).toHaveLength(1)
-    expect(bf021[0].message).toContain('not a supported shape')
   })
 
   test('@client suppresses BF021 for unsupported sort comparator', () => {
@@ -172,9 +172,10 @@ describe('Unsupported Sort Comparator (BF021)', () => {
 
       export function TodoList() {
         const [items, setItems] = createSignal<any[]>([])
+        const cmp = (a, b) => a.priority - b.priority
         return (
           <ul>
-            {/* @client */ items().sort((a, b) => a.priority - b.priority || a.id - b.id).map(t => (
+            {/* @client */ items().sort(cmp).map(t => (
               <li>{t.name}</li>
             ))}
           </ul>
@@ -188,9 +189,37 @@ describe('Unsupported Sort Comparator (BF021)', () => {
     expect(bf021).toHaveLength(0)
   })
 
-  test('emits BF021 error for block body sort comparator', () => {
-    // Block-body comparators are deferred to a Tier B follow-up
-    // (the extractor only handles expression-body shapes for now).
+  test('emits BF021 for localeCompare with a locale/options argument', () => {
+    // The zero-arg `a.f.localeCompare(b.f)` form lowers, but the
+    // locale/options form needs per-adapter collation plumbing and
+    // stays refused (deferred #1448 Tier B follow-up).
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function TodoList() {
+        const [items, setItems] = createSignal<any[]>([])
+        return (
+          <ul>
+            {items().sort((a, b) => a.name.localeCompare(b.name, 'en', { numeric: true })).map(t => (
+              <li>{t.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const { errors } = compileToIR(source)
+    const bf021 = errors.filter(e => e.code === ErrorCodes.UNSUPPORTED_JSX_PATTERN)
+
+    expect(bf021).toHaveLength(1)
+    expect(bf021[0].message).toContain('not a supported shape')
+  })
+
+  test('emits BF021 error for multi-statement block-body sort comparator', () => {
+    // Single-`return` block bodies now lower (#1448 Tier B follow-up),
+    // but multi-statement / local-var bodies stay refused — generalising
+    // over arbitrary statement sequences isn't tractable in a template.
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -199,7 +228,7 @@ describe('Unsupported Sort Comparator (BF021)', () => {
         const [items, setItems] = createSignal<any[]>([])
         return (
           <ul>
-            {items().sort((a, b) => { return a.price - b.price }).map(t => (
+            {items().sort((a, b) => { const x = a.price; return x - b.price }).map(t => (
               <li>{t.name}</li>
             ))}
           </ul>

package/src/adapters/interface.ts

@@ -123,6 +123,26 @@ export interface TemplateAdapter {
    * Required for adapters that look up templates by filename (e.g. Mojolicious).
    */
   templatesPerComponent?: boolean
+  /**
+   * How the application author injects the externals importmap (and any
+   * `<link rel="modulepreload">` hints) into the page `<head>` when
+   * `externals` / `bundleEntries` are configured.
+   *
+   * - `'component'` — the adapter ships a render-time component (e.g. Hono's
+   *   `BfImportMap`) that reads `barefoot-externals.json`; `bf build` emits no
+   *   static snippet.
+   * - `'html-snippet'` — the adapter targets a template-string language (Go
+   *   html/template, Mojolicious EP) with no component layer, so `bf build`
+   *   writes a ready-to-include `barefoot-importmap.html` alongside
+   *   `barefoot-externals.json` (via `renderImportMapHtml`).
+   *
+   * Optional only for backward compatibility (and internal-only adapters like
+   * the CSR test adapter). Every *shipping* adapter must set it — the
+   * adapter-tests importmap-injection contract enforces this so a new adapter
+   * cannot silently leave configured `externals` with no injection point.
+   * See issue #1644.
+   */
+  importMapInjection?: 'component' | 'html-snippet'
   /**
    * Module specifier of the SSR shim for `@barefootjs/client` (and
    * `/runtime`). When set, the compiler rewrites client-package imports in

package/src/adapters/test-adapter.ts

@@ -138,11 +138,26 @@ export class TestAdapter extends JsxAdapter {
     }
     const fullPropsDestructure = `{ ${parts.join(', ')} }`
 
+    // Default the props param to `{}` when the component has no required
+    // props, so a bare no-arg call (`Foo()`) doesn't crash on destructuring
+    // `undefined`. This is what makes a JSX-returning arrow hoisted from an
+    // object-literal value (e.g. `THEME_LOGOS[id]()`) renderable at SSR
+    // (#1663). `hasRequiredProps` ignores props that carry a destructuring
+    // default, but the declared props type may still mark that field
+    // required — so a bare `= {}` would fail `tsc` ("Property 'x' is missing
+    // in type '{}'..."). Assert the default to the param's own annotated type
+    // (`{} as T`); the destructuring defaults supply the values at runtime.
+    const hasRequiredProps = ir.metadata.propsParams.some(
+      (p: ParamInfo) => !p.optional && p.defaultValue === undefined && !p.isRest,
+    )
+    const propsTypeExpr = typeAnnotation.replace(/^:\s*/, '')
+    const noArgDefault = hasRequiredProps ? '' : ` = {} as ${propsTypeExpr}`
+
     const lines: string[] = []
     // Module-export keyword belongs to the adapter: it knows the target language
     // and whether the source declared the component as exported.
     const exportPrefix = ir.metadata.isExported === false ? '' : 'export '
-    lines.push(`${exportPrefix}function ${name}(${fullPropsDestructure}${typeAnnotation}) {`)
+    lines.push(`${exportPrefix}function ${name}(${fullPropsDestructure}${typeAnnotation}${noArgDefault}) {`)
 
     // Generate scope ID
     if (hasClientInteractivity) {