@barefootjs/jsx 0.5.1 → 0.5.3

package/src/__tests__/child-components-in-map.test.ts

@@ -9,6 +9,14 @@ import { HonoAdapter } from '../../../../packages/adapter-hono/src/adapter/hono-
 
 const adapter = new TestAdapter()
 
+/**
+ * Collapse all whitespace so offset assertions match the generated index
+ * math regardless of the printer's spacing inside array literals
+ * (`['a','b']` vs `['a', 'b']`) — the test asserts the offset logic, not
+ * formatting.
+ */
+const noWs = (s: string) => s.replace(/\s+/g, '')
+
 describe('child components inside .map() (#344)', () => {
   test('static array: nested component inside element wrapper generates initChild', () => {
     const source = `
@@ -730,6 +738,374 @@ describe('child components inside .map() (#344)', () => {
     expect(content).not.toContain('children[__idx + ')
   })
 
+  test('static array inside a component container with a preceding static sibling uses siblingOffset (#1688)', () => {
+    // The loop is a direct child of the <Portaled> component (not an
+    // element), with a static <span> sibling before it. Before #1688
+    // computeLoopSiblingOffsets only counted siblings under element
+    // parents, so the offset was silently zero and the first item's
+    // nested child component (Counter) was resolved against the wrong
+    // children[idx] — dropping it during hydration.
+    const source = `
+      'use client'
+
+      function Portaled(props: { children?: any }) {
+        return <div>{props.children}</div>
+      }
+      function Wrapper(props: { children?: any }) {
+        return <div class="wrapper">{props.children}</div>
+      }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button data-testid={props.id} onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function Repro() {
+        return (
+          <Portaled>
+            <span>static sibling</span>
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Portaled>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Repro.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    const content = clientJs!.content
+
+    // The nested Counter lookup must skip the preceding static <span>.
+    expect(content).toContain('children[__idx + 1]')
+    expect(content).not.toContain('children[__idx]')
+  })
+
+  test('a transparent fragment wrapping a .map() inherits the parent container preceding siblings (#1699)', () => {
+    // A fragment renders no DOM element wrapper, so a loop inside `<>…</>` is a
+    // direct sibling of the fragment's siblings in the real parent element.
+    // The offset must skip the two <hr/>s that precede the fragment in <Box>,
+    // not reset to the fragment's own (empty) preceding run.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function FragGroup() {
+        return (
+          <Box>
+            <hr />
+            <hr />
+            <>
+              {['a', 'b'].map(id => (
+                <Wrapper key={id}><Counter id={id} /></Wrapper>
+              ))}
+            </>
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'FragGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // Items start past both <hr/>s.
+    expect(content).toContain('children[__idx + 2]')
+    expect(content).not.toContain('children[__idx]')
+  })
+
+  test('a static sibling inside the fragment still counts toward the offset (#1699 regression guard)', () => {
+    // The fragment's OWN preceding children must keep counting too — the
+    // parent-inheriting flatten must not drop the fragment-internal <span>.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function MixedFrag() {
+        return (
+          <Box>
+            <hr />
+            <>
+              <span>label</span>
+              {['a', 'b'].map(id => (
+                <Wrapper key={id}><Counter id={id} /></Wrapper>
+              ))}
+            </>
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'MixedFrag.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // 1 (parent <hr/>) + 1 (fragment-internal <span>) = 2.
+    expect(content).toContain('children[__idx + 2]')
+  })
+
+  test('two static + .map() groups inside a component: 2nd group offset skips the 1st group items (#1693)', () => {
+    // Follow-up to #1688. With two `<span/> + {arr.map(...)}` groups inside a
+    // self-portaling component, the second group's nested child components
+    // must be resolved past BOTH the static <span>s AND the first group's
+    // mapped items. The static-only offset (#1688) under-counted by the first
+    // array's length, leaving the second group inert after hydration.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) {
+        return <div>{props.children}</div>
+      }
+      function Wrapper(props: { children?: any }) {
+        return <div class="wrapper">{props.children}</div>
+      }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button data-testid={props.id} onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function TwoGroups() {
+        return (
+          <Box>
+            <span>group 1</span>
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+            <span>group 2</span>
+            {['c', 'd'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'TwoGroups.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    const content = clientJs!.content
+
+    // First group: one preceding static <span> → `+ 1`.
+    expect(content).toContain('children[__idx + 1]')
+    // Second group: two static <span>s plus the first group's mapped items →
+    // the runtime length of the first array is added to the static count.
+    expect(noWs(content)).toContain(noWs("children[__idx + 2 + (['a', 'b']).length]"))
+  })
+
+  test('two consecutive pure .map()s inside a component: 2nd loop offset is the 1st array length (#1693)', () => {
+    // No static siblings: the second loop's items still start after the first
+    // loop's items, so the offset is purely the first array's runtime length.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) {
+        return <div>{props.children}</div>
+      }
+      function Wrapper(props: { children?: any }) {
+        return <div class="wrapper">{props.children}</div>
+      }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button data-testid={props.id} onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function TwoLoops() {
+        return (
+          <Box>
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+            {['c', 'd'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'TwoLoops.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // First loop: no preceding siblings → bare access.
+    expect(content).toContain('children[__idx]')
+    // Second loop: offset is the first array's runtime length, no static term.
+    expect(noWs(content)).toContain(noWs("children[__idx + (['a', 'b']).length]"))
+  })
+
+  test('conditional (&&) sibling before a static-array loop adds a runtime ternary offset (#1693)', () => {
+    // A `{cond && <span/>}` sibling renders 1 element when true but ZERO
+    // elements (only comment anchors) when false. Counting it as a static
+    // `1` over-counts the false case, so the loop's nested children resolve
+    // against the wrong `children[idx]`. The offset must be a runtime
+    // `(cond ? 1 : 0)` term that collapses to 0 when the branch is absent.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function CondGroup(props: { show: boolean }) {
+        return (
+          <Box>
+            {props.show && <span>maybe</span>}
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'CondGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // Runtime ternary — `0` when the conditional renders no element. The
+    // condition reuses the same `_p.show` form `insert()` evaluates.
+    expect(content).toContain('children[__idx + (_p.show ? 1 : 0)]')
+    // Must NOT mis-count the conditional as a static sibling.
+    expect(content).not.toContain('children[__idx + 1]')
+  })
+
+  test('ternary sibling with an element in both branches keeps a static offset (#1693)', () => {
+    // `{cond ? <a/> : <b/>}` always renders exactly one element, so both
+    // branch counts are equal and the offset folds to a static `+ 1` — no
+    // runtime ternary needed.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function TernaryGroup(props: { show: boolean }) {
+        return (
+          <Box>
+            {props.show ? <span>a</span> : <em>b</em>}
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'TernaryGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toContain('children[__idx + 1]')
+    expect(content).not.toContain('? 1 : 0')
+  })
+
+  test('non-element (text) sibling before a loop produces no offset (#1693)', () => {
+    // A bare text node is NOT in `.children` (element-only), so it must
+    // contribute 0 to the offset — not be counted as a static sibling.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function TextGroup() {
+        return (
+          <Box>
+            hello
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'TextGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toContain('children[__idx]')
+    expect(content).not.toContain('children[__idx + ')
+  })
+
+  test('nullish/logical (?? / ||) fallback sibling keeps a static offset, not an inverted ternary (#1693)', () => {
+    // `{icon ?? <fallback/>}` transforms to a conditional whose true-branch is
+    // the bare `icon` expression (undecidable element count) and whose false-
+    // branch is the JSX fallback. The element count is statically unknown, so
+    // it must fall back to the legacy flat `1` — NOT emit `(cond ? 0 : 1)`,
+    // which would resolve to 0 and drop the items when `icon` is a real element.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function NullishGroup(props: { icon?: any }) {
+        return (
+          <Box>
+            {props.icon ?? <span>fallback</span>}
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'NullishGroup.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toContain('children[__idx + 1]')
+    // The inverted-count regression — must not appear.
+    expect(content).not.toContain('? 0 : 1')
+  })
+
+  test('preceding per-item-conditional loop does not contribute a bogus .length offset (#1693)', () => {
+    // A `{arr.map(x => cond ? <el/> : null)}` loop renders 0-or-1 element per
+    // item, so its rendered count is NOT `arr.length`. Emitting `+ arr.length`
+    // would over-count; the undecidable loop falls back to the legacy `0`.
+    const source = `
+      'use client'
+
+      function Box(props: { children?: any }) { return <div>{props.children}</div> }
+      function Wrapper(props: { children?: any }) { return <div>{props.children}</div> }
+      function Counter(props: { id: string }) {
+        const [n, setN] = createSignal(0)
+        return <button onClick={() => setN(v => v + 1)}>{n()}</button>
+      }
+      export function MixedLoops() {
+        return (
+          <Box>
+            {['a', 'b', 'c'].map(x => (x === 'b' ? <span key={x}>{x}</span> : null))}
+            {['a', 'b'].map(id => (
+              <Wrapper key={id}><Counter id={id} /></Wrapper>
+            ))}
+          </Box>
+        )
+      }
+    `
+    const result = compileJSX(source, 'MixedLoops.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    // No `.length` term from the undecidable per-item-conditional loop.
+    expect(noWs(content)).not.toContain(noWs("(['a', 'b', 'c']).length"))
+  })
+
   test('nested .map() with multiple inner components emits unique __compEl bindings (#1664)', () => {
     const source = `
       'use client'

package/src/__tests__/combine-client-js.test.ts

@@ -204,6 +204,53 @@ describe('combineParentChildClientJs', () => {
     expect(adminCombined).not.toContain('@bf-child:')
   })
 
+  test('does not treat import-shaped lines inside a string literal as real imports (#1702)', () => {
+    // A data module inlined into the parent exports a code snippet whose
+    // *contents* contain a `"use client"` directive and an `import …` line.
+    // The combiner must not relocate the parent's real runtime import into
+    // that string literal, which previously left `hydrate` undefined.
+    const sample = [
+      '`"use client"',
+      '',
+      "import { createSignal } from '@barefootjs/client'",
+      '',
+      'export function Counter() {}`',
+    ].join('\n')
+    const files = new Map([
+      ['Parent', [
+        "import { hydrate, createSignal } from '@barefootjs/client/runtime'",
+        "import '/* @bf-child:Child */'",
+        `const __bf_inline_0 = { SAMPLE: ${sample} };`,
+        "hydrate('Parent', (el) => {})",
+      ].join('\n')],
+      ['Child', [
+        "import { hydrate, createSignal } from '@barefootjs/client/runtime'",
+        "hydrate('Child', (el) => {})",
+      ].join('\n')],
+    ])
+
+    const result = combineParentChildClientJs(files)
+    const combined = result.get('Parent')!
+
+    // The real runtime import survives as the very first line, with `hydrate`.
+    const firstLine = combined.split('\n')[0]
+    expect(firstLine).toContain('hydrate')
+    expect(firstLine).toContain("from '@barefootjs/client/runtime'")
+    // The only real top-level import is the runtime one — the snippet's inner
+    // import line must remain *inside* the `__bf_inline_0` declaration, not
+    // hoisted above it.
+    const inlineIdx = combined.indexOf('const __bf_inline_0')
+    const snippetImportIdx = combined.indexOf("import { createSignal } from '@barefootjs/client'")
+    expect(snippetImportIdx).toBeGreaterThan(inlineIdx)
+
+    // The snippet string is preserved verbatim — its inner import line is
+    // NOT hoisted out, and `@barefootjs/client` stays intact.
+    expect(combined).toContain("import { createSignal } from '@barefootjs/client'")
+    expect(combined).toContain('export function Counter() {}')
+    expect(combined).toContain("hydrate('Parent',")
+    expect(combined).toContain("hydrate('Child',")
+  })
+
   test('deduplicates imports from shared sources', () => {
     const files = new Map([
       ['Parent', [

package/src/__tests__/dangerously-set-inner-html.test.ts

@@ -0,0 +1,82 @@
+/**
+ * Client-side `dangerouslySetInnerHTML` (the raw-HTML escape hatch).
+ *
+ * The SSR adapters render `dangerouslySetInnerHTML={{ __html: E }}`
+ * natively, but the client codegen used to treat it as a generic reactive
+ * attribute — emitting a bogus `dangerouslySetInnerHTML="[object Object]"`
+ * and never setting `innerHTML`, so a `"use client"` component silently
+ * lost the content on the client. These tests pin the corrected emit:
+ *   - the `{ __html }` object is NEVER serialised as an attribute;
+ *   - the element's raw HTML is emitted as its content (UNescaped — this
+ *     is the intentional escape hatch);
+ *   - a reactive value also drives an `innerHTML` assignment in init.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function getClientJs(source: string, filename: string): string {
+  const result = compileJSX(source, filename, { 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
+}
+
+describe('dangerouslySetInnerHTML (client)', () => {
+  test('reactive value: raw content + innerHTML init, no bogus attribute', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       export function Raw({ html }: { html: string }) {
+         return <div class="x" dangerouslySetInnerHTML={{ __html: html }} />
+       }`,
+      'Raw.tsx',
+    )
+    // Never emitted as an attribute.
+    expect(clientJs).not.toMatch(/dangerouslySetInnerHTML="/)
+    // Raw `.__html` emitted as element content — not via escapeText.
+    expect(clientJs).toMatch(/<div class="x"[^>]*>\$\{.*\.__html.*\}<\/div>/)
+    expect(clientJs).not.toMatch(/escapeText\([^)]*__html/)
+    // Reactive update assigns innerHTML (not setAttribute).
+    expect(clientJs).toMatch(/\.innerHTML = /)
+    expect(clientJs).not.toMatch(/setAttribute\('dangerouslySetInnerHTML'/)
+  })
+
+  test('spread + dangerouslySetInnerHTML: kept out of the spreadAttrs merge', () => {
+    // An element that also carries a spread switches to the
+    // `${spreadAttrs({...})}` merge form; `dangerouslySetInnerHTML` must
+    // not be folded into that object (it would serialise as a bogus
+    // `dangerouslySetInnerHTML="[object Object]"` attribute).
+    const clientJs = getClientJs(
+      `'use client'
+       export function A({ rest, html }: { rest: Record<string, unknown>; html: string }) {
+         return <div {...rest} class="x" dangerouslySetInnerHTML={{ __html: html }} />
+       }`,
+      'A.tsx',
+    )
+    expect(clientJs).toContain('spreadAttrs(')
+    // The merge object must NOT contain a dangerouslySetInnerHTML key…
+    expect(clientJs).not.toMatch(/spreadAttrs\([^)]*dangerouslySetInnerHTML/)
+    expect(clientJs).not.toMatch(/dangerouslySetInnerHTML="/)
+    // …and the raw HTML is still emitted as the element's content.
+    expect(clientJs).toMatch(/<\/div>/)
+    expect(clientJs).toMatch(/\.__html/)
+  })
+
+  test('static value: raw content emitted in the template (no init needed)', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       export function S() {
+         return <div dangerouslySetInnerHTML={{ __html: '<b>hi</b>' }} />
+       }`,
+      'S.tsx',
+    )
+    expect(clientJs).not.toMatch(/dangerouslySetInnerHTML="/)
+    // The literal HTML survives raw in the template content.
+    expect(clientJs).toMatch(/<div[^>]*>\$\{.*__html.*\}<\/div>/)
+    expect(clientJs).not.toMatch(/escapeText\([^)]*__html/)
+  })
+})

package/src/__tests__/static-loop-csr-materialize.test.ts

@@ -203,8 +203,9 @@ describe('#1247 — static-loop CSR self-heal', () => {
     // the inner `it` param).
     expect(clientJs).toMatch(/items\.map\(\(it, i\) =>/)
     // The inner per-item HTML references the inner destructured param
-    // directly (`${it}` in the template), not via a `__bfItem` accessor.
-    expect(clientJs).toMatch(/\$\{it\}/)
+    // directly (`${escapeText(it)}` in the template — text slots are
+    // HTML-escaped, #1694), not via a `__bfItem` accessor.
+    expect(clientJs).toMatch(/\$\{escapeText\(it\)\}/)
     expect(clientJs).not.toMatch(/__bfItem\(\)/)
   })
 
@@ -335,7 +336,8 @@ describe('#1247 — static-loop CSR self-heal', () => {
     // Preamble is NOT duplicated inside the materialize branch.
     expect(materializeBlock).not.toMatch(/const count = users\.length/)
     // The cloned template still references `count` — now resolved by the
-    // forEach-scope `const` introduced just above.
-    expect(materializeBlock).toMatch(/\$\{String\(count\)\}/)
+    // forEach-scope `const` introduced just above. Text slots are
+    // HTML-escaped (#1694), so it appears as `${escapeText(String(count))}`.
+    expect(materializeBlock).toMatch(/\$\{escapeText\(String\(count\)\)\}/)
   })
 })

package/src/__tests__/text-slot-escaping.test.ts

@@ -0,0 +1,56 @@
+/**
+ * Text-slot HTML-escaping emit shape (#1694 + follow-up).
+ *
+ * Pins which interpolations the client template wraps in `escapeText`:
+ *   - a plain text slot (`{stringValue}`) IS escaped — it becomes the
+ *     slot's text content under `innerHTML`;
+ *   - a branch-slot expression (Child-position value inside a conditional
+ *     `template()` arrow) is routed through `__bfSlot` and must NOT be
+ *     wrapped in `escapeText`. `__bfSlot` returns raw `<!--bf-slot:N-->`
+ *     markers for live nodes; escaping the whole call corrupts them and
+ *     drops slotted content (the regression that broke `e2e-site-ui`).
+ *     `__bfSlot` escapes its own plain-string path internally instead.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function getClientJs(source: string, filename: string): string {
+  const result = compileJSX(source, filename, { 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
+}
+
+describe('text-slot escaping', () => {
+  test('a plain text slot is wrapped in escapeText', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       export function Label({ text }: { text: string }) {
+         return <span>{text}</span>
+       }`,
+      'Label.tsx',
+    )
+    expect(clientJs).toMatch(/<!--bf:\w+-->\$\{escapeText\(_p\.text\)\}<!--\/-->/)
+  })
+
+  test('a branch-slot expression is NOT wrapped in escapeText', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       import { createSignal } from '@barefootjs/client'
+       export function Branch({ show }: { show: boolean }) {
+         const [t] = createSignal('hi')
+         return <div>{show ? <span>{t()}</span> : null}</div>
+       }`,
+      'Branch.tsx',
+    )
+    // The branch value goes through __bfSlot (raw markers preserved)…
+    expect(clientJs).toMatch(/\$\{__bfSlot\(/)
+    // …and must never be double-wrapped by the text escape.
+    expect(clientJs).not.toMatch(/escapeText\(\s*__bfSlot/)
+  })
+})