@barefootjs/jsx 0.1.3 → 1.0.0

package/src/__tests__/debug.test.ts

@@ -8,9 +8,14 @@
 import { describe, test, expect } from 'bun:test'
 import {
   buildComponentGraph,
+  buildEventSummary,
+  buildComponentAnalysis,
+  buildLoopSummary,
   traceUpdatePath,
   formatComponentGraph,
   formatUpdatePath,
+  formatEventSummary,
+  formatLoopSummary,
   formatSignalTrace,
   generateStaticTrace,
   graphToJSON,
@@ -615,8 +620,6 @@ describe('DomBinding classification (#944)', () => {
   })
 
   test('formatComponentGraph marks fallback bindings with ~ prefix', () => {
-    // The visual marker is the primary UX for `bf debug graph`.
-    // Guard the prefix format so `why-wrap` output doesn't silently drift.
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -631,14 +634,424 @@ describe('DomBinding classification (#944)', () => {
     const graph = buildComponentGraph(source, 'Page.tsx')
     const output = formatComponentGraph(graph)
     // Fallback text binding for formatTitle(page) — marked with '~'.
-    expect(output).toMatch(/~ text "/)
-    // Reactive text binding for count() — marked with two leading spaces
-    // (no tilde). The exact prefix matters: it's the visual diff.
-    expect(output).toMatch(/dom bindings:[\s\S]*?text "/)
-    // No fallback marker on the reactive binding's line.
+    // New format uses JSX preview: `~ <h1>{formatTitle(page)}</h1>`
+    expect(output).toMatch(/~ .*formatTitle/)
+    // Reactive text binding for count() — no tilde prefix.
+    expect(output).toMatch(/dom bindings:[\s\S]*?count/)
     const lines = output.split('\n')
-    const countLine = lines.find(l => l.includes('count') && l.includes('text'))
+    const countLine = lines.find(l => l.includes('count()') && l.includes('<h1>'))
     expect(countLine).toBeDefined()
-    expect(countLine!).not.toMatch(/~ text/)
+    expect(countLine!).not.toMatch(/^.*~ /)
+  })
+})
+
+// =============================================================================
+// Source locations + JSX previews on DomBinding (#1611 TODO 2)
+// =============================================================================
+
+describe('DomBinding source locations and JSX previews', () => {
+  test('text bindings carry loc and parent-tag JSX preview', () => {
+    const graph = buildComponentGraph(counterSource, 'Counter.tsx')
+    const textBinding = graph.domBindings.find(d => d.type === 'text')
+    expect(textBinding).toBeDefined()
+    expect(textBinding!.loc).toBeDefined()
+    expect(textBinding!.loc!.start.line).toBeGreaterThan(0)
+    expect(textBinding!.jsxPreview).toContain('<button>')
+    expect(textBinding!.jsxPreview).toContain('count()')
+    expect(textBinding!.jsxPreview).toContain('</button>')
+  })
+
+  test('attribute bindings carry loc and element-tag JSX preview', () => {
+    const graph = buildComponentGraph(sliderLikeSource, 'RangeInput.tsx')
+    const styleBinding = graph.domBindings.find(d => d.label === 'style')
+    expect(styleBinding).toBeDefined()
+    expect(styleBinding!.loc).toBeDefined()
+    expect(styleBinding!.jsxPreview).toMatch(/<div style=\{/)
+  })
+
+  test('event bindings carry loc and JSX preview', () => {
+    const graph = buildComponentGraph(counterSource, 'Counter.tsx')
+    const eventBinding = graph.domBindings.find(d => d.type === 'event')
+    expect(eventBinding).toBeDefined()
+    expect(eventBinding!.loc).toBeDefined()
+    expect(eventBinding!.jsxPreview).toContain('<button')
+    expect(eventBinding!.jsxPreview).toContain('onClick')
+  })
+
+  test('loop bindings carry loc and JSX preview with param', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function List() {
+        const [items, setItems] = createSignal([1, 2, 3])
+        return <ul>{items().map(item => <li>{item}</li>)}</ul>
+      }
+    `
+    const graph = buildComponentGraph(source, 'List.tsx')
+    const loopBinding = graph.domBindings.find(d => d.type === 'loop')
+    expect(loopBinding).toBeDefined()
+    expect(loopBinding!.jsxPreview).toContain('.map(item')
+  })
+
+  test('conditional bindings carry loc and JSX preview', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function Toggle() {
+        const [show, setShow] = createSignal(true)
+        return <div>{show() ? <span>on</span> : <span>off</span>}</div>
+      }
+    `
+    const graph = buildComponentGraph(source, 'Toggle.tsx')
+    const condBinding = graph.domBindings.find(d => d.type === 'conditional')
+    expect(condBinding).toBeDefined()
+    expect(condBinding!.jsxPreview).toContain('show()')
+    expect(condBinding!.jsxPreview).toContain('? ... : ...')
+  })
+
+  test('component prop bindings carry loc and JSX preview', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      import { Card } from './Card'
+
+      export function Page() {
+        const [title, setTitle] = createSignal('hello')
+        return <Card title={title()} />
+      }
+    `
+    const graph = buildComponentGraph(source, 'Page.tsx')
+    const propBinding = graph.domBindings.find(d => d.label === 'Card.title')
+    expect(propBinding).toBeDefined()
+    expect(propBinding!.jsxPreview).toContain('<Card title=')
+  })
+
+  test('formatComponentGraph includes source locations', () => {
+    const graph = buildComponentGraph(counterSource, 'Counter.tsx')
+    const output = formatComponentGraph(graph)
+    expect(output).toMatch(/at Counter\.tsx:\d+/)
+  })
+
+  test('graphToJSON includes loc and jsxPreview fields', () => {
+    const graph = buildComponentGraph(counterSource, 'Counter.tsx')
+    const json = graphToJSON(graph) as { domBindings: Array<{ loc?: object; jsxPreview?: string }> }
+    const binding = json.domBindings.find(d => (d as any).type === 'text')
+    expect(binding).toBeDefined()
+    expect(binding!.loc).toBeDefined()
+    expect(binding!.jsxPreview).toBeDefined()
+  })
+})
+
+// =============================================================================
+// Event analysis (bf debug events)
+// =============================================================================
+
+describe('buildEventSummary', () => {
+  test('extracts direct setter calls from event handlers', () => {
+    const summary = buildEventSummary(counterSource, 'Counter.tsx')
+    expect(summary.componentName).toBe('Counter')
+    expect(summary.events.length).toBeGreaterThanOrEqual(1)
+    const clickEvent = summary.events.find(e => e.eventName === 'onClick')
+    expect(clickEvent).toBeDefined()
+    expect(clickEvent!.elementTag).toBe('button')
+    expect(clickEvent!.setterCalls.some(s => s.setter === 'setCount')).toBe(true)
+  })
+
+  test('extracts events from a component with multiple handlers', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function SearchPanel() {
+        const [query, setQuery] = createSignal('')
+        const [category, setCategory] = createSignal('all')
+        return (
+          <div>
+            <input type="search" onInput={(e) => setQuery(e.target.value)} />
+            <select name="category" onChange={(e) => setCategory(e.target.value)}>
+              <option value="all">All</option>
+            </select>
+            <p>{query()}</p>
+          </div>
+        )
+      }
+    `
+    const summary = buildEventSummary(source, 'SearchPanel.tsx')
+    expect(summary.events).toHaveLength(2)
+    const inputEvent = summary.events.find(e => e.elementTag === 'input')
+    expect(inputEvent).toBeDefined()
+    expect(inputEvent!.elementContext).toBe('input search')
+    expect(inputEvent!.setterCalls[0].setter).toBe('setQuery')
+    expect(inputEvent!.setterCalls[0].signal).toBe('query')
+
+    const selectEvent = summary.events.find(e => e.elementTag === 'select')
+    expect(selectEvent).toBeDefined()
+    expect(selectEvent!.elementContext).toBe('select category')
+    expect(selectEvent!.setterCalls[0].setter).toBe('setCategory')
+  })
+
+  test('resolves setters through local functions', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function TodoApp() {
+        const [todos, setTodos] = createSignal([])
+
+        function addTodo(text: string) {
+          setTodos(prev => [...prev, { text, done: false }])
+        }
+
+        return (
+          <button onClick={() => addTodo('new')}>Add</button>
+        )
+      }
+    `
+    const summary = buildEventSummary(source, 'TodoApp.tsx')
+    expect(summary.events).toHaveLength(1)
+    const click = summary.events[0]
+    expect(click.setterCalls).toHaveLength(1)
+    expect(click.setterCalls[0].setter).toBe('setTodos')
+    expect(click.setterCalls[0].signal).toBe('todos')
+    expect(click.setterCalls[0].via).toBe('addTodo')
+  })
+
+  test('includes component prop events (Button.onClick)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      import { Button } from './Button'
+
+      export function ResetPanel() {
+        const [count, setCount] = createSignal(0)
+        return (
+          <div>
+            <p>{count()}</p>
+            <Button onClick={() => setCount(0)}>Reset</Button>
+          </div>
+        )
+      }
+    `
+    const summary = buildEventSummary(source, 'ResetPanel.tsx')
+    const btnEvent = summary.events.find(e => e.isComponentProp)
+    expect(btnEvent).toBeDefined()
+    expect(btnEvent!.elementTag).toBe('Button')
+    expect(btnEvent!.elementContext).toBe('Reset Button')
+    expect(btnEvent!.setterCalls[0].setter).toBe('setCount')
+  })
+
+  test('returns empty events for stateless component', () => {
+    const source = `
+      export function Card(props: { title: string }) {
+        return <div>{props.title}</div>
+      }
+    `
+    const summary = buildEventSummary(source, 'Card.tsx')
+    expect(summary.events).toHaveLength(0)
+  })
+
+  test('includes source location on events', () => {
+    const summary = buildEventSummary(counterSource, 'Counter.tsx')
+    expect(summary.events.length).toBeGreaterThan(0)
+    const event = summary.events[0]
+    expect(event.loc).toBeDefined()
+    expect(event.loc.start.line).toBeGreaterThan(0)
+  })
+})
+
+describe('formatEventSummary', () => {
+  test('produces readable output with setter and update info', () => {
+    const source = `
+      'use client'
+      import { createSignal, createMemo } from '@barefootjs/client'
+
+      export function Counter() {
+        const [count, setCount] = createSignal(0)
+        const doubled = createMemo(() => count() * 2)
+        return (
+          <div>
+            <button onClick={() => setCount(n => n + 1)}>+</button>
+            <span>{count()}</span>
+            <span>{doubled()}</span>
+          </div>
+        )
+      }
+    `
+    const summary = buildEventSummary(source, 'Counter.tsx')
+    const graph = buildComponentGraph(source, 'Counter.tsx')
+    const output = formatEventSummary(summary, graph)
+
+    expect(output).toContain('Counter')
+    expect(output).toContain('onClick')
+    expect(output).toContain('setCount')
+    expect(output).toContain('updates:')
+  })
+
+  test('shows indirect setter resolution via local functions', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function App() {
+        const [items, setItems] = createSignal([])
+        function addItem(text: string) {
+          setItems(prev => [...prev, text])
+        }
+        return (
+          <div>
+            <button onClick={() => addItem('test')}>Add</button>
+            <ul>{items().map(i => <li>{i}</li>)}</ul>
+          </div>
+        )
+      }
+    `
+    const summary = buildEventSummary(source, 'App.tsx')
+    const graph = buildComponentGraph(source, 'App.tsx')
+    const output = formatEventSummary(summary, graph)
+
+    expect(output).toContain('addItem -> setItems')
+  })
+})
+
+describe('buildComponentAnalysis', () => {
+  test('returns both graph and IR', () => {
+    const analysis = buildComponentAnalysis(counterSource, 'Counter.tsx')
+    expect(analysis.graph.componentName).toBe('Counter')
+    expect(analysis.ir.root).toBeDefined()
+    expect(analysis.ir.metadata.signals).toHaveLength(1)
+  })
+})
+
+// =============================================================================
+// Loop analysis (bf debug loops)
+// =============================================================================
+
+describe('buildLoopSummary', () => {
+  test('extracts loop with key, bindings, and handlers', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ItemList() {
+        const [items, setItems] = createSignal([{ id: 1, name: 'A' }])
+        const [selectedId, setSelectedId] = createSignal(0)
+        return (
+          <ul>
+            {items().map(item => (
+              <li key={item.id} class={selectedId() === item.id ? 'active' : ''}>
+                <span>{item.name}</span>
+                <button onClick={() => setSelectedId(item.id)}>Select</button>
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const summary = buildLoopSummary(source, 'ItemList.tsx')
+    expect(summary.loops).toHaveLength(1)
+    const loop = summary.loops[0]
+    expect(loop.array).toContain('items()')
+    expect(loop.param).toBe('item')
+    expect(loop.key).toBe('item.id')
+
+    const classBinding = loop.bindings.find(b => b.name === 'class')
+    expect(classBinding).toBeDefined()
+    expect(classBinding!.deps).toContain('selectedId')
+    expect(classBinding!.deps).toContain('item')
+
+    const textBinding = loop.bindings.find(b => b.kind === 'text')
+    expect(textBinding).toBeDefined()
+    expect(textBinding!.deps).toContain('item')
+    expect(textBinding!.elementContext).toBe('span')
+
+    const clickEvent = loop.bindings.find(b => b.kind === 'event')
+    expect(clickEvent).toBeDefined()
+    expect(clickEvent!.deps).toContain('item')
+  })
+
+  test('returns empty for component without loops', () => {
+    const summary = buildLoopSummary(counterSource, 'Counter.tsx')
+    expect(summary.loops).toHaveLength(0)
+  })
+
+  test('includes source location', () => {
+    const summary = buildLoopSummary(todoSource, 'TodoList.tsx')
+    expect(summary.loops.length).toBeGreaterThan(0)
+    expect(summary.loops[0].loc.start.line).toBeGreaterThan(0)
+  })
+})
+
+describe('formatLoopSummary', () => {
+  test('produces readable output', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function List() {
+        const [items, setItems] = createSignal([{ id: 1, text: 'hello' }])
+        return (
+          <ul>
+            {items().map(item => (
+              <li key={item.id}>
+                <span>{item.text}</span>
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const summary = buildLoopSummary(source, 'List.tsx')
+    const output = formatLoopSummary(summary)
+    expect(output).toContain('1 loop(s)')
+    expect(output).toContain('.map(item)')
+    expect(output).toContain('key: item.id')
+    expect(output).toContain('item')
+  })
+
+  test('includes index parameter in format output', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function IndexList() {
+        const [items, setItems] = createSignal(['a', 'b', 'c'])
+        return (
+          <ul>
+            {items().map((item, i) => (
+              <li><span>{i}: {item}</span></li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const summary = buildLoopSummary(source, 'IndexList.tsx')
+    expect(summary.loops).toHaveLength(1)
+    const output = formatLoopSummary(summary)
+    expect(output).toContain('.map(item, i)')
+  })
+
+  test('handles destructured loop params via paramBindings', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ConfigList() {
+        const [entries, setEntries] = createSignal([['key1', { label: 'A' }]])
+        return (
+          <ul>
+            {entries().map(([key, cfg]) => (
+              <li><span>{key}: {cfg.label}</span></li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const summary = buildLoopSummary(source, 'ConfigList.tsx')
+    expect(summary.loops).toHaveLength(1)
+    const loop = summary.loops[0]
+    const textBindings = loop.bindings.filter(b => b.kind === 'text')
+    expect(textBindings.length).toBeGreaterThan(0)
   })
 })

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

@@ -314,6 +314,13 @@ const PAGES: PageSpec[] = [
   // tie each ❌ snippet to its parent `### BFxxx —` H3.
   { path: 'core/advanced/performance.md' },
   { path: 'core/reactivity.md' },
+  {
+    path: 'core/reactivity/shared-state.md',
+    pageSkip: (body: string) => {
+      if (/\bapp\.get\b/.test(body)) return 'server route example (not a component)'
+      return undefined
+    },
+  },
   { path: 'core/introduction.mdx' },
 ]
 

package/src/__tests__/ir-provider.test.ts

@@ -403,3 +403,101 @@ describe('Context.Provider JSX', () => {
     expect(error?.severity).toBe('error')
   })
 })
+
+describe('Context API constraints (#1607)', () => {
+  test('useContext without "use client" triggers BF001', () => {
+    const source = `
+      import { createContext, useContext } from '@barefootjs/client'
+
+      const Ctx = createContext()
+
+      export function Consumer() {
+        const handleMount = (el: HTMLElement) => {
+          const ctx = useContext(Ctx)
+        }
+        return <div ref={handleMount} />
+      }
+    `
+
+    const result = compileJSX(source, 'Consumer.tsx', { adapter })
+    const bf001 = result.errors.find(e => e.code === ErrorCodes.MISSING_USE_CLIENT)
+    expect(bf001).toBeDefined()
+  })
+
+  test('useContext with "use client" compiles without errors', () => {
+    const source = `
+      'use client'
+      import { createContext, useContext } from '@barefootjs/client'
+
+      const Ctx = createContext()
+
+      export function Consumer() {
+        const handleMount = (el: HTMLElement) => {
+          const ctx = useContext(Ctx)
+        }
+        return <div ref={handleMount} />
+      }
+    `
+
+    const result = compileJSX(source, 'Consumer.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+  })
+
+  test('useContext import is rewritten to runtime path in client JS', () => {
+    const source = `
+      'use client'
+      import { createContext, useContext } from '@barefootjs/client'
+
+      const Ctx = createContext()
+
+      export function Consumer() {
+        const handleMount = (el: HTMLElement) => {
+          const ctx = useContext(Ctx)
+        }
+        return <div ref={handleMount} />
+      }
+    `
+
+    const result = compileJSX(source, 'Consumer.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!
+    expect(clientJs).toBeDefined()
+    expect(clientJs.content).toContain("from '@barefootjs/client/runtime'")
+    expect(clientJs.content).toContain('useContext')
+  })
+
+  test('same-file provider + consumer compiles with provideContext before useContext', () => {
+    const source = `
+      'use client'
+      import { createContext, useContext, createSignal } from '@barefootjs/client'
+
+      const ThemeContext = createContext('light')
+
+      export function ThemeProvider(props) {
+        return (
+          <ThemeContext.Provider value={props.theme}>
+            <ThemedButton />
+          </ThemeContext.Provider>
+        )
+      }
+
+      function ThemedButton() {
+        const handleMount = (el: HTMLButtonElement) => {
+          const theme = useContext(ThemeContext)
+          el.className = theme === 'dark' ? 'btn-dark' : 'btn-light'
+        }
+        return <button ref={handleMount}>click</button>
+      }
+    `
+
+    const result = compileJSX(source, 'Theme.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')!
+    const provideIdx = clientJs.content.indexOf('provideContext(ThemeContext')
+    const useIdx = clientJs.content.indexOf('useContext(ThemeContext')
+    expect(provideIdx).toBeGreaterThan(-1)
+    expect(useIdx).toBeGreaterThan(-1)
+    expect(provideIdx).toBeLessThan(useIdx)
+  })
+})

package/src/__tests__/rewrite-destructured-props.test.ts

@@ -0,0 +1,73 @@
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../index'
+import { HonoAdapter } from '../../../adapter-hono/src/adapter/index'
+
+function compileClientJs(source: string): string {
+  const result = compileJSX(source, 'test.tsx', { adapter: new HonoAdapter() })
+  const clientJs = result.files.find(f => f.type === 'clientJs')
+  if (!clientJs) throw new Error('No client JS emitted')
+  return clientJs.content
+}
+
+describe('prop substitution in reactive attr expressions', () => {
+  test('does NOT replace prop name inside double-quoted strings in class attr', () => {
+    const source = `
+"use client"
+const sizeClasses: Record<string, string> = { default: "h-9", icon: "size-9" }
+function Comp({ size = 'default' }: { size?: string }) {
+  return <div className={\`base \${sizeClasses[size]}\`} />
+}
+export { Comp }
+`
+    const js = compileClientJs(source)
+    expect(js).toContain('"size-9"')
+    expect(js).not.toContain('(_p.size ?? \'default\')-9')
+  })
+
+  test('does NOT replace prop name in CSS selector strings', () => {
+    const source = `
+"use client"
+function Comp({ size = 'default' }: { size?: string }) {
+  return <button className={\`[&_svg:not([class*="size-"])]:size-4 \${size}\`} />
+}
+export { Comp }
+`
+    const js = compileClientJs(source)
+    expect(js).toContain('[class*="size-"]')
+    expect(js).toContain(':size-4')
+  })
+
+  test('rewrites prop name in interpolation positions', () => {
+    const source = `
+"use client"
+function Comp({ size = 'default' }: { size?: string }) {
+  return <div className={\`cls-\${size}\`} />
+}
+export { Comp }
+`
+    const js = compileClientJs(source)
+    expect(js).toContain('_p.size')
+  })
+
+  test('Button-like pattern: CSS selectors, variant maps, and prop refs', () => {
+    const source = `
+"use client"
+const base = 'inline-flex [&_svg:not([class*="size-"])]:size-4'
+const variants: Record<string, string> = { default: "bg-primary", outline: "border" }
+const sizes: Record<string, string> = { default: "h-9", icon: "size-9", "icon-sm": "size-8" }
+function Btn({ variant = 'default', size = 'default', className = '' }: { variant?: string, size?: string, className?: string }) {
+  return <button className={\`\${base} \${variants[variant]} \${sizes[size]} \${className}\`} />
+}
+export { Btn }
+`
+    const js = compileClientJs(source)
+    expect(js).toContain('[class*="size-"]')
+    expect(js).toContain(':size-4')
+    expect(js).toContain('"size-9"')
+    expect(js).toContain('"size-8"')
+    expect(js).toContain('_p.variant')
+    expect(js).toContain('_p.size')
+    expect(js).toContain('_p.className')
+    expect(js).not.toMatch(/\(_p\.size[^)]*\)-[0-9]/)
+  })
+})