@barefootjs/jsx 0.33.2 → 0.33.4

package/src/__tests__/signal-getter-not-called.test.ts

@@ -266,4 +266,153 @@ describe('Signal Getter Not Called (BF044)', () => {
       expect(bf044[0].severity).toBe('error')
     })
   })
+
+  /**
+   * Nested descent (#2755 / #2751 upstream fix).
+   *
+   * The gate used to open with `if (!ts.isIdentifier(expr)) return`, so it saw
+   * only an expression's TOP-LEVEL node. Every shape below reaches a rendered
+   * position through some wrapper, and every one of them used to compile
+   * silently and then miscompile downstream — the accessor stringified into a
+   * DOM property (#2755) or referenced from a module-scope template thunk that
+   * cannot see it (#2751).
+   *
+   * The negative cases are the load-bearing half: descending EVERYWHERE would
+   * break the Context-Provider idiom, where handing a descendant an uncalled
+   * accessor is the whole point. The rule is "rendered position", not "nested".
+   */
+  describe('nested descent into rendered positions', () => {
+    // `Child` is declared AFTER `Counter` deliberately: `analyzeComponent`
+    // analyzes the FIRST function in the module, so hoisting the child above
+    // would silently analyze `Child` instead and make every case below report
+    // zero diagnostics — the negative cases would then pass for the wrong
+    // reason. The positive block is the control that proves the walk is
+    // actually live in this exact module shape.
+    const wrap = (body: string) => `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function Counter() {
+        const [count, setCount] = createSignal(0)
+        const [items, setItems] = createSignal([1, 2])
+        const obj: Record<string, unknown> = {}
+        return ${body}
+      }
+
+      function Child(props: { value?: unknown }) { return <span /> }
+    `
+    const bf044Of = (body: string) =>
+      compileToIR(wrap(body)).errors.filter(e => e.code === ErrorCodes.SIGNAL_GETTER_NOT_CALLED)
+
+    describe('fires — the getter reaches a rendered position', () => {
+      test.each([
+        ['ternary condition', '<div className={count ? "on" : "off"} />'],
+        ['template literal span', '<div className={`x-${count}`} />'],
+        ['call argument', '<div className={String(count)} />'],
+        ['array literal member', '<div className={[count].join("")} />'],
+        ['style object property value', '<div style={{ color: count }} />'],
+        ['JSX text child', '<div>{count ? "a" : "b"}</div>'],
+      ])('%s', (_label, body) => {
+        const bf044 = bf044Of(body)
+        expect(bf044).toHaveLength(1)
+        expect(bf044[0].message).toContain("'count'")
+      })
+    })
+
+    describe('stays silent — the getter is handed onward, not rendered', () => {
+      test.each([
+        // The `<SelectContext.Provider value={{ open, ... }}>` shape: every
+        // member is an accessor BY CONTRACT. Calling it here would freeze the
+        // value at provider-render time and break every consumer.
+        ['component prop, object literal member', '<Child value={{ x: count }} />'],
+        ['component prop, ternary', '<Child value={count ? 1 : 2} />'],
+        ['component prop, call argument', '<Child value={String(count)} />'],
+      ])('%s', (_label, body) => {
+        expect(bf044Of(body)).toHaveLength(0)
+      })
+
+      test('a loop-row param shadowing a same-named signal', () => {
+        // `count` here is the row item, not the signal — resolved through the
+        // ambient `BindingScope`, which sees bindings introduced OUTSIDE the
+        // checked expression.
+        expect(bf044Of('<ul>{items().map(count => <li className={count ? "a" : "b"} />)}</ul>')).toHaveLength(0)
+      })
+
+      test('correctly called getter in every nested shape', () => {
+        expect(bf044Of('<div className={count() ? "on" : "off"} />')).toHaveLength(0)
+        expect(bf044Of('<div style={{ color: count() }} />')).toHaveLength(0)
+      })
+    })
+
+    describe('binding and parameter defaults', () => {
+      // A default VALUE is an ordinary expression in the enclosing scope, but
+      // the walk used to visit only binding NAMES. Measured before the fix:
+      // both shapes compiled silently and emitted a module-scope `template`
+      // thunk referencing a component-scope binding — `ReferenceError` on CSR
+      // mount, i.e. #2751's mechanism surviving inside the very check meant to
+      // close it.
+      test('destructuring default in a rendered position', () => {
+        expect(bf044Of('<div className={(() => { const { x = count } = ({} as { x?: unknown }); return String(x) })()} />')).toHaveLength(1)
+      })
+
+      test('parameter default in a rendered position', () => {
+        expect(bf044Of('<div className={((f = count) => String(f))()} />')).toHaveLength(1)
+      })
+
+      test('a later default reading an EARLIER parameter stays silent', () => {
+        // JS binds parameters left to right: `(count, x = count) => …` reads
+        // the already-bound parameter, not the signal it shadows (verified
+        // against V8). Visiting every default before binding any parameter
+        // would flag this — a false positive on working code.
+        expect(bf044Of('<div className={((count2: unknown, x = count2) => String(x))(1)} />')).toHaveLength(0)
+        expect(bf044Of('<div className={((count: unknown, x = count) => String(x))(1)} />')).toHaveLength(0)
+      })
+
+      test('a later default reading an EARLIER pattern element stays silent', () => {
+        // The same left-to-right rule applies WITHIN a pattern.
+        //
+        // The declaration sits inside a NESTED block on purpose. At a function
+        // body's top level, `collectBlockDeclarations` pre-scans the whole
+        // `VariableStatement` and binds every name in the pattern up front,
+        // regardless of order — so a top-level version of this case passes
+        // even with the sequential threading removed, and pins nothing.
+        // `collectBlockDeclarations` does not descend into an `if` block, so
+        // here the only thing that can bind `c` before `x`'s default is read
+        // is `visitBindingDefaults` itself.
+        expect(bf044Of('<div className={(() => { if (obj) { const { count, x = count } = obj; return String(x) } return "" })()} />')).toHaveLength(0)
+      })
+
+      test('a literal default stays silent', () => {
+        // The overwhelmingly common shape (`{ size = 'md' }`): the default is
+        // not a reactive name, so widening the walk must not touch it.
+        expect(bf044Of(`<div className={(({ size = 'md' }: { size?: string }) => size)({})} />`)).toHaveLength(0)
+      })
+    })
+
+    test('does not misfire on a TYPE position', () => {
+      // A type is not a value. `({} as { count?: unknown })` in a rendered
+      // position used to read the type literal's property name as a bare
+      // reference to the same-named signal and refuse valid code.
+      expect(bf044Of('<div className={String(({} as { count?: unknown }).count)} />')).toHaveLength(0)
+    })
+
+    test('does not misfire on a nested element ATTRIBUTE NAME', () => {
+      // The walk stops at a nested JSX boundary. Without that guard, descending
+      // into a `.map()` body that returns JSX read the nested element's own
+      // attribute NAME (`checked=`) as a bare reference to the same-named
+      // signal — `transformNode` re-walks that element independently anyway.
+      const source = `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+
+        export function Boxes() {
+          const [checked, setChecked] = createSignal(false)
+          const [items, setItems] = createSignal([1, 2])
+          return <ul>{items().map(n => <li><input checked={checked()} /></li>)}</ul>
+        }
+      `
+      const bf044 = compileToIR(source).errors.filter(e => e.code === ErrorCodes.SIGNAL_GETTER_NOT_CALLED)
+      expect(bf044).toHaveLength(0)
+    })
+  })
 })

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/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/build-references.ts

