@barefootjs/jsx 0.33.2 → 0.33.3

package/src/compiler.ts

@@ -19,7 +19,7 @@ import { stripClientBuiltinImports } from './builtins.ts'
 import { generateClientJs, generateClientJsWithSourceMap, analyzeClientNeeds } from './ir-to-client-js/index.ts'
 import { decideClientOnlyElision } from './ir-to-client-js/client-only-elision.ts'
 import { emitModuleLevelDeclarations } from './ir-to-client-js/emit-module-level.ts'
-import { RUNTIME_MODULE, detectUsedImports as detectUsedImportsFromCode, makeValueUsageTest } from './ir-to-client-js/imports.ts'
+import { RUNTIME_MODULE, detectUsedImports as detectUsedImportsFromCode, makeValueUsageTest, renderUsedImportLines, mergeCompiledClientJsImports } from './ir-to-client-js/imports.ts'
 import { setActiveComponentScope, computeFileScope } from './ir-to-client-js/component-scope.ts'
 import { generateModuleExports, collectInlineExportedNames } from './module-exports.ts'
 import { applyCssLayerPrefix, applyCssLayerPrefixToFile } from './css-layer-prefixer.ts'
@@ -43,11 +43,27 @@ export interface CompileOptionsWithAdapter extends CompileOptions {
  * conflict-free block.
  *
  * Named value/type imports from the same source are folded into their first
- * occurrence (preserving line order and first-seen symbol order); every
- * other import form (side-effect, default, namespace) is kept in place and
- * de-duplicated by exact line. This ensures a symbol is never imported
- * twice across sibling components — a redeclaration that Bun tolerates but
- * stricter ESM parsers (the Deno runtime that renders SSR templates) reject.
+ * occurrence (preserving line order and first-seen symbol order); a default
+ * or namespace import is likewise folded by source rather than deduplicated
+ * by exact line — every sibling component that shares a module-scope import
+ * declaration compiles it independently, so the same default binding can
+ * legally arrive as `import cfg from 'x'` from one component and `import
+ * cfg, { helper } from 'x'` from another once only the SECOND one also uses
+ * a named specifier from the same statement. Folding by source (default
+ * name from the first occurrence that has one, named specifiers unioned)
+ * collapses both into one `import cfg, { helper } from 'x'` line; the two
+ * exact-line-deduplicated strings would otherwise both survive and
+ * redeclare `cfg` (#2767 follow-up — this shape was unreachable before a
+ * default/namespace-importing server component could become a real client
+ * bundle at all). A namespace specifier can't combine with named ones on
+ * one line, so it's folded to its own line, keyed by (source, local name)
+ * — see `renderUsedImportLines`'s docstring for the same split rendering
+ * rule `collectExternalImports` uses.
+ *
+ * Every other import form (side-effect) is kept in place and de-duplicated
+ * by exact line. This ensures a symbol is never imported twice across
+ * sibling components — a redeclaration that Bun tolerates but stricter ESM
+ * parsers (the Deno runtime that renders SSR templates) reject.
  *
  * For a single-component file the output is identical to the input order;
  * only repeated sibling imports collapse.
@@ -62,38 +78,70 @@ export interface CompileOptionsWithAdapter extends CompileOptions {
 export function mergeTemplateImports(lines: string[]): string {
   const result: string[] = []
   const valueIdx = new Map<string, number>()
+  const valueDefault = new Map<string, string>()
   const valueNames = new Map<string, Set<string>>()
   const typeIdx = new Map<string, number>()
   const typeNames = new Map<string, Set<string>>()
   const seenOther = new Set<string>()
 
-  const fold = (
-    src: string,
-    rawNames: string,
-    idx: Map<string, number>,
-    names: Map<string, Set<string>>,
-    render: (src: string, names: Set<string>) => string,
-  ) => {
-    if (!idx.has(src)) {
-      idx.set(src, result.length)
-      names.set(src, new Set())
+  const foldType = (src: string, rawNames: string) => {
+    if (!typeIdx.has(src)) {
+      typeIdx.set(src, result.length)
+      typeNames.set(src, new Set())
       result.push('')
     }
-    const set = names.get(src)!
+    const set = typeNames.get(src)!
     for (const n of rawNames.split(',').map(s => s.trim()).filter(Boolean)) set.add(n)
-    result[idx.get(src)!] = render(src, set)
+    result[typeIdx.get(src)!] = `import type { ${[...set].join(', ')} } from '${src}'`
+  }
+
+  const foldValue = (src: string, defaultName: string | null, rawNames: string | null) => {
+    if (!valueIdx.has(src)) {
+      valueIdx.set(src, result.length)
+      valueNames.set(src, new Set())
+      result.push('')
+    }
+    if (defaultName && !valueDefault.has(src)) valueDefault.set(src, defaultName)
+    if (rawNames) {
+      const set = valueNames.get(src)!
+      for (const n of rawNames.split(',').map(s => s.trim()).filter(Boolean)) set.add(n)
+    }
+    result[valueIdx.get(src)!] = renderUsedImportLines(
+      src,
+      valueDefault.get(src) ?? null,
+      null,
+      [...valueNames.get(src)!],
+    ).join('\n')
   }
 
   for (const raw of lines) {
     const line = raw.trim()
     if (!line) continue
     const typeMatch = line.match(/^import\s+type\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]\s*;?$/)
-    const valueMatch = line.match(/^import\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]\s*;?$/)
-    if (valueMatch) {
-      fold(valueMatch[2], valueMatch[1], valueIdx, valueNames, (s, n) => `import { ${[...n].join(', ')} } from '${s}'`)
-    } else if (typeMatch) {
-      fold(typeMatch[2], typeMatch[1], typeIdx, typeNames, (s, n) => `import type { ${[...n].join(', ')} } from '${s}'`)
+    const namedMatch = line.match(/^import\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]\s*;?$/)
+    const defaultNamedMatch = line.match(/^import\s+([A-Za-z_$][\w$]*)\s*,\s*\{([^}]+)\}\s*from\s*['"]([^'"]+)['"]\s*;?$/)
+    const defaultOnlyMatch = line.match(/^import\s+([A-Za-z_$][\w$]*)\s*from\s*['"]([^'"]+)['"]\s*;?$/)
+
+    if (typeMatch) {
+      foldType(typeMatch[2], typeMatch[1])
+    } else if (namedMatch) {
+      foldValue(namedMatch[2], null, namedMatch[1])
+    } else if (defaultNamedMatch) {
+      foldValue(defaultNamedMatch[3], defaultNamedMatch[1], defaultNamedMatch[2])
+    } else if (defaultOnlyMatch) {
+      foldValue(defaultOnlyMatch[2], defaultOnlyMatch[1], null)
     } else if (!seenOther.has(line)) {
+      // Covers namespace imports (`import * as X from 'src'`) and
+      // side-effect imports alike — deduplicated by exact line, same as
+      // before. A namespace import can't combine with named specifiers on
+      // one line (see `renderUsedImportLines`), so two components that
+      // both import the SAME namespace binding from the SAME source
+      // always emit byte-identical lines and collapse here; two DIFFERENT
+      // local namespace names for the same source (unusual — would require
+      // sibling components to alias the same module-scope `import * as`
+      // declaration differently, which isn't possible for one shared
+      // declaration) are kept as separate lines rather than silently
+      // merged.
       seenOther.add(line)
       result.push(line)
     }
@@ -446,30 +494,9 @@ function compileMultipleComponents(
     }
     const clientJsOutputs = allOutputs.map(o => o.clientJs).filter(Boolean) as string[]
     if (clientJsOutputs.length > 0) {
-      const importsBySource = new Map<string, Set<string>>()
-      const otherImports: string[] = []
-      const allCode: string[] = []
-      for (const js of clientJsOutputs) {
-        for (const line of js.split('\n')) {
-          if (line.startsWith('import ')) {
-            const match = line.match(/^import \{ ([^}]+) \} from ['"]([^'"]+)['"]$/)
-            if (match) {
-              const source = match[2]
-              if (!importsBySource.has(source)) importsBySource.set(source, new Set())
-              for (const n of match[1].split(',').map(n => n.trim())) importsBySource.get(source)!.add(n)
-            } else if (!otherImports.includes(line)) {
-              otherImports.push(line)
-            }
-          }
-        }
-        allCode.push(js.replace(/^import .+\n/gm, '').trim())
-      }
-      const mergedClientImports = [...importsBySource].map(([src, names]) =>
-        `import { ${[...names].sort().join(', ')} } from '${src}'`
-      )
       files.push({
         path: filePath.replace(/\.tsx?$/, '.client.js'),
-        content: [...mergedClientImports, ...otherImports, '', ...allCode.filter(Boolean)].join('\n'),
+        content: mergeCompiledClientJsImports(clientJsOutputs),
         type: 'clientJs',
       })
     }
@@ -557,63 +584,14 @@ function compileMultipleComponents(
     })
   }
 
