@barefootjs/jsx 0.26.2 → 0.26.4

package/src/__tests__/delegated-handler-preamble.test.ts

@@ -0,0 +1,153 @@
+/**
+ * A keyed `.map()` body with an array-builder preamble (`const cells = [];
+ * cells.push(<span>...)`) plus a row-level event handler used to make EVERY
+ * delegated action throw `t is not a function` (BUG-3).
+ *
+ * Root cause: the delegated handler's item-lookup binds the plain `.find()`
+ * result under the loop param (`const t = items().find(...)`) — `t` is a
+ * plain object there, never a signal accessor. But the preamble's JSX leaf
+ * was rendered through `irToHtmlTemplate` WITH a loopParams spec, the same
+ * one used for the mapArray row-render context (where the param genuinely
+ * IS an accessor). That rewrote leaf refs to `t().name` — a call on a plain
+ * object — which throws at click time.
+ *
+ * `build-event-delegation.ts` now renders the delegation-context preamble
+ * leaf with no loopParams spec, so refs stay in their plain (`t.name`) form.
+ * It also only splices the preamble into a given event's handler when that
+ * handler's free identifiers actually reference one of the preamble's
+ * declared names (`MapCallbackPreamble.declaredNames`) — the common case is
+ * an array builder the handler never reads (`cells` here) — and, when
+ * spliced, the preamble always runs INSIDE the item-null guard (BUG-4: a
+ * `.find()` miss from a stale-DOM race must short-circuit before a preamble
+ * that dereferences the item runs).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function clientJsFor(source: string): string {
+  const result = compileJSX(source, 'Repro.tsx', { adapter })
+  expect(result.errors.filter((e) => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find((f) => f.type === 'clientJs')
+  expect(clientJs).toBeDefined()
+  return clientJs!.content
+}
+
+/**
+ * The delegated-dispatcher body sits between the loop's `addEventListener`
+ * call and the `hydrate(...)` call that follows it in the emitted module —
+ * isolate it so assertions about the HANDLER shape don't accidentally match
+ * the (legitimately accessor-form) mapArray row-render callback that
+ * precedes it in the same file.
+ */
+function delegationBlock(js: string): string {
+  const start = js.indexOf('.addEventListener(')
+  const end = js.indexOf('\n\nhydrate(')
+  expect(start).toBeGreaterThan(-1)
+  expect(end).toBeGreaterThan(start)
+  return js.slice(start, end)
+}
+
+describe('delegated-handler preamble splicing (BUG-3 / BUG-4)', () => {
+  test('unreferenced array-builder preamble: no getter-call leaf refs, no dead splice', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function R2a() {
+        const [items, setItems] = createSignal([{ id: 1, name: 'x' }, { id: 2, name: 'y' }])
+        const del = (id: number) => setItems(items().filter(i => i.id !== id))
+        return <ul id="list">{items().map(t => {
+          const cells = []
+          cells.push(<span>{t.name}</span>)
+          return <li key={t.id}>{cells}<button className="del" onClick={() => del(t.id)}>del</button></li>
+        })}</ul>
+      }
+    `)
+    const handler = delegationBlock(js)
+
+    // BUG-3: the leaf inside the delegation-context preamble must stay in
+    // plain-object form — `t` is the `.find()` result, not a signal accessor.
+    expect(handler).not.toContain('t().')
+
+    // The preamble (`cells`) is never read by the click handler
+    // (`() => del(t.id)`) — it must not be spliced into the dispatcher at
+    // all. `cells.push` legitimately appears three times elsewhere: the
+    // mapArray row-render callback, the SSR-template literal it mirrors,
+    // and (#2389 patch-on-update) the `{cells}` region-patch effect, which
+    // re-runs the preamble so it re-reads the live per-item signal. It must
+    // not appear a FOURTH time, in the handler.
+    expect(handler).not.toContain('cells.push')
+    expect(js.split('cells.push')).toHaveLength(4) // three occurrences total
+
+    // The item guard still gates the handler call.
+    expect(handler).toContain('if (t) {')
+    expect(handler).toContain('(() => del(t.id))(__bfEvt)')
+  })
+
+  test('preamble referenced by the handler: spliced in plain form, inside the item guard', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function R2b() {
+        const [items, setItems] = createSignal([{ id: 1, name: 'x' }, { id: 2, name: 'y' }])
+        const del = (label: string) => setItems(items().filter(i => i.name !== label))
+        return <ul id="list">{items().map(t => {
+          const label = t.name + '!'
+          return <li key={t.id}>{label}<button className="del" onClick={() => del(label)}>del</button></li>
+        })}</ul>
+      }
+    `)
+    const handler = delegationBlock(js)
+
+    // Spliced in plain (non-getter) form.
+    expect(handler).toContain('const label = t.name + \'!\';')
+    expect(handler).not.toContain('t().')
+
+    // Guard-order (part 3): the preamble line and the handler call both
+    // land AFTER `if (t) {`, i.e. inside the item-null guard.
+    const guardIdx = handler.indexOf('if (t) {')
+    const preambleIdx = handler.indexOf('const label = t.name')
+    const callIdx = handler.indexOf('(() => del(label))(__bfEvt)')
+    expect(guardIdx).toBeGreaterThanOrEqual(0)
+    expect(preambleIdx).toBeGreaterThan(guardIdx)
+    expect(callIdx).toBeGreaterThan(preambleIdx)
+  })
+
+  test('destructured param + preamble + handler: no accessor leaks, real destructure resolves refs', () => {
+    const js = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function R2c() {
+        const [items, setItems] = createSignal([{ id: 1, name: 'x' }, { id: 2, name: 'y' }])
+        const del = (label: string) => setItems(items().filter(i => i.name !== label))
+        return <ul id="list">{items().map(({ id, name }) => {
+          const label = name + '!'
+          return <li key={id}>{label}<button className="del" onClick={() => del(label)}>del</button></li>
+        })}</ul>
+      }
+    `)
+    const handler = delegationBlock(js)
+
+    // No `__bfItem()`-style accessor leaks into the delegated handler — the
+    // destructured names resolve as real local bindings off `__bfLoopItem`.
+    expect(handler).not.toContain('__bfItem(')
+
+    // Real destructure (#951 TDZ-safe shape) binds `id`/`name` for real —
+    // the preamble and handler both close over the resulting plain locals.
+    expect(handler).toContain('const __bfLoopItem = ')
+    expect(handler).toContain('const { id, name } = __bfLoopItem')
+    expect(handler).toContain('const label = name + \'!\';')
+    expect(handler).toContain('(() => del(label))(__bfEvt)')
+
+    // Guard-order holds for the bindings-branch shape too.
+    const guardIdx = handler.indexOf('if (__bfLoopItem) {')
+    const preambleIdx = handler.indexOf('const label = name')
+    const callIdx = handler.indexOf('(() => del(label))(__bfEvt)')
+    expect(guardIdx).toBeGreaterThanOrEqual(0)
+    expect(preambleIdx).toBeGreaterThan(guardIdx)
+    expect(callIdx).toBeGreaterThan(preambleIdx)
+  })
+})

package/src/__tests__/event-delegation-scope-2367.test.ts

@@ -0,0 +1,108 @@
+/**
+ * BarefootJS Compiler - Delegated handler slot lookups are scoped (#2367)
+ *
+ * A stateful component's delegated event handlers resolve the child slot that
+ * owns an event with `target.closest('[bf="sN"]')`. Because `bf` ids are
+ * assigned **per component**, the same id string legitimately exists in
+ * several components — so an *unscoped* `closest()` climbs across component
+ * boundaries and can match a same-id element in an ancestor component. The
+ * delegation then takes the wrong branch, fails a downstream lookup, and
+ * silently drops the real handler (no error thrown).
+ *
+ * The fix guards the match with `<container>.contains(sNEl)`. The delegating
+ * container holds every slot it delegates on, so a same-id element in an
+ * *ancestor* component (never a descendant of the container) is rejected and
+ * the handler falls through to the correct branch — without growing the
+ * client runtime (native `closest` + native `contains`).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('delegated handler slot lookups are container-scoped (#2367)', () => {
+  test('keyed dynamic loop guards each slot match with container.contains', () => {
+    // WordTable-shaped repro: a <tbody> delegates keydown to two input slots
+    // (front/back). Each slot match must be gated to the tbody container.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Row { id: string; front: string; back: string }
+
+      export function WordTable() {
+        const [rows, setRows] = createSignal<Row[]>([])
+        const handleFront = (row: Row) => console.log('front', row.id)
+        const handleBack = (row: Row) => console.log('back', row.id)
+
+        return (
+          <table>
+            <tbody>
+              {rows().map(row => (
+                <tr key={row.id}>
+                  <td><input onKeyDown={() => handleFront(row)} /></td>
+                  <td><input onKeyDown={() => handleBack(row)} /></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )
+      }
+    `
+    const result = compileJSX(source, 'WordTable.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')!
+    const content = clientJs.content
+
+    // Delegation is wired on the tbody container.
+    expect(content).toContain(".addEventListener('keydown', (__bfEvt) => {")
+
+    // The container variable the listener is attached to.
+    const containerMatch = content.match(/if \((_s\d+)\) \1\.addEventListener\('keydown'/)
+    expect(containerMatch).not.toBeNull()
+    const container = containerMatch![1]
+
+    // Both slot branches gate the match on `<container>.contains(sNEl)` so a
+    // same-id element in an ancestor component (never a descendant of the
+    // container) can't be taken.
+    const guards = [...content.matchAll(/if \((s\d+)El && (_s\d+)\.contains\(\1El\)\)/g)]
+    expect(guards.length).toBe(2)
+    for (const m of guards) {
+      expect(m[2]).toBe(container)
+    }
+
+    // The lookup itself stays a plain native `closest` — no new runtime helper.
+    expect(content).toContain(`target.closest('[bf="`)
+    expect(content).not.toContain('closestWithin')
+  })
+
+  test('static-array delegation is also gated by container.contains', () => {
+    const source = `
+      'use client'
+
+      export function List() {
+        const items = [{ id: '1', label: 'A' }, { id: '2', label: 'B' }]
+        const handleClick = (id: string) => console.log('item', id)
+
+        return (
+          <ul>
+            {items.map(item => (
+              <li key={item.id}>
+                <button onClick={() => handleClick(item.id)}>Go</button>
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const result = compileJSX(source, 'List.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toMatch(/if \(s\d+El && _s\d+\.contains\(s\d+El\)\)/)
+    expect(content).not.toContain('closestWithin')
+  })
+})

package/src/__tests__/flatmap-segments.test.ts

@@ -0,0 +1,262 @@
+/**
+ * flatMap block bodies ride the structured-segments carrier (flatMap
+ * unification, spec/callback-fidelity.md root cure): the same
+ * `renderPreamble()` door as `.map()` preambles, no `__BF_JSX_N__` sentinel.
+ * Pins the two behavior fixes that ride the shared machinery:
+ *
+ * - leaf text interpolations escape like the SSR JSX runtime (`escapeText`),
+ * - TS type annotations in the block body are stripped from the client
+ *   bundle (the old raw-slice carrier spliced them verbatim — invalid JS).
+ *
+ * Byte-level SSR/CSR parity for flatMap block bodies is NOT pinned at the
+ * conformance layer: the CSR string render and the Hono rawBody SSR have
+ * pre-existing structural asymmetries (leaf `data-key` emitted client-side
+ * only, with an unescaped attribute value; slot comment markers client-side
+ * only) that predate the unification and need their own investigation —
+ * see the known-limitation issue referenced in the changeset.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+describe('flatMap block bodies on structured segments', () => {
+  test('leaf text interpolations are escapeText-wrapped in the client bundle', () => {
+    // The early return keeps this a STATEMENT-carrying body (segments
+    // carrier) — a pure single-`return` projection now lowers to neutral
+    // nested-loop IR instead (see the projection tests below).
+    const src = `
+function F({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => {
+    if (it.tags.length > 9) return []
+    return it.tags.map((t) => <li key={t}>{t}</li>)
+  })}</ul>
+}
+export { F }
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    expect(r.errors).toHaveLength(0)
+    const cj = r.files.find(f => f.type === 'clientJs')!.content
+    expect(cj).toMatch(/escapeText\(\(t\)\)/)
+    expect(cj).not.toMatch(/__BF_JSX_/)
+  })
+
+  test('destructured prop refs rewrite to _p.xxx in the hydrate template', () => {
+    // The hydrate registration template is module scope (`template: (_p) =>`),
+    // so a bare destructured-prop reference in the flatMap body would be a
+    // runtime ReferenceError. Per-segment templateText (rewriteBarePropRefs)
+    // + textVariant 'template' at the CSR-template site rewrite it.
+    const src = `
+function F({ limit, items }: { limit: number; items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => {
+    if (it.tags.length > limit) return []
+    return it.tags.map((t) => <li key={t}>{t}</li>)
+  })}</ul>
+}
+export { F }
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    expect(r.errors).toHaveLength(0)
+    const cj = r.files.find(f => f.type === 'clientJs')!.content
+    const tpl = cj.match(/template: \(_p\) => `[\s\S]*?` \}\)/)?.[0] ?? ''
+    expect(tpl).toMatch(/_p\.limit/)
+    expect(tpl).not.toMatch(/[^.\w]limit\b/)
+  })
+
+  test('projection expression bodies lower to neutral IR + descriptor client', () => {
+    // `it => it.tags.map(...)` (no braces, no statements) is a pure
+    // nested-loop PROJECTION: it lowers to neutral IR (inner IRLoop child)
+    // that every SSR adapter templatizes — including DSL backends, per
+    // spec/callback-fidelity.md's fidelity table — while the client
+    // reconciles the flattened leaves through the descriptor mapArray path
+    // synthesized from the same inner loop. Pre-fix it fell through to the
+    // IRExpression scalar path and spliced raw JSX into the bundle.
+    const src = `
+function F({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => it.tags.map((t) => <li key={t}>{t}</li>))}</ul>
+}
+export { F }
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    expect(r.errors).toHaveLength(0)
+    const cj = r.files.find(f => f.type === 'clientJs')!.content
+    // No raw JSX anywhere in the bundle.
+    expect(cj).not.toMatch(/<li key=\{t\}>/)
+    expect(cj).not.toMatch(/__BF_JSX_/)
+    if (cj.includes('mapArray(')) {
+      // Descriptor accessor flattens through the inner loop with the leaf key.
+      expect(cj).toMatch(/\.flatMap\(\(it\) => it\.tags\.map\(\(t\) => \(\{ k: \(t\), h: `<li/)
+      expect(cj).toMatch(/String\(__bfD\.k \?\? __bfI\)/)
+    }
+  })
+
+  test('a member-expression tag leaf is a component, not a projection leaf', () => {
+    // `<icons.Tag/>` starts lowercase but is a component per JSX semantics —
+    // the wireless-leaf gate must not admit it to the projection route
+    // (which cannot wire components). It falls to the segments carrier,
+    // where a DSL-tier adapter refuses loudly instead of templatizing a
+    // component tag as literal HTML.
+    const src = `
+import { icons } from './icons'
+function F({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => it.tags.map((t) => <icons.Tag key={t} label={t} />))}</ul>
+}
+export { F }
+`
+    const dsl = new TestAdapter()
+    ;(dsl as { acceptsCallbackBody?: () => boolean }).acceptsCallbackBody = () => false
+    const r = compileJSX(src, 'F.tsx', { adapter: dsl })
+    expect(r.errors.filter(e => e.severity === 'error').length).toBeGreaterThan(0)
+  })
+
+  test('single-return block projection lowers identically (DSL adapters accept it)', () => {
+    const src = `
+function F({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => {
+    return it.tags.map((t) => <li key={t}>{t}</li>)
+  })}</ul>
+}
+export { F }
+`
+    const dsl = new TestAdapter()
+    ;(dsl as { acceptsCallbackBody?: () => boolean }).acceptsCallbackBody = () => false
+    const r = compileJSX(src, 'F.tsx', { adapter: dsl })
+    // Neutral IR — no BF021 gate on a DSL-tier adapter.
+    expect(r.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  })
+
+  test('destructured prop refs rewrite to _p.xxx in expression-body hydrate templates', () => {
+    const src = `
+function F({ owner, items }: { owner: string; items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => it.tags.map((t) => <li key={t}>{t} ({owner})</li>))}</ul>
+}
+export { F }
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    expect(r.errors).toHaveLength(0)
+    const cj = r.files.find(f => f.type === 'clientJs')!.content
+    const tpl = cj.match(/template: \(_p\) => `[\s\S]*?` \}\)/)?.[0] ?? ''
+    expect(tpl).toMatch(/_p\.owner/)
+    expect(tpl).not.toMatch(/[^.\w]owner\b/)
+  })
+
+  test('client loop reconciles the FLATTENED descriptors, not the source items', () => {
+    // The mapArray accessor flattens through the callback body — each leaf a
+    // `({ k, h })` descriptor keyed by the leaf's own `key` — so hydration
+    // adopts every SSR leaf (not one per source item), adds build real
+    // elements from `h` (not an empty template), and the keyFn is the leaf
+    // key (not null/index). This pins the client half of the flatMap loop;
+    // pre-fix it emitted `mapArray(() => todos(), _sN, null, …innerHTML = ``…)`
+    // — leaf loss at hydration and a cloneNode(null) crash on adds.
+    const src = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+export function F() {
+  const [todos, setTodos] = createSignal<{ id: number; tags: string[] }[]>([{ id: 1, tags: ['a'] }])
+  return <ul>{todos().flatMap((t) => {
+    if (t.tags.length > 5) return []
+    const prefix = t.id + ':'
+    return t.tags.map((tag) => <li key={\`\${t.id}:\${tag}\`}>{prefix}{tag}</li>)
+  })}</ul>
+}
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    expect(r.errors).toHaveLength(0)
+    const cj = r.files.find(f => f.type === 'clientJs')!.content
+    // Flattened source with descriptor leaves…
+    expect(cj).toMatch(/mapArray\(\(\) => \(todos\(\)\)\.flatMap\(\(t\) => \{/)
+    expect(cj).toMatch(/\(\{ k: \(`\$\{t\.id\}:\$\{tag\}`\), h: `<li>/)
+    // …keyed on the leaf key with index fallback…
+    expect(cj).toMatch(/\(__bfD, __bfI\) => String\(__bfD\.k \?\? __bfI\)/)
+    // …renderItem builds from the descriptor HTML and patches on change…
+    expect(cj).toMatch(/__tpl\.innerHTML = __bfD\(\)\.h/)
+    expect(cj).toMatch(/patchLeaf\(__el, __html\)/)
+    // …and the statements-before-return are NOT duplicated as a renderItem
+    // preamble (the segments carrier is the single door).
+    expect(cj).not.toMatch(/return \[\];* if \(__existing\)/)
+    // Leaf data-key never rides the string templates — mapArray stamps it.
+    expect(cj).not.toMatch(/data-key/)
+  })
+
+  test('a leaf with an event handler refuses loudly (no silent dead DOM)', () => {
+    const src = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+export function F() {
+  const [todos, setTodos] = createSignal<{ id: number; tags: string[] }[]>([])
+  return <ul>{todos().flatMap((t) => {
+    return t.tags.map((tag) => <li key={tag} onClick={() => console.log(tag)}>{tag}</li>)
+  })}</ul>
+}
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    const errs = r.errors.filter(e => e.severity === 'error')
+    expect(errs.length).toBeGreaterThan(0)
+    expect(errs[0].message).toContain('cannot carry')
+  })
+
+  test('a fragment leaf refuses loudly (descriptor path is single-element)', () => {
+    // The renderItem adopts `template.content.firstElementChild` and
+    // patchLeaf patches ONE element root — a fragment leaf would silently
+    // drop its siblings client-side while SSR renders them all.
+    const src = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+export function F() {
+  const [todos, setTodos] = createSignal<{ id: number; tags: string[] }[]>([])
+  return <ul>{todos().flatMap((t) => {
+    return t.tags.map((tag) => <><b>{tag}</b><i>{tag}</i></>)
+  })}</ul>
+}
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    const errs = r.errors.filter(e => e.severity === 'error')
+    expect(errs.length).toBeGreaterThan(0)
+    expect(errs.some(e => e.message.includes('must be a single'))).toBe(true)
+  })
+
+  test('the structural net stays armed when an unrelated diagnostic fired earlier', () => {
+    // The scalar-fallthrough net de-dups against refusals fired during the
+    // SAME map call (entry-count gate), never against diagnostics recorded
+    // earlier in the file — a prior error in another loop must not let raw
+    // JSX splice silently into the bundle.
+    const src = `
+'use client'
+import { createSignal } from '@barefootjs/client'
+export function F() {
+  const [todos, setTodos] = createSignal<{ id: number; tags: string[] }[]>([])
+  const wrap = (n: unknown) => n
+  return <div>
+    <ul>{todos().flatMap((t) => {
+      return t.tags.map((tag) => <li key={tag} onClick={() => console.log(tag)}>{tag}</li>)
+    })}</ul>
+    <ol>{todos().map((t) => wrap(<li>{t.id}</li>))}</ol>
+  </div>
+}
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    const errs = r.errors.filter(e => e.severity === 'error')
+    // One refusal per loop: the leaf-wiring refusal AND the structural net.
+    expect(errs.some(e => e.message.includes('cannot carry'))).toBe(true)
+    expect(errs.some(e => e.message.includes('would leak verbatim'))).toBe(true)
+  })
+
+  test('TS type annotations in the block body are stripped from the client bundle', () => {
+    const src = `
+function F({ items }: { items: { id: string; labels: string[] }[] }) {
+  return <ul>{items.flatMap((it) => {
+    const upper: string[] = it.labels
+    return upper.map((l) => <li key={l}>{l}</li>)
+  })}</ul>
+}
+export { F }
+`
+    const r = compileJSX(src, 'F.tsx', { adapter: new TestAdapter() })
+    expect(r.errors).toHaveLength(0)
+    const cj = r.files.find(f => f.type === 'clientJs')!.content
+    // The annotation must not survive into plain JS...
+    expect(cj).not.toMatch(/upper: string\[\]/)
+    // ...while the declaration itself does.
+    expect(cj).toMatch(/const upper = it\.labels/)
+  })
+})