@barefootjs/jsx 0.10.1 → 0.11.0

package/src/debug.ts

@@ -5,6 +5,7 @@
  * paths, and component reactive structure — all without running any code.
  */
 
+import ts from 'typescript'
 import type {
   ComponentIR,
   IRNode,
@@ -27,6 +28,7 @@ import { buildMetadata } from './compiler.ts'
 import { analyzeClientNeeds } from './ir-to-client-js/index.ts'
 import type { WrapReason } from './ir-to-client-js/reactivity.ts'
 import { decideWrapFromAstFlags } from './ir-to-client-js/reactivity.ts'
+import { tokenContainsIdent } from './ir-to-client-js/utils.ts'
 
 // =============================================================================
 // Types
@@ -274,7 +276,12 @@ export function buildComponentGraph(source: string, filePath: string, componentN
     errors: [],
   }
 
-  return buildGraphFromIR(componentIR)
+  const graph = buildGraphFromIR(componentIR)
+  // `findSourceFile` extracts the path from signal/memo/effect metadata; for
+  // components with no reactive state it returns '' because there are no
+  // located nodes. Fall back to the caller-supplied filePath so callers
+  // always get a non-empty sourceFile. (#1690 Bug A)
+  return graph.sourceFile ? graph : { ...graph, sourceFile: filePath }
 }
 
 /**
@@ -286,9 +293,73 @@ export function buildGraphFromIR(ir: ComponentIR): ComponentGraph {
   const memoNames = new Set(meta.memos.map(m => m.name))
   const signalSetters = new Map(meta.signals.filter(s => s.setter).map(s => [s.setter!, s.getter]))
 
+  // Does an attribute expression read a component prop? Mirrors the emitter's
+  // `needsEffectWrapper` prop gate (`reactivity.ts`):
+  //   - any individual destructured prop name (`{ className }` → `class={className}`),
+  //   - or a `<propsObject>.x` member access (`class={props.className}`),
+  // both excluding `children` (server-rendered, never wrapped). Detection is
+  // structural, not a raw-string regex: destructured names use the IR's
+  // lexer-resolved `freeIdentifiers` (falling back to the lexer-aware
+  // `tokenContainsIdent`), and the props-object case parses the expression and
+  // walks for a real `props.member` access — so a `props.` inside a string
+  // literal / comment can't false-match, and bare `props` (`id={props}`) or
+  // `props.children` are correctly NOT treated as reactive (matching the
+  // emitter, which only wraps `<propsObject>.<non-children>`).
+  //
+  // Prop-driven attribute bindings are wrapped in a `createEffect` by the
+  // emitter (and so emit a `#binding:<slot>` profiler id), but the debug-side
+  // collector only tracked signal/memo deps before — so those ids resolved to
+  // `(unresolved)` in `bf debug profile` (#1844 follow-up). Detecting prop reads
+  // here closes that emit↔analyzer gap.
+  const destructuredPropNames = new Set(meta.propsParams.map(p => p.name).filter(n => n !== 'children'))
+  const propsObjectName = meta.propsObjectName
+
+  // A binding often reads a prop *indirectly* through a local const:
+  // `const classes = `…${variant}…${size}…${className}``, then
+  // `<button class={classes}>` / `<Slot className={classes}>`. The emitter
+  // inlines `classes`, sees the prop reads, and wraps the binding in a
+  // `createEffect` (emitting `#binding:<slot>`) — but the expression's only free
+  // identifier is the local `classes`, so the direct prop check above misses it
+  // and the id resolves to `(unresolved)` (the Slot-composed-button case, #1863).
+  // Precompute every local const whose value transitively derives from a prop,
+  // so reading such a const counts as reading a prop. Module-level consts can't
+  // reach component props, so they fall out naturally.
+  const constByName = new Map(meta.localConstants.map(c => [c.name, c]))
+  const propDerivedConsts = new Set<string>()
+  {
+    const onStack = new Set<string>()
+    const derivesFromProp = (name: string): boolean => {
+      if (propDerivedConsts.has(name)) return true
+      const c = constByName.get(name)
+      if (!c?.freeIdentifiers || onStack.has(name)) return false
+      onStack.add(name)
+      let derived = false
+      for (const free of c.freeIdentifiers) {
+        if (destructuredPropNames.has(free) || free === propsObjectName || derivesFromProp(free)) {
+          derived = true
+          break
+        }
+      }
+      onStack.delete(name)
+      if (derived) propDerivedConsts.add(name)
+      return derived
+    }
+    for (const c of meta.localConstants) derivesFromProp(c.name)
+  }
+
+  const exprReadsProp = (expr: string, freeIds?: ReadonlySet<string>): boolean => {
+    for (const name of destructuredPropNames) {
+      if (freeIds ? freeIds.has(name) : tokenContainsIdent(expr, name)) return true
+    }
+    for (const name of propDerivedConsts) {
+      if (freeIds ? freeIds.has(name) : tokenContainsIdent(expr, name)) return true
+    }
+    return propsObjectName ? exprReadsPropMember(expr, propsObjectName) : false
+  }
+
   // Collect DOM bindings from IR tree
   const domBindings: DomBinding[] = []
-  collectDomBindings(ir.root, domBindings, signalGetters, memoNames)
+  collectDomBindings(ir.root, domBindings, signalGetters, memoNames, undefined, new Set(), exprReadsProp)
 
   // Build consumer lists for signals
   const signalConsumers = new Map<string, string[]>()
@@ -381,8 +452,8 @@ export function buildGraphFromIR(ir: ComponentIR): ComponentGraph {
  * Callers that need the raw IR tree (events, loops, why-update) use this
  * instead of `buildComponentGraph` to avoid a redundant analysis round.
  */
