@barefootjs/jsx 0.33.0 → 0.33.2

package/src/errors.ts

@@ -22,11 +22,24 @@ export const ErrorCodes = {
   // Signal/Memo errors (BF011-BF019)
   SIGNAL_OUTSIDE_COMPONENT: 'BF011',
 
-  // JSX errors (BF021-BF029)
+  // JSX errors (BF021-BF029). BF022 was retired (see
+  // `invalid-jsx-attribute.audit.test.ts`) and BF026 is reserved by
+  // `spec/callback-fidelity.md` for a future `.map()`-callback-shape
+  // diagnostic — BF027 is the next free slot.
   UNSUPPORTED_JSX_PATTERN: 'BF021',
   MISSING_KEY_IN_LIST: 'BF023',
   MISSING_KEY_IN_NESTED_LIST: 'BF024',
   UNSUPPORTED_DESTRUCTURE_REST: 'BF025',
+  // The component's return statement resolves to a bare identifier that
+  // refers to a local `const`/`let` whose initializer IS JSX (or a
+  // JSX-shaped ternary/`&&`/`||`/`??`), e.g. `const __root = <div/>; return
+  // __root`. JSX-child position resolves such identifiers through
+  // `jsxConstants` / `inlineableJsxConsts` (#547 / #1409), but return
+  // position deliberately does not (see `transformExpressionInner`'s
+  // docstring) — so the dispatcher's scalar-leaf fallback silently produces
+  // no IR and no diagnostic (#2720). Loud stopgap until the analyzer learns
+  // to resolve the identifier at return position too.
+  RETURN_VALUE_NOT_JSX: 'BF027',
 
   // Component errors (BF043-BF049)
   PROPS_DESTRUCTURING: 'BF043',
@@ -152,6 +165,9 @@ const errorMessages: Record<ErrorCode, string> = {
     // stable.
     'Computed property key in .map() callback destructure is not supported. Rewrite the callback to destructure explicit bindings (e.g., `({ a, b }) => ...`) so the compiler can rewrite references to per-item signal accessors.',
 
+  [ErrorCodes.RETURN_VALUE_NOT_JSX]:
+    "Component's return value is not recognized as JSX — return the JSX expression directly instead of binding it to a local variable first.",
+
   [ErrorCodes.PROPS_DESTRUCTURING]:
     'Props destructuring in function parameters breaks reactivity. Use props object directly.',
   [ErrorCodes.SIGNAL_GETTER_NOT_CALLED]:

package/src/expression-parser.ts

@@ -317,6 +317,32 @@ export type SortComparator = {
   keys: SortKey[]
 }
 
+/**
+ * Runtime registries of the sort-comparator catalogue's finite dimensions —
+ * the denominators for the coverage ledger's sort floor
+ * (`packages/adapter-tests/src/__tests__/coverage-map.test.ts`). This closes
+ * the comparator half of the change-time coupling rule
+ * (`spec/subset-conformance.md`) mechanically: the exhaustiveness pins below
+ * make widening {@link SortKey} without listing the new member here a compile
+ * error, and the floor test then makes shipping a listed member with no
+ * covering fixture a test failure — same drift defence `PARSED_EXPR_KINDS`
+ * and `ARRAY_METHOD_NAMES` provide for their halves.
+ */
+export const SORT_KEY_TYPES = ['numeric', 'string', 'auto'] as const satisfies ReadonlyArray<SortKey['type']>
+type MissingFromSortKeyTypes = Exclude<SortKey['type'], (typeof SORT_KEY_TYPES)[number]>
+const _sortKeyTypeRegistryIsExhaustive: MissingFromSortKeyTypes extends never ? true : never = true
+void _sortKeyTypeRegistryIsExhaustive
+
+export const SORT_KEY_TARGETS = ['self', 'field'] as const satisfies ReadonlyArray<SortKey['key']['kind']>
+type MissingFromSortKeyTargets = Exclude<SortKey['key']['kind'], (typeof SORT_KEY_TARGETS)[number]>
+const _sortKeyTargetRegistryIsExhaustive: MissingFromSortKeyTargets extends never ? true : never = true
+void _sortKeyTargetRegistryIsExhaustive
+
+export const SORT_KEY_DIRECTIONS = ['asc', 'desc'] as const satisfies ReadonlyArray<SortKey['direction']>
+type MissingFromSortKeyDirections = Exclude<SortKey['direction'], (typeof SORT_KEY_DIRECTIONS)[number]>
+const _sortKeyDirectionRegistryIsExhaustive: MissingFromSortKeyDirections extends never ? true : never = true
+void _sortKeyDirectionRegistryIsExhaustive
+
 /**
  * Flatten depth for `.flat(depth?)` (#1448 Tier C). A finite non-negative
  * integer flattens that many levels (`.flat()` defaults to `1`; a `0` or

package/src/index.ts

@@ -213,7 +213,7 @@ export { isValueReferenceIdentifier, collectValueReferencedNames } from './value
 // Expression Parser
 export { parseExpression, tsNodeToParsedExpr, asCallbackMethodCall, CALLBACK_METHODS, sortComparatorFromArrow, serializeParsedExpr, freeVarsInBody, freeIdentifiers, materializeGetterCalls, isSupported, isSupportedValue, exprToString, stringifyParsedExpr, identifierPath, parseBlockBody, parseBlockBodyTolerant, foldBlockToExpr, predicateTernaryToLogical, containsHigherOrder, extractArrowBodyExpression, parseStyleObjectEntries, hasUnsafeStyleValue, parseProviderObjectLiteral, type ProviderObjectMember, type FoldBlockOptions } from './expression-parser.ts'
 export type { StyleObjectEntry } from './expression-parser.ts'
-export { PARSED_EXPR_KINDS, ARRAY_METHOD_NAMES } from './expression-parser.ts'
+export { PARSED_EXPR_KINDS, ARRAY_METHOD_NAMES, SORT_KEY_TYPES, SORT_KEY_TARGETS, SORT_KEY_DIRECTIONS } from './expression-parser.ts'
 export type { ParsedExpr, ObjectLiteralProperty, ParsedStatement, SortComparator, SortKey, FlatDepth, SupportLevel, SupportResult, TemplatePart } from './expression-parser.ts'
 export { buildLoopChainExpr } from './loop-chain.ts'
 export type { LoopChainInputs } from './loop-chain.ts'

package/src/ir-to-client-js/collect-elements.ts

@@ -8,7 +8,7 @@ import { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM } from '
 import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings, buildLoopRowScope, anyNameIn } from './reactivity.ts'
 import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, renderFlatMapClientBody, renderFlatMapProjectionClientBody, flatMapCallbackHasKeyedLeaf, type SkeletonSlotPaths } from './html-template.ts'
 import { detectRootNamespaceWrapTag } from './control-flow/stringify/template-parse.ts'
-import { expandDynamicPropValue, expandConstantForReactivity } from './prop-handling.ts'
+import { expandDynamicPropValue, expandConstantForReactivity, resolveRestSpreadOrigin, resolveRestSpreadNames } from './prop-handling.ts'
 import { extractFreeIdentifiersFromText } from './csr-substitute.ts'
 import { walkIR, stopAt } from './walker.ts'
 import { buildLoopChainExpr } from '../loop-chain.ts'
@@ -325,24 +325,47 @@ export function collectInnerLoops(
         // param) silently dropped its text-child update effect while the
         // sibling attribute effect (ungated) still fired. Refs need to fire
         // on every renderItem invocation (#1244).
-        //   - events / conditionals: only in `collectBindings` (branch)
-        //     mode; the legacy non-branch path didn't wire them on
-        //     `NestedLoop` because event delegation handles them through
-        //     the parent's bindings instead.
+        //   - events: only in `collectBindings` (branch) mode; the
+        //     legacy non-branch path didn't wire them on `NestedLoop`
+        //     because event delegation handles them through the parent's
+        //     bindings instead.
+        //   - conditionals: collected for EVERY inner loop, branch or not
+        //     (#2706) — see the `stopAtReactiveConditionals: true` note
+        //     below for why this must not be gated the same way events are.
         const bindings: LoopChildBindings = emptyLoopChildBindings()
         // Hoisted: one Set per loop, not one per child (Copilot review).
         const innerPreambleNames = preambleNamesOf(n)
         if (ctx) {
           for (const child of n.children) {
-            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index))
-            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index))
+            // `stopAtReactiveConditionals: true` (#2347's parameter, #2706's
+            // fix here) — a per-item conditional inside THIS loop's own row
+            // now always gets its own `bindings.conditionals` entry (below)
+            // and its own `insert()`, regardless of branch/general mode.
+            // Descending past it here too (the pre-#2706 default) would
+            // double-bind: once via insert()'s bindEvents, once via this
+            // flat `insideConditional`-flagged reclaim-on-every-run effect
+            // — the latter is also unsound on its own, since nothing
+            // guarantees the branch's marker is mounted the moment this
+            // effect first runs (issue-2706-nested-loop-conditional-slot
+            // .test.ts's original repro).
+            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index))
+            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index))
             bindings.refs.push(...collectLoopChildRefs(child))
           }
+          bindings.conditionals.push(...collectLoopChildConditionals(
+            { type: 'fragment', children: n.children, loc: n.loc } as unknown as IRNode,
+            ctx,
+            siblingOffsets,
+            n.param,
+            n.paramBindings,
+            innerPreambleNames,
+            n.index,
+          ))
         }
 
         // Per-item bindings for branch-mode callers (child components,
-        // events, nested conditionals) — matches the pre-Phase 2
-        // `collectBranchInnerLoops` behaviour.
+        // events) — matches the pre-Phase 2 `collectBranchInnerLoops`
+        // behaviour. Conditionals are collected above, uniformly.
         let childComponents: import('../types.ts').IRLoopChildComponent[] | undefined
         if (collectBindings) {
           // skipConditionals=true: components inside conditional branches
@@ -369,18 +392,6 @@ export function collectInnerLoops(
           for (const child of n.children) {
             bindings.events.push(...collectLoopChildEventsWithNesting(child))
           }
-
-          if (ctx) {
-            bindings.conditionals.push(...collectLoopChildConditionals(
-              { type: 'fragment', children: n.children, loc: n.loc } as unknown as IRNode,
-              ctx,
-              siblingOffsets,
-              n.param,
-              n.paramBindings,
-              innerPreambleNames,
-              n.index,
-            ))
-          }
         }
 
         result.push({
@@ -486,23 +497,15 @@ function isSingleElementJsxChildren(nodes: IRNode[]): boolean {
   return nodes.length === 1 && nodes[0].type === 'element'
 }
 
-/** Build rest spread names from context (rest/props spreads handled by applyRestAttrs, not spreadAttrs). */
-function buildRestSpreadNames(ctx: ClientJsContext): Set<string> {
-  const names = new Set<string>()
-  if (ctx.restPropsName) names.add(ctx.restPropsName)
-  if (ctx.propsObjectName) names.add(ctx.propsObjectName)
-  return names
-}
-
 /** Build propsExpr for a child component from its IR props. */
 function buildComponentPropsExpr(props: IRProp[], ctx: ClientJsContext): string {
-  const restName = ctx.restPropsName
-  const propsObjName = ctx.propsObjectName
   const knownSpreadProp = props.find(p => {
     if (p.name !== '...' && !p.name.startsWith('...')) return false
     if (p.value.kind !== 'spread' && p.value.kind !== 'expression') return false
     const expr = p.value.kind === 'spread' ? p.value.expr : p.value.expr
-    return expr === restName || expr === propsObjName
+    // #2723: resolve through any `const x__alias = x` hop onto the
+    // rest/props binding — see `resolveRestSpreadOrigin`'s docstring.
+    return resolveRestSpreadOrigin(ctx, expr) !== null
   })
   const spreadSource = knownSpreadProp ? PROPS_PARAM : null
 
@@ -751,7 +754,7 @@ export function collectElements(
           // drops the parent's slot suffix automatically. Each iteration
           // owns a distinct scope identified by `data-key`, mirroring the
           // SSR template's renderChild emit.
-          staticItemTemplate = irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, undefined, undefined)
+          staticItemTemplate = irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, undefined, undefined)
         }
       } else if (l.children[0] && !projectionInner) {
         // Pass loopParams so expressions are wrapped at generation time,
@@ -760,8 +763,8 @@ export function collectElements(
         // in the emitted template literal are rewritten to `__bfItem()[1].color`.
         const loopParamSpec = [{ param: l.param, bindings: l.paramBindings }]
         template = useElementReconciliation
-          ? irToPlaceholderTemplate(l.children[0], buildRestSpreadNames(ctx), 0, loopParamSpec)
-          : irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0, loopParamSpec)
+          ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec)
+          : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec)
         // Static-array loops emit a `forEach((param, idx) => ...)` whose body
         // references the destructured param directly — `__bfItem()` is not in
         // scope there. Build a second template that skips the loop-param
