@barefootjs/jsx 0.33.0 → 0.33.1

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[] = []

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

@@ -28,6 +28,57 @@ function bindingIdArg(ctx: ClientJsContext, slotId: string | undefined): string
   return `, ${JSON.stringify(`${ctx.componentName}#binding:${slotId}`)}`
 }
 
+/**
+ * Generate statements that write a `value` HTML ATTRIBUTE the developer
+ * wrote directly on an element (`<div value={x}>`, a loop row's `<li
+ * value={x}>`, …) — SSR renders that same attribute, so hydration keeping
+ * it in sync is exactly the contract. Gated at runtime to elements that
+ * ALREADY expose a native `.value` IDL property (`'value' in target` —
+ * form controls, but also e.g. `<li value>`; the same duck-type check
+ * `applyRestAttrs` uses, deliberately not a tag-name allowlist), because
+ * for those `setAttribute('value', x)` only sets the INITIAL HTML
+ * attribute and the live property is required after user interaction; any
+ * other element falls back to a plain attribute write, which still matches
+ * what SSR rendered there. Writing the live property unconditionally would
+ * plant an expando SSR never had — a hydrated/SSR DOM-state divergence and a
+ * hazard for anything that duck-types form controls via `'value' in el`
+ * (#2716).
+ *
+ * NOT for the child-component-root `value` MIRROR (`emitReactivePropBindings`
+ * / `emitReactiveChildProps` reflecting a named prop onto a child's root
+ * element) — that mechanism has no SSR-rendered counterpart at all
+ * regardless of prop name, so an attribute fallback there would itself
+ * plant a fresh SSR/hydrate divergence; see `emitChildValueMirrorStatements`.
+ */
+function emitValueUpdateStatements(target: string, expression: string): string[] {
+  return [
+    `const __val = String(${expression})`,
+    `if ('value' in ${target}) { if (${target}.value !== __val) ${target}.value = __val } else { ${target}.setAttribute('value', __val) }`,
+  ]
+}
+
+/**
+ * `value`-prop write for the CHILD-ROOT MIRROR mechanism
+ * (`emitReactivePropBindings` / `emitReactiveChildProps`, both reactively
+ * reflect a parent-passed NAMED PROP onto a child component's root DOM
+ * element). Unlike a developer-authored `value=` attribute
+ * (`emitValueUpdateStatements`), this mirror has NO SSR-rendered
+ * counterpart at all — SSR never puts a `value` attribute on a child's
+ * root just because the parent passed a `value` prop. So a root WITHOUT a
+ * native `.value` property gets NOTHING written — not even an attribute
+ * (confirmed against the oracle's structural-HTML comparison, #2716: an
+ * attribute fallback here reintroduced a fresh SSR/hydrate divergence one
+ * layer down from the IDL-property expando this replaces). A root that
+ * already exposes `.value` (`'value' in target`, same duck-type gate as
+ * the direct-attribute case) still gets the live controlled-value
+ * property.
+ */
+function emitChildValueMirrorStatements(target: string, expression: string): string[] {
+  return [
+    `if ('value' in ${target}) { const __val = String(${expression}); if (${target}.value !== __val) ${target}.value = __val }`,
+  ]
+}
+
 /**
  * Generate JS statements to update a DOM attribute reactively.
  * Centralizes the attribute-type dispatch (value, class, boolean, presence, generic)
@@ -55,10 +106,7 @@ export function emitAttrUpdate(target: string, attrName: string, expression: str
     ]
   }
   if (htmlName === 'value') {
-    return [
-      `const __val = String(${expression})`,
-      `if (${target}.value !== __val) ${target}.value = __val`,
-    ]
+    return emitValueUpdateStatements(target, expression)
   }
   if (isBooleanAttr(htmlName)) {
     return [`${target}.${htmlName} = !!(${expression})`]
@@ -462,37 +510,43 @@ export function emitReactivePropBindings(lines: string[], ctx: ClientJsContext):
     }
 
     for (const [slotId, props] of propsBySlot) {
-      const v = varSlotId(slotId)
-      lines.push(`    if (_${v}) {`)
+      // The component's own `comment: true` root child IS `__scope` — no
+      // `$c` ref was declared for it (element-refs.ts), so reference
+      // `__scope` directly instead of a `_sN` var that doesn't exist
+      // (#2649, see `ClientJsContext.commentScopeRootSlotId`'s docstring).
+      const ref = slotId === ctx.commentScopeRootSlotId ? '__scope' : `_${varSlotId(slotId)}`
+      lines.push(`    if (${ref}) {`)
       for (const prop of props) {
         const value = `${prop.expression}()`
         if (prop.propName === 'selected') {
           if (prop.componentName === 'TabsContent') {
-            lines.push(`      _${v}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`)
+            lines.push(`      ${ref}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`)
             lines.push(`      if (${value}) {`)
-            lines.push(`        _${v}.classList.remove('hidden')`)
+            lines.push(`        ${ref}.classList.remove('hidden')`)
             lines.push(`      } else {`)
-            lines.push(`        _${v}.classList.add('hidden')`)
+            lines.push(`        ${ref}.classList.add('hidden')`)
             lines.push(`      }`)
           } else {
             // Update data-state and aria-selected attributes.
             // Visual styling is driven by CSS data-[state=active/inactive]: selectors.
-            lines.push(`      _${v}.setAttribute('aria-selected', String(${value}))`)
-            lines.push(`      _${v}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`)
-            lines.push(`      _${v}.setAttribute('tabindex', ${value} ? '0' : '-1')`)
+            lines.push(`      ${ref}.setAttribute('aria-selected', String(${value}))`)
+            lines.push(`      ${ref}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`)
+            lines.push(`      ${ref}.setAttribute('tabindex', ${value} ? '0' : '-1')`)
           }
-        // Use DOM property assignment for value and boolean attrs.
-        // setAttribute('value', x) only sets the initial HTML attribute; after user
-        // interaction the DOM property diverges, so .value = x is required.
+        // Use DOM property assignment for value and boolean attrs, but only
+        // on genuine form controls — see `emitChildValueMirrorStatements`'s
+        // docstring (#2716). `ref` here is a named prop's MIRROR target
+        // element (a child component's arbitrary root), not necessarily a
+        // form control, and this mirror has no SSR-rendered counterpart to
+        // fall back to.
         // Boolean attrs (disabled, checked, etc.) treat any attribute presence as
         // truthy, so setAttribute('disabled', 'false') still disables the element.
         } else if (prop.propName === 'value') {
-          lines.push(`      const __val = String(${value})`)
-          lines.push(`      if (_${v}.value !== __val) _${v}.value = __val`)
+          for (const stmt of emitChildValueMirrorStatements(ref, value)) lines.push(`      ${stmt}`)
         } else if (isBooleanAttr(prop.propName)) {
-          lines.push(`      _${v}.${prop.propName} = !!(${value})`)
+          lines.push(`      ${ref}.${prop.propName} = !!(${value})`)
         } else {
-          lines.push(`      _${v}.setAttribute('${prop.propName}', String(${value}))`)
+          lines.push(`      ${ref}.setAttribute('${prop.propName}', String(${value}))`)
         }
       }
       lines.push(`    }`)
@@ -520,13 +574,27 @@ export function emitReactiveChildProps(lines: string[], ctx: ClientJsContext): v
 
     for (const [, props] of propsByComponent) {
       const first = props[0]
+      // The component's own `comment: true` root child IS `__scope` — query
+      // it directly rather than through `$c`, which cannot tell "I already
+      // am this slot" apart from a coincidentally-matching descendant
+      // (#2649, see `ClientJsContext.commentScopeRootSlotId`'s docstring).
+      const isCommentRoot = first.slotId !== null && first.slotId === ctx.commentScopeRootSlotId
       const varSuffix = first.slotId ? varSlotId(first.slotId).replace(/-/g, '_') : first.componentName
-      const varName = `__${first.componentName}_${varSuffix}El`
-      const selectorArg = first.slotId ? first.slotId : first.componentName
-      lines.push(`    const [${varName}] = $c(__scope, '${selectorArg}')`)
+      const varName = isCommentRoot ? '__scope' : `__${first.componentName}_${varSuffix}El`
+      if (!isCommentRoot) {
+        const selectorArg = first.slotId ? first.slotId : first.componentName
+        lines.push(`    const [${varName}] = $c(__scope, '${selectorArg}')`)
+      }
       lines.push(`    if (${varName}) {`)
       for (const prop of props) {
-        for (const stmt of emitAttrUpdate(varName, prop.attrName, prop.expression, prop)) {
+        // `value` is the CHILD-ROOT MIRROR case, not a developer-authored
+        // attribute — route it through the no-SSR-fallback helper instead
+        // of `emitAttrUpdate`'s generic (attribute-fallback) dispatch;
+        // see `emitChildValueMirrorStatements`'s docstring (#2716).
+        const stmts = toHtmlAttrName(prop.attrName) === 'value'
+          ? emitChildValueMirrorStatements(varName, prop.expression)
+          : emitAttrUpdate(varName, prop.attrName, prop.expression, prop)
+        for (const stmt of stmts) {
           lines.push(`      ${stmt}`)
         }
       }

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

@@ -11,6 +11,11 @@ import { identifierCallPattern } from '../identifier-pattern.ts'
 export const RUNTIME_IMPORT_CANDIDATES = [
   'createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount',
   'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'mapArrayLazy', 'patchLeaf', 'createDisposableEffect',
+  // Resolves the real DOM container for a loop nested inside a loop-row
+  // conditional's branch when the conditional's wrapper element carries no
+  // `bf="<slot>"` marker of its own (#2705) — see `findCondContainer`'s
+  // docstring (runtime/insert.ts) for why the marker collector can't see it.
+  'findCondContainer',
   'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild',
   // Connects a template-clone loop row before the body's tail runs, so a child
   // that inits inside it resolves context against real ancestors rather than

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

@@ -185,6 +185,10 @@ function createContext(
     refElements: [],
     childInits: [],
     deferredChildSlots: new Set(),
+    // Mirrors `emit-registration.ts`'s `isCommentScope` component-root
+    // disjunct (not the fragment disjunct — that case is disambiguated at
+    // runtime by `commentScopeRegistry`, not by this slot-id shortcut).
+    commentScopeRootSlotId: ir.root.type === 'component' ? ir.root.slotId : null,
     reactiveProps: [],
     reactiveChildProps: [],
     reactiveAttrs: [],

package/src/ir-to-client-js/phases/provider-and-child-inits.ts

@@ -39,7 +39,11 @@ export function emitProviderAndChildInits(lines: string[], ctx: ClientJsContext)
         lines.push(`  upsertChild(__scope, '${registryName}', '${child.slotId}', ${child.propsExpr})`)
         continue
       }
-      const scopeRef = child.slotId ? `_${varSlotId(child.slotId)}` : '__scope'
+      // The component's own `comment: true` root child IS `__scope` (no
+      // separate DOM node exists for it to be looked up at) — see
+      // `ClientJsContext.commentScopeRootSlotId`'s docstring (#2649).
+      const isCommentRoot = child.slotId !== null && child.slotId === ctx.commentScopeRootSlotId
+      const scopeRef = !child.slotId || isCommentRoot ? '__scope' : `_${varSlotId(child.slotId)}`
       lines.push(`  initChild('${registryName}', ${scopeRef}, ${child.propsExpr})`)
     }
   }

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

@@ -102,6 +102,27 @@ export interface ClientJsContext {
    * registration-template emit so both agree on which children defer.
    */
   deferredChildSlots: Set<string>
