@barefootjs/jsx 0.31.7 → 0.31.9

package/src/__tests__/aliased-destructured-prop-csr.test.ts

@@ -43,7 +43,10 @@ describe('aliased destructured props reach client JS under the caller-facing key
     expect(clientJs!.content).not.toContain('_p.count')
     // The CSR `template:` lambda (module-scope SSR fallback) reads the
     // same caller-facing key.
-    expect(clientJs!.content).toContain('escapeText(_p.n)')
+    // `escapeTextOrMarkup`, not bare `escapeText` — this slot is
+    // claim-plan `kind: 'markup'` (#2651), unrelated to the #2524 aliasing
+    // concern this test pins; only the escape call's name changed.
+    expect(clientJs!.content).toContain('escapeTextOrMarkup(_p.n)')
   })
 
   test('{ text, n } — un-aliased: byte-identical to the pre-fix `_p.n` extraction', () => {
@@ -66,7 +69,10 @@ describe('aliased destructured props reach client JS under the caller-facing key
     const clientJs = result.files.find((f) => f.type === 'clientJs')
     expect(clientJs).toBeDefined()
     expect(clientJs!.content).toContain('const n = _p.n')
-    expect(clientJs!.content).toContain('escapeText(_p.n)')
+    // `escapeTextOrMarkup`, not bare `escapeText` — this slot is
+    // claim-plan `kind: 'markup'` (#2651), unrelated to the #2524 aliasing
+    // concern this test pins; only the escape call's name changed.
+    expect(clientJs!.content).toContain('escapeTextOrMarkup(_p.n)')
   })
 
   test('aliased controlled-signal prop — the accessor reads the caller-facing key', () => {

package/src/__tests__/csr-template-loop-shadowing.test.ts

@@ -111,8 +111,11 @@ describe('hydrate template: loop param shadowing an outer name (#2222 bug 2)', (
       }
     `))
 
-    // Outside the loop: the prop rewrite applies.
-    expect(tpl).toContain('escapeText(_p.label)')
+    // Outside the loop: the prop rewrite applies. `escapeTextOrMarkup`, not
+    // bare `escapeText` — this top-level slot is claim-plan `kind: 'markup'`
+    // (#2651); the loop-body slot below stays plain-text (loops never
+    // reach `ctx.dynamicElements`), so only this one call name changed.
+    expect(tpl).toContain('escapeTextOrMarkup(_p.label)')
     // Inside the loop: the shadowing param must survive untouched.
     expect(tpl).toContain('escapeText(1 + label)')
     expect(tpl).not.toContain('1 + _p.label')

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

@@ -0,0 +1,89 @@
+/**
+ * #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). `escapeTextOrMarkup`,
+    // not bare `escapeText` — this slot is claim-plan `kind: 'markup'`
+    // (#2651), unrelated to this test's #2654 prelude concern.
+    expect(clientJs).toMatch(/\$\{escapeTextOrMarkup\(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__/inner-loop-mathml-namespace.test.ts

@@ -0,0 +1,135 @@
+/**
+ * MathML-rooted loop item templates cloned via `template.innerHTML` (#1096).
+ *
+ * MathML port of `inner-loop-svg-namespace.test.ts` (#2219, #135/#1088).
+ * `template.innerHTML` parses in the HTML namespace, so an inner reactive
+ * loop whose item root is a MathML element (`<mrow>`, `<mfrac>`, ...)
+ * clones as an `HTMLUnknownElement` — present in the DOM but never drawn
+ * by the MathML renderer, with no error. This mirrors the SVG fix: parse
+ * `<math>${template}</math>` and descend one extra level
+ * (`.firstElementChild.firstElementChild`). HTML-rooted templates keep
+ * byte-identical output.
+ */
+
+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
+}
+
+describe('inner reactive loop with a MathML element root (#1096)', () => {
+  test('MathML-rooted inner item clones inside a synthetic <math> wrap', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Sheet { id: number; terms: number[] }
+      export function Repro() {
+        const [sheets] = createSignal<Sheet[]>([])
+        return (
+          <div>
+            {sheets().map((s) => (
+              <math key={s.id}>
+                {s.terms.map((n) => (
+                  <mn key={n}>{String(n)}</mn>
+                ))}
+              </math>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The inner renderItem clone parses inside `<math>...</math>` and
+    // descends one extra level to reach the real `<mn>` root.
+    expect(content).toMatch(/__t\.innerHTML = `<math><mn /)
+    expect(content).toContain('return __t.content.firstElementChild.firstElementChild.cloneNode(true)')
+  })
+
+  test('conditional inner body whose branches are all MathML wraps too (#1088 shape)', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Sheet { id: number; terms: number[] }
+      export function Repro() {
+        const [sheets] = createSignal<Sheet[]>([])
+        return (
+          <div>
+            {sheets().map((s) => (
+              <math key={s.id}>
+                {s.terms.map((n) => (
+                  n > 50
+                    ? <mn key={n}>{String(n)}</mn>
+                    : <mi key={n}>x</mi>
+                ))}
+              </math>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/__t\.innerHTML = `<math>\$\{/)
+    expect(content).toContain('return __t.content.firstElementChild.firstElementChild.cloneNode(true)')
+  })
+})
+
+describe('reactive multi-root fragment with a <math>-container first root (#2233-shape review)', () => {
+  test('emitMultiRootTemplateCloneLines skips the wrap for <math>-first fragments', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Eq { id: number; n: number }
+      export function Repro() {
+        const [eqs] = createSignal<Eq[]>([])
+        return (
+          <div>
+            {eqs().map((e) => (
+              <>
+                <math key={e.id}><mn>{String(e.n)}</mn></math>
+                <span>{e.id}</span>
+              </>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The multi-root clone parses the fragment bare — no synthetic wrap —
+    // so the HTML <span> sibling stays in the HTML namespace.
+    expect(content).not.toContain('`<math><math')
+    expect(content).toContain('__tpl.content.firstElementChild.cloneNode(true)')
+  })
+})
+
+describe('static-loop CSR materialize with a MathML element root (#1096, #1247 path)', () => {
+  test('MathML-rooted materialize clone wraps and descends the extra level', () => {
+    const content = clientJsFor(`
+      'use client'
+      type Props = { terms: Record<string, number> }
+      export function Repro(props: Props) {
+        const entries = Object.entries(props.terms ?? {}).filter(([, n]) => n > 0)
+        return (
+          <math>
+            {entries.map(([id, n]) => (
+              <mn key={id}>{String(n)}</mn>
+            ))}
+          </math>
+        )
+      }
+    `)
+
+    // Materialize branch present (unsafe prop-derived array, #1247) ...
+    expect(content).toMatch(/if \(!__iterEl\)/)
+    // ... and its template parse is namespace-aware.
+    expect(content).toMatch(/__tpl\.innerHTML = `<math><mn /)
+    expect(content).toContain('const __cloned = __tpl.content.firstElementChild.firstElementChild')
+  })
+})

package/src/__tests__/markup-prop-brand.test.ts

@@ -0,0 +1,161 @@
+/**
+ * `bfMarkup()` branding for JSX-element-as-non-children-component-prop
+ * values (#2651), sound-or-loud at the client-JS emit layer.
+ *
+ * Before the fix, a JSX element passed at a non-`children` component prop
+ * position (`header={<strong>Title</strong>}`) reached the CSR template as
+ * a bare HTML string; the receiving component's own `{props.header}`
+ * interpolation is a claim-plan `kind: 'markup'` slot (its value may be a
+ * live `Node`), but the STATIC template builder always called `escapeText`
+ * regardless of that classification — so the compiler-built markup came
+ * out HTML-escaped (`&lt;strong&gt;`) instead of raw, and the sentinel
+ * scope-placeholder embedded inside it (`bf-s="__BF_PARENT_SCOPE__"`) came
+ * out mangled (`&quot;`) and never got substituted (fixture
+ * `jsx-element-prop`, `packages/adapter-tests/fixtures/jsx-element-prop.ts`).
+ *
+ * The fix carries the compiler-built HTML as a `bfMarkup()`-branded value
+ * from every producer door to the two consumers (`escapeTextOrMarkup` for
+ * the static template, `escapeTextOrNode` for the reactive write) instead
+ * of a bare string — see `packages/client/__tests__/runtime/markup-brand.test.ts`
+ * for the runtime-helper contract itself. This file pins the COMPILER side:
+ * which producer emissions get branded, which stay untouched, and that the
+ * markup-classified slot's template evaluation switches escape functions.
+ */
+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, filePath = 'Test.tsx'): string {
+  const result = compileJSX(source, filePath, { 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('markup-prop brand (#2651)', () => {
+  // The exact shape `jsx-element-prop` exercises: a single JSX element
+  // passed at a non-`children` prop position, alongside real children.
+  const singleElementSource = `
+    export function Card(props: { header?: any; children?: any }) {
+      return (
+        <section>
+          <header>{props.header}</header>
+          <div>{props.children}</div>
+        </section>
+      )
+    }
+    export function JsxElementProp() {
+      return (
+        <Card header={<strong>Title</strong>}>
+          <p>body text</p>
+        </Card>
+      )
+    }
+  `
+
+  test('(a) renderChild / static-template prop emission wraps the JSX-element prop in bfMarkup(...)', () => {
+    const clientJs = clientJsFor(singleElementSource)
+    // The parent's static template calls renderChild('Card', {header: bfMarkup(`...`), ...}, ...) —
+    // not a bare backtick string.
+    expect(clientJs).toMatch(/renderChild\('Card',\s*\{header:\s*bfMarkup\(`<strong[^`]*Title[^`]*<\/strong>`\)/)
+  })
+
+  test('(b) initChild getter prop emission wraps the JSX-element prop in bfMarkup(...)', () => {
+    const clientJs = clientJsFor(singleElementSource)
+    // initChild('Card', _s0, { get header() { return bfMarkup(`<strong>Title</strong>`) } })
+    expect(clientJs).toMatch(/get header\(\)\s*\{\s*return bfMarkup\(`<strong>Title<\/strong>`\)\s*\}/)
+  })
+
+  test("(c) the receiving component's markup-classified slot uses escapeTextOrMarkup, not escapeText", () => {
+    const clientJs = clientJsFor(singleElementSource)
+    expect(clientJs).toContain('escapeTextOrMarkup(_p.header)')
+    expect(clientJs).not.toContain('escapeText(_p.header)')
+    // The reactive write for the same slot already went through
+    // escapeTextOrNode before this fix; still present, now brand-aware.
+    expect(clientJs).toContain('escapeTextOrNode(__val)')
+  })
+
+  test('(d) a plain string prop (no JSX literal) is never branded and keeps the plain expression form', () => {
+    const source = `
+      export function Card(props: { header?: any }) {
+        return <header>{props.header}</header>
+      }
+      export function PlainStringProp(props: { label: string }) {
+        return <Card header={props.label} />
+      }
+    `
+    const clientJs = clientJsFor(source)
+    expect(clientJs).not.toContain('bfMarkup(')
+    // The prop stays a bare expression reference — `expression` AttrValue
+    // kind, not `jsx-children` — routed straight through to `renderChild`.
+    expect(clientJs).toMatch(/renderChild\('Card',\s*\{header:\s*_p\.label\}/)
+    // The slot is still claim-plan 'markup' (any component prop can be
+    // dynamic) — escapeTextOrMarkup is still the right call, just never
+    // fed a branded value here.
+    expect(clientJs).toContain('escapeTextOrMarkup(_p.header)')
+  })
+
+  test('(e) an explicit `children={<jsx/>}` prop is excluded from branding (out of scope, byte-invariant)', () => {
+    const source = `
+      function Box({ children }: { children: any }) { return <div>{children}</div> }
+      export function ChildrenJsxExpression() {
+        return <Box children={<span>x</span>} />
+      }
+    `
+    const clientJs = clientJsFor(source)
+    expect(clientJs).not.toContain('bfMarkup(')
+    expect(clientJs).toContain('children: `<span bf-s="__BF_PARENT_SCOPE__">x</span>`')
+    expect(clientJs).toContain('get children() { return `<span>x</span>` }')
+  })
+
+  test('(f) between-tag JSX children stay byte-invariant (out of scope, unbranded)', () => {
+    const source = `
+      export function Card(props: { header?: any; children?: any }) {
+        return (
+          <section>
+            <header>{props.header}</header>
+            <div>{props.children}</div>
+          </section>
+        )
+      }
+      export function JsxElementProp() {
+        return (
+          <Card header={<strong>Title</strong>}>
+            <p>body text</p>
+          </Card>
+        )
+      }
+    `
+    const clientJs = clientJsFor(source)
+    // The between-tag `<p>body text</p>` children entry is a plain
+    // backtick string, never wrapped — only the non-`children` `header`
+    // prop next to it is branded.
+    expect(clientJs).toContain('children: `<p>body text</p>`')
+  })
+
+  test('(g) a JSX element nested inside another component prop value (door via createComponent getters) is also branded', () => {
+    // `header` itself contains a component (`Wrapper`), which routes
+    // through the `__slot(...)` live-node mechanism (unaffected by this
+    // fix); `Wrapper`'s OWN `bar` prop is a lone JSX element and reaches
+    // the SAME brand through the nested `irNodeToJsExprs` door.
+    const source = `
+      export function Wrapper(props: { bar?: any }) {
+        return <em>{props.bar}</em>
+      }
+      export function Card(props: { header?: any }) {
+        return <header>{props.header}</header>
+      }
+      export function NestedJsxProp() {
+        return <Card header={<Wrapper bar={<b>Nested</b>} />} />
+      }
+    `
+    const clientJs = clientJsFor(source)
+    expect(clientJs).toMatch(/get bar\(\)\s*\{\s*return bfMarkup\(`<b>Nested<\/b>`\)\s*\}/)
+    // The outer `header` (contains a component) keeps the pre-existing
+    // `__slot(...)` live-node wrapping — not itself re-wrapped in bfMarkup.
+    expect(clientJs).toMatch(/get header\(\)\s*\{\s*return __slot\(/)
+  })
+})

package/src/__tests__/mathml-mapArray-namespace.test.ts

@@ -0,0 +1,230 @@
+/**
+ * BarefootJS Compiler - MathML mapArray namespace preservation (#1096).
+ *
+ * MathML port of `svg-mapArray-namespace.test.ts` (#135/#1088). When a
+ * `.map()` inside a `<math>` produces MathML elements (e.g. `<mrow>`,
+ * `<mfrac>`), the compiler-generated `renderItem` must parse its template
+ * under MathML context. The default `template.innerHTML = '<mrow/>'`
+ * produces an `HTMLUnknownElement` in xhtml namespace, so the MathML
+ * renderer ignores it — same parser quirk as the SVG case, just a smaller
+ * element vocabulary.
+ *
+ * Fix: wrap the `innerHTML` in `<math>...</math>` and descend one extra
+ * level when the loop body's root tag is a MathML element. This shares
+ * every byte of the wrap machinery with the SVG fix through
+ * `detectRootNamespaceWrapTag` / `namespaceWrapForTemplate` in
+ * `stringify/template-parse.ts` — only the wrap tag name differs.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('MathML mapArray namespace preservation (#1096)', () => {
+  test('MathML mrow/mfrac mapArray wraps innerHTML with <math> for correct namespace (issue repro shape)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Term { key: string; n: string; d: string }
+
+      export function Equation() {
+        const [terms] = createSignal<Term[]>([])
+        return (
+          <math>
+            {terms().map((t) => (
+              <mrow key={t.key}>
+                <mfrac>
+                  <mn>{t.n}</mn>
+                  <mn>{t.d}</mn>
+                </mfrac>
+              </mrow>
+            ))}
+          </math>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Equation.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    const content = clientJs!.content
+
+    // Must wrap with <math>...</math> for foreign-content parsing
+    expect(content).toContain('<math>')
+    expect(content).toContain('</math>')
+    // Descend one extra level
+    expect(content).toContain('.firstElementChild.firstElementChild.cloneNode(true)')
+    // The plain HTML clone path must NOT be used for MathML roots
+    expect(content).not.toMatch(/__tpl\.innerHTML = `<mrow[^`]*`/)
+  })
+
+  test('HTML li mapArray is unchanged (no MathML wrapping)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      interface Item { id: string; label: string }
+
+      export function L() {
+        const [items, setItems] = createSignal<Item[]>([])
+        return (
+          <ul>
+            {items().map((it) => (
+              <li key={it.id}>{it.label}</li>
+            ))}
+          </ul>
+        )
+      }
+    `
+    const result = compileJSX(source, 'L.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    const content = clientJs!.content
+
+    expect(content).toContain('.firstElementChild.cloneNode(true)')
+    expect(content).not.toContain('.firstElementChild.firstElementChild.cloneNode(true)')
+    expect(content).not.toContain('<math>')
+  })
+
+  /**
+   * #1088-shape port: when a `.map()` body is a ternary whose branches are
+   * all MathML tags, the wrap heuristic must still apply.
+   */
+  test('MathML ternary body wraps when both branches are MathML-rooted', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Term = { key: string; kind: 'frac' | 'sup'; value: string }
+
+      export function CondMap() {
+        const [terms] = createSignal<Term[]>([])
+        return (
+          <math>
+            {terms().map((t) =>
+              t.kind === 'frac'
+                ? <mfrac key={t.key}><mn>1</mn><mn>{t.value}</mn></mfrac>
+                : <msup key={t.key}><mn>{t.value}</mn><mn>2</mn></msup>
+            )}
+          </math>
+        )
+      }
+    `
+    const result = compileJSX(source, 'CondMap.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    const content = clientJs!.content
+
+    // Wrap with <math>...</math> for foreign-content parsing
+    expect(content).toMatch(/__tpl\.innerHTML = `<math>\$\{/)
+    expect(content).toMatch(/\}<\/math>`/)
+    // Descend one extra level
+    expect(content).toContain('.firstElementChild.firstElementChild.cloneNode(true)')
+  })
+
+  test('MathML 3-way ternary wraps recursively', () => {
+    // Mirrors the SVG "PolarGrid" 3-way-ternary regression pin: the
+    // compiler nests the inner conditional inside
+    // `<!--bf-cond-start:sX-->` markers, so the wrap heuristic must skip
+    // those and recurse into the inner `${...}`.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Term = { key: string; kind: 'frac' | 'sup' | 'sub' }
+
+      export function TermList() {
+        const [terms] = createSignal<Term[]>([])
+        return (
+          <math>
+            {terms().map((t) =>
+              t.kind === 'frac'
+                ? <mfrac key={t.key}><mn>1</mn><mn>2</mn></mfrac>
+                : t.kind === 'sup'
+                  ? <msup key={t.key}><mn>1</mn><mn>2</mn></msup>
+                  : <msub key={t.key}><mn>1</mn><mn>2</mn></msub>
+            )}
+          </math>
+        )
+      }
+    `
+    const result = compileJSX(source, 'TermList.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    const content = clientJs!.content
+
+    expect(content).toMatch(/__tpl\.innerHTML = `<math>\$\{/)
+    expect(content).toContain('.firstElementChild.firstElementChild.cloneNode(true)')
+  })
+
+  test('mixed HTML/MathML ternary body falls through to no-wrap', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Item = { key: string; useMath: boolean }
+
+      export function Mixed() {
+        const [items] = createSignal<Item[]>([])
+        return (
+          <div>
+            {items().map((i) =>
+              i.useMath
+                ? <mn key={i.key}>1</mn>
+                : <span key={i.key}>x</span>
+            )}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Mixed.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    const content = clientJs!.content
+
+    expect(content).toContain('.firstElementChild.cloneNode(true)')
+    expect(content).not.toContain('.firstElementChild.firstElementChild.cloneNode(true)')
+  })
+
+  test('mixed SVG/MathML ternary body falls through to no-wrap', () => {
+    // Neither namespace should silently win: an SVG branch and a MathML
+    // branch in the same ternary is out of scope for the wrap heuristic,
+    // same as the pre-existing mixed HTML/SVG case.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      type Item = { key: string; useSvg: boolean }
+
+      export function MixedNs() {
+        const [items] = createSignal<Item[]>([])
+        return (
+          <div>
+            {items().map((i) =>
+              i.useSvg
+                ? <circle key={i.key} cx="0" cy="0" r="5" />
+                : <mn key={i.key}>1</mn>
+            )}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'MixedNs.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    const content = clientJs!.content
+
+    expect(content).toContain('.firstElementChild.cloneNode(true)')
+    expect(content).not.toContain('.firstElementChild.firstElementChild.cloneNode(true)')
+    expect(content).not.toContain('<svg>')
+    expect(content).not.toContain('<math>')
+  })
+})