@@ -777,8 +780,8 @@ export function collectElements(
           // markers, so SSR's parent-anchored shape and CSR's random-id
           // shape both resolve through the same lookup.
           staticItemTemplate = useElementReconciliation
-            ? irToPlaceholderTemplate(l.children[0], buildRestSpreadNames(ctx), 0)
-            : irToHtmlTemplate(l.children[0], buildRestSpreadNames(ctx), 0)
+            ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0)
+            : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0)
         } else if (!useElementReconciliation && !l.bodyIsMultiRoot && !l.bodyIsItemConditional) {
           // Hoisted shared-template fast path (perf): only for the plain
           // `mapArray` shape — single-root, dynamic array, no element
@@ -844,13 +847,13 @@ export function collectElements(
         flatMapClient: projectionInner
           ? {
               params: l.index ? `(${l.param}, ${l.index})` : `(${l.param})`,
-              body: renderFlatMapProjectionClientBody(projectionInner, buildRestSpreadNames(ctx)),
+              body: renderFlatMapProjectionClientBody(projectionInner, resolveRestSpreadNames(ctx)),
               keyed: projectionInner.key !== null,
             }
           : l.flatMapCallback
             ? {
                 params: l.flatMapCallback.params,
-                body: renderFlatMapClientBody(l.flatMapCallback, buildRestSpreadNames(ctx)),
+                body: renderFlatMapClientBody(l.flatMapCallback, resolveRestSpreadNames(ctx)),
                 keyed: flatMapCallbackHasKeyedLeaf(l.flatMapCallback),
               }
             : undefined,
@@ -953,9 +956,10 @@ function collectFromElement(element: IRElement, ctx: ClientJsContext, insideCond
       // Always use PROPS_PARAM as the source since the init function parameter is PROPS_PARAM.
       if (attr.name === '...' && attr.value) {
         const spreadVal = attrValueToString(attr.value) ?? ''
-        const elemRestName = ctx.restPropsName
-        const elemPropsObjName = ctx.propsObjectName
-        if (spreadVal && (spreadVal === elemRestName || spreadVal === elemPropsObjName)) {
+        // #2723: resolve through any `const x__alias = x` hop onto the
+        // rest/props binding — see `resolveRestSpreadOrigin`'s docstring.
+        const spreadOrigin = spreadVal ? resolveRestSpreadOrigin(ctx, spreadVal) : null
+        if (spreadOrigin !== null) {
           // `applyRestAttrs(_el, _p, exclude)` is handed the FULL props
           // object (`PROPS_PARAM`), not a computed JS rest binding, and the
           // runtime filters by SOURCE KEY (`source[key]`). So `exclude` must
@@ -974,7 +978,7 @@ function collectFromElement(element: IRElement, ctx: ClientJsContext, insideCond
           // caller-keyed (#2524 CSR half) — so the exclude list must use
           // the caller-facing key too, not the local binding name.
           const consumedKeys =
-            spreadVal === elemRestName ? ctx.propsParams.map(p => p.sourceName ?? p.name) : []
+            spreadOrigin === 'rest' ? ctx.propsParams.map(p => p.sourceName ?? p.name) : []
           const staticAttrKeys = element.attrs
             .filter(a => a.name !== '...')
             .map(a => a.name)
@@ -1124,7 +1128,7 @@ function collectBranchLoops(
   siblingOffsets: Map<IRLoop, IRNode[]>,
 ): BranchLoop[] {
   const loops: BranchLoop[] = []
-  const restNames = ctx ? buildRestSpreadNames(ctx) : undefined
+  const restNames = ctx ? resolveRestSpreadNames(ctx) : undefined
 
   walkIR<string | null>(node, null, {
     // Don't recurse into nested conditionals / if-statements.
@@ -1247,7 +1251,7 @@ function buildConditionalMetadata(
   ctx: ClientJsContext,
   siblingOffsets: Map<IRLoop, IRNode[]>,
 ): ConditionalElement {
-  const restNames = buildRestSpreadNames(ctx)
+  const restNames = resolveRestSpreadNames(ctx)
   // Use loopDepth=-1 so the first loop encountered inside the branch emits
   // data-key (depth 0) for its items, matching the mapArray item template
   // and event dispatcher convention. Matches irToComponentTemplate/generateCsrTemplate.

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

@@ -30,6 +30,8 @@ import {
 } from '../../utils.ts'
 import { buildChildRefBindings, buildStaticChildRefBindings } from '../shared.ts'
 import { renderPreamble, irToHtmlTemplate } from '../../html-template.ts'
+import { buildLoopChildConditionalsPlan } from './build-loop-child-arm.ts'
+import type { LoopChildConditionalPlan } from './loop-child-arm.ts'
 
 /**
  * Mirror of the helper in `build-loop-child-arm.ts` — kept local to avoid
@@ -160,6 +162,7 @@ function buildReactiveEmit(
   outerLoopParamBindings?: readonly LoopParamBinding[],
 ): InnerLoopReactiveEmit {
   const wrapInner = (expr: string) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings)
+  const wrapBoth = (expr: string) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings)
   const wrappedKey = inner.key
     ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings)
@@ -249,6 +252,21 @@ function buildReactiveEmit(
 
   const childRefs = buildChildRefBindings(inner.bindings.refs, inner.param, inner.paramBindings)
 
+  // Per-item conditionals inside THIS loop's own row (#2706) — same
+  // insert()-parity treatment the top-level loop's row conditionals
+  // already get (`buildLoopReactiveEffectsPlan`), now extended to a
+  // NESTED loop's row too. `scopeVar` is the row's own element
+  // (`__innerEl<uidSuffix>`, matching `stringifyInnerLoops`'s emission),
+  // and `wrapBoth` matches every other per-item expression in this emit
+  // (outer accessor, then inner accessor).
+  const conditionals: LoopChildConditionalPlan[] = buildLoopChildConditionalsPlan({
+    conditionals: inner.bindings.conditionals,
+    scopeVar: `__innerEl${uidSuffix}`,
+    wrap: wrapBoth,
+    loopParam: inner.param,
+    loopParamBindings: inner.paramBindings,
+  })
+
   return {
     mode: 'reactive',
     keyFn: loopKeyFn(inner),
@@ -261,6 +279,7 @@ function buildReactiveEmit(
     events,
     reactiveTexts,
     reactiveAttrs,
+    conditionals,
     childRefs,
   }
 }

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

@@ -190,6 +190,14 @@ export interface BuildBranchInnerLoopsArgs {
   innerLoops: readonly NestedLoop[] | undefined
   /** The variable expression naming the parent scope element (e.g. `__branchScope`). */
   scopeVar: string
+  /**
+   * The enclosing conditional's own slot id — every call site of this
+   * builder originates from a conditional branch's arm, so this is always
+   * a real id. Used as the `containerExpr` fallback (`findCondContainer`,
+   * #2705) for an inner loop whose IR never got a `containerSlotId` of its
+   * own (its wrapper element sits outside the branch's IR subtree).
+   */
+  condSlotId: string
   /** Outer loop param identifier (the conditional's enclosing loop). */
   outerLoopParam: string
   /** Outer loop param destructuring metadata. */
@@ -214,6 +222,7 @@ export function buildBranchInnerLoopsPlan(
   const {
     innerLoops,
     scopeVar,
+    condSlotId,
     outerLoopParam,
     outerLoopParamBindings,
     wrapOuter,
@@ -230,10 +239,15 @@ export function buildBranchInnerLoopsPlan(
 
     const csl = inner.containerSlotId
     // Inner loop's container: host-side `bf="<slot>"` slot marker first,
-    // then (bf-h, bf-m) when the container is itself a child scope.
+    // then (bf-h, bf-m) when the container is itself a child scope. When
+    // neither exists — the loop's own IR never got a `containerSlotId`
+    // because its wrapper element sits outside the branch's IR subtree
+    // (#2705) — resolve via the conditional's OWN comment marker instead
+    // of falling back to the whole branch scope, which may be several
+    // elements wider than the loop's actual container.
     const containerExpr = csl
       ? `(${scopeVar}.querySelector('[bf="${csl}"]') ?? ${scopeVar}.querySelector(\`[${BF_HOST}="\${__scopeId}"][${BF_AT}="${csl}"]\`) ?? ${scopeVar})`
-      : scopeVar
+      : `findCondContainer(${scopeVar}, '${condSlotId}')`
 
     const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings)
     const wrappedKey = inner.key
@@ -372,12 +386,14 @@ export function buildLoopChildConditionalsPlan(
         wrap,
         loopParam,
         loopParamBindings,
+        condId: cond.slotId,
       }),
       whenFalseArm: buildLoopChildArmPlan({
         branch: cond.whenFalse,
         wrap,
         loopParam,
         loopParamBindings,
+        condId: cond.slotId,
       }),
     })
   }
@@ -439,10 +455,12 @@ interface BuildLoopChildArmArgs {
   wrap: (expr: string) => string
   loopParam: string
   loopParamBindings?: readonly LoopParamBinding[]
+  /** The enclosing conditional's own slot id — threaded to `buildBranchInnerLoopsPlan`'s `condSlotId` (#2705). */
+  condId: string
 }
 
 function buildLoopChildArmPlan(args: BuildLoopChildArmArgs): LoopChildArmPlan {
-  const { branch, wrap, loopParam, loopParamBindings } = args
+  const { branch, wrap, loopParam, loopParamBindings, condId } = args
   return {
     events: buildBranchEventBindingsPlan({
       events: branch.events,
@@ -455,6 +473,7 @@ function buildLoopChildArmPlan(args: BuildLoopChildArmArgs): LoopChildArmPlan {
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: '__branchScope',
+      condSlotId: condId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap,

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

@@ -110,8 +110,8 @@ export function buildReactiveEffectsPlan(
         wrappedCondition: wrap(cond.condition),
         whenTrueTemplateHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
         whenFalseTemplateHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
-        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, profileComponentName),
-        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
+        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
         ...(cond.readsPreamble && { readsPreamble: true }),
       })
     }
@@ -130,6 +130,8 @@ function buildOuterArm(
   wrap: (expr: string) => string,
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
+  /** The conditional's own slot id — threaded to `buildBranchInnerLoopsPlan`'s `condSlotId` (#2705). */
+  condSlotId: string,
   profileComponentName?: string,
 ): LoopChildArmPlan {
   return {
@@ -145,6 +147,7 @@ function buildOuterArm(
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: '__branchScope',
+      condSlotId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap,

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

@@ -17,6 +17,7 @@ import type {
   LoopParamBinding,
 } from '../../../types.ts'
 import type { LoopChildRefBinding } from './loop.ts'
+import type { LoopChildConditionalPlan } from './loop-child-arm.ts'
 
 /**
  * Body-entry statements emitted in order at the top of a `mapArray`
@@ -148,6 +149,17 @@ export interface InnerLoopReactiveEmit {
   reactiveTexts: readonly InnerLoopText[]
   /** Pre-wrapped reactive attribute effects for the inner-item body. */
   reactiveAttrs: readonly InnerLoopReactiveAttr[]
+  /**
+   * Per-item conditionals inside THIS loop's own row (#2706) — each gets
+   * its own `insert()` call, the same insert()-parity the top-level loop's
+   * row conditionals already have (`ReactiveEffectsPlan.conditionals`).
+   * Before this field existed, a per-item conditional inside a nested
+   * loop's row was baked into the static row template ONCE at row
+   * creation and never revisited — silently frozen against later signal
+   * changes — while its reactive text still (unsoundly) assumed insert()
+   * kept the branch's marker around.
+   */
+  conditionals: readonly LoopChildConditionalPlan[]
   /** Pre-wrapped imperative ref callbacks for the inner-item body (#1244). */
   childRefs: readonly LoopChildRefBinding[]
 }

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

@@ -14,6 +14,7 @@
  *     <indent>  emitComponentAndEventSetup(...)
  *     <indent>  recurse on childLevels
  *     <indent>  reactive text effects
+ *     <indent>  per-item conditionals: insert() over __innerEl<uid> (#2706)
  *     <indent>  return __innerEl<uid>
  *     <indent>}) }
  *
@@ -36,6 +37,7 @@ import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { emitMultiRootTemplateCloneLines, namespaceWrapForTemplate } from './template-parse.ts'
 import { emitLoopChildRefs } from './loop.ts'
 import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
+import { stringifyLoopChildConditionals } from './loop-child-arm.ts'
 import type {
   InnerLoopPlan,
   InnerLoopsPlan,
@@ -139,6 +141,13 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string, pc:
     }
     lines.push(`${indent}  }${profileBindingId(pc, attr.slotId)}) }`)
   }
+  // Per-item conditionals inside THIS loop's own row (#2706) — each is a
+  // real `insert()` over `__innerEl<uid>`, not a bake-once-at-creation
+  // ternary. Mirrors `stringifyBranchInnerLoops`'s identical call for a
+  // branch-scoped inner loop's own conditionals.
+  if (emit.conditionals.length > 0) {
+    stringifyLoopChildConditionals(lines, emit.conditionals, `${indent}  `, pc)
+  }
   // Imperative ref callbacks fire on every renderItem invocation, which
   // means every mount: SSR hydration, initial CSR creation, and same-key
   // remount after unmount (#1244).

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

@@ -553,7 +553,13 @@ function seedDiffersExpr(target: string, a: LazyRowAttrBinding): string {
   if (a.attrName === 'dangerouslySetInnerHTML' || html === 'dangerouslySetInnerHTML') return 'true'
   if (html === 'style') return `${target}.getAttribute('style') !== styleToCss(__x)`
   if (html === 'class') return `${target}.getAttribute('class') !== (__x != null ? String(__x) : null)`
-  if (html === 'value') return `${target}.value !== String(__x)`
+  // Mirrors `emitValueUpdateStatements`'s runtime `'value' in target` gate
+  // (#2716): a target with no native `.value` property never gets one
+  // written, so the seed-diff must compare against the ATTRIBUTE it would
+  // actually receive there, not the (absent) property.
+  if (html === 'value') {
+    return `('value' in ${target} ? ${target}.value !== String(__x) : ${target}.getAttribute('value') !== String(__x))`
+  }
   if (isBooleanAttr(html)) return `${target}.${html} !== !!(__x)`
   if (a.meta.presenceOrUndefined) {
     // Compare the VALUE the writer would produce, not just presence.

package/src/ir-to-client-js/element-refs.ts

@@ -71,6 +71,14 @@ export function generateElementRefs(ctx: ClientJsContext): string {
     regularSlots.delete(slotId)
   }
 
+  // The component's own `comment: true` root slot needs no `$c` ref at
+  // all — its consumers (provider-and-child-inits.ts, emit-reactive.ts)
+  // reference `__scope` directly instead (#2649, see
+  // `ClientJsContext.commentScopeRootSlotId`'s docstring).
+  if (ctx.commentScopeRootSlotId) {
+    componentSlots.delete(ctx.commentScopeRootSlotId)
+  }
+
   if (regularSlots.size === 0 && componentSlots.size === 0) return ''
 
   const refLines: string[] = []