-export function buildComponentAnalysis(source: string, filePath: string, componentName?: string): ComponentAnalysis {
-  const ctx = analyzeComponent(source, filePath, componentName)
+export function buildComponentAnalysis(source: string, filePath: string, componentName?: string, program?: ts.Program): ComponentAnalysis {
+  const ctx = analyzeComponent(source, filePath, componentName, program)
   const emptyIR: ComponentIR = {
     version: '0.1',
     metadata: buildMetadata(ctx),
@@ -411,8 +482,8 @@ export function buildComponentAnalysis(source: string, filePath: string, compone
  * Build a complete event summary for a component, including setter resolution
  * and downstream update paths.
  */
-export function buildEventSummary(source: string, filePath: string, componentName?: string): EventSummary {
-  const { graph, ir } = buildComponentAnalysis(source, filePath, componentName)
+export function buildEventSummary(source: string, filePath: string, componentName?: string, program?: ts.Program): EventSummary {
+  const { graph, ir } = buildComponentAnalysis(source, filePath, componentName, program)
   const setterToSignal = new Map<string, string>()
   for (const s of ir.metadata.signals) {
     if (s.setter) setterToSignal.set(s.setter, s.getter)
@@ -1473,8 +1544,8 @@ export function formatFallbackExplanations(
 // Component Summary (hydration/size overview)
 // =============================================================================
 
-export function buildComponentSummary(source: string, filePath: string, componentName?: string): ComponentSummary {
-  const { graph, ir } = buildComponentAnalysis(source, filePath, componentName)
+export function buildComponentSummary(source: string, filePath: string, componentName?: string, program?: ts.Program): ComponentSummary {
+  const { graph, ir } = buildComponentAnalysis(source, filePath, componentName, program)
   const meta = ir.metadata
   const clientNeeds = analyzeClientNeeds(ir)
   const hasReactiveState = meta.signals.length > 0 || meta.memos.length > 0 || meta.effects.length > 0
@@ -1604,7 +1675,30 @@ function collectDomBindings(
   signalGetters: Set<string>,
   memoNames: Set<string>,
   parentTag?: string,
+  // Loop-param names in scope (#1690, #1795 Phase 2). Inside a `map(it => …)`
+  // body the emitter rewrites every `it.x` read into a reactive accessor and
+  // wraps the binding in `createEffect`, yet `it` is neither a signal nor a
+  // memo — so without this context loop-child text / attribute bindings are
+  // invisible to the graph. When a binding expression references one of these
+  // names it is treated as reactive (matching the emitter's gate), giving the
+  // profiler a `domBinding` (slotId + loc) to resolve `<Comp>#binding:<slotId>`.
+  loopParams: Set<string> = new Set(),
+  // Predicate: does an attribute expression read a component prop? Mirrors the
+  // emitter's `needsEffectWrapper` prop detection so a prop-driven attribute
+  // (wrapped in `createEffect` at codegen, hence emitting `#binding:<slot>`) is
+  // tracked here too — otherwise its profiler id resolves to `(unresolved)`.
+  readsProp: (expr: string, freeIds?: ReadonlySet<string>) => boolean = () => false,
 ): void {
+  // Does a loop-child binding read a loop param (or index)? Use the analyzer's
+  // lexer-resolved metadata, NOT a raw-string regex — so a param name that only
+  // appears inside a string literal (index `i` vs `'i'`) is not mistaken for a
+  // reactive read. Text expressions carry `origin.freeRefs` (a `render-item`
+  // kind == map-callback param); attributes carry `freeIdentifiers` (bare
+  // identifier set). This matches the emitter's actual loop-param gate.
+  const exprReadsLoopParam = (n: IRExpression): boolean =>
+    loopParams.size > 0 && (n.origin?.freeRefs?.some(r => loopParams.has(r.name)) ?? false)
+  const attrReadsLoopParam = (free: ReadonlySet<string> | undefined): boolean =>
+    loopParams.size > 0 && free !== undefined && [...loopParams].some(p => free.has(p))
   switch (node.type) {
     case 'element': {
       // Dynamic attribute bindings (style, class, aria-*, data-*, etc.)
@@ -1615,11 +1709,19 @@ function collectDomBindings(
       // deps list is the statically-proven-reactive case.
       for (const attr of node.attrs) {
         if (attr.value.kind !== 'expression' && attr.value.kind !== 'template' && attr.value.kind !== 'spread') continue
+        // `key` is consumed by the loop's keyFn, never emitted as an attribute
+        // effect — skip it inside loops so a `key={it.id}` read isn't mistaken
+        // for a reactive binding (matches `collectLoopChildBindings`).
+        if (attr.name === 'key' && loopParams.size > 0) continue
         const expr = attrValueToString(attr.value)
         if (!expr) continue
         const deps = extractReactiveDeps(expr, signalGetters, memoNames)
-        const isReactive = deps.length > 0
-        const wrapReason = inferWrapReasonForAttrLike(isReactive, false, attr)
+        const isReactive = deps.length > 0 || attrReadsLoopParam(attr.freeIdentifiers)
+        // A prop-driven attribute (`id={props.id}`, `class={`…${props.x}`}`) is
+        // wrapped in a `createEffect` by the emitter even with no signal/memo
+        // dep — match that gate so its `#binding:<slot>` id resolves.
+        const hasPropsRef = readsProp(expr, attr.freeIdentifiers)
+        const wrapReason = inferWrapReasonForAttrLike(isReactive, hasPropsRef, attr)
         if (wrapReason) {
           bindings.push({
             kind: 'dom',
@@ -1627,7 +1729,7 @@ function collectDomBindings(
             slotId: node.slotId ?? '?',
             deps,
             type: 'attribute',
-            classification: isReactive ? 'reactive' : 'fallback',
+            classification: isReactive || hasPropsRef ? 'reactive' : 'fallback',
             expression: expr,
             wrapReason,
             loc: attr.loc,
@@ -1653,7 +1755,7 @@ function collectDomBindings(
       }
       // Recurse — pass element tag as parent context for text bindings
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, node.tag)
+        collectDomBindings(child, bindings, signalGetters, memoNames, node.tag, loopParams, readsProp)
       }
       break
     }
@@ -1661,7 +1763,8 @@ function collectDomBindings(
       // Widened to match emitter gate in collect-elements.ts:
       // `node.reactive || node.callsReactiveGetters || node.hasFunctionCalls`.
       const decision = decideWrapFromAstFlags(node)
-      if (decision.wrap && node.slotId) {
+      const loopReactive = exprReadsLoopParam(node)
+      if ((decision.wrap || loopReactive) && node.slotId) {
         const deps = extractReactiveDeps(node.expr, signalGetters, memoNames)
         const preview = parentTag
           ? `<${parentTag}>{${truncateExpr(node.expr)}}</${parentTag}>`
@@ -1672,9 +1775,12 @@ function collectDomBindings(
           slotId: node.slotId,
           deps,
           type: 'text',
-          classification: decision.reason === 'proven-reactive' ? 'reactive' : 'fallback',
+          classification:
+            (decision.wrap && decision.reason === 'proven-reactive') || loopReactive
+              ? 'reactive'
+              : 'fallback',
           expression: node.expr,
-          wrapReason: decision.reason,
+          wrapReason: decision.wrap ? decision.reason : 'string-reactive',
           loc: node.loc,
           jsxPreview: preview,
         })
@@ -1683,7 +1789,12 @@ function collectDomBindings(
     }
     case 'conditional': {
       const decision = decideWrapFromAstFlags(node)
-      if (decision.wrap && node.slotId) {
+      // A loop-child conditional whose condition reads a loop param is reactive
+      // (the emitter wraps its `insert()` in a per-item effect) even though the
+      // param is neither signal nor memo. Use the resolved `origin.freeRefs`.
+      const loopReactive =
+        loopParams.size > 0 && (node.origin?.freeRefs?.some(r => loopParams.has(r.name)) ?? false)
+      if ((decision.wrap || loopReactive) && node.slotId) {
         const deps = extractReactiveDeps(node.condition, signalGetters, memoNames)
         bindings.push({
           kind: 'dom',
@@ -1691,15 +1802,18 @@ function collectDomBindings(
           slotId: node.slotId,
           deps,
           type: 'conditional',
-          classification: decision.reason === 'proven-reactive' ? 'reactive' : 'fallback',
+          classification:
+            (decision.wrap && decision.reason === 'proven-reactive') || loopReactive
+              ? 'reactive'
+              : 'fallback',
           expression: node.condition,
-          wrapReason: decision.reason,
+          wrapReason: decision.wrap ? decision.reason : 'string-reactive',
           loc: node.loc,
           jsxPreview: `{${truncateExpr(node.condition)} ? ... : ...}`,
         })
       }
-      collectDomBindings(node.whenTrue, bindings, signalGetters, memoNames, parentTag)
-      collectDomBindings(node.whenFalse, bindings, signalGetters, memoNames, parentTag)
+      collectDomBindings(node.whenTrue, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
+      collectDomBindings(node.whenFalse, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
       break
     }
     case 'loop': {
@@ -1710,7 +1824,13 @@ function collectDomBindings(
       // (e.g. `getItems().map(...)` with an opaque helper).
       if (node.slotId) {
         const deps = extractReactiveDeps(node.array, signalGetters, memoNames)
-        const isReactive = deps.length > 0 || node.callsReactiveGetters === true
+        // An inner loop whose array reads an outer loop param (`r.tags.map(...)`)
+        // is reactive per item — use the resolved `arrayFreeIdentifiers`.
+        const loopReactive =
+          loopParams.size > 0 &&
+          node.arrayFreeIdentifiers !== undefined &&
+          [...loopParams].some(p => node.arrayFreeIdentifiers!.has(p))
+        const isReactive = deps.length > 0 || node.callsReactiveGetters === true || loopReactive
         const isFallback = !isReactive && node.hasFunctionCalls === true
         if (isReactive || isFallback) {
           // IRLoop has no `.reactive` flag (unlike IRExpression/IRConditional),
@@ -1719,7 +1839,7 @@ function collectDomBindings(
           // getter (`items()` where `items` is a signal) is proven-reactive,
           // not fallback — flip the string evidence before handing the AST
           // flags to the helper.
-          const wrapReason: WrapReason = deps.length > 0
+          const wrapReason: WrapReason = deps.length > 0 || loopReactive
             ? 'string-reactive'
             : node.callsReactiveGetters
               ? 'proven-reactive'
@@ -1738,8 +1858,12 @@ function collectDomBindings(
           })
         }
       }
+      // Loop-param names enter scope for the children (#1690, #1795 Phase 2).
+      const childLoopParams = new Set(loopParams)
+      for (const p of extractLoopParamNames(node.param, node)) childLoopParams.add(p)
+      if (node.index) childLoopParams.add(node.index)
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, childLoopParams, readsProp)
       }
       break
     }
@@ -1751,7 +1875,13 @@ function collectDomBindings(
         const propValue = attrValueToString(prop.value) ?? ''
         if (!propValue) continue
         const deps = extractReactiveDeps(propValue, signalGetters, memoNames)
-        const hasPropsRef = propValue.includes('props.')
+        // Mirror the element-attr gate: a child prop is wrapped (and emits
+        // `#binding:<slot>`) when it reads a prop directly or via a prop-derived
+        // local const (`<Slot className={classes}>`). The previous
+        // `includes('props.')` check missed both destructured props and the
+        // local-const indirection, leaving the forwarded binding `(unresolved)`
+        // (#1863).
+        const hasPropsRef = readsProp(propValue, prop.freeIdentifiers)
         const isReactive = deps.length > 0 || hasPropsRef
         const wrapReason = inferWrapReasonForAttrLike(deps.length > 0, hasPropsRef, prop)
         if (wrapReason) {
@@ -1772,21 +1902,21 @@ function collectDomBindings(
         }
       }
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
       }
       break
     }
     case 'fragment':
     case 'provider': {
       for (const child of node.children) {
-        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag)
+        collectDomBindings(child, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
       }
       break
     }
     case 'if-statement': {
-      collectDomBindings(node.consequent, bindings, signalGetters, memoNames, parentTag)
+      collectDomBindings(node.consequent, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
       if (node.alternate) {
-        collectDomBindings(node.alternate, bindings, signalGetters, memoNames, parentTag)
+        collectDomBindings(node.alternate, bindings, signalGetters, memoNames, parentTag, loopParams, readsProp)
       }
       break
     }
@@ -1798,6 +1928,40 @@ function truncateExpr(expr: string, max: number = 40): string {
   return s.length > max ? s.slice(0, max - 1) + '…' : s
 }
 
+/**
+ * True when `expr` contains a genuine `<propsObject>.<member>` property access
+ * with `member !== 'children'` — the emitter's prop gate for the props object
+ * (`needsEffectWrapper`, `reactivity.ts`). Parses the expression rather than
+ * regex-matching the raw string, so a `props.` inside a string literal/comment
+ * doesn't false-match, and bare `props` / `props.children` are excluded. Parse
+ * failures (e.g. an attribute expression carrying JSX) fall back to `false` —
+ * conservative: we never invent a binding the emitter wouldn't wrap.
+ */
+function exprReadsPropMember(expr: string, propsObjectName: string): boolean {
+  let sf: ts.SourceFile
+  try {
+    sf = ts.createSourceFile('__attr.tsx', `(${expr})`, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
+  } catch {
+    return false
+  }
+  let found = false
+  const visit = (n: ts.Node): void => {
+    if (found) return
+    if (
+      ts.isPropertyAccessExpression(n) &&
+      ts.isIdentifier(n.expression) &&
+      n.expression.text === propsObjectName &&
+      n.name.text !== 'children'
+    ) {
+      found = true
+      return
+    }
+    ts.forEachChild(n, visit)
+  }
+  visit(sf)
+  return found
+}
+
 /** Convert an `AttrValue` to a flat string for reactive dep extraction. */
 function attrValueToString(value: AttrValue): string | null {
   switch (value.kind) {

package/src/expression-parser.ts

@@ -476,6 +476,59 @@ export function extractArrowBodyExpression(source: string): string | null {
   return expr.body.getText(sf).trim()
 }
 
+/**
+ * A single entry of a JSX `style={{ … }}` object, lowered for SSR. The key is
+ * already CSS-cased (`backgroundColor` → `background-color`); the value is
+ * either a static string literal or a raw JS expression for the adapter to
+ * lower (`color` → its template interpolation).
+ */
+export type StyleObjectEntry =
+  | { cssKey: string; kind: 'literal'; value: string }
+  | { cssKey: string; kind: 'expr'; expr: string }
+
+/** camelCase → kebab-case for CSS property names (`backgroundColor` →
+ *  `background-color`, `WebkitTransform` → `-webkit-transform`). The `ms`
+ *  vendor prefix is lowercase in React style keys (`msTransform`) yet the CSS
+ *  property carries a leading dash (`-ms-transform`), so special-case it the
+ *  same way React's `hyphenateStyleName` does. */
+export function cssKebabCase(name: string): string {
+  return name.replace(/[A-Z]/g, m => '-' + m.toLowerCase()).replace(/^ms-/, '-ms-')
+}
+
+/**
+ * Parse a JSX `style={{ … }}` object-literal source into CSS entries, or
+ * `null` when the shape isn't a plain object of static-keyed properties
+ * (spread, computed key, shorthand, method, getter) — the adapter then keeps
+ * refusing it. A bare `{…}` parses as a block statement, so the source is
+ * wrapped in parens to force expression context. Used by the template adapters
+ * to lower `style={{ backgroundColor: color, padding: '8px' }}` to a CSS
+ * string instead of emitting BF101.
+ */
+export function parseStyleObjectEntries(source: string): StyleObjectEntry[] | null {
+  const sf = ts.createSourceFile('__style__.ts', `(${source})`, ts.ScriptTarget.Latest, true)
+  const stmt = sf.statements[0]
+  if (!stmt || !ts.isExpressionStatement(stmt) || sf.statements.length !== 1) return null
+  let expr: ts.Expression = stmt.expression
+  while (ts.isParenthesizedExpression(expr)) expr = expr.expression
+  if (!ts.isObjectLiteralExpression(expr)) return null
+  const entries: StyleObjectEntry[] = []
+  for (const prop of expr.properties) {
+    if (!ts.isPropertyAssignment(prop)) return null // shorthand/spread/method/getter
+    let key: string
+    if (ts.isIdentifier(prop.name)) key = prop.name.text
+    else if (ts.isStringLiteral(prop.name)) key = prop.name.text
+    else return null // computed / numeric key
+    const cssKey = cssKebabCase(key)
+    const init = prop.initializer
+    if (ts.isStringLiteral(init) || ts.isNoSubstitutionTemplateLiteral(init)) {
+      entries.push({ cssKey, kind: 'literal', value: init.text })
+    } else {
+      entries.push({ cssKey, kind: 'expr', expr: init.getText(sf).trim() })
+    }
+  }
+  return entries.length > 0 ? entries : null
+}
+
 /**
  * Parse a JavaScript expression string into a ParsedExpr tree.
  */

package/src/index.ts

@@ -59,6 +59,9 @@ export { generateModuleExports, extractFunctionParams, formatParamWithType, find
 
 // Adapters
 export { BaseAdapter } from './adapters/interface.ts'
+// Dependency-free adapter for tooling that only needs client JS (e.g. the
+// profiler scenario driver) — the client output is adapter-independent.
+export { TestAdapter, testAdapter } from './adapters/test-adapter.ts'
 export type {
   TemplateAdapter,
   AdapterOutput,
@@ -244,10 +247,12 @@ export {
 export { ErrorCodes, createError, formatError, generateCodeFrame } from './errors.ts'
 
 // Expression Parser
-export { parseExpression, isSupported, exprToString, stringifyParsedExpr, identifierPath, parseBlockBody, containsHigherOrder, extractArrowBodyExpression } from './expression-parser.ts'
+export { parseExpression, isSupported, exprToString, stringifyParsedExpr, identifierPath, parseBlockBody, containsHigherOrder, extractArrowBodyExpression, parseStyleObjectEntries } from './expression-parser.ts'
+export type { StyleObjectEntry } from './expression-parser.ts'
 export type { ParsedExpr, ParsedStatement, SortComparator, SortKey, ReduceOp, FlatDepth, FlatMapOp, FlatMapLeaf, SupportLevel, SupportResult, TemplatePart } from './expression-parser.ts'
 export { buildLoopChainExpr } from './loop-chain.ts'
 export type { LoopChainInputs } from './loop-chain.ts'
+export { isLowerableObjectRestDestructure } from './loop-destructure.ts'
 
 // Debug analysis
 export {
@@ -277,6 +282,72 @@ export {
 export type { ComponentGraph, ComponentAnalysis, SignalNode, MemoNode, EffectNode, DomBinding, UpdatePath, SignalTrace, EventBinding, SetterRef, FnSetterResolution, EventSummary, LoopInfo, LoopChildBinding, LoopSummary, WhyUpdateResult, WhyUpdateDep, WhyUpdateSource, FallbackExplanation, ComponentSummary } from './debug.ts'
 export type { WrapReason } from './ir-to-client-js/reactivity.ts'
 
+// Reactive performance profiler (#1690). Static half (SR5 budget, SR6 diff) +
+// dynamic half (SR2/SR4 join, SR7 report, v1 analyses).
+export {
+  buildStaticBudget,
+  formatStaticBudget,
+  diffStaticBudget,
+  formatBudgetDiff,
+  buildProfileReport,
+  formatProfileReport,
+  buildIdIndex,
+  joinProfilerEvents,
+  parseProfilerId,
+  analyzeHotSubscribers,
+  formatHotSubscribers,
+  findUninstrumentedEffects,
+  analyzeWastedReReruns,
+  formatWastedReReruns,
+  analyzeBatchAdvisor,
+  formatBatchAdvisor,
+} from './profiler.ts'
+export type {
+  StaticBudget,
+  StaticBudgetOptions,
+  FanOutEntry,
+  BudgetDiff,
+  FanOutChange,
+  ProfileReport,
+  ProfileReportInput,
+  ProfileCoverage,
+  DiagnosticsSummary,
+  EffectCandidate,
+  IdIndex,
+  ResolvedNode,
+  JoinResult,
+  JoinedEvent,
+  UnattributedId,
+  HotSubscribersResult,
+  HotSubscriber,
+  HotSubscribersOptions,
+  WastedReRunsResult,
+  WastedSubscriber,
+  WastedReRunsOptions,
+  BatchAdvisorResult,
+  BatchCandidate,
+  BatchSafety,
+} from './profiler.ts'
+
+// Reactive profile — findings layer (#1690 dogfood: Bug A/C/D fixes, batch-candidate dedup,
+// fallback-heavy detection, multi-component table, SR6 compile-diff).
+export {
+  buildReactiveProfile,
+  buildProfileFromGraph,
+  diffProfiles,
+  formatSingleProfile,
+  formatProfileTable,
+  formatProfileDiff,
+  profileToJSON,
+} from './debug-profile.ts'
+export type {
+  ComponentProfile,
+  ComponentProfileMetrics,
+  ProfileFinding,
+  ProfileDiff,
+  ProfileDiffEntry,
+} from './debug-profile.ts'
+
 // HTML constants
 export { BOOLEAN_ATTRS, isBooleanAttr } from './html-constants.ts'
 

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

@@ -70,6 +70,12 @@ export interface BranchPlainLoopPlan {
    * multi-line renderItem with multi-root template clone (#1212).
    */
   bodyIsMultiRoot: boolean
+  /**
+   * Profile-mode loop id (#1690, #1795 Phase 3): `<Component>#binding:<slotId>`
+   * for the branch loop's `mapArray` (the loop node shares its container slot).
+   * Undefined off → byte-identical (SR8).
+   */
+  profileLoopId?: string
 }
 
 export interface BranchCompositeLoopPlan {

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

@@ -22,7 +22,7 @@ import type {
   BranchPlainLoopPlan,
 } from './branch-loop.ts'
 
-export function buildBranchLoopPlan(loop: BranchLoop): BranchLoopPlan {
+export function buildBranchLoopPlan(loop: BranchLoop, profileComponentName?: string): BranchLoopPlan {
   const containerSlotId = loop.containerSlotId
   const cv = varSlotId(containerSlotId)
   const containerVar = `__loop_${cv}`
@@ -30,7 +30,7 @@ export function buildBranchLoopPlan(loop: BranchLoop): BranchLoopPlan {
   if (loop.useElementReconciliation && (loop.nestedComponents?.length || loop.innerLoops?.length)) {
     const composite: BranchCompositeLoopPlan = {
       kind: 'composite',
-      composite: buildBranchCompositePlan(loop, cv),
+      composite: buildBranchCompositePlan(loop, cv, profileComponentName),
       containerSlotId,
       containerVar,
     }
@@ -65,11 +65,13 @@ export function buildBranchLoopPlan(loop: BranchLoop): BranchLoopPlan {
           conditionals: loop.bindings.conditionals,
           loopParam: loop.param,
           loopParamBindings: loop.paramBindings,
+          profileComponentName,
         })
       : null,
-    eventDelegation: buildBranchLoopDelegationPlan(loop, cv),
+    eventDelegation: buildBranchLoopDelegationPlan(loop, cv, profileComponentName),
     childRefs: buildChildRefBindings(loop.bindings.refs, loop.param, loop.paramBindings),
     bodyIsMultiRoot: loop.bodyIsMultiRoot ?? false,
+    profileLoopId: profileComponentName ? `${profileComponentName}#binding:${containerSlotId}` : undefined,
   }
   return plan
 }

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

@@ -31,7 +31,7 @@ import { buildReactiveEffectsPlan } from './build-reactive-effects.ts'
 import type { ComponentLoopPlan, NestedComponentInit } from './types.ts'
 
 /** @internal — prefer `buildLoopPlan`. */
-export function buildComponentLoopPlan(elem: TopLevelLoop): ComponentLoopPlan {
+export function buildComponentLoopPlan(elem: TopLevelLoop, profileComponentName?: string): ComponentLoopPlan {
   const { name } = elem.childComponent!
   const propsExpr = buildComponentPropsExpr(elem.childComponent!, elem.param)
   const keyExpr = wrapLoopParamAsAccessor(elem.key || '__idx', elem.param, elem.paramBindings)
@@ -77,6 +77,7 @@ export function buildComponentLoopPlan(elem: TopLevelLoop): ComponentLoopPlan {
     // by the type so the structural invariant (every variant has a
     // `childRefs`) is preserved; populated as empty.
     childRefs: buildChildRefBindings(elem.bindings.refs, elem.param, elem.paramBindings),
+    profileLoopId: profileComponentName ? `${profileComponentName}#binding:${elem.slotId}` : undefined,
     childConditionalEffects: hasChildConds
       ? buildReactiveEffectsPlan({
           attrs: [],
@@ -84,6 +85,7 @@ export function buildComponentLoopPlan(elem: TopLevelLoop): ComponentLoopPlan {
           conditionals: elem.bindings.conditionals,
           loopParam: elem.param,
           loopParamBindings: elem.paramBindings,
+          profileComponentName,
         })
       : null,
   }

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

@@ -26,7 +26,7 @@ import { buildInnerLoopsPlan } from './build-inner-loop.ts'
 import type { CompositeLoopPlan } from './types.ts'
 
 /** @internal — prefer `buildLoopPlan`. */
-export function buildTopLevelCompositePlan(elem: TopLevelLoop): CompositeLoopPlan {
+export function buildTopLevelCompositePlan(elem: TopLevelLoop, profileComponentName?: string): CompositeLoopPlan {
   const nestedComps = elem.nestedComponents!
   const depthLevels = buildDepthLevels(elem.innerLoops ?? [], nestedComps, elem.bindings.events)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(elem.param, elem.paramBindings)
@@ -63,16 +63,19 @@ export function buildTopLevelCompositePlan(elem: TopLevelLoop): CompositeLoopPla
           conditionals: elem.bindings.conditionals,
           loopParam: elem.param,
           loopParamBindings: elem.paramBindings,
+          profileComponentName,
         })
       : null,
     branchClearChildren: false,
     topIndent: '  ',
     bodyIndent: '    ',
     bodyIsMultiRoot: elem.bodyIsMultiRoot ?? false,
+    profileLoopId: profileComponentName ? `${profileComponentName}#binding:${elem.slotId}` : undefined,
+    profileComponentName,
   }
 }
 
-export function buildBranchCompositePlan(loop: BranchLoop, cv: string): CompositeLoopPlan {
+export function buildBranchCompositePlan(loop: BranchLoop, cv: string, profileComponentName?: string): CompositeLoopPlan {
   const nestedComps = loop.nestedComponents!
   const innerLoops = loop.innerLoops ?? []
   const childEvents = loop.bindings.events
@@ -114,12 +117,15 @@ export function buildBranchCompositePlan(loop: BranchLoop, cv: string): Composit
           conditionals: loop.bindings.conditionals,
           loopParam: loop.param,
           loopParamBindings: loop.paramBindings,
+          profileComponentName,
         })
       : null,
     branchClearChildren: true,
     topIndent: '      ',
     bodyIndent: '        ',
     bodyIsMultiRoot: loop.bodyIsMultiRoot ?? false,
+    profileLoopId: profileComponentName ? `${profileComponentName}#binding:${loop.containerSlotId}` : undefined,
+    profileComponentName,
   }
 }