+  /**
+   * Slot id of the component's own root, when the ENTIRE render is a single
+   * child component call (`ir.root.type === 'component'` — the IR shape is
+   * the sole source of truth; `emit-registration.ts`'s `isCommentScope`
+   * derives the def's `comment: true` from the same shape). Such a child
+   * never gets its own DOM node: `materializeComponent`/`renderChild` leave
+   * `bf-s` unset and the child's markup becomes `__scope` itself (#2649).
+   * A generic `$c(__scope, slotId)` lookup for this one slot is therefore
+   * not just redundant but actively ambiguous — a genuine grandchild
+   * nested inside it can derive a `bf-s` whose suffix collides with this
+   * same slot id (see `component.ts`'s `_parentScopeId` push), and
+   * `$cSingle` cannot tell "I already am this slot" apart from "a
+   * coincidentally-matching descendant is this slot" from the DOM alone.
+   * Emission sites that would otherwise query this slot via `$c`
+   * (`element-refs.ts`, `provider-and-child-inits.ts`,
+   * `emit-reactive.ts`) use `__scope` directly instead, sidestepping the
+   * ambiguity entirely rather than trying to make the query precise
+   * enough to resolve it. `null` for a component whose root is a regular
+   * element/fragment (the overwhelmingly common case).
+   */
+  commentScopeRootSlotId: string | null
   reactiveProps: ReactiveComponentProp[]
   reactiveChildProps: ReactiveChildProp[]
   reactiveAttrs: ReactiveAttribute[]

