@barefootjs/jsx 0.17.0 → 0.18.0

package/src/__tests__/ir-sort-comparator.test.ts

@@ -382,3 +382,264 @@ describe('sort().map() / toSorted().map()', () => {
     }
   })
 })
+
+// #2090: `.sort(cb)` / `.toSorted(cb)` where `cb` is a bare identifier
+// reference to a same-file arrow/function-declaration comparator, resolved
+// through the analyzer's scope machinery (`findLocalConst` /
+// `findLocalFunction` in jsx-to-ir.ts) one hop, then fed through the SAME
+// `sortComparatorFromArrow` catalogue as an inline comparator — no new
+// comparator shapes, no IR schema change.
+describe('function-reference sort comparator (#2090)', () => {
+  test('const arrow reference, ascending', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        const byPrice = (a, b) => a.price - b.price
+        return (
+          <ul>
+            {products().sort(byPrice).map(p => (
+              <li key={p.name}>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      expect(loop).toBeDefined()
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        expect(sortComparatorFromArrow(loop.sortComparator!.arrow)!.keys).toEqual([
+          { key: { kind: 'field', field: 'price' }, type: 'numeric', direction: 'asc' },
+        ])
+        expect(loop.sortComparator!.paramA).toBe('a')
+        expect(loop.sortComparator!.paramB).toBe('b')
+        expect(loop.sortComparator!.raw).toBe('a.price - b.price')
+        expect(loop.array).toBe('products()')
+      }
+    }
+  })
+
+  test('const arrow reference, descending multi-key (||-chain)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        const byPriceThenName = (a, b) => b.price - a.price || a.name.localeCompare(b.name)
+        return (
+          <ul>
+            {products().sort(byPriceThenName).map(p => (
+              <li key={p.name}>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        expect(sortComparatorFromArrow(loop.sortComparator!.arrow)!.keys).toEqual([
+          { key: { kind: 'field', field: 'price' }, type: 'numeric', direction: 'desc' },
+          { key: { kind: 'field', field: 'name' }, type: 'string', direction: 'asc' },
+        ])
+        expect(loop.sortComparator!.raw).toBe('b.price - a.price || a.name.localeCompare(b.name)')
+      }
+    }
+  })
+
+  test('function-declaration reference with return-block body', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function byPrice(a, b) {
+        return a.price - b.price
+      }
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        return (
+          <ul>
+            {products().sort(byPrice).map(p => (
+              <li key={p.name}>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        expect(sortComparatorFromArrow(loop.sortComparator!.arrow)!.keys).toEqual([
+          { key: { kind: 'field', field: 'price' }, type: 'numeric', direction: 'asc' },
+        ])
+        expect(loop.sortComparator!.paramA).toBe('a')
+        expect(loop.sortComparator!.paramB).toBe('b')
+        expect(loop.sortComparator!.raw).toBe('a.price - b.price')
+      }
+    }
+  })
+
+  test('.toSorted(ref) resolves the same way as .sort(ref)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        const byPrice = (a, b) => a.price - b.price
+        return (
+          <ul>
+            {products().toSorted(byPrice).map(p => (
+              <li key={p.name}>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        expect(sortComparatorFromArrow(loop.sortComparator!.arrow)!.keys).toEqual([
+          { key: { kind: 'field', field: 'price' }, type: 'numeric', direction: 'asc' },
+        ])
+      }
+    }
+  })
+
+  test('component-scope const shadows a module-scope const of the same name', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      const byPrice = (a, b) => a.price - b.price
+
+      export function ProductList() {
+        const [products, setProducts] = createSignal<any[]>([])
+        const byPrice = (a, b) => b.price - a.price
+        return (
+          <ul>
+            {products().sort(byPrice).map(p => (
+              <li key={p.name}>{p.name}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'ProductList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.sortComparator).toBeDefined()
+        // The component-scope binding (descending) wins over the
+        // module-scope one (ascending) — distinguishable via `direction`.
+        expect(sortComparatorFromArrow(loop.sortComparator!.arrow)!.keys).toEqual([
+          { key: { kind: 'field', field: 'price' }, type: 'numeric', direction: 'desc' },
+        ])
+        expect(loop.sortComparator!.raw).toBe('b.price - a.price')
+      }
+    }
+  })
+
+  test('filter().sort(ref).map() resolves the reference in a chain', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function TodoList() {
+        const [todos, setTodos] = createSignal<any[]>([])
+        const byPriority = (a, b) => a.priority - b.priority
+        return (
+          <ul>
+            {todos().filter(t => !t.done).sort(byPriority).map(t => (
+              <li key={t.text}>{t.text}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'TodoList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.filterPredicate).toBeDefined()
+        expect(loop.sortComparator).toBeDefined()
+        expect(loop.chainOrder).toBe('filter-sort')
+        expect(sortComparatorFromArrow(loop.sortComparator!.arrow)!.keys).toEqual([
+          { key: { kind: 'field', field: 'priority' }, type: 'numeric', direction: 'asc' },
+        ])
+      }
+    }
+  })
+
+  test('sort(ref).filter().map() resolves the reference in a chain', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function TodoList() {
+        const [todos, setTodos] = createSignal<any[]>([])
+        const byPriority = (a, b) => a.priority - b.priority
+        return (
+          <ul>
+            {todos().sort(byPriority).filter(t => !t.done).map(t => (
+              <li key={t.text}>{t.text}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'TodoList.tsx')
+    const ir = jsxToIR(ctx)
+
+    expect(ir).not.toBeNull()
+    if (ir!.type === 'element') {
+      const loop = ir!.children.find(c => c.type === 'loop')
+      if (loop?.type === 'loop') {
+        expect(loop.filterPredicate).toBeDefined()
+        expect(loop.sortComparator).toBeDefined()
+        expect(loop.chainOrder).toBe('sort-filter')
+        expect(sortComparatorFromArrow(loop.sortComparator!.arrow)!.keys).toEqual([
+          { key: { kind: 'field', field: 'priority' }, type: 'numeric', direction: 'asc' },
+        ])
+      }
+    }
+  })
+})

package/src/__tests__/loop-destructure.test.ts

@@ -0,0 +1,313 @@
+/**
+ * Tests for #2087 Phase A: `isLowerableLoopDestructure` (née
+ * `isLowerableObjectRestDestructure`) — the gate template adapters use to
+ * decide whether a `.map()` callback's destructure param can be lowered
+ * natively, versus falling back to the BF104 diagnostic.
+ *
+ * Compiles a small component to IR (`analyzeComponent` + `jsxToIR`, the same
+ * helper pattern as `ir-sort-comparator.test.ts`), locates the `IRLoop`
+ * node, and asserts the gate's verdict plus (where relevant) the structured
+ * `segments` path each binding carries.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { isLowerableLoopDestructure, isLowerableObjectRestDestructure } from '../loop-destructure'
+import { ErrorCodes } from '../errors'
+import type { IRLoop, IRNode } from '../types'
+
+function findFirstLoop(node: IRNode): IRLoop {
+  if (node.type === 'loop') return node
+  if (node.type === 'element' || node.type === 'fragment') {
+    for (const child of node.children) {
+      if (child.type === 'loop') return child
+      if (child.type === 'element' || child.type === 'fragment') {
+        try {
+          return findFirstLoop(child)
+        } catch {
+          // keep scanning siblings
+        }
+      }
+    }
+  }
+  throw new Error('no loop node found in IR')
+}
+
+function compileLoop(
+  source: string,
+  targetComponentName?: string,
+  filename = 'Test.tsx',
+): { loop: IRLoop; errors: ReturnType<typeof analyzeComponent>['errors'] } {
+  const ctx = analyzeComponent(source, filename, targetComponentName)
+  const ir = jsxToIR(ctx)
+  expect(ir).not.toBeNull()
+  return { loop: findFirstLoop(ir!), errors: ctx.errors }
+}
+
+describe('isLowerableLoopDestructure (#2087)', () => {
+  test('simple .field bindings + object-rest read via member access → true (existing behavior)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      export function RestObject() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().map(({ id, title, ...rest }) => (
+              <li key={id}>{title}:{rest.flag}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('array-index tuple destructure ([k, v]) → true (NEW)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Row = readonly [string, string]
+      export function IndexPairs() {
+        const [rows, setRows] = createSignal<Row[]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(([k, v]) => (
+              <li key={k}>{k}:{v}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('nested { id, cells: [head] } → true (NEW)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Row = { id: string; cells: readonly string[] }
+      export function NestedHead() {
+        const [rows, setRows] = createSignal<Row[]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(({ id, cells: [head] }) => (
+              <li key={id}>{head}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('array-rest [first, ...tail] with tail.length read → true (NEW)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function RestTuple() {
+        const [rows, setRows] = createSignal<string[][]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(([first, ...tail]) => (
+              <li key={first}>{first} (+{tail.length})</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('object-rest {...rest} spread onto the loop-item root <li> → true (NEW)', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      export function RestSpread() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().map(({ id, title, ...rest }) => (
+              <li key={id} {...rest}>{title}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(true)
+  })
+
+  test('object-rest spread on a COMPONENT (<Child {...rest} />) → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      function Child(props: { title: string; flag: string }) {
+        return <span>{props.title}</span>
+      }
+      export function RestOntoComponent() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().map(({ id, ...rest }) => (
+              <li key={id}><Child {...rest} /></li>
+            ))}
+          </ul>
+        )
+      }
+    `, 'RestOntoComponent')
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('object-rest bare value use in a text expression ({String(rest)}) → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      export function RestBareText() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().map(({ id, ...rest }) => (
+              <li key={id}>{String(rest)}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('object-rest bare value use in an event handler (onClick={() => fn(rest)}) → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; title: string; flag: string }
+      export function RestBareHandler() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        const fn = (t: unknown) => {}
+        return (
+          <ul>
+            {tasks().map(({ id, ...rest }) => (
+              <li key={id} onClick={() => fn(rest)}>{id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('.filter(...).map(({a}) => ...) chain → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Task = { id: string; done: boolean }
+      export function FilterChain() {
+        const [tasks, setTasks] = createSignal<Task[]>([])
+        return (
+          <ul onClick={() => setTasks(t => t)}>
+            {tasks().filter(t => !t.done).map(({ id }) => (
+              <li key={id}>{id}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('binding named __bf_item → false', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function ReservedName() {
+        const [rows, setRows] = createSignal<{ __bf_item: string }[]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(({ __bf_item }) => (
+              <li key={__bf_item}>{__bf_item}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('computed property key still raises BF025 and produces no paramBindings (unchanged)', () => {
+    const { loop, errors } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      const KEY = 'a' as const
+      export function Computed() {
+        const [items, setItems] = createSignal<Record<string, number>[]>([])
+        return (
+          <ul onClick={() => setItems(i => i)}>
+            {items().map(({ [KEY]: v }) => <li key={v}>{v}</li>)}
+          </ul>
+        )
+      }
+    `)
+    const bf025 = errors.filter(e => e.code === ErrorCodes.UNSUPPORTED_DESTRUCTURE_REST)
+    expect(bf025.length).toBe(1)
+    expect(bf025[0].severity).toBe('error')
+    expect(loop.paramBindings).toBeUndefined()
+    expect(isLowerableLoopDestructure(loop)).toBe(false)
+  })
+
+  test('deprecated alias isLowerableObjectRestDestructure is the same function', () => {
+    expect(isLowerableObjectRestDestructure).toBe(isLowerableLoopDestructure)
+  })
+
+  test('segments: nested { id, cells: [head, ...rest] } pins field/index/non-ident classification', () => {
+    const { loop } = compileLoop(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Row = { id: string; cells: readonly string[]; 'data-priority': string }
+      export function NestedSegments() {
+        const [rows, setRows] = createSignal<Row[]>([])
+        return (
+          <ul onClick={() => setRows(r => r)}>
+            {rows().map(({ id, cells: [head, ...rest], 'data-priority': prio }) => (
+              <li key={id}>{head}:{String(rest.length)}:{prio}</li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+    const bindings = loop.paramBindings
+    expect(bindings).toBeDefined()
+
+    const idBinding = bindings!.find(b => b.name === 'id')
+    expect(idBinding?.segments).toEqual([{ kind: 'field', key: 'id', isIdent: true }])
+
+    const headBinding = bindings!.find(b => b.name === 'head')
+    expect(headBinding?.segments).toEqual([
+      { kind: 'field', key: 'cells', isIdent: true },
+      { kind: 'index', index: 0 },
+    ])
+
+    const restBinding = bindings!.find(b => b.name === 'rest')
+    expect(restBinding?.rest?.kind).toBe('array')
+    expect(restBinding?.segments).toEqual([{ kind: 'field', key: 'cells', isIdent: true }])
+
+    const prioBinding = bindings!.find(b => b.name === 'prio')
+    expect(prioBinding?.segments).toEqual([{ kind: 'field', key: 'data-priority', isIdent: false }])
+  })
+})