@barefootjs/jsx 0.10.1 → 0.12.0

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

@@ -30,7 +30,7 @@
  *     <indent>}) }
  */
 
-import { keyAttrName } from '../../utils.ts'
+import { keyAttrName, profileBindingId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { emitMultiRootTemplateCloneLines } from './template-parse.ts'
@@ -44,17 +44,18 @@ export function stringifyInnerLoops(
   lines: string[],
   plan: InnerLoopsPlan,
   indent: string,
+  pc?: string,
 ): void {
   for (const inner of plan) {
     if (inner.emit.mode === 'reactive') {
-      emitReactive(lines, inner, indent)
+      emitReactive(lines, inner, indent, pc)
     } else {
-      emitStatic(lines, inner, indent)
+      emitStatic(lines, inner, indent, pc)
     }
   }
 }
 
-function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string): void {
+function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string, pc: string | undefined): void {
   const uid = inner.uidSuffix
   const emit = inner.emit
   if (emit.mode !== 'reactive') return // narrow
@@ -98,16 +99,17 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string): vo
     )
   }
   if (inner.childLevels.length > 0) {
-    stringifyInnerLoops(lines, inner.childLevels, `${indent}  `)
+    stringifyInnerLoops(lines, inner.childLevels, `${indent}  `, pc)
   }
   for (const text of emit.reactiveTexts) {
+    const bf = profileBindingId(pc, text.slotId)
     if (text.insideConditional) {
       // Re-query $t inside the effect: insert() may swap the text node so a
       // captured reference would silently stop updating.
-      lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__innerEl${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) })`)
+      lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__innerEl${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) }${bf})`)
     } else {
       lines.push(`${indent}  { const [__rt] = $t(__innerEl${uid}, '${text.slotId}')`)
-      lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }) }`)
+      lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }${bf}) }`)
     }
   }
   for (const attr of emit.reactiveAttrs) {
@@ -117,7 +119,7 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string): vo
     for (const stmt of emitAttrUpdate(targetVar, attr.attrName, attr.wrappedExpression, attr.meta)) {
       lines.push(`${indent}    ${stmt}`)
     }
-    lines.push(`${indent}  }) }`)
+    lines.push(`${indent}  }${profileBindingId(pc, attr.slotId)}) }`)
   }
   // Imperative ref callbacks fire on every renderItem invocation, which
   // means every mount: SSR hydration, initial CSR creation, and same-key
@@ -128,10 +130,10 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string): vo
     bodyIsMultiRoot: emit.bodyIsMultiRoot,
   })
   lines.push(`${indent}  return __innerEl${uid}`)
-  lines.push(`${indent}}, '${inner.markerId}') }`)
+  lines.push(`${indent}}, '${inner.markerId}'${profileBindingId(pc, inner.slotId)}) }`)
 }
 