@@ -302,6 +302,13 @@ export function buildReferencesGraph(ctx: ClientJsContext, irRoot: IRNode): Refe
         if (v && attr.value.kind !== 'literal') addExprEdges(ROOT_SOURCE, v, 'template-closure')
       }
       for (const ev of el.events) addExprEdges(ROOT_SOURCE, ev.handler, 'init-body')
+      // A `ref` callback runs in `initX`'s closure, same context as an event
+      // handler — not the template closure. Without this edge, a ref inside
+      // a loop nested past the top level (`elem.innerLoops`, never walked by
+      // Phase 1's dedicated ref traces) is invisible to reachability, so
+      // `computeDeclarationScopes` (compute-scope.ts) drops its declaration
+      // as dead code while the emitter still emits the call site (#2750).
+      if (el.ref) addExprEdges(ROOT_SOURCE, el.ref, 'init-body')
       descend()
     },
     component: ({ node: c, descend, descendJsxChildren }) => {

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/plan/build-component-loop.ts

@@ -26,9 +26,10 @@ import {
   isTextOnlyConditional,
   buildChildRefBindings,
 } from '../shared.ts'
-import { irChildrenToJsExpr } from '../../html-template.ts'
+import { irChildrenToJsExpr, renderPreamble } from '../../html-template.ts'
 import { buildReactiveEffectsPlan } from './build-reactive-effects.ts'
 import type { ComponentLoopPlan, NestedComponentInit } from './types.ts'
+import { internalInvariant } from '../../../errors.ts'
 
 /** @internal — prefer `buildLoopPlan`. */
 export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?: string): ComponentLoopPlan {
@@ -37,6 +38,22 @@ export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?
   const keyExpr = wrapLoopParamAsAccessor(elem.key || '__idx', elem.param, elem.paramBindings)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings)
 