-  // Combine client JS if any
+  // Combine client JS if any — see `mergeCompiledClientJsImports`'s
+  // docstring for why this AST-based merge (not a text/regex line scan)
+  // is required here specifically (#2767 follow-up).
   const clientJsOutputs = allOutputs.map(o => o.clientJs).filter(Boolean) as string[]
   if (clientJsOutputs.length > 0) {
-    // Separate imports from code and merge imports by source
-    const importsBySource = new Map<string, Set<string>>()
-    const otherImports: string[] = []
-    const allCode: string[] = []
-
-    for (const js of clientJsOutputs) {
-      const lines = js.split('\n')
-      const codeLines: string[] = []
-
-      for (const line of lines) {
-        if (line.startsWith('import ')) {
-          // Parse named imports: import { a, b } from 'source'
-          const match = line.match(/^import \{ ([^}]+) \} from ['"]([^'"]+)['"]$/)
-          if (match) {
-            const names = match[1].split(',').map(n => n.trim())
-            const source = match[2]
-            if (!importsBySource.has(source)) {
-              importsBySource.set(source, new Set())
-            }
-            const set = importsBySource.get(source)!
-            for (const name of names) {
-              set.add(name)
-            }
-          } else {
-            // Other import styles (default, namespace, etc.)
-            if (!otherImports.includes(line)) {
-              otherImports.push(line)
-            }
-          }
-        } else {
-          codeLines.push(line)
-        }
-      }
-
-      allCode.push(codeLines.join('\n').trim())
-    }
-
-    // Generate merged imports
-    const mergedImports: string[] = []
-    for (const [source, names] of importsBySource) {
-      const sortedNames = [...names].sort()
-      mergedImports.push(`import { ${sortedNames.join(', ')} } from '${source}'`)
-    }
-
-    const combinedClientJs = [
-      ...mergedImports,
-      ...otherImports,
-      '',
-      ...allCode.filter(Boolean),
-    ].join('\n')
-
     files.push({
       path: filePath.replace(/\.tsx?$/, '.client.js'),
-      content: combinedClientJs,
+      content: mergeCompiledClientJsImports(clientJsOutputs),
       type: 'clientJs',
     })
   }
