@barefootjs/jsx 0.10.1 → 0.12.0

package/src/ir-to-client-js/plan/build-declaration-emit.ts

@@ -62,6 +62,7 @@ export function buildDeclarationEmitPlan(
         kind: 'memo',
         name: decl.info.name,
         computationExpr: decl.info.computation,
+        bfId: ctx.profile ? `${ctx.componentName}#memo:${decl.info.name}` : undefined,
       }
     case 'function': {
       const fn = decl.info
@@ -84,13 +85,18 @@ function buildSignalPlan(
   ctx: ClientJsContext,
   lookups: DeclarationEmitLookups,
 ): SignalEmitPlan {
+  const controlledEffect = buildControlledSignalEffect(signal, lookups)
+  if (controlledEffect && ctx.profile) {
+    controlledEffect.bfId = `${ctx.componentName}#effect:controlled:${signal.setter}`
+  }
   return {
     kind: 'signal',
     getter: signal.getter,
     setter: signal.setter,
     initialValueExpr: resolveSignalInitialValue(signal, ctx, lookups),
-    controlledEffect: buildControlledSignalEffect(signal, lookups),
+    controlledEffect,
     branchCondition: signal.branchCondition,
+    bfId: ctx.profile ? `${ctx.componentName}#signal:${signal.getter}` : undefined,
   }
 }
 

package/src/ir-to-client-js/plan/declaration-emit.ts

@@ -52,6 +52,8 @@ export interface SignalEmitPlan {
    * cell #8.
    */
   branchCondition?: string
+  /** Profile-mode IR-aligned id, appended as the `createSignal` 2nd arg (#1690). */
+  bfId?: string
 }
 
 export interface ControlledSignalEffectPlan {
@@ -59,6 +61,8 @@ export interface ControlledSignalEffectPlan {
   setter: string
   /** Fully-resolved accessor expression read inside the effect. */
   accessorExpr: string
+  /** Profile-mode IR-aligned id, appended as the `createEffect` 2nd arg (#1690). */
+  bfId?: string
 }
 
 export interface MemoEmitPlan {
@@ -66,6 +70,8 @@ export interface MemoEmitPlan {
   name: string
   /** Source expression passed to `createMemo(...)`. */
   computationExpr: string
+  /** Profile-mode IR-aligned id, appended as the `createMemo` 2nd arg (#1690). */
+  bfId?: string
 }
 
 export interface FunctionEmitPlan {

package/src/ir-to-client-js/stringify/declaration-emit.ts

@@ -59,7 +59,13 @@ function emitConstant(lines: string[], plan: ConstantEmitPlan): void {
   }
 }
 
+/** Profile-mode trailing `__bfId` argument (`, "Comp#signal:x"`), or '' when off. */
+function bfIdArg(bfId: string | undefined): string {
+  return bfId ? `, ${JSON.stringify(bfId)}` : ''
+}
+
 function emitSignal(lines: string[], plan: SignalEmitPlan): void {
+  const id = bfIdArg(plan.bfId)
   if (plan.branchCondition) {
     // #1414 cell #8: signal declared inside an early-return `if`-block.
     // Hoist as `let` so closures and event handlers hoisted to outer
@@ -70,12 +76,12 @@ function emitSignal(lines: string[], plan: SignalEmitPlan): void {
     if (plan.setter) {
       lines.push(`  let ${plan.getter}, ${plan.setter}`)
       lines.push(`  if (${plan.branchCondition}) {`)
-      lines.push(`    ;[${plan.getter}, ${plan.setter}] = createSignal(${plan.initialValueExpr})`)
+      lines.push(`    ;[${plan.getter}, ${plan.setter}] = createSignal(${plan.initialValueExpr}${id})`)
       lines.push(`  }`)
     } else {
       lines.push(`  let ${plan.getter}`)
       lines.push(`  if (${plan.branchCondition}) {`)
-      lines.push(`    ;[${plan.getter}] = createSignal(${plan.initialValueExpr})`)
+      lines.push(`    ;[${plan.getter}] = createSignal(${plan.initialValueExpr}${id})`)
       lines.push(`  }`)
     }
     // Controlled effects don't apply to branch-conditioned signals — a
@@ -84,9 +90,9 @@ function emitSignal(lines: string[], plan: SignalEmitPlan): void {
     return
   }
   if (plan.setter) {
-    lines.push(`  const [${plan.getter}, ${plan.setter}] = createSignal(${plan.initialValueExpr})`)
+    lines.push(`  const [${plan.getter}, ${plan.setter}] = createSignal(${plan.initialValueExpr}${id})`)
   } else {
-    lines.push(`  const [${plan.getter}] = createSignal(${plan.initialValueExpr})`)
+    lines.push(`  const [${plan.getter}] = createSignal(${plan.initialValueExpr}${id})`)
   }
   if (plan.controlledEffect) {
     emitControlledEffect(lines, plan.controlledEffect)
@@ -97,11 +103,11 @@ function emitControlledEffect(lines: string[], plan: ControlledSignalEffectPlan)
   lines.push(`  createEffect(() => {`)
   lines.push(`    const __val = ${plan.accessorExpr}`)
   lines.push(`    if (__val !== undefined) ${plan.setter}(__val)`)
-  lines.push(`  })`)
+  lines.push(`  }${bfIdArg(plan.bfId)})`)
 }
 
 function emitMemo(lines: string[], plan: MemoEmitPlan): void {
-  lines.push(`  const ${plan.name} = createMemo(${plan.computationExpr})`)
+  lines.push(`  const ${plan.name} = createMemo(${plan.computationExpr}${bfIdArg(plan.bfId)})`)
 }
 
 function emitFunction(lines: string[], plan: FunctionEmitPlan): void {

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

@@ -40,6 +40,11 @@ export interface ClientJsContext {
    * collide with same-named exports from other modules.
    */
   nonExportedSiblings: Set<string>
+  /**
+   * Profile mode (#1690, SR3). When true, emit IR-aligned `__bfId` args at
+   * reactive creation sites. Off by default → byte-identical output (SR8).
+   */
+  profile: boolean
   signals: SignalInfo[]
   memos: MemoInfo[]
   effects: EffectInfo[]

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

@@ -50,6 +50,25 @@ export function varSlotId(slotId: string): string {
   return slotId.startsWith('^') ? slotId.slice(1) : slotId
 }
 
+/**
+ * Profile-mode DOM-binding id suffix (#1690, SR4). Returns the trailing
+ * `, "<Component>#binding:<slotId>"` argument for a binding effect's
+ * `createEffect` / `createDisposableEffect` / `insert` / `mapArray` call when
+ * `componentName` is set (profile on), else `''` so the emitted code stays
+ * byte-identical (SR8). Centralised so every binding emit site — top-level,
+ * conditional branch, loop child, inner loop — uses one id convention.
+ *
+ * A `'?'` slotId (an inner loop whose container element carries no `bf` slot
+ * marker) is NOT emittable: `buildIdIndex` keys on real `domBinding` slotIds, so
+ * `#binding:?` could never resolve and would be a guaranteed coverage gap. The
+ * analyzer likewise emits no `domBinding` for a slot-less loop, so suppressing
+ * the id here keeps both sides silent and consistent.
+ */
+export function profileBindingId(componentName: string | undefined, slotId: string): string {
+  if (!componentName || slotId === '?') return ''
+  return `, ${JSON.stringify(`${componentName}#binding:${slotId}`)}`
+}
+
 /**
  * Convert a `template` variant's parts into a JS template-literal string.
  * Shared by both `attrValueToString` and any consumer that wants to flatten
@@ -241,6 +260,24 @@ export function wrapHandlerInBlock(handler: string): string {
   return trimmed
 }
 
+/**
+ * Profile mode (#1690, SR3): wrap an event handler so a profiling run can
+ * attribute the reactive work it triggers to one turn. The original handler
+ * expression (arrow or identifier) is invoked verbatim with the forwarded
+ * args, bracketed by `beginTurn`/`endTurn`:
+ *
+ *   (...__bfa) => { beginTurn("Comp#handler:slot:click"); try { return (HANDLER)(...__bfa) } finally { endTurn() } }
+ *
+ * Measurement-only: the handler's behavior and the synchronous `set()`
+ * semantics are unchanged — the markers just stamp a turn id onto the events
+ * emitted while it runs. Used at every handler emit site in profile mode so
+ * no path is left unattributed.
+ */
+export function wrapHandlerForTurn(handler: string, handlerId: string, loc?: string): string {
+  const idArg = loc ? `${JSON.stringify(handlerId)}, ${JSON.stringify(loc)}` : JSON.stringify(handlerId)
+  return `(...__bfa) => { beginTurn(${idArg}); try { return (${handler.trim()})(...__bfa) } finally { endTurn() } }`
+}
+
 /**
  * Emit a ref-binding call `(callback)(elementVar)`, optionally guarded so the
  * call no-ops when the callback is undefined.

package/src/jsx-to-ir.ts

@@ -33,7 +33,7 @@ import {
   AttrValueOf,
 } from './types.ts'
 import { type AnalyzerContext, type MultiReturnJsxInfo, getSourceLocation } from './analyzer-context.ts'
-import { parseExpression, isSupported, parseBlockBody, extractSortComparatorFromTS, type ParsedExpr, type ParsedStatement, type SortComparator } from './expression-parser.ts'
+import { parseExpression, isSupported, parseBlockBody, extractSortComparatorFromTS, cssKebabCase, type ParsedExpr, type ParsedStatement, type SortComparator } from './expression-parser.ts'
 import { createError, ErrorCodes, internalInvariant } from './errors.ts'
 import { containsReactiveExpression } from './reactivity-checker.ts'
 import {
@@ -3804,7 +3804,7 @@ function tryStaticStyleObjectToCss(expr: ts.ObjectLiteralExpression): string | n
     if (!ts.isPropertyAssignment(prop)) return null
     if (!ts.isIdentifier(prop.name) && !ts.isStringLiteral(prop.name)) return null
     if (!ts.isStringLiteral(prop.initializer)) return null
-    const key = prop.name.text.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
+    const key = cssKebabCase(prop.name.text)
     parts.push(`${key}:${prop.initializer.text}`)
   }
   return parts.join(';')

package/src/loop-destructure.ts

@@ -0,0 +1,170 @@
+import type { IRLoop, IRNode, AttrValue, IRTemplatePart } from './types.ts'
+
+const SIMPLE_FIELD = /^\.[A-Za-z_$][\w$]*$/
+
+/**
+ * True when a loop's destructure param is the single shape the non-JS SSR
+ * adapters (Go template / Mojolicious / Xslate) can lower today:
+ *
+ *   `arr.map(({ id, title, ...rest }) => …)`
+ *
+ * where every binding is a simple `.field` access or an **object-rest read only
+ * via member access** (`rest.flag`). The adapters lower the rest binding as an
+ * alias to the whole iteration item, which matches JS rest semantics only for
+ * member reads of non-consumed keys — so any other use must be refused:
+ *
+ *   - array-rest / array-index / nested paths (`[a, ...t]`, `{ cells: [h] }`)
+ *     need index/slice the `range`/`for` can't express inline;
+ *   - spread (`{...rest}`) and bare value uses (`String(rest)`, `{rest}`,
+ *     `fn(rest)`) would observe the consumed keys too — they need a residual
+ *     object the templates can't build inline;
+ *   - a chained `.filter().map(destructure)` would need the filter-param
+ *     rewrite to target the synthetic per-item var, so it's refused as well.
+ *
+ * Unsupported shapes fall through to the adapters' BF104 diagnostic. The scan
+ * is conservative: an ambiguous use refuses (false-negative is safe — it keeps
+ * the existing build-time error rather than shipping wrong output).
+ */
+export function isLowerableObjectRestDestructure(loop: IRLoop): boolean {
+  const bindings = loop.paramBindings
+  if (!bindings || bindings.length === 0) return false
+  if (loop.filterPredicate) return false
+  // The SSR adapters emit a synthetic per-item loop variable in the reserved
+  // `__bf_item` namespace (depth-suffixed on Go). A user destructure binding —
+  // or the `index` param — in that namespace would collide with / shadow the
+  // synthetic var (duplicate `my $__bf_item …` locals, ambiguous accessors), so
+  // refuse the lowering (→ BF104) rather than emit broken template locals.
+  for (const name of [...bindings.map(b => b.name), loop.index]) {
+    if (name && name.startsWith('__bf_')) return false
+  }
+  for (const b of bindings) {
+    if (b.rest) {
+      if (b.rest.kind !== 'object') return false
+    } else if (!SIMPLE_FIELD.test(b.path)) {
+      return false
+    }
+  }
+  const restNames = bindings.filter(b => b.rest).map(b => b.name)
+  if (restNames.length === 0) return true
+  return !restNamesMisused(loop, restNames)
+}
+
+/**
+ * Walks the whole loop subtree (every node type, every expression-bearing
+ * field) and reports whether any rest name is referenced as something other
+ * than a member-access base (`rest.flag` / `rest?.flag`). A spread expr
+ * (`{...rest}` → expr `"rest"`) and bare value uses are caught by the same
+ * regex; a property of an unrelated object (`foo.rest`) is excluded by the
+ * lookbehind.
+ *
+ * The scan covers the gated loop's own non-children expression fields too
+ * (`array` / `key` / `mapPreamble` / `flatMapCallback` body) — a bare rest use
+ * can surface there (e.g. `.map(({ ...rest }) => { const x = rest; … })`
+ * lifts `const x = rest` into `mapPreamble`), plus intrinsic element event
+ * handlers (`onClick={() => fn(rest)}`).
+ */
+function restNamesMisused(loop: IRLoop, names: string[]): boolean {
+  const valueUse = names.map(
+    n => new RegExp(`(?<![\\w.$])${escapeRe(n)}(?!\\s*\\??\\.)(?![\\w$])`),
+  )
+  let misused = false
+  const check = (s: string | undefined | null): void => {
+    if (!s || misused) return
+    for (const re of valueUse) {
+      if (re.test(s)) {
+        misused = true
+        return
+      }
+    }
+  }
+  const attr = (v: AttrValue): void => {
+    if (v.kind === 'expression' || v.kind === 'spread') {
+      check(v.expr)
+      check(v.templateExpr)
+    } else if (v.kind === 'template') {
+      v.parts.forEach(part)
+    }
+  }
+  const part = (p: IRTemplatePart): void => {
+    if (p.type === 'ternary') {
+      check(p.condition)
+      check(p.templateCondition)
+      check(p.whenTrue)
+      check(p.whenFalse)
+    } else if (p.type === 'lookup') {
+      check(p.key)
+      check(p.templateKey)
+    }
+  }
+  const visitLoop = (l: IRLoop): void => {
+    if (misused) return
+    check(l.array)
+    check(l.templateArray)
+    check(l.key)
+    check(l.mapPreamble)
+    check(l.templateMapPreamble)
+    if (l.flatMapCallback) {
+      check(l.flatMapCallback.body)
+      check(l.flatMapCallback.templateBody)
+      l.flatMapCallback.fragments.forEach(f => visit(f.ir))
+    }
+    l.children.forEach(visit)
+  }
+  const visit = (node: IRNode): void => {
+    if (misused) return
+    switch (node.type) {
+      case 'expression':
+        check(node.expr)
+        check(node.templateExpr)
+        break
+      case 'conditional':
+        check(node.condition)
+        check(node.templateCondition)
+        visit(node.whenTrue)
+        visit(node.whenFalse)
+        break
+      case 'if-statement':
+        check(node.condition)
+        check(node.templateCondition)
+        for (const sv of node.scopeVariables) {
+          check(sv.initializer)
+          check(sv.templateInitializer)
+        }
+        visit(node.consequent)
+        if (node.alternate) visit(node.alternate)
+        break
+      case 'element':
+        node.attrs.forEach(a => attr(a.value))
+        node.events.forEach(e => check(e.handler))
+        node.children.forEach(visit)
+        break
+      case 'component':
+        node.props.forEach(p => attr(p.value))
+        node.children.forEach(visit)
+        break
+      case 'provider':
+        attr(node.valueProp.value)
+        node.children.forEach(visit)
+        break
+      case 'fragment':
+        node.children.forEach(visit)
+        break
+      case 'async':
+        visit(node.fallback)
+        node.children.forEach(visit)
+        break
+      case 'loop':
+        visitLoop(node)
+        break
+      case 'text':
+      case 'slot':
+        break
+    }
+  }
+  visitLoop(loop)
+  return misused
+}
+
+function escapeRe(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}