@barefootjs/jsx 0.1.1 → 0.1.3

package/src/__tests__/invalid-signal-usage.audit.test.ts

@@ -0,0 +1,72 @@
+/**
+ * BF012 `INVALID_SIGNAL_USAGE` deletion audit.
+ *
+ * BF012 was reserved for "Invalid signal usage" — a vague placeholder
+ * with no defined scenario and no emission site.  Every concrete
+ * signal-misuse pattern already has a dedicated diagnostic:
+ *
+ *   - BF011: module-level createSignal / createMemo
+ *   - BF044: signal getter passed without calling it
+ *   - BF060: reactive binding in template scope
+ *
+ * This file proves the compiler handles signal-related edge cases
+ * without needing BF012.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { ErrorCodes } from '../errors'
+
+function compileToIR(source: string) {
+  const ctx = analyzeComponent(source, '/tmp/Test.tsx')
+  const ir = jsxToIR(ctx)
+  return { ctx, ir, errors: ctx.errors }
+}
+
+describe('BF012 INVALID_SIGNAL_USAGE — deletion audit', () => {
+  test('valid signal usage produces no errors', () => {
+    const src = `'use client'
+import { createSignal } from '@barefootjs/client'
+export function Counter() {
+  const [count, setCount] = createSignal(0)
+  return <button onClick={() => setCount(count() + 1)}>{count()}</button>
+}
+`
+    const { errors } = compileToIR(src)
+    expect(errors).toHaveLength(0)
+  })
+
+  test('module-level signal is caught by BF011, not BF012', () => {
+    const src = `'use client'
+import { createSignal } from '@barefootjs/client'
+const [count, setCount] = createSignal(0)
+export function Counter() {
+  return <button onClick={() => setCount(count() + 1)}>{count()}</button>
+}
+`
+    const ctx = analyzeComponent(src, '/tmp/Counter.tsx', 'Counter')
+    const codes = ctx.errors.map(e => e.code)
+    expect(codes).toContain(ErrorCodes.SIGNAL_OUTSIDE_COMPONENT)
+    expect(codes).not.toContain('BF012')
+  })
+
+  test('signal getter passed without calling is caught by BF044, not BF012', () => {
+    const src = `'use client'
+import { createSignal } from '@barefootjs/client'
+export function Counter() {
+  const [count, setCount] = createSignal(0)
+  return <div value={count} />
+}
+`
+    const { errors } = compileToIR(src)
+    const codes = errors.map(e => e.code)
+    expect(codes).toContain(ErrorCodes.SIGNAL_GETTER_NOT_CALLED)
+    expect(codes).not.toContain('BF012')
+  })
+
+  test('BF012 code no longer exists in ErrorCodes', () => {
+    const allCodes = Object.values(ErrorCodes)
+    expect(allCodes).not.toContain('BF012')
+  })
+})

package/src/__tests__/jsx-function-inlining.test.ts

@@ -105,7 +105,7 @@ describe('JSX function inlining (#569)', () => {
       expect(fn!.isJsxFunction).toBe(true)
     })
 
-    test('does not set isJsxFunction for functions with multiple returns', () => {
+    test('multi-return function is stored in jsxMultiReturnFunctions (not jsxFunctions)', () => {
       const source = `
         'use client'
 
@@ -121,6 +121,11 @@ describe('JSX function inlining (#569)', () => {
       const ctx = analyzeComponent(source, 'MyComponent.tsx')
 
       expect(ctx.jsxFunctions.has('renderItem')).toBe(false)
+      expect(ctx.jsxMultiReturnFunctions.has('renderItem')).toBe(true)
+      const info = ctx.jsxMultiReturnFunctions.get('renderItem')!
+      expect(info.params).toEqual(['active'])
+      expect(info.branches).toHaveLength(1)
+      expect(info.fallback).not.toBeNull()
     })
 
     test('does not set isJsxFunction for non-JSX returning functions', () => {
@@ -422,4 +427,279 @@ describe('JSX function inlining (#569)', () => {
       expect(template!.content).toContain('table')
     })
   })
+
+  describe('multi-return JSX function inlining', () => {
+    test('if/else helper is inlined as conditional IR', () => {
+      const source = `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+
+        export function StatusDisplay() {
+          const [status, setStatus] = createSignal('ok')
+
+          function renderBadge(s: string) {
+            if (s === 'error') return <span class="error">Error</span>
+            return <span class="ok">OK</span>
+          }
+
+          return <div>{renderBadge(status())}</div>
+        }
+      `
+
+      const ctx = analyzeComponent(source, 'StatusDisplay.tsx')
+      expect(ctx.jsxMultiReturnFunctions.has('renderBadge')).toBe(true)
+
+      const ir = jsxToIR(ctx)
+      expect(ir).not.toBeNull()
+
+      // Verify IR contains a conditional node (not an opaque expression)
+      function findConditional(node: any): any {
+        if (node?.type === 'conditional') return node
+        for (const child of node?.children ?? []) {
+          const found = findConditional(child)
+          if (found) return found
+        }
+        return null
+      }
+      const cond = findConditional(ir)
+      expect(cond).not.toBeNull()
+      expect(cond.type).toBe('conditional')
+
+      const result = compileJSX(source, 'StatusDisplay.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!.content
+      expect(template).toContain('error')
+      expect(template).toContain('OK')
+      // Helper function should NOT appear verbatim — it's inlined
+      expect(template).not.toMatch(/function renderBadge/)
+
+      // Client JS should not contain the raw helper function with JSX
+      const clientJs = result.files.find(f => f.type === 'clientJs')
+      if (clientJs) {
+        expect(clientJs.content).not.toMatch(/function renderBadge/)
+      }
+    })
+
+    test('if/else if/else chain inlines to nested conditionals', () => {
+      const source = `
+        'use client'
+
+        export function Display(props: { level: string }) {
+          function renderLevel(lvl: string) {
+            if (lvl === 'high') return <span class="high">High</span>
+            if (lvl === 'mid') return <span class="mid">Mid</span>
+            return <span class="low">Low</span>
+          }
+
+          return <div>{renderLevel(props.level)}</div>
+        }
+      `
+
+      const result = compileJSX(source, 'Display.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!.content
+      expect(template).toContain('High')
+      expect(template).toContain('Mid')
+      expect(template).toContain('Low')
+      expect(template).not.toMatch(/function renderLevel/)
+    })
+
+    test('guard clause (early return null) is handled', () => {
+      const source = `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+
+        export function App() {
+          const [show, setShow] = createSignal(true)
+
+          function renderOptional(visible: boolean) {
+            if (!visible) return null
+            return <strong>Visible</strong>
+          }
+
+          return <div>{renderOptional(show())}</div>
+        }
+      `
+
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!.content
+      expect(template).toContain('Visible')
+      expect(template).not.toMatch(/function renderOptional/)
+    })
+
+    test('arrow function with multi-return is inlined', () => {
+      const source = `
+        'use client'
+
+        export function App(props: { type: string }) {
+          const renderIcon = (t: string) => {
+            if (t === 'star') return <span>★</span>
+            return <span>○</span>
+          }
+
+          return <div>{renderIcon(props.type)}</div>
+        }
+      `
+
+      const ctx = analyzeComponent(source, 'App.tsx')
+      expect(ctx.jsxMultiReturnFunctions.has('renderIcon')).toBe(true)
+
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!.content
+      expect(template).toContain('★')
+      expect(template).toContain('○')
+    })
+
+    test('param substitution works in both condition and branches', () => {
+      const source = `
+        'use client'
+
+        export function App(props: { name: string }) {
+          function greet(who: string) {
+            if (who === 'world') return <span>Hello World!</span>
+            return <span>Hi {who}!</span>
+          }
+
+          return <div>{greet(props.name)}</div>
+        }
+      `
+
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!.content
+      // The param 'who' should be replaced with 'props.name' in the condition
+      expect(template).toContain('props.name')
+      expect(template).not.toMatch(/\bwho\b/)
+    })
+
+    test('switch/case helper is inlined as nested conditional', () => {
+      const source = `
+        'use client'
+
+        export function App(props: { icon: string }) {
+          function renderIcon(name: string) {
+            switch (name) {
+              case 'home': return <span>🏠</span>
+              case 'star': return <span>⭐</span>
+              default: return <span>?</span>
+            }
+          }
+
+          return <div>{renderIcon(props.icon)}</div>
+        }
+      `
+
+      const ctx = analyzeComponent(source, 'App.tsx')
+      expect(ctx.jsxMultiReturnFunctions.has('renderIcon')).toBe(true)
+      const info = ctx.jsxMultiReturnFunctions.get('renderIcon')!
+      expect(info.branches).toHaveLength(2)
+      expect(info.fallback).not.toBeNull()
+      expect(info.switchDiscriminant).toBeDefined()
+
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!.content
+      expect(template).toContain('🏠')
+      expect(template).toContain('⭐')
+      expect(template).toContain('?')
+      expect(template).not.toMatch(/function renderIcon/)
+    })
+
+    test('switch with null default is handled', () => {
+      const source = `
+        'use client'
+
+        export function App(props: { status: string }) {
+          function renderStatus(s: string) {
+            switch (s) {
+              case 'ok': return <span class="ok">OK</span>
+              default: return null
+            }
+          }
+
+          return <div>{renderStatus(props.status)}</div>
+        }
+      `
+
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!.content
+      expect(template).toContain('OK')
+      expect(template).not.toMatch(/function renderStatus/)
+    })
+
+    test('switch with side-effect discriminant is NOT inlined', () => {
+      const source = `
+        'use client'
+
+        export function App() {
+          function getValue(): string { return 'a' }
+          function renderByValue(v: string) {
+            switch (getValue()) {
+              case 'a': return <span>A</span>
+              default: return <span>B</span>
+            }
+          }
+
+          return <div>{renderByValue('x')}</div>
+        }
+      `
+
+      const ctx = analyzeComponent(source, 'App.tsx')
+      // Should NOT be registered because discriminant is a call expression
+      expect(ctx.jsxMultiReturnFunctions.has('renderByValue')).toBe(false)
+    })
+
+    test('switch without default clause is NOT inlined', () => {
+      const source = `
+        'use client'
+
+        export function App(props: { icon: string }) {
+          function renderIcon(name: string) {
+            switch (name) {
+              case 'home': return <span>🏠</span>
+              case 'star': return <span>⭐</span>
+            }
+          }
+
+          return <div>{renderIcon(props.icon)}</div>
+        }
+      `
+
+      const ctx = analyzeComponent(source, 'App.tsx')
+      expect(ctx.jsxMultiReturnFunctions.has('renderIcon')).toBe(false)
+    })
+
+    test('if/else with trailing return does not overwrite else fallback', () => {
+      const source = `
+        'use client'
+
+        export function App(props: { mode: string }) {
+          function renderMode(m: string) {
+            if (m === 'a') return <span>A</span>
+            else return <span>B</span>
+          }
+
+          return <div>{renderMode(props.mode)}</div>
+        }
+      `
+
+      const result = compileJSX(source, 'App.tsx', { adapter })
+      expect(result.errors).toHaveLength(0)
+
+      const template = result.files.find(f => f.type === 'markedTemplate')!.content
+      // The else fallback should be <span>B</span>, not overwritten
+      expect(template).toContain('A')
+      expect(template).toContain('B')
+    })
+  })
 })

package/src/__tests__/loop-fallback-wrap.test.ts

@@ -110,9 +110,10 @@ describe('Solid-style wrap-by-default fallback for loops (#943)', () => {
     expect(clientJs).not.toMatch(/\breconcileList\s*\(/)
   })
 
-  test('static prop array stays static', () => {
-    // `items` is a non-destructured prop; the AST is just an
-    // Identifier, no calls. Should still take the static path.
+  test('prop array compiles to mapArray (#1586)', () => {
+    // `props.items` is a direct prop reference — props are always
+    // potentially reactive (parent may pass signal getters), so the
+    // loop must use mapArray for reconciliation.
     const source = `
       export function List(props: { items: string[] }) {
         return (
@@ -124,8 +125,7 @@ describe('Solid-style wrap-by-default fallback for loops (#943)', () => {
     `
 
     const clientJs = getClientJs(source, 'List.tsx')
-    expect(clientJs).not.toMatch(/\bmapArray\s*\(/)
-    expect(clientJs).not.toMatch(/\breconcileList\s*\(/)
+    expect(clientJs).toMatch(/\bmapArray\s*\(/)
   })
 
   test('unrecognised-call chain with filter now reconciles', () => {

package/src/__tests__/nested-loop-reactive-attrs.test.ts

@@ -64,7 +64,7 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
     // Both effects must run inside the inner mapArray's renderItem (so
     // they capture `task` as the inner-loop accessor — `task()` rather
     // than the module-level closure).
-    expect(content).toMatch(/createEffect\(\(\) => \{\s*const __v = styleToCss\([\s\S]*?task\(\)\.id/)
+    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?styleToCss\([\s\S]*?task\(\)\.id/)
   })
 
   test('non-style reactive attribute (className) wires up too', () => {
@@ -141,7 +141,7 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
 
     // `data-off` uses the truthy-check shape (no `__v != null` for this
     // attribute) so a concrete `false` removes the attribute.
-    expect(content).toMatch(/createEffect\(\(\) => \{ if \([^)]*c\(\)\.isOff[^)]*\)\s*[^.]+\.setAttribute\('data-off',\s*''\)/)
+    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?if \(c\(\)\.isOff\)\s*\S+\.setAttribute\('data-off',\s*''\)/)
     // aria-* keeps the explicit "true" value per WAI-ARIA.
     expect(content).toContain("setAttribute('aria-pressed', 'true')")
   })
@@ -234,7 +234,7 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
     // to subscribe to the per-item accessor). The bug we're locking
     // down is purely in the createEffect emission, so scope to that.
     const effectMatch = content.match(
-      /createEffect\(\(\) => \{ const __v = styleToCss\(\{[\s\S]*?\}\); if \(__v != null\) __ta_s\d+\.setAttribute\('style'/,
+      /createEffect\(\(\) => \{[\s\S]*?styleToCss\(\{[\s\S]*?\}\)[\s\S]*?__ta_s\d+\.setAttribute\('style'/,
     )
     expect(effectMatch).not.toBeNull()
     const effectBody = effectMatch![0]
@@ -283,7 +283,7 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
     expect(result.errors).toHaveLength(0)
     const content = result.files.find((f) => f.type === 'clientJs')!.content
     const effectMatch = content.match(
-      /createEffect\(\(\) => \{ const __v = styleToCss\(\{[\s\S]*?\}\); if \(__v != null\) __ta_s\d+\.setAttribute\('style'/,
+      /createEffect\(\(\) => \{[\s\S]*?styleToCss\(\{[\s\S]*?\}\)[\s\S]*?__ta_s\d+\.setAttribute\('style'/,
     )
     expect(effectMatch).not.toBeNull()
     const effectBody = effectMatch![0]

package/src/__tests__/props-type-mismatch.audit.test.ts

@@ -0,0 +1,100 @@
+/**
+ * BF031 `PROPS_TYPE_MISMATCH` deletion audit.
+ *
+ * BF031 was reserved for "Props type mismatch" but was never emitted.
+ * TypeScript's own type-checking catches props type mismatches at the
+ * language level (e.g., passing a string where a number is expected).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import ts from 'typescript'
+import path from 'path'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { ErrorCodes } from '../errors'
+
+function compileToIR(source: string) {
+  const ctx = analyzeComponent(source, '/tmp/Test.tsx')
+  const ir = jsxToIR(ctx)
+  return { ctx, ir, errors: ctx.errors }
+}
+
+function getSemanticDiagnostics(source: string) {
+  const baseDir = path.resolve(__dirname)
+  const filePath = path.join(baseDir, '_props-mismatch-virtual.tsx')
+
+  const virtualFiles = new Map<string, string>()
+  virtualFiles.set(filePath, source)
+
+  const compilerOptions: ts.CompilerOptions = {
+    target: ts.ScriptTarget.Latest,
+    module: ts.ModuleKind.ESNext,
+    moduleResolution: ts.ModuleResolutionKind.Bundler,
+    jsx: ts.JsxEmit.ReactJSX,
+    jsxImportSource: 'react',
+    strict: true,
+    noEmit: true,
+    skipLibCheck: true,
+  }
+
+  const defaultHost = ts.createCompilerHost(compilerOptions)
+
+  const host: ts.CompilerHost = {
+    ...defaultHost,
+    getSourceFile(fileName, languageVersion) {
+      const resolved = path.resolve(fileName)
+      const content = virtualFiles.get(resolved)
+      if (content !== undefined) {
+        return ts.createSourceFile(fileName, content, languageVersion, true)
+      }
+      return defaultHost.getSourceFile(fileName, languageVersion)
+    },
+    fileExists(fileName) {
+      const resolved = path.resolve(fileName)
+      if (virtualFiles.has(resolved)) return true
+      return defaultHost.fileExists(fileName)
+    },
+    readFile(fileName) {
+      const resolved = path.resolve(fileName)
+      const content = virtualFiles.get(resolved)
+      if (content !== undefined) return content
+      return defaultHost.readFile(fileName)
+    },
+  }
+
+  const program = ts.createProgram([filePath], compilerOptions, host)
+  return program.getSemanticDiagnostics(program.getSourceFile(filePath)!)
+}
+
+describe('BF031 PROPS_TYPE_MISMATCH — deletion audit', () => {
+  test('correct props compile without errors', () => {
+    const src = `
+interface Props { count: number; label: string }
+export function Display(props: Props) {
+  return <div>{props.label}: {props.count}</div>
+}
+`
+    const { errors } = compileToIR(src)
+    expect(errors).toHaveLength(0)
+  })
+
+  test('TypeScript catches props type mismatches', () => {
+    const src = `
+function Child(props: { count: number }) {
+  return <div>{props.count}</div>
+}
+export function Parent() {
+  return <Child count={"not a number"} />
+}
+`
+    const diagnostics = getSemanticDiagnostics(src)
+    expect(diagnostics.length).toBeGreaterThanOrEqual(1)
+    const messages = diagnostics.map(d => ts.flattenDiagnosticMessageText(d.messageText, '\n'))
+    expect(messages.some(m => m.includes('number') || m.includes('not assignable'))).toBe(true)
+  })
+
+  test('BF031 code no longer exists in ErrorCodes', () => {
+    const allCodes = Object.values(ErrorCodes)
+    expect(allCodes).not.toContain('BF031')
+  })
+})

package/src/__tests__/staged-ir/10-stage-diagnostics.test.ts

@@ -16,7 +16,7 @@
  *
  * BF060: signal/memo getter referenced from template scope
  * BF061: init-scope local referenced from template scope
- * BF062: cross-stage await — emitted at Phase 1 dispatcher (not here)
+ * BF062: cross-stage await — emitted at Phase 1 dispatcher (jsx-to-ir.ts)
  */
 
 import { describe, test, expect } from 'bun:test'