@@ -735,7 +713,9 @@ export function compileJSX(
 
       // Preserve non-runtime user imports whose specifiers are referenced
       // in the generated body (e.g. an initializer that calls an imported
-      // helper: `createSignal(defaultValue())`).
+      // helper: `createSignal(defaultValue())`). A default- or namespace-
+      // imported helper needs its own import syntax, not named braces —
+      // see `renderUsedImportLines`'s docstring.
       const externalImportLines: string[] = []
       const isUsedAsValue = makeValueUsageTest(body)
       for (const imp of ctx.imports) {
@@ -745,12 +725,22 @@ export function compileJSX(
           externalImportLines.push(`import '${imp.source}'`)
           continue
         }
-        const used = imp.specifiers
-          .filter(s => !s.isDefault && !s.isNamespace && !s.isTypeOnly && isUsedAsValue(s.alias || s.name))
-          .map(s => s.alias ? `${s.name} as ${s.alias}` : s.name)
-        if (used.length > 0) {
-          externalImportLines.push(`import { ${used.join(', ')} } from '${imp.source}'`)
+        const usedNamed: string[] = []
+        let usedDefault: string | null = null
+        let usedNamespace: string | null = null
+        for (const s of imp.specifiers) {
+          if (s.isTypeOnly) continue
+          const localName = s.alias || s.name
+          if (!isUsedAsValue(localName)) continue
+          if (s.isDefault) {
+            usedDefault = localName
+          } else if (s.isNamespace) {
+            usedNamespace = localName
+          } else {
+            usedNamed.push(s.alias ? `${s.name} as ${s.alias}` : s.name)
+          }
         }
+        externalImportLines.push(...renderUsedImportLines(imp.source, usedDefault, usedNamespace, usedNamed))
       }
 
       const allImports = [runtimeImportLine, ...externalImportLines].filter(Boolean).join('\n')

package/src/index.ts

@@ -66,7 +66,7 @@ export type {
 } from './types.ts'
 
 // Analyzer
-export { analyzeComponent, listComponentFunctions, listComponentFunctions as listExportedComponents, createProgramForFile, needsTypeBasedDetection, REACTIVE_PRIMITIVES, BROWSER_ONLY_CLIENT_APIS, type AnalyzerContext } from './analyzer.ts'
+export { analyzeComponent, listComponentFunctions, listComponentFunctions as listExportedComponents, scanComponentFile, createProgramForFile, needsTypeBasedDetection, REACTIVE_PRIMITIVES, BROWSER_ONLY_CLIENT_APIS, type AnalyzerContext, type ComponentFileScan } from './analyzer.ts'
 export { createProgramForCorpus, type SharedProgramOptions } from './shared-program.ts'
 
 // JSX to IR transformer

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

@@ -13,6 +13,7 @@ import { extractFreeIdentifiersFromText } from './csr-substitute.ts'
 import { walkIR, stopAt } from './walker.ts'
 import { buildLoopChainExpr } from '../loop-chain.ts'
 import { identifierPattern } from '../identifier-pattern.ts'
+import { classifyDOMProp } from '@barefootjs/shared'
 
 /** Expressions that render nothing (0 DOM nodes) — `&&` / `?:` empty branches. */
 const EMPTY_RENDER_EXPRS = new Set(['null', 'undefined', 'false', "''", '""', '``'])
@@ -581,11 +582,32 @@ function collectReactiveChildProps(node: IRComponent, ctx: ClientJsContext): voi
   for (const prop of node.props) {
     if (prop.name === '...' || prop.name.startsWith('...')) continue
     if (prop.value.kind === 'jsx-children') continue
-    const isEventHandler =
-      prop.name.startsWith('on') &&
-      prop.name.length > 2 &&
-      prop.name[2] === prop.name[2].toUpperCase()
-    if (isEventHandler) continue
+    // `classifyDOMProp` is the single source of truth for "how does this prop
+    // reach the DOM?" (`packages/shared/src/dom-prop.ts`). `applyRestAttrs`
+    // reads it to build its own attribute set — everything whose kind is NOT
+    // `ref` / `event` / `skip`. This mirror is the compile-time twin of that
+    // loop, so it takes the same three exclusions from the same classifier
+    // rather than re-deciding them by hand (#2749: the hand-rolled `on[A-Z]`
+    // check covered events but not `ref`, so a `ref` on a child-component
+    // call site was mirrored as `setAttribute('ref', String(<fn source>))` —
+    // an attribute SSR never emits, failing the SSR-vs-hydrated snapshot and
+    // shadowing the real binding `initChild` was already passing correctly).
+    //
+    // Two small widenings come with reading the shared classifier, both
+    // intended. `skip` also covers a `children` prop reaching here as an
+    // expression rather than as the `jsx-children` variant handled above —
+    // `setAttribute('children', …)` was never a sensible mirror. And the
+    // classifier's event test requires an actual A-Z at index 2, where the
+    // old `name[2] === name[2].toUpperCase()` also matched non-letters
+    // (`on-foo`, `on1x`), which are not DOM events and now mirror normally.
+    //
+    // Why not also exclude `innerHTML` here: `dangerouslySetInnerHTML` as a
+    // reactive CHILD-COMPONENT prop is a separate, unmeasured shape — the
+    // element-level path is what the `dangerous-inner-html*` fixtures cover.
+    // Narrowing this mirror to the three kinds `applyRestAttrs` excludes keeps
+    // the change to the classification `ref` was already missing.
+    const domKind = classifyDOMProp(prop.name).kind
+    if (domKind === 'ref' || domKind === 'event' || domKind === 'skip') continue
     // Only `expression` / `template` variants drive reactive prop forwarding.
     if (prop.value.kind !== 'expression' && prop.value.kind !== 'template') continue
     const valueExpr = attrValueToString(prop.value)!

package/src/ir-to-client-js/control-flow/stringify/inner-loop.ts

@@ -31,7 +31,7 @@
  *     <indent>}) }
  */
 
