@barefootjs/jsx 0.18.5 → 0.19.0

package/src/__tests__/loop-bound-names.test.ts

@@ -0,0 +1,102 @@
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { collectLoopBoundNames } from '../adapters/loop-bound-names'
+import type { ComponentIR } from '../types'
+
+// #2212 (Fable review): `collectLoopBoundNames` finds every name a loop
+// callback binds as its item/index parameter, so each adapter's
+// `collectStringValueNames` can exclude it from string-concat detection —
+// a loop param shadowing an outer string-typed binding of the same name
+// must never be misdetected as string-typed.
+describe('collectLoopBoundNames (#2212)', () => {
+  // `collectLoopBoundNames` only reads `.root`; the rest of `ComponentIR`
+  // is irrelevant to this walk, so a minimal stand-in is fine here.
+  function ir(source: string): ComponentIR {
+    const ctx = analyzeComponent(source, 'Test.tsx')
+    const root = jsxToIR(ctx)
+    if (!root) throw new Error('expected IR')
+    return { version: '0.1', metadata: {} as ComponentIR['metadata'], root, errors: [] }
+  }
+
+  test('a component with no loops has no bound names', () => {
+    const component = ir(`
+      function Test() { return <div>hi</div> }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component).size).toBe(0)
+  })
+
+  test('a simple loop param is bound', () => {
+    const component = ir(`
+      function Test({ items }: { items: string[] }) {
+        return <ul>{items.map(name => <li key={name}>{name}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['name']))
+  })
+
+  test('both item and index params are bound', () => {
+    const component = ir(`
+      function Test({ items }: { items: string[] }) {
+        return <ul>{items.map((name, idx) => <li key={idx}>{name}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['name', 'idx']))
+  })
+
+  test('nested loops contribute all their params', () => {
+    const component = ir(`
+      function Test({ groups }: { groups: { label: string; items: string[] }[] }) {
+        return <div>{groups.map(group => <ul key={group.label}>{group.items.map(item => <li key={item}>{item}</li>)}</ul>)}</div>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['group', 'item']))
+  })
+
+  test('a loop body wrapping a child component still contributes its param', () => {
+    const component = ir(`
+      import { Row } from './row'
+      function Test({ items }: { items: string[] }) {
+        return <ul>{items.map(item => <Row key={item} label={item} />)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['item']))
+  })
+
+  // Fable re-review (#2212): `param` holds the raw pattern text for a
+  // destructured callback (`"{ name }"`), not the bound name itself — the
+  // real bound names live in `paramBindings`. Adapters that lower a
+  // destructure to a `{% set name = __bf_item.name %}`-style local (#2087)
+  // leave `name` reachable as a bare identifier in the loop body, so it
+  // needs the same exclusion as a plain loop param. `node.param`'s raw
+  // pattern text still ends up in the set too (added unconditionally,
+  // before this arm existed) — harmless noise, since it can never collide
+  // with a real identifier name.
+  test('a destructured loop param contributes its extracted binding names', () => {
+    const component = ir(`
+      function Test({ rows }: { rows: { name: string }[] }) {
+        return <ul>{rows.map(({ name }) => <li key={name}>{name}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['{ name }', 'name']))
+  })
+
+  // Fable re-review (#2212): a `.filter(pred).map(cb)` chain's filter
+  // predicate is emitted through the same binary/string-name machinery
+  // using its OWN param, which may differ from the map callback's `param`.
+  test('a filter().map() chain contributes both the filter predicate param and the map param', () => {
+    const component = ir(`
+      function Test({ values }: { values: number[] }) {
+        return <ul>{values.filter(n => n > 3).map(v => <li key={v}>{v}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['n', 'v']))
+  })
+})

package/src/__tests__/loop-plan-classification.test.ts

@@ -92,6 +92,7 @@ describe('buildLoopPlan decision tree (#1253)', () => {
             kind: 'nested',
             array: 'item.subs',
             param: 'sub',
+            index: null,
             key: null,
             markerId: 'inner-m1',
             template: '<span></span>',
@@ -161,6 +162,7 @@ describe('buildLoopPlan decision tree (#1253)', () => {
             kind: 'nested',
             array: 'item.subs',
             param: 'sub',
+            index: null,
             key: null,
             markerId: 'inner-m1',
             template: '<span></span>',

package/src/__tests__/map-function-reference.test.ts

@@ -0,0 +1,303 @@
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { asCallbackMethodCall, isSupported } from '../expression-parser'
+import type { IRExpression } from '../types'
+
+// #2206: a bare-identifier callback passed to a value-position higher-order
+// array method (`tags.map(format)`) resolves one hop to its declaration
+// (`resolveCallbackMethodFunctionReferences` in jsx-to-ir.ts), reusing the
+// SAME `findLocalConst` / `findLocalFunction` scope machinery #2090
+// established for `.sort(cb)` — but as a post-parse pass over the whole
+// `ParsedExpr` tree, since the value-returning `.map(cb).join(...)` form is
+// recognized generically downstream of parsing (`asCallbackMethodCall`), not
+// during it.
+describe('function-reference .map(cb) callback (#2206)', () => {
+  function textExpr(ir: ReturnType<typeof jsxToIR>): IRExpression {
+    if (!ir || ir.type !== 'element') throw new Error('expected a root element')
+    const expr = ir.children.find(c => c.type === 'expression')
+    if (!expr || expr.type !== 'expression') throw new Error('expected an expression child')
+    return expr
+  }
+
+  test('const arrow reference resolves like an inline arrow', () => {
+    const source = `
+      const format = (t: string) => '#' + t
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+
+    expect(expr.parsed).toBeDefined()
+    // .join(' ') is the outer call; its object is the resolved .map(...) call.
+    const joinCall = expr.parsed!
+    expect(joinCall.kind).toBe('array-method')
+    if (joinCall.kind !== 'array-method') return
+    const mapCall = asCallbackMethodCall(joinCall.object)
+    expect(mapCall).not.toBeNull()
+    expect(mapCall!.method).toBe('map')
+    expect(mapCall!.arrow.kind).toBe('arrow')
+    expect(mapCall!.arrow.params).toEqual(['t'])
+    // Resolved body is identical to what an inline `t => '#' + t` would parse to.
+    expect(isSupported(joinCall).supported).toBe(true)
+  })
+
+  test('function-declaration reference resolves too', () => {
+    const source = `
+      function format(t: string) { return '#' + t }
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+
+    expect(expr.parsed).toBeDefined()
+    const joinCall = expr.parsed!
+    expect(joinCall.kind).toBe('array-method')
+    if (joinCall.kind !== 'array-method') return
+    const mapCall = asCallbackMethodCall(joinCall.object)
+    expect(mapCall).not.toBeNull()
+    expect(mapCall!.arrow.params).toEqual(['t'])
+  })
+
+  test('component-scope const shadows a module-scope const of the same name', () => {
+    const source = `
+      const format = (t: string) => 'module:' + t
+      function TagLine({ tags }: { tags: string[] }) {
+        const format = (t: string) => 'local:' + t
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    const mapCall = asCallbackMethodCall(joinCall.object)!
+    // The resolved body must be the component-scope binding ('local:'), not
+    // the module-scope one ('module:').
+    expect(JSON.stringify(mapCall.arrow.body)).toContain('local:')
+  })
+
+  test('unresolvable reference (imported) stays refused with BF101', () => {
+    const source = `
+      import { format } from './format'
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    // The identifier arg passes through untouched — asCallbackMethodCall
+    // still refuses it, so the adapter's UNSUPPORTED_METHODS gate fires.
+    expect(asCallbackMethodCall(joinCall.object)).toBeNull()
+    expect(isSupported(joinCall).supported).toBe(false)
+  })
+
+  test('non-function const (unresolvable) stays refused with BF101', () => {
+    const source = `
+      const format = 5
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    expect(asCallbackMethodCall(joinCall.object)).toBeNull()
+    expect(isSupported(joinCall).supported).toBe(false)
+  })
+
+  test('/* @client */ still suppresses regardless of resolvability', () => {
+    const source = `
+      import { format } from './format'
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{/* @client */ tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    expect(expr.clientOnly).toBe(true)
+  })
+
+  test('inline arrow callback is unaffected (pre-existing #2073 shape)', () => {
+    const source = `
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.map(t => '#' + t).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    expect(isSupported(joinCall).supported).toBe(true)
+  })
+
+  test('resolution generalizes to other CALLBACK_METHODS (e.g. value-position .sort)', () => {
+    const source = `
+      const byLen = (a: string, b: string) => a.length - b.length
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.sort(byLen).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    const sortCall = asCallbackMethodCall(joinCall.object)
+    expect(sortCall).not.toBeNull()
+    expect(sortCall!.arrow.params).toEqual(['a', 'b'])
+  })
+
+  test('cross-kind ambiguity (const AND function of the same name) stays refused', () => {
+    const source = `
+      const format = (t: string) => 'const:' + t
+      function format2() {}
+      function TagLine({ tags }: { tags: string[] }) {
+        function format(t: string) { return 'fn:' + t }
+        return <p>{tags.map(format).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const joinCall = expr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    // Component scope has BOTH a const `format` (module scope) and a
+    // `function format` (component scope) in play once findLocalConst /
+    // findLocalFunction search across scopes — same cross-kind ambiguity
+    // `resolveSortComparatorIdentifier` refuses for `.sort(fnref)`.
+    expect(asCallbackMethodCall(joinCall.object)).toBeNull()
+    expect(isSupported(joinCall).supported).toBe(false)
+  })
+
+  test('.reduce(fnref, init) resolves the callback and preserves the init arg', () => {
+    const source = `
+      const sum = (acc: number, t: string) => acc + t.length
+      function TagLine({ tags }: { tags: string[] }) {
+        return <p>{tags.reduce(sum, 0)}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const parsed = expr.parsed!
+    const reduceCall = asCallbackMethodCall(parsed)
+    expect(reduceCall).not.toBeNull()
+    expect(reduceCall!.method).toBe('reduce')
+    expect(reduceCall!.arrow.params).toEqual(['acc', 't'])
+    // The trailing `0` init arg survives resolution untouched.
+    expect(reduceCall!.args).toEqual([{ kind: 'literal', value: 0, literalType: 'number', raw: '0' }])
+  })
+
+  // Fable review (#2214): a spliced-in resolved arrow's body is NOT
+  // re-walked, so a bare-identifier callback nested inside another
+  // resolved declaration stays refused — a deliberate one-hop limit (see
+  // resolveCallbackMethodFunctionReferences's docstring), pinned here so a
+  // future change to that behavior is a conscious decision, not a silent
+  // regression.
+  test('a bare-identifier callback nested inside a resolved declaration stays refused (one-hop limit)', () => {
+    const source = `
+      const inner = (t: string) => '#' + t
+      const outer = (xs: string[]) => xs.map(inner).join(',')
+      function TagLine({ rows }: { rows: string[][] }) {
+        return <p>{rows.map(outer).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const outerJoin = expr.parsed!
+    if (outerJoin.kind !== 'array-method') throw new Error('expected array-method')
+    const outerMap = asCallbackMethodCall(outerJoin.object)!
+    expect(outerMap).not.toBeNull()
+    // `outer`'s body resolves one hop (`xs.map(inner).join(',')`), but the
+    // nested `.map(inner)` inside that spliced body is never re-walked.
+    const innerJoin = outerMap.arrow.body
+    if (innerJoin.kind !== 'array-method') throw new Error('expected inner array-method')
+    if (innerJoin.object.kind !== 'call') throw new Error('expected inner call')
+    expect(innerJoin.object.args[0]).toEqual({ kind: 'identifier', name: 'inner' })
+    expect(asCallbackMethodCall(innerJoin.object)).toBeNull()
+  })
+
+  // Fable review (#2214): the resolver must respect lexical scoping — a
+  // bare identifier in callback position that's actually bound by an
+  // ENCLOSING arrow's own parameter (not a same-file const/function) must
+  // never be resolved against the const/function tables, or SSR silently
+  // renders the wrong function while CSR (which evaluates the raw,
+  // correctly-scoped expression) renders the right one.
+  test('an enclosing callback arrow param shadows a same-named module const', () => {
+    const source = `
+      const fn = (t: string) => 'WRONG:' + t
+      function TagLine({ rows }: { rows: { tags: string[] }[] }) {
+        return <p>{rows.map(fn => fn.tags.map(fn).join(',')).join(' ')}</p>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    const expr = textExpr(ir)
+    const outerJoin = expr.parsed!
+    if (outerJoin.kind !== 'array-method') throw new Error('expected array-method')
+    const outerMap = asCallbackMethodCall(outerJoin.object)!
+    // The outer arrow's body is `fn.tags.map(fn).join(',')` — the inner
+    // `.map(fn)` refers to the outer arrow's OWN param `fn`, not the
+    // module-scope const, so it must stay unresolved (an identifier arg).
+    const innerJoin = outerMap.arrow.body
+    if (innerJoin.kind !== 'array-method') throw new Error('expected inner array-method')
+    if (innerJoin.object.kind !== 'call') throw new Error('expected inner call')
+    expect(innerJoin.object.args[0]).toEqual({ kind: 'identifier', name: 'fn' })
+    expect(asCallbackMethodCall(innerJoin.object)).toBeNull()
+  })
+
+  test('a loop item param shadows a same-named module const inside the loop body', () => {
+    const source = `
+      const format = (t: string) => 'WRONG:' + t
+      function TagLine({ fns, tags }: { fns: string[]; tags: string[] }) {
+        return <ul>{fns.map(format => <li>{tags.map(format).join(' ')}</li>)}</ul>
+      }
+      export { TagLine }
+    `
+    const ctx = analyzeComponent(source, 'TagLine.tsx')
+    const ir = jsxToIR(ctx)
+    if (!ir || ir.type !== 'element') throw new Error('expected a root element')
+    const loop = ir.children.find(c => c.type === 'loop')
+    if (!loop || loop.type !== 'loop') throw new Error('expected a loop child')
+    expect(loop.param).toBe('format')
+    const li = loop.children.find(c => c.type === 'element')
+    if (!li || li.type !== 'element') throw new Error('expected the <li> element')
+    const innerExpr = li.children.find(c => c.type === 'expression')
+    if (!innerExpr || innerExpr.type !== 'expression') throw new Error('expected an expression child')
+    const joinCall = innerExpr.parsed!
+    if (joinCall.kind !== 'array-method') throw new Error('expected array-method')
+    // `tags.map(format)` inside the loop body refers to the loop's own item
+    // variable `format`, not the module-scope const — must stay unresolved.
+    if (joinCall.object.kind !== 'call') throw new Error('expected inner call')
+    expect(joinCall.object.args[0]).toEqual({ kind: 'identifier', name: 'format' })
+    expect(asCallbackMethodCall(joinCall.object)).toBeNull()
+  })
+})