@barefootjs/jsx 0.18.4 → 0.18.7

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

@@ -27,7 +27,8 @@
 import { emitRefCall, varSlotId, profileBindingId } from '../../utils.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { stringifyReactiveEffects } from './reactive-effects.ts'
-import { emitTemplateCloneInline, emitLoopItemElementSetup, emitHoistedTemplateDecl, hoistedCloneExpr } from './template-parse.ts'
+import { emitTemplateCloneInline, emitLoopItemElementSetup, emitHoistedTemplateDecl, hoistedCloneExpr, templateRootIsSvg, multiRootTemplateNeedsSvgWrap } from './template-parse.ts'
+import { buildSkeletonPathPlan, type SkeletonPathPlan } from './skeleton-paths.ts'
 import { stringifyComponentLoop } from './component-loop.ts'
 import { stringifyCompositeLoop } from './composite-loop.ts'
 import type { LoopChildRefBinding, LoopPlan, PlainLoopPlan, StaticLoopPlan } from '../plan/types.ts'
@@ -47,14 +48,18 @@ import type { LoopChildRefBinding, LoopPlan, PlainLoopPlan, StaticLoopPlan } fro
 export function emitLoopChildRefs(
   lines: string[],
   refs: readonly LoopChildRefBinding[],
-  opts: { indent: string; elVar: string; bodyIsMultiRoot: boolean },
+  opts: { indent: string; elVar: string; bodyIsMultiRoot: boolean; elementIndexBySlot?: ReadonlyMap<string, number> },
 ): void {
   if (refs.length === 0) return
-  const { indent, elVar, bodyIsMultiRoot } = opts
+  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot } = opts
   const lookup = bodyIsMultiRoot ? 'qsaItem' : 'qsa'
   for (const ref of refs) {
     const varName = `__rf_${varSlotId(ref.childSlotId)}`
-    lines.push(`${indent}{ const ${varName} = ${lookup}(${elVar}, '[bf="${ref.childSlotId}"]')`)
+    const pIdx = elementIndexBySlot?.get(ref.childSlotId)
+    const lookupExpr = pIdx !== undefined
+      ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${ref.childSlotId}"]')`
+      : `${lookup}(${elVar}, '[bf="${ref.childSlotId}"]')`
+    lines.push(`${indent}{ const ${varName} = ${lookupExpr}`)
     lines.push(`${indent}if (${varName}) ${emitRefCall(ref.callback, varName)} }`)
   }
 }
@@ -181,10 +186,37 @@ export function stringifyPlainLoop(
       singleRootLayout: 'inline',
     })
   }
+  // Direct child-index paths (perf, #2143): only reachable when hoistedTpl
+  // is set, which itself requires a single-root, conditional-free body — so
+  // `reactiveEffects.conditionals` is always empty here and needs no path
+  // handling. `__p` is `null` on the hydration branch (`__existing` truthy)
+  // since the skeleton's empty markers/omitted attrs don't describe the
+  // SSR-rendered tree; every resolution falls back to qsa/$t there.
+  let pathPlan: SkeletonPathPlan | null = null
+  if (hoistedTpl && plan.skeletonPaths) {
+    const elementSlotIds = [
+      ...(reactiveEffects?.attrSlots.map(s => s.slotId) ?? []),
+      ...childRefs.map(r => r.childSlotId),
+    ]
+    const textSlotIds = reactiveEffects?.outerTexts.map(t => t.slotId) ?? []
+    if (elementSlotIds.length > 0 || textSlotIds.length > 0) {
+      const built = buildSkeletonPathPlan(plan.skeletonPaths, '__el', { elementSlotIds, textSlotIds })
+      if (built.arrayElems.length > 0) {
+        pathPlan = built
+        lines.push(`${bodyIndent}const __p = __existing ? null : [${built.arrayElems.join(', ')}]`)
+      }
+    }
+  }
   if (reactiveEffects !== null) {
-    stringifyReactiveEffects(lines, reactiveEffects, { indent: bodyIndent, elVar: '__el', bodyIsMultiRoot })
+    stringifyReactiveEffects(lines, reactiveEffects, {
+      indent: bodyIndent,
+      elVar: '__el',
+      bodyIsMultiRoot,
+      elementIndexBySlot: pathPlan?.elementIndexBySlot,
+      textIndexBySlot: pathPlan?.textIndexBySlot,
+    })
   }
