@barefootjs/jsx 0.32.0 → 0.33.1

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)
 }
 
@@ -3296,7 +3326,10 @@ function resolveCallbackMethodFunctionReferences(
           ...(e.method === 'flat' && e.depthExpr ? { depthExpr: visit(e.depthExpr, bound) } : {}),
         } as ParsedExpr
       case 'object-literal':
-        return { ...e, properties: e.properties.map(p => ({ ...p, value: visit(p.value, bound) })) }
+        return {
+          ...e,
+          properties: e.properties.map(p => (p.kind === 'spread' ? { ...p, expr: visit(p.expr, bound) } : { ...p, value: visit(p.value, bound) })),
+        }
       case 'arrow': {
         const inner = e.params.length === 0 ? bound : new Set([...bound, ...e.params])
         return { ...e, body: visit(e.body, inner) }
@@ -6996,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
@@ -7012,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
@@ -7034,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)

package/src/query-href-lowering.ts

@@ -58,6 +58,10 @@ export function matchQueryHrefCall(
 
   const triples: QueryHrefTriple[] = []
   for (const p of obj.properties) {
+    // A spread (`{ ...extra, key: v }`, #2696 Step 2) has no static key to
+    // build a triple from — fall back to the generic lowering rather than
+    // dropping the spread's keys silently.
+    if (p.kind === 'spread') return null
     const v = p.value
     if (v.kind === 'conditional' && isOmitBranch(v.alternate)) {
       triples.push({ guard: v.test, key: p.key, value: v.consequent })

package/src/rich-type-refusal.ts

@@ -348,7 +348,7 @@ function checkExpr(
       for (const el of expr.elements) recurse(el)
       break
     case 'object-literal':
-      for (const prop of expr.properties) recurse(prop.value)
+      for (const prop of expr.properties) recurse(prop.kind === 'spread' ? prop.expr : prop.value)
       break
     case 'array-method':
       recurse(expr.object)

package/src/ssr-defaults.ts

@@ -647,12 +647,28 @@ function evalNode(node: ts.Expression, ctx: EvalContext): EvalResult {
   }
 
   if (ts.isPropertyAccessExpression(node)) {
+    const baseResult = evalNode(node.expression, ctx)
     // `props.X` / `props?.X` — read of a binding we know nothing about, so
     // resolve to `undefined`. Chained access (`a.b.c`) collapses the same way
     // because the base read is already undefined.
-    const baseResult = evalNode(node.expression, ctx)
     if (baseResult === undefined) return undefined
-    return UNRESOLVED
+    if (baseResult === UNRESOLVED || baseResult === null || typeof baseResult !== 'object') {
+      return UNRESOLVED
+    }
+    // Own-property reads are only faithful for a plain object. An array (or
+    // any other non-plain object) exposes prototype members (`.map`,
+    // `.length`) that `hasOwnProperty` would wrongly resolve to `undefined`
+    // instead of the real function/value (#2698 review).
+    const proto = Object.getPrototypeOf(baseResult)
+    if (proto !== Object.prototype && proto !== null) return UNRESOLVED
+    // A resolved plain-object base — an object-literal value, e.g. a
+    // `.map()` callback param bound to one element (#2696's `t.a`). Missing
+    // key → JS `undefined`, mirroring `isElementAccessExpression`'s own
+    // missing-key handling above.
+    const key = node.name.text
+    return Object.prototype.hasOwnProperty.call(baseResult, key)
+      ? (baseResult as Record<string, unknown>)[key]
+      : undefined
   }
 
   if (ts.isCallExpression(node)) {
@@ -665,6 +681,39 @@ function evalNode(node: ts.Expression, ctx: EvalContext): EvalResult {
     ) {
       return ctx.bindings[node.expression.text]
     }
+    // `<array>.map(cb)` — a single-param, expression-bodied arrow over a
+    // resolved array receiver; anything else (block body, multi-param,
+    // non-array receiver) stays `UNRESOLVED`, same conservative narrowing as
+    // every other arm here. A `derived` step with empty `frees` gets no
+    // in-template recompute (#2696), so this static value is what production
+    // actually reads.
+    if (
+      ts.isPropertyAccessExpression(node.expression) &&
+      node.expression.name.text === 'map' &&
+      node.arguments.length === 1
+    ) {
+      const arrow = node.arguments[0]
+      if (
+        ts.isArrowFunction(arrow) &&
+        arrow.parameters.length === 1 &&
+        ts.isIdentifier(arrow.parameters[0].name) &&
+        !ts.isBlock(arrow.body)
+      ) {
+        const recv = evalNode(node.expression.expression, ctx)
+        if (Array.isArray(recv)) {
+          const paramName = (arrow.parameters[0].name as ts.Identifier).text
+          const mapped: unknown[] = []
+          for (const item of recv) {
+            const localBindings: Record<string, EvalResult> = { ...ctx.bindings, [paramName]: item }
+            const v = evalNode(arrow.body as ts.Expression, { ...ctx, bindings: localBindings })
+            if (v === UNRESOLVED) return UNRESOLVED
+            mapped.push(v === undefined ? null : v)
+          }
+          return mapped
+        }
+      }
+      return UNRESOLVED
+    }
     // `<array>.join(<sep?>)` — evaluate when the receiver resolves to an array
     // and the separator (default `,`) is a string. Covers `stateClasses =
     // [...].join(' ')` (#checkbox). Other array methods stay unresolved.

package/src/ssr-seed-plan.ts

@@ -36,7 +36,7 @@ import {
   extractArrowBodyExpression,
   freeIdentifiers,
   inlineBinding,
-  isSupported,
+  isSupportedValue,
   parseExpression,
   type ParsedExpr,
 } from './expression-parser.ts'
@@ -81,6 +81,11 @@ export interface SsrSeedPlan {
  * opaque). The scope check runs over the parsed SOURCE tree, so a shadowed
  * name (`items.filter((p) => p.ok) && p`, where the trailing `p` is a
  * different, unbound reference from the callback's own param) is rejected.
+ *
+ * Uses `isSupportedValue`, not `isSupported`: a signal/memo initializer is an
+ * ASSIGNMENT, never a render, so it's checked at VALUE position — this is
+ * what admits e.g. `createSignal([{ a: 'p' }].map(t => t.a).join(','))`
+ * (an object-literal array-method receiver) as `derived` instead of opaque.
  */
 function classify(
   name: string,
@@ -89,7 +94,7 @@ function classify(
   parsed: ParsedExpr,
   available: ReadonlySet<string>,
 ): SsrSeedStep {
-  if (!isSupported(parsed).supported) return { kind: 'opaque', name, origin }
+  if (!isSupportedValue(parsed).supported) return { kind: 'opaque', name, origin }
   const frees = freeIdentifiers(parsed)
   if (frees === null) return { kind: 'opaque', name, origin }
   for (const free of frees) {
@@ -198,7 +203,19 @@ export function computeSsrSeedPlan(metadata: IRMetadata): SsrSeedPlan {
             signal.getter,
             'signal',
             expr,
-            resolveThroughLocalConsts(parseExpression(expr), localConsts),
+            // Prefer the analyzer's already-parenthesised parse (`analyzer.ts`'s
+            // `parseExpression(\`(${signal.initialValue})\`)`, Roadmap A) over
+            // re-parsing the bare `expr` string here — re-parsing WITHOUT the
+            // wrap misreads a bare object-literal initializer
+            // (`createSignal({ ...base, done: true })`) as a block statement
+            // (`parseExpression`'s documented block-vs-expression-statement
+            // rule), silently opaquing an otherwise-derivable signal (#2696
+            // Step 2 follow-up: this only became observable once `object-
+            // literal` could classify `derived` at all). Falling back to a
+            // parenthesised re-parse (not the bare string) keeps a signal
+            // whose shape the analyzer's pass left unparsed (`signal.parsed`
+            // undefined) equally safe.
+            resolveThroughLocalConsts(signal.parsed ?? parseExpression(`(${expr})`), localConsts),
             available,
           ),
     )

package/src/static-literal.ts

@@ -60,9 +60,23 @@ export function evaluateStaticLiteral(
       // Shorthand (`{ a }`) and explicit (`{ a: value }`) properties both
       // carry their resolved tree in `value` (shorthand's is an
       // `identifier`) — recursing here handles both uniformly: a shorthand
-      // property only resolves when `bindings` supplies it.
+      // property only resolves when `bindings` supplies it. A spread
+      // (`{ ...base, a: 1 }`, #2696 Step 2) resolves its source and merges
+      // in source order — the same shallow-merge, later-wins, null/undefined-
+      // is-a-no-op semantics as the runtime evaluator (`toEvalNode`'s
+      // `object-literal` case) and JS itself; a spread source that resolves
+      // to anything other than a plain object/null/undefined isn't
+      // statically mergeable here, so the whole literal declines.
       const out: Record<string, unknown> = {}
       for (const prop of expr.properties) {
+        if (prop.kind === 'spread') {
+          const resolved = evaluateStaticLiteral(prop.expr, bindings)
+          if (!resolved) return null
+          if (resolved.value === null || resolved.value === undefined) continue
+          if (typeof resolved.value !== 'object' || Array.isArray(resolved.value)) return null
+          Object.assign(out, resolved.value)
+          continue
+        }
         const resolved = evaluateStaticLiteral(prop.value, bindings)
         if (!resolved) return null
         out[prop.key] = resolved.value

package/src/to-locale-date-lowering.ts

@@ -504,6 +504,10 @@ export function matchToLocaleDateStringCall(
   let tz: string | null = null
   const probeOptions: Record<string, string> = {}
   for (const prop of options.properties) {
+    // A spread (`{ ...opts, timeZone: 'UTC' }`, #2696 Step 2) isn't a
+    // literal-keyed entry this probe can read without evaluating the spread
+    // source — decline rather than silently skipping its keys.
+    if (prop.kind === 'spread') return null
     if (prop.value.kind !== 'literal' || prop.value.literalType !== 'string') return null
     const value = String(prop.value.value)
     if (prop.key === 'timeZone') {