-import { keyAttrName, profileBindingId, varSlotId } from '../../utils.ts'
+import { keyAttrName, mapArrayKeyArgs, profileBindingId, varSlotId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { emitMultiRootTemplateCloneLines, namespaceWrapForTemplate } from './template-parse.ts'
@@ -157,7 +157,11 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string, pc:
     bodyIsMultiRoot: emit.bodyIsMultiRoot,
   })
   lines.push(`${indent}  return __innerEl${uid}`)
-  lines.push(`${indent}}, '${inner.markerId}'${profileBindingId(pc, inner.slotId)}) }`)
+  // #2753 Shape B: the runtime's own fallback stamp (a row whose renderItem
+  // didn't already set a key attribute — see `map-array.ts`) has no depth
+  // concept, so a nested keyed loop must tell it which name to check/write
+  // instead of the default `data-key`.
+  lines.push(`${indent}}, '${inner.markerId}'${mapArrayKeyArgs(profileBindingId(pc, inner.slotId), !!emit.wrappedKey, inner.keyDepth)}) }`)
 }
 
 function emitStatic(lines: string[], inner: InnerLoopPlan, indent: string, pc: string | undefined): void {

package/src/ir-to-client-js/control-flow/stringify/loop-child-arm.ts

@@ -11,7 +11,7 @@
  * every nesting depth.
  */
 
-import { varSlotId, DATA_BF_PH, keyAttrName, profileBindingId } from '../../utils.ts'
+import { varSlotId, DATA_BF_PH, keyAttrName, mapArrayKeyArgs, profileBindingId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { namespaceWrapForTemplate } from './template-parse.ts'
@@ -180,7 +180,10 @@ export function stringifyBranchInnerLoops(
       stringifyLoopChildConditionals(lines, inner.nestedConditionals, `${indent}  `, pc)
     }
     lines.push(`${indent}  return __bel${uid}`)
-    lines.push(`${indent}}, '${inner.markerId}'${profileBindingId(pc, inner.slotId)}) }`)
+    // #2753 Shape B: see the identical comment in `inner-loop.ts` —
+    // `keyDepth` is always 1 for a branch-arm inner loop, so this only ever
+    // widens the trailing args when the loop is also keyed.
+    lines.push(`${indent}}, '${inner.markerId}'${mapArrayKeyArgs(profileBindingId(pc, inner.slotId), !!inner.wrappedKey, inner.keyDepth)}) }`)
   }
 }
 

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

