@barefootjs/jsx 0.31.7 → 0.31.9

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

@@ -4,7 +4,7 @@
  * and the final hydrate() call emission.
  */
 
-import type { ComponentIR, IRFragment, IRNode, ReferencesGraph } from '../types.ts'
+import type { ComponentIR, IRFragment, IRNode, ReferencesGraph, SignalInfo } from '../types.ts'
 import type { ClientJsContext } from './types.ts'
 import { PROPS_PARAM } from './utils.ts'
 import { computeInlinability, toLegacyInlinability } from './compute-inlinability.ts'
@@ -115,6 +115,54 @@ export function csrInlinableConstantsFromCtx(ctx: ClientJsContext): Map<string,
   return out
 }
 
+/**
+ * Build the `template:` ComponentDef entry text for a generated
+ * `templateHtml` string.
+ *
+ * When the component holds one or more env signals (`createSearchParams()`,
+ * #2057), the template lambda destructures its own copy of each getter in
+ * a block-body prelude before returning the template literal:
+ *
+ *     template: (_p) => { const [sp] = createSearchParams(); return `...` }
+ *
+ * instead of the plain expression-body form:
+ *
+ *     template: (_p) => `...`
+ *
+ * The template lambda runs at module scope (`render()` / `renderChild()`),
+ * but an env-signal getter is otherwise only ever destructured inside
+ * `init...` — so a template that calls the getter directly (`sp()`,
+ * `searchParams()`) ReferenceErrors the moment it runs (#2654). Before
+ * #2057, `searchParams` was a bare module-scope import and the same
+ * template-body call worked by accident; #2057 moved it behind
+ * `const [sp] = createSearchParams()` without updating template emission.
+ *
+ * The prelude is emitted whenever the component HAS an env signal —
+ * never gated on whether `templateHtml` textually mentions the getter.
+ * Scanning already-emitted template HTML for a getter name would be a
+ * string/regex parse of emitted JS, which CLAUDE.md's parse rule forbids.
+ * Unconditional emission is safe because `createSearchParams()`
+ * (`packages/client/src/reactive.ts`) only returns the shared
+ * `searchParamsTuple` module singleton — no side effect — so declaring it
+ * in a prelude the template body doesn't end up using costs nothing.
+ *
+ * `envFactory` is expected to always be set alongside `envReader` (the
+ * analyzer sets both together, #2057) — the `undefined` branch is a
+ * defensive fallback: if it's ever missing, skip that signal's prelude
+ * line entirely rather than guessing a canonical factory name, leaving
+ * that one signal's template reference exactly as unsound as before this
+ * fix (never worse).
+ */
+function buildTemplateDefPart(ctx: ClientJsContext, templateHtml: string): string {
+  const envDecls = ctx.signals
+    .filter((s): s is SignalInfo & { envFactory: string } => Boolean(s.envReader) && Boolean(s.envFactory))
+    .map((s) => `const [${s.getter}] = ${s.envFactory}()`)
+  if (envDecls.length === 0) {
+    return `template: (${PROPS_PARAM}) => \`${templateHtml}\``
+  }
+  return `template: (${PROPS_PARAM}) => { ${envDecls.join('; ')}; return \`${templateHtml}\` }`
+}
+
 /** Emit hydrate() call that registers component, template, and hydrates. */
 /**
  * Generate the closing brace for the init function and the hydrate() call.
@@ -155,9 +203,13 @@ export function emitRegistrationAndHydration(
   // Build ComponentDef object for hydrate()
   const defParts: string[] = [`init: init${name}`]
   if (canGenerateStaticTemplate(_ir.root, propNamesForStaticCheck, inlinableConstants, unsafeLocalNames)) {
-    const templateHtml = irToComponentTemplate(_ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName)
+    // `ctx.dynamicElements` is the claim-plan-'markup' membership
+    // (#2651) — see `generateCsrTemplate`'s identical derivation below
+    // for why this is reused as-is rather than re-derived.
+    const markupSlotIds = new Set(ctx.dynamicElements.map(e => e.slotId))
+    const templateHtml = irToComponentTemplate(_ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds)
     if (templateHtml) {
-      defParts.push(`template: (${PROPS_PARAM}) => \`${templateHtml}\``)
+      defParts.push(buildTemplateDefPart(ctx, templateHtml))
     }
   } else {
     // CSR fallback: emit for all components that can't generate static templates.
@@ -173,7 +225,7 @@ export function emitRegistrationAndHydration(
       _ir.root, csrInlinableConstants, ctx, restSpreadNames, ctx.propsObjectName, unsafeLocalNames, ctx.deferredChildSlots
     )
     if (templateHtml) {
-      defParts.push(`template: (${PROPS_PARAM}) => \`${templateHtml}\``)
+      defParts.push(buildTemplateDefPart(ctx, templateHtml))
     }
   }
   // No else: top-level-only components skip template entirely (save bytes)

package/src/ir-to-client-js/html-template.ts

@@ -321,9 +321,22 @@ function escapeAttrValueExpr(valExpr: string): string {
  * escaped, so this is applied only at the four text-marker emit sites.
  * Hono escapes text content with the same set as attribute values
  * (`& " ' < >`), so `escapeText` delegates to the same operation.
+ *
+ * `isMarkup` (#2651) switches to `escapeTextOrMarkup` — `escapeText`'s
+ * strict superset that additionally unwraps a `bfMarkup()`-branded value
+ * raw instead of escaping it. Two of the four text-marker call sites
+ * (`irToComponentTemplateWithOpts`, `generateCsrTemplateWithOpts`) pass
+ * `true` for a slot `ctx.dynamicElements` also claims — the same
+ * membership `emit-reactive.ts` uses to pick the 'markup' writer kind for
+ * this slot's REACTIVE update, so the initial-render escape and the
+ * reactive-update escape agree on whether the slot may carry raw markup.
+ * The other two (`irToHtmlTemplate`, `irToPlaceholderTemplate`) build
+ * loop-item / conditional-branch HTML, which the reactive side always
+ * treats as plain text (`__bfText`) regardless — they never pass `true`,
+ * so they keep calling `escapeText` byte-for-byte as before.
  */