-function emitStatic(lines: string[], inner: InnerLoopPlan, indent: string): void {
+function emitStatic(lines: string[], inner: InnerLoopPlan, indent: string, pc: string | undefined): void {
   const uid = inner.uidSuffix
   const emit = inner.emit
   if (emit.mode !== 'static') return
@@ -161,7 +163,7 @@ function emitStatic(lines: string[], inner: InnerLoopPlan, indent: string): void
     inner.outerLoopParamBindings,
   )
   if (inner.childLevels.length > 0) {
-    stringifyInnerLoops(lines, inner.childLevels, `${indent}  `)
+    stringifyInnerLoops(lines, inner.childLevels, `${indent}  `, pc)
   }
   // Imperative ref callbacks for static inner loops — fire once per
   // forEach iteration (#1244). Static arrays don't reactively re-iterate,

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

@@ -51,11 +51,17 @@ export function stringifyInsert(
   const scopeVar = scopeRefToVar(plan.scope)
   const armIndent = leadingIndent + '  '
 
+  // Profile mode (#1690, SR4): give the conditional's `insert()` effect an id
+  // so the profiler attributes its re-runs to source (resolved from the
+  // `conditional` domBinding). Empty when off → byte-identical (SR8).
+  const condBfId = plan.profileComponentName
+    ? `, ${JSON.stringify(`${plan.profileComponentName}#binding:${plan.slotId}`)}`
+    : ''
   lines.push(`${leadingIndent}insert(${scopeVar}, '${plan.slotId}', () => ${plan.condition}, {`)
-  emitArm(lines, plan.arms[0], plan.eventNameMode, armIndent, bodyIndent)
+  emitArm(lines, plan.arms[0], plan.eventNameMode, armIndent, bodyIndent, plan.profileComponentName)
   lines.push(`${leadingIndent}}, {`)
-  emitArm(lines, plan.arms[1], plan.eventNameMode, armIndent, bodyIndent)
-  lines.push(`${leadingIndent}})`)
+  emitArm(lines, plan.arms[1], plan.eventNameMode, armIndent, bodyIndent, plan.profileComponentName)
+  lines.push(`${leadingIndent}}${condBfId})`)
 }
 
 function emitArm(
@@ -64,6 +70,7 @@ function emitArm(
   mode: 'dom' | 'raw',
   armIndent: string,
   bodyIndent: string,
+  profileComponentName?: string,
 ): void {
   // `__slots` accumulates live `Node` returns captured by `__bfSlot` so
   // the `insert()` runtime can splice them into the parsed fragment
@@ -72,7 +79,7 @@ function emitArm(
   // wrappers around Child-position interpolations under this var name.
   lines.push(`${armIndent}template: () => { const __slots = []; return { html: \`${arm.templateHtml}\`, slots: __slots } },`)
   lines.push(`${armIndent}bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  emitArmBody(lines, arm.body, mode, bodyIndent)
+  emitArmBody(lines, arm.body, mode, bodyIndent, profileComponentName)
   lines.push(`${armIndent}}`)
 }
 
@@ -81,7 +88,12 @@ function emitArmBody(
   body: ArmBody,
   mode: 'dom' | 'raw',
   indent: string,
+  profileComponentName?: string,
 ): void {
+  // Profile mode (#1690, SR4): a branch binding effect's id, resolved from its
+  // text/attribute `domBinding`. Empty when off → byte-identical (SR8).
+  const bindingBfId = (slotId: string): string =>
+    profileComponentName ? `, ${JSON.stringify(`${profileComponentName}#binding:${slotId}`)}` : ''
   // 1. Combine event-bearing slots and ref slots into a single `$()` query.
   //    Order: events-first, then refs (matches legacy emitter).
   const allSlotIds = new Set<string>()
@@ -105,7 +117,7 @@ function emitArmBody(
   for (const [slotId, slotEvents] of eventsBySlot) {
     const v = varSlotId(slotId)
     for (const ev of slotEvents) {
-      emitListenerLine(lines, indent, `_${v}`, ev.eventName, ev.handler, mode)
+      emitListenerLine(lines, indent, `_${v}`, ev.eventName, ev.handler, mode, ev.turnId)
     }
   }
 
@@ -156,7 +168,7 @@ function emitArmBody(
       for (const stmt of emitAttrUpdate(elVar, attr.attrName, attr.expression, attr)) {
         lines.push(`${indent}    ${stmt}`)
       }
-      lines.push(`${indent}  }))`)
+      lines.push(`${indent}  }${bindingBfId(slotId)}))`)
     }
     lines.push(`${indent}} }`)
   }
@@ -172,7 +184,7 @@ function emitArmBody(
     lines.push(`${indent}__disposers.push(createDisposableEffect(() => {`)
     lines.push(`${indent}  const __val = ${te.expression}`)
     lines.push(`${indent}  __anchor_${v} = __bfText(__anchor_${v}, __val)`)
-    lines.push(`${indent}}))`)
+    lines.push(`${indent}}${bindingBfId(te.slotId)}))`)
   }
 
   // Branch loops, now fully Plan-built. The stringifier writes its own

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 } from '../../utils.ts'
+import { varSlotId, DATA_BF_PH, keyAttrName, profileBindingId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
 import { templateRootIsSvg } from './template-parse.ts'
 import { emitListenerLine } from './event-listener.ts'
@@ -44,7 +44,7 @@ export function stringifyBranchEventBindings(
     // nearest bf-s and miss descendants in that case.
     lines.push(`${indent}{ const _${v} = qsa(__branchScope, '[bf="${slot.slotId}"]')`)
     for (const ev of slot.listeners) {
-      emitListenerLine(lines, `${indent}  `, `_${v}`, ev.eventName, ev.wrappedHandler)
+      emitListenerLine(lines, `${indent}  `, `_${v}`, ev.eventName, ev.wrappedHandler, 'dom', ev.turnId)
     }
     lines.push(`${indent}}`)
   }
@@ -80,6 +80,7 @@ export function stringifyBranchInnerLoops(
   lines: string[],
   plan: BranchInnerLoopsPlan,
   indent: string,
+  pc?: string,
 ): void {
   for (const inner of plan) {
     const uid = inner.uidSuffix
@@ -110,20 +111,21 @@ export function stringifyBranchInnerLoops(
       )
     }
     for (const text of inner.reactiveTexts) {
+      const bf = profileBindingId(pc, text.slotId)
       if (text.insideConditional) {
         // Re-query $t inside the effect: insert() may swap the text node so a
         // captured reference would silently stop updating.
-        lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__bel${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) })`)
+        lines.push(`${indent}  createEffect(() => { const [__rt] = $t(__bel${uid}, '${text.slotId}'); if (__rt) __rt.textContent = String(${text.wrappedExpression}) }${bf})`)
       } else {
         lines.push(`${indent}  { const [__rt] = $t(__bel${uid}, '${text.slotId}')`)
-        lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }) }`)
+        lines.push(`${indent}  if (__rt) createEffect(() => { __rt.textContent = String(${text.wrappedExpression}) }${bf}) }`)
       }
     }
     if (inner.nestedConditionals.length > 0) {
-      stringifyLoopChildConditionals(lines, inner.nestedConditionals, `${indent}  `)
+      stringifyLoopChildConditionals(lines, inner.nestedConditionals, `${indent}  `, pc)
     }
     lines.push(`${indent}  return __bel${uid}`)
-    lines.push(`${indent}}, '${inner.markerId}') }`)
+    lines.push(`${indent}}, '${inner.markerId}'${profileBindingId(pc, inner.slotId)}) }`)
   }
 }
 
@@ -138,9 +140,10 @@ export function stringifyLoopChildConditionals(
   lines: string[],
   conditionals: readonly LoopChildConditionalPlan[],
   indent: string,
+  pc?: string,
 ): void {
   for (const cond of conditionals) {
-    stringifyLoopChildConditional(lines, cond, indent)
+    stringifyLoopChildConditional(lines, cond, indent, pc)
   }
 }
 
@@ -148,6 +151,7 @@ function stringifyLoopChildConditional(
   lines: string[],
   cond: LoopChildConditionalPlan,
   indent: string,
+  pc: string | undefined,
 ): void {
   const armIndent = `${indent}    `
   // Body-form arrows wire `__bfSlot` captures into the runtime so live
@@ -157,28 +161,29 @@ function stringifyLoopChildConditional(
   lines.push(`${indent}insert(${cond.scopeVar}, '${cond.slotId}', () => ${cond.wrappedCondition}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenTrueTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  stringifyLoopChildArm(lines, cond.whenTrueArm, armIndent)
+  stringifyLoopChildArm(lines, cond.whenTrueArm, armIndent, pc)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenFalseTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  stringifyLoopChildArm(lines, cond.whenFalseArm, armIndent)
+  stringifyLoopChildArm(lines, cond.whenFalseArm, armIndent, pc)
   lines.push(`${indent}  }`)
-  lines.push(`${indent}})`)
+  lines.push(`${indent}}${profileBindingId(pc, cond.slotId)})`)
 }
 
 function stringifyLoopChildArm(
   lines: string[],
   arm: LoopChildArmPlan,
   armIndent: string,
+  pc: string | undefined,
 ): void {
   stringifyBranchEventBindings(lines, arm.events, armIndent)
   stringifyBranchChildComponentInits(lines, arm.childComponents, armIndent)
-  stringifyBranchInnerLoops(lines, arm.innerLoops, armIndent)
-  stringifyLoopChildConditionals(lines, arm.nestedConditionals, armIndent)
+  stringifyBranchInnerLoops(lines, arm.innerLoops, armIndent, pc)
+  stringifyLoopChildConditionals(lines, arm.nestedConditionals, armIndent, pc)
   for (const text of arm.texts) {
     const varName = `__rt_${varSlotId(text.slotId)}`
     lines.push(`${armIndent}{ const [${varName}] = $t(__branchScope, '${text.slotId}')`)
-    lines.push(`${armIndent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }) }`)
+    lines.push(`${armIndent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}) }`)
   }
 }

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

