@barefootjs/jsx 0.18.5 → 0.18.7

package/src/__tests__/dangerous-inner-html-resolver.test.ts

@@ -0,0 +1,197 @@
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import {
+  isDangerousInnerHtmlAttr,
+  resolveDangerousInnerHtml,
+  dangerousInnerHtmlMetacharViolation,
+  dangerousInnerHtmlDiagnostic,
+} from '../adapters/dangerous-inner-html'
+
+// #2207: the shared `dangerouslySetInnerHTML` resolver — recognition,
+// static-literal extraction, and per-adapter template-metacharacter
+// guarding all live in one place (packages/jsx/src/adapters/dangerous-inner-html.ts)
+// so every template adapter shares identical, single-source-of-truth policy.
+describe('resolveDangerousInnerHtml (#2207)', () => {
+  function rootElement(source: string) {
+    const ctx = analyzeComponent(source, 'Test.tsx')
+    const ir = jsxToIR(ctx)
+    if (!ir || ir.type !== 'element') throw new Error('expected a root element')
+    return ir
+  }
+
+  test('absent attribute resolves to null', () => {
+    const el = rootElement(`
+      function Test() { return <div>hi</div> }
+      export { Test }
+    `)
+    expect(resolveDangerousInnerHtml(el)).toBeNull()
+  })
+
+  test('inline string literal resolves as static', () => {
+    const el = rootElement(`
+      function Test() { return <div dangerouslySetInnerHTML={{ __html: '<b>bold</b> &amp; safe' }} /> }
+      export { Test }
+    `)
+    const resolution = resolveDangerousInnerHtml(el)
+    expect(resolution).toEqual({ kind: 'static', html: '<b>bold</b> &amp; safe' })
+  })
+
+  test('string-key form ({ "__html": ... }) resolves identically to the identifier-key form', () => {
+    const el = rootElement(`
+      function Test() { return <div dangerouslySetInnerHTML={{ '__html': '<i>x</i>' }} /> }
+      export { Test }
+    `)
+    expect(resolveDangerousInnerHtml(el)).toEqual({ kind: 'static', html: '<i>x</i>' })
+  })
+
+  test('signal/prop-derived value resolves as dynamic', () => {
+    const el = rootElement(`
+      function Test({ html }: { html: string }) { return <div dangerouslySetInnerHTML={{ __html: html }} /> }
+      export { Test }
+    `)
+    const resolution = resolveDangerousInnerHtml(el)
+    expect(resolution?.kind).toBe('dynamic')
+  })
+
+  test('a no-substitution template literal resolves as static (identical to a string literal)', () => {
+    const el = rootElement(`
+      function Test() { return <div dangerouslySetInnerHTML={{ __html: \`<b>bold</b>\` }} /> }
+      export { Test }
+    `)
+    expect(resolveDangerousInnerHtml(el)).toEqual({ kind: 'static', html: '<b>bold</b>' })
+  })
+
+  test('a template literal WITH a substitution resolves as dynamic — no const-folding in v1', () => {
+    const el = rootElement(`
+      function Test({ tag }: { tag: string }) { return <div dangerouslySetInnerHTML={{ __html: \`<\${tag}>bold</\${tag}>\` }} /> }
+      export { Test }
+    `)
+    expect(resolveDangerousInnerHtml(el)?.kind).toBe('dynamic')
+  })
+
+  test('shorthand { __html } resolves as dynamic, not the literal named __html', () => {
+    const el = rootElement(`
+      function Test({ __html }: { __html: string }) { return <div dangerouslySetInnerHTML={{ __html }} /> }
+      export { Test }
+    `)
+    expect(resolveDangerousInnerHtml(el)?.kind).toBe('dynamic')
+  })
+
+  test('local const reference resolves as dynamic — v1 requires an INLINE literal', () => {
+    const el = rootElement(`
+      const HTML = '<b>bold</b>'
+      function Test() { return <div dangerouslySetInnerHTML={{ __html: HTML }} /> }
+      export { Test }
+    `)
+    expect(resolveDangerousInnerHtml(el)?.kind).toBe('dynamic')
+  })
+
+  test('extra property alongside __html resolves as dynamic', () => {
+    const el = rootElement(`
+      function Test() { return <div dangerouslySetInnerHTML={{ __html: '<b>x</b>', extra: 1 }} /> }
+      export { Test }
+    `)
+    expect(resolveDangerousInnerHtml(el)?.kind).toBe('dynamic')
+  })
+
+  test('isDangerousInnerHtmlAttr only matches the exact prop name', () => {
+    const el = rootElement(`
+      function Test() { return <div data-foo="bar" dangerouslySetInnerHTML={{ __html: 'x' }} /> }
+      export { Test }
+    `)
+    const names = el.attrs.map(a => a.name)
+    expect(names.filter(n => isDangerousInnerHtmlAttr({ name: n } as never))).toEqual(['dangerouslySetInnerHTML'])
+  })
+
+  // Fable review (#2217): a `/* @client */`-deferred value is already a
+  // working escape hatch — every adapter's own renderAttributes skips a
+  // clientOnly attr, and the client's createEffect-driven innerHTML
+  // assignment (emit-reactive.ts) runs regardless of SSR — so this module
+  // must treat it as "render normally" (null), not refuse with BF101.
+  // Refusing here was a real regression the review caught: it broke the
+  // only path that made this module's own suggestion text achievable.
+  test('/* @client */-deferred dangerouslySetInnerHTML resolves to null (render normally, defer to hydrate)', () => {
+    const el = rootElement(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function Test() {
+        const [html, setHtml] = createSignal('<b>hi</b>')
+        return <div dangerouslySetInnerHTML={/* @client */ { __html: html() }} />
+      }
+      export { Test }
+    `)
+    expect(resolveDangerousInnerHtml(el)).toBeNull()
+  })
+
+  test('empty-string literal resolves as static with an empty html value', () => {
+    const el = rootElement(`
+      function Test() { return <div dangerouslySetInnerHTML={{ __html: '' }} /> }
+      export { Test }
+    `)
+    expect(resolveDangerousInnerHtml(el)).toEqual({ kind: 'static', html: '' })
+  })
+})
+
+describe('dangerousInnerHtmlMetacharViolation (#2207)', () => {
+  test('plain HTML is safe on every adapter', () => {
+    for (const id of ['blade', 'erb', 'go-template', 'jinja', 'minijinja', 'mojolicious', 'twig', 'xslate']) {
+      expect(dangerousInnerHtmlMetacharViolation('<b>bold</b> &amp; safe', id)).toBeNull()
+    }
+  })
+
+  // Fable review (#2217): a 9th template adapter with no entry in the guard
+  // table must fail CLOSED (refuse) rather than fail open (splice
+  // unguarded) — the safe default when nobody has verified that adapter's
+  // template syntax yet.
+  test('unknown adapter id fails CLOSED (refuses) rather than open', () => {
+    expect(dangerousInnerHtmlMetacharViolation('<b>plain html, no metachars</b>', 'not-a-real-adapter')).not.toBeNull()
+  })
+
+  const cases: Array<[adapterId: string, html: string]> = [
+    ['blade', '<b>{{ $evil }}</b>'],
+    ['blade', '<b>{!! $evil !!}</b>'],
+    ['blade', '<?php echo 1; ?>'],
+    ['blade', '@if(true)x@endif'],
+    // Laravel's BladeCompiler compiles component tags by default — <x-foo>
+    // resolves and renders a live Blade component, not template
+    // substitution. The sharpest "not inert text" case in the table.
+    ['blade', '<x-alert>evil</x-alert>'],
+    ['blade', '</x-alert>'],
+    ['erb', '<b><%= evil %></b>'],
+    ['go-template', '<b>{{ .Evil }}</b>'],
+    ['jinja', '<b>{{ evil }}</b>'],
+    ['jinja', '<b>{% if x %}y{% endif %}</b>'],
+    ['jinja', '<b>{# comment #}</b>'],
+    ['minijinja', '<b>{{ evil }}</b>'],
+    ['twig', '<b>{{ evil }}</b>'],
+    ['mojolicious', '<b><%= evil %></b>'],
+    ['mojolicious', '% my $x = 1;\n<b>hi</b>'],
+    // Leading whitespace (not just a bare line start) before the line-code
+    // marker, and the marker as the very first character of the string.
+    ['mojolicious', '  % my $x = 1;\n<b>hi</b>'],
+    ['mojolicious', '% my $x = 1;'],
+    ['xslate', '<b><: $evil :></b>'],
+    ['xslate', ': my $x = 1;\n<b>hi</b>'],
+    ['xslate', '  : my $x = 1;\n<b>hi</b>'],
+    ['xslate', ': my $x = 1;'],
+    // A literal that IS only the metachar sequence, nothing else.
+    ['blade', '{{'],
+    ['go-template', '{{'],
+  ]
+  for (const [adapterId, html] of cases) {
+    test(`${adapterId} refuses ${JSON.stringify(html)}`, () => {
+      expect(dangerousInnerHtmlMetacharViolation(html, adapterId)).not.toBeNull()
+    })
+  }
+})
+
+describe('dangerousInnerHtmlDiagnostic (#2207)', () => {
+  test('produces a BF101 with a purpose-built message', () => {
+    const diag = dangerousInnerHtmlDiagnostic('html', { file: 'Test.tsx', start: { line: 1, column: 0 }, end: { line: 1, column: 0 } })
+    expect(diag.code).toBe('BF101')
+    expect(diag.severity).toBe('error')
+    expect(diag.message).toContain('dangerouslySetInnerHTML requires a compile-time string literal')
+    expect(diag.suggestion?.message).toContain('2215')
+  })
+})

package/src/__tests__/inner-loop-svg-namespace.test.ts

@@ -0,0 +1,245 @@
+/**
+ * SVG-rooted loop item templates cloned via `template.innerHTML` (#2219).
+ *
+ * `template.innerHTML` parses in the HTML namespace, so an inner reactive
+ * loop whose item root is an SVG element (`<line>`, `<circle>`, ...) cloned
+ * as an `HTMLUnknownElement` — present in the DOM but never drawn by the
+ * SVG renderer, with no error. The top-level loop path has wrapped these
+ * templates in a synthetic `<svg>` since #135/#1088 (`templateRootIsSvg` /
+ * `emitTemplateCloneInline` in `stringify/template-parse.ts`) and the
+ * branch-arm path since its plan-ification, but the inner-loop reactive
+ * clone (`stringify/inner-loop.ts`) and the static-loop CSR materialize
+ * clones (#1247, `stringify/loop.ts`) parsed bare and stayed in the wrong
+ * namespace.
+ *
+ * The fix mirrors the established wrap: parse `<svg>${template}</svg>` 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 an SVG element root (#2219)', () => {
+  test('SVG-rooted inner item clones inside a synthetic <svg> wrap', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Sheet { id: number; ticks: number[] }
+      export function Repro() {
+        const [sheets] = createSignal<Sheet[]>([])
+        return (
+          <div>
+            {sheets().map((s) => (
+              <svg key={s.id} viewBox="0 0 100 100">
+                {s.ticks.map((y) => (
+                  <line key={y} x1="0" x2="100" y1={y} y2={y} stroke="black" />
+                ))}
+              </svg>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // The inner renderItem clone parses inside `<svg>...</svg>` and descends
+    // one extra level to reach the real `<line>` root.
+    expect(content).toMatch(/__t\.innerHTML = `<svg><line /)
+    expect(content).toContain('return __t.content.firstElementChild.firstElementChild.cloneNode(true)')
+  })
+
+  test('HTML-rooted inner item keeps the bare clone byte-identical', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Group { id: number; items: string[] }
+      export function Repro() {
+        const [groups] = createSignal<Group[]>([])
+        return (
+          <ul>
+            {groups().map((g) => (
+              <li key={g.id}>
+                {g.items.map((t) => (
+                  <span key={t}>{t}</span>
+                ))}
+              </li>
+            ))}
+          </ul>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/__t\.innerHTML = `<span /)
+    expect(content).toContain('return __t.content.firstElementChild.cloneNode(true)')
+    // No synthetic wrap anywhere in the inner clone.
+    expect(content).not.toContain('`<svg><span')
+  })
+
+  test('conditional inner body whose branches are all SVG wraps too (#1088 shape)', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Sheet { id: number; ticks: number[] }
+      export function Repro() {
+        const [sheets] = createSignal<Sheet[]>([])
+        return (
+          <div>
+            {sheets().map((s) => (
+              <svg key={s.id}>
+                {s.ticks.map((y) => (
+                  y > 50
+                    ? <line key={y} y1={y} y2={y} />
+                    : <circle key={y} cy={y} r="1" />
+                ))}
+              </svg>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    // Both branches are SVG roots, so the interpolated conditional template
+    // still gets the wrap (templateRootIsSvg recurses into the branches).
+    expect(content).toMatch(/__t\.innerHTML = `<svg>\$\{/)
+    expect(content).toContain('return __t.content.firstElementChild.firstElementChild.cloneNode(true)')
+  })
+})
+
+describe('reactive multi-root fragment with an <svg>-container first root (#2233 review)', () => {
+  test('emitMultiRootTemplateCloneLines skips the wrap for <svg>-first fragments', () => {
+    const content = clientJsFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      interface Chart { id: number; r: number }
+      export function Repro() {
+        const [charts] = createSignal<Chart[]>([])
+        return (
+          <div>
+            {charts().map((c) => (
+              <>
+                <svg key={c.id} viewBox="0 0 10 10"><circle r={c.r} /></svg>
+                <span>{c.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('`<svg><svg')
+    expect(content).toContain('__tpl.content.firstElementChild.cloneNode(true)')
+  })
+})
+
+describe('static-loop CSR materialize with an SVG element root (#2219, #1247 path)', () => {
+  test('SVG-rooted materialize clone wraps and descends the extra level', () => {
+    const content = clientJsFor(`
+      'use client'
+      type Props = { ticks: Record<string, number> }
+      export function Repro(props: Props) {
+        const entries = Object.entries(props.ticks ?? {}).filter(([, y]) => y > 0)
+        return (
+          <svg viewBox="0 0 100 100">
+            {entries.map(([id, y]) => (
+              <line key={id} x1="0" x2="100" y1={y} y2={y} />
+            ))}
+          </svg>
+        )
+      }
+    `)
+
+    // 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 = `<svg><line /)
+    expect(content).toContain('const __cloned = __tpl.content.firstElementChild.firstElementChild')
+  })
+
+  test('multi-root (fragment) SVG materialize iterates the wrap one level down', () => {
+    const content = clientJsFor(`
+      'use client'
+      type Props = { ticks: Record<string, number> }
+      export function Repro(props: Props) {
+        const entries = Object.entries(props.ticks ?? {}).filter(([, y]) => y > 0)
+        return (
+          <svg viewBox="0 0 100 100">
+            {entries.map(([id, y]) => (
+              <>
+                <line key={id} x1="0" x2="100" y1={y} y2={y} />
+                <text x="0" y={y}>{id}</text>
+              </>
+            ))}
+          </svg>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/__mtpl\.innerHTML = `<svg><line /)
+    // Sibling iteration starts inside the synthetic wrap.
+    expect(content).toContain('let __sib = __mtpl.content.firstElementChild.firstElementChild')
+  })
+
+  test('<svg>-container-first fragment is NOT over-wrapped (#2233 review)', () => {
+    // An <svg> CONTAINER parses into the correct namespace bare — the HTML
+    // parser enters foreign content on its own. Wrapping the whole fragment
+    // would drag the HTML <span> sibling into the SVG namespace instead.
+    const content = clientJsFor(`
+      'use client'
+      type Props = { charts: Record<string, number> }
+      export function Repro(props: Props) {
+        const entries = Object.entries(props.charts ?? {}).filter(([, v]) => v > 0)
+        return (
+          <div>
+            {entries.map(([id, v]) => (
+              <>
+                <svg key={id} viewBox="0 0 10 10"><circle r={v} /></svg>
+                <span>{id}</span>
+              </>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/__mtpl\.innerHTML = `<svg /)
+    expect(content).not.toContain('`<svg><svg')
+    // Sibling iteration starts at the template content directly (no wrap).
+    expect(content).toContain('let __sib = __mtpl.content.firstElementChild')
+    expect(content).not.toContain('let __sib = __mtpl.content.firstElementChild.firstElementChild')
+  })
+
+  test('HTML-rooted materialize clone keeps the bare parse byte-identical', () => {
+    const content = clientJsFor(`
+      'use client'
+      type Props = { reactions: Record<string, string[]> }
+      export function Repro(props: Props) {
+        const entries = Object.entries(props.reactions ?? {}).filter(([, users]) => users.length > 0)
+        return (
+          <div>
+            {entries.map(([emoji, users]) => (
+              <button key={emoji} type="button">{emoji}: {String(users.length)}</button>
+            ))}
+          </div>
+        )
+      }
+    `)
+
+    expect(content).toMatch(/if \(!__iterEl\)/)
+    expect(content).toMatch(/__tpl\.innerHTML = `<button /)
+    expect(content).toContain('const __cloned = __tpl.content.firstElementChild')
+    expect(content).not.toContain('`<svg>')
+  })
+})

package/src/__tests__/loop-bound-names.test.ts

@@ -0,0 +1,102 @@
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import { collectLoopBoundNames } from '../adapters/loop-bound-names'
+import type { ComponentIR } from '../types'
+
+// #2212 (Fable review): `collectLoopBoundNames` finds every name a loop
+// callback binds as its item/index parameter, so each adapter's
+// `collectStringValueNames` can exclude it from string-concat detection —
+// a loop param shadowing an outer string-typed binding of the same name
+// must never be misdetected as string-typed.
+describe('collectLoopBoundNames (#2212)', () => {
+  // `collectLoopBoundNames` only reads `.root`; the rest of `ComponentIR`
+  // is irrelevant to this walk, so a minimal stand-in is fine here.
+  function ir(source: string): ComponentIR {
+    const ctx = analyzeComponent(source, 'Test.tsx')
+    const root = jsxToIR(ctx)
+    if (!root) throw new Error('expected IR')
+    return { version: '0.1', metadata: {} as ComponentIR['metadata'], root, errors: [] }
+  }
+
+  test('a component with no loops has no bound names', () => {
+    const component = ir(`
+      function Test() { return <div>hi</div> }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component).size).toBe(0)
+  })
+
+  test('a simple loop param is bound', () => {
+    const component = ir(`
+      function Test({ items }: { items: string[] }) {
+        return <ul>{items.map(name => <li key={name}>{name}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['name']))
+  })
+
+  test('both item and index params are bound', () => {
+    const component = ir(`
+      function Test({ items }: { items: string[] }) {
+        return <ul>{items.map((name, idx) => <li key={idx}>{name}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['name', 'idx']))
+  })
+
+  test('nested loops contribute all their params', () => {
+    const component = ir(`
+      function Test({ groups }: { groups: { label: string; items: string[] }[] }) {
+        return <div>{groups.map(group => <ul key={group.label}>{group.items.map(item => <li key={item}>{item}</li>)}</ul>)}</div>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['group', 'item']))
+  })
+
+  test('a loop body wrapping a child component still contributes its param', () => {
+    const component = ir(`
+      import { Row } from './row'
+      function Test({ items }: { items: string[] }) {
+        return <ul>{items.map(item => <Row key={item} label={item} />)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['item']))
+  })
+
+  // Fable re-review (#2212): `param` holds the raw pattern text for a
+  // destructured callback (`"{ name }"`), not the bound name itself — the
+  // real bound names live in `paramBindings`. Adapters that lower a
+  // destructure to a `{% set name = __bf_item.name %}`-style local (#2087)
+  // leave `name` reachable as a bare identifier in the loop body, so it
+  // needs the same exclusion as a plain loop param. `node.param`'s raw
+  // pattern text still ends up in the set too (added unconditionally,
+  // before this arm existed) — harmless noise, since it can never collide
+  // with a real identifier name.
+  test('a destructured loop param contributes its extracted binding names', () => {
+    const component = ir(`
+      function Test({ rows }: { rows: { name: string }[] }) {
+        return <ul>{rows.map(({ name }) => <li key={name}>{name}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['{ name }', 'name']))
+  })
+
+  // Fable re-review (#2212): a `.filter(pred).map(cb)` chain's filter
+  // predicate is emitted through the same binary/string-name machinery
+  // using its OWN param, which may differ from the map callback's `param`.
+  test('a filter().map() chain contributes both the filter predicate param and the map param', () => {
+    const component = ir(`
+      function Test({ values }: { values: number[] }) {
+        return <ul>{values.filter(n => n > 3).map(v => <li key={v}>{v}</li>)}</ul>
+      }
+      export { Test }
+    `)
+    expect(collectLoopBoundNames(component)).toEqual(new Set(['n', 'v']))
+  })
+})

package/src/__tests__/loop-plan-classification.test.ts

@@ -92,6 +92,7 @@ describe('buildLoopPlan decision tree (#1253)', () => {
             kind: 'nested',
             array: 'item.subs',
             param: 'sub',
+            index: null,
             key: null,
             markerId: 'inner-m1',
             template: '<span></span>',
@@ -161,6 +162,7 @@ describe('buildLoopPlan decision tree (#1253)', () => {
             kind: 'nested',
             array: 'item.subs',
             param: 'sub',
+            index: null,
             key: null,
             markerId: 'inner-m1',
             template: '<span></span>',