@barefootjs/jsx 0.23.0 → 0.25.0

package/src/__tests__/reactive-factory-rename-fidelity.test.ts

@@ -0,0 +1,318 @@
+/**
+ * Regression tests for #2341 BUG-1: reactive-factory call-site inlining used
+ * to rename identifiers with a whole-body regex (`\bname\b` -> `name_bf0`,
+ * applied three times in sequence for suffix-renaming, param substitution,
+ * and return->caller renaming). A regex has no notion of AST position, so
+ * it also matched string-literal contents, template-literal text chunks,
+ * object/property-access keys, and JSX intrinsic tags that merely happened
+ * to spell the same identifier — corrupting them.
+ *
+ * Fix: collect exact identifier-node rename sites once at detection time
+ * (`detectReactiveFactory`), then apply a single merged bottom-to-top
+ * position splice at inline time (`inlineFactoryCallAtSite`) instead of any
+ * text search. This file pins the corruption classes the old regex produced
+ * and the BF114 diagnostic for the one shape the new approach must decline
+ * rather than silently substitute (a factory parameter re-declared inside
+ * the body).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('AST-position-based rename fidelity (#2341 BUG-1)', () => {
+  test('R1: string-literal argument sharing a local-binding name is preserved', () => {
+    // `stored` must feed into `createSignal` (not merely sit unused) so the
+    // general local-constant retention pass keeps the statement — an
+    // unrelated, pre-existing behavior of the component-body pipeline, out
+    // of scope for #2341.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createTheme(initial: string) {
+        const stored = localStorage.getItem('stored') ?? initial
+        const [theme, setTheme] = createSignal(stored)
+        return [theme, setTheme] as const
+      }
+
+      export function App() {
+        const [theme, setTheme] = createTheme('light')
+        return <button onClick={() => setTheme('dark')}>{theme()}</button>
+      }
+    `
+
+    const result = compileJSX(source, 'App.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    // The string literal argument to getItem must stay untouched...
+    expect(clientJs).toMatch(/localStorage\.getItem\('stored'\)/)
+    expect(clientJs).not.toMatch(/'stored_bf/)
+    // ...while the local binding declaration is still suffix-renamed.
+    expect(clientJs).toMatch(/stored_bf\d+ = localStorage/)
+  })
+
+  test('R2: SSR template also preserves the string literal', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createTheme(initial: string) {
+        const stored = localStorage.getItem('stored') ?? initial
+        const [theme, setTheme] = createSignal(stored)
+        return [theme, setTheme] as const
+      }
+
+      export function App() {
+        const [theme, setTheme] = createTheme('light')
+        return <button onClick={() => setTheme('dark')}>{theme()}</button>
+      }
+    `
+
+    const result = compileJSX(source, 'App.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const template = result.files.find(f => f.type === 'markedTemplate')
+    expect(template).toBeDefined()
+    expect(template!.content).toContain("getItem('stored')")
+  })
+
+  test('R3: template-literal text chunks are preserved, only substitutions rename', () => {
+    // Tuple factories require every return element to be destructured at
+    // the call site (arity must match), so all three elements are bound.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createLabelled(initial: string) {
+        const [value, setValue] = createSignal(initial)
+        const stored = initial
+        const label = \`\${stored} stored\`
+        return [value, setValue, label] as const
+      }
+
+      export function Labelled() {
+        const [value, setValue, label] = createLabelled('x')
+        return <p>{value()} {label}</p>
+      }
+    `
+
+    const result = compileJSX(source, 'Labelled.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    // The substitution `${stored}` renames with the local; the literal text
+    // chunk ` stored` after it must not.
+    expect(clientJs).toMatch(/`\$\{stored_bf\d+\} stored`/)
+  })
+
+  test('R4: shorthand property + string-literal argument expands to longhand (Repro B)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createUser(name: string) {
+        const [user, setUser] = createSignal({ name, loggedIn: false })
+        return [user, setUser] as const
+      }
+
+      export function Profile() {
+        const [user, setUser] = createUser('Alice')
+        return <p onClick={() => setUser({ name: 'Bob', loggedIn: true })}>{user().name}</p>
+      }
+    `
+
+    const result = compileJSX(source, 'Profile.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    expect(clientJs).toMatch(/\{\s*name:\s*'Alice',\s*loggedIn:\s*false\s*\}/)
+  })
+
+  test('R5: shorthand property with a suffix-renamed local keeps its key', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createBox(initial: number) {
+        const size = initial + 1
+        const [box, setBox] = createSignal({ size })
+        return { box, setBox }
+      }
+
+      export function BoxDisplay() {
+        const { box, setBox } = createBox(1)
+        return <p onClick={() => setBox({ size: 2 })}>{box().size}</p>
+      }
+    `
+
+    const result = compileJSX(source, 'BoxDisplay.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    expect(clientJs).toMatch(/\{\s*size:\s*size_bf\d+\s*\}/)
+  })
+
+  test('R6: caller-rename of a return identifier leaves unrelated strings alone (Repro C)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createInput(initial: string) {
+        const [value, setValue] = createSignal(initial)
+        const update = (next: string) => {
+          if (next.length > 10) throw new Error('value too long')
+          setValue(next)
+        }
+        return [value, update] as const
+      }
+
+      export function Field() {
+        const [email, setEmail] = createInput('')
+        return <input value={email()} onInput={(e) => setEmail(e.target.value)} />
+      }
+    `
+
+    const result = compileJSX(source, 'Field.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    expect(clientJs).toContain("'value too long'")
+    expect(clientJs).not.toContain("throw new Error('email")
+    // The wrapper's declaration is renamed to the caller's setter name.
+    expect(clientJs).toMatch(/setEmail\s*=/)
+  })
+
+  test('R7: object-pattern shorthand binding (nested callback parameter) expands and keeps its key', () => {
+    // The ObjectBindingPattern shape is exercised on a nested callback's own
+    // parameter — `({ pos }) => ...` — rather than a top-level `const { pos }
+    // = ...` body statement: the latter is dropped by an unrelated,
+    // pre-existing gap in the component-body local-constant pipeline (out of
+    // scope for #2341; confirmed to reproduce identically outside any
+    // factory). The callback parameter here deliberately shadows the
+    // factory's own `pos` binding, pinning the alpha-rename guarantee from
+    // the #2341 BUG-1 spec: the walker does not stop at nested-function
+    // boundaries, so the shadowing parameter and the outer binding rename
+    // identically and consistently.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createPoint(seed: number) {
+        const [pos, setPos] = createSignal(seed)
+        const moveTo = ({ pos }: { pos: number }) => setPos(pos)
+        return { pos, moveTo }
+      }
+
+      export function PointDisplay() {
+        const { moveTo } = createPoint(0)
+        return <p onClick={() => moveTo({ pos: 5 })}>ok</p>
+      }
+    `
+
+    const result = compileJSX(source, 'PointDisplay.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    expect(clientJs).toMatch(/\{\s*pos:\s*pos_bf\d+\s*\}/)
+  })
+
+  test('R8: property keys and .prop tails sharing a param name are untouched', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createConfigured(initial: number) {
+        const config = { initial: 0 }
+        const [n, setN] = createSignal(config.initial ?? initial)
+        return [n, setN] as const
+      }
+
+      export function Counter() {
+        const [n, setN] = createConfigured(5)
+        return <button onClick={() => setN(n() + 1)}>{n()}</button>
+      }
+    `
+
+    const result = compileJSX(source, 'Counter.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    expect(clientJs).toMatch(/\{\s*initial:\s*0\s*\}/)
+    expect(clientJs).toMatch(/config_bf\d+\.initial/)
+    expect(clientJs).toMatch(/\?\?\s*5/)
+  })
+
+  test('R9: a nested declaration that shadows a factory parameter declines with BF114', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createOops(initial: number) {
+        const [n, setN] = createSignal(initial)
+        const reset = (initial: number) => setN(initial)
+        return { n, reset }
+      }
+
+      export function Oops() {
+        const { n, reset } = createOops(0)
+        return <button onClick={() => reset(0)}>{n()}</button>
+      }
+    `
+
+    const ctx = analyzeComponent(source, 'Oops.tsx')
+    expect(ctx.signals.length).toBe(0)
+
+    const result = compileJSX(source, 'Oops.tsx', { adapter })
+    const bf114 = result.errors.find(e => e.code === 'BF114')
+    expect(bf114).toBeDefined()
+    expect(bf114!.message).toContain('initial')
+    expect(bf114!.message).toContain('createOops')
+  })
+
+  test('R10: an argument expression is never re-scanned by a later rename pass (cascade fix)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createInput(initial: string) {
+        const [value, setValue] = createSignal(initial)
+        const update = (next: string) => setValue(next)
+        return [value, update] as const
+      }
+
+      export function Field() {
+        const value = 'seed'
+        const [email, setEmail] = createInput(value)
+        return <input value={email()} onInput={(e) => setEmail(e.target.value)} />
+      }
+    `
+
+    const result = compileJSX(source, 'Field.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    // `value` (the outer local passed as the argument) must reach
+    // createSignal verbatim — a later return->caller rename pass renaming
+    // the factory's own `value` return identifier to `email` must not
+    // re-scan and corrupt the already-substituted argument text.
+    expect(clientJs).toMatch(/createSignal\(\s*value\s*\)/)
+  })
+
+  test('R11: a tuple array-binding pattern in the body is not shorthand-expanded (ArrayBindingPattern trap)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      function createCounter(initial: number) {
+        const [c, s] = createSignal(initial)
+        return [c, s] as const
+      }
+
+      export function Counter() {
+        const [count, setCount] = createCounter(0)
+        return <button onClick={() => setCount(count() + 1)}>{count()}</button>
+      }
+    `
+
+    const result = compileJSX(source, 'Counter.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+    expect(clientJs).not.toMatch(/\[\s*\w+:\s/)
+  })
+})

package/src/__tests__/to-locale-date-lowering.test.ts

@@ -70,6 +70,7 @@ describe('matchToLocaleDateStringCall accept/decline table', () => {
         { kind: 'identifier', name: 'createdAt' },
         { kind: 'literal', value: 'M/D/YYYY', literalType: 'string' },
         { kind: 'literal', value: 'UTC', literalType: 'string' },
+        { kind: 'array-literal', elements: [], raw: '[]' },
       ],
     })
   })
@@ -82,6 +83,7 @@ describe('matchToLocaleDateStringCall accept/decline table', () => {
         { kind: 'identifier', name: 'createdAt' },
         { kind: 'literal', value: 'YYYY/M/D' },
         { kind: 'literal', value: '+09:00' },
+        { kind: 'array-literal', elements: [] },
       ],
     })
   })
@@ -101,9 +103,10 @@ describe('matchToLocaleDateStringCall accept/decline table', () => {
     expect(match(`createdAt.toLocaleDateString('ja-JP', { timeZone: '+25:00' })`)).toBeNull()
     expect(match(`createdAt.toLocaleDateString('ja-JP', { timeZone: '+99:99' })`)).toBeNull()
     expect(match(`createdAt.toLocaleDateString('ja-JP', { timeZone: '-12:60' })`)).toBeNull()
-    // options beyond timeZone: the name-table stage, not this slice
-    expect(match(`createdAt.toLocaleDateString('ja-JP', { timeZone: 'UTC', month: 'long' })`)).toBeNull()
+    // an options bag WITHOUT timeZone still declines (host-TZ read)
     expect(match(`createdAt.toLocaleDateString('ja-JP', { dateStyle: 'long' })`)).toBeNull()
+    // a non-literal option value declines (unprobeable)
+    expect(match(`createdAt.toLocaleDateString('en-US', { timeZone: 'UTC', dateStyle: style })`)).toBeNull()
     // unrepresentable locale default
     expect(match(`createdAt.toLocaleDateString('ar-SA', { timeZone: 'UTC' })`)).toBeNull()
   })
@@ -118,6 +121,204 @@ describe('matchToLocaleDateStringCall accept/decline table', () => {
   })
 })
 
+describe('name tokens via the options bag (#2334)', () => {
+  const md = metadata(DATE_PROP_SRC)
+
+  function match(expr: string) {
+    const { callee, args } = callParts(expr)
+    return matchToLocaleDateStringCall(callee, args, md)
+  }
+
+  test('dateStyle long resolves a named pattern plus the 38-slot table', () => {
+    const node = match(`createdAt.toLocaleDateString('en-US', { dateStyle: 'long', timeZone: 'UTC' })`)
+    expect(node).toMatchObject({
+      helper: 'format_date',
+      args: [
+        { kind: 'identifier', name: 'createdAt' },
+        { kind: 'literal', value: 'MMMM D, YYYY' },
+        { kind: 'literal', value: 'UTC' },
+        { kind: 'array-literal' },
+      ],
+    })
+    const names = (node as { args: ParsedExpr[] }).args[3] as Extract<ParsedExpr, { kind: 'array-literal' }>
+    expect(names.elements).toHaveLength(38)
+    expect(names.elements[2]).toEqual({ kind: 'literal', value: 'March', literalType: 'string' })
+    expect(names.elements[24]).toEqual({ kind: 'literal', value: 'Sunday', literalType: 'string' })
+  })
+
+  test('dateStyle full adds the weekday token; medium picks abbreviated names', () => {
+    expect(match(`createdAt.toLocaleDateString('en-US', { dateStyle: 'full', timeZone: 'UTC' })`)).toMatchObject({
+      args: [expect.anything(), { kind: 'literal', value: 'dddd, MMMM D, YYYY' }, expect.anything(), expect.anything()],
+    })
+    expect(match(`createdAt.toLocaleDateString('en-US', { dateStyle: 'medium', timeZone: 'UTC' })`)).toMatchObject({
+      args: [expect.anything(), { kind: 'literal', value: 'MMM D, YYYY' }, expect.anything(), expect.anything()],
+    })
+  })
+
+  test("ja-JP's long form is numeric — the probe ships no table", () => {
+    expect(match(`createdAt.toLocaleDateString('ja-JP', { dateStyle: 'long', timeZone: 'UTC' })`)).toMatchObject({
+      args: [
+        expect.anything(),
+        { kind: 'literal', value: 'YYYY年M月D日' },
+        { kind: 'literal', value: 'UTC' },
+        { kind: 'array-literal', elements: [] },
+      ],
+    })
+  })
+
+  test('context-inflected month names pick the form the format actually uses (Copilot, #2336)', () => {
+    // Russian inflects month names by date context: dateStyle 'long'
+    // renders genitive `марта`, а month-only format nominative `март`.
+    // Each call site ships the table whose form ICU uses THERE, verified
+    // at a second instant so a probe-index coincidence can't slip through.
+    const long = match(`createdAt.toLocaleDateString('ru-RU', { dateStyle: 'long', timeZone: 'UTC' })`)
+    // NOTE: read args BEFORE any toMatchObject with expect.anything() —
+    // bun 1.3.11's toMatchObject MUTATES the received object, emptying
+    // entries an expect.anything() matched (minimal repro pinned in this
+    // PR's description; upstream bun bug).
+    const longNames = (long as { args: ParsedExpr[] }).args[3] as Extract<ParsedExpr, { kind: 'array-literal' }>
+    const longPattern = (long as { args: ParsedExpr[] }).args[1]
+    expect(longPattern).toEqual({ kind: 'literal', value: 'D MMMM YYYY г.', literalType: 'string' })
+    expect(longNames.elements[2]).toEqual({ kind: 'literal', value: 'марта', literalType: 'string' })
+
+    const monthOnly = match(`createdAt.toLocaleDateString('ru-RU', { month: 'long', timeZone: 'UTC' })`)
+    const standaloneNames = (monthOnly as { args: ParsedExpr[] }).args[3] as Extract<ParsedExpr, { kind: 'array-literal' }>
+    expect(standaloneNames.elements[2]).toEqual({ kind: 'literal', value: 'март', literalType: 'string' })
+  })
+
+  test('unreproducible forms decline loudly: 2-digit year, era', () => {
+    expect(match(`createdAt.toLocaleDateString('en-US', { dateStyle: 'short', timeZone: 'UTC' })`)).toBeNull()
+    expect(match(`createdAt.toLocaleDateString('en-US', { era: 'short', year: 'numeric', timeZone: 'UTC' })`)).toBeNull()
+  })
+
+  test('client rewrite carries the names table', () => {
+    const result = compile(`
+export function Foo({ createdAt }: { createdAt: Date }) {
+  return <div>{createdAt.toLocaleDateString('en-US', { dateStyle: 'long', timeZone: 'UTC' })}</div>
+}
+`)
+    expect(result.errors.filter((e) => e.code === ErrorCodes.UNSUPPORTED_JSX_PATTERN)).toEqual([])
+    const js = result.files.find((f) => f.type === 'clientJs')!.content
+    expect(js).toContain('formatDate(_p.createdAt, "MMMM D, YYYY", "UTC", ["January","February"')
+    expect(js).not.toContain('toLocaleDateString')
+  })
+})
+
+describe('union-typed locale (#2324 union stage)', () => {
+  const UNION_SRC = `
+function Foo({ createdAt, locale }: { createdAt: Date; locale: 'en-US' | 'ja-JP' }) {
+  return <div>{createdAt.toLocaleDateString(locale, { timeZone: 'UTC' })}</div>
+}
+export { Foo }
+`
+
+  test('a required closed string-literal union lowers to a ternary pattern', () => {
+    const md = metadata(UNION_SRC)
+    const { callee, args } = callParts(`createdAt.toLocaleDateString(locale, { timeZone: 'UTC' })`)
+    expect(matchToLocaleDateStringCall(callee, args, md)).toEqual({
+      kind: 'helper-call',
+      helper: 'format_date',
+      args: [
+        { kind: 'identifier', name: 'createdAt' },
+        {
+          kind: 'conditional',
+          test: {
+            kind: 'binary',
+            op: '===',
+            left: { kind: 'identifier', name: 'locale' },
+            right: { kind: 'literal', value: 'en-US', literalType: 'string' },
+          },
+          consequent: { kind: 'literal', value: 'M/D/YYYY', literalType: 'string' },
+          alternate: { kind: 'literal', value: 'YYYY/M/D', literalType: 'string' },
+        },
+        { kind: 'literal', value: 'UTC', literalType: 'string' },
+        // both members are numeric-only, so the names tables are equal ([])
+        // and collapse to a single empty leaf
+        { kind: 'array-literal', elements: [], raw: '[]' },
+      ],
+    })
+  })
+
+  test('members sharing one pattern collapse the ternary to a literal', () => {
+    const md = metadata(`
+function Foo({ createdAt, locale }: { createdAt: Date; locale: 'en-US' | 'en' }) {
+  return <div>{createdAt.toLocaleDateString(locale, { timeZone: 'UTC' })}</div>
+}
+export { Foo }
+`)
+    const { callee, args } = callParts(`createdAt.toLocaleDateString(locale, { timeZone: 'UTC' })`)
+    expect(matchToLocaleDateStringCall(callee, args, md)).toMatchObject({
+      helper: 'format_date',
+      args: [
+        { kind: 'identifier', name: 'createdAt' },
+        { kind: 'literal', value: 'M/D/YYYY' },
+        { kind: 'literal', value: 'UTC' },
+        { kind: 'array-literal', elements: [] },
+      ],
+    })
+  })
+
+  test('object-props mode: accepts props.<name>, declines a bare identifier (never a prop there)', () => {
+    const md = metadata(`
+export function Foo(props: { createdAt: Date; locale: 'en-US' | 'ja-JP' }) {
+  return <div>{props.createdAt.toLocaleDateString(props.locale, { timeZone: 'UTC' })}</div>
+}
+`)
+    const member = callParts(`props.createdAt.toLocaleDateString(props.locale, { timeZone: 'UTC' })`)
+    expect(matchToLocaleDateStringCall(member.callee, member.args, md)).toMatchObject({
+      helper: 'format_date',
+      args: [
+        expect.anything(),
+        { kind: 'conditional' },
+        { kind: 'literal', value: 'UTC' },
+        { kind: 'array-literal', elements: [] },
+      ],
+    })
+    // A bare `locale` identifier in object-props mode is a LOCAL binding,
+    // not the prop — even when a same-named prop exists (Copilot, #2331).
+    const bare = callParts(`props.createdAt.toLocaleDateString(locale, { timeZone: 'UTC' })`)
+    expect(matchToLocaleDateStringCall(bare.callee, bare.args, md)).toBeNull()
+  })
+
+  test('destructured mode: declines a props.<name> member (no props object exists)', () => {
+    const md = metadata(UNION_SRC)
+    const { callee, args } = callParts(`createdAt.toLocaleDateString(props.locale, { timeZone: 'UTC' })`)
+    expect(matchToLocaleDateStringCall(callee, args, md)).toBeNull()
+  })
+
+  test('declines an OPTIONAL union prop (undefined would read the host locale)', () => {
+    const md = metadata(`
+function Foo({ createdAt, locale }: { createdAt: Date; locale?: 'en-US' | 'ja-JP' }) {
+  return <div>{/* @client */ createdAt.toLocaleDateString(locale ?? 'en-US', { timeZone: 'UTC' })}</div>
+}
+export { Foo }
+`)
+    const { callee, args } = callParts(`createdAt.toLocaleDateString(locale, { timeZone: 'UTC' })`)
+    expect(matchToLocaleDateStringCall(callee, args, md)).toBeNull()
+  })
+
+  test('declines a union containing an unrepresentable member', () => {
+    const md = metadata(`
+function Foo({ createdAt, locale }: { createdAt: Date; locale: 'en-US' | 'ar-SA' }) {
+  return <div>{/* @client */ createdAt.toLocaleDateString(locale, { timeZone: 'UTC' })}</div>
+}
+export { Foo }
+`)
+    const { callee, args } = callParts(`createdAt.toLocaleDateString(locale, { timeZone: 'UTC' })`)
+    expect(matchToLocaleDateStringCall(callee, args, md)).toBeNull()
+  })
+
+  test('compiles clean (no BF021) and rewrites client JS to a ternary formatDate', () => {
+    const result = compile(UNION_SRC)
+    expect(result.errors.filter((e) => e.code === ErrorCodes.UNSUPPORTED_JSX_PATTERN)).toEqual([])
+    const js = result.files.find((f) => f.type === 'clientJs')!.content
+    expect(js).toContain(
+      'formatDate(_p.createdAt, _p.locale === "en-US" ? "M/D/YYYY" : "YYYY/M/D", "UTC")',
+    )
+    expect(js).not.toContain('toLocaleDateString')
+  })
+})
+
 describe('BF021 exemption round trip (#2273 seam)', () => {
   test('the claimed literal shape compiles clean; the runtime-locale shape still fires BF021', () => {
     const clean = compile(DATE_PROP_SRC)