@@ -2,7 +2,7 @@
  * IR → HTML template string generation and validation.
  */
 
-import type { AttrValue, FlatMapCallback, IRAttribute, IRNode, IRProp, MapCallbackPreamble } from '../types.ts'
+import type { AttrValue, FlatMapCallback, IRAttribute, IRExpression, IRNode, IRProp, MapCallbackPreamble } from '../types.ts'
 import { isBooleanAttr } from '../html-constants.ts'
 import { toHtmlAttrName, attrValueToString, quotePropName, PROPS_PARAM, DATA_BF_PH, keyAttrName, loopStartMarker, loopEndMarker, loopItemMarker, freeIdsFromRefs, setIntersects, wrapExprWithLoopParams } from './utils.ts'
 import type { LoopParamSpec } from './utils.ts'
@@ -319,6 +319,16 @@ function escapeAttrValueExpr(valExpr: string): string {
  * 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.
+ * The no-`slotId` fallthrough (every `case 'expression'` branch's final
+ * `return` in this file) is shared by several unrelated shapes besides
+ * `{children}` passthrough — an `escapeLeafTextExpressions`-wrapped
+ * preamble leaf, `lowerFormControlValueSsr`'s textarea initial value, an
+ * inlined constant, a `''`/`undefined` deferred placeholder — every one of
+ * which is either already escaped or a literal, and must reach the
+ * template untouched. `bareSpliceExpr` below is that branch's single door
+ * — the one place the fallthrough's decision is made — and it is what
+ * picks the genuine `{children}` reference back out for `markupOrEmpty`'s
+ * nullish guard (#2775); see its own docstring.
  * Hono escapes text content with the same set as attribute values
  * (`& " ' < >`), so `escapeText` delegates to the same operation.
  *
@@ -339,6 +349,73 @@ function escapeTextSlotExpr(innerExpr: string, isMarkup = false): string {
   return `${isMarkup ? 'escapeTextOrMarkup' : 'escapeText'}(${innerExpr})`
 }
 
+/**
+ * Recognizes a JSX child-position expression that is exactly a reference to
+ * the reserved `children` prop — bare `children` (destructured) or
+ * `<receiver>.children` for any single-identifier receiver (`props.children`,
+ * a custom props-param name, a loop-scoped alias closing over props, ...).
+ * Checked against `node.expr` — the ORIGINAL source text, never a
+ * transformed/wrapped form — so it stays accurate regardless of which
+ * builder is asking, and regardless of any earlier pass
+ * (`escapeLeafTextExpressions`, `lowerFormControlValueSsr`) that may have
+ * wrapped an unrelated leaf.
+ *
+ * Deliberately LOOSER than `isTransparentFragment` (`jsx-to-ir.ts`), which
+ * answers the same underlying question one level up. That function runs on
+ * the TS AST and compares the expression text against an EXACT set —
+ * `children`, `props.children`, and the analyzer-resolved
+ * `${ctx.analyzer.propsObjectName}.children`. This layer works on IR and has
+ * no analyzer, so the resolved props name is not reachable here; matching any
+ * single-identifier receiver is the available approximation, chosen — not an
+ * inherited convention.
+ *
+ * The looseness costs nothing measurable. An unrelated `.children` member —
+ * a tree node's own `children` array, say — does not even arrive here: a
+ * reactive member expression is given a `slotId` and takes the escaped
+ * text-slot branch above, so it never reaches the bare-splice fallthrough
+ * this gates. And were one to arrive, the outcome is still benign: the
+ * branch never escaped its value either way, a non-nullish value is
+ * returned untouched, and a nullish one rendering `''` instead of the
+ * literal `"undefined"` is an improvement in its own right.
+ *
+ * Both the ORIGINAL source text and the RESOLVED expression are tested,
+ * because either one alone misses a shape. `node.expr` is the only form
+ * that does not vary between the four builders, so it stays the primary
+ * test; but it is the pre-substitution text, which for a
+ * destructured-and-renamed children (`const { children: kids } = props`)
+ * reads `kids` and matches nothing — while the resolved expression the
+ * emitter is about to splice already reads `(_p.children)`. Testing both
+ * closes that (#2786) without giving up `node.expr`'s stability.
+ */
+function isChildrenPassthroughExpr(expr: string): boolean {
+  return /^([A-Za-z_$][\w$]*\.)?children$/.test(expr.trim())
+}
+
+/**
+ * The single door for the bare (no-`slotId`) expression splice — the
+ * counterpart to `escapeTextSlotExpr` for the branch that must NOT escape.
+ * All four `case 'expression'` builders in this file route through here so
+ * this decision exists in exactly one place: four copies that agree today
+ * are four that can drift apart tomorrow, and this file is where that has
+ * already happened (#2753 -> #2762).
+ *
+ * Only a genuine `{children}` passthrough gets `markupOrEmpty`'s nullish
+ * guard (#2775). Everything else this fallthrough hosts — an
+ * `escapeLeafTextExpressions`-wrapped preamble leaf,
+ * `lowerFormControlValueSsr`'s textarea initial value, an inlined constant,
+ * a `''`/`undefined` deferred placeholder — reaches the template exactly as
+ * it arrived, already escaped or a literal. Escaping is never correct here:
+ * the value is pre-rendered HTML, per `escapeTextSlotExpr`'s docstring.
+ */
+function bareSpliceExpr(node: IRExpression, valueExpr: string): string {
+  // Strip the parens the emitter wraps a substituted expression in, so the
+  // resolved form is comparable to the bare source text.
+  const resolved = valueExpr.trim().replace(/^\(+|\)+$/g, '')
+  const isChildren =
+    isChildrenPassthroughExpr(node.expr) || isChildrenPassthroughExpr(resolved)
+  return !node.joinArrayChild && isChildren ? `markupOrEmpty(${valueExpr})` : valueExpr
+}
+
 /**
  * `dangerouslySetInnerHTML={{ __html: E }}` makes the element's content its
  * raw innerHTML — the intentional, React-style escape hatch. Returns the
@@ -757,13 +834,21 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: ReadonlySet<str
   switch (node.type) {
     case 'element': {
       // Merge context shared with `irToComponentTemplate` /
-      // `generateCsrTemplate`. `irToHtmlTemplate` does not honour
-      // `clientOnly` (templates here are for conditionals / loops only),
-      // and its spread rest-name detector uses `v.expr` directly (no
-      // `templateExpr` fallback — those live on the SSR template path).
+      // `generateCsrTemplate`. Its spread rest-name detector uses
+      // `v.expr` directly (no `templateExpr` fallback — those live on
+      // the SSR template path).
+      //
+      // Why not path-local `clientOnly`: this builder emits the row /
+      // branch markup that a freshly built row gets, while a row REUSED
+      // by hydration carries the SSR adapter's markup instead. So the
+      // two representations must agree, and `clientOnly` ("SSR omits it;
+      // the effect owns it") is the same statement on both sides. Baking
+      // the attribute in here made a rebuilt row carry an attribute an
+      // SSR-reused row never has — visible the moment a row-count change
+      // makes reused and rebuilt rows coexist in one list (#2756).
       const mergeCtx: MergeContext = {
         isFilteredSpread: (v) => !!restSpreadNames?.has(v.expr),
-        honorClientOnly: false,
+        honorClientOnly: true,
       }
       const useMerge = shouldUseSpreadAttrsMerge(node.attrs, mergeCtx)
       const firstMergeableIdx = useMerge
@@ -780,6 +865,12 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: ReadonlySet<str
 
       const attrParts = node.attrs
         .map((a, idx) => {
+          // Deferred to the row's own `createEffect`, which the loop-row
+          // reactive-attr collector already registers for every
+          // `clientOnly` attr (`collect-elements.ts`). Emitting it here
+          // too would be redundant on a rebuilt row and absent on a
+          // hydrate-reused one (#2756).
+          if (a.clientOnly) return ''
           if (useMerge && isMergeableAttr(a, mergeCtx)) {
             // Only the first mergeable attr emits the merge call; the
             // others are already represented inside the merge object.
@@ -853,11 +944,19 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: ReadonlySet<str
       // separate rather than collapsed into a shared helper precisely
       // because their `clientOnly` semantics differ — see that function's
       // own comment (#2617).
+
+      // Escape only when the IR says so (`escapeInClientTemplate`) — most
+      // `${...}` here is already pre-rendered HTML. Never take
+      // `templateExpr` wholesale instead: it rebinds to `_p.xxx`, dropping
+      // the `?? {}` prop-defaulting guard in this builder's init scope
+      // (`client-js-generation.test.ts`).
+      const escapeForClient = (e: string): string =>
+        node.escapeInClientTemplate ? `escapeText(${e})` : e
       if (node.markerless) {
-        const bare = wrapInterpolation(wrapExpr(node.expr))
+        const bare = escapeForClient(wrapInterpolation(wrapExpr(node.expr)))
         return `\${${bare}}`
       }
-      const inner = wrapInterpolation(wrapExpr(node.expr))
+      const inner = escapeForClient(wrapInterpolation(wrapExpr(node.expr)))
       // Stage 3 / D4 — an element-array child ({out}) built by an arbitrary
       // .map() preamble is an array of HTML strings; join it rather than let
       // `${[...]}` `String`-comma-collapse it. Only reached on a JS-runtime
@@ -876,7 +975,8 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: ReadonlySet<str
         const slotted = branchSlotsVar || node.joinArrayChild ? valueExpr : escapeTextSlotExpr(valueExpr)
         return `<!--bf:${node.slotId}-->\${${slotted}}<!--/-->`
       }
-      return `\${${valueExpr}}`
+      // Bare-splice fallthrough (no `slotId`, not an array-child join).
+      return `\${${bareSpliceExpr(node, valueExpr)}}`
     }
 
     case 'conditional': {
@@ -1381,6 +1481,10 @@ export function irToPlaceholderTemplate(node: IRNode, restSpreadNames?: Readonly
     case 'element': {
       const attrParts = node.attrs
         .map((a) => {
+          // Same deferral as `irToHtmlTemplate` — this builder is the
+          // composite-row twin of it, so a row it builds must carry the
+          // same attributes a hydration-reused row does (#2756).
+          if (a.clientOnly) return ''
           const attrName = a.name === '...'
             ? '...'
             : (a.name === 'key' ? keyAttrName(loopDepth) : toHtmlAttrName(a.name))
@@ -1416,7 +1520,11 @@ export function irToPlaceholderTemplate(node: IRNode, restSpreadNames?: Readonly
       if (node.slotId) {
         return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped)}}<!--/-->`
       }
-      return `\${${value}}`
+      // Bare-splice fallthrough (no `slotId`) — this builder's composite-row
+      // twin of `irToHtmlTemplate`'s `escapeForClient`, same "why not
+      // templateExpr" reasoning (#2765).
+      const spliced = bareSpliceExpr(node, value)
+      return `\${${node.escapeInClientTemplate ? `escapeText(${spliced})` : spliced}}`
     }
 
     case 'conditional': {
@@ -1903,7 +2011,8 @@ function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): str
         const isMarkup = opts.markupSlotIds?.has(node.slotId) ?? false
         return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped, isMarkup)}}<!--/-->`
       }
-      return `\${${value}}`
+      // Bare-splice fallthrough (no `slotId`).
+      return `\${${bareSpliceExpr(node, value)}}`
     }
 
     case 'conditional': {
@@ -2527,7 +2636,8 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
           const isMarkup = opts.markupSlotIds?.has(node.slotId) ?? false
           return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(expr, isMarkup)}}<!--/-->`
         }
-        return `\${${value}}`
+        // Bare-splice fallthrough (no `slotId`).
+        return `\${${bareSpliceExpr(node, value)}}`
       }
 
     case 'conditional': {