@barefootjs/jsx 0.5.2 → 0.5.3

package/src/ir-to-client-js/collect-elements.ts

@@ -3,55 +3,170 @@
  */
 
 import { type IRNode, type IRElement, type IRComponent, type IRLoop, type IRProp, pickAttrMetaFromIR } from '../types'
-import type { ClientJsContext, ConditionalBranchChildComponent, ConditionalBranchReactiveAttr, BranchLoop, ConditionalBranchTextEffect, ConditionalElement, LoopChildBindings, LoopChildBranchSummary, LoopChildConditional, NestedLoop } from './types'
+import type { ClientJsContext, ConditionalBranchChildComponent, ConditionalBranchReactiveAttr, BranchLoop, ConditionalBranchTextEffect, ConditionalElement, LoopChildBindings, LoopChildBranchSummary, LoopChildConditional, LoopOffset, NestedLoop } from './types'
 import { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM } from './utils'
 import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings } from './reactivity'
 import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr } from './html-template'
 import { expandDynamicPropValue, expandConstantForReactivity } from './prop-handling'
 import { walkIR, stopAt } from './walker'
+import { buildLoopChainExpr } from '../loop-chain'
 
-/** Check if an IR node produces a DOM child element (for sibling offset counting). */
-function producesDomChild(node: IRNode): boolean {
+/** Expressions that render nothing (0 DOM nodes) — `&&` / `?:` empty branches. */
+const EMPTY_RENDER_EXPRS = new Set(['null', 'undefined', 'false', "''", '""', '``'])
+
+/**
+ * Number of *element* children a node contributes to its parent's `.children`
+ * run — the collection that `container.children[idx]` indexes and that event
+ * delegation's `Array.from(container.children).indexOf(...)` walks. `.children`
+ * is element-only, so text / comment nodes never count.
+ *
+ * Returns a folded integer when the count is statically known, a JS expression
+ * string when it depends on runtime state, or `null` when the element count is
+ * statically undecidable (the caller then falls back to the legacy count):
+ *   - element / component / provider / async → `1` (one root element)
+ *   - text / empty-render expression (`null`/`false`/…) → `0`
+ *   - plain loop → `(arr).length`; per-item-conditional / flatMap loop → `null`
+ *     (renders a runtime-variable count, not `array.length`) (#1693)
+ *   - conditional → fold to a number when both branches match, else
+ *     `(cond ? t : f)`; `null` when a branch is undecidable (e.g. the `??`/`||`
+ *     left operand, a bare expression that may render an element OR text)
+ *   - fragment → sum of its children (transparent wrapper)
+ *   - bare expression / slot / everything else → `null` (undecidable)
+ */
+function domElementCount(node: IRNode): number | string | null {
+  switch (node.type) {
+    case 'element':
+    case 'component':
+    case 'provider':
+    case 'async':
+      return 1
+    case 'text':
+      return 0
+    case 'expression':
+      // `&&` / `?:` empty branches (`null`, `false`, …) render nothing; any
+      // other expression may resolve to an element or to text — undecidable.
+      return EMPTY_RENDER_EXPRS.has(node.expr.trim()) ? 0 : null
+    case 'loop':
+      // A per-item-conditional body (#1665) or flatMap renders a
+      // runtime-variable element count per item, not `array.length`.
+      if (node.bodyIsItemConditional || node.method === 'flatMap') return null
+      return `(${buildLoopChainExpr({
+        base: node.array,
+        sortComparator: node.sortComparator,
+        filterPredicate: node.filterPredicate,
+        chainOrder: node.chainOrder,
+      })}).length`
+    case 'conditional': {
+      const t = domElementCount(node.whenTrue)
+      const f = domElementCount(node.whenFalse)
+      if (t === null || f === null) return null
+      if (typeof t === 'number' && typeof f === 'number' && t === f) return t
+      // Active branch chosen at runtime — reuse the raw `condition`, the exact
+      // form `insert()` evaluates in the same init scope.
+      return `(${node.condition} ? ${t} : ${f})`
+    }
+    case 'fragment':
+      return sumElementCounts(node.children)
+    default:
+      // slot / if-statement: element count not statically known.
+      return null
+  }
+}
+
+/**
+ * Sum `domElementCount` over a run of nodes, folding the static part. Returns
+ * `null` if any child's count is undecidable — the whole run is then unknown.
+ */
+function sumElementCounts(nodes: readonly IRNode[]): number | string | null {
+  let staticCount = 0
+  const dynamic: string[] = []
+  for (const n of nodes) {
+    const c = domElementCount(n)
+    if (c === null) return null
+    if (typeof c === 'number') staticCount += c
+    else dynamic.push(c)
+  }
+  if (dynamic.length === 0) return staticCount
+  const parts = staticCount > 0 ? [String(staticCount), ...dynamic] : dynamic
+  return parts.length === 1 ? parts[0] : `(${parts.join(' + ')})`
+}
+
+/**
+ * Pre-#1693 element-count heuristic, used as the fallback for nodes whose count
+ * `domElementCount` cannot decide. Mirrors the old `producesDomChild` exactly,
+ * so an undecidable sibling contributes precisely what it did before this fix —
+ * guaranteeing no regression on shapes the new counting can't improve (a bare
+ * expression, a `??`/`||` fallback, a per-item-conditional loop).
+ */
+function legacyElementCount(node: IRNode): number {
   return node.type === 'element' || node.type === 'component' || node.type === 'provider'
     || node.type === 'async'
     || node.type === 'text' || (node.type === 'expression' && !node.reactive)
     || node.type === 'conditional'
+    ? 1
+    : 0
 }
 
 /**
- * Pre-pass: for every loop node in the IR tree, record the number of non-loop
- * DOM siblings that appear before it in its parent container. Read when
- * constructing TopLevelLoop and NestedLoop so the client JS can offset
- * children[idx] access past statically-rendered siblings.
+ * Pre-pass: for every loop node in the IR tree, record the sibling nodes that
+ * appear before it in its parent container. Read when constructing
+ * TopLevelLoop and NestedLoop so the client JS can offset children[idx]
+ * access past everything rendered ahead of the loop's items.
  *
  * Counting must happen for every container whose children render as a
  * contiguous run of DOM siblings into the same parent — not just `element`.
  * A loop nested directly inside a component (`<Wrapper><span/>{xs.map(...)}`
  * </Wrapper>`), fragment, provider, or async boundary has its preceding
- * static sibling rendered as a sibling of the loop's items too, so
- * `children[idx]` access is shifted exactly as it is under an element parent
- * (#1688). Before this, a static sibling before a `.map()` inside a
- * (self-portaling) component dropped the first item's nested child component
- * during hydration because the offset was silently zero.
+ * siblings rendered as siblings of the loop's items too, so `children[idx]`
+ * access is shifted exactly as it is under an element parent (#1688).
+ *
+ * Transparent containers (fragment / provider / async) render no DOM element
+ * wrapper, so their children are siblings in the nearest ancestor element —
+ * not in a container of their own. `recordRun` therefore threads ONE
+ * preceding-sibling accumulator through them, so a loop inside a fragment sees
+ * the parent element's earlier siblings too, not just the fragment's own
+ * children (#1699). `<Box><hr/><hr/><>{xs.map(...)}</></Box>` must offset the
+ * items past both `<hr/>`s.
+ *
+ * The siblings are stored raw; `resolveLoopOffset` turns each into its element
+ * count via `domElementCount`. That generalisation closes the #1688 follow-up
+ * (#1693): a preceding `.map()` contributes `array.length` and a preceding
+ * conditional contributes a `(cond ? … : …)` term, both resolved at runtime —
+ * a static-only count resolved later groups' nested children against the wrong
+ * `children[idx]`, leaving them inert after hydration.
  *
  * Computed once up front (instead of during collection) so the offset data
  * lives in an explicit value rather than a module-level WeakMap mutated by
  * two separate traversals.
  */
-export function computeLoopSiblingOffsets(root: IRNode): Map<IRLoop, number> {
-  const offsets = new Map<IRLoop, number>()
-  const recordChildren = (children: IRNode[]): void => {
-    let nonLoopCount = 0
+export function computeLoopSiblingOffsets(root: IRNode): Map<IRLoop, IRNode[]> {
+  const offsets = new Map<IRLoop, IRNode[]>()
+  // Walk a flat DOM run, flattening transparent containers inline so their
+  // children join the same preceding-sibling accumulator.
+  const recordRun = (children: IRNode[], preceding: IRNode[]): void => {
     for (const child of children) {
       if (child.type === 'loop') {
-        if (nonLoopCount > 0) offsets.set(child, nonLoopCount)
-      } else if (producesDomChild(child)) {
-        nonLoopCount++
+        // Record the preceding run only when something precedes this loop (a
+        // leading loop keeps bare `children[idx]`). `!offsets.has`: the
+        // enclosing run records the loop first, in pre-order, with the full
+        // preceding context; a later standalone visit of the transparent
+        // wrapper (still descended for loops that sit *directly* in a root /
+        // loop-body / branch fragment) must not overwrite it with a shorter
+        // run.
+        if (preceding.length > 0 && !offsets.has(child)) {
+          offsets.set(child, [...preceding])
+        }
+        preceding.push(child)
+      } else if (child.type === 'fragment' || child.type === 'provider' || child.type === 'async') {
+        // Transparent: no element wrapper — its children render into this run.
+        recordRun(child.children, preceding)
+      } else {
+        preceding.push(child)
       }
     }
   }
   const containerVisit = ({ node, descend }: { node: { children: IRNode[] }; descend: () => void }): void => {
-    recordChildren(node.children)
+    recordRun(node.children, [])
     descend()
   }
   walkIR(root, null, {
@@ -68,6 +183,29 @@ export function computeLoopSiblingOffsets(root: IRNode): Map<IRLoop, number> {
   return offsets
 }
 
+/**
+ * Resolve a loop's preceding-sibling run into the `LoopOffset` value object
+ * stored on `TopLevelLoop` / `NestedLoop`: the folded static element count
+ * plus one dynamic term (`(arr).length`, `(cond ? … : …)`) per sibling whose
+ * count is only known at runtime. Siblings whose count is statically
+ * undecidable fall back to `legacyElementCount` (the pre-#1693 behaviour).
+ * Returns `undefined` when nothing precedes the loop (or only non-element
+ * nodes do), so the loop keeps bare `children[idx]`.
+ */
+function resolveLoopOffset(preceding: IRNode[] | undefined): LoopOffset | undefined {
+  if (!preceding || preceding.length === 0) return undefined
+  let staticCount = 0
+  const dynamicTerms: string[] = []
+  for (const node of preceding) {
+    const c = domElementCount(node)
+    if (c === null) staticCount += legacyElementCount(node)
+    else if (typeof c === 'number') staticCount += c
+    else dynamicTerms.push(c)
+  }
+  if (staticCount === 0 && dynamicTerms.length === 0) return undefined
+  return { staticCount, dynamicTerms }
+}
+
 /**
  * Options controlling `collectInnerLoops` traversal and payload collection.
  *
@@ -129,7 +267,7 @@ export const branchInnerLoopOptions: CollectInnerLoopsOptions = {
  */
 export function collectInnerLoops(
   nodes: IRNode[],
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
   outerLoopParam?: string,
   ctx?: ClientJsContext,
   options?: CollectInnerLoopsOptions,
@@ -258,7 +396,7 @@ export function collectInnerLoops(
           refsOuterParam: refsOuter,
           childComponents,
           insideConditional: !flat && scope.insideCond ? true : undefined,
-          siblingOffset: flat ? undefined : (siblingOffsets.get(n) || undefined),
+          offset: flat ? undefined : resolveLoopOffset(siblingOffsets.get(n)),
           bindings,
         })
         // Branch-mode callers handle deeper nesting via their own collection paths.
@@ -286,7 +424,7 @@ export function collectInnerLoops(
  */
 function decideLoopRendering(
   loop: IRLoop,
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
   ctx: ClientJsContext | undefined,
 ): { useElementReconciliation: boolean; innerLoops: NestedLoop[] | undefined } {
   const hasNestedComps = (loop.nestedComponents?.length ?? 0) > 0
@@ -440,7 +578,7 @@ function buildBranchChildComponents(
 export function collectElements(
   node: IRNode,
   ctx: ClientJsContext,
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
   insideConditional = false,
 ): void {
   walkIR<boolean>(node, insideConditional, {
@@ -595,7 +733,7 @@ export function collectElements(
         isStaticArray: l.isStaticArray,
         useElementReconciliation,
         innerLoops: (useElementReconciliation || (l.isStaticArray && innerLoops?.length)) ? innerLoops : undefined,
-        siblingOffset: siblingOffsets.get(l) || undefined,
+        offset: resolveLoopOffset(siblingOffsets.get(l)),
         filterPredicate: l.filterPredicate ? {
           param: l.filterPredicate.param,
           raw: l.filterPredicate.raw,
@@ -854,7 +992,7 @@ function collectBranchTextEffects(node: IRNode): ConditionalBranchTextEffect[] {
 function collectBranchLoops(
   node: IRNode,
   ctx: ClientJsContext | undefined,
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
 ): BranchLoop[] {
   const loops: BranchLoop[] = []
   const restNames = ctx ? buildRestSpreadNames(ctx) : undefined
@@ -953,7 +1091,7 @@ function collectBranchLoops(
 function buildConditionalMetadata(
   node: IRNode & { type: 'conditional' },
   ctx: ClientJsContext,
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
 ): ConditionalElement {
   const restNames = buildRestSpreadNames(ctx)
   // Use loopDepth=-1 so the first loop encountered inside the branch emits
@@ -983,7 +1121,7 @@ function buildConditionalMetadata(
 function summarizeBranch(
   node: IRNode,
   ctx: ClientJsContext,
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
 ): import('./types').BranchSummary {
   return {
     events: collectConditionalBranchEvents(node),
@@ -1003,7 +1141,7 @@ function summarizeBranch(
 function collectBranchConditionals(
   node: IRNode,
   ctx: ClientJsContext,
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
 ): ConditionalElement[] {
   const result: ConditionalElement[] = []
   walkIR(node, null, {
@@ -1051,7 +1189,7 @@ function collectBranchConditionals(
 export function collectLoopChildBindings(
   children: readonly IRNode[],
   ctx: ClientJsContext,
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
   loopParam: string,
   loopParamBindings: readonly import('../types').LoopParamBinding[] | undefined,
 ): LoopChildBindings {
@@ -1069,7 +1207,7 @@ export function collectLoopChildBindings(
 export function collectLoopChildConditionals(
   node: IRNode,
   ctx: ClientJsContext,
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
   loopParam?: string,
   loopParamBindings?: readonly import('../types').LoopParamBinding[],
 ): LoopChildConditional[] {
@@ -1144,7 +1282,7 @@ export function collectLoopChildConditionals(
 function summarizeLoopChildBranch(
   node: IRNode,
   ctx: ClientJsContext,
-  siblingOffsets: Map<IRLoop, number>,
+  siblingOffsets: Map<IRLoop, IRNode[]>,
   loopParam?: string,
   loopParamBindings?: readonly import('../types').LoopParamBinding[],
 ): LoopChildBranchSummary {

package/src/ir-to-client-js/control-flow/plan/build-event-delegation.ts

@@ -69,7 +69,7 @@ export function buildStaticArrayDelegationPlan(elem: TopLevelLoop): EventDelegat
       arrayExpr: buildChainedArrayExpr(elem),
       param: elem.param,
       mapPreamble: elem.mapPreamble ?? null,
-      siblingOffset: elem.siblingOffset ?? null,
+      offset: elem.offset ?? null,
     },
   }
 }

package/src/ir-to-client-js/control-flow/plan/build-loop.ts

@@ -25,6 +25,7 @@ import type {
 } from '../../types'
 import {
   buildChainedArrayExpr,
+  buildLoopChildIndexExpr,
   setIntersects,
   varSlotId,
   wrapLoopParamAsAccessor,
@@ -129,7 +130,7 @@ export function buildStaticLoopPlan(elem: TopLevelLoop, unsafeLocalNames: Set<st
   }
 
   const indexParam = elem.index || '__idx'
-  const childIndexExpr = elem.siblingOffset ? `${indexParam} + ${elem.siblingOffset}` : indexParam
+  const childIndexExpr = buildLoopChildIndexExpr(indexParam, elem.offset)
 
   return {
     kind: 'static',

package/src/ir-to-client-js/control-flow/plan/event-delegation.ts

@@ -5,7 +5,7 @@
  * container variable and the per-event item-lookup strategy.
  */
 
-import type { LoopChildEvent, TopLevelLoop } from '../../types'
+import type { LoopChildEvent, LoopOffset, TopLevelLoop } from '../../types'
 
 /**
  * Plan for a loop's event-delegation block. Covers three legacy emitters:
@@ -72,6 +72,11 @@ export interface StaticIndexItemLookup {
   arrayExpr: string
   param: string
   mapPreamble: string | null
-  /** Sibling offset for `__idx` arithmetic; `null` when no offset. */
-  siblingOffset: number | null
+  /**
+   * Offset of the loop's items past its preceding container siblings. Its
+   * terms are subtracted from the DOM child index to recover the array index,
+   * so later `static + .map()` groups resolve the correct item (#1693).
+   * `null` when nothing precedes the loop.
+   */
+  offset: LoopOffset | null
 }

package/src/ir-to-client-js/control-flow/stringify/event-delegation.ts

@@ -32,7 +32,7 @@
  * sentinel before destructuring (#951 TDZ-safe).
  */
 
-import { toDomEventName, varSlotId, substituteLoopBindings, DATA_KEY, keyAttrName } from '../../utils'
+import { toDomEventName, varSlotId, substituteLoopBindings, buildLoopChildIndexSubtraction, DATA_KEY, keyAttrName } from '../../utils'
 import type {
   EventDelegationPlan,
   KeyedItemLookup,
@@ -187,11 +187,11 @@ function emitStaticIndexLookup(
   lookup: StaticIndexItemLookup,
   containerVar: string,
 ): void {
-  const { arrayExpr, param, mapPreamble, siblingOffset } = lookup
+  const { arrayExpr, param, mapPreamble, offset } = lookup
   ls.push(`      let __el = ${varSlotId(ev.childSlotId)}El`)
   ls.push(`      while (__el.parentElement && __el.parentElement !== ${containerVar}) __el = __el.parentElement`)
   ls.push(`      if (__el.parentElement === ${containerVar}) {`)
-  const idxOffset = siblingOffset ? ` - ${siblingOffset}` : ''
+  const idxOffset = buildLoopChildIndexSubtraction(offset ?? undefined)
   ls.push(`        const __idx = Array.from(${containerVar}.children).indexOf(__el)${idxOffset}`)
   ls.push(`        const ${param} = ${arrayExpr}[__idx]`)
   if (mapPreamble) ls.push(`        ${mapPreamble}`)

package/src/ir-to-client-js/emit-reactive.ts

@@ -17,6 +17,15 @@ import { createTemplateAwareStringProtector } from './html-template'
  */
 export function emitAttrUpdate(target: string, attrName: string, expression: string, meta: AttrMeta): string[] {
   const htmlName = toHtmlAttrName(attrName)
+  if (attrName === 'dangerouslySetInnerHTML' || htmlName === 'dangerouslySetInnerHTML') {
+    // `{ __html }` is not an attribute — it replaces the element's content.
+    // Assign `innerHTML` (raw, intentional escape hatch) to mirror the SSR
+    // adapters' native `dangerouslySetInnerHTML` handling instead of
+    // stringifying the object into a bogus attribute.
+    return [
+      `{ const __v = ${expression}; ${target}.innerHTML = __v != null && __v.__html != null ? String(__v.__html) : '' }`,
+    ]
+  }
   if (htmlName === 'style') {
     return [
       `{ const __v = styleToCss(${expression}); if (__v != null) ${target}.setAttribute('style', __v); else ${target}.removeAttribute('style') }`,

package/src/ir-to-client-js/html-template.ts

@@ -192,11 +192,16 @@ const UNSAFE_TEMPLATE_EXPR = 'undefined'
  * @param attr - Attribute metadata (only presenceOrUndefined flag is used)
  */
 function templateAttrExpr(attrName: string, valExpr: string, presenceOrUndefined?: boolean): string {
+  // `dangerouslySetInnerHTML={{ __html }}` is not an attribute — its value
+  // becomes the element's raw innerHTML (emitted as element content). Never
+  // serialise the `{ __html }` object into a `dangerouslySetInnerHTML="…"`
+  // attribute.
+  if (attrName === 'dangerouslySetInnerHTML') return ''
   if (isBooleanAttr(attrName) || presenceOrUndefined) {
     return `\${${valExpr} ? '${attrName}' : ''}`
   }
   if (attrName === 'style') {
-    return `\${((v) => v != null ? 'style="' + v + '"' : '')(styleToCss(${valExpr}))}`
+    return `\${((v) => v != null ? 'style="' + ${escapeAttrValueExpr('v')} + '"' : '')(styleToCss(${valExpr}))}`
   }
   // `data-key` / `data-key-N` is a reconciliation contract — every loop item
   // must carry one. Emit unconditionally; if the user passes `key={undefined}`
@@ -205,7 +210,60 @@ function templateAttrExpr(attrName: string, valExpr: string, presenceOrUndefined
   if (attrName === 'data-key' || attrName.startsWith('data-key-')) {
     return `${attrName}="\${${valExpr}}"`
   }
-  return `\${(${valExpr}) != null ? '${attrName}="' + (${valExpr}) + '"' : ''}`
+  return `\${(${valExpr}) != null ? '${attrName}="' + ${escapeAttrValueExpr(valExpr)} + '"' : ''}`
+}
+
+/**
+ * Build a runtime expression that HTML-escapes an interpolated attribute
+ * value, matching the SSR adapters' attribute escaping (Hono escapes
+ * `& " ' < >`) via the `escapeAttr` runtime helper. The client template
+ * assembles an HTML string inserted via `innerHTML`, so an unescaped `"`
+ * / `<` / `>` in a value — e.g. UnoCSS arbitrary variants like
+ * `[class*="size-"]` or `has-[>svg]` — corrupts attribute parsing (and
+ * diverges from the SSR-rendered bytes). Escaping at interpolation time
+ * is the only correct layer: a post-assembly pass can't tell a delimiter
+ * `"` from a value `"`.
+ */
+function escapeAttrValueExpr(valExpr: string): string {
+  return `escapeAttr(${valExpr})`
+}
+
+/**
+ * Build a runtime expression that HTML-escapes an interpolated **text
+ * content** slot, via the `escapeText` runtime helper. Only the
+ * `<!--bf:sN-->${expr}<!--/-->` text-marker form is text content: the
+ * runtime treats whatever sits between the markers as the slot's text, so
+ * a string value containing `<` / `&` (e.g. `{user.name}`) must be escaped
+ * to parse correctly under `innerHTML` and to match the SSR-rendered
+ * bytes. Bare `${...}` interpolations — `{children}` passthrough and
+ * `renderChild(...)` output — are pre-rendered HTML and must NOT be
+ * escaped, so this is applied only at the four text-marker emit sites.
+ * Hono escapes text content with the same set as attribute values
+ * (`& " ' < >`), so `escapeText` delegates to the same operation.
+ */
+function escapeTextSlotExpr(innerExpr: string): string {
+  return `escapeText(${innerExpr})`
+}
+
+/**
+ * `dangerouslySetInnerHTML={{ __html: E }}` makes the element's content its
+ * raw innerHTML — the intentional, React-style escape hatch. Returns the
+ * raw-content template expression to use *instead of* the element's normal
+ * children (emitted UNescaped by design, mirroring the SSR adapters'
+ * native handling), or `null` when the element carries no such attribute.
+ * The attribute itself is suppressed in `templateAttrExpr`, and the
+ * matching reactive update is emitted by `emitAttrUpdate` (assigns
+ * `innerHTML`). `toExpr` is the walker's value transform (`wrapExpr` /
+ * `transformExpr`) so the `{ __html }` object is lowered the same way an
+ * attribute value would be.
+ */
+function dangerouslyHtmlChildren(
+  attrs: ReadonlyArray<IRAttribute>,
+  toExpr: (v: { expr: string; templateExpr?: string }) => string,
+): string | null {
+  const attr = attrs.find(a => a.name === 'dangerouslySetInnerHTML')
+  if (!attr || attr.value.kind !== 'expression') return null
+  return `\${((${toExpr(attr.value)}) ?? {}).__html ?? ''}`
 }
 
 /**
@@ -322,6 +380,12 @@ export interface MergeContext {
 function isMergeableAttr(a: IRAttribute, ctx: MergeContext): boolean {
   if (ctx.honorClientOnly && a.clientOnly) return false
   if (a.name === 'key') return false
+  // `dangerouslySetInnerHTML` is not an attribute — its `{ __html }` value
+  // becomes the element's raw innerHTML (emitted as content, set via
+  // `innerHTML` in init). Keep it out of the `spreadAttrs({...})` merge so
+  // it isn't serialised back into a bogus `dangerouslySetInnerHTML="…"`
+  // attribute when the element also carries a spread.
+  if (a.name === 'dangerouslySetInnerHTML') return false
   const v = a.value
   if (v.kind === 'jsx-children') return false
   if (v.kind === 'boolean-shorthand') return false
@@ -476,7 +540,7 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
 
       const attrs = attrParts.join(' ')
       const childrenRecurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, insideLoop, false)
-      const children = node.children.map(childrenRecurse).join('')
+      const children = dangerouslyHtmlChildren(node.attrs, v => wrapExpr(v.expr)) ?? node.children.map(childrenRecurse).join('')
 
       // Non-void elements must use open+close tags (HTML parsers ignore self-closing on div, span, etc.)
       if (children || !VOID_ELEMENTS.has(node.tag)) {
@@ -491,7 +555,15 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
     case 'expression':
       if (node.expr === 'null' || node.expr === 'undefined') return ''
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${wrapInterpolation(wrapExpr(node.expr))}}<!--/-->`
+        const inner = wrapInterpolation(wrapExpr(node.expr))
+        // In branch-slot context `wrapInterpolation` routes the value
+        // through `__bfSlot`, which returns raw `<!--bf-slot:N-->` markers
+        // for live `Node` values (spliced back by `insert()`). Escaping
+        // would corrupt those markers and drop slotted content (#1694
+        // regression). `__bfSlot` owns coercion of its own value, so the
+        // text-escape applies only to the non-slot (plain text) form.
+        const slotted = branchSlotsVar ? inner : escapeTextSlotExpr(inner)
+        return `<!--bf:${node.slotId}-->\${${slotted}}<!--/-->`
       }
       return `\${${wrapInterpolation(wrapExpr(node.expr))}}`
 
@@ -656,7 +728,7 @@ export function irToPlaceholderTemplate(node: IRNode, restSpreadNames?: Set<stri
       }
 
       const attrs = attrParts.join(' ')
-      const children = node.children.map(recurse).join('')
+      const children = dangerouslyHtmlChildren(node.attrs, v => wrapExpr(v.expr)) ?? node.children.map(recurse).join('')
 
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? ' ' + attrs : ''}>${children}</${node.tag}>`
@@ -670,7 +742,7 @@ export function irToPlaceholderTemplate(node: IRNode, restSpreadNames?: Set<stri
     case 'expression':
       if (node.expr === 'null' || node.expr === 'undefined') return ''
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${wrapExpr(node.expr)}}<!--/-->`
+        return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(wrapExpr(node.expr))}}<!--/-->`
       }
       return `\${${wrapExpr(node.expr)}}`
 
@@ -1041,7 +1113,7 @@ function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): str
       }
 
       const attrs = attrParts.join(' ')
-      const children = node.children.map(childrenRecurse).join('')
+      const children = dangerouslyHtmlChildren(node.attrs, v => transformExpr(v.expr, v.templateExpr)) ?? node.children.map(childrenRecurse).join('')
 
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? ' ' + attrs : ''}>${children}</${node.tag}>`
@@ -1055,7 +1127,7 @@ function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): str
     case 'expression':
       if (node.expr === 'null' || node.expr === 'undefined') return ''
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${transformExpr(node.expr, node.templateExpr)}}<!--/-->`
+        return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(transformExpr(node.expr, node.templateExpr))}}<!--/-->`
       }
       return `\${${transformExpr(node.expr, node.templateExpr)}}`
 
@@ -1417,7 +1489,7 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
       }
 
       const attrs = attrParts.join(' ')
-      const children = node.children.map(childrenRecurse).join('')
+      const children = dangerouslyHtmlChildren(node.attrs, v => transformExpr(v.expr, v.templateExpr)) ?? node.children.map(childrenRecurse).join('')
 
       if (children || !VOID_ELEMENTS.has(node.tag)) {
         return `<${node.tag}${attrs ? ' ' + attrs : ''}>${children}</${node.tag}>`
@@ -1440,7 +1512,7 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
         // an empty placeholder instead.
         const expr = transformed === UNSAFE_TEMPLATE_EXPR ? "''" : transformed
         if (node.slotId) {
-          return `<!--bf:${node.slotId}-->\${${expr}}<!--/-->`
+          return `<!--bf:${node.slotId}-->\${${escapeTextSlotExpr(expr)}}<!--/-->`
         }
         return `\${${expr}}`
       }

package/src/ir-to-client-js/imports.ts

@@ -11,7 +11,7 @@ export const RUNTIME_IMPORT_CANDIDATES = [
   'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild', 'updateClientMarker',
   'createPortal',
   'provideContext', 'createContext', 'useContext',
-  'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss',
+  'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText',
   'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText',
 ] as const
 

package/src/ir-to-client-js/plan/build-static-array-child-init.ts

@@ -16,7 +16,7 @@
 import type { IRLoopChildComponent } from '../../types'
 import type { NestedLoop, TopLevelLoop } from '../types'
 import type { ClientJsContext } from '../types'
-import { quotePropName, varSlotId, attrValueToString } from '../utils'
+import { quotePropName, varSlotId, attrValueToString, buildLoopChildIndexExpr } from '../utils'
 import { irChildrenToJsExpr } from '../html-template'
 import { buildCompSelector } from '../control-flow/shared'
 
@@ -98,7 +98,7 @@ function buildOuterNestedPlan(
     arrayExpr: elem.array,
     param: elem.param,
     indexParam,
-    offsetExpr: elem.siblingOffset ? `${indexParam} + ${elem.siblingOffset}` : indexParam,
+    offsetExpr: buildLoopChildIndexExpr(indexParam, elem.offset),
     outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
     propsExpr: buildStaticPropsExpr(comp.props),
   }
@@ -122,16 +122,12 @@ function buildInnerLoopNestedPlan(
     outerArrayExpr: elem.array,
     outerParam: elem.param,
     outerIndexParam,
-    outerOffsetExpr: elem.siblingOffset
-      ? `${outerIndexParam} + ${elem.siblingOffset}`
-      : outerIndexParam,
+    outerOffsetExpr: buildLoopChildIndexExpr(outerIndexParam, elem.offset),
     outerPreludeStatements: elem.mapPreamble ? [elem.mapPreamble] : [],
     innerContainerSlotId: innerLoop.containerSlotId ?? null,
     innerArrayExpr: innerLoop.array,
     innerParam: innerLoop.param,
-    innerOffsetExpr: innerLoop.siblingOffset
-      ? `__innerIdx + ${innerLoop.siblingOffset}`
-      : '__innerIdx',
+    innerOffsetExpr: buildLoopChildIndexExpr('__innerIdx', innerLoop.offset),
     innerPreludeStatements: innerLoop.mapPreamble ? [innerLoop.mapPreamble] : [],
     depth: innerLoop.depth,
     comps,