package/src/jsx-to-ir.ts

@@ -1066,7 +1066,37 @@ function buildIRRoot(analyzer: AnalyzerContext): IRNode | null {
   // scope; the inner IR must not double-mark a nested element as root.
   ctx.isRoot = false
   const ir = transformJsxExpression(jsxReturn, ctx)
-  if (ir === null) return null
+  if (ir === null) {
+    // BF027 (#2720): a bare identifier at return position that names a
+    // local `const`/`let` PROVEN to hold JSX (`jsxConstants` — pure JSX
+    // literal; `inlineableJsxConsts` — a JSX-shaped ternary/`&&`/`||`/`??`)
+    // is the "returned JSX through a local variable" shape. Return position
+    // deliberately does not resolve identifiers the way JSX-child position
+    // does (see the #547/#1409 inlining above), so the scalar-leaf fallback
+    // would otherwise drop this component with zero files and zero
+    // diagnostics. Scoped to identifiers already proven JSX-holding by
+    // those two maps so an ordinary non-JSX return (`return 42`, `return
+    // someHelperResult`) — including from a PascalCase-but-not-a-component
+    // export the analyzer's syntactic component detector still matches —
+    // stays silent exactly as before.
+    if (
+      ts.isIdentifier(jsxReturn) &&
+      (analyzer.jsxConstants.has(jsxReturn.text) || analyzer.inlineableJsxConsts.has(jsxReturn.text))
+    ) {
+      analyzer.errors.push(createError(
+        ErrorCodes.RETURN_VALUE_NOT_JSX,
+        getSourceLocation(jsxReturn, analyzer.sourceFile, analyzer.filePath),
+        {
+          message:
+            `Component '${analyzer.componentName ?? '(unknown)'}' return value is not recognized ` +
+            `as JSX — return the JSX expression directly instead of binding it to a local variable ` +
+            `first (\`return ${jsxReturn.text}\` after \`const ${jsxReturn.text} = <jsx/>\` is not ` +
+            `resolved at return position).`,
+        },
+      ))
+    }
+    return null
+  }
   return wrapInScopeElement(ir)
 }
 
