@barefootjs/jsx 0.5.2 → 0.5.3

package/src/ir-to-client-js/plan/static-array-child-init.ts

@@ -75,7 +75,7 @@ export interface OuterNestedInitPlan {
   arrayExpr: string
   param: string
   indexParam: string
-  /** `indexParam` or `${indexParam} + ${siblingOffset}` — already substituted. */
+  /** `indexParam` plus any sibling-offset terms (`+ 1 + (arr).length`) — already substituted. */
   offsetExpr: string
   /**
    * Outer `.map()` callback preamble locals (#1064), emitted inside the
@@ -99,7 +99,7 @@ export interface InnerLoopNestedInitPlan {
   outerArrayExpr: string
   outerParam: string
   outerIndexParam: string
-  /** Outer offset — `outerIndexParam` or `${outerIndexParam} + ${siblingOffset}`. */
+  /** Outer offset — `outerIndexParam` plus any sibling-offset terms. */
   outerOffsetExpr: string
   /**
    * Outer `.map()` callback preamble locals, emitted after the
@@ -115,7 +115,7 @@ export interface InnerLoopNestedInitPlan {
   innerContainerSlotId: string | null
   innerArrayExpr: string
   innerParam: string
-  /** Inner offset — `__innerIdx` or `__innerIdx + ${siblingOffset}`. */
+  /** Inner offset — `__innerIdx` plus any sibling-offset terms. */
   innerOffsetExpr: string
   /**
    * Inner `.map()` callback preamble locals, emitted after the

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

@@ -166,6 +166,29 @@ export interface ConditionalBranchReactiveAttr extends AttrMeta {
   expression: string
 }
 
+/**
+ * How many element children precede a loop's items in its container — the
+ * offset applied to `container.children[idx]` so each item resolves to the
+ * right element during hydration.
+ *
+ * Two contributions, kept distinct because they codegen differently:
+ *   - `staticCount`: siblings of statically-known element count, folded to a
+ *     compile-time integer (`+ 1`).
+ *   - `dynamicTerms`: one JS expression per sibling whose element count is
+ *     only known at runtime — a preceding `.map()` (`(arr).length`) or a
+ *     preceding conditional (`(cond ? 1 : 0)`) — each added as `+ <term>`.
+ *
+ * Carried as one value object end-to-end (collect → IR loop → plan → codegen)
+ * so a future offset contributor is added in one place, not threaded as a new
+ * field through every layer (#1693).
+ */
+export interface LoopOffset {
+  /** Folded element count of statically-sized preceding siblings. `0` = none. */
+  staticCount: number
+  /** Runtime element-count expressions of dynamic preceding siblings; `[]` = none. */
+  dynamicTerms: readonly string[]
+}
+
 /**
  * Fields shared by every flavour of collected loop (top-level, branch-scoped, nested).
  * The three loop-info variants (`TopLevelLoop`, `BranchLoop`, `NestedLoop`) each extend
@@ -363,8 +386,8 @@ export interface NestedLoop extends LoopCore {
   childComponents?: import('../types').IRLoopChildComponent[]
   /** True when this loop is inside a conditional branch (handled by insert() bindEvents instead) */
   insideConditional?: boolean
-  /** Number of non-loop DOM siblings before this loop in its container element */
-  siblingOffset?: number
+  /** Offset of this loop's items past its preceding container siblings (#1693). */
+  offset?: LoopOffset
   // Per-item bindings (events / reactiveAttrs / reactiveTexts / refs / conditionals)
   // now live on `LoopCore.bindings` — see issue #1244 §B.
 }
@@ -468,8 +491,8 @@ export interface TopLevelLoop extends LoopCore {
   useElementReconciliation?: boolean // True: reconcileElements + composite rendering (native root with child components)
   /** Inner loop metadata for composite element reconciliation (array, param, key, container) */
   innerLoops?: NestedLoop[]
-  /** Number of non-loop DOM siblings before this loop in its parent element. Used to offset children[idx] access. */
-  siblingOffset?: number
+  /** Offset of this loop's items past its preceding container siblings (#1693). */
+  offset?: LoopOffset
   filterPredicate?: {
     param: string
     raw: string  // Original filter predicate expression or block body

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

@@ -5,7 +5,7 @@
 
 import ts from 'typescript'
 import type { AttrValue, IRTemplatePart, LoopParamBinding, FreeReference, IRNode } from '../types'
-import type { TopLevelLoop, BranchLoop } from './types'
+import type { TopLevelLoop, BranchLoop, LoopOffset } from './types'
 import { buildLoopChainExpr } from '../loop-chain'
 import {
   iterateJsTokens,
@@ -145,6 +145,46 @@ export function buildChainedArrayExpr(elem: TopLevelLoop | BranchLoop): string {
   })
 }
 
+/**
+ * The single source of truth for what contributes to a loop's child-index
+ * offset: the static sibling count (a folded integer) followed by one
+ * `(arr).length` term per preceding sibling loop. The additive and
+ * subtractive forms below are thin projections over this list, so they can
+ * never drift in which terms they include, and a new offset contributor is
+ * added here once rather than in every consumer (#1693).
+ */
+function loopOffsetTerms(offset: LoopOffset | undefined): string[] {
+  if (!offset) return []
+  const terms: string[] = []
+  if (offset.staticCount) terms.push(String(offset.staticCount))
+  terms.push(...offset.dynamicTerms)
+  return terms
+}
+
+/**
+ * Build the additive `children[idx]` access expression for a loop's items —
+ * `indexParam` plus every offset term.
+ *
+ * Examples:
+ *   - no offset                  → `__idx`
+ *   - one static sibling         → `__idx + 1`
+ *   - one preceding `.map()`     → `__idx + (arr).length`
+ *   - static sibling + 2 `.map()`→ `__idx + 1 + (a).length + (b).length`
+ */
+export function buildLoopChildIndexExpr(indexParam: string, offset: LoopOffset | undefined): string {
+  return [indexParam, ...loopOffsetTerms(offset)].join(' + ')
+}
+
+/**
+ * Build the subtractive counterpart of `buildLoopChildIndexExpr` — used by
+ * event delegation to recover a loop item's array index from its DOM child
+ * index. Returns the trailing `` - <static> - (arr).length …`` suffix (empty
+ * when there is no offset) appended after `…indexOf(__el)`.
+ */
+export function buildLoopChildIndexSubtraction(offset: LoopOffset | undefined): string {
+  return loopOffsetTerms(offset).map(term => ` - ${term}`).join('')
+}
+
 /**
  * Map of JSX event names to DOM event property names.
  * JSX uses React-style naming (e.g., onDoubleClick) which gets converted to