@barefootjs/hono 0.31.0 → 0.31.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/hono",
-  "version": "0.31.0",
+  "version": "0.31.2",
   "description": "Hono integration for BarefootJS",
   "type": "module",
   "main": "./dist/index.js",
@@ -122,7 +122,7 @@
   },
   "devDependencies": {
     "@barefootjs/adapter-tests": "0.1.0",
-    "@barefootjs/vite": "0.31.0",
+    "@barefootjs/vite": "0.31.2",
     "@types/jsdom": "^27.0.0",
     "hono": "^4.6.0",
     "jsdom": "^27.3.0",

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

@@ -99,10 +99,11 @@ describe('aliased destructured props (#2460)', () => {
   })
 
   test('aliased prop reaches client-side hydration serialization with the correct value', async () => {
-    // The client init function reads `_p.<localName>` (props-extraction
+    // The client init function reads `_p.<callerKey>` (props-extraction
     // phase), so the SSR-serialized `bf-p` blob must carry the correct
-    // value under the LOCAL key (`count`) — the rename only affects the
-    // caller-facing key, not the local binding the hydration bridge uses.
+    // value under the CALLER-facing key (`n`) — `_p` is uniformly keyed
+    // by `sourceName ?? name` across every producer/consumer (#2524 CSR
+    // half), not the local binding the destructure renames it to.
     const html = await renderHonoComponent({
       adapter: new HonoAdapter(),
       source: `
@@ -120,9 +121,9 @@ describe('aliased destructured props (#2460)', () => {
 
     // The rendered value is correct...
     expect(html).toContain(':<!--bf:s1-->7<!--/-->')
-    // ...and the serialized hydration payload carries it under the LOCAL
-    // binding name, which is what the generated client JS's
-    // `const count = _p.count` extraction reads.
-    expect(html).toMatch(/bf-p="[^"]*count[^"]*7/)
+    // ...and the serialized hydration payload carries it under the
+    // CALLER-facing key, which is what the generated client JS's
+    // `const count = _p.n` extraction reads.
+    expect(html).toMatch(/bf-p="[^"]*n[^"]*7/)
   })
 })

package/src/__tests__/consumer-typecheck.test.ts

@@ -0,0 +1,403 @@
+/**
+ * Type-check a CONSUMER program that imports a compiled template — the
+ * coverage gap behind both #2559 and #2565: nothing in-repo ever ran tsc
+ * over a program shaped like a consumer app, so type-level defects in the
+ * emitted `.tsx` shipped invisibly (both were found by downstream apps
+ * migrating their BarefootJS version).
+ *
+ * Each case compiles a real `'use client'` component, writes the emitted
+ * template plus a scaffold-shaped `server.tsx` that renders the island,
+ * and type-checks the pair with the scaffold's own options (`strict`,
+ * `jsxImportSource: '@barefootjs/hono/jsx'`).
+ */
+import { describe, expect, test } from 'bun:test'
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import ts from 'typescript'
+import { compileJSX } from '@barefootjs/jsx'
+import { HonoAdapter } from '../adapter/index.ts'
+
+const HERE = resolve(import.meta.dir)
+
+interface Diagnostic {
+  code: number
+  file: string
+  message: string
+}
+
+/**
+ * Write `template` as `components/<name>.tsx` alongside `server.tsx` and
+ * run tsc over the pair, returning the flattened diagnostics.
+ *
+ * The temp dir lives INSIDE the package so module resolution reaches the
+ * workspace's node_modules (hono, @barefootjs/*) exactly like a
+ * scaffolded app's.
+ */
+function typeCheckConsumer(name: string, template: string, server: string): Diagnostic[] {
+  const tmp = mkdtempSync(join(HERE, '.consumer-typecheck-'))
+  try {
+    mkdirSync(join(tmp, 'components'), { recursive: true })
+    writeFileSync(join(tmp, 'components', `${name}.tsx`), template)
+    writeFileSync(join(tmp, 'server.tsx'), server)
+
+    const program = ts.createProgram(
+      [join(tmp, 'server.tsx')],
+      {
+        strict: true,
+        noEmit: true,
+        target: ts.ScriptTarget.ESNext,
+        module: ts.ModuleKind.ESNext,
+        moduleResolution: ts.ModuleResolutionKind.Bundler,
+        jsx: ts.JsxEmit.ReactJSX,
+        jsxImportSource: '@barefootjs/hono/jsx',
+        lib: ['lib.esnext.d.ts', 'lib.dom.d.ts'],
+        allowImportingTsExtensions: true,
+        // Consumer apps skipLibCheck too; the errors these tests pin fire
+        // in OUR files regardless.
+        skipLibCheck: true,
+      },
+    )
+    return ts.getPreEmitDiagnostics(program).map(d => ({
+      code: d.code,
+      file: d.file?.fileName.replace(tmp, '') ?? '',
+      message: ts.flattenDiagnosticMessageText(d.messageText, ' '),
+    }))
+  } finally {
+    rmSync(tmp, { recursive: true, force: true })
+  }
+}
+
+const COMPONENT_SOURCE = `"use client"
+
+import { createSignal } from '@barefootjs/client'
+
+export function Counter() {
+  const [count, setCount] = createSignal(0)
+  return <button onClick={() => setCount(count() + 1)}>{count()}</button>
+}
+`
+
+const SERVER_SOURCE = `import { Counter } from './components/Counter.tsx'
+
+export function Page() {
+  return (
+    <div>
+      <Counter />
+    </div>
+  )
+}
+`
+
+/**
+ * #2565's shape: a module-level `as const` record indexed with a
+ * narrowing assertion (`strokePaths[name as keyof typeof strokePaths]`),
+ * where the prop's union is DELIBERATELY wider than the record's keys —
+ * `'github' | 'search'` are handled by earlier early-returns and have no
+ * entry in `strokePaths`. That width is the whole point: the compiler
+ * folds the record's cases into the JSX binding, and the assertion that
+ * made the source type-check is type-stripped out of the IR's index
+ * expression, so the inlined literal ends up indexed by the full union.
+ *
+ * `IconName` is spelled as an explicit literal union rather than the
+ * source component's `keyof typeof strokePaths | …` so this case pins the
+ * lookup annotation ALONE. The alias form is pinned separately below —
+ * before that fix it failed TS2304 and widened `keyof typeof` to
+ * `string | number | symbol`, which would have masked the TS7053 here.
+ */
+const ICON_SOURCE = `"use client"
+
+const strokePaths = {
+  'check': 'M20 6 9 17l-5-5',
+  'chevron-down': 'm6 9 6 6 6-6',
+} as const
+
+export type IconName = 'check' | 'chevron-down' | 'github' | 'search'
+
+export function Icon({ name }: { name: IconName }) {
+  if (name === 'github') {
+    return <span>gh</span>
+  }
+  if (name === 'search') {
+    return <span>search</span>
+  }
+  const path = strokePaths[name as keyof typeof strokePaths]
+  if (!path) {
+    return null
+  }
+  return <svg viewBox="0 0 24 24"><path d={path} /></svg>
+}
+`
+
+const ICON_SERVER_SOURCE = `import { Icon } from './components/Icon.tsx'
+
+export function Page() {
+  return (
+    <div>
+      <Icon name="check" />
+    </div>
+  )
+}
+`
+
+/**
+ * The same defect through the OTHER emit path: a component-prop `template`
+ * is collapsed to a neutral JS expression at IR construction time, so it
+ * bypasses the adapter's template-parts renderer. Both positions —
+ * intrinsic attr and component prop — carry the record lookup here, and
+ * `size` is never narrowed, so every case of `Size` reaches the index.
+ */
+const BOX_SOURCE = `"use client"
+
+const sizeClasses = { sm: 'h-4', md: 'h-6' } as const
+
+export type Size = 'sm' | 'md' | 'lg'
+
+function Inner({ className }: { className: string }) {
+  return <span className={className} />
+}
+
+export function Box({ size }: { size: Size }) {
+  const cls = sizeClasses[size as keyof typeof sizeClasses]
+  return <div className={cls}><Inner className={cls} /></div>
+}
+`
+
+const BOX_SERVER_SOURCE = `import { Box } from './components/Box.tsx'
+
+export function Page() {
+  return (
+    <div>
+      <Box size="sm" />
+    </div>
+  )
+}
+`
+
+/**
+ * #2570: a module-level type alias that queries a const with `typeof`.
+ * Type declarations are re-emitted verbatim at MODULE scope while source
+ * module-level consts are localised into each component body, so
+ * `keyof typeof strokePaths` lost its referent — TS2304, and the alias
+ * then degraded to `keyof any`.
+ *
+ * This is the icon component's real shape (`ui/components/ui/icon`): the
+ * union mixes the record's own keys with names handled by early returns.
+ */
+const TYPEOF_ALIAS_SOURCE = `"use client"
+
+const strokePaths = {
+  'check': 'M20 6 9 17l-5-5',
+  'chevron-down': 'm6 9 6 6 6-6',
+} as const
+
+export type IconName = keyof typeof strokePaths | 'github'
+
+export function Icon({ name }: { name: IconName }) {
+  if (name === 'github') {
+    return <span>gh</span>
+  }
+  const path = strokePaths[name as keyof typeof strokePaths]
+  return <svg viewBox="0 0 24 24"><path d={path} /></svg>
+}
+`
+
+const TYPEOF_ALIAS_SERVER_SOURCE = `import { Icon } from './components/Icon.tsx'
+
+export function Page() {
+  return (
+    <div>
+      <Icon name="chevron-down" />
+    </div>
+  )
+}
+`
+
+/** Same consumer, but with a name that is NOT in the union. */
+const TYPEOF_ALIAS_BAD_SERVER_SOURCE = `import { Icon } from './components/Icon.tsx'
+
+export function Page() {
+  return (
+    <div>
+      <Icon name="totally-not-an-icon" />
+    </div>
+  )
+}
+`
+
+/**
+ * #2570 through the PROPS-TYPE channel: the `typeof` query lives in the
+ * props annotation (which the emitter folds into the synthesized
+ * `<Name>PropsWithHydration` alias at module scope), not in a named type
+ * alias — so a fix that only scanned `typeDefinitions` missed it.
+ */
+const PROPS_TYPEOF_SOURCE = `"use client"
+
+const modes = { a: 1, b: 2 } as const
+
+export function Box({ mode }: { mode: keyof typeof modes }) {
+  return <div>{modes[mode]}</div>
+}
+`
+
+const PROPS_TYPEOF_SERVER_SOURCE = `import { Box } from './components/Box.tsx'
+
+export function Page() {
+  return <Box mode="a" />
+}
+`
+
+/** Same consumer, but with a key that is NOT in the record. */
+const PROPS_TYPEOF_BAD_SERVER_SOURCE = `import { Box } from './components/Box.tsx'
+
+export function Page() {
+  return <Box mode="zzz" />
+}
+`
+
+/**
+ * #2570's third face: an inline-exported type alias no component body
+ * references. Per-component reachability pruning dropped it from the
+ * emitted template entirely, so a consumer's `import type { Sizer }`
+ * failed TS2305 — and had it survived, its `typeof sizeOf` query needed
+ * the (non-exported, module-scope) function beside it.
+ */
+const EXPORTED_TYPE_SOURCE = `"use client"
+
+function sizeOf(s: 'sm' | 'md') { return s === 'sm' ? 16 : 20 }
+
+export type Sizer = typeof sizeOf
+
+export function Box({ label }: { label: string }) {
+  const n = sizeOf('sm')
+  return <div>{label}{n}</div>
+}
+`
+
+const EXPORTED_TYPE_SERVER_SOURCE = `import { Box } from './components/Box.tsx'
+import type { Sizer } from './components/Box.tsx'
+
+const f: Sizer = (s) => (s === 'sm' ? 16 : 20)
+
+export function Page() {
+  return <Box label={String(f('md'))} />
+}
+`
+
+describe('consumer program type-check', () => {
+  test('a compiled template used as a JSX component type-checks clean (#2559)', () => {
+    const result = compileJSX(COMPONENT_SOURCE, '/virtual/Counter.tsx', {
+      adapter: new HonoAdapter(),
+      // Non-empty so the emitted template's component body returns
+      // wrapWithInlineScripts(...) — the #2559 shape.
+      scriptAssets: ['/static/components/assets/Counter.js'],
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')?.content
+    expect(template).toContain('wrapWithInlineScripts(')
+
+    const diagnostics = typeCheckConsumer('Counter', template!, SERVER_SOURCE)
+
+    // TS2786 = "'X' cannot be used as a JSX component." — the #2559
+    // failure. Assert none anywhere in the consumer program.
+    expect(diagnostics.filter(d => d.code === 2786)).toEqual([])
+  })
+
+  test('an inlined-const index does not re-expose an unnarrowed key (#2565)', () => {
+    const result = compileJSX(ICON_SOURCE, '/virtual/Icon.tsx', {
+      adapter: new HonoAdapter(),
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')?.content
+
+    // The record's cases really are folded into the binding (if this ever
+    // stops holding, the type-check below would pass vacuously).
+    expect(template).toContain('"chevron-down": "m6 9 6 6 6-6"')
+    expect(template).toContain('as Record<string, string>)[name]')
+
+    const diagnostics = typeCheckConsumer('Icon', template!, ICON_SERVER_SOURCE)
+
+    // TS7053 = "Element implicitly has an 'any' type because expression of
+    // type 'IconName' can't be used to index type '{ check: string; … }'".
+    expect(diagnostics.filter(d => d.code === 7053)).toEqual([])
+    // The whole emitted template is clean for this shape — no error was
+    // merely traded for a different one (e.g. TS2538 on the index type).
+    expect(diagnostics).toEqual([])
+  })
+
+  test('a collapsed component-prop lookup is annotated too (#2565)', () => {
+    const result = compileJSX(BOX_SOURCE, '/virtual/Box.tsx', {
+      adapter: new HonoAdapter(),
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')?.content
+
+    // Both emit paths reach the annotation: the intrinsic `<div className>`
+    // via the template-parts renderer, and the `<Inner className>` prop via
+    // the IR-time collapse that `expressionValueToJs` re-renders.
+    expect(template!.match(/as Record<string, string>/g)).toHaveLength(2)
+
+    const diagnostics = typeCheckConsumer('Box', template!, BOX_SERVER_SOURCE)
+
+    // Without the annotation TS reports TS2339 here (it distributes the
+    // `Size` union over the literal and finds no `lg`); the attribute-only
+    // fix left this one behind.
+    expect(diagnostics).toEqual([])
+  })
+
+  test('a type alias keeps resolving the const it queries with typeof (#2570)', () => {
+    const result = compileJSX(TYPEOF_ALIAS_SOURCE, '/virtual/Icon.tsx', {
+      adapter: new HonoAdapter(),
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')?.content
+
+    // The alias really is re-emitted at module scope with the type query
+    // intact (otherwise the assertions below would pass vacuously), and
+    // the const it queries is hoisted to module scope beside it — exactly
+    // once, since `moduleConstants` dedups file-wide by exact string match.
+    expect(template).toContain('export type IconName = keyof typeof strokePaths')
+    expect(template!.match(/^const strokePaths = \{/gm)).toHaveLength(1)
+
+    expect(typeCheckConsumer('Icon', template!, TYPEOF_ALIAS_SERVER_SOURCE)).toEqual([])
+
+    // The alias must keep its LITERAL key union, not merely resolve. An
+    // unresolved `keyof typeof` degrades to `keyof any`
+    // (`string | number | symbol`), which still type-checks the valid
+    // consumer above while silently accepting anything — so the guard that
+    // actually holds the line is a consumer passing a bogus name.
+    const rejected = typeCheckConsumer('Icon', template!, TYPEOF_ALIAS_BAD_SERVER_SOURCE)
+    expect(rejected.map(d => d.code)).toEqual([2322])
+    expect(rejected[0]!.message).toContain('is not assignable to type \'IconName\'')
+  })
+
+  test('a props-annotation typeof query keeps its referent too (#2570)', () => {
+    const result = compileJSX(PROPS_TYPEOF_SOURCE, '/virtual/Box.tsx', {
+      adapter: new HonoAdapter(),
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')?.content
+
+    expect(typeCheckConsumer('Box', template!, PROPS_TYPEOF_SERVER_SOURCE)).toEqual([])
+
+    // The union must stay literal — an unresolved `typeof modes` widens
+    // `keyof` to `string | number | symbol`, which accepts anything.
+    const rejected = typeCheckConsumer('Box', template!, PROPS_TYPEOF_BAD_SERVER_SOURCE)
+    expect(rejected.map(d => d.code)).toEqual([2322])
+  })
+
+  test('an inline-exported type alias survives emission (#2570)', () => {
+    const result = compileJSX(EXPORTED_TYPE_SOURCE, '/virtual/Box.tsx', {
+      adapter: new HonoAdapter(),
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')?.content
+
+    // The alias is emitted (previously reachability-pruned → TS2305 for
+    // the consumer) AND its `typeof sizeOf` referent is emitted at module
+    // scope beside it.
+    expect(template).toContain('export type Sizer = typeof sizeOf')
+    expect(template).toMatch(/^function sizeOf/m)
+
+    expect(typeCheckConsumer('Box', template!, EXPORTED_TYPE_SERVER_SOURCE)).toEqual([])
+  })
+})

package/src/__tests__/corpus-typecheck.test.ts

@@ -0,0 +1,130 @@
+/**
+ * Corpus type-check gate: compile EVERY `ui/components/ui/*` component with
+ * the Hono adapter and run one tsc program over all emitted templates.
+ *
+ * #2559, #2565, and #2570 were each found by a downstream app migrating its
+ * BarefootJS version, not by CI — the example-based consumer-typecheck cases
+ * pin each *known* shape, but can't anticipate the next one. The real ui/
+ * corpus can: it exercises every emitter path the library itself uses, so a
+ * new type-level emission defect surfaces here as a new diagnostic.
+ *
+ * The gate holds the line at the CURRENT profile via `KNOWN_DIAGNOSTICS`
+ * (issue #2573): a (component, TS code) pair outside the allowlist, or a
+ * count above its allowlisted ceiling, fails. Fixing a family should ratchet
+ * its entry down (or out) in the same PR — entries may only shrink.
+ *
+ * Heaviest test in this package (~30s compile + ~10s tsc), deliberately one
+ * program for all templates so cross-template imports (`../button`,
+ * `../../types`) resolve like a consumer app's.
+ */
+import { describe, expect, test } from 'bun:test'
+import { cpSync, mkdirSync, mkdtempSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import ts from 'typescript'
+import { compileJSX } from '@barefootjs/jsx'
+import { HonoAdapter } from '../adapter/index.ts'
+
+const HERE = resolve(import.meta.dir)
+const REPO = resolve(HERE, '../../../..')
+const UI = join(REPO, 'ui/components/ui')
+const UI_TYPES = join(REPO, 'ui/types/index.tsx')
+
+/**
+ * Pre-existing type-level debt in emitted templates, tracked in
+ * https://github.com/piconic-ai/barefootjs/issues/2573 — see the issue for
+ * the per-family mechanisms. Counts are ceilings: shrink them (or delete
+ * the entry) when a family is fixed; never raise one to make a new defect
+ * pass.
+ */
+const KNOWN_DIAGNOSTICS: Record<string, number> = {
+  'chart TS17001': 6,
+  'chart TS18046': 69,
+  'chart TS2307': 2,
+  'chart TS2322': 2,
+  'chart TS7006': 34,
+  'xyflow TS2304': 7,
+  'xyflow TS2307': 2,
+}
+
+describe('ui corpus type-check gate (#2570 / #2573)', () => {
+  test('emitted templates introduce no type diagnostics beyond the known debt', () => {
+    const tmp = mkdtempSync(join(HERE, '.corpus-typecheck-'))
+    try {
+      mkdirSync(join(tmp, 'components', 'ui'), { recursive: true })
+      // `../../types` (from a component) and `../../../types` (both shapes
+      // appear in ui sources) — mirror the source tree's resolution targets.
+      // Parent dirs created explicitly: `cpSync`'s parent-creation behaviour
+      // for file→file copies is an implementation detail not worth relying on.
+      mkdirSync(join(tmp, 'types'), { recursive: true })
+      mkdirSync(join(tmp, 'components', 'types'), { recursive: true })
+      cpSync(UI_TYPES, join(tmp, 'types', 'index.tsx'))
+      cpSync(UI_TYPES, join(tmp, 'components', 'types', 'index.tsx'))
+
+      const roots: string[] = []
+      for (const name of readdirSync(UI).sort()) {
+        let source: string
+        try {
+          source = readFileSync(join(UI, name, 'index.tsx'), 'utf8')
+        } catch {
+          continue
+        }
+        const result = compileJSX(source, join(UI, name, 'index.tsx'), {
+          adapter: new HonoAdapter(),
+        })
+        // A component the compiler refuses outright is a different failure
+        // class (covered by conformance) — this gate is about the emitted
+        // templates, so refusals must not silently shrink its coverage.
+        expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+        const template = result.files.find(f => f.type === 'markedTemplate')?.content
+        if (!template) continue
+        const dir = join(tmp, 'components', 'ui', name)
+        mkdirSync(dir, { recursive: true })
+        const out = join(dir, 'index.tsx')
+        writeFileSync(out, template)
+        roots.push(out)
+      }
+      // The corpus is the coverage — a collapse in compiled-template count
+      // would make the diagnostic assertions below pass vacuously.
+      expect(roots.length).toBeGreaterThanOrEqual(60)
+
+      const program = ts.createProgram(roots, {
+        strict: true,
+        noEmit: true,
+        target: ts.ScriptTarget.ESNext,
+        module: ts.ModuleKind.ESNext,
+        moduleResolution: ts.ModuleResolutionKind.Bundler,
+        jsx: ts.JsxEmit.ReactJSX,
+        jsxImportSource: '@barefootjs/hono/jsx',
+        lib: ['lib.esnext.d.ts', 'lib.dom.d.ts'],
+        allowImportingTsExtensions: true,
+        skipLibCheck: true,
+      })
+
+      const counts = new Map<string, number>()
+      const samples = new Map<string, string>()
+      for (const d of ts.getPreEmitDiagnostics(program)) {
+        const component = d.file
+          ? d.file.fileName.replace(`${tmp}/components/ui/`, '').replace('/index.tsx', '')
+          : '(no file)'
+        const key = `${component} TS${d.code}`
+        counts.set(key, (counts.get(key) ?? 0) + 1)
+        if (!samples.has(key)) {
+          samples.set(key, ts.flattenDiagnosticMessageText(d.messageText, ' ').slice(0, 200))
+        }
+      }
+
+      const violations: string[] = []
+      for (const [key, count] of [...counts].sort()) {
+        const allowed = KNOWN_DIAGNOSTICS[key]
+        if (allowed === undefined) {
+          violations.push(`NEW ${key} x${count} — ${samples.get(key)}`)
+        } else if (count > allowed) {
+          violations.push(`GREW ${key}: ${allowed} -> ${count} — ${samples.get(key)}`)
+        }
+      }
+      expect(violations).toEqual([])
+    } finally {
+      rmSync(tmp, { recursive: true, force: true })
+    }
+  }, 180_000)
+})

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

@@ -0,0 +1,70 @@
+/**
+ * Hono adapter jsx-runtime: `dangerouslySetInnerHTML` with no children (#2557).
+ *
+ * hono's own `jsxFn` (see `hono/dist/jsx/base.js`) always wraps `<svg>` /
+ * `<head>` children in an internal namespace-context node, even when the
+ * caller passed no real children. That phantom wrapper makes hono's own
+ * `children.length > 0` guard true, so any *childless* `<svg>`/`<head>`
+ * element using `dangerouslySetInnerHTML` tripped hono's
+ * "Can only set one of `children` or `props.dangerouslySetInnerHTML`"
+ * error — even though there were no real children to conflict with.
+ *
+ * `../jsx/jsx-runtime/index.ts` and `../jsx/jsx-dev-runtime/index.ts` work
+ * around this by resolving `dangerouslySetInnerHTML` into real `children`
+ * themselves before delegating to hono, whenever no explicit `children`
+ * prop is present. This pins that fix at the runtime-function level (the
+ * layer BarefootJS's compiled SSR output actually calls into) and confirms
+ * genuine children+dangerouslySetInnerHTML conflicts are still rejected.
+ */
+import { describe, test, expect } from 'bun:test'
+import { jsx, jsxs } from '../jsx/jsx-runtime/index.ts'
+import { jsxDEV } from '../jsx/jsx-dev-runtime/index.ts'
+
+describe('dangerouslySetInnerHTML with no children (#2557)', () => {
+  test('jsx: <svg dangerouslySetInnerHTML> with no children does not throw', () => {
+    const html = String(jsx('svg', { dangerouslySetInnerHTML: { __html: '<path d="M1"/>' } }))
+    expect(html).toBe('<svg><path d="M1"/></svg>')
+  })
+
+  test('jsx: <head dangerouslySetInnerHTML> with no children does not throw', () => {
+    const html = String(jsx('head', { dangerouslySetInnerHTML: { __html: '<meta charset="utf-8">' } }))
+    expect(html).toBe('<head><meta charset="utf-8"></head>')
+  })
+
+  test('jsx: ordinary tags with dangerouslySetInnerHTML still work', () => {
+    const html = String(jsx('div', { dangerouslySetInnerHTML: { __html: '<b>hi</b>' } }))
+    expect(html).toBe('<div><b>hi</b></div>')
+  })
+
+  test('jsxs: <svg dangerouslySetInnerHTML> with no children does not throw', () => {
+    const html = String(jsxs('svg', { dangerouslySetInnerHTML: { __html: '<circle r="1"/>' } }))
+    expect(html).toBe('<svg><circle r="1"/></svg>')
+  })
+
+  test('jsxDEV: <svg dangerouslySetInnerHTML> with no children does not throw', () => {
+    const html = String(jsxDEV('svg', { dangerouslySetInnerHTML: { __html: '<rect/>' } }))
+    expect(html).toBe('<svg><rect/></svg>')
+  })
+
+  test('genuine conflict — both children and dangerouslySetInnerHTML — still throws', () => {
+    expect(() =>
+      String(jsx('span', { dangerouslySetInnerHTML: { __html: 'x' }, children: 'real' }))
+    ).toThrow('Can only set one of `children` or `props.dangerouslySetInnerHTML`.')
+  })
+
+  test('function components receive the caller props untouched', () => {
+    // The workaround is scoped to intrinsic string tags: a user component
+    // must see exactly what the caller passed (it may forward
+    // `dangerouslySetInnerHTML` to an intrinsic element itself).
+    const seen: Record<string, unknown>[] = []
+    const Widget = (props: Record<string, unknown>) => {
+      seen.push(props)
+      return jsx('div', { dangerouslySetInnerHTML: props.dangerouslySetInnerHTML })
+    }
+    const html = String(jsx(Widget, { dangerouslySetInnerHTML: { __html: '<b>fwd</b>' } }))
+    expect(html).toBe('<div><b>fwd</b></div>')
+    expect(seen).toHaveLength(1)
+    expect(seen[0].dangerouslySetInnerHTML).toEqual({ __html: '<b>fwd</b>' })
+    expect('children' in seen[0]).toBe(false)
+  })
+})