@barefootjs/jsx 0.24.1 → 0.26.0

package/src/__tests__/dangerous-inner-html-resolver.test.ts

@@ -45,13 +45,18 @@ describe('resolveDangerousInnerHtml (#2207)', () => {
     expect(resolveDangerousInnerHtml(el)).toEqual({ kind: 'static', html: '<i>x</i>' })
   })
 
-  test('signal/prop-derived value resolves as dynamic', () => {
+  test('signal/prop-derived value resolves as dynamic and carries the inner expression (#2319)', () => {
     const el = rootElement(`
       function Test({ html }: { html: string }) { return <div dangerouslySetInnerHTML={{ __html: html }} /> }
       export { Test }
     `)
     const resolution = resolveDangerousInnerHtml(el)
     expect(resolution?.kind).toBe('dynamic')
+    // The adapter lowers `valueExpr`/`valueParsed` (the inner `__html` value),
+    // not the whole `{ __html: … }` object, through its raw-output sink.
+    if (resolution?.kind !== 'dynamic') throw new Error('expected dynamic')
+    expect(resolution.valueExpr).toBe('html')
+    expect(resolution.valueParsed).toEqual({ kind: 'identifier', name: 'html' })
   })
 
   test('a no-substitution template literal resolves as static (identical to a string literal)', () => {
@@ -87,12 +92,14 @@ describe('resolveDangerousInnerHtml (#2207)', () => {
     expect(resolveDangerousInnerHtml(el)?.kind).toBe('dynamic')
   })
 
-  test('extra property alongside __html resolves as dynamic', () => {
+  test('extra property alongside __html resolves as unlowerable (not a { __html } object literal)', () => {
     const el = rootElement(`
       function Test() { return <div dangerouslySetInnerHTML={{ __html: '<b>x</b>', extra: 1 }} /> }
       export { Test }
     `)
-    expect(resolveDangerousInnerHtml(el)?.kind).toBe('dynamic')
+    // Not the canonical single-property shape — no faithful lowering, so the
+    // adapter refuses with BF101 (#2319 lowers a lone `{ __html: expr }`).
+    expect(resolveDangerousInnerHtml(el)?.kind).toBe('unlowerable')
   })
 
   test('isDangerousInnerHtmlAttr only matches the exact prop name', () => {
@@ -187,11 +194,24 @@ describe('dangerousInnerHtmlMetacharViolation (#2207)', () => {
 })
 
 describe('dangerousInnerHtmlDiagnostic (#2207)', () => {
-  test('produces a BF101 with a purpose-built message', () => {
-    const diag = dangerousInnerHtmlDiagnostic('html', { file: 'Test.tsx', start: { line: 1, column: 0 }, end: { line: 1, column: 0 } })
+  test('a wrong-shape refusal (no reason) states the single-__html-property contract', () => {
+    const diag = dangerousInnerHtmlDiagnostic('true', { file: 'Test.tsx', start: { line: 1, column: 0 }, end: { line: 1, column: 0 } })
     expect(diag.code).toBe('BF101')
     expect(diag.severity).toBe('error')
-    expect(diag.message).toContain('dangerouslySetInnerHTML requires a compile-time string literal')
-    expect(diag.suggestion?.message).toContain('2215')
+    // The message names the canonical shape (a single `__html` property) so a
+    // near-miss like `{ __html: x, extra: 1 }` isn't told it "expects an
+    // { __html: … }" it already appears to have (#2319 review).
+    expect(diag.message).toContain('requires an object literal with a single `__html` property')
+    // A dynamic value is now lowered, not refused, so the escape-hatch text
+    // points at the object-literal contract and /* @client */ (#2319).
+    expect(diag.suggestion?.message).toContain('@client')
+  })
+
+  test('a valid-shape-but-unlowerable refusal (with reason) leads with the reason, not the shape', () => {
+    const diag = dangerousInnerHtmlDiagnostic('{ __html: `<b>${x}</b>` }', { file: 'Test.tsx', start: { line: 1, column: 0 }, end: { line: 1, column: 0 } }, 'no single-argument raw form on the Go adapter')
+    expect(diag.code).toBe('BF101')
+    expect(diag.message).toContain('cannot be lowered on this adapter — no single-argument raw form on the Go adapter')
+    // It must NOT claim the shape is wrong when it isn't.
+    expect(diag.message).not.toContain('requires an object literal with a single')
   })
 })

package/src/__tests__/nested-loop-conditional.test.ts

@@ -381,3 +381,136 @@ describe('nested loops/conditionals inside mapArray (#830, #839)', () => {
     expect(outsideInitChildCount).toBe(0)
   })
 })
+
+describe('per-item conditional wrapping a dynamic attr/event element binds exactly once (#2347)', () => {
+  // A per-item conditional (`cond ? null : <el/>`) whose element itself has a
+  // dynamic attribute and/or event handler used to get bound twice: once
+  // directly against the loop item's own initial template clone (querying
+  // `qsa(__el, ...)` right in the mapArray callback), and again inside the
+  // conditional's own `insert()` bindEvents against whatever node it mounts.
+  // At runtime this doubled the click handler and left the attribute effect
+  // pointed at a detached node once insert() swapped branches.
+
+  test('Repro 1: reactive className on a conditionally-rendered element binds once, inside bindEvents', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Item { handle: string; active: 0 | 1 }
+
+      export function List(props: { viewerHandle: string }) {
+        const [items, setItems] = createSignal<Item[]>([])
+        return (
+          <div>
+            {items().map(u => (
+              <div key={u.handle}>
+                {u.handle === props.viewerHandle ? null : (
+                  <button className={u.active ? 'btn on' : 'btn'} onClick={() => {}}>
+                    {u.active ? 'On' : 'Off'}
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+
+    // Exactly one class effect, exactly one click listener.
+    expect((content.match(/setAttribute\('class'/g) ?? []).length).toBe(1)
+    expect((content.match(/addEventListener\('click'/g) ?? []).length).toBe(1)
+
+    // The class effect must live inside the conditional's own bindEvents
+    // (querying `__branchScope`, the node insert() actually mounts) —
+    // not directly against `__el` in the outer mapArray scope, which would
+    // go stale the moment insert() swaps in a fresh clone.
+    const bindEventsIndex = content.indexOf('bindEvents:')
+    const classEffectIndex = content.indexOf("setAttribute('class'")
+    expect(bindEventsIndex).toBeGreaterThan(-1)
+    expect(classEffectIndex).toBeGreaterThan(bindEventsIndex)
+    expect(content).toContain("qsa(__branchScope, '[bf=\"s2\"]')")
+  })
+
+  test('Repro 2: a doubly-nested per-item conditional binds click exactly once, in the innermost arm', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Item { handle: string; active: 0 | 1 }
+
+      export function List(props: { viewerHandle: string; signedIn: boolean }) {
+        const [items, setItems] = createSignal<Item[]>([])
+        const onClick = (u: Item) => {}
+        return (
+          <div>
+            {items().map(u => (
+              <div key={u.handle}>
+                {u.handle === props.viewerHandle ? null : props.signedIn ? (
+                  <button className={u.active ? 'btn on' : 'btn'} onClick={() => onClick(u)}>
+                    {u.active ? 'On' : 'Off'}
+                  </button>
+                ) : (
+                  <a href="/login" rel="nofollow noreferrer">Off</a>
+                )}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+
+    // A single click bound in the browser used to fire the handler twice —
+    // once from the outer arm's own qsa()+addEventListener, once again from
+    // the nested insert()'s bindEvents — silently double-toggling state.
+    expect((content.match(/addEventListener\('click'/g) ?? []).length).toBe(1)
+    expect((content.match(/setAttribute\('class'/g) ?? []).length).toBe(1)
+  })
+
+  test('a JSX-callback prop call as the WHOLE branch content does not get a nested text effect', () => {
+    // Regression pin for a fix-of-the-fix: the initial #2347 patch made
+    // `summarizeLoopChildBranch` collect reactive texts for any branch,
+    // which newly reached a per-item conditional whose branch is a single
+    // bare `expression` (no wrapping element) — e.g. a hoisted JSX-callback
+    // prop call (`renderNode={(n) => <Pill/>}`-shaped, #1211/#1213). That
+    // value is already fully re-evaluated and spliced via `__bfSlot`
+    // whenever insert() (re-)mounts the branch; wrapping it in an
+    // *additional* createEffect re-invokes the callback (producing a
+    // second, independent live element) on the very first run, and the
+    // loop-child arm's `$t()`-based anchor lookup can't cleanly displace an
+    // already-mounted Element — so the second instance renders beside the
+    // first instead of replacing it (surfaced via barefootjs-xyflow's
+    // renderNode reference page in CI).
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Node { id: string }
+
+      export function Flow(props: { renderNode?: (n: Node) => unknown }) {
+        const [nodes] = createSignal<Node[]>([])
+        return (
+          <div>
+            {nodes().map(n => (
+              <div key={n.id}>
+                {props.renderNode ? props.renderNode(n) : <span>{n.id}</span>}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Flow.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+
+    // No nested createEffect re-invoking `props.renderNode(n)` — the
+    // conditional's own template()/insert() already owns this value.
+    expect(content).not.toMatch(/createEffect\(\(\) => \{ __rt_\w+ = __bfText\(__rt_\w+, \(?\s*props\.renderNode\(n\(\)\)/)
+  })
+})

package/src/__tests__/profile-nested-binding-ids.test.ts

@@ -111,8 +111,11 @@ describe('nested loop binding ids (#1795 Phase 3)', () => {
 
   test('loop-child conditional insert() and its branch text carry ids', () => {
     const on = clientJs(nestedSource, 'Nested', true)
-    // The branch-arm text (`{r.label}` inside the conditional's true arm).
-    expect(on).toMatch(/__rt_s\d+\.textContent = String\(r\(\)\.label\) }, "Nested#binding:s\d+"\)/)
+    // The branch-arm text (`{r.label}` inside the conditional's true arm) —
+    // __bfText (not a naive `.textContent = String(...)`) so a Child-position
+    // expression whose value is a live Node splices by identity instead of
+    // stringifying (#2347).
+    expect(on).toMatch(/__rt_s\d+ = __bfText\(__rt_s\d+, r\(\)\.label\) }, "Nested#binding:s\d+"\)/)
     // The inner loop's child text (`{t}`).
     expect(on).toMatch(/String\(t\(\)\) }, "Nested#binding:s\d+"\)/)
   })