@barefootjs/jsx 0.31.6 → 0.31.8

package/src/__tests__/client-only-date-lowering.test.ts

@@ -0,0 +1,182 @@
+/**
+ * Catalogued Date/URL calls inside `/* @client *​/` expressions and reactive
+ * attribute bindings (#2640, #2641).
+ *
+ * `emitClientOnlyExpressions` and `emitReactiveAttributeUpdates`
+ * (`ir-to-client-js/emit-reactive.ts`) used to splice a reactive expression's
+ * source text VERBATIM into the emitted `createEffect` body — correct for an
+ * un-catalogued method (BF021 already refused anything else, and the
+ * `/* @client *​/` escape is genuinely just "run this raw"), but wrong for a
+ * CATALOGUED method (`.toISOString()`, an explicit-locale
+ * `.toLocaleDateString(...)`, #2292/#2324): those never fire BF021 (a
+ * registered lowering plugin claims them), yet the receiver still crosses
+ * the `bf-p` hydration boundary as a de-riched JSON value. The sibling
+ * non-`@client` TEXT path (`emitDynamicTextUpdates`) already routed a
+ * catalogued call through the `date`/`formatDate` runtime helper before
+ * hydrate re-evaluates it (#2292) — these two sites now share that same
+ * rewrite via `makeCataloguedCallLowerer`.
+ *
+ * This suite compiles through `../index` (not the bare `../compiler`) so the
+ * built-in lowering plugins (`datePlugin`, `toLocaleDatePlugin`) are
+ * registered as the real package does — a call the registry doesn't know
+ * about would fire BF021 and never reach the reactive-emission sites this
+ * suite is about.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../index'
+import { TestAdapter } from '../adapters/test-adapter'
+import { ErrorCodes } from '../errors'
+
+function compile(src: string) {
+  const result = compileJSX(src.trimStart(), 'T.tsx', { adapter: new TestAdapter() })
+  const clientJs = result.files.find((f) => f.type === 'clientJs')!.content
+  const bf021 = result.errors.filter((e) => e.code === ErrorCodes.UNSUPPORTED_JSX_PATTERN)
+  return { clientJs, bf021 }
+}
+
+describe('#2640 — /* @client */ text expressions route catalogued calls through the runtime helper', () => {
+  test('a catalogued zero-arg accessor lowers to date(...), not the raw call', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div>{/* @client */ createdAt.toISOString()}</div>
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('date(createdAt, "toISOString")')
+    expect(clientJs).not.toContain('createdAt.toISOString()')
+    expect(clientJs).toMatch(/import\s*\{[^}]*\bdate\b[^}]*\}\s*from\s*'@barefootjs\/client\/runtime'/)
+  })
+
+  test('an explicit-locale toLocaleDateString lowers to formatDate(...)', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div>{/* @client */ createdAt.toLocaleDateString('ja-JP', { timeZone: 'UTC' })}</div>
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('formatDate(createdAt, "YYYY/M/D", "UTC")')
+    expect(clientJs).not.toContain(".toLocaleDateString('ja-JP'")
+  })
+
+  test('an UNCATALOGUED method call stays verbatim (only what the matcher claims is rewritten)', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div>{/* @client */ createdAt.getDay()}</div>
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('createdAt.getDay()')
+    expect(clientJs).not.toContain('date(')
+  })
+
+  test('a zero-arg toLocaleDateString() (implicit locale) stays verbatim — the deliberate revival-escape case (#2639)', () => {
+    // BF021 refuses this shape outside /* @client */ and recommends the
+    // explicit `new Date(...)` revival wrapper as the sound escape; inside
+    // /* @client */ it never fires (the directive already opts out), and
+    // this suite pins that the compiler does NOT special-case it further —
+    // an implicit-locale call is genuinely the user's own responsibility.
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div>{/* @client */ createdAt.toLocaleDateString()}</div>
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('createdAt.toLocaleDateString()')
+    expect(clientJs).not.toContain('formatDate(')
+  })
+})
+
+describe('#2641 — reactive attribute bindings route catalogued calls through the runtime helper', () => {
+  test('/* @client */ attribute, destructured-prop style', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div data-x={/* @client */ createdAt.toISOString()} />
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('date(_p.createdAt, "toISOString")')
+    expect(clientJs).not.toContain('createdAt.toISOString()')
+  })
+
+  test('/* @client */ attribute, props-object style', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo(props: { createdAt: Date }) {
+        return <div data-x={/* @client */ props.createdAt.toISOString()} />
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('date(_p.createdAt, "toISOString")')
+    expect(clientJs).not.toContain('props.createdAt.toISOString()')
+  })
+
+  test('non-@client reactive attribute, a catalogued call — the broader gap #2641 found: this site has no directive at all, and previously spliced the raw call verbatim too', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt, label }: { createdAt: Date; label: string }) {
+        return <time data-iso={createdAt.toISOString()}>{label}</time>
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('date(_p.createdAt, "toISOString")')
+    expect(clientJs).not.toContain('_p.createdAt.toISOString()')
+  })
+
+  test('an explicit-locale toLocaleDateString in attribute position lowers to formatDate(...)', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div data-x={/* @client */ createdAt.toLocaleDateString('ja-JP', { timeZone: 'UTC' })} />
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('formatDate(_p.createdAt, "YYYY/M/D", "UTC")')
+  })
+
+  test('an uncatalogued attribute method call stays verbatim', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div data-x={/* @client */ createdAt.getDay()} />
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('createdAt.getDay()')
+    expect(clientJs).not.toContain('date(')
+  })
+
+  test('a non-Date reactive attribute is untouched', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ label }: { label: string }) {
+        return <div data-x={/* @client */ label.toUpperCase()} />
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('label.toUpperCase()')
+    expect(clientJs).not.toContain('date(')
+  })
+})
+
+describe('#2645 — /* @client */ text expressions elide in the static/CSR template like SSR', () => {
+  // `irToComponentTemplateWithOpts`'s 'expression' case never checked
+  // `node.clientOnly` — a bare-destructured-prop receiver (`isSimplePropExpression`
+  // treats `createdAt.toISOString()` as "simple") routed to this static
+  // template builder, which had no clientOnly awareness and inlined the
+  // (possibly lowered) value directly, breaking SSR/CSR byte parity: SSR
+  // renders the @client region empty, this builder rendered it populated.
+  test('markerless: the region is fully empty, matching SSR', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div>{/* @client */ createdAt.toISOString()}</div>
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('template: (_p) => `<div bf="s1"></div>`')
+  })
+
+  test('marker pair (adjacent static text defeats markerless elision): empty marker pair, no inlined value', () => {
+    const { clientJs, bf021 } = compile(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div>ISO: {/* @client */ createdAt.toISOString()}</div>
+      }
+    `)
+    expect(bf021).toHaveLength(0)
+    expect(clientJs).toContain('template: (_p) => `<div bf="s1">ISO: <!--bf:s0--><!--/--></div>`')
+  })
+})

package/src/__tests__/env-signal-template-prelude.test.ts

@@ -0,0 +1,87 @@
+/**
+ * #2654 — the CSR `template:` lambda must declare its own env-signal
+ * getter (`createSearchParams()`, #2057) before referencing it, instead
+ * of relying on `init`'s `const [<getter>] = createSearchParams()`
+ * closure — the template lambda runs at module scope and has no access
+ * to that init-local binding, so the bare call ReferenceErrors at
+ * template-evaluation time.
+ *
+ * See `buildTemplateDefPart` in `../ir-to-client-js/emit-registration.ts`.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function compileClient(source: string, fileName: string): string {
+  const result = compileJSX(source, fileName, { adapter })
+  expect(result.errors).toHaveLength(0)
+  const clientJs = result.files.find((f) => f.type === 'clientJs')
+  return clientJs?.content ?? ''
+}
+
+describe('#2654 — env-signal getter self-declared in the template lambda', () => {
+  test('default getter name (`searchParams`): template lambda declares its own copy', () => {
+    const source = `
+      import { createSearchParams } from '@barefootjs/client'
+      export function SortLabel() {
+        const [searchParams] = createSearchParams()
+        return <p>{searchParams().get('sort') ?? 'none'}</p>
+      }
+    `
+    const clientJs = compileClient(source, 'SortLabel.tsx')
+
+    // The template lambda gets a block body with its own prelude
+    // declaration ahead of the returned template literal.
+    expect(clientJs).toMatch(
+      /template:\s*\(_p\)\s*=>\s*\{\s*const \[searchParams\] = createSearchParams\(\);\s*return\s*`/,
+    )
+    // The getter call inside the template body is untouched (still a
+    // real call — csr-substitute.ts deliberately leaves env-signal
+    // getters as live calls, not baked initial values).
+    expect(clientJs).toMatch(/\$\{escapeText\(searchParams\(\)\.get\('sort'\) \?\? 'none'\)\}/)
+    // `init` keeps its own independent destructure — unaffected by the
+    // template-lambda prelude.
+    expect(clientJs).toMatch(/export function initSortLabel[\s\S]*const \[searchParams\] = createSearchParams\(\)/)
+  })
+
+  test('aliased getter name (`sp`): prelude uses the destructured alias, not the canonical name', () => {
+    const source = `
+      'use client'
+      import { createMemo, createSearchParams } from '@barefootjs/client'
+      export function SortStatus() {
+        const [sp] = createSearchParams()
+        const sort = createMemo(() => sp().get('sort') ?? 'date')
+        return <p>sort: {sort()}</p>
+      }
+    `
+    const clientJs = compileClient(source, 'SortStatus.tsx')
+
+    expect(clientJs).toMatch(
+      /template:\s*\(_p\)\s*=>\s*\{\s*const \[sp\] = createSearchParams\(\);\s*return\s*`/,
+    )
+    // The memo body substitution inlines the memo's computation, still
+    // calling the self-declared `sp()` getter — no bare, undeclared
+    // reference reaches the module-scope lambda.
+    expect(clientJs).toMatch(/sp\(\)\.get\('sort'\) \?\? 'date'/)
+  })
+
+  test('component with no env signal keeps the plain expression-body template (no prelude leak)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Counter() {
+        const [count] = createSignal(0)
+        return <p>{count()}</p>
+      }
+    `
+    const clientJs = compileClient(source, 'Counter.tsx')
+
+    // Plain expression-body form — unconditional prelude emission must
+    // not leak into components that hold no env signal.
+    expect(clientJs).toMatch(/template:\s*\(_p\)\s*=>\s*`/)
+    expect(clientJs).not.toMatch(/template:\s*\(_p\)\s*=>\s*\{/)
+  })
+})

package/src/__tests__/prop-references.test.ts

@@ -311,6 +311,78 @@ describe('ClientJS generation with semantic prop refs', () => {
   })
 })
 
+// Issue #2634 regression test: a prop used ONLY inside a `/* @client */`
+// expression was never extracted from `_p` — the identifier reached
+// `createEffect`'s body unbound, throwing `ReferenceError` at hydrate.
+// `buildReferencesGraph` (build-references.ts) deliberately skips adding a
+// `template-closure` edge for a clientOnly expression (it isn't template-
+// reachable), but was never wired to `ctx.clientOnlyElements` either, so no
+// edge of ANY kind reached `neededProps` and `emitPropsExtraction` had no
+// evidence the prop was used at all.
+describe('Issue #2634 regression', () => {
+  test('a destructured prop used only inside /* @client */ is extracted from _p', () => {
+    const source = `
+      interface Props {
+        label: string
+      }
+
+      export function LabelClientOnly({ label }: Props) {
+        return <div>{/* @client */ label.toUpperCase()}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'LabelClientOnly.tsx', { adapter })
+
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find((f) => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    // The prop must be bound before the createEffect body reads it.
+    expect(clientJs?.content).toContain('const label = _p.label')
+    // A bare `label` reference with no preceding binding is exactly the
+    // unbound-identifier shape that threw ReferenceError at hydrate.
+    expect(clientJs?.content).toMatch(/const label = _p\.label[\s\S]*label\.toUpperCase\(\)/)
+  })
+
+  test('a props-object member used only inside /* @client */ needs no extraction (already _p.x)', () => {
+    const source = `
+      interface Props {
+        label: string
+      }
+
+      export function LabelClientOnly(props: Props) {
+        return <div>{/* @client */ props.label.toUpperCase()}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'LabelClientOnly.tsx', { adapter })
+
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find((f) => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    expect(clientJs?.content).toContain('_p.label.toUpperCase()')
+  })
+
+  test('a prop used both in a normal reactive position AND inside /* @client */ is still extracted once', () => {
+    const source = `
+      interface Props {
+        label: string
+      }
+
+      export function LabelBoth({ label }: Props) {
+        return <div><span>{label}</span><span>{/* @client */ label.toUpperCase()}</span></div>
+      }
+    `
+
+    const result = compileJSX(source, 'LabelBoth.tsx', { adapter })
+
+    expect(result.errors).toHaveLength(0)
+    const clientJs = result.files.find((f) => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    const matches = clientJs?.content.match(/const label = _p\.label/g) ?? []
+    expect(matches).toHaveLength(1)
+  })
+})
+
 // Issue #257 regression test: Double props prefix in template literals
 describe('Issue #257 regression', () => {
   test('does NOT double-wrap props.xxx when already prefixed', () => {

package/src/__tests__/rich-type-method-refusal.test.ts

@@ -173,14 +173,78 @@ describe('rich-type method-call refusal — fires (BF021)', () => {
     expect(errors[0].message).toContain("'Map'")
   })
 
-  test('diagnostic carries the @client suggestion', () => {
+  // #2636: bare /* @client */ crashes at hydrate for every rich-type
+  // receiver here (the prop arrives de-riched over the JSON bf-p boundary),
+  // so the suggestion must never recommend it bare. Date/URL (JSON-revivable
+  // via their own one-arg constructor) get an explicit-revival @client form
+  // instead; every other host rich type gets pre-compute only.
+  test('Date generic method: pre-compute lead + explicit-revival @client escape, never a bare @client', () => {
     const errors = bf021(`
       export function Foo({ createdAt }: { createdAt: Date }) {
         return <div>{createdAt.toISOString()}</div>
       }
     `)
     expect(errors[0].severity).toBe('error')
-    expect(errors[0].suggestion?.message).toContain('@client')
+    const message = errors[0].suggestion?.message ?? ''
+    expect(message).toContain('Pre-compute')
+    expect(message).toContain('new Date(createdAt)')
+    expect(message).not.toMatch(/Add \/\* @client \*\//)
+    expect(errors[0].suggestion?.escape).toEqual([{ kind: 'prop-precompute' }, { kind: 'client-directive' }])
+  })
+
+  test('Map method: pre-compute only, explicit no-safe-@client-escape warning', () => {
+    const errors = bf021(`
+      export function Foo({ m }: { m: Map<string, string> }) {
+        return <div>{m.get('x')}</div>
+      }
+    `)
+    const message = errors[0].suggestion?.message ?? ''
+    expect(message).toContain('Pre-compute')
+    expect(message).toContain('NOT a safe escape')
+    expect(message).not.toContain('new Map(')
+    expect(errors[0].suggestion?.escape).toEqual([{ kind: 'prop-precompute' }])
+  })
+
+  // Zero-arg toLocaleDateString() is BF021's one case where the refusal is
+  // deliberately ADAPTER-UNIFORM rather than a DSL-adapter-only gap (unlike
+  // BF101's "JS-runtime executes verbatim" carve-out): `TestAdapter extends
+  // JsxAdapter` (adapter-hono's own base class) here, and it still refuses.
+  // See #2356's decision comment and `date-method-uncatalogued.ts`'s
+  // docstring — a JS-runtime adapter's hydrate leg re-evaluates a
+  // prop-derived expression against a JSON-de-riched receiver (a `Date`
+  // prop arrives as its ISO string), so "the SSR runtime can evaluate the
+  // call" does not make the compiled artifact sound; the compiler doesn't
+  // special-case this adapter class here on purpose.
+  test('zero-arg toLocaleDateString() refuses even on a JsxAdapter (#2356 — adapter-uniform by design)', () => {
+    const errors = bf021(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div>{createdAt.toLocaleDateString()}</div>
+      }
+    `)
+    expect(errors).toHaveLength(1)
+    expect(errors[0].message).toContain("'.toLocaleDateString()'")
+    expect(errors[0].message).toContain("'createdAt'")
+    // The suggestion for this specific method+type points at the
+    // literal-locale/timeZone escape (#2324) ahead of the generic
+    // pre-compute-or-revival fallback every other BF021 carries.
+    const message = errors[0].suggestion?.message ?? ''
+    expect(message).toContain('literal locale')
+    // #2636: even this branch's @client escape must be the explicit-revival
+    // form, never a bare /* @client */.
+    expect(message).toContain('new Date(createdAt)')
+    expect(errors[0].suggestion?.escape).toEqual([{ kind: 'rewrite' }, { kind: 'prop-precompute' }, { kind: 'client-directive' }])
+  })
+
+  test('URL generic method: revivable tier applies past Date (#2636)', () => {
+    const errors = bf021(`
+      export function Foo({ href }: { href: URL }) {
+        return <div>{href.toString()}</div>
+      }
+    `)
+    expect(errors).toHaveLength(1)
+    const message = errors[0].suggestion?.message ?? ''
+    expect(message).toContain('new URL(href)')
+    expect(errors[0].suggestion?.escape).toEqual([{ kind: 'prop-precompute' }, { kind: 'client-directive' }])
   })
 })
 
@@ -194,6 +258,19 @@ describe('rich-type method-call refusal — silent (no BF021)', () => {
     expect(errors).toHaveLength(0)
   })
 
+  // Pins the premise the revivable-tier suggestion (#2636) depends on: a
+  // /* @client */ block that wraps the receiver in `new Date(...)` first is
+  // itself a call-result receiver (resolveReceiverType → null), so it never
+  // fires BF021 — the same reason a bare @client call never fires above.
+  test('/* @client */ with explicit new Date(...) revival wrapper', () => {
+    const errors = bf021(`
+      export function Foo({ createdAt }: { createdAt: Date }) {
+        return <div>{/* @client */ new Date(createdAt).getUTCFullYear()}</div>
+      }
+    `)
+    expect(errors).toHaveLength(0)
+  })
+
   test('/* @client */-wrapped conditional branch', () => {
     const errors = bf021(`
       export function Foo({ d }: { d: Date | null }) {