@barefootjs/jsx 0.33.1 → 0.33.3

package/src/__tests__/state-only-file-default-import.test.ts

@@ -0,0 +1,47 @@
+/**
+ * #2767 follow-up: the state-only-file client-JS path (a `.tsx` with no
+ * JSX return but an exported `/* @client *\/` module signal) used to filter
+ * OUT every default- or namespace-imported specifier when deciding which
+ * external imports to preserve (`s => !s.isDefault && !s.isNamespace`,
+ * `compiler.ts`'s single-component early return) — not just render them
+ * wrong, but drop them entirely. A signal initializer that references a
+ * default- or namespace-imported helper compiled with zero diagnostics
+ * into client JS that throws `ReferenceError` in the browser, since the
+ * import never made it into the bundle at all.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('state-only file: default/namespace imports feeding a @client signal', () => {
+  test('preserves a default-imported helper referenced by the signal initializer', () => {
+    const source = `'use client'
+import defaults from './defaults.json' with { type: 'json' }
+import { createSignal } from '@barefootjs/client'
+/* @client */
+export const [count, setCount] = createSignal(defaults.start)
+`
+    const result = compileJSX(source, 'store.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    expect(clientJs!.content).toContain("import defaults from './defaults.json'")
+    expect(clientJs!.content).not.toContain('import { defaults }')
+  })
+
+  test('preserves a namespace-imported helper referenced by the signal initializer', () => {
+    const source = `'use client'
+import * as util from './util'
+import { createSignal } from '@barefootjs/client'
+/* @client */
+export const [count, setCount] = createSignal(util.base())
+`
+    const result = compileJSX(source, 'store2.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    expect(clientJs!.content).toContain("import * as util from './util'")
+  })
+})

package/src/analyzer.ts

@@ -4237,6 +4237,42 @@ export function listComponentFunctions(
     ts.ScriptKind.TSX
   )
 
+  return listComponentFunctionsFromSourceFile(sourceFile)
+}
+
+/**
+ * One parse, two structural facts about a component file — the component
+ * names it exports (today's `listComponentFunctions` result) and the
+ * PascalCase JSX tags it instantiates (`collectJsxComponentTags`'s
+ * out-edges). Used by `@barefootjs/vite`'s `discoverComponents` to build the
+ * component-instantiation graph that decides which SERVER files also need a
+ * client bundle because they transitively own a `'use client'` descendant
+ * (issue #2767) — a property no single-file compile can answer, since it
+ * depends on the whole discovered corpus.
+ */
+export interface ComponentFileScan {
+  /** Component names this file exports (same result as `listComponentFunctions`). */
+  exports: string[]
+  /** PascalCase JSX tag identifiers this file references. */
+  referencedComponents: string[]
+}
+
+export function scanComponentFile(source: string, filePath: string): ComponentFileScan {
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    source,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX
+  )
+
+  return {
+    exports: listComponentFunctionsFromSourceFile(sourceFile),
+    referencedComponents: [...collectJsxComponentTags(sourceFile)],
+  }
+}
+
+function listComponentFunctionsFromSourceFile(sourceFile: ts.SourceFile): string[] {
   const componentNames: string[] = []
 
   // 'use client' directive detection (controls whether multi-return JSX

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/expression-parser.ts

@@ -317,6 +317,32 @@ export type SortComparator = {
   keys: SortKey[]
 }
 
+/**
+ * Runtime registries of the sort-comparator catalogue's finite dimensions —
+ * the denominators for the coverage ledger's sort floor
+ * (`packages/adapter-tests/src/__tests__/coverage-map.test.ts`). This closes
+ * the comparator half of the change-time coupling rule
+ * (`spec/subset-conformance.md`) mechanically: the exhaustiveness pins below
+ * make widening {@link SortKey} without listing the new member here a compile
+ * error, and the floor test then makes shipping a listed member with no
+ * covering fixture a test failure — same drift defence `PARSED_EXPR_KINDS`
+ * and `ARRAY_METHOD_NAMES` provide for their halves.
+ */
+export const SORT_KEY_TYPES = ['numeric', 'string', 'auto'] as const satisfies ReadonlyArray<SortKey['type']>
+type MissingFromSortKeyTypes = Exclude<SortKey['type'], (typeof SORT_KEY_TYPES)[number]>
+const _sortKeyTypeRegistryIsExhaustive: MissingFromSortKeyTypes extends never ? true : never = true
+void _sortKeyTypeRegistryIsExhaustive
+
+export const SORT_KEY_TARGETS = ['self', 'field'] as const satisfies ReadonlyArray<SortKey['key']['kind']>
+type MissingFromSortKeyTargets = Exclude<SortKey['key']['kind'], (typeof SORT_KEY_TARGETS)[number]>
+const _sortKeyTargetRegistryIsExhaustive: MissingFromSortKeyTargets extends never ? true : never = true
+void _sortKeyTargetRegistryIsExhaustive
+
+export const SORT_KEY_DIRECTIONS = ['asc', 'desc'] as const satisfies ReadonlyArray<SortKey['direction']>
+type MissingFromSortKeyDirections = Exclude<SortKey['direction'], (typeof SORT_KEY_DIRECTIONS)[number]>
+const _sortKeyDirectionRegistryIsExhaustive: MissingFromSortKeyDirections extends never ? true : never = true
+void _sortKeyDirectionRegistryIsExhaustive
+
 /**
  * Flatten depth for `.flat(depth?)` (#1448 Tier C). A finite non-negative
  * integer flattens that many levels (`.flat()` defaults to `1`; a `0` or

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
@@ -213,7 +213,7 @@ export { isValueReferenceIdentifier, collectValueReferencedNames } from './value
 // Expression Parser
 export { parseExpression, tsNodeToParsedExpr, asCallbackMethodCall, CALLBACK_METHODS, sortComparatorFromArrow, serializeParsedExpr, freeVarsInBody, freeIdentifiers, materializeGetterCalls, isSupported, isSupportedValue, exprToString, stringifyParsedExpr, identifierPath, parseBlockBody, parseBlockBodyTolerant, foldBlockToExpr, predicateTernaryToLogical, containsHigherOrder, extractArrowBodyExpression, parseStyleObjectEntries, hasUnsafeStyleValue, parseProviderObjectLiteral, type ProviderObjectMember, type FoldBlockOptions } from './expression-parser.ts'
 export type { StyleObjectEntry } from './expression-parser.ts'
-export { PARSED_EXPR_KINDS, ARRAY_METHOD_NAMES } from './expression-parser.ts'
+export { PARSED_EXPR_KINDS, ARRAY_METHOD_NAMES, SORT_KEY_TYPES, SORT_KEY_TARGETS, SORT_KEY_DIRECTIONS } from './expression-parser.ts'
 export type { ParsedExpr, ObjectLiteralProperty, ParsedStatement, SortComparator, SortKey, FlatDepth, SupportLevel, SupportResult, TemplatePart } from './expression-parser.ts'
 export { buildLoopChainExpr } from './loop-chain.ts'
 export type { LoopChainInputs } from './loop-chain.ts'

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

@@ -8,11 +8,12 @@ import { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM } from '
 import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings, buildLoopRowScope, anyNameIn } from './reactivity.ts'
 import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, renderFlatMapClientBody, renderFlatMapProjectionClientBody, flatMapCallbackHasKeyedLeaf, type SkeletonSlotPaths } from './html-template.ts'
 import { detectRootNamespaceWrapTag } from './control-flow/stringify/template-parse.ts'
-import { expandDynamicPropValue, expandConstantForReactivity } from './prop-handling.ts'
+import { expandDynamicPropValue, expandConstantForReactivity, resolveRestSpreadOrigin, resolveRestSpreadNames } from './prop-handling.ts'
 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', "''", '""', '``'])
@@ -497,23 +498,15 @@ function isSingleElementJsxChildren(nodes: IRNode[]): boolean {
   return nodes.length === 1 && nodes[0].type === 'element'
 }
 
-/** Build rest spread names from context (rest/props spreads handled by applyRestAttrs, not spreadAttrs). */
-function buildRestSpreadNames(ctx: ClientJsContext): Set<string> {
-  const names = new Set<string>()
-  if (ctx.restPropsName) names.add(ctx.restPropsName)
-  if (ctx.propsObjectName) names.add(ctx.propsObjectName)
-  return names
-}
-
 /** Build propsExpr for a child component from its IR props. */
 function buildComponentPropsExpr(props: IRProp[], ctx: ClientJsContext): string {
-  const restName = ctx.restPropsName
-  const propsObjName = ctx.propsObjectName
   const knownSpreadProp = props.find(p => {
     if (p.name !== '...' && !p.name.startsWith('...')) return false
     if (p.value.kind !== 'spread' && p.value.kind !== 'expression') return false
     const expr = p.value.kind === 'spread' ? p.value.expr : p.value.expr
-    return expr === restName || expr === propsObjName
+    // #2723: resolve through any `const x__alias = x` hop onto the
+    // rest/props binding — see `resolveRestSpreadOrigin`'s docstring.
+    return resolveRestSpreadOrigin(ctx, expr) !== null
   })
   const spreadSource = knownSpreadProp ? PROPS_PARAM : null
 
@@ -589,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)!
@@ -762,7 +776,7 @@ export function collectElements(
           // drops the parent's slot suffix automatically. Each iteration
           // owns a distinct scope identified by `data-key`, mirroring the
           // SSR template's renderChild emit.
-          staticItemTemplate = irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, undefined, undefined)
+          staticItemTemplate = irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, undefined, undefined)
         }
       } else if (l.children[0] && !projectionInner) {
         // Pass loopParams so expressions are wrapped at generation time,
@@ -771,8 +785,8 @@ export function collectElements(
         // in the emitted template literal are rewritten to `__bfItem()[1].color`.
         const loopParamSpec = [{ param: l.param, bindings: l.paramBindings }]
         template = useElementReconciliation
-          ? irToPlaceholderTemplate(l.children[0], buildRestSpreadNames(ctx), 0, loopParamSpec)
-          : irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, loopParamSpec)
+          ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec)
+          : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec)
         // Static-array loops emit a `forEach((param, idx) => ...)` whose body
         // references the destructured param directly — `__bfItem()` is not in
         // scope there. Build a second template that skips the loop-param
@@ -788,8 +802,8 @@ export function collectElements(
           // markers, so SSR's parent-anchored shape and CSR's random-id
           // shape both resolve through the same lookup.
           staticItemTemplate = useElementReconciliation
-            ? irToPlaceholderTemplate(l.children[0], buildRestSpreadNames(ctx), 0)
-            : irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0)
+            ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0)
+            : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0)
         } else if (!useElementReconciliation && !l.bodyIsMultiRoot && !l.bodyIsItemConditional) {
           // Hoisted shared-template fast path (perf): only for the plain
           // `mapArray` shape — single-root, dynamic array, no element
@@ -855,13 +869,13 @@ export function collectElements(
         flatMapClient: projectionInner
           ? {
               params: l.index ? `(${l.param}, ${l.index})` : `(${l.param})`,
-              body: renderFlatMapProjectionClientBody(projectionInner, buildRestSpreadNames(ctx)),
+              body: renderFlatMapProjectionClientBody(projectionInner, resolveRestSpreadNames(ctx)),
               keyed: projectionInner.key !== null,
             }
           : l.flatMapCallback
             ? {
                 params: l.flatMapCallback.params,
-                body: renderFlatMapClientBody(l.flatMapCallback, buildRestSpreadNames(ctx)),
+                body: renderFlatMapClientBody(l.flatMapCallback, resolveRestSpreadNames(ctx)),
                 keyed: flatMapCallbackHasKeyedLeaf(l.flatMapCallback),
               }
             : undefined,
@@ -964,9 +978,10 @@ function collectFromElement(element: IRElement, ctx: ClientJsContext, insideCond
       // Always use PROPS_PARAM as the source since the init function parameter is PROPS_PARAM.
       if (attr.name === '...' && attr.value) {
         const spreadVal = attrValueToString(attr.value) ?? ''
-        const elemRestName = ctx.restPropsName
-        const elemPropsObjName = ctx.propsObjectName
-        if (spreadVal && (spreadVal === elemRestName || spreadVal === elemPropsObjName)) {
+        // #2723: resolve through any `const x__alias = x` hop onto the
+        // rest/props binding — see `resolveRestSpreadOrigin`'s docstring.
+        const spreadOrigin = spreadVal ? resolveRestSpreadOrigin(ctx, spreadVal) : null
+        if (spreadOrigin !== null) {
           // `applyRestAttrs(_el, _p, exclude)` is handed the FULL props
           // object (`PROPS_PARAM`), not a computed JS rest binding, and the
           // runtime filters by SOURCE KEY (`source[key]`). So `exclude` must
@@ -985,7 +1000,7 @@ function collectFromElement(element: IRElement, ctx: ClientJsContext, insideCond
           // caller-keyed (#2524 CSR half) — so the exclude list must use
           // the caller-facing key too, not the local binding name.
           const consumedKeys =
-            spreadVal === elemRestName ? ctx.propsParams.map(p => p.sourceName ?? p.name) : []
+            spreadOrigin === 'rest' ? ctx.propsParams.map(p => p.sourceName ?? p.name) : []
           const staticAttrKeys = element.attrs
             .filter(a => a.name !== '...')
             .map(a => a.name)
@@ -1135,7 +1150,7 @@ function collectBranchLoops(
   siblingOffsets: Map<IRLoop, IRNode[]>,
 ): BranchLoop[] {
   const loops: BranchLoop[] = []
-  const restNames = ctx ? buildRestSpreadNames(ctx) : undefined
+  const restNames = ctx ? resolveRestSpreadNames(ctx) : undefined
 
   walkIR<string | null>(node, null, {
     // Don't recurse into nested conditionals / if-statements.
@@ -1258,7 +1273,7 @@ function buildConditionalMetadata(
   ctx: ClientJsContext,
   siblingOffsets: Map<IRLoop, IRNode[]>,
 ): ConditionalElement {
-  const restNames = buildRestSpreadNames(ctx)
+  const restNames = resolveRestSpreadNames(ctx)
   // Use loopDepth=-1 so the first loop encountered inside the branch emits
   // data-key (depth 0) for its items, matching the mapArray item template
   // and event dispatcher convention. Matches irToComponentTemplate/generateCsrTemplate.

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)}) }`)
   }
 }