@barefootjs/jsx 0.17.0 → 0.18.0

package/src/__tests__/augment-inherited-props.test.ts

@@ -76,6 +76,102 @@ describe('augmentInheritedPropAccesses', () => {
     }
   })
 
+  test('sees text-expression, condition, loop-array, and component-prop reads (#2126)', () => {
+    // These carriers all lower `props.X` to a bare template scalar, so a
+    // missed read means the emitted template references a var the props
+    // type / ssrDefaults never declared — a strict-mode 500 on the
+    // Perl-family adapters, a missing struct field on Go.
+    const ir = makeIR({
+      propsObjectName: 'props',
+      propsParams: [],
+      root: {
+        type: 'element',
+        tag: 'div',
+        attrs: [],
+        children: [
+          // dynamic text child → string (default classification)
+          { type: 'expression', expr: 'props.label' },
+          // conditional condition → nillable (truth-tested only)
+          {
+            type: 'conditional',
+            condition: 'props.show',
+            whenTrue: { type: 'element', tag: 'span', attrs: [], children: [] },
+            whenFalse: { type: 'text', value: '' },
+          },
+          // loop array → nillable (iterated only)
+          {
+            type: 'loop',
+            array: '(props.items ?? [])',
+            param: 'it',
+            children: [{ type: 'expression', expr: 'it' }],
+          },
+          // component prop values → scanned, but NOT as HTML attributes:
+          // no boolean-attr-by-name inference; nillable unless a
+          // `?? <literal>` pins a concrete type
+          {
+            type: 'component',
+            name: 'Child',
+            props: [
+              { name: 'value', value: { kind: 'expression', expr: 'props.childValue ?? 1' } },
+              { name: 'ref', value: { kind: 'expression', expr: 'props.childRef' } },
+              // `disabled` is a boolean HTML attr name, but on a component
+              // prop that inference must not fire — stays nillable.
+              { name: 'disabled', value: { kind: 'expression', expr: 'props.childFlag' } },
+            ],
+            children: [],
+          },
+        ],
+      },
+    })
+
+    augmentInheritedPropAccesses(ir)
+
+    const byName = new Map(ir.metadata.propsParams.map(p => [p.name, p]))
+    expect(byName.get('label')?.type).toMatchObject({ kind: 'primitive', primitive: 'string' })
+    expect(byName.get('show')?.type).toMatchObject({ kind: 'unknown' })
+    expect(byName.get('items')?.type).toMatchObject({ kind: 'unknown' })
+    // Component-prop reads: `?? 1` pins number; bare reads stay nillable,
+    // including on boolean-HTML-attr names (`disabled`).
+    expect(byName.get('childValue')?.type).toMatchObject({ kind: 'primitive', primitive: 'number' })
+    expect(byName.get('childRef')?.type).toMatchObject({ kind: 'unknown' })
+    expect(byName.get('childFlag')?.type).toMatchObject({ kind: 'unknown' })
+    for (const name of ['label', 'show', 'items', 'childValue', 'childRef', 'childFlag']) {
+      expect(byName.get(name)?.optional).toBe(true)
+    }
+  })
+
+  test('pins a synthetic param to the `?? <literal>` fallback type', () => {
+    // The Go adapter seeds a prop-derived signal from the synthetic field
+    // (`Count: in.Initial` where `Count int` came from evaluating
+    // `props.initial ?? 0`), so the field type must match the literal —
+    // the old string default produced `cannot use in.Initial (variable
+    // of type string) as int value`.
+    const ir = makeIR({
+      propsObjectName: 'props',
+      propsParams: [],
+      memos: [{ computation: 'props.step ?? 1' }],
+      root: {
+        type: 'element',
+        tag: 'div',
+        attrs: [],
+        children: [{ type: 'expression', expr: 'props.title ?? "untitled"' }],
+      },
+    })
+    ir.metadata.signals = [
+      { getter: 'count', initialValue: 'props.initial ?? 0' },
+      { getter: 'on', initialValue: 'props.defaultOn ?? false' },
+    ] as never
+
+    augmentInheritedPropAccesses(ir)
+
+    const byName = new Map(ir.metadata.propsParams.map(p => [p.name, p]))
+    expect(byName.get('initial')?.type).toMatchObject({ kind: 'primitive', primitive: 'number' })
+    expect(byName.get('defaultOn')?.type).toMatchObject({ kind: 'primitive', primitive: 'boolean' })
+    expect(byName.get('step')?.type).toMatchObject({ kind: 'primitive', primitive: 'number' })
+    // Text-expression coalesce reads keep their string classification.
+    expect(byName.get('title')?.type).toMatchObject({ kind: 'primitive', primitive: 'string' })
+  })
+
   test('is idempotent — re-running adds nothing', () => {
     const ir = makeIR({
       propsObjectName: 'props',

package/src/__tests__/compiler-runtime-contract.test.ts

@@ -261,11 +261,21 @@ describe('Compiler-Runtime Contract', () => {
     })
 
     test('issue #1321: rest spread on typed module-level function param survives emit', () => {
+      // The tag body joins with a `-` separator between `p` and the
+      // interleaved arg — deliberately OFF the #2092 interleave-tag
+      // catalogue (which requires the exact `(acc + p) + X` two-term
+      // chain), so `cn` stays an opaque tagged-template callee that must
+      // still be shipped to the client. This keeps the #1321 regression
+      // (rest token survives type-strip + module-level emission) pinned
+      // against a real "helper still needed" case; #2092's own desugar
+      // coverage lives in `tagged-template-interleave.test.ts` and the
+      // `compiler-stress-1244.test.ts` "tagged template literal for
+      // className" describe block.
       const js = compileClient(`
         "use client"
         import { createSignal } from '@barefootjs/client'
         function cn(parts: TemplateStringsArray, ...args: unknown[]): string {
-          return parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+          return parts.reduce<string>((acc, p, i) => acc + p + '-' + (args[i] ?? ''), '')
         }
         export function TagDemo() {
           const [tone, setTone] = createSignal('primary')

package/src/__tests__/compiler-stress-1244.test.ts

@@ -1554,9 +1554,11 @@ describe('JSX spread of a reactive object', () => {
 
 describe('tagged template literal for className', () => {
   // `cn\`base ${signal()}\`` is the most common alternative to `cva` in
-  // small codebases. The compiler currently treats a TaggedTemplate as
-  // an opaque call; reactive deps inside the placeholders may not be
-  // analysed.
+  // small codebases. Resolved by #2092: `cn`'s body structurally matches
+  // the interleave-tag catalogue (`parts.reduce((acc, p, i) => acc + p +
+  // (args[i] ?? ''), '')`), so the tagged template desugars to the
+  // equivalent untagged template literal — the signal dependency inside
+  // the placeholder IS analysed, producing a reactive className binding.
   test('cn`base ${signal()}` produces the className binding', () => {
     const src = `
       'use client'
@@ -1569,7 +1571,14 @@ describe('tagged template literal for className', () => {
         return <div onClick={() => setTone('secondary')} className={cn\`base \${tone()}\`} />
       }
     `
-    expectNoFatalErrors(compile(src))
+    const c = compile(src)
+    expectNoFatalErrors(c)
+    // The tag call is gone from the emitted client JS — replaced by the
+    // desugared untagged template literal — and the className update
+    // effect reads the signal getter reactively.
+    expect(c.clientJs).not.toMatch(/\bcn`/)
+    expect(c.clientJs).toContain('`base ${(tone()) ?? \'\'}`')
+    expect(c.clientJs).toMatch(/setAttribute\('class',\s*String\(__v\)\)/)
   })
 })
 

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)
@@ -1383,9 +1422,19 @@ describe('expression-parser', () => {
       expect(result.level).toBe('L2')
     })
 
-    test('L5: map() is NOT supported', () => {
+    test('L5: value-producing map() with an arrow IS supported (evaluator lowering, #2073)', () => {
       const expr = parseExpression('items().map(x => x.name)')
       const result = isSupported(expr)
+      expect(result.supported).toBe(true)
+      expect(result.level).toBe('L5')
+    })
+
+    test('L5: map() with a function-reference callback is NOT supported', () => {
+      // No arrow argument → not a CALLBACK_METHODS shape; falls through to
+      // the UNSUPPORTED_METHODS gate and refuses loudly (like reduce's
+      // no-init fall-through).
+      const expr = parseExpression('items().map(format)')
+      const result = isSupported(expr)
       expect(result.supported).toBe(false)
       expect(result.level).toBe('L5_UNSUPPORTED')
       expect(result.reason).toContain('map')
@@ -1690,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')
     }
   })
 
@@ -1709,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__/free-identifiers.test.ts

@@ -0,0 +1,55 @@
+import { parseExpression, freeIdentifiers } from '../expression-parser'
+
+/**
+ * `freeIdentifiers` pins the LEXICALLY-SCOPED free-identifier walk used by the
+ * Perl-family seed-scope guard (Mojo / Xslate `tryLowerToPerl` / `tryLowerToKolon`,
+ *): a name bound by an arrow's own params is free
+ * OUTSIDE that arrow's body but bound WITHIN it, and an `unsupported` node
+ * makes the whole result unanalyzable (`null`) so callers fail safe.
+ */
+
+describe('freeIdentifiers', () => {
+  test('simple identifiers are free', () => {
+    const expr = parseExpression('a + b.c')
+    expect(freeIdentifiers(expr)).toEqual(new Set(['a', 'b']))
+  })
+
+  test('an arrow param is bound inside its own body but free outside it', () => {
+    // The `filter((p) => p.ok) && p` shape : the outer `p` is a
+    // DIFFERENT (unbound) reference from the callback's own `p` param.
+    const expr = parseExpression('props.items.filter((p) => p.ok) && p')
+    expect(freeIdentifiers(expr)).toEqual(new Set(['props', 'p']))
+  })
+
+  test('an arrow param fully shadowed inside its body reports no free callback ref', () => {
+    const expr = parseExpression('items.filter((p) => p.ok)')
+    expect(freeIdentifiers(expr)).toEqual(new Set(['items']))
+  })
+
+  test('nested arrows accumulate params from every enclosing scope', () => {
+    // `a` and `b` are both bound within the innermost body; only `outer` is free.
+    const expr = parseExpression('items.filter((a) => other.filter((b) => a + b + outer))')
+    expect(freeIdentifiers(expr)).toEqual(new Set(['items', 'other', 'outer']))
+  })
+
+  test('member property names are not references; object-literal keys are not either', () => {
+    const expr = parseExpression('({ total: item.price, tax: rate })')
+    expect(freeIdentifiers(expr)).toEqual(new Set(['item', 'rate']))
+  })
+
+  test('a builtin callee (Math.floor) is not reported as free; its args are', () => {
+    const expr = parseExpression('Math.floor(n)')
+    expect(freeIdentifiers(expr)).toEqual(new Set(['n']))
+  })
+
+  test('a non-builtin call callee IS a free reference', () => {
+    const expr = parseExpression('someFn(x)')
+    expect(freeIdentifiers(expr)).toEqual(new Set(['someFn', 'x']))
+  })
+
+  test('an unsupported node makes the whole tree unanalyzable', () => {
+    // A block-bodied arrow with imperative statements parses as `unsupported`.
+    const expr = parseExpression('(() => { for (;;) {} })()')
+    expect(freeIdentifiers(expr)).toBeNull()
+  })
+})