@barefootjs/jsx 0.17.1 → 0.18.0

package/src/__tests__/csr-substitution-safety-divergence.test.ts

@@ -0,0 +1,137 @@
+/**
+ * Regression tests for #2106: the templatePrimitives V2 widening (#2069)
+ * let a call whose RAW callee is an identifier path
+ * (`someModuleArray.includes(prop)`) pass `computeInlinability`'s Stage-2
+ * classification (`classifyConstantInitial`, compute-inlinability.ts) —
+ * e.g. via an adapter with a broad `acceptsTemplateCall` (Hono's SSR
+ * runtime is a full JS engine, so it accepts any identifier-path callee).
+ * That check runs on the RAW initializer text so it can still see
+ * bridged prop args for the #1138 rejection.
+ *
+ * `populateCsrInlinable` (compute-inlinability.ts) re-runs the same
+ * `isInlinableInTemplate` check on the CSR-*substituted* form, where the
+ * module-scope array has already been literal-inlined
+ * (`['plus','minus'].includes(name)`). The callee is no longer an
+ * identifier path at all, so the adapter can't vouch for it, and the
+ * bridged-arg rejection correctly fires — recorded as
+ * `ctx.csrInlinable.get(name) === null`.
+ *
+ * Pre-fix, `unsafeLocalNames` (Stage-2-derived) didn't know about this
+ * second, stricter refusal, so the CSR template emitter
+ * (`generateCsrTemplate` / `transformExpr` in html-template.ts) found
+ * neither a substitution (excluded by `csrInlinableConstantsFromCtx`,
+ * which skips null entries) NOR an unsafe flag — the bare,
+ * module-scope-invisible identifier leaked straight into the emitted
+ * template text, throwing `ReferenceError` when the template function
+ * actually ran. This is the same bug class (and same shape) as the real
+ * repro in `ui/components/ui/icon`'s `linecap` constant.
+ *
+ * Fix: `generateCsrTemplate` (html-template.ts) folds `ctx.csrInlinable`'s
+ * null verdicts into the unsafe-name set it uses internally
+ * (`mergeCsrNullUnsafe`), so a name `populateCsrInlinable` refused is
+ * always treated as unsafe at the CSR template layer, regardless of what
+ * the looser Stage-2 check concluded elsewhere.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { HonoAdapter } from '../../../adapter-hono/src/adapter/hono-adapter'
+import { extractTemplateBody } from './staged-ir/helpers'
+import { RUNTIME_IMPORT_CANDIDATES } from '../ir-to-client-js/imports'
+
+const onlyErrors = (errors: { severity?: string }[]) =>
+  errors.filter((e) => e.severity === 'error')
+
+/**
+ * Compile `source` with `HonoAdapter` (broad `acceptsTemplateCall`, the
+ * ingredient the real bug needs) and extract the CSR template's
+ * back-tick body.
+ */
+function compileTemplateBody(source: string, fileName: string): { templateBody: string; clientJs: string; errors: string[] } {
+  const result = compileJSX(source, fileName, { adapter: new HonoAdapter() })
+  expect(onlyErrors(result.errors)).toHaveLength(0)
+  const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+  return { templateBody: extractTemplateBody(clientJs), clientJs, errors: result.errors.map((e) => e.code) }
+}
+
+/**
+ * Evaluate an extracted CSR template body as a real template-literal
+ * function, with every runtime helper the compiler might reference
+ * stubbed out. Mirrors what `hydrate()` does at runtime, minus the DOM.
+ */
+function evalTemplate(templateBody: string, props: Record<string, unknown>): string {
+  const helperNames = [...RUNTIME_IMPORT_CANDIDATES]
+  const stubs = helperNames.map((name) => {
+    if (name === 'escapeAttr' || name === 'escapeText' || name === 'styleToCss') {
+      return (v: unknown) => String(v)
+    }
+    return (..._args: unknown[]) => ''
+  })
+  // eslint-disable-next-line no-new-func
+  const fn = new Function('_p', ...helperNames, `return \`${templateBody}\``)
+  return fn(props, ...stubs)
+}
+
+describe('CSR template: Stage-2 / post-substitution inline-safety divergence (#2106)', () => {
+  test('a const whose RAW form is adapter-accepted but whose CSR-substituted form is refused falls back to undefined, not a bare identifier', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      const buttLinecapIcons = ['plus', 'minus']
+
+      export function CsrNullDivergence({ name }: { name: string }) {
+        const [count] = createSignal(0)
+        const linecap = (buttLinecapIcons).includes(name) ? 'butt' : 'round'
+        return <div data-linecap={linecap}>{count()}</div>
+      }
+    `
+    const { templateBody } = compileTemplateBody(source, 'CsrNullDivergence.tsx')
+
+    // (a) No bare `linecap` identifier anywhere in the template body.
+    // Excludes the HTML attribute name text `data-linecap="` (preceded by
+    // `-`, not a real identifier reference) from the check.
+    expect(templateBody).not.toMatch(/(?<![-.\w$])linecap(?![\w$])/)
+
+    // (c) The fallback is the spec'd null-guarded `undefined` shape
+    // (`(undefined) != null ? '...' : ''`), the same fallback every other
+    // unsafe-template-scope reference degrades to (html-template.ts's
+    // `templateAttrExpr` generic path).
+    expect(templateBody).toMatch(/\(undefined\)\s*!=\s*null/)
+
+    // (b) Evaluating the template with stub runtime helpers must not
+    // throw `ReferenceError: linecap is not defined` — the pre-fix
+    // manifestation of this bug.
+    let rendered = ''
+    expect(() => { rendered = evalTemplate(templateBody, { name: 'plus', size: 'md', className: '' }) }).not.toThrow()
+
+    // The dropped-attribute fallback: SSR/CSR-initial HTML omits the
+    // attribute entirely rather than emitting a bogus value.
+    expect(rendered).not.toContain('linecap=')
+  })
+
+  test('control: a plain object-literal lookup (no call involved) still inlines through the same CSR path', () => {
+    // Guards against over-suppression: the fix must only affect names
+    // `ctx.csrInlinable` actually refused (`=== null`), not every const
+    // whose value happens to reference a module-scope constant.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      const sizeMap: Record<string, string> = { sm: 'h-4', md: 'h-6' }
+
+      export function CsrStillInlines({ size }: { size: string }) {
+        const [count] = createSignal(0)
+        const cls = sizeMap[size]
+        return <div data-cls={cls}>{count()}</div>
+      }
+    `
+    const { templateBody } = compileTemplateBody(source, 'CsrStillInlines.tsx')
+
+    // No bare `cls` identifier left in the template — it was inlined.
+    expect(templateBody).not.toMatch(/(?<![-.\w$])cls(?![\w$])/)
+    // The module-scope object literal was substituted in place of `sizeMap`,
+    // and the prop was correctly bridged to `_p.size` — not marked unsafe.
+    expect(templateBody).toContain(`{ sm: 'h-4', md: 'h-6' })[_p.size]`)
+    expect(templateBody).not.toContain('undefined')
+  })
+})

package/src/__tests__/destructured-map-params.test.ts

@@ -51,7 +51,17 @@ describe('destructured .map() param rewriting (#951)', () => {
     // Binding references rewritten to accessor paths
     expect(js).toContain('__bfItem().label')
     expect(js).toContain('__bfItem().done')
-    expect(js).toContain('__bfItem().id')
+    // `id` is referenced ONLY via `key={id}` in this fixture. The loop's
+    // `keyFn` argument to `mapArray` evaluates against the raw destructured
+    // item (before per-item signal wrapping) — `({ id, label, done }) =>
+    // String(id)` — so `id` never needs the `__bfItem()` accessor rewrite at
+    // all; `mapArray` stamps the real `data-key` from that keyFn onto every
+    // freshly created element itself (see `map-array.ts`). The hoisted
+    // shared-template fast path (perf) therefore omits the key interpolation
+    // from the once-per-loop skeleton (`data-key=""` placeholder) rather than
+    // baking a `__bfItem().id` reference into it — no `__bfItem().id`
+    // occurrence anywhere is the CORRECT, not incomplete, output here.
+    expect(js).toContain('({ id, label, done }) => String(id)')
   })
 
   test('tuple destructure with hole: references become __bfItem()[index]', () => {

package/src/__tests__/expression-parser.test.ts

@@ -1325,6 +1325,45 @@ describe('expression-parser', () => {
       expect(result.level).toBe('L4')
     })
 
+    // #2087: `x ?? {}` — the chart component's `<Ctx.Provider value={{
+    // config: props.config ?? {} }}>` needs an EMPTY object-literal fallback
+    // operand admitted, narrowly, as the right side of `??` only.
+    test('L4: nullish coalescing with an EMPTY object-literal fallback is supported (#2087)', () => {
+      const expr = parseExpression('props.config ?? {}')
+      expect(expr.kind).toBe('logical')
+      const result = isSupported(expr)
+      expect(result.supported).toBe(true)
+      expect(result.level).toBe('L4')
+    })
+
+    test('a NON-EMPTY object-literal fallback of `??` is still refused (#2087 scope)', () => {
+      const expr = parseExpression('props.config ?? ({ a: 1 })')
+      expect(expr.kind).toBe('logical')
+      const result = isSupported(expr)
+      expect(result.supported).toBe(false)
+    })
+
+    test('an empty object-literal fallback of `&&` / `||` is still refused — #2087 scopes the relaxation to `??` only', () => {
+      expect(isSupported(parseExpression('props.config && ({})')).supported).toBe(false)
+      expect(isSupported(parseExpression('props.config || ({})')).supported).toBe(false)
+    })
+
+    test('a standalone (non-fallback) object literal is still refused', () => {
+      const expr = parseExpression('({})')
+      const result = isSupported(expr)
+      expect(result.supported).toBe(false)
+      expect(result.reason).toBe('Unsupported syntax: ObjectLiteralExpression')
+    })
+
+    test('an empty object-literal on the LEFT of `??` does not trigger the fallback relaxation', () => {
+      // The relaxation only inspects `expr.right`; a left-hand object
+      // literal has no fallback role and stays refused via the general
+      // `checkSupport(expr.left)` refusal.
+      const expr = parseExpression('({}) ?? props.config')
+      const result = isSupported(expr)
+      expect(result.supported).toBe(false)
+    })
+
     test('L5: filter() with simple predicate IS supported', () => {
       const expr = parseExpression('items().filter(x => x.done)')
       const result = isSupported(expr)
@@ -1700,14 +1739,30 @@ describe('expression-parser — .flat(depth?) lowering (#1448 Tier C)', () => {
     })
   }
 
-  test('non-literal depth refuses (must be resolvable at template time)', () => {
+  test('a non-literal depth that itself resolves becomes a DYNAMIC depth (#2094)', () => {
+    // `n` parses to a supported `identifier` — the depth isn't known until
+    // render time, but it's still an EXPRESSIBLE one, so it's accepted as a
+    // dynamic depth (`depthExpr`) instead of refusing.
     const result = parseExpression('arr.flat(n)')
+    expect(result.kind).toBe('array-method')
+    if (result.kind === 'array-method' && result.method === 'flat') {
+      expect(result.depthExpr).toEqual({ kind: 'identifier', name: 'n' })
+    } else {
+      throw new Error(`expected a flat array-method, got ${result.kind}`)
+    }
+    // An arithmetic / member-access depth resolves too.
+    expect(parseExpression('arr.flat(depth + 1)').kind).toBe('array-method')
+    expect(parseExpression('arr.flat(props.depth)').kind).toBe('array-method')
+  })
+
+  test('a non-literal depth that itself does NOT resolve still refuses', () => {
+    const result = parseExpression('arr.flat(a instanceof B)')
     expect(result.kind).toBe('unsupported')
     if (result.kind === 'unsupported') {
       // Wrong remedy `@client` must not be suggested (doesn't work in
       // attribute / condition position).
       expect(result.reason).not.toContain('@client')
-      expect(result.reason).toContain('literal')
+      expect(result.reason).toContain('resolved')
     }
   })
 
@@ -1719,6 +1774,12 @@ describe('expression-parser — .flat(depth?) lowering (#1448 Tier C)', () => {
     expect(exprToString(parseExpression('arr.flat(Infinity)'))).toBe('arr.flat(Infinity)')
     expect(exprToString(parseExpression('arr.flat(0)'))).toBe('arr.flat(0)')
   })
+
+  test('exprToString / stringifyParsedExpr round-trip a dynamic depth (#2094)', () => {
+    expect(exprToString(parseExpression('arr.flat(n)'))).toBe('arr.flat(n)')
+    expect(stringifyParsedExpr(parseExpression('arr.flat(n)'))).toBe('arr.flat(n)')
+    expect(stringifyParsedExpr(parseExpression('arr.flat(depth + 1)'))).toBe('arr.flat(depth + 1)')
+  })
 })
 
 describe('expression-parser — .flatMap(fn) projection (#1448 Tier C)', () => {

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' },
+        ])
+      }
+    }
+  })
+})