@barefootjs/jsx 0.33.1 → 0.33.3

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

@@ -10,6 +10,7 @@ import { PROPS_PARAM } from './utils.ts'
 import { computeInlinability, toLegacyInlinability } from './compute-inlinability.ts'
 import { canGenerateStaticTemplate, irToComponentTemplate, generateCsrTemplate, createStringProtector } from './html-template.ts'
 import { nameForRegistryRef } from './component-scope.ts'
+import { resolveRestSpreadNames } from './prop-handling.ts'
 
 /**
  * Resolve chained references within a constants map.
@@ -191,14 +192,29 @@ export function emitRegistrationAndHydration(
   const propNamesForStaticCheck = new Set(ctx.propsParams.map((p) => p.name))
   const { inlinableConstants, unsafeLocalNames } = inlinability ?? buildInlinableConstants(ctx, graph, _ir.root)
 
-  // Build rest spread names: these are rest/props spreads handled by applyRestAttrs, not spreadAttrs
-  const restSpreadNames = new Set<string>()
-  if (ctx.restPropsName) restSpreadNames.add(ctx.restPropsName)
-  if (ctx.propsObjectName) restSpreadNames.add(ctx.propsObjectName)
+  // Build rest spread names: these are rest/props spreads handled by
+  // applyRestAttrs, not spreadAttrs — #2723: includes any `const x__alias
+  // = x` hop onto the rest/props binding (see `resolveRestSpreadNames`'s
+  // docstring in prop-handling.ts).
+  const restSpreadNames = resolveRestSpreadNames(ctx)
 
-  const isCommentScope = (_ir.root.type === 'fragment'
-    && (_ir.root as IRFragment).needsScopeComment)
-    || _ir.root.type === 'component'
+  // Two distinct shapes share the `comment: true` (proxy-scoped) def flag,
+  // but need OPPOSITE runtime treatment of the def's own scope id
+  // (component.ts's `materializeComponent`, #2722):
+  //   - `root.type === 'fragment'`: a genuine fragment root. Its rendered
+  //     markup carries NO scope id of its own (SSR moves it into the
+  //     wrapping `<!--bf-scope:-->` comment, `wrapWithScopeComment` in
+  //     hono-adapter.ts) — CSR mount must generate one just the same, or
+  //     every nested `renderChild()` call loses the parent-prefixed naming
+  //     `_parentScopeId` provides and falls back to a random per-child id
+  //     (#1627's fallback), diverging from SSR/hydrate.
+  //   - `root.type === 'component'`: the render-prop / "root is a single
+  //     child call" case (#2649). The child's OWN markup already carries
+  //     ITS OWN real scope id — the wrapping comment marks a scope with no
+  //     DOM presence of its own, and `materializeComponent` must leave
+  //     `scopeId` null so it doesn't stamp over (or duplicate) the child's.
+  const isFragmentRoot = _ir.root.type === 'fragment' && !!(_ir.root as IRFragment).needsScopeComment
+  const isCommentScope = isFragmentRoot || _ir.root.type === 'component'
 
   // Build ComponentDef object for hydrate()
   const defParts: string[] = [`init: init${name}`]
@@ -232,6 +248,9 @@ export function emitRegistrationAndHydration(
   if (isCommentScope) {
     defParts.push('comment: true')
   }
+  if (isFragmentRoot) {
+    defParts.push('fragmentRoot: true')
+  }
 
   const registryKey = nameForRegistryRef(name)
   // When the registry key was file-scoped (`Name__<8hex>`, for a

package/src/ir-to-client-js/generate-init.ts

@@ -97,7 +97,7 @@ export function generateInitFunction(
   // into the analyzer / IR construction stage and introduce a
   // `PropRewritten<T>` brand type so missing the rewrite becomes a
   // compile-time error. ---
-  let generatedCode = rewritePropsObjectRef(lines.join('\n'), ctx.propsObjectName)
+  let generatedCode = rewritePropsObjectRef(lines.join('\n'), ctx.propsObjectName, ctx.restPropsName)
   generatedCode += '\n' + hydrateLine
 
   // Substitute module-level declarations BEFORE import detection: a

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
@@ -400,7 +477,7 @@ function renderTemplateAttrPart(
   attr: IRAttribute,
   attrName: string,
   wrap: (expr: string) => string,
-  restSpreadNames?: Set<string>,
+  restSpreadNames?: ReadonlySet<string>,
 ): string {
   const v = attr.value
   switch (v.kind) {
@@ -667,7 +744,7 @@ function stripLeafKeyAttr(ir: IRNode): IRNode {
  */
 export function renderFlatMapClientBody(
   cb: Pick<FlatMapCallback, 'segments'>,
-  restSpreadNames?: Set<string>,
+  restSpreadNames?: ReadonlySet<string>,
 ): string {
   return renderPreamble(cb, {
     textVariant: 'client',
@@ -699,7 +776,7 @@ export function flatMapCallbackHasKeyedLeaf(cb: Pick<FlatMapCallback, 'segments'
  */
 export function renderFlatMapProjectionClientBody(
   inner: Extract<IRNode, { type: 'loop' }>,
-  restSpreadNames?: Set<string>,
+  restSpreadNames?: ReadonlySet<string>,
 ): string {
   const chained = applyLoopChain(inner)
   const params = inner.index ? `(${inner.param}, ${inner.index})` : `(${inner.param})`
@@ -747,7 +824,7 @@ function escapeLeafTextExpressions(ir: IRNode): IRNode {
 // docstring (`ir-to-client-js/utils.ts`) for why this stays outside #2482's
 // migration (it's the client-JS-emitter twin of the Go adapter's
 // `loopBindingStack`).
-export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, loopDepth = 0, loopParams?: ReadonlyArray<string | LoopParamSpec>, branchSlotsVar?: string, inHoistedChildren = false): string {
+export function irToHtmlTemplate(node: IRNode, restSpreadNames?: ReadonlySet<string>, loopDepth = 0, loopParams?: ReadonlyArray<string | LoopParamSpec>, branchSlotsVar?: string, inHoistedChildren = false): string {
   const recurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, inHoistedChildren)
   const wrapExpr = (expr: string) => wrapExprWithLoopParams(expr, loopParams)
   const wrapInterpolation = (expr: string): string => branchSlotsVar
@@ -757,13 +834,21 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
   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?: Set<string>, lo
 
       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?: Set<string>, lo
       // 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?: Set<string>, lo
         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': {
@@ -1373,7 +1473,7 @@ function walkSkeletonPathChildren(
  * elements (`<div data-bf-ph="sN"></div>`) instead of renderChild() calls.
  * The placeholders are replaced with real createComponent() elements at runtime.
  */
-export function irToPlaceholderTemplate(node: IRNode, restSpreadNames?: Set<string>, loopDepth = 0, loopParams?: ReadonlyArray<string | LoopParamSpec>): string {
+export function irToPlaceholderTemplate(node: IRNode, restSpreadNames?: ReadonlySet<string>, loopDepth = 0, loopParams?: ReadonlyArray<string | LoopParamSpec>): string {
   const recurse = (n: IRNode): string => irToPlaceholderTemplate(n, restSpreadNames, loopDepth, loopParams)
   const wrapExpr = (expr: string) => wrapExprWithLoopParams(expr, loopParams)
 
@@ -1381,6 +1481,10 @@ export function irToPlaceholderTemplate(node: IRNode, restSpreadNames?: Set<stri
     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?: Set<stri
       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': {
@@ -1637,7 +1745,7 @@ function isSingleRootElement(html: string): boolean {
  */
 export interface TemplateOptions {
   inlinableConstants?: Map<string, string>
-  restSpreadNames?: Set<string>
+  restSpreadNames?: ReadonlySet<string>
   propsObjectName?: string | null
   /**
    * Names that exist only in the init-body scope (or were demoted to unsafe
@@ -1728,7 +1836,7 @@ export interface TemplateOptions {
 export function irToComponentTemplate(
   node: IRNode,
   inlinableConstants?: Map<string, string>,
-  restSpreadNames?: Set<string>,
+  restSpreadNames?: ReadonlySet<string>,
   propsObjectName?: string | null,
   markupSlotIds?: ReadonlySet<string>
 ): string {
@@ -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': {
@@ -2133,7 +2242,7 @@ export function generateCsrTemplate(
   node: IRNode,
   inlinableConstants: Map<string, string> | undefined,
   ctx: ClientJsContext,
-  restSpreadNames?: Set<string>,
+  restSpreadNames?: ReadonlySet<string>,
   propsObjectName?: string | null,
   unsafeLocalNames?: Set<string>,
   deferredChildSlots?: ReadonlySet<string>,
@@ -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': {

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

@@ -2,6 +2,7 @@
  * Import detection and DOM import management.
  */
 
+import ts from 'typescript'
 import type { ComponentIR, IRNode } from '../types.ts'
 import { isClientBuiltinName } from '../builtins.ts'
 import { collectValueReferencedNames } from '../value-references.ts'
@@ -29,6 +30,9 @@ export const RUNTIME_IMPORT_CANDIDATES = [
   // the compiler-built HTML at the producer (renderChild / initChild props);
   // `escapeTextOrMarkup` unwraps it at the claim-plan-'markup' template slot.
   'bfMarkup', 'escapeTextOrMarkup',
+  // Nullish guard for a bare `{children}` passthrough splice (#2775) — the
+  // value is already-stringified markup, never escaped, just nullish-safe.
+  'markupOrEmpty',
   'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText',
   // Claim-plan interpreter (slot unification A2/A3, spec/slot-unification.md)
   // — the "one claim mechanism" that replaced `patchSlotRange` and
@@ -148,6 +152,168 @@ export function makeValueUsageTest(generatedCode: string): (localName: string) =
   }
 }
 
+/**
+ * Render already-filtered-to-used specifier fragments for one import source
+ * into one or two legal import declaration lines. Shared by every call site
+ * that re-serializes an `ImportInfo`'s specifiers into client-JS import
+ * text — `collectExternalImports` below and the state-only-file client-JS
+ * path (`compiler.ts`'s single-component early return for a `.tsx` with no
+ * JSX return but exported `@client` module signals) — so the
+ * default/namespace handling lives in exactly one place.
+ *
+ * A default or namespace specifier needs its own import syntax
+ * (`import X from '...'` / `import * as X from '...'`), never the
+ * named-import braces a plain specifier gets — a plain `import { lock }
+ * from '...'` for a DEFAULT-imported `lock` compiles to a real, silently-
+ * wrong ESM import (no such named export) that only surfaces once a
+ * bundler actually resolves it (#2767 follow-up: a server component's own
+ * compiled init previously never reached a real Rollup graph, so this was
+ * unreachable until that gap closed).
+ *
+ * `import Default, { a, b } from '...'` is the only legal single-line
+ * pairing — a namespace specifier can't combine with named ones, but
+ * multiple import declarations for the same source are legal ESM, so a
+ * used namespace specifier always gets its own line.
+ */
+export function renderUsedImportLines(
+  source: string,
+  usedDefault: string | null,
+  usedNamespace: string | null,
+  usedNamed: string[],
+): string[] {
+  const lines: string[] = []
+  const defaultAndNamed = [
+    usedDefault,
+    usedNamed.length > 0 ? `{ ${usedNamed.join(', ')} }` : null,
+  ].filter((part): part is string => part !== null).join(', ')
+  if (defaultAndNamed) lines.push(`import ${defaultAndNamed} from '${source}'`)
+  if (usedNamespace) lines.push(`import * as ${usedNamespace} from '${source}'`)
+  return lines
+}
+
+/**
+ * Merge multiple sibling components' compiled client-JS blobs (one file
+ * with several `export function`s, e.g. `compileMultipleComponents`'s two
+ * `.client.js` outputs) into one conflict-free block.
+ *
+ * Real top-level `ImportDeclaration` statements are found via a
+ * `ts.createSourceFile` AST walk — never a text/regex line scan — so a
+ * string or template-literal VALUE that merely contains a line starting
+ * with `import ` (a docs component embedding a code sample, say) can never
+ * be torn out of its literal and hoisted into the imports block. This
+ * mirrors `combine-client-js.ts`'s `parseAndMerge`, the established
+ * precedent for exactly this shape of parse (see that file's docstring
+ * and issue #1702, the regression it exists to prevent) — CLAUDE.md
+ * requires it for "compiled client JS" specifically. Reaching a bundler
+ * for the FIRST time is precisely what a plain server component newly
+ * promoted to a Rollup entry by `needsClientEntry` (#2767) now does, so a
+ * line-based scan here carries real risk, not just a style violation.
+ *
+ * Differs from `parseAndMerge` in two ways required by this call site:
+ * (1) default and named specifiers from the same source fold into ONE
+ * declaration via `renderUsedImportLines`'s rule, rather than surviving
+ * as separate verbatim, exact-string-deduped lines — the fold is what
+ * prevents the duplicate-binding `SyntaxError` two sibling components can
+ * otherwise produce for a shared default import (#2767 follow-up); (2) an
+ * unresolved `@bf-child:` placeholder import is KEPT (deduped by exact
+ * text, same as any other side-effect import), never dropped — unlike
+ * `parseAndMerge`'s parent-child inlining case, this merge runs inside
+ * `compileMultipleComponents`, BEFORE `@barefootjs/vite`'s `resolveId`
+ * gets a chance to rewrite the placeholder into a real module reference.
+ *
+ * Returns the fully assembled `<imports>\n\n<code…>` block ready to use
+ * as a `.client.js` file's content.
+ */
+export function mergeCompiledClientJsImports(codeBlobs: string[]): string {
+  const sourceOrder: string[] = []
+  const namedBySource = new Map<string, Set<string>>()
+  const defaultBySource = new Map<string, string>()
+  const otherImports: string[] = []
+  const seenOther = new Set<string>()
+  const codeSections: string[] = []
+
+  const ensureSource = (source: string): Set<string> => {
+    if (!namedBySource.has(source)) {
+      namedBySource.set(source, new Set())
+      sourceOrder.push(source)
+    }
+    return namedBySource.get(source)!
+  }
+
+  for (const content of codeBlobs) {
+    const sourceFile = ts.createSourceFile(
+      'combine.js',
+      content,
+      ts.ScriptTarget.Latest,
+      /*setParentNodes*/ false,
+      ts.ScriptKind.JS,
+    )
+    const importSpans: Array<[number, number]> = []
+
+    for (const stmt of sourceFile.statements) {
+      if (!ts.isImportDeclaration(stmt)) continue
+      const start = stmt.getStart(sourceFile)
+      const end = stmt.getEnd()
+      importSpans.push([start, end])
+
+      const clause = stmt.importClause
+      const bindings = clause?.namedBindings
+      const specifier = ts.isStringLiteral(stmt.moduleSpecifier) ? stmt.moduleSpecifier.text : ''
+      const isNamespace = !!bindings && ts.isNamespaceImport(bindings)
+      const isNamed = !!bindings && ts.isNamedImports(bindings)
+
+      // A namespace binding (`import * as NS from '…'`, or a combined
+      // `import Default, * as NS from '…'`) is never folded — it always
+      // falls through to the verbatim-keep branch below, same as
+      // `parseAndMerge`'s. Checking `isNamespace` FIRST (not just `!isNamed`)
+      // matters for the combined-with-default shape specifically: a naive
+      // `clause?.name || isNamed` would route it into the fold branch below
+      // on the strength of the default clause alone and silently drop the
+      // namespace half, since only `isNamed` is read there. No current
+      // producer of `clientJs` output emits that combined shape
+      // (`renderUsedImportLines` always splits a used default+namespace
+      // pair into two separate lines), but the classification must stay
+      // correct independent of that invariant.
+      if (!isNamespace && (clause?.name || isNamed)) {
+        // Default and/or named specifiers — fold by source.
+        const set = ensureSource(specifier)
+        if (clause?.name && !defaultBySource.has(specifier)) {
+          defaultBySource.set(specifier, clause.name.text)
+        }
+        if (isNamed) {
+          for (const el of (bindings as ts.NamedImports).elements) {
+            set.add(el.propertyName ? `${el.propertyName.text} as ${el.name.text}` : el.name.text)
+          }
+        }
+      } else {
+        // Namespace or side-effect import (including an unresolved
+        // `@bf-child:` placeholder) — kept verbatim, deduped by exact text.
+        const stmtText = content.slice(start, end)
+        if (!seenOther.has(stmtText)) {
+          seenOther.add(stmtText)
+          otherImports.push(stmtText)
+        }
+      }
+    }
+
+    let code = ''
+    let cursor = 0
+    for (const [start, end] of importSpans) {
+      code += content.slice(cursor, start)
+      cursor = end
+    }
+    code += content.slice(cursor)
+    code = code.trim()
+    if (code) codeSections.push(code)
+  }
+
+  const mergedImports = sourceOrder.flatMap(source =>
+    renderUsedImportLines(source, defaultBySource.get(source) ?? null, null, [...namedBySource.get(source)!]),
+  )
+
+  return [...mergedImports, ...otherImports, '', ...codeSections].join('\n')
+}
+
 /**
  * Collect external (non-DOM, non-component) imports that are used in generated code.
  * These are third-party libraries like @barefootjs/form, zod, etc. that need to be
@@ -171,23 +337,30 @@ export function collectExternalImports(ir: ComponentIR, generatedCode: string, l
 
     // Check which specifiers are actually used in the generated code.
     // Skip component names — they are rendered via initChild(), not imported directly.
-    const usedSpecs: string[] = []
+    const usedNamed: string[] = []
+    let usedDefault: string | null = null
+    let usedNamespace: string | null = null
     for (const spec of imp.specifiers) {
       // Per-specifier `import { type Foo }` has no value binding — #2432.
       if (spec.isTypeOnly) continue
       const localName = spec.alias || spec.name
       if (componentNames.has(localName)) continue
-      if (isUsedAsValue(localName)) {
-        usedSpecs.push(spec.alias ? `${spec.name} as ${spec.alias}` : spec.name)
+      if (!isUsedAsValue(localName)) continue
+      if (spec.isDefault) {
+        usedDefault = localName
+      } else if (spec.isNamespace) {
+        usedNamespace = localName
+      } else {
+        usedNamed.push(spec.alias ? `${spec.name} as ${spec.alias}` : spec.name)
       }
     }
 
-    if (usedSpecs.length > 0) {
+    if (usedDefault || usedNamespace || usedNamed.length > 0) {
       let source = imp.source
       if (ir.metadata.clientSignalImportSources?.has(source)) {
         source = source.replace(/\.tsx?$/, '') + '.client.js'
       }
-      importLines.push(`import { ${usedSpecs.join(', ')} } from '${source}'`)
+      importLines.push(...renderUsedImportLines(source, usedDefault, usedNamespace, usedNamed))
     }
   }
   return importLines

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

@@ -19,6 +19,7 @@ import { PROPS_PARAM } from './utils.ts'
 import { buildInlinableConstants, csrInlinableConstantsFromCtx } from './emit-registration.ts'
 import { buildEnvFromCtx } from './compute-inlinability.ts'
 import { nameForRegistryRef } from './component-scope.ts'
+import { resolveRestSpreadNames } from './prop-handling.ts'
 import { IMPORT_PLACEHOLDER, RUNTIME_MODULE, detectUsedImports, collectExternalImports } from './imports.ts'
 import { isInlinableInTemplate } from '../relocate.ts'
 import { buildSourceMapFromIR, type SourceMapV3 } from './source-map.ts'
@@ -216,6 +217,11 @@ function needsClientJs(ctx: ClientJsContext): boolean {
     ctx.conditionalElements.length > 0 ||
     ctx.loopElements.length > 0 ||
     ctx.refElements.length > 0 ||
+    // An element forwarding the caller's leftover props needs `init` to
+    // run `applyRestAttrs` against it — that call is the ONLY thing that
+    // applies those attributes on a pure CSR mount, since neither template
+    // can carry a bag whose keys are unknown at compile time (#2754).
+    ctx.restAttrElements.length > 0 ||
     ctx.childInits.length > 0 ||
     ctx.reactiveAttrs.length > 0 ||
     ctx.clientOnlyElements.length > 0 ||
@@ -255,10 +261,11 @@ function generateTemplateOnlyMount(ir: ComponentIR, ctx: ClientJsContext): strin
   const graph = buildReferencesGraph(ctx, ir.root)
   const { inlinableConstants, unsafeLocalNames } = buildInlinableConstants(ctx, graph, ir.root)
 
-  // Build rest spread names: these are rest/props spreads handled by applyRestAttrs, not spreadAttrs
-  const restSpreadNames = new Set<string>()
-  if (ctx.restPropsName) restSpreadNames.add(ctx.restPropsName)
-  if (ctx.propsObjectName) restSpreadNames.add(ctx.propsObjectName)
+  // Build rest spread names: these are rest/props spreads handled by
+  // applyRestAttrs, not spreadAttrs — #2723: includes any `const x__alias
+  // = x` hop onto the rest/props binding (see `resolveRestSpreadNames`'s
+  // docstring in prop-handling.ts).
+  const restSpreadNames = resolveRestSpreadNames(ctx)
 
   let templateHtml: string | undefined