@@ -24,7 +24,7 @@
  * passed in via `topIndent`.
  */
 
-import { emitRefCall, varSlotId } from '../../utils.ts'
+import { emitRefCall, varSlotId, profileBindingId } from '../../utils.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { stringifyReactiveEffects } from './reactive-effects.ts'
 import { emitTemplateCloneInline, emitLoopItemElementSetup } from './template-parse.ts'
@@ -136,13 +136,14 @@ export function stringifyPlainLoop(
   // `childRefs` need `__el` as a handle to invoke the user's callback inside
   // the factory, so non-empty refs force the multi-line layout the same way
   // reactive effects do (#1244).
+  const loopBfId = plan.profileLoopId ? `, ${JSON.stringify(plan.profileLoopId)}` : ''
   if (reactiveEffects === null && !bodyIsMultiRoot && childRefs.length === 0) {
     // Single-line renderItem (no reactive effects, single root, no refs).
     const unwrapInline = paramUnwrap ? `${paramUnwrap} ` : ''
     const preamble = mapPreambleWrapped ? `${mapPreambleWrapped}; ` : ''
     const cloneExpr = emitTemplateCloneInline(template)
     lines.push(
-      `${topIndent}mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => { ${unwrapInline}${preamble}if (__existing) return __existing; ${cloneExpr} }, '${markerId}')`,
+      `${topIndent}mapArray(() => ${arrayExpr}, ${containerVar}, ${keyFn}, (${paramHead}, ${indexParam}, __existing) => { ${unwrapInline}${preamble}if (__existing) return __existing; ${cloneExpr} }, '${markerId}'${loopBfId})`,
     )
     return
   }
@@ -163,7 +164,7 @@ export function stringifyPlainLoop(
   }
   emitLoopChildRefs(lines, childRefs, { indent: bodyIndent, elVar: '__el', bodyIsMultiRoot })
   lines.push(`${bodyIndent}return __el`)
-  lines.push(`${topIndent}}, '${markerId}')`)
+  lines.push(`${topIndent}}, '${markerId}'${loopBfId})`)
 }
 
 /**
@@ -212,11 +213,12 @@ function stringifyAnchoredLoop(
     stringifyReactiveEffects(lines, reactiveEffects, { indent: bodyIndent, elVar: '__anchor', bodyIsMultiRoot: false })
   }
   lines.push(`${bodyIndent}return __frag ?? __anchor`)
-  lines.push(`${topIndent}}, '${markerId}')`)
+  const loopBfId = plan.profileLoopId ? `, ${JSON.stringify(plan.profileLoopId)}` : ''
+  lines.push(`${topIndent}}, '${markerId}'${loopBfId})`)
 }
 
 export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void {
-  const { containerVar, arrayExpr, param, indexParam, childIndexExpr, attrsBySlot, texts, childRefs, csrMaterialize } = plan
+  const { containerVar, arrayExpr, param, indexParam, childIndexExpr, attrsBySlot, texts, childRefs, csrMaterialize, profileComponentName: pc } = plan
   const hasAttrs = attrsBySlot.length > 0
   const hasTexts = texts.length > 0
   const hasRefs = childRefs.length > 0
@@ -298,14 +300,14 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
       for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.expression, attr)) {
         lines.push(`            ${stmt}`)
       }
-      lines.push(`          })`)
+      lines.push(`          }${profileBindingId(pc, slotId)})`)
     }
     lines.push(`        }`)
   }
   for (const text of texts) {
     const vn = `__rt_${varSlotId(text.slotId)}`
     lines.push(`        { const [${vn}] = $t(__iterEl, '${text.slotId}')`)
-    lines.push(`        if (${vn}) createEffect(() => { ${vn}.textContent = String(${text.expression}) }) }`)
+    lines.push(`        if (${vn}) createEffect(() => { ${vn}.textContent = String(${text.expression}) }${profileBindingId(pc, text.slotId)}) }`)
   }
   // Ref callbacks fire on every forEach iteration — initial mount and any
   // future array-change-driven re-iteration (#1244). For static arrays the

package/src/ir-to-client-js/control-flow/stringify/reactive-effects.ts

@@ -8,7 +8,7 @@
  * `loop-child-arm.ts` — no legacy passthrough remains.
  */
 
