@barefootjs/jsx 0.10.1 → 0.12.0

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

@@ -0,0 +1,80 @@
+/**
+ * Profile-mode ids on conditional-branch DOM-binding effects (#1690, SR3/SR4,
+ * issue #1795 Phase 1).
+ *
+ * A conditional's `insert()` effect, and the attribute / text binding effects
+ * emitted inside its branch `bindEvents`, carry a `<Component>#binding:<slotId>`
+ * id in profile mode so the profiler attributes their re-runs to source.
+ * `buildIdIndex` resolves those ids from the graph's `domBindings`
+ * (conditional / attribute / text slot + loc). Off by default the emitted
+ * effects are byte-identical (SR8).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { buildIdIndex } from '../profiler'
+import { buildComponentAnalysis } from '../debug'
+
+const adapter = new TestAdapter()
+
+// `open() &&` produces a conditional (s1); inside its branch the `class={...}`
+// is a reactive attribute (s3) and `{n()}` is a reactive text effect (s2).
+const source = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  export function Disclosure() {
+    const [open, setOpen] = createSignal(false)
+    const [n] = createSignal(0)
+    return (
+      <div>
+        <button onClick={() => setOpen(!open())}>toggle</button>
+        {open() && <p class={open() ? 'a' : 'b'}>count: {n()}</p>}
+      </div>
+    )
+  }
+`
+
+function clientJs(profile: boolean): string {
+  return compileJSX(source, 'Disclosure.tsx', { adapter, profile })
+    .files.find(f => f.type === 'clientJs')!.content
+}
+
+describe('conditional binding-effect ids (#1795 Phase 1)', () => {
+  test('profile off: no #binding ids anywhere (SR8)', () => {
+    expect(clientJs(false)).not.toContain('#binding:')
+  })
+
+  test('profile on: the conditional insert() effect carries a #binding id', () => {
+    const on = clientJs(true)
+    // The id is the last argument to the `insert(...)` call, which closes on
+    // its own line as `}, "<id>")` (single paren — distinct from the branch
+    // effects' `}, "<id>"))`). Anchor the line so this can't match a nested
+    // effect's close instead.
+    expect(on).toMatch(/^\s*}, "Disclosure#binding:s\d+"\)$/m)
+    // And it really is an insert() call that opened the block.
+    expect(on).toContain("insert(__scope, 's1'")
+  })
+
+  test('profile on: branch attribute and text effects carry #binding ids', () => {
+    const on = clientJs(true)
+    // Branch reactive attribute effect (createDisposableEffect with the class write).
+    expect(on).toMatch(/setAttribute\('class'[\s\S]*?}, "Disclosure#binding:s\d+"\)\)/)
+    // Branch reactive text effect (__bfText path).
+    expect(on).toMatch(/__bfText\([\s\S]*?}, "Disclosure#binding:s\d+"\)\)/)
+  })
+
+  test('buildIdIndex resolves conditional / attribute / text binding ids to source loc', () => {
+    const { graph } = buildComponentAnalysis(source, 'Disclosure.tsx')
+    const index = buildIdIndex(graph)
+
+    for (const type of ['conditional', 'attribute', 'text'] as const) {
+      const binding = graph.domBindings.find(b => b.type === type)
+      expect(binding, `expected a ${type} domBinding`).toBeTruthy()
+      const node = index.get(`Disclosure#binding:${binding!.slotId}`)
+      expect(node?.kind, `${type} binding should resolve to an effect`).toBe('effect')
+      expect(node?.loc.file).toBe('Disclosure.tsx')
+      expect(node?.loc.line).toBeGreaterThan(0)
+    }
+  })
+})

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

@@ -0,0 +1,106 @@
+/**
+ * Profile-mode ids on loop-child DOM-binding effects (#1690, SR3/SR4,
+ * issue #1795 Phase 2).
+ *
+ * Inside a `map(it => …)` body the emitter wraps every loop-param read in a
+ * `createEffect`. In profile mode each of those per-item attribute / text
+ * effects now carries a `<Component>#binding:<slotId>` id, and `buildIdIndex`
+ * resolves it from the graph's loop-child `domBindings` (slot + loc) — the
+ * analyzer now threads loop-param context so `{it.t}` / `class={it.n…}` reads
+ * register as reactive bindings. Off by default the effects are byte-identical
+ * (SR8).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { buildIdIndex } from '../profiler'
+import { buildComponentAnalysis } from '../debug'
+
+const adapter = new TestAdapter()
+
+// `{it.t}` and `: {it.n}` are loop-child text effects (s0, s1); `class={…}` is
+// a loop-child attribute effect (s2); the loop itself is s3.
+const source = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  export function List() {
+    const [items] = createSignal([{ id: 1, t: 'a', n: 0 }])
+    return (
+      <ul>
+        {items().map(it => (
+          <li key={it.id} class={it.n > 0 ? 'hot' : 'cold'}>
+            <span>{it.t}</span>: {it.n}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+`
+
+function clientJs(profile: boolean): string {
+  return compileJSX(source, 'List.tsx', { adapter, profile })
+    .files.find(f => f.type === 'clientJs')!.content
+}
+
+describe('loop-child binding-effect ids (#1795 Phase 2)', () => {
+  test('profile off: no #binding ids anywhere (SR8)', () => {
+    expect(clientJs(false)).not.toContain('#binding:')
+  })
+
+  test('profile on: loop-child text effects carry #binding ids', () => {
+    const on = clientJs(true)
+    // Both `{it.t}` and `{it.n}` text effects.
+    expect(on).toMatch(/__rt_s\d+\.textContent = String\(it\(\)\.t\) }, "List#binding:s\d+"\)/)
+    expect(on).toMatch(/__rt_s\d+\.textContent = String\(it\(\)\.n\) }, "List#binding:s\d+"\)/)
+  })
+
+  test('profile on: the loop-child attribute effect carries a #binding id', () => {
+    const on = clientJs(true)
+    expect(on).toMatch(/setAttribute\('class'[\s\S]*?}, "List#binding:s\d+"\)/)
+  })
+
+  test('profile on: the `key` attribute is NOT emitted as a binding effect', () => {
+    const on = clientJs(true)
+    // `key` becomes the loop keyFn / data-key, never a createEffect.
+    expect(on).not.toContain('it().id) }, "List#binding')
+  })
+
+  test('analyzer registers loop-child text/attribute bindings (not `key`)', () => {
+    const { graph } = buildComponentAnalysis(source, 'List.tsx')
+    const loopChild = graph.domBindings.filter(b => b.type !== 'loop')
+    // class (attribute) + two texts = 3; `key` is excluded.
+    expect(loopChild.map(b => b.label).sort()).toEqual(['class', 'text "s0"', 'text "s1"'])
+    expect(loopChild.every(b => b.classification === 'reactive')).toBe(true)
+  })
+
+  test('a loop-param name inside a string literal is NOT mistaken for a read', () => {
+    // Index param `i`; `data-lit={'i'}` references no identifier — only the
+    // string literal `'i'`. Lexer-aware detection (freeIdentifiers / freeRefs)
+    // must not register it as a reactive binding, where a raw-string regex would.
+    const litSource = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function L() {
+        const [items] = createSignal([{ id: 1 }])
+        return <ul>{items().map((it, i) => <li key={it.id} data-lit={'i'} data-idx={i === 0 ? 'a' : 'b'}>x</li>)}</ul>
+      }
+    `
+    const { graph } = buildComponentAnalysis(litSource, 'L.tsx')
+    const labels = graph.domBindings.filter(b => b.type === 'attribute').map(b => b.label)
+    // `data-idx` reads the index identifier → reactive; `data-lit` is literal-only → not.
+    expect(labels).toContain('data-idx')
+    expect(labels).not.toContain('data-lit')
+  })
+
+  test('buildIdIndex resolves every loop-child binding to source loc', () => {
+    const { graph } = buildComponentAnalysis(source, 'List.tsx')
+    const index = buildIdIndex(graph)
+    for (const b of graph.domBindings) {
+      const node = index.get(`List#binding:${b.slotId}`)
+      expect(node?.kind, `binding ${b.slotId} (${b.type})`).toBe('effect')
+      expect(node?.loc.file).toBe('List.tsx')
+      expect(node?.loc.line).toBeGreaterThan(0)
+    }
+  })
+})

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

@@ -0,0 +1,153 @@
+/**
+ * Profile-mode ids on deeply-nested loop binding effects (#1690, SR3/SR4,
+ * issue #1795 Phase 3).
+ *
+ * Phases 1–2 covered top-level, conditional-branch, and direct loop-child
+ * bindings. Phase 3 closes the remaining nested emit paths so every binding
+ * effect a loop produces carries a `<Component>#binding:<slotId>` id and every
+ * emitted id resolves via `buildIdIndex`:
+ *
+ *   - loop-child conditional `insert()` + its branch text (`emitArmText`)
+ *   - inner / nested loop `mapArray` + inner-loop child text/attr effects
+ *   - branch-scoped loop `mapArray` (loop inside a conditional)
+ *   - static-array loop child text/attr effects
+ *   - component loop `mapArray`
+ *
+ * Off by default the emitted effects are byte-for-byte unchanged (SR8).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { buildIdIndex } from '../profiler'
+import { buildComponentAnalysis } from '../debug'
+import { profileBindingId } from '../ir-to-client-js/utils'
+
+const adapter = new TestAdapter()
+
+function clientJs(source: string, name: string, profile: boolean): string {
+  return compileJSX(source, `${name}.tsx`, { adapter, profile })
+    .files.find(f => f.type === 'clientJs')!.content
+}
+
+/** Every emitted `<Comp>#binding:sN` id must resolve via buildIdIndex (no gap). */
+function assertNoCoverageGap(source: string, name: string): string[] {
+  const on = clientJs(source, name, true)
+  const { graph } = buildComponentAnalysis(source, `${name}.tsx`)
+  const index = buildIdIndex(graph)
+  const emitted = [...new Set([...on.matchAll(new RegExp(`"(${name}#binding:s\\d+)"`, 'g'))].map(m => m[1]))]
+  const unresolved = emitted.filter(id => !index.has(id))
+  expect(unresolved).toEqual([])
+  return emitted
+}
+
+// A loop item with BOTH a conditional (with a branch text) AND an inner loop —
+// exercises emitOuterConditional, emitArmText, and the inner-loop mapArray.
+const nestedSource = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  export function Nested() {
+    const [rows] = createSignal([{ id: 1, on: true, label: 'a', tags: ['x'] }])
+    return (
+      <ul>
+        {rows().map(r => (
+          <li key={r.id}>
+            {r.on ? <span>{r.label}</span> : <em>off</em>}
+            <ul>{r.tags.map(t => <li key={t}>{t}</li>)}</ul>
+          </li>
+        ))}
+      </ul>
+    )
+  }
+`
+
+const branchLoopSource = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  export function BranchLoop() {
+    const [open] = createSignal(true)
+    const [items] = createSignal([{ id: 1, t: 'a' }])
+    return <div>{open() && <ul>{items().map(it => <li key={it.id}>{it.t}</li>)}</ul>}</div>
+  }
+`
+
+const staticLoopSource = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  export function StaticLoop() {
+    const [n] = createSignal(0)
+    const tabs = [{ id: 1 }, { id: 2 }]
+    return <ul>{tabs.map(tab => <li key={tab.id}>{n()}</li>)}</ul>
+  }
+`
+
+const componentLoopSource = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  import { Row } from './Row'
+  export function CompLoop() {
+    const [items] = createSignal([{ id: 1, label: 'a' }])
+    return <div>{items().map(it => <Row key={it.id} label={it.label} />)}</div>
+  }
+`
+
+describe('nested loop binding ids (#1795 Phase 3)', () => {
+  test('profile off: no #binding ids in any nested shape (SR8)', () => {
+    for (const [src, name] of [
+      [nestedSource, 'Nested'],
+      [branchLoopSource, 'BranchLoop'],
+      [staticLoopSource, 'StaticLoop'],
+      [componentLoopSource, 'CompLoop'],
+    ] as const) {
+      expect(clientJs(src, name, false)).not.toContain('#binding:')
+    }
+  })
+
+  test('loop-child conditional + inner loop: every binding resolves', () => {
+    const emitted = assertNoCoverageGap(nestedSource, 'Nested')
+    // conditional + arm text + inner-loop text + inner loop + outer loop = 5.
+    expect(emitted.length).toBe(5)
+  })
+
+  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 inner loop's child text (`{t}`).
+    expect(on).toMatch(/String\(t\(\)\) }, "Nested#binding:s\d+"\)/)
+  })
+
+  test('branch-scoped loop (loop inside a conditional) attributes its mapArray', () => {
+    const emitted = assertNoCoverageGap(branchLoopSource, 'BranchLoop')
+    // conditional + branch loop + loop-child text = 3.
+    expect(emitted.length).toBe(3)
+    const on = clientJs(branchLoopSource, 'BranchLoop', true)
+    expect(on).toMatch(/mapArray\([\s\S]*?"BranchLoop#binding:s\d+"\)/)
+  })
+
+  test('static-array loop child effects carry ids', () => {
+    const emitted = assertNoCoverageGap(staticLoopSource, 'StaticLoop')
+    expect(emitted.length).toBeGreaterThanOrEqual(1)
+    const on = clientJs(staticLoopSource, 'StaticLoop', true)
+    expect(on).toMatch(/textContent = String\(n\(\)\) }, "StaticLoop#binding:s\d+"\)/)
+  })
+
+  test('component loop attributes its mapArray', () => {
+    const emitted = assertNoCoverageGap(componentLoopSource, 'CompLoop')
+    expect(emitted).toContain('CompLoop#binding:s1')
+  })
+
+  test('a slot-less inner loop ("?") emits no id — never an unresolvable #binding:?', () => {
+    // An inner loop whose container element has no `bf` slot yields slotId '?'.
+    // buildIdIndex keys on real domBinding slots, so `#binding:?` could never
+    // resolve; the helper must suppress it (the analyzer emits no binding for a
+    // slot-less loop either, so both sides stay silent). Guards the single
+    // chokepoint every loop/binding emit site routes through.
+    expect(profileBindingId('Comp', '?')).toBe('')
+    expect(profileBindingId('Comp', 's3')).toBe(', "Comp#binding:s3"')
+    expect(profileBindingId(undefined, 's3')).toBe('')
+    // The nested case is the only matrix shape with an inner loop; confirm it
+    // never emits a `:?` id end-to-end.
+    expect(clientJs(nestedSource, 'Nested', true)).not.toContain('#binding:?')
+  })
+})

