@barefootjs/jsx 0.3.0 → 0.5.0

package/src/__tests__/__snapshots__/doc-examples.test.ts.snap

@@ -474,7 +474,133 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L75 — (no label) 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L69 — ✅ Multi-key: sort by price, break ties by name 1`] = `
+"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+
+export function initTodoItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  createEffect(() => {
+    const __val = String(_p.todo)
+    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+  })
+
+}
+
+hydrate('TodoItem__b3c36eee', { init: initTodoItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.todo)}<!--/--></li>\` })
+export function TodoItem(_p, __bfKey) { return createComponent('TodoItem__b3c36eee', _p, __bfKey) }
+export function initItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  createEffect(() => {
+    const __val = String(_p.item)
+    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+  })
+
+}
+
+hydrate('Item__b3c36eee', { init: initItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.item)}<!--/--></li>\` })
+export function Item(_p, __bfKey) { return createComponent('Item__b3c36eee', _p, __bfKey) }
+function initDashboard() {}
+
+hydrate('Dashboard__b3c36eee', { init: initDashboard, template: (_p) => \`<div>D</div>\` })
+export function Dashboard(_p, __bfKey) { return createComponent('Dashboard__b3c36eee', _p, __bfKey) }
+export function initExample(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const children = _p.children
+  const [count, setCount] = createSignal(0)
+  const [isLoggedIn] = createSignal(false)
+  const [todos] = createSignal([])
+  const [items] = createSignal([])
+  const [filter] = createSignal('all')
+  const [accepted] = createSignal(false)
+  const [text, setText] = createSignal('')
+
+  const [_s1] = $(__scope, 's1')
+
+  mapArray(() => items().toSorted((a, b) => a.price - b.price || a.name.localeCompare(b.name)), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+    if (__existing) { initChild('Item__b3c36eee', __existing, { get item() { return item() } }); return __existing }
+    return createComponent('Item__b3c36eee', { get item() { return item() } }, item().id)
+  }, 'l0')
+
+}
+
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).toSorted((a, b) => a.price - b.price || a.name.localeCompare(b.name)).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
+export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
+`;
+
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L74 — ✅ Relational ternary 1`] = `
+"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+
+export function initTodoItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  createEffect(() => {
+    const __val = String(_p.todo)
+    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+  })
+
+}
+
+hydrate('TodoItem__b3c36eee', { init: initTodoItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.todo)}<!--/--></li>\` })
+export function TodoItem(_p, __bfKey) { return createComponent('TodoItem__b3c36eee', _p, __bfKey) }
+export function initItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  createEffect(() => {
+    const __val = String(_p.item)
+    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+  })
+
+}
+
+hydrate('Item__b3c36eee', { init: initItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.item)}<!--/--></li>\` })
+export function Item(_p, __bfKey) { return createComponent('Item__b3c36eee', _p, __bfKey) }
+function initDashboard() {}
+
+hydrate('Dashboard__b3c36eee', { init: initDashboard, template: (_p) => \`<div>D</div>\` })
+export function Dashboard(_p, __bfKey) { return createComponent('Dashboard__b3c36eee', _p, __bfKey) }
+export function initExample(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const children = _p.children
+  const [count, setCount] = createSignal(0)
+  const [isLoggedIn] = createSignal(false)
+  const [todos] = createSignal([])
+  const [items] = createSignal([])
+  const [filter] = createSignal('all')
+  const [accepted] = createSignal(false)
+  const [text, setText] = createSignal('')
+
+  const [_s1] = $(__scope, 's1')
+
+  mapArray(() => items().toSorted((a, b) => a.price > b.price ? 1 : -1), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+    if (__existing) { initChild('Item__b3c36eee', __existing, { get item() { return item() } }); return __existing }
+    return createComponent('Item__b3c36eee', { get item() { return item() } }, item().id)
+  }, 'l0')
+
+}
+
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).toSorted((a, b) => a.price > b.price ? 1 : -1).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
+export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
+`;
+
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L85 — (no label) 1`] = `
 "import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -536,7 +662,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div><button bf="s0"
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L121 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L131 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
 "import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -599,7 +725,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L124 — ✅ Use /* @client */ 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L134 — ✅ Use /* @client */ 1`] = `
 "import { $t, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -660,7 +786,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L141 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L151 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
 "import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -723,7 +849,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L144 — ✅ Use arrow functions for adapter portability 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L154 — ✅ Use arrow functions for adapter portability 1`] = `
 "import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -786,7 +912,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L158 — ✅ Use /* @client */ 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L168 — ✅ Use /* @client */ 1`] = `
 "import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -838,14 +964,14 @@ export function initExample(__scope, _p = {}) {
 
   const [_s1] = $(__scope, 's1')
 