@@ -6999,6 +7029,100 @@ function getStringValue(node: ts.Expression): string | null {
 // Component Props Processing
 // =============================================================================
 
+/**
+ * Strip every legal-in-.tsx TRANSPARENT TS wrapper around an expression —
+ * parens, `as`, `satisfies`, and postfix non-null `!` — repeatedly, so a
+ * stack of them (`(x as any)!`) unwraps in one call. None of these change
+ * the RUNTIME value; they are compile-time-only annotations TypeScript
+ * erases, so a caller checking "is this JSX" (or "does this ternary/array
+ * wrap JSX") must see through all of them to avoid false negatives (#2703
+ * Copilot review on #2667: `header={cond ? (<a/> as any) : (<b/> as any)}`
+ * unwrapped only parens, so the `as`-wrapped shape slipped past the naked-
+ * wrapper refusal and still spliced raw JSX into the client bundle).
+ * Angle-bracket type assertions (`<any>x`) are illegal in `.tsx` — the
+ * `<` is always JSX — so there is no fourth wrapper kind to handle here.
+ */
+function unwrapTransparentTsWrappers(node: ts.Expression): ts.Expression {
+  let n = node
+  while (
+    ts.isParenthesizedExpression(n) ||
+    ts.isAsExpression(n) ||
+    ts.isSatisfiesExpression(n) ||
+    ts.isNonNullExpression(n)
+  ) {
+    n = n.expression
+  }
+  return n
+}
+
+/**
+ * Whether `node` (a `ConditionalExpression` or `ArrayLiteralExpression`
+ * already confirmed by the caller) has JSX syntax somewhere inside it —
+ * a ternary arm that is (or recursively resolves to) a JSX element/
+ * fragment, or an array element that is one. Used by #2667's naked-
+ * wrapper refusal: a ternary/array prop initializer with NO JSX inside
+ * (`disabled={cond ? a : b}`, `items={[a, b]}`) is ordinary and must keep
+ * compiling exactly as before — only the JSX-carrying shape is refused.
+ *
+ * Deliberately narrow, mirroring `expressionContainsJsx`'s sibling scope
+ * in `analyzer.ts`-adjacent code: only descends through transparent TS
+ * wrappers (`unwrapTransparentTsWrappers`), `ConditionalExpression` arms,
+ * and `ArrayLiteralExpression` elements (spread elements unwrapped too)
+ * — the two wrapper shapes the issue names, each itself possibly
+ * TS-wrapped (`(cond ? <a/> : <b/>) as any`, `cond ? (<a/> as any) : <b/>`,
+ * #2703). It does not chase JSX through arbitrary call arguments, object
+ * literals, or logical expressions; those are out of this refusal's
+ * scope and stay on the pre-existing (working, non-JSX) expression path.
+ */
+function expressionWrapsJsx(node: ts.Expression): boolean {
+  const n = unwrapTransparentTsWrappers(node)
+  if (ts.isJsxElement(n) || ts.isJsxSelfClosingElement(n) || ts.isJsxFragment(n)) return true
+  if (ts.isConditionalExpression(n)) {
+    return expressionWrapsJsx(n.whenTrue) || expressionWrapsJsx(n.whenFalse)
+  }
+  if (ts.isArrayLiteralExpression(n)) {
+    return n.elements.some((el) => expressionWrapsJsx(ts.isSpreadElement(el) ? el.expression : el))
+  }
+  return false
+}
+
+/**
+ * Refuse a component prop whose initializer is a ternary/array literally
+ * wrapping JSX (#2667) — see `expressionWrapsJsx`'s docstring and the call
+ * site above for why this can't fall through to the plain `expression`
+ * AttrValue path (raw JSX syntax would splice into the emitted client
+ * JS) and why the fragment-wrap escape is NOT offered here (BF021 message
+ * below explains the unsoundness inline; see #2667's tracking issue for
+ * the full door-inventory finding).
+ */
+function reportNakedJsxWrapperProp(
+  ctx: TransformContext,
+  attr: ts.JsxAttribute,
+  propName: string,
+  jsxExpr: ts.Expression,
+): void {
+  const shape = ts.isConditionalExpression(jsxExpr) ? 'a ternary' : 'an array literal'
+  ctx.analyzer.errors.push(
+    createError(ErrorCodes.UNSUPPORTED_JSX_PATTERN, getSourceLocation(attr, ctx.sourceFile, ctx.filePath), {
+      message:
+        `Prop '${propName}' is ${shape} wrapping JSX (${jsxExpr.getText(ctx.sourceFile)}). ` +
+        `This shape is not compiled — only a JSX element/fragment given DIRECTLY as the prop value is.`,
+      suggestion: {
+        message:
+          `Move the conditional/array out of the prop position: compute it in a local ` +
+          `const and pass it as the component's children instead of a named prop ` +
+          `(e.g. const ${propName} = ${jsxExpr.getText(ctx.sourceFile)}; <Comp>{${propName}}</Comp>). ` +
+          `Wrapping the ternary/array in a fragment at the prop position ` +
+          `(${propName}={<>{${jsxExpr.getText(ctx.sourceFile)}}</>}) is NOT a safe escape here: it compiles, ` +
+          `but the child's own reactive prop getter receives the branch's HTML unbranded and re-escapes it as ` +
+          `text on the child's very next reactive run, corrupting the DOM (a narrower gap #2651's door ` +
+          `inventory left open — tracked separately).`,
+        escape: [{ kind: 'rewrite' }],
+      },
+    }),
+  )
+}
+
 function processComponentProps(
   attributes: ts.JsxAttributes,
   ctx: TransformContext
@@ -7015,14 +7139,14 @@ function processComponentProps(
 
     const name = attr.name.getText(ctx.sourceFile)
 
-    // JSX element/fragment as prop value: controls={<select />} or
-    // controls={(<div/>)}. Carried as a `jsx-children` AttrValue variant
-    // so adapters render the JSX inline rather than passing a string.
+    // JSX element/fragment as prop value: controls={<select />},
+    // controls={(<div/>)}, or controls={<div/> as any} (#2703 — the
+    // entity is still directly JSX; `as`/`satisfies`/`!` are type-only
+    // and erased, so this must classify identically to the bare form).
+    // Carried as a `jsx-children` AttrValue variant so adapters render
+    // the JSX inline rather than passing a string.
     if (attr.initializer && ts.isJsxExpression(attr.initializer) && attr.initializer.expression) {
-      let jsxExpr = attr.initializer.expression
-      while (ts.isParenthesizedExpression(jsxExpr)) {
-        jsxExpr = jsxExpr.expression
-      }
+      const jsxExpr = unwrapTransparentTsWrappers(attr.initializer.expression)
       if (ts.isJsxElement(jsxExpr) || ts.isJsxSelfClosingElement(jsxExpr) || ts.isJsxFragment(jsxExpr)) {
         const prevInsideComponentChildren = ctx.insideComponentChildren
         ctx.insideComponentChildren = true
@@ -7037,6 +7161,31 @@ function processComponentProps(
           continue
         }
       }
+
+      // #2667: a ternary or array LITERALLY WRAPPING JSX at this prop
+      // position (`header={cond ? <a/> : <b/>}`, `header={[<a/>, <b/>]}`)
+      // is neither the direct-element shape above nor a plain value
+      // expression — it only classifies as `jsx-children` when the JSX is
+      // hoisted behind a fragment (`header={<>{cond ? <a/> : <b/>}</>}`,
+      // `unwrapHoistedFragment` above). Left undetected, this falls to the
+      // plain `expression` path below, which stringifies the initializer's
+      // SOURCE TEXT — literal JSX syntax spliced into the emitted client
+      // JS (invalid at runtime; the #2651 door inventory's discovery).
+      // Refuse loudly instead of guessing a lowering: the fragment-wrap
+      // escape this diagnostic once considered recommending turns out to
+      // be unsound for the same shape (`isSingleElementJsxChildren`'s
+      // docstring in `ir-to-client-js/collect-elements.ts` — a
+      // conditional-in-fragment reaches `initChild`'s getter UNbranded,
+      // corrupting the child's DOM the moment its own reactive effect
+      // first reads the prop), so only the children-passthrough escape is
+      // offered.
+      if (
+        (ts.isConditionalExpression(jsxExpr) || ts.isArrayLiteralExpression(jsxExpr)) &&
+        expressionWrapsJsx(jsxExpr)
+      ) {
+        reportNakedJsxWrapperProp(ctx, attr, name, jsxExpr)
+        continue
+      }
     }
 
     let value = getAttributeValue(attr, ctx)