-  emitLoopChildRefs(lines, childRefs, { indent: bodyIndent, elVar: '__el', bodyIsMultiRoot })
+  emitLoopChildRefs(lines, childRefs, { indent: bodyIndent, elVar: '__el', bodyIsMultiRoot, elementIndexBySlot: pathPlan?.elementIndexBySlot })
   lines.push(`${bodyIndent}return __el`)
   lines.push(`${topIndent}}, '${markerId}'${loopBfId})`)
 }
@@ -283,15 +315,26 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
   lines.push(`      let __iterEl = ${containerVar}.children[${childIndexExpr}]`)
   if (csrMaterialize) {
     lines.push(`      if (!__iterEl) {`)
+    // SVG-rooted item templates parse inside a synthetic `<svg>` wrap and
+    // descend one extra level (#2219) — `template.innerHTML` alone parses in
+    // the HTML namespace and the materialized elements would never draw.
+    // Mirrors `templateRootIsSvg` handling on the reactive clone paths;
+    // HTML-rooted templates keep byte-identical output. Multi-root fragments
+    // use the fragment-aware predicate so an `<svg>`-container-first fragment
+    // isn't over-wrapped (#2233 Copilot review).
+    const isSvg = csrMaterialize.bodyIsMultiRoot
+      ? multiRootTemplateNeedsSvgWrap(csrMaterialize.itemTemplate)
+      : templateRootIsSvg(csrMaterialize.itemTemplate)
+    const itemHtml = isSvg ? `<svg>${csrMaterialize.itemTemplate}</svg>` : csrMaterialize.itemTemplate
     if (csrMaterialize.bodyIsMultiRoot) {
       // Multi-root: clone every top-level sibling of the per-item template and
       // insert them in order. `__iterEl` is the first root (the one reactive
       // bindings attach to); the rest land alongside it via insertBefore.
       lines.push(`        const __mtpl = document.createElement('template')`)
-      lines.push(`        __mtpl.innerHTML = \`${csrMaterialize.itemTemplate}\``)
+      lines.push(`        __mtpl.innerHTML = \`${itemHtml}\``)
       lines.push(`        const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`)
       lines.push(`        let __first = null`)
-      lines.push(`        let __sib = __mtpl.content.firstElementChild`)
+      lines.push(`        let __sib = __mtpl.content${isSvg ? '.firstElementChild' : ''}.firstElementChild`)
       lines.push(`        while (__sib) {`)
       lines.push(`          const __next = __sib.nextElementSibling`)
       lines.push(`          const __cloned = __sib.cloneNode(true)`)
@@ -302,8 +345,8 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
       lines.push(`        __iterEl = __first`)
     } else {
       lines.push(`        const __tpl = document.createElement('template')`)
-      lines.push(`        __tpl.innerHTML = \`${csrMaterialize.itemTemplate}\``)
-      lines.push(`        const __cloned = __tpl.content.firstElementChild`)
+      lines.push(`        __tpl.innerHTML = \`${itemHtml}\``)
+      lines.push(`        const __cloned = __tpl.content${isSvg ? '.firstElementChild' : ''}.firstElementChild`)
       lines.push(`        if (__cloned) {`)
       lines.push(`          const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`)
       lines.push(`          ${containerVar}.insertBefore(__cloned, __anchor)`)

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

@@ -40,6 +40,16 @@ export interface StringifyReactiveEffectsOptions {
    * `<!--bf-loop-i-->`-bounded siblings). Optional — defaults to `false`.
    */
   bodyIsMultiRoot?: boolean
+  /**
+   * Compile-time `__p` index for each attr slotId (perf, #2143) — see
+   * `buildSkeletonPathPlan`. When a slot has an entry, the emitted lookup
+   * becomes `__p ? __p[i] : qsa(...)` instead of the bare `qsa(...)` call;
+   * `__p` is `null` on the hydration branch (`__existing`), so hydration
+   * still resolves through the battle-tested runtime lookup.
+   */
+  elementIndexBySlot?: ReadonlyMap<string, number>
+  /** Same as `elementIndexBySlot`, for text-marker slots (`$t`). */
+  textIndexBySlot?: ReadonlyMap<string, number>
 }
 
 export function stringifyReactiveEffects(
@@ -47,7 +57,7 @@ export function stringifyReactiveEffects(
   plan: ReactiveEffectsPlan,
   opts: StringifyReactiveEffectsOptions,
 ): void {
-  const { indent, elVar, bodyIsMultiRoot } = opts
+  const { indent, elVar, bodyIsMultiRoot, elementIndexBySlot, textIndexBySlot } = opts
   const lookup = bodyIsMultiRoot ? 'qsaItem' : 'qsa'
   const pc = plan.profileComponentName
   const bindingBfId = (slotId: string): string => profileBindingId(pc, slotId)
@@ -55,7 +65,11 @@ export function stringifyReactiveEffects(
   // 1. Reactive attribute effects (one qsa per slot, then per-attr createEffect).
   for (const slot of plan.attrSlots) {
     const varName = `__ra_${varSlotId(slot.slotId)}`
-    lines.push(`${indent}{ const ${varName} = ${lookup}(${elVar}, '[bf="${slot.slotId}"]')`)
+    const pIdx = elementIndexBySlot?.get(slot.slotId)
+    const lookupExpr = pIdx !== undefined
+      ? `__p ? __p[${pIdx}] : ${lookup}(${elVar}, '[bf="${slot.slotId}"]')`
+      : `${lookup}(${elVar}, '[bf="${slot.slotId}"]')`
+    lines.push(`${indent}{ const ${varName} = ${lookupExpr}`)
     lines.push(`${indent}if (${varName}) {`)
     for (const attr of slot.attrs) {
       lines.push(`${indent}  createEffect(() => {`)
@@ -69,7 +83,7 @@ export function stringifyReactiveEffects(
 
   // 2. Outer text effects (slots NOT inside any conditional branch).
   for (const text of plan.outerTexts) {
-    emitOuterText(lines, indent, elVar, text, bindingBfId(text.slotId))
+    emitOuterText(lines, indent, elVar, text, bindingBfId(text.slotId), textIndexBySlot?.get(text.slotId))
   }
 
   // 3. Reactive conditionals — each emits an insert(...) over `elVar` whose
@@ -85,9 +99,16 @@ function emitOuterText(
   elVar: string,
   text: ReactiveTextEffect,
   bfId: string = '',
+  pIdx?: number,
 ): void {
   const varName = `__rt_${varSlotId(text.slotId)}`
-  lines.push(`${indent}{ const [${varName}] = $t(${elVar}, '${text.slotId}')`)
+  if (pIdx !== undefined) {
+    // Direct-path resolution (#2143): `__p` holds the marker Comment node;
+    // `tAfter` mirrors `$t`'s create-if-absent Text-node semantics exactly.
+    lines.push(`${indent}{ const ${varName} = __p ? tAfter(__p[${pIdx}]) : $t(${elVar}, '${text.slotId}')[0]`)
+  } else {
+    lines.push(`${indent}{ const [${varName}] = $t(${elVar}, '${text.slotId}')`)
+  }
   lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${bfId}) }`)
 }
 

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

@@ -0,0 +1,70 @@
+/**
+ * Turn compile-time `SkeletonSlotPaths` (html-template.ts) into the `__p`
+ * array-literal contents plus slot -> index maps consumed by
+ * `stringifyPlainLoop` / `stringifyReactiveEffects` / `emitLoopChildRefs`
+ * (perf: direct child-index paths for hoisted single-root loops, #2143).
+ *
+ * Single source of truth for `__p` ordering: `loop.ts` (which emits the
+ * array literal) and `reactive-effects.ts` (which emits the per-slot index
+ * reads) both derive their indices from the SAME `SkeletonPathPlan`, so the
+ * two can never drift out of sync.
+ */
+
+import type { SkeletonSlotPaths } from '../../html-template.ts'
+
+/**
+ * Convert a root-relative child-index path into a `.firstChild.nextSibling…`
+ * property chain off `base`. An empty path resolves to `base` itself (the
+ * slot lives on the clone root, e.g. an attr on the loop body's own tag).
+ */
+export function pathExpr(base: string, path: readonly number[]): string {
+  let expr = base
+  for (const idx of path) {
+    expr += '.firstChild'
+    if (idx > 0) expr += '.nextSibling'.repeat(idx)
+  }
+  return expr
+}
+
+export interface SkeletonPathPlan {
+  /** Expressions for the `const __p = [...]` array literal, in stable order. */
+  arrayElems: string[]
+  /** slotId -> index into `__p`, for element-anchored slots (reactive attrs, refs). */
+  elementIndexBySlot: Map<string, number>
+  /** slotId -> index into `__p`, for text-marker-anchored slots (reactive texts). */
+  textIndexBySlot: Map<string, number>
+}
+
+/**
+ * Build the `__p` plan for a hoisted loop's reactive attr / text / ref
+ * slots. A slotId absent from `skeletonPaths` (shouldn't happen for a
+ * successfully-hoisted skeleton, but handled defensively) is simply left
+ * out of both maps — its stringifier call site falls back to `qsa`/`$t`
+ * for that one slot without affecting any other slot's resolution.
+ */
+export function buildSkeletonPathPlan(
+  skeletonPaths: SkeletonSlotPaths,
+  elVar: string,
+  opts: { elementSlotIds: readonly string[]; textSlotIds: readonly string[] },
+): SkeletonPathPlan {
+  const arrayElems: string[] = []
+  const elementIndexBySlot = new Map<string, number>()
+  const textIndexBySlot = new Map<string, number>()
+
+  for (const slotId of opts.elementSlotIds) {
+    if (elementIndexBySlot.has(slotId)) continue
+    const path = skeletonPaths.elementPaths.get(slotId)
+    if (!path) continue
+    elementIndexBySlot.set(slotId, arrayElems.length)
+    arrayElems.push(pathExpr(elVar, path))
+  }
+  for (const slotId of opts.textSlotIds) {
+    if (textIndexBySlot.has(slotId)) continue
+    const path = skeletonPaths.textMarkerPaths.get(slotId)
+    if (!path) continue
+    textIndexBySlot.set(slotId, arrayElems.length)
+    arrayElems.push(pathExpr(elVar, path))
+  }
+
+  return { arrayElems, elementIndexBySlot, textIndexBySlot }
+}

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

@@ -82,6 +82,30 @@ export function templateRootIsSvg(template: string): boolean {
   return branches.every(templateRootIsSvg)
 }
 
+/**
+ * Wrap decision for MULTI-ROOT (fragment) templates, where the synthetic
+ * `<svg>` wrap swallows every sibling root at once (#2233 Copilot review).
+ *
+ * `templateRootIsSvg` inspects only the FIRST root tag. For single-root
+ * templates that's exact, but a fragment whose first root is an `<svg>`
+ * CONTAINER (`<><svg/><span/></>`) doesn't need the wrap at all — the
+ * HTML parser enters foreign content at `<svg>` on its own — and wrapping
+ * would drag the HTML siblings into the SVG namespace (`<span>` becomes an
+ * SVGUnknownElement, silently undrawn). So `<svg>`-first fragments skip
+ * the wrap; only leaf-rooted fragments (`<line>`, `<circle>`, ...) get it.
+ *
+ * Known edge (degenerate, pre-existing): an `<svg>`-first fragment with
+ * SVG-LEAF siblings (`<><svg/><line/></>`) leaves the bare leaf siblings
+ * in the HTML namespace — exactly the pre-#2219 behavior. Deciding that
+ * shape correctly needs a scan of every top-level root tag; not worth the
+ * parser until a real component hits it.
+ */
+export function multiRootTemplateNeedsSvgWrap(template: string): boolean {
+  const m = stripLeadingNonContent(template).match(/^<\s*([A-Za-z][A-Za-z0-9-]*)/)
+  if (m && m[1].toLowerCase() === 'svg') return false
+  return templateRootIsSvg(template)
+}
+
 /**
  * Strip leading whitespace and HTML comment markers (`<!-- ... -->`) so
  * that a branch like `<!--bf-cond-start:s0-->${...}<!--bf-cond-end:s0-->`
@@ -269,7 +293,7 @@ export function emitMultiRootTemplateCloneLines(
   varEl: string,
   varExtras: string,
 ): string[] {
-  const isSvg = templateRootIsSvg(template)
+  const isSvg = multiRootTemplateNeedsSvgWrap(template)
   // Wrap in `<svg>` so the parser walks into SVG foreign content; we then
   // descend one level to pick up the per-item roots.
   const innerHtmlExpr = isSvg ? `\`<svg>${template}</svg>\`` : `\`${template}\``

package/src/ir-to-client-js/csr-substitute.ts

@@ -323,7 +323,7 @@ export function applyPropsRewrite(text: string, propsObjectName: string | null):
   return text.replace(new RegExp(`\\b${propsObjectName}\\.`, 'g'), `${PROPS_PARAM}.`)
 }
 
-function extractFreeIdentifiersFromText(text: string): Set<string> {
+export function extractFreeIdentifiersFromText(text: string): Set<string> {
   if (!text || text.trim().length === 0) return new Set()
   const sf = ts.createSourceFile(
     '__free_ids__.ts',
@@ -338,6 +338,59 @@ function extractFreeIdentifiersFromText(text: string): Set<string> {
   return extractFreeIdentifiersFromNode(expr)
 }
 
+/**
+ * Free identifiers referenced by a block of JS *statements* — e.g. an inner
+ * `.map()` callback's block-body preamble (`mapPreamble`, #1052). Unlike
+ * `extractFreeIdentifiersFromText`, which wraps its input in `(...)` to
+ * force single-expression parsing, statement text (`const x = ...;`) is
+ * not a valid expression and would fail to parse inside parens — parse it
+ * as top-level source instead. Used by nested-loop index-param reference
+ * gating (#2218).
+ */
+export function extractFreeIdentifiersFromStatementText(text: string): Set<string> {
+  if (!text || text.trim().length === 0) return new Set()
+  const sf = ts.createSourceFile(
+    '__free_ids_stmt__.ts',
+    text,
+    ts.ScriptTarget.Latest,
+    /* setParentNodes */ true,
+    ts.ScriptKind.TS,
+  )
+  return extractFreeIdentifiersFromNode(sf)
+}
+
+/**
+ * Free identifiers referenced inside a template-literal-style string's
+ * `${...}` interpolations — e.g. a nested loop's per-item HTML `template`
+ * (#2218). Wraps the text in backticks and parses it as a real
+ * `TemplateExpression` so brace balancing, string literals, and nested
+ * object/array literals inside `${...}` are handled correctly by the TS
+ * parser (AST-based — never the char-class regex `extractTemplateExpressions`
+ * in `identifiers.ts` uses for its looser references-graph pass). Safe by
+ * construction: the same `template` string is embedded verbatim inside a
+ * real backtick literal at emit time (`__t.innerHTML = \`${template}\``),
+ * so wrapping it here to parse mirrors exactly how it's already used.
+ */
+export function extractFreeIdentifiersFromTemplateText(template: string): Set<string> {
+  if (!template || template.length === 0) return new Set()
+  const sf = ts.createSourceFile(
+    '__free_ids_template__.ts',
+    `(\`${template}\`);`,
+    ts.ScriptTarget.Latest,
+    /* setParentNodes */ true,
+    ts.ScriptKind.TS,
+  )
+  const stmt = sf.statements[0]
+  if (!stmt || !ts.isExpressionStatement(stmt)) return new Set()
+  const expr = ts.isParenthesizedExpression(stmt.expression) ? stmt.expression.expression : stmt.expression
+  if (!ts.isTemplateExpression(expr)) return new Set()
+  const ids = new Set<string>()
+  for (const span of expr.templateSpans) {
+    for (const id of extractFreeIdentifiersFromNode(span.expression)) ids.add(id)
+  }
+  return ids
+}
+
 /**
  * Reduce a memo's `() => expr` source to the expression that should be
  * substituted in for `memoName()`. Matches the extraction done by the