@@ -24,7 +24,7 @@ import { ErrorCodes } from '../../errors'
 import { recordStageDiagnostics } from '../../ir-to-client-js/compute-inlinability'
 import type { ConstantInfo, CompilerError } from '../../types'
 import type { RelocateDecision } from '../../relocate'
-import { compile } from './helpers'
+import { compile, expectValidJs } from './helpers'
 
 const dummyLoc = {
   file: 'Test.tsx',
@@ -622,3 +622,84 @@ describe('compileJSX surfaces stage-violation diagnostics by default', () => {
     expect(errors.find(e => e.startsWith('[BF061]'))).toBeUndefined()
   })
 })
+
+describe('BF062: AwaitExpression in template scope', () => {
+  test('await in JSX child position emits BF062', () => {
+    const { errors } = compile(`
+      'use client'
+
+      interface Props {}
+
+      export async function Foo(_props: Props) {
+        const result = await fetch('/api')
+        return <div>{await result.json()}</div>
+      }
+    `)
+
+    const bf062 = errors.find(e => e.startsWith('[BF062]'))
+    expect(bf062).toBeDefined()
+    expect(bf062).toContain('AwaitExpression')
+  })
+
+  test('await in component body (not JSX) does NOT emit BF062', () => {
+    const { errors } = compile(`
+      'use client'
+
+      interface Props {}
+
+      export async function Foo(_props: Props) {
+        const data = await fetch('/api')
+        return <div>loaded</div>
+      }
+    `)
+
+    expect(errors.find(e => e.startsWith('[BF062]'))).toBeUndefined()
+  })
+
+  test('await in JSX attribute position emits BF062', () => {
+    const { errors } = compile(`
+      'use client'
+
+      interface Props {}
+
+      export async function Foo(_props: Props) {
+        return <div data-x={await fetch('/api')}>hi</div>
+      }
+    `)
+
+    const bf062 = errors.find(e => e.startsWith('[BF062]'))
+    expect(bf062).toBeDefined()
+  })
+
+  test('emitted client JS remains parseable after BF062', () => {
+    const { errors, clientJs } = compile(`
+      'use client'
+
+      interface Props {}
+
+      export async function Foo(_props: Props) {
+        const result = await fetch('/api')
+        return <div>{await result.json()}</div>
+      }
+    `)
+
+    expect(errors.find(e => e.startsWith('[BF062]'))).toBeDefined()
+    expectValidJs(clientJs)
+  })
+
+  test('nested await inside scalar expression emits BF062', () => {
+    const { errors, clientJs } = compile(`
+      'use client'
+
+      interface Props {}
+
+      export async function Foo(_props: Props) {
+        return <div>{String(await fetch('/api'))}</div>
+      }
+    `)
+
+    const bf062 = errors.find(e => e.startsWith('[BF062]'))
+    expect(bf062).toBeDefined()
+    expectValidJs(clientJs)
+  })
+})

package/src/__tests__/static-loop-csr-materialize.test.ts

@@ -77,9 +77,10 @@ describe('#1247 — static-loop CSR self-heal', () => {
     expect(clientJs).not.toMatch(/if \(!__iterEl\)/)
   })
 
-  test('safe-prop array (no init-scope local) does NOT emit the branch', () => {
-    // `props.items` is directly usable in the CSR template — no fallback
-    // needed.
+  test('direct prop array uses mapArray, not static forEach (#1586)', () => {
+    // `props.items` is a direct prop reference — props are always
+    // potentially reactive, so the compiler promotes to mapArray.
+    // mapArray handles CSR mount natively (no materialize needed).
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -94,7 +95,8 @@ describe('#1247 — static-loop CSR self-heal', () => {
       }
     `
     const clientJs = getClientJs(source, 'PropList.tsx')
-    expect(clientJs).not.toMatch(/if \(!__iterEl\)/)
+    expect(clientJs).toMatch(/\bmapArray\s*\(/)
+    expect(clientJs).not.toMatch(/\.forEach\s*\(/)
   })
 
   test('materialize branch uses raw destructured param refs (no __bfItem())', () => {