-  mapArray(() => items().sort((a, b) => a.name > b.name ? 1 : -1), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+  mapArray(() => items().sort((a, b) => { const an = a.name; return an > b.name ? 1 : -1 }), _s1, (item) => String(item.id), (item, __idx, __existing) => {
     if (__existing) { initChild('Item__b3c36eee', __existing, { get item() { return item() } }); return __existing }
     return createComponent('Item__b3c36eee', { get item() { return item() } }, item().id)
   }, 'l0')
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).sort((a, b) => a.name > b.name ? 1 : -1).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).sort((a, b) => { const an = a.name; return an > b.name ? 1 : -1 }).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 

package/src/__tests__/auto-defer-brand.test.ts

@@ -201,3 +201,84 @@ describe('auto-defer brand-package reactive bindings (#1638)', () => {
     expect(templateBody).toContain('data-count=')
   })
 })
+
+describe('client hydrate template defers brand conditionals (#1645)', () => {
+  // The `template: (_p) => ...` lambda runs at module scope when the
+  // component is client-rendered via `createComponent` (not when hydrating
+  // existing SSR DOM). It cannot reproduce per-instance `createForm` state,
+  // so an auto-deferred conditional must emit empty cond markers — exactly
+  // like the SSR adapter — and let `init`'s `insert()` populate the branch.
+
+  test('non-inlinable createForm (onSubmit): no undefined.field, emits cond markers', () => {
+    const { templateBody } = compileWithBrand(`
+      'use client'
+      import { createForm } from './_form-defs'
+
+      export function SignupForm() {
+        const form = createForm({
+          onSubmit: async (data) => { await fetch('/signup', { method: 'POST', body: JSON.stringify(data) }) },
+        })
+        const email = form.field('email')
+        return (
+          <form>
+            <input value={email.value()} />
+            {email.error() && <p>{email.error()}</p>}
+          </form>
+        )
+      }
+    `)
+
+    // Never re-derive the form at module scope: `undefined.field(...)` throws.
+    expect(templateBody).not.toContain('undefined.field')
+    expect(templateBody).not.toContain('.field(')
+    // The deferred conditional collapses to the same empty markers SSR emits.
+    expect(templateBody).toMatch(/<!--bf-cond-start:s\d+--><!--bf-cond-end:s\d+-->/)
+  })
+
+  test('inlinable createForm (no onSubmit): no re-inlined createForm in template', () => {
+    const { templateBody } = compileWithBrand(`
+      'use client'
+      import { createForm } from './_form-defs'
+
+      export function SignupForm() {
+        const form = createForm({ defaultValues: { email: '' } })
+        const email = form.field('email')
+        return (
+          <form>
+            <input value={email.value()} />
+            {email.error() && <p>{email.error()}</p>}
+          </form>
+        )
+      }
+    `)
+
+    // A re-inlined `createForm({...})` would build a throwaway instance on
+    // every template render (error always '', never the live instance).
+    expect(templateBody).not.toContain('createForm(')
+    expect(templateBody).not.toContain('undefined.field')
+    expect(templateBody).toMatch(/<!--bf-cond-start:s\d+--><!--bf-cond-end:s\d+-->/)
+  })
+
+  test('init still wires the deferred conditional via insert()', () => {
+    const { initBody } = compileWithBrand(`
+      'use client'
+      import { createForm } from './_form-defs'
+
+      export function SignupForm() {
+        const form = createForm()
+        const email = form.field('email')
+        return (
+          <form>
+            <input value={email.value()} />
+            {email.error() && <p>{email.error()}</p>}
+          </form>
+        )
+      }
+    `)
+
+    // The reactive binding lives in init (where `email`/`form` are in scope),
+    // not in the module-scope template lambda.
+    expect(initBody).toMatch(/insert\(/)
+    expect(initBody).toContain('email.error()')
+  })
+})

package/src/__tests__/child-components-in-map.test.ts

@@ -729,4 +729,80 @@ describe('child components inside .map() (#344)', () => {
     expect(content).toContain('children[__idx]')
     expect(content).not.toContain('children[__idx + ')
   })
+
+  test('nested .map() with multiple inner components emits unique __compEl bindings (#1664)', () => {
+    const source = `
+      'use client'
+
+      export function Picker() {
+        const GROUPS = [
+          { id: 'a', items: [{ id: 'x', label: 'X' }] },
+        ]
+        return (
+          <div>
+            {GROUPS.map(group => (
+              <div key={group.id}>
+                {group.items.map(it => (
+                  <div key={it.id}>
+                    <SelectItem value={it.id}>{it.label}</SelectItem>
+                    <SelectIcon name={it.id} />
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Picker.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    const content = clientJs!.content
+
+    // Both inner-loop components must be initialised.
+    expect(content).toContain("initChild('SelectItem'")
+    expect(content).toContain("initChild('SelectIcon'")
+
+    // No re-declaration of `__compEl` in the shared inner-forEach scope:
+    // each comp must use a uniquely-suffixed binding.
+    expect(content).toContain('__compEl0')
+    expect(content).toContain('__compEl1')
+
+    // The bug threw "Identifier '__compEl' has already been declared" — the
+    // unsuffixed binding must not appear when multiple comps share a scope.
+    expect(content).not.toContain('const __compEl =')
+  })
+
+  test('nested .map() with a single inner component keeps the plain __compEl binding (#1664)', () => {
+    const source = `
+      'use client'
+
+      export function Picker() {
+        const GROUPS = [
+          { id: 'a', items: [{ id: 'x', label: 'X' }] },
+        ]
+        return (
+          <div>
+            {GROUPS.map(group => (
+              <div key={group.id}>
+                {group.items.map(it => (
+                  <SelectItem key={it.id} value={it.id}>{it.label}</SelectItem>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Picker.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toContain("initChild('SelectItem'")
+    // Single comp keeps the unsuffixed name.
+    expect(content).toContain('const __compEl =')
+    expect(content).not.toContain('__compEl0')
+  })
 })

package/src/__tests__/import-map.test.ts

@@ -0,0 +1,75 @@
+/**
+ * renderImportMapHtml tests
+ *
+ * The shared importmap-snippet renderer turns a parsed `barefoot-externals.json`
+ * into the `<script type="importmap">` (+ `<link rel="modulepreload">`) HTML that
+ * `bf build` emits as `barefoot-importmap.html` for template-string adapters
+ * (issue #1644). This is the single source of truth for that snippet.
+ */
+import { describe, test, expect } from 'bun:test'
+import { renderImportMapHtml } from '../import-map'
+
+function parseImportMap(html: string): Record<string, string> {
+  const match = html.match(/<script type="importmap">(.*?)<\/script>/s)
+  if (!match) throw new Error(`no importmap in: ${html}`)
+  // Decode the < escape the renderer applies before parsing.
+  return JSON.parse(match[1]).imports
+}
+
+describe('renderImportMapHtml', () => {
+  test('emits the manifest importmap imports verbatim', () => {
+    const html = renderImportMapHtml({
+      importmap: {
+        imports: {
+          '@barefootjs/client': '/components/barefoot.js',
+          '@barefootjs/client/runtime': '/components/barefoot.js',
+          zod: 'https://esm.sh/zod@4.4.3',
+        },
+      },
+      preloads: [],
+    })
+    expect(parseImportMap(html)).toEqual({
+      '@barefootjs/client': '/components/barefoot.js',
+      '@barefootjs/client/runtime': '/components/barefoot.js',
+      zod: 'https://esm.sh/zod@4.4.3',
+    })
+    expect(html).not.toContain('modulepreload')
+  })
+
+  test('emits modulepreload links with crossorigin for manifest preloads (#1648)', () => {
+    const html = renderImportMapHtml({
+      importmap: { imports: {} },
+      preloads: ['/components/form.js', 'https://esm.sh/zod@4.4.3'],
+    })
+    expect(html).toContain('<link rel="modulepreload" href="/components/form.js" crossorigin>')
+    expect(html).toContain('<link rel="modulepreload" href="https://esm.sh/zod@4.4.3" crossorigin>')
+  })
+
+  test('reads defensively from a partial manifest', () => {
+    expect(parseImportMap(renderImportMapHtml({}))).toEqual({})
+    expect(renderImportMapHtml({})).not.toContain('modulepreload')
+  })
+
+  test('ends with a trailing newline (template-include friendly)', () => {
+    expect(renderImportMapHtml({ importmap: { imports: {} } }).endsWith('\n')).toBe(true)
+  })
+
+  test('escapes < in the importmap JSON so a URL cannot break out of the script', () => {
+    const html = renderImportMapHtml({
+      importmap: { imports: { evil: 'https://x/</script><script>alert(1)</script>' } },
+    })
+    // The literal closing tag must not appear before the importmap's own.
+    const importmapClose = html.indexOf('</script>')
+    expect(html.slice(0, importmapClose)).not.toContain('</script>')
+    // But the value still round-trips through JSON.parse.
+    expect(parseImportMap(html).evil).toBe('https://x/</script><script>alert(1)</script>')
+  })
+
+  test('escapes double quotes and angle brackets in preload hrefs', () => {
+    const html = renderImportMapHtml({
+      preloads: ['/components/"onerror=alert(1).js'],
+    })
+    expect(html).not.toContain('"onerror=alert(1)')
+    expect(html).toContain('&quot;onerror=alert(1)')
+  })
+})