-function escapeTextSlotExpr(innerExpr: string): string {
-  return `escapeText(${innerExpr})`
+function escapeTextSlotExpr(innerExpr: string, isMarkup = false): string {
+  return `${isMarkup ? 'escapeTextOrMarkup' : 'escapeText'}(${innerExpr})`
 }
 
 /**
@@ -901,7 +914,20 @@ export function irToHtmlTemplate(node: IRNode, restSpreadNames?: Set<string>, lo
             case 'jsx-children': {
               const hoistedRecurse = (n: IRNode): string => irToHtmlTemplate(n, restSpreadNames, loopDepth, loopParams, branchSlotsVar, true)
               const childHtml = p.value.children.map(c => hoistedRecurse(c)).join('')
-              return `${quotePropName(p.name)}: \`${childHtml}\``
+              // Brand the assembled HTML (#2651) — every text segment inside
+              // `childHtml` was already escaped node-by-node during
+              // `hoistedRecurse`'s own build, so the concatenated result is
+              // safe to splice raw; the child's own template evaluates this
+              // prop through `escapeTextOrMarkup`/`escapeTextOrNode`, which
+              // trust the brand and skip re-escaping it. EXCEPT an explicit
+              // `children={<jsx/>}` prop (out of scope, unchanged): the
+              // child's `{children}` interpolation is the bare-passthrough
+              // door (`escapeTextSlotExpr`'s own docstring), never routed
+              // through an escape/unwrap call, so a branded object here
+              // would stringify to `[object Object]` instead of unwrapping.
+              return p.name === 'children'
+                ? `${quotePropName(p.name)}: \`${childHtml}\``
+                : `${quotePropName(p.name)}: bfMarkup(\`${childHtml}\`)`
             }
             case 'literal':
               return `${quotePropName(p.name)}: ${JSON.stringify(p.value.value)}`
@@ -1478,6 +1504,25 @@ export function irChildrenToJsExpr(children: IRNode[]): string {
   return `[${exprs.join(', ')}]`
 }
 
+/**
+ * Narrow gate for branding a nested `jsx-children` getter's value with
+ * `bfMarkup()` (#2651) — the `irNodeToJsExprs` counterpart of
+ * `collect-elements.ts`'s `isSingleElementJsxChildren` (duplicated rather
+ * than imported: `collect-elements.ts` already imports FROM this file, so
+ * the reverse import would cycle). Same shape, same reasoning: a
+ * `jsx-children` prop's value is always a single stored node
+ * (`AttrValueOf.jsxChildren([...])`); only when that node is a lone
+ * `'element'` does `irChildrenToJsExpr` reduce it to ONE HTML-string
+ * template literal — the shape `bfMarkup` + `escapeTextOrNode` /
+ * `escapeTextOrMarkup` have a proven contract for. A `'fragment'` (multiple
+ * children) or `'conditional'` node reduces to an array literal or a
+ * nested ternary instead — left unbranded here for the same reason as the
+ * `collect-elements.ts` twin.
+ */
+function isSingleElementJsxChildren(nodes: IRNode[]): boolean {
+  return nodes.length === 1 && nodes[0].type === 'element'
+}
+
 function irNodeToJsExprs(node: IRNode): string[] {
   switch (node.type) {
     case 'component': {
@@ -1488,8 +1533,19 @@ function irNodeToJsExprs(node: IRNode): string[] {
             return `${quotePropName(p.name)}: ${attrValueToString(p.value) ?? 'undefined'}`
           }
           switch (p.value.kind) {
-            case 'jsx-children':
-              return `get ${quotePropName(p.name)}() { return ${irChildrenToJsExpr(p.value.children)} }`
+            case 'jsx-children': {
+              // Brand (#2651) only the lone-'element' shape, and never an
+              // explicit `children={<jsx/>}` prop — see
+              // `isSingleElementJsxChildren` (this file) for the shape
+              // argument and the `collect-elements.ts` twin for the
+              // `children`-exclusion argument (bare-passthrough consumer,
+              // no unwrap call).
+              const jsxExpr = irChildrenToJsExpr(p.value.children)
+              const wrapped = (p.name !== 'children' && isSingleElementJsxChildren(p.value.children))
+                ? `bfMarkup(${jsxExpr})`
+                : jsxExpr
+              return `get ${quotePropName(p.name)}() { return ${wrapped} }`
+            }
             case 'literal':
               return `get ${quotePropName(p.name)}() { return ${JSON.stringify(p.value.value)} }`
             case 'boolean-shorthand':
@@ -1644,6 +1700,20 @@ export interface TemplateOptions {
    * the template phase agree on which children defer (dropped-prop fix).
    */
   deferredChildSlots?: ReadonlySet<string>
+  /**
+   * Slot ids of top-level, non-conditional dynamic expressions
+   * (`ctx.dynamicElements`, populated by `collectElements` — the exact set
+   * `emit-reactive.ts`'s `emitDynamicTextUpdates` claims `kind: 'markup'`
+   * for on the REACTIVE side, #2651). When a text-marker expression's
+   * `slotId` is a member, `escapeTextSlotExpr` emits `escapeTextOrMarkup`
+   * instead of `escapeText` so a `bfMarkup()`-branded prop value (a JSX
+   * element passed at a non-`children` component prop position) reaches
+   * the initial-render template raw, matching what the reactive writer
+   * already does via `escapeTextOrNode`. Computed once per component from
+   * `ctx.dynamicElements` by `irToComponentTemplate` / `generateCsrTemplate`
+   * — never re-derived here.
+   */
+  markupSlotIds?: ReadonlySet<string>
 }
 
 /**
@@ -1659,9 +1729,10 @@ export function irToComponentTemplate(
   node: IRNode,
   inlinableConstants?: Map<string, string>,
   restSpreadNames?: Set<string>,
-  propsObjectName?: string | null
+  propsObjectName?: string | null,
+  markupSlotIds?: ReadonlySet<string>
 ): string {
-  return irToComponentTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, loopDepth: -1 })
+  return irToComponentTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, loopDepth: -1, markupSlotIds })
 }
 
 function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): string {
@@ -1829,7 +1900,8 @@ function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): str
         ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')`
         : wrapped
       if (node.slotId) {
-        return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped)}}<!--/-->`
+        const isMarkup = opts.markupSlotIds?.has(node.slotId) ?? false
+        return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(wrapped, isMarkup)}}<!--/-->`
       }
       return `\${${value}}`
     }
@@ -1873,7 +1945,12 @@ function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): str
             case 'jsx-children': {
               const hoistedRecurse = (n: IRNode): string => irToComponentTemplateWithOpts(n, { ...opts, inHoistedChildren: true })
               const childHtml = p.value.children.map(c => hoistedRecurse(c)).join('')
-              return `${quotePropName(p.name)}: \`${childHtml}\``
+              // Brand the assembled HTML (#2651), except an explicit
+              // `children={<jsx/>}` prop — see the identical
+              // `irToHtmlTemplate` case above for both arguments.
+              return p.name === 'children'
+                ? `${quotePropName(p.name)}: \`${childHtml}\``
+                : `${quotePropName(p.name)}: bfMarkup(\`${childHtml}\`)`
             }
             case 'literal':
               return `${quotePropName(p.name)}: ${JSON.stringify(p.value.value)}`
@@ -2075,7 +2152,14 @@ export function generateCsrTemplate(
     }
   }
   const effectiveUnsafeLocalNames = mergeCsrNullUnsafe(ctx, unsafeLocalNames)
-  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames: effectiveUnsafeLocalNames, deferredChildSlots, loopDepth: -1 })
+  // `ctx.dynamicElements` (populated by `collectElements`, before any
+  // template-string build runs) IS the claim-plan-'markup' membership
+  // `emit-reactive.ts` claims for these same slot ids on the reactive
+  // side (#2651) — every entry is already non-conditional / non-`@client`
+  // by construction (`collectElements`'s `expression` visitor only pushes
+  // here). Reused as-is, not re-derived.
+  const markupSlotIds = new Set(ctx.dynamicElements.map(e => e.slotId))
+  return generateCsrTemplateWithOpts(node, { inlinableConstants, restSpreadNames, propsObjectName, csrEnv, unsafeLocalNames: effectiveUnsafeLocalNames, deferredChildSlots, loopDepth: -1, markupSlotIds })
 }
 
 /**
@@ -2440,7 +2524,8 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
           ? `Array.isArray(${expr}) ? ${expr}.join('') : (${expr} ?? '')`
           : expr
         if (node.slotId) {
-          return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(expr)}}<!--/-->`
+          const isMarkup = opts.markupSlotIds?.has(node.slotId) ?? false
+          return `<!--bf:${node.slotId}-->\${${node.joinArrayChild ? value : escapeTextSlotExpr(expr, isMarkup)}}<!--/-->`
         }
         return `\${${value}}`
       }
@@ -2499,7 +2584,13 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
             case 'jsx-children': {
               const hoistedRecurse = (n: IRNode): string => generateCsrTemplateWithOpts(n, { ...opts, inHoistedChildren: true })
               const childHtml = p.value.children.map(c => hoistedRecurse(c)).join('')
-              return `${quotePropName(p.name)}: \`${childHtml}\``
+              // Brand the assembled HTML (#2651), except an explicit
+              // `children={<jsx/>}` prop — see the identical
+              // `irToHtmlTemplate` case (top of this file) for both
+              // arguments.
+              return p.name === 'children'
+                ? `${quotePropName(p.name)}: \`${childHtml}\``
+                : `${quotePropName(p.name)}: bfMarkup(\`${childHtml}\`)`
             }
             case 'literal':
               return `${quotePropName(p.name)}: ${JSON.stringify(p.value.value)}`

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

@@ -20,6 +20,10 @@ export const RUNTIME_IMPORT_CANDIDATES = [
   'createPortal',
   'provideContext', 'createContext', 'useContext',
   'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText', 'escapeTextOrNode',
+  // JSX-element-as-non-children-prop markup brand (#2651) — `bfMarkup` wraps
+  // the compiler-built HTML at the producer (renderChild / initChild props);
+  // `escapeTextOrMarkup` unwraps it at the claim-plan-'markup' template slot.
+  'bfMarkup', 'escapeTextOrMarkup',
   'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText',
   // Claim-plan interpreter (slot unification A2/A3, spec/slot-unification.md)
   // — the "one claim mechanism" that replaced `patchSlotRange` and

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

@@ -259,7 +259,12 @@ function generateTemplateOnlyMount(ir: ComponentIR, ctx: ClientJsContext): strin
   let templateHtml: string | undefined
 
   if (canGenerateStaticTemplate(ir.root, propNamesForStaticCheck, inlinableConstants, unsafeLocalNames)) {
-    templateHtml = irToComponentTemplate(ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName)
+    // `ctx.dynamicElements` is always empty on this template-only path
+    // (`needsClientJs(ctx)` gates it) — passed through anyway so this
+    // matches `emitRegistrationAndHydration`'s derivation byte-for-byte
+    // rather than special-casing "no markup slots here" (#2651).
+    const markupSlotIds = new Set(ctx.dynamicElements.map(e => e.slotId))
+    templateHtml = irToComponentTemplate(ir.root, inlinableConstants, restSpreadNames, ctx.propsObjectName, markupSlotIds)
   }
 
   // CSR fallback: when static template generation fails (e.g., components with