-import { varSlotId } from '../../utils.ts'
+import { varSlotId, profileBindingId } from '../../utils.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import {
   stringifyBranchChildComponentInits,
@@ -49,6 +49,8 @@ export function stringifyReactiveEffects(
 ): void {
   const { indent, elVar, bodyIsMultiRoot } = opts
   const lookup = bodyIsMultiRoot ? 'qsaItem' : 'qsa'
+  const pc = plan.profileComponentName
+  const bindingBfId = (slotId: string): string => profileBindingId(pc, slotId)
 
   // 1. Reactive attribute effects (one qsa per slot, then per-attr createEffect).
   for (const slot of plan.attrSlots) {
@@ -60,20 +62,20 @@ export function stringifyReactiveEffects(
       for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta)) {
         lines.push(`${indent}    ${stmt}`)
       }
-      lines.push(`${indent}  })`)
+      lines.push(`${indent}  }${bindingBfId(slot.slotId)})`)
     }
     lines.push(`${indent}} }`)
   }
 
   // 2. Outer text effects (slots NOT inside any conditional branch).
   for (const text of plan.outerTexts) {
-    emitOuterText(lines, indent, elVar, text)
+    emitOuterText(lines, indent, elVar, text, bindingBfId(text.slotId))
   }
 
   // 3. Reactive conditionals — each emits an insert(...) over `elVar` whose
   //    arm bodies dispatch through the per-arm stringifiers.
   for (const cond of plan.conditionals) {
-    emitOuterConditional(lines, indent, elVar, cond)
+    emitOuterConditional(lines, indent, elVar, cond, pc)
   }
 }
 