+  // A component-root loop's preamble is JS-only by construction: Phase 1
+  // (jsx-to-ir.ts) already refuses and strips any preamble with a JSX leaf
+  // (`builderNames.length > 0`) on this shape, because a lowered HTML-string
+  // leaf passed as a prop would diverge from SSR's real JSX elements — see
+  // `rowConstruction: 'dom-ops'` below. `renderLeaf` is therefore never
+  // reachable here; if it ever fires, a Phase-1 refusal for the new shape
+  // that let a JSX-bearing preamble through is missing, not this line.
+  const mapPreambleWrapped = elem.preamble
+    ? renderPreamble(elem.preamble, {
+        transformJs: text => wrapLoopParamAsAccessor(text, elem.param, elem.paramBindings),
+        renderLeaf: () => {
+          internalInvariant(false, 'component-root loop received a JSX-bearing preamble — Phase 1 should have refused it')
+        },
+      })
+    : ''
+
   // Only init components at loopDepth 0 — inner-loop components are handled by their own loop
   const outerNestedComps = (elem.nestedComponents ?? []).filter(c => !c.loopDepth)
   const nestedComps: NestedComponentInit[] = outerNestedComps.map(comp => {
@@ -64,6 +81,7 @@ export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?
     // prop would diverge from SSR (which passes real JSX elements). The plan
     // dispatcher refuses a JSX-bearing preamble on this variant.
     rowConstruction: 'dom-ops',
+    mapPreambleWrapped,
     containerVar: `_${varSlotId(elem.slotId)}`,
     markerId: elem.markerId,
     arrayExpr: buildChainedArrayExpr(elem),

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

@@ -77,6 +77,8 @@ interface DynamicLoopCommon extends LoopPlanCommon {
   paramHead: string
   /** Statement to unwrap a destructured param at body entry. Empty when not needed. */
   paramUnwrap: string
+  /** Pre-render preamble line (already wrapped with loop param accessor). Empty when none. */
+  mapPreambleWrapped: string
 }
 
 /**
@@ -117,8 +119,6 @@ export interface LoopChildRefBinding {
  */
 interface PlainLoopVariant extends DynamicLoopCommon {
   kind: 'plain'
-  /** Pre-render preamble line (already wrapped with loop param accessor). Empty when none. */
-  mapPreambleWrapped: string
   /** HTML template string for one item. */
   template: string
   /**
@@ -225,8 +225,6 @@ interface ComponentLoopVariant extends DynamicLoopCommon {
  */
 interface CompositeLoopVariant extends DynamicLoopCommon {
   kind: 'composite'
-  /** Wrapped mapPreamble line, hoisted before the SSR/CSR split. Empty when none. */
-  mapPreambleWrapped: string
   /** Inner template HTML for the loop body (single item). */
   template: string
   /** Outer-level child components (depth 0), with `insideConditional` ones already filtered out. */