package/src/__tests__/profile-turn-markers-branch.test.ts

@@ -0,0 +1,83 @@
+/**
+ * Profile-mode turn markers on conditional-branch handler paths (#1690, SR3,
+ * issue #1786): branch-arm direct listeners and branch-scoped loop delegation.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+const source = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  export function Panel() {
+    const [open, setOpen] = createSignal(false)
+    const [items] = createSignal([{ id: 1 }])
+    return (
+      <div>
+        <button onClick={() => setOpen(!open())}>toggle</button>
+        {open() && (
+          <div>
+            <button onClick={() => setOpen(false)}>close</button>
+            <ul>{items().map(i => <li key={i.id} onClick={() => setOpen(false)}>x</li>)}</ul>
+          </div>
+        )}
+      </div>
+    )
+  }
+`
+
+function clientJs(profile: boolean): string {
+  return compileJSX(source, 'Panel.tsx', { adapter, profile })
+    .files.find(f => f.type === 'clientJs')!.content
+}
+
+describe('branch handler turn markers', () => {
+  test('profile off: no turn markers anywhere (SR8)', () => {
+    expect(clientJs(false)).not.toContain('beginTurn')
+  })
+
+  test('profile on: branch-arm listener and branch-loop delegation are wrapped', () => {
+    const on = clientJs(true)
+    // One per handler site: top-level toggle, branch-arm close, branch-loop li.
+    expect((on.match(/beginTurn\("Panel#handler:/g) ?? []).length).toBe(3)
+    // The branch-arm direct listener (addEventListener inside an arm).
+    expect(on).toMatch(/addEventListener\('click', \(\.\.\.__bfa\) => \{ beginTurn\("Panel#handler:s\d+:click"\)/)
+    // The branch-scoped loop's delegated handler (inline try/finally form).
+    expect(on).toMatch(/beginTurn\("Panel#handler:s\d+:click"\); try \{ \(\(\) => setOpen\(false\)\)\(__bfEvt\)/)
+  })
+})
+
+const loopCondSource = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  export function List() {
+    const [items, setItems] = createSignal([{ id: 1, on: true }])
+    return (
+      <ul>
+        {items().map(it => (
+          <li key={it.id}>
+            {it.on ? <button onClick={() => setItems(items().filter(x => x.id !== it.id))}>x</button> : <span>off</span>}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+`
+
+describe('loop-cond arm handler turn markers (#1786)', () => {
+  const compile = (profile: boolean) =>
+    compileJSX(loopCondSource, 'List.tsx', { adapter, profile }).files.find(f => f.type === 'clientJs')!.content
+
+  test('profile off: no turn markers (SR8)', () => {
+    expect(compile(false)).not.toContain('beginTurn')
+  })
+
+  test('profile on: a handler inside a loop-item conditional arm is turn-wrapped', () => {
+    const on = compile(true)
+    // The arm listener emitted inside bindEvents (addEventListener) is wrapped.
+    expect(on).toMatch(/addEventListener\('click', \(\.\.\.__bfa\) => \{ beginTurn\("List#handler:s\d+:click"\)/)
+  })
+})

package/src/__tests__/profile-turn-markers-delegation.test.ts

@@ -0,0 +1,63 @@
+/**
+ * Profile-mode turn markers on the loop event-delegation path (#1690, SR3).
+ *
+ * A dynamic list delegates its child events to a single container listener.
+ * In profile mode each delegated handler call is bracketed with
+ * `beginTurn`/`endTurn` so the reactive work it triggers is attributed to one
+ * turn, with the same id namespace as direct handlers. Off by default the
+ * dispatcher is unchanged (SR8).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+const source = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+
+  export function TodoList() {
+    const [items, setItems] = createSignal([{ id: 1, label: 'a' }])
+    return (
+      <ul>
+        {items().map(item => (
+          <li key={item.id} onClick={() => setItems(xs => xs.filter(x => x.id !== item.id))}>
+            {item.label}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+`
+
+function clientJs(profile: boolean): string {
+  return compileJSX(source, 'TodoList.tsx', { adapter, profile })
+    .files.find(f => f.type === 'clientJs')!.content
+}
+
+describe('loop delegation — profile off (SR8)', () => {
+  test('dispatcher carries no turn markers', () => {
+    const off = clientJs(false)
+    expect(off).toContain('addEventListener') // sanity: delegation present
+    expect(off).not.toContain('beginTurn')
+    expect(off).not.toContain('endTurn')
+  })
+})
+
+describe('loop delegation — profile on (SR3)', () => {
+  test('brackets the delegated handler call with a try/finally turn', () => {
+    const on = clientJs(true)
+    expect(on).toContain('beginTurn("TodoList#handler:')
+    expect(on).toContain('try {')
+    expect(on).toContain('finally { endTurn() }')
+  })
+
+  test('auto-wires the beginTurn/endTurn runtime import', () => {
+    const on = clientJs(true)
+    const importLine = on.split('\n').find(l => l.includes('@barefootjs/client/runtime'))
+    expect(importLine).toContain('beginTurn')
+    expect(importLine).toContain('endTurn')
+  })
+})

package/src/__tests__/profile-turn-markers.test.ts

@@ -0,0 +1,54 @@
+/**
+ * Profile-mode turn-boundary markers (#1690, SR3).
+ *
+ * In profile mode each event handler is bracketed with `beginTurn`/`endTurn`
+ * so a profiling run attributes the reactive work the handler triggers to one
+ * turn. Off by default the emitted code is unchanged (SR8).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+const source = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+
+  export function Counter() {
+    const [count, setCount] = createSignal(0)
+    return <button onClick={() => setCount(n => n + 1)}>{count()}</button>
+  }
+`
+
+function clientJs(profile: boolean): string {
+  return compileJSX(source, 'Counter.tsx', { adapter, profile })
+    .files.find(f => f.type === 'clientJs')!.content
+}
+
+describe('profile mode off (default, SR8)', () => {
+  test('emits no turn markers and no turn imports', () => {
+    const off = clientJs(false)
+    expect(off).not.toContain('beginTurn')
+    expect(off).not.toContain('endTurn')
+  })
+})
+
+describe('profile mode on (SR3)', () => {
+  test('brackets the handler with beginTurn/endTurn carrying an IR-aligned id', () => {
+    const on = clientJs(true)
+    expect(on).toContain('beginTurn("Counter#handler:')
+    expect(on).toContain('endTurn()')
+    // The original handler is still invoked verbatim with forwarded args.
+    expect(on).toContain('(() => setCount(n => n + 1))(...__bfa)')
+  })
+
+  test('auto-wires the beginTurn/endTurn runtime import', () => {
+    const on = clientJs(true)
+    const importLine = on.split('\n').find(l => l.includes('@barefootjs/client/runtime'))
+    expect(importLine).toBeDefined()
+    expect(importLine).toContain('beginTurn')
+    expect(importLine).toContain('endTurn')
+  })
+})