@@ -82,10 +84,11 @@ function emitOuterText(
   indent: string,
   elVar: string,
   text: ReactiveTextEffect,
+  bfId: string = '',
 ): void {
   const varName = `__rt_${varSlotId(text.slotId)}`
   lines.push(`${indent}{ const [${varName}] = $t(${elVar}, '${text.slotId}')`)
-  lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }) }`)
+  lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${bfId}) }`)
 }
 
 function emitOuterConditional(
@@ -93,6 +96,7 @@ function emitOuterConditional(
   indent: string,
   elVar: string,
   cond: NestedConditionalPlan,
+  pc: string | undefined,
 ): void {
   const armIndent = `${indent}    `
 
@@ -101,28 +105,28 @@ function emitOuterConditional(
   lines.push(`${indent}insert(${elVar}, '${cond.slotId}', () => ${cond.wrappedCondition}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenTrueTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  emitArmBody(lines, cond.whenTrueArm, armIndent)
+  emitArmBody(lines, cond.whenTrueArm, armIndent, pc)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenFalseTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  emitArmBody(lines, cond.whenFalseArm, armIndent)
+  emitArmBody(lines, cond.whenFalseArm, armIndent, pc)
   lines.push(`${indent}  }`)
-  lines.push(`${indent}})`)
+  lines.push(`${indent}}${profileBindingId(pc, cond.slotId)})`)
 }
 
-function emitArmBody(lines: string[], arm: LoopChildArmPlan, armIndent: string): void {
+function emitArmBody(lines: string[], arm: LoopChildArmPlan, armIndent: string, pc: string | undefined): void {
   stringifyBranchEventBindings(lines, arm.events, armIndent)
   stringifyBranchChildComponentInits(lines, arm.childComponents, armIndent)
-  stringifyBranchInnerLoops(lines, arm.innerLoops, armIndent)
-  stringifyLoopChildConditionals(lines, arm.nestedConditionals, armIndent)
+  stringifyBranchInnerLoops(lines, arm.innerLoops, armIndent, pc)
+  stringifyLoopChildConditionals(lines, arm.nestedConditionals, armIndent, pc)
   for (const text of arm.texts) {
-    emitArmText(lines, armIndent, text)
+    emitArmText(lines, armIndent, text, pc)
   }
 }
 
-function emitArmText(lines: string[], indent: string, text: LoopChildArmText): void {
+function emitArmText(lines: string[], indent: string, text: LoopChildArmText, pc: string | undefined): void {
   const varName = `__rt_${varSlotId(text.slotId)}`
   lines.push(`${indent}{ const [${varName}] = $t(__branchScope, '${text.slotId}')`)
-  lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }) }`)
+  lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}) }`)
 }

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

@@ -33,8 +33,9 @@ import { stringifyEventDelegation } from './control-flow/stringify/event-delegat
 
 /** Emit insert() calls for server-rendered reactive conditionals with branch configs. */
 export function emitConditionalUpdates(lines: string[], ctx: ClientJsContext): void {
+  const profileComponentName = ctx.profile ? ctx.componentName : undefined
   for (const elem of ctx.conditionalElements) {
-    const plan = buildInsertPlan(elem, { scope: { kind: 'top' }, eventNameMode: 'dom' })
+    const plan = buildInsertPlan(elem, { scope: { kind: 'top' }, eventNameMode: 'dom', profileComponentName })
     stringifyInsert(lines, plan, { leadingIndent: '  ', bodyIndent: '      ' })
     lines.push('')
   }
@@ -42,8 +43,9 @@ export function emitConditionalUpdates(lines: string[], ctx: ClientJsContext): v
 
 /** Emit insert() calls for client-only conditionals (not server-rendered). */
 export function emitClientOnlyConditionals(lines: string[], ctx: ClientJsContext): void {
+  const profileComponentName = ctx.profile ? ctx.componentName : undefined
   for (const elem of ctx.clientOnlyConditionals) {
-    const plan = buildInsertPlan(elem, { scope: { kind: 'top' }, eventNameMode: 'raw' })
+    const plan = buildInsertPlan(elem, { scope: { kind: 'top' }, eventNameMode: 'raw', profileComponentName })
     lines.push(`  // @client conditional: ${elem.slotId}`)
     stringifyInsert(lines, plan, { leadingIndent: '  ', bodyIndent: '      ' })
     lines.push('')
