@barefootjs/hono 0.31.0 → 0.31.2

package/src/__tests__/nested-ternary-bare-branch.test.ts

@@ -0,0 +1,70 @@
+/**
+ * #2470: a nested ternary chain (`a ? … : b ? … : …`) sitting in the
+ * ALTERNATE of a NON-reactive outer conditional (no signal/prop/call —
+ * a module-level `const`) used to emit
+ *
+ *   {MODE === 'a' ? <span>A</span> : {MODE === 'b' ? <span>B</span> : <span>C</span>}}
+ *
+ * — the nested conditional re-wrapped in its own `{…}` in a position where
+ * only a bare JS expression is legal, breaking the `.tsx` parse
+ * (`Expected "}" but found "==="`) with zero diagnostics. See
+ * `renderConditionalBody` / `renderBareBranch` in `hono-adapter.ts`.
+ */
+import { describe, expect, test } from 'bun:test'
+import { mkdtempSync, 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 SOURCE = `
+const MODE = 'b'
+export function Chain() {
+  return <div>{MODE === 'a' ? <span>A</span> : MODE === 'b' ? <span>B</span> : <span>C</span>}</div>
+}
+`
+
+describe('nested ternary under a non-reactive outer condition (#2470)', () => {
+  test('the emitted template has no double-braced nested conditional', () => {
+    const result = compileJSX(SOURCE, '/virtual/Chain.tsx', {
+      adapter: new HonoAdapter(),
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')?.content
+    expect(template).toBeDefined()
+
+    // The nested conditional's branch must stay a bare `cond ? … : …`
+    // splice, not a second `{…}`-wrapped expression, inside the outer
+    // ternary's alternate.
+    expect(template).toContain(
+      "MODE === 'a' ? <span>A</span> : MODE === 'b' ? <span>B</span> : <span>C</span>",
+    )
+    expect(template).not.toContain(': {MODE ===')
+
+    // The template must actually PARSE as valid TSX — this is the
+    // regression the bug produced silently (no compiler diagnostic, just a
+    // downstream syntax error at build time). `getSyntacticDiagnostics` is
+    // the public API for this (mirrors `consumer-typecheck.test.ts`'s
+    // `ts.createProgram` usage, scoped to syntax only since this file has
+    // no import to resolve).
+    const tmp = mkdtempSync(join(HERE, '.nested-ternary-bare-branch-'))
+    try {
+      const file = join(tmp, 'Chain.tsx')
+      writeFileSync(file, template!)
+      const program = ts.createProgram([file], {
+        noEmit: true,
+        target: ts.ScriptTarget.ESNext,
+        jsx: ts.JsxEmit.ReactJSX,
+        jsxImportSource: '@barefootjs/hono/jsx',
+        allowImportingTsExtensions: true,
+        skipLibCheck: true,
+      })
+      const syntaxDiagnostics = program.getSyntacticDiagnostics(program.getSourceFile(file))
+      expect(syntaxDiagnostics.map(d => ts.flattenDiagnosticMessageText(d.messageText, ' '))).toEqual([])
+    } finally {
+      rmSync(tmp, { recursive: true, force: true })
+    }
+  }, 30_000)
+})

package/src/adapter/hono-adapter.ts

@@ -34,8 +34,8 @@ import {
   emitIRNode,
   emitAttrValue,
   buildLoopChainExpr,
+  propsDestructureBinding,
 } from '@barefootjs/jsx'
-import ts from 'typescript'
 
 /**
  * Hono adapter's IRNode render context: which surrounding render
@@ -98,28 +98,6 @@ function applyHonoLoopChain(loop: IRLoop): string {
   })
 }
 
-/**
- * Authoritative IdentifierName classification for a destructure-pattern
- * property key, built on TS's own `isIdentifierStart` / `isIdentifierPart`
- * primitives (Unicode-aware, stays aligned with what TS itself accepts as
- * a bare property key). Mirrors the `isIdent` precedent in
- * `jsx-to-ir.ts` (#1244) — a source key like `data-key` or `aria-label`
- * can't be emitted as a bare `key: local` destructure and must be quoted
- * (`"data-key": local`).
- */
-function isIdentifierName(key: string): boolean {
-  if (key.length === 0) return false
-  for (let i = 0; i < key.length; ) {
-    const cp = key.codePointAt(i)!
-    const ok = i === 0
-      ? ts.isIdentifierStart(cp, ts.ScriptTarget.Latest)
-      : ts.isIdentifierPart(cp, ts.ScriptTarget.Latest)
-    if (!ok) return false
-    i += cp > 0xFFFF ? 2 : 1
-  }
-  return true
-}
-
 export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderCtx> {
   name = 'hono'
   extension = '.tsx'
@@ -212,18 +190,16 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
       this.preloadAssets = options?.preloadAssets
     }
 
-    // Generate component body FIRST so we can scan it for used imports
+    // Generate component body FIRST so we can scan it for used imports.
+    // Module-scope declarations stay at module scope (#2570) — see
+    // `generateModuleScopeDeclarations`; they join the scan text so a
+    // helper referenced only from a hoisted declaration still pulls its
+    // import.
     const component = this.generateComponent(ir)
-    const types = this.generateTypes(ir, component)
-    const componentCode = [types, component].filter(Boolean).join('\n')
+    const types = this.generateTypes(ir)
+    const moduleConstants = this.generateModuleScopeDeclarations(ir)
+    const componentCode = [moduleConstants, types, component].filter(Boolean).join('\n')
     const imports = this.generateImports(ir, componentCode)
-    // Module-level Context bindings (`const Ctx = createContext()`) are
-    // skipped from the SSR signal-initializer block by JsxAdapter — they
-    // need to live at module scope so providers and consumers in the same
-    // render share the same Context object identity. Emitted in a dedicated
-    // section so multi-component dedup works on the full block (not per
-    // line, which would split multi-line `({...})` arguments).
-    const moduleConstants = this.generateModuleLevelContextBindings(ir)
 
     const defaultExport = ir.metadata.hasDefaultExport
       ? `\nexport default ${this.componentName}`
@@ -235,6 +211,7 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
       component,
       defaultExport,
       moduleConstants,
+      moduleConstantsIncludeExports: true,
     }
 
     // Assemble template for backward compat (external consumers using output.template)
@@ -275,20 +252,6 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
     return this.hasScriptAssets() && !!this.preloadAssets && this.preloadAssets.length > 0
   }
 
-  private generateModuleLevelContextBindings(ir: ComponentIR): string {
-    const lines: string[] = []
-    for (const c of ir.metadata.localConstants) {
-      if (!c.isModule) continue
-      if (c.isExported) continue
-      if (c.systemConstructKind !== 'createContext') continue
-      if (!c.value) continue
-      const keyword = c.declarationKind ?? 'const'
-      const value = this.jsxConfig.preserveTypes ? (c.typedValue ?? c.value) : c.value
-      lines.push(`${keyword} ${c.name} = ${value}`)
-    }
-    return lines.join('\n')
-  }
-
   // ===========================================================================
   // Imports Generation
   // ===========================================================================
@@ -369,73 +332,23 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
   // Types Generation
   // ===========================================================================
 
-  generateTypes(ir: ComponentIR, componentBody?: string): string | null {
+  /**
+   * Per-component synthesized types only. The source module's own type
+   * declarations are NOT emitted here — `generateModuleScopeDeclarations`
+   * carries them once, file-wide, in the module-constants section (#2570).
+   * The per-component reachability scan that used to live here (#1453) is
+   * gone with them: pruning per component both duplicated shared types
+   * across components' sections (TS2300 — the compiler dedups sections by
+   * whole string) and dropped exported types no component referenced
+   * (TS2305 for any consumer's `import type`).
+   */
+  generateTypes(ir: ComponentIR): string | null {
     const lines: string[] = []
 
-    // Include original type definitions — only those referenced in the component body
-    // or transitively referenced by other included type definitions
-    if (componentBody && ir.metadata.typeDefinitions.length > 0) {
-      const propsTypeName = this.getPropsTypeName(ir)
-      // Seed the reachability scan with everything that ends up referencing
-      // a type name in the FINAL emitted file, not just the component body.
-      //
-      // - `propsTypeName` is referenced by the synthesized
-      //   `${Name}PropsWithHydration = ${propsTypeName} & {...}` alias the
-      //   destructured-props branch emits below — but that alias is built
-      //   AFTER this scan, so the body never literally mentions e.g.
-      //   `ButtonProps`. Without seeding it here the alias references an
-      //   undeclared name (TS2304) and TS widens `variant`/`size` to `any`
-      //   at every `Record[variant]` lookup site (TS7053) downstream.
-      //
-      // - Named re-export blocks (`export type { ButtonVariant, ButtonSize,
-      //   ButtonProps }`) are emitted by the compiler's `generateModuleExports`
-      //   AFTER `s.types`. Each re-exported local name needs its declaration
-      //   carried forward too. Issue #1453 covers the full reproduction.
-      const seedText = [
-        componentBody,
-        propsTypeName && !ir.metadata.propsObjectName ? propsTypeName : '',
-        ...ir.metadata.namedExports
-          .filter((block) => block.source === null)
-          .flatMap((block) => block.specifiers.map((s) => s.name)),
-      ].filter(Boolean).join('\n')
-
-      const included = new Set<string>()
-      // First pass: include types directly referenced in the seed text
-      for (const typeDef of ir.metadata.typeDefinitions) {
-        if (new RegExp(`\\b${typeDef.name}\\b`).test(seedText)) {
-          included.add(typeDef.name)
-        }
-      }
-      // Transitive pass: include types referenced by already-included types
-      let changed = true
-      while (changed) {
-        changed = false
-        for (const typeDef of ir.metadata.typeDefinitions) {
-          if (included.has(typeDef.name)) continue
-          for (const name of included) {
-            const includedDef = ir.metadata.typeDefinitions.find(t => t.name === name)
-            if (includedDef && new RegExp(`\\b${typeDef.name}\\b`).test(includedDef.definition)) {
-              included.add(typeDef.name)
-              changed = true
-              break
-            }
-          }
-        }
-      }
-      for (const typeDef of ir.metadata.typeDefinitions) {
-        if (included.has(typeDef.name)) lines.push(typeDef.definition)
-      }
-    } else {
-      for (const typeDef of ir.metadata.typeDefinitions) {
-        lines.push(typeDef.definition)
-      }
-    }
-
     // Generate hydration props type (only when destructured-props pattern uses it;
     // SolidJS-style props use inline type annotation instead)
     const propsTypeName = this.getPropsTypeName(ir)
     if (propsTypeName && !ir.metadata.propsObjectName) {
-      lines.push('')
       lines.push(`type ${this.componentName}PropsWithHydration = ${propsTypeName} & {`)
       lines.push('  __instanceId?: string')
       lines.push('  __bfScope?: string')
@@ -594,25 +507,11 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
     } else {
       const hydrationProps = `__instanceId, ${bfScopeAlias}, ${bfChildAlias}, ${bfParentPropsAlias}, ${bfParentAlias}, ${bfMountAlias}, ${dataKeyAlias}`
       const parts: string[] = []
+      // Rename-aware `key: local` bindings (b4f5075), shared with
+      // TestAdapter via `propsDestructureBinding` — see its docstring for
+      // the `class` → `className` reserved-word rationale.
       const propsParams = ir.metadata.propsParams
-        .map((p: ParamInfo) => {
-          // The caller-facing key is `sourceName ?? name` (ParamInfo's own
-          // rule) — `name` is only ever the LOCAL binding. Emit the plain
-          // shorthand when they match (byte-identical to before this was
-          // rename-aware); emit a `key: local` rename otherwise. This also
-          // covers the `class` → `className` rename correctly: a source
-          // prop literally named `class` can only reach `propsParams` via
-          // an aliased destructure (`{ class: className }` — `class` is a
-          // reserved word, so it can never be an un-aliased binding), which
-          // already sets `sourceName: 'class'` and is handled by the rename
-          // branch below (`class: className`), not a bare `className`.
-          const callerKey = p.sourceName ?? p.name
-          const localName = p.name
-          const binding = callerKey === localName
-            ? localName
-            : `${isIdentifierName(callerKey) ? callerKey : JSON.stringify(callerKey)}: ${localName}`
-          return p.defaultValue ? `${binding} = ${p.defaultValue}` : binding
-        })
+        .map((p: ParamInfo) => propsDestructureBinding(p))
         .join(', ')
       if (propsParams) {
         parts.push(propsParams)
@@ -696,7 +595,12 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
         // Skip functions and JSX elements (they can't be JSON serialized)
         // Use propsObjectName.propName for SolidJS-style, direct propName for destructured
         const propAccess = propsObjectName ? `${propsObjectName}.${p.name}` : p.name
-        lines.push(`  if (typeof ${propAccess} !== 'function' && !(typeof ${propAccess} === 'object' && ${propAccess} !== null && 'isEscaped' in ${propAccess})) __hydrateProps['${p.name}'] = ${propAccess}`)
+        // The `bf-p` blob key is always the caller-facing name (#2524 CSR
+        // half) — every non-Hono `_p` producer/consumer keys the same way,
+        // so a renaming destructure (`{ n: count }`) must serialize under
+        // `n`, not the local binding `count`.
+        const callerKey = p.sourceName ?? p.name
+        lines.push(`  if (typeof ${propAccess} !== 'function' && !(typeof ${propAccess} === 'object' && ${propAccess} !== null && 'isEscaped' in ${propAccess})) __hydrateProps['${callerKey}'] = ${propAccess}`)
       }
       lines.push(`  const __bfPropsJson = __bfParentProps || (Object.keys(__hydrateProps).length > 0 ? JSON.stringify(__hydrateProps) : undefined)`)
     } else if (hasClientInteractivity && isRootComponent) {
@@ -796,7 +700,7 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
       const v = node.valueProp.value
       switch (v.kind) {
         case 'literal': return JSON.stringify(v.value)
-        case 'expression':
+        case 'expression': return this.expressionValueToJs(v)
         case 'spread': return v.expr
         case 'template': return this.renderTemplateLiteralParts(v.parts)
         case 'boolean-attr':
@@ -908,6 +812,39 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
       return `{bfComment("cond-start:${cond.slotId}")}{bfComment("cond-end:${cond.slotId}")}`
     }
 
+    return `{${this.renderConditionalBody(cond, ctx)}}`
+  }
+
+  /**
+   * The bare ternary text for `cond` — everything `renderConditional` would
+   * wrap in `{…}`, minus that wrapping. `renderConditional` is the ONLY
+   * place that should add the enclosing braces for a JSX-child position.
+   *
+   * The two branches below need genuinely different embedding rules, not
+   * just a brace/no-brace toggle:
+   *
+   * - Non-reactive (`cond.slotId` is null): the whole thing collapses to a
+   *   FLAT `cond ? whenTrue : whenFalse` — one JS expression, wrapped in
+   *   `{…}` exactly once by whichever caller owns that position (either
+   *   `renderConditional` for a JSX-child position, or an ENCLOSING
+   *   ternary's own bare-branch splice when this conditional is itself
+   *   nested — see `renderBareBranch`). So whenTrue/whenFalse must stay
+   *   bare all the way down: a nested conditional branch renders through
+   *   `renderConditionalBody` again (bare), never through the generic
+   *   `renderNode`/`emitConditional` dispatch, which would re-brace it and
+   *   break the .tsx parse where only a plain expression is legal (#2470).
+   *
+   * - Reactive (`cond.slotId` set): each branch is spliced through
+   *   `wrapWithCondMarker`, which expects a self-contained renderable
+   *   chunk — an HTML-element string it can tag with `bf-c`, or otherwise
+   *   text/JSX content it splices directly as JSX CHILDREN inside a
+   *   `<>…</>` fragment. A nested conditional branch here must keep going
+   *   through the ordinary `renderNode`/`emitConditional` dispatch (via
+   *   `renderNodeRawCtx`, unchanged) so it comes back as a complete,
+   *   already-`{…}`-wrapped JSX expression container — valid as fragment
+   *   children, which bare ternary text would not be.
+   */
+  private renderConditionalBody(cond: IRConditional, ctx?: HonoRenderCtx): string {
     // A conditional that is itself a loop item root (#1665 whole-item
     // conditional: `arr.map(t => cond && <li/>)`) makes its branch element the
     // loop item's root, so the `data-key` that reconciliation/hydration expect
@@ -915,26 +852,29 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
     // the flag through so `renderElement` emits `data-key`, matching the Go /
     // CSR adapters' generic `key`→`data-key` rewrite.
     const branchCtx: HonoRenderCtx | undefined = ctx?.isLoopItemRoot ? { isLoopItemRoot: true } : undefined
+
+    if (!cond.slotId) {
+      const whenTrue = this.renderBareBranch(cond.whenTrue, branchCtx)
+      let whenFalse = this.renderBareBranch(cond.whenFalse, branchCtx)
+      if (!whenFalse || whenFalse === '' || whenFalse === 'null') {
+        whenFalse = 'null'
+      }
+      return `${cond.condition} ? ${whenTrue} : ${whenFalse}`
+    }
+
     const whenTrue = this.renderNodeRawCtx(cond.whenTrue, branchCtx)
     let whenFalse = this.renderNodeRawCtx(cond.whenFalse, branchCtx)
-
-    // Handle empty/null whenFalse
     if (!whenFalse || whenFalse === '' || whenFalse === 'null') {
       whenFalse = 'null'
     }
 
-    // If reactive, wrap with markers
-    if (cond.slotId) {
-      const trueWithMarker = this.wrapWithCondMarker(cond.whenTrue, whenTrue, cond.slotId)
-      // For null false branch, render comment markers so client can insert content later
-      const falseWithMarker = cond.whenFalse.type === 'expression' && cond.whenFalse.expr === 'null'
-        ? `<>{bfComment("cond-start:${cond.slotId}")}{bfComment("cond-end:${cond.slotId}")}</>`
-        : this.wrapWithCondMarker(cond.whenFalse, whenFalse, cond.slotId)
-
-      return `{${cond.condition} ? ${trueWithMarker} : ${falseWithMarker}}`
-    }
+    const trueWithMarker = this.wrapWithCondMarker(cond.whenTrue, whenTrue, cond.slotId)
+    // For null false branch, render comment markers so client can insert content later
+    const falseWithMarker = cond.whenFalse.type === 'expression' && cond.whenFalse.expr === 'null'
+      ? `<>{bfComment("cond-start:${cond.slotId}")}{bfComment("cond-end:${cond.slotId}")}</>`
+      : this.wrapWithCondMarker(cond.whenFalse, whenFalse, cond.slotId)
 
-    return `{${cond.condition} ? ${whenTrue} : ${whenFalse}}`
+    return `${cond.condition} ? ${trueWithMarker} : ${falseWithMarker}`
   }
 
   /**
@@ -951,6 +891,30 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
     return this.renderNode(node, ctx)
   }
 
+  /**
+   * A branch of a NON-reactive conditional's flat ternary (#2470) — the
+   * value must be a bare JS expression, since it's spliced directly into
+   * `cond ? whenTrue : whenFalse`. Mirrors `renderNodeRawCtx`'s existing
+   * `null`/`undefined` special case, extended to a nested conditional: that
+   * branch renders through `renderConditionalBody` itself (bare), instead
+   * of falling through to `renderNode`/`emitConditional`, which would wrap
+   * it in its own `{…}` and break the .tsx parse in this brace-free
+   * position. The `@client`-directive combination is excluded — its
+   * rendering is a pair of independent marker expressions, not a single JS
+   * expression, so it can't be spliced bare into a ternary branch either
+   * way; that shape falls through to the pre-existing (unrelated) behavior.
+   */
+  private renderBareBranch(node: IRNode, ctx?: HonoRenderCtx): string {
+    if (node.type === 'expression') {
+      if (node.expr === 'null' || node.expr === 'undefined') return 'null'
+      return node.expr
+    }
+    if (node.type === 'conditional' && !(node.clientOnly && node.slotId)) {
+      return this.renderConditionalBody(node, ctx)
+    }
+    return this.renderNode(node, ctx)
+  }
+
   private wrapWithCondMarker(node: IRNode, content: string, condId: string): string {
     // Components don't reliably forward bf-c to their root element.
     // Use comment markers so insert() can find them via TreeWalker.
@@ -1292,13 +1256,14 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
     // runtime sees the decoded string and escapes it on render).
     emitLiteral: (value, name) => `${name}="${escapeHtml(value.value)}"`,
     emitExpression: (value, name) => {
+      const expr = this.expressionValueToJs(value)
       // Boolean attrs / presence-folded expressions: pass `undefined` when
       // falsy so Hono omits the attribute. Wrap in parens to keep `??`
       // operators inside `expr` from breaking the surrounding `|| undefined`.
       if (isBooleanAttr(name) || value.presenceOrUndefined) {
-        return `${name}={(${value.expr}) || undefined}`
+        return `${name}={(${expr}) || undefined}`
       }
-      return `${name}={${value.expr}}`
+      return `${name}={${expr}}`
     },
     emitBooleanAttr: (_value, name) => name,
     emitBooleanShorthand: () => '',
@@ -1325,7 +1290,7 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
       // `calc(...)`) from a JS expression. The decoded value re-encodes
       // so the JSX parser hands the component the same decoded string.
       `${name}="${escapeHtml(value.value)}"`,
-    emitExpression: (value, name) => `${name}={${value.expr}}`,
+    emitExpression: (value, name) => `${name}={${this.expressionValueToJs(value)}}`,
     emitBooleanAttr: (_value, name) => name,
     emitBooleanShorthand: (_value, name) => name,
     emitTemplate: (value, name) => `${name}={${this.renderTemplateLiteralParts(value.parts)}}`,
@@ -1397,7 +1362,7 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
   private attrValueToJsExpr(value: AttrValue): string {
     switch (value.kind) {
       case 'literal': return JSON.stringify(value.value)
-      case 'expression':
+      case 'expression': return this.expressionValueToJs(value)
       case 'spread': return value.expr
       case 'template': return this.renderTemplateLiteralParts(value.parts)
       case 'boolean-shorthand':
@@ -1406,28 +1371,20 @@ export class HonoAdapter extends JsxAdapter implements IRNodeEmitter<HonoRenderC
     }
   }
 
+  /**
+   * Hono runs JS at SSR time, so a structured template can be
+   * re-materialised as the equivalent runtime JS — a `${MAP[KEY]}` lookup
+   * becomes an indexed access against the resolved cases, runtime-identical
+   * to the client emit path. Delegates to the single renderer shared with
+   * that path and with the IR-time component-prop collapse, which also adds
+   * the `preserveTypes` index annotation for this .tsx output (#2565).
+   *
+   * The parts' RAW keys/conditions are used (not their `templateX`
+   * projections) because this output runs inside the destructured-prop
+   * scope of the emitted component.
+   */
   private renderTemplateLiteralParts(parts: IRTemplatePart[]): string {
-    let output = '`'
-    for (const part of parts) {
-      if (part.type === 'string') {
-        output += part.value
-      } else if (part.type === 'ternary') {
-        output += `\${${part.condition} ? '${part.whenTrue}' : '${part.whenFalse}'}`
-      } else if (part.type === 'lookup') {
-        // Hono runs JS at SSR time, so a `${MAP[KEY]}` lookup can be
-        // re-materialised as a runtime indexed access against the
-        // resolved cases — byte-identical to the client emit path in
-        // `ir-to-client-js/utils.ts`. Use `part.key` (raw JS source)
-        // because this output runs inside the destructured-prop scope
-        // of the component, mirroring the `'ternary'` branch above.
-        const obj = '{' + Object.entries(part.cases).map(
-          ([k, v]) => `${JSON.stringify(k)}: ${JSON.stringify(v)}`
-        ).join(', ') + '}'
-        output += `\${(${obj})[${part.key}]}`
-      }
-    }
-    output += '`'
-    return output
+    return this.renderTemplatePartsAsJs(parts)
   }
 
 }

package/src/jsx/jsx-dev-runtime/index.ts

@@ -5,5 +5,17 @@
  * JSX namespace as the production runtime so dev builds see identical types.
  */
 
-export { jsxDEV, Fragment } from 'hono/jsx/jsx-dev-runtime'
+import { jsxDEV as honoJsxDEV, Fragment } from 'hono/jsx/jsx-dev-runtime'
+import { resolveDangerouslySetInnerHTML } from '../resolve-dangerously-set-inner-html.ts'
+
+export { Fragment }
 export type { JSX } from '../jsx-runtime/index.ts'
+
+// See `../resolve-dangerously-set-inner-html.ts` for why this is needed —
+// hono's own `jsxFn` throws for a childless `<svg>`/`<head>` element using
+// `dangerouslySetInnerHTML` (https://github.com/piconic-ai/barefootjs/issues/2557).
+// Intrinsic string tags only: a function component must receive the caller's
+// props untouched (it may forward `dangerouslySetInnerHTML` itself).
+export function jsxDEV(tag: string | Function, props: Record<string, unknown>, key?: string) {
+  return honoJsxDEV(tag, typeof tag === 'string' ? resolveDangerouslySetInnerHTML(props) : props, key)
+}

package/src/jsx/jsx-runtime/index.ts

@@ -11,7 +11,30 @@
  */
 
 // Runtime functions from hono/jsx.
-export { jsx, jsxs, Fragment, jsxAttr, jsxEscape, jsxTemplate } from 'hono/jsx/jsx-runtime'
+import {
+  jsx as honoJsx,
+  jsxs as honoJsxs,
+  Fragment,
+  jsxAttr,
+  jsxEscape,
+  jsxTemplate,
+} from 'hono/jsx/jsx-runtime'
+import { resolveDangerouslySetInnerHTML } from '../resolve-dangerously-set-inner-html.ts'
+
+export { Fragment, jsxAttr, jsxEscape, jsxTemplate }
+
+// See `../resolve-dangerously-set-inner-html.ts` for why this is needed —
+// hono's own `jsxFn` throws for a childless `<svg>`/`<head>` element using
+// `dangerouslySetInnerHTML` (https://github.com/piconic-ai/barefootjs/issues/2557).
+// Intrinsic string tags only: a function component must receive the caller's
+// props untouched (it may forward `dangerouslySetInnerHTML` itself).
+export function jsx(tag: string | Function, props: Record<string, unknown>, key?: string) {
+  return honoJsx(tag, typeof tag === 'string' ? resolveDangerouslySetInnerHTML(props) : props, key)
+}
+
+export function jsxs(tag: string | Function, props: Record<string, unknown>, key?: string) {
+  return honoJsxs(tag, typeof tag === 'string' ? resolveDangerouslySetInnerHTML(props) : props, key)
+}
 
 // Re-export JSX namespace from @barefootjs/jsx, but override Element type for Hono.
 import type { JSX as BaseJSX } from '@barefootjs/jsx/jsx-runtime'

package/src/jsx/resolve-dangerously-set-inner-html.ts

@@ -0,0 +1,34 @@
+/**
+ * Shared by `./jsx-runtime/index.ts` and `./jsx-dev-runtime/index.ts`.
+ *
+ * hono's own `jsxFn` (`hono/dist/jsx/base.js`) always wraps `<svg>` /
+ * `<head>` children in an internal namespace-context node — even when the
+ * caller passed no children at all. That phantom wrapper makes the outer
+ * `JSXNode`'s `children.length > 0` true, which trips hono's own
+ * "Can only set one of `children` or `props.dangerouslySetInnerHTML`" guard
+ * for any childless `<svg>`/`<head>` element using `dangerouslySetInnerHTML`
+ * — see https://github.com/piconic-ai/barefootjs/issues/2557.
+ *
+ * Work around it at the one place BarefootJS's compiled output calls into
+ * hono's JSX runtime: when `dangerouslySetInnerHTML` is present and no real
+ * `children` prop was given, resolve it into `children` ourselves (mirroring
+ * what hono would do internally) before delegating to hono. If the caller
+ * supplied *both* real children and `dangerouslySetInnerHTML`, that's a
+ * genuine conflict — leave `props` untouched so hono's own guard still
+ * rejects it.
+ */
+import { raw } from 'hono/html'
+
+export function resolveDangerouslySetInnerHTML(props: Record<string, unknown>): Record<string, unknown> {
+  if (
+    props &&
+    'dangerouslySetInnerHTML' in props &&
+    props.dangerouslySetInnerHTML != null &&
+    !('children' in props)
+  ) {
+    const { dangerouslySetInnerHTML, ...rest } = props
+    const html = (dangerouslySetInnerHTML as { __html: string }).__html
+    return { ...rest, children: raw(html) }
+  }
+  return props
+}

package/src/scripts.tsx

@@ -40,6 +40,7 @@
 
 import { useRequestContext } from 'hono/jsx-renderer'
 import { Fragment } from 'hono/jsx'
+import type { JSX } from 'hono/jsx/jsx-runtime'
 import { relPathFromComponentsBase, type BarefootBuildManifest } from './app.ts'
 
 export type CollectedScript = {
@@ -284,8 +285,8 @@ export function registerComponentPreloads(urls: string[]): string[] {
  * only ever pass `inlineScripts` (a component with `scriptAssets` but no
  * `preloadAssets`) keep compiling and behaving exactly as before.
  */
-export function wrapWithInlineScripts(jsx: unknown, inlineScripts: string[], inlinePreloads: string[] = []) {
-  if (inlineScripts.length === 0 && inlinePreloads.length === 0) return jsx
+export function wrapWithInlineScripts(jsx: unknown, inlineScripts: string[], inlinePreloads: string[] = []): JSX.Element {
+  if (inlineScripts.length === 0 && inlinePreloads.length === 0) return jsx as JSX.Element
   return (
     <Fragment>
       {inlinePreloads.map(href => <link rel="modulepreload" crossorigin="" href={href} />)}