@@ -64,9 +66,12 @@ export function emitClientOnlyConditionals(lines: string[], ctx: ClientJsContext
  */
 export function emitLoopUpdates(lines: string[], ctx: ClientJsContext, unsafeLocalNames: Set<string>): void {
   for (const elem of ctx.loopElements) {
-    const plan = buildLoopPlan(elem, { unsafeLocalNames })
+    const plan = buildLoopPlan(elem, {
+      unsafeLocalNames,
+      profileComponentName: ctx.profile ? ctx.componentName : undefined,
+    })
     stringifyLoop(lines, plan)
-    emitLoopEventDelegation(lines, elem, plan.kind)
+    emitLoopEventDelegation(lines, elem, plan.kind, ctx.profile ? ctx.componentName : undefined)
   }
 }
 
@@ -74,13 +79,14 @@ function emitLoopEventDelegation(
   lines: string[],
   elem: TopLevelLoop,
   kind: 'plain' | 'component' | 'composite' | 'static',
+  profileComponentName?: string,
 ): void {
   if (kind === 'static') {
     // Event delegation for plain elements in static arrays (#537). Static
     // arrays have no data-key/bf-i markers, so walk up from target to the
     // container's direct child and use indexOf for index lookup.
     if (!elem.childComponent && elem.bindings.events.length > 0) {
-      stringifyEventDelegation(lines, buildStaticArrayDelegationPlan(elem))
+      stringifyEventDelegation(lines, buildStaticArrayDelegationPlan(elem, profileComponentName))
     }
     return
   }
@@ -99,6 +105,6 @@ function emitLoopEventDelegation(
     && !elem.useElementReconciliation
     && elem.bindings.events.length > 0
   ) {
-    stringifyEventDelegation(lines, buildDynamicLoopDelegationPlan(elem))
+    stringifyEventDelegation(lines, buildDynamicLoopDelegationPlan(elem, profileComponentName))
   }
 }

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

@@ -10,6 +10,18 @@ import type { ClientJsContext } from './types.ts'
 import { toHtmlAttrName, varSlotId, PROPS_PARAM } from './utils.ts'
 import { createTemplateAwareStringProtector } from './html-template.ts'
 
+/**
+ * Profile mode (#1690, SR3/SR4): the id appended to a DOM-binding effect so the
+ * profiler attributes its re-runs to a source location. Keyed by `slotId` (the
+ * `bf="sN"` marker) — `buildIdIndex` resolves `<Component>#binding:<slotId>`
+ * from `graph.domBindings`, which carry the same slot + loc. Empty when
+ * profiling is off, so the emitted effect is byte-for-byte unchanged (SR8).
+ */
+function bindingIdArg(ctx: ClientJsContext, slotId: string | undefined): string {
+  if (!ctx.profile || !slotId) return ''
+  return `, ${JSON.stringify(`${ctx.componentName}#binding:${slotId}`)}`
+}
+
 /**
  * Generate JS statements to update a DOM attribute reactively.
  * Centralizes the attribute-type dispatch (value, class, boolean, presence, generic)
@@ -110,6 +122,7 @@ export function emitDynamicTextUpdates(lines: string[], ctx: ClientJsContext): v
         const v = varSlotId(elem.slotId)
         lines.push(`  let __anchor_${v} = _${v}`)
       }
+      const __textSlot = (normalElems[0] ?? conditionalElems[0])?.slotId
       lines.push(`  createEffect(() => {`)
       if (normalElems.length > 0) {
         // Expression is always evaluated for non-conditional elements
@@ -139,7 +152,7 @@ export function emitDynamicTextUpdates(lines: string[], ctx: ClientJsContext): v
           lines.push(`    __bfText(__el_${v}, __val)`)
         }
       }
-      lines.push(`  })`)
+      lines.push(`  }${bindingIdArg(ctx, __textSlot)})`)
       lines.push('')
     }
   }
@@ -151,7 +164,7 @@ export function emitClientOnlyExpressions(lines: string[], ctx: ClientJsContext)
     lines.push(`  // @client: ${elem.slotId}`)
     lines.push(`  createEffect(() => {`)
     lines.push(`    updateClientMarker(__scope, '${elem.slotId}', ${elem.expression})`)
-    lines.push(`  })`)
+    lines.push(`  }${bindingIdArg(ctx, elem.slotId)})`)
     lines.push('')
   }
 }
@@ -178,7 +191,7 @@ export function emitReactiveAttributeUpdates(lines: string[], ctx: ClientJsConte
         }
       }
       lines.push(`    }`)
-      lines.push(`  })`)
+      lines.push(`  }${bindingIdArg(ctx, slotId)})`)
       lines.push('')
     }
   }
@@ -236,7 +249,7 @@ export function emitReactivePropBindings(lines: string[], ctx: ClientJsContext):
       lines.push(`    }`)
     }
 
-    lines.push(`  })`)
+    lines.push(`  }${bindingIdArg(ctx, ctx.reactiveProps[0]?.slotId)})`)
   }
 }
 
@@ -271,6 +284,6 @@ export function emitReactiveChildProps(lines: string[], ctx: ClientJsContext): v
       lines.push(`    }`)
     }
 
-    lines.push(`  })`)
+    lines.push(`  }${bindingIdArg(ctx, ctx.reactiveChildProps[0]?.slotId ?? undefined)})`)
   }
 }

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

@@ -13,6 +13,8 @@ export const RUNTIME_IMPORT_CANDIDATES = [
   'provideContext', 'createContext', 'useContext',
   'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText',
   'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText',
+  // Profile mode (#1690, SR3) — turn-boundary markers around event handlers.
+  'beginTurn', 'endTurn',
 ] as const
 
 /** @deprecated Use RUNTIME_IMPORT_CANDIDATES */

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

@@ -58,6 +58,7 @@ export function generateClientJs(
   localImportPrefixes?: string[],
   scope?: ScopeInfo,
   adapterCapabilities?: AdapterCapabilities,
+  profile?: boolean,
 ): string {
   return generateClientJsWithSourceMap(
     ir,
@@ -66,6 +67,7 @@ export function generateClientJs(
     undefined,
     scope,
     adapterCapabilities,
+    profile,
   ).code
 }
 
@@ -80,8 +82,9 @@ export function generateClientJsWithSourceMap(
   options?: { sourceMaps?: boolean; generatedFileName?: string },
   scope?: ScopeInfo,
   adapterCapabilities?: AdapterCapabilities,
+  profile?: boolean,
 ): ClientJsResult {
-  const ctx = createContext(ir, scope, adapterCapabilities)
+  const ctx = createContext(ir, scope, adapterCapabilities, profile)
   const siblingOffsets = computeLoopSiblingOffsets(ir.root)
   collectElements(ir.root, ctx, siblingOffsets)
 
@@ -154,11 +157,13 @@ function createContext(
   ir: ComponentIR,
   scope?: ScopeInfo,
   adapterCapabilities?: AdapterCapabilities,
+  profile?: boolean,
 ): ClientJsContext {
   return {
     componentName: ir.metadata.componentName,
     fileScope: scope?.fileScope ?? '',
     nonExportedSiblings: scope?.nonExportedSiblings ?? new Set(),
+    profile: profile ?? false,
     signals: ir.metadata.signals,
     memos: ir.metadata.memos,
     effects: ir.metadata.effects,

package/src/ir-to-client-js/phases/effects-and-on-mounts.ts

@@ -10,13 +10,19 @@
 import type { ClientJsContext } from '../types.ts'
 
 export function emitEffectsAndOnMounts(lines: string[], ctx: ClientJsContext): void {
-  for (const effect of ctx.effects) {
+  ctx.effects.forEach((effect, i) => {
+    // Profile mode (#1690): IR-aligned id so runtime effect-run events join to
+    // this effect node. Keyed by captureName when present, else the source line
+    // (stable across compiles), falling back to source order.
+    const idArg = ctx.profile
+      ? `, ${JSON.stringify(`${ctx.componentName}#effect:${effect.captureName ?? effect.loc?.start.line ?? i}`)}`
+      : ''
     if (effect.captureName) {
-      lines.push(`  const ${effect.captureName} = createEffect(${effect.body})`)
+      lines.push(`  const ${effect.captureName} = createEffect(${effect.body}${idArg})`)
     } else {
-      lines.push(`  createEffect(${effect.body})`)
+      lines.push(`  createEffect(${effect.body}${idArg})`)
     }
-  }
+  })
   for (const onMount of ctx.onMounts) {
     lines.push(`  onMount(${onMount.body})`)
   }

package/src/ir-to-client-js/phases/event-handlers.ts

@@ -10,7 +10,7 @@
  */
 
 import type { ClientJsContext } from '../types.ts'
-import { toDomEventName, varSlotId, wrapHandlerInBlock } from '../utils.ts'
+import { toDomEventName, varSlotId, wrapHandlerInBlock, wrapHandlerForTurn } from '../utils.ts'
 
 export function emitEventHandlers(
   lines: string[],
@@ -21,7 +21,11 @@ export function emitEventHandlers(
     if (conditionalSlotIds.has(elem.slotId)) continue
     for (const event of elem.events) {
       const eventName = toDomEventName(event.name)
-      const wrappedHandler = wrapHandlerInBlock(event.handler)
+      // Profile mode (#1690, SR3): bracket the handler with turn markers so a
+      // profiling run attributes the reactive work it triggers to this turn.
+      const wrappedHandler = ctx.profile
+        ? wrapHandlerForTurn(event.handler, `${ctx.componentName}#handler:${elem.slotId}:${event.name}`)
+        : wrapHandlerInBlock(event.handler)
       if (elem.slotId === '__scope') {
         lines.push(`  if (__scope) __scope.addEventListener('${eventName}', ${wrappedHandler})`)
       } else {