@barefootjs/mojolicious 0.18.4 → 0.18.7

package/src/__tests__/mojo-adapter.test.ts

@@ -195,6 +195,166 @@ function Box({ other }: { other?: object }) {
   })
 })
 
+// #2221: same class of hazard as the Twig-family `_resolveLiteralConst`
+// flat-lookup bug, but this adapter's story is different. `resolveLiteralConst`
+// / `resolveStaticRecordLiteral` (mojo-adapter.ts) already guard against it —
+// they consult `loopBoundNames`, a LIVE ref-counted map that
+// `renderLoop` populates/depopulates as it descends/ascends into each loop
+// body (#1749), not a static whole-component set like the Twig family's
+// `collectLoopBoundNames(ir)`. That makes the guard scope-PRECISE rather
+// than coarse: a name loop-bound only inside one loop still inlines fine
+// at a genuinely separate, non-shadowed occurrence elsewhere in the
+// component (see the third test below) — the Twig-family's documented
+// coarse trade-off (a same-named const anywhere else in the component also
+// stops inlining) does not apply here. So no `staticLoopSourceBoundNames`
+// field was added; the existing live tracking already covers this call
+// site and is strictly more precise.
+//
+// The ONE actual gap found: `emitSpread`'s bare-identifier local-const
+// spread resolution (mojo-adapter.ts, the `this.localConstants.find(...)`
+// call keyed by `trimmed`, `{...attrs}` → `{ … }` hashref, #checkbox/icon)
+// read `this.localConstants` directly with no `loopBoundNames` guard at
+// all — a loop param named the same as an outer conditional-object const
+// (`.map((attrs) => <li {...attrs} />)` shadowing `const attrs = cond ?
+// {…} : {}`) incorrectly forwarded the outer object's literal hashref
+// instead of falling through to the per-iteration `$attrs` value. Fixed
+// with the same `loopBoundNames` guard as the other two call sites.
+//
+// Not covered here (upstream, shared-compiler hazard, out of this
+// package's scope): `key={label}` shadowed by an enclosing loop param of
+// the same name is folded to the OUTER const's literal at IR-generation
+// time (`tryResolveIdentifierAsTemplateLiteral` → `findLocalConst` in
+// `packages/jsx/src/jsx-to-ir.ts`), before any adapter runs — so this
+// adapter (and every other adapter, including Hono's native JSX
+// re-emission) still renders a `key`/`data-key` value shadowed this way
+// as the outer literal, unconditionally, every iteration.
+describe('MojoAdapter - const inlining vs loop-param shadowing (#2221)', () => {
+  test('a loop param shadowing an outer literal const emits the identifier, not the const value', () => {
+    const { template } = compileAndGenerate(`
+function Widget() {
+  const label: string = 'x'
+  return <ul>{[2, 5].map((label) => <li key={label}>{1 + label}</li>)}</ul>
+}
+`)
+    expect(template).toContain('1 + $label')
+    expect(template).not.toContain("1 + 'x'")
+  })
+
+  test('a numeric const shadowed by a loop param emits the identifier too', () => {
+    const { template } = compileAndGenerate(`
+function Widget() {
+  const count = 7
+  return <ul>{[2, 5].map((count) => <li key={count}>{1 + count}</li>)}</ul>
+}
+`)
+    expect(template).toContain('1 + $count')
+    expect(template).not.toContain('1 + 7')
+  })
+
+  test('a literal const NOT shadowed by any loop still inlines (#1897 pin)', () => {
+    const { template } = compileAndGenerate(`
+function Widget({ values }: { values: number[] }) {
+  const totalPages = 5
+  return <div>
+    <p>Page 1 of {1 + totalPages}</p>
+    <ul>{values.map((v) => <li key={v}>{v}</li>)}</ul>
+  </div>
+}
+`)
+    expect(template).toContain('1 + 5')
+  })
+
+  // Unlike the Twig-family's coarse-but-safe `collectLoopBoundNames(ir)`
+  // exclusion, this adapter's LIVE `loopBoundNames` tracking is scoped to
+  // the actual render position: a name loop-bound ONLY inside the `.map`
+  // callback still inlines correctly at a separate, non-shadowed
+  // occurrence outside the loop — no accepted trade-off here.
+  test('a const referenced outside the loop whose name is loop-bound elsewhere still inlines (more precise than Twig family)', () => {
+    const { template } = compileAndGenerate(`
+function Widget({ values }: { values: number[] }) {
+  const label: string = 'x'
+  return <div>
+    <p>{1 + label}</p>
+    <ul>{values.map((label) => <li key={label}>{2 + label}</li>)}</ul>
+  </div>
+}
+`)
+    expect(template).toContain("1 + 'x'")
+    expect(template).toContain('2 + $label')
+  })
+
+  // The actual gap this issue found in this adapter: `emitSpread`'s
+  // bare-identifier local-const resolution (`{...attrs}` → the outer
+  // conditional object's hashref) had no `loopBoundNames` guard.
+  test('a loop param shadowing an outer conditional-object const spread emits the loop var, not the outer hashref', () => {
+    const { template } = compileAndGenerate(`
+function Widget({ items }: { items: object[] }) {
+  const attrs = true ? { 'data-on': 'outer' } : {}
+  return <ul>{items.map((attrs) => <li {...attrs} />)}</ul>
+}
+`)
+    expect(template).toContain('bf->spread_attrs($attrs)')
+    expect(template).not.toContain("'data-on' => 'outer'")
+  })
+})
+
+// #2237: the record-literal sibling of #2221's `resolveLiteralConst` bug —
+// `resolveStaticRecordLiteral` (`IDENT.key` on a module-scope object-literal
+// const, e.g. `variantClasses.ghost` — #1896/#1897) is confirmed reproducible
+// on the Twig-family adapters (flat `objectName` lookup with no notion of AST
+// scope, so an enclosing loop callback's own param of the same name resolved
+// to the OUTER const's member value at every iteration). This adapter's
+// `resolveStaticRecordLiteral` already guards against it (mojo-adapter.ts:
+// `if (this.loopBoundNames?.has?.(objectName)) return null`) — the same LIVE,
+// ref-counted `loopBoundNames` map `resolveLiteralConst` consults (#1749),
+// scope-precise rather than the Twig family's coarse whole-component set.
+// Pinned here (mirroring the #2221 scope-precision pin above) rather than
+// fixed, since no code change was needed.
+describe('MojoAdapter - record-literal member lookup vs loop-param shadowing (#2237)', () => {
+  test('a loop param shadowing an outer module object const emits the member access, not the outer literal', () => {
+    const { template } = compileAndGenerate(`
+const cfg = { x: 'outer-lit' }
+function Widget({ rows }: { rows: { x: string }[] }) {
+  return <ul>{rows.map((cfg) => <li key={cfg.x}>{cfg.x}</li>)}</ul>
+}
+`)
+    // The loop body must reference the per-iteration member access...
+    expect(template).toContain('$cfg->{x}')
+    // ...never the outer const's hard-coded value.
+    expect(template).not.toContain("'outer-lit'")
+  })
+
+  test('a module object const NOT shadowed by any loop still inlines (variantClasses.ghost shape, #1896/#1897 pin)', () => {
+    const { template } = compileAndGenerate(`
+const variantClasses = { solid: 'bg-solid', ghost: 'bg-ghost' }
+function Widget({ variant }: { variant: 'solid' | 'ghost' }) {
+  return <div>{variantClasses.ghost}</div>
+}
+`)
+    expect(template).toContain("'bg-ghost'")
+  })
+
+  // Unlike the Twig-family's coarse-but-safe `staticLoopSourceBoundNames`
+  // exclusion, this adapter's LIVE `loopBoundNames` tracking is scoped to
+  // the actual render position: an object name loop-bound ONLY inside the
+  // `.map` callback still inlines its member lookup correctly at a
+  // separate, non-shadowed occurrence outside the loop — no accepted
+  // trade-off here.
+  test('an object name loop-bound only inside the loop still inlines its member lookup outside it (more precise than Twig family)', () => {
+    const { template } = compileAndGenerate(`
+const cfg = { x: 'outer-lit' }
+function Widget({ rows }: { rows: { x: string }[] }) {
+  return <div>
+    <p>{cfg.x}</p>
+    <ul>{rows.map((cfg) => <li key={cfg.x}>{cfg.x}</li>)}</ul>
+  </div>
+}
+`)
+    expect(template).toContain("<p><%= 'outer-lit' %></p>")
+    expect(template).toContain('$cfg->{x}')
+  })
+})
+
 describe('MojoAdapter - Record<staticKeys,scalar>[propKey] spread value (#checkbox icon)', () => {
   // `const sizeMap: Record<IconSize, number> = { sm: 16, ... }` indexed by
   // a prop inside a conditional-spread object value lowers to an inline
@@ -1163,7 +1323,7 @@ export function Foo(props: { v: string }) {
     // list rather than replace.
     const a = new MojoAdapter()
     const keys = Object.keys(a.templatePrimitives ?? {}).sort()
-    expect(keys).toEqual(['JSON.stringify', 'Math.ceil', 'Math.floor', 'Math.round', 'Number', 'String'])
+    expect(keys).toEqual(['JSON.stringify', 'Math.abs', 'Math.ceil', 'Math.floor', 'Math.max', 'Math.min', 'Math.round', 'Number', 'String'])
   })
 
   test('unregistered identifier-path callee is NOT accepted', () => {
@@ -1406,7 +1566,7 @@ describe('MojoAdapter - #1448 Tier C .flat(depth?)', () => {
   function emitFlat(expr: string): string {
     const a = new MojoAdapter()
     const ir = compileToIR(`
-function C({ rows }: { rows: number[][] }) {
+function C({ rows }: { rows: { x: string }[][] }) {
   return <div>{${expr}}</div>
 }
 export { C }
@@ -1526,9 +1686,10 @@ export { C }
     expect(t).toContain(`"property":"name"`)
   })
 
-  // The function-reference `.map(format)` BF101 refusal is now covered
-  // cross-adapter by the `array-map-function-reference` shared fixture's
-  // `expectedDiagnostics` entry above.
+  // The function-reference `.map(format)` case is now covered cross-adapter
+  // by the `array-map-function-reference` shared fixture — `format` resolves
+  // to its declaration (#2206) and the fixture compiles clean rather than
+  // refusing with BF101.
 })
 
 describe('MojoAdapter - #1448 Tier C .flatMap(field projection)', () => {
@@ -1902,3 +2063,23 @@ export function C() {
     expect(deferred.template).not.toContain('data-x')
   })
 })
+
+describe('MojoAdapter - named-slot capture identifier safety (#2168 jsx-element-prop)', () => {
+  // A JSX-valued prop under a hyphenated name (`data-slot`, a valid JSX
+  // attribute name) must not leak into the `begin %>...<% end` capture
+  // variable — Perl variable tokens can't contain `-`. The capture
+  // variable is purely counter-based (never derived from the prop name);
+  // the hash KEY passed to `render_child` still carries the real name,
+  // quoted via `perlHashKey`.
+  test('a hyphenated prop name does not appear in the capture variable', () => {
+    const { template } = compileAndGenerate(`
+function Card(props) { return null }
+export function Parent() {
+  return <Card data-slot={<strong>Title</strong>}>text</Card>
+}
+`)
+    expect(template).toContain('<% my $bf_prop_0 = begin %>')
+    expect(template).toContain("'data-slot' => $bf_prop_0")
+    expect(template).not.toContain('$bf_prop_data')
+  })
+})

package/src/adapter/expr/array-method.ts

@@ -139,6 +139,15 @@ export function renderArrayMethod(
       const recv = emit(object)
       return `bf->trim(${recv})`
     }
+    case 'trimStart':
+    case 'trimEnd': {
+      // `.trimStart()` / `.trimEnd()` — the one-sided siblings of
+      // `.trim()` (#2183 follow-up). Dedicated `bf->trim_start` /
+      // `bf->trim_end` helpers, not `bf->trim` with a flag.
+      const fn = method === 'trimStart' ? 'trim_start' : 'trim_end'
+      const recv = emit(object)
+      return `bf->${fn}(${recv})`
+    }
     case 'toFixed': {
       // `.toFixed(digits?)` — Number → fixed-decimal string. `bf->to_fixed`
       // mirrors JS rounding + zero-padding (default 0 digits). #1897.
@@ -195,6 +204,16 @@ export function renderArrayMethod(
       const newS = emit(args[1])
       return `bf->replace(${recv}, ${oldS}, ${newS})`
     }
+    case 'replaceAll': {
+      // `.replaceAll(old, new)` — string-pattern form, EVERY occurrence,
+      // via the dedicated `bf->replace_all` helper (not `bf->replace`
+      // with a flag) — the regex-pattern form is refused upstream at
+      // the parser, same as `.replace`. See #2182.
+      const recv = emit(object)
+      const oldS = emit(args[0])
+      const newS = emit(args[1])
+      return `bf->replace_all(${recv}, ${oldS}, ${newS})`
+    }
     case 'repeat': {
       // `.repeat(n)` — string repeated `n` times. The `bf->repeat`
       // helper wraps Perl's `x` operator with the same negative-count

package/src/adapter/expr/emitters.ts

@@ -105,7 +105,7 @@ export class MojoFilterEmitter implements ParsedExprEmitter {
     return String(value)
   }
 
-  member(object: ParsedExpr, property: string, _computed: boolean, emit: (e: ParsedExpr) => string): string {
+  member(object: ParsedExpr, property: string, _computed: boolean, _optional: boolean, emit: (e: ParsedExpr) => string): string {
     // `.length` on a higher-order result (e.g.
     // `x.tags.filter(t => t.active).length > 0` inside the outer
     // filter predicate, #1443). The higher-order emit produces an
@@ -322,7 +322,7 @@ export class MojoTopLevelEmitter implements ParsedExprEmitter {
     return String(value)
   }
 
-  member(object: ParsedExpr, property: string, _computed: boolean, emit: (e: ParsedExpr) => string): string {
+  member(object: ParsedExpr, property: string, _computed: boolean, _optional: boolean, emit: (e: ParsedExpr) => string): string {
     // `props.x` flattens to the bare `$x` the Mojo SSR caller binds each
     // prop to (props arrive as individual `my $x = ...` vars, not a
     // `$props` hashref).
@@ -338,7 +338,22 @@ export class MojoTopLevelEmitter implements ParsedExprEmitter {
       if (staticValue !== null) return staticValue
     }
     const obj = emit(object)
-    if (property === 'length') return `scalar(@{${obj}})`
+    if (property === 'length') {
+      // `.length` dispatches on receiver type: a STRING receiver needs
+      // Perl's scalar `length($x)`, while the array lowering
+      // `scalar(@{$x})` dereferences the value as an array ref and
+      // returns 0 for a scalar string (the `string-length-text`
+      // divergence). The receiver is string-typed when it's a known
+      // string prop/getter (`isStringTypedOperand`) or a bare
+      // identifier bound to one — the same `_isStringValueName` witness
+      // the `eq`/concat lowering already consults.
+      const isStr = (e: ParsedExpr) => isStringTypedOperand(e, n => this.ctx._isStringValueName(n))
+      const isStringReceiver =
+        isStr(object) ||
+        (object.kind === 'identifier' && this.ctx._isStringValueName(object.name))
+      if (isStringReceiver) return `length(${obj})`
+      return `scalar(@{${obj}})`
+    }
     return `${obj}->{${property}}`
   }
 

package/src/adapter/lib/constants.ts

@@ -26,6 +26,9 @@ export const MOJO_TEMPLATE_PRIMITIVES: Record<string, PrimitiveSpec> = {
   'Math.floor':     { arity: 1, emit: (args) => `bf->floor(${args[0]})` },
   'Math.ceil':      { arity: 1, emit: (args) => `bf->ceil(${args[0]})` },
   'Math.round':     { arity: 1, emit: (args) => `bf->round(${args[0]})` },
+  'Math.min':       { arity: 2, emit: (args) => `bf->min(${args[0]}, ${args[1]})` },
+  'Math.max':       { arity: 2, emit: (args) => `bf->max(${args[0]}, ${args[1]})` },
+  'Math.abs':       { arity: 1, emit: (args) => `bf->abs(${args[0]})` },
 }
 
 /**

package/src/adapter/lib/static-value.ts

@@ -0,0 +1,47 @@
+/**
+ * Serialize a compile-time-evaluated JS value (`@barefootjs/jsx`'s
+ * `evaluateStaticLiteral`/`resolveStaticLoopSource`, #2208) into a native
+ * Perl literal. Used to inline a fully-static loop source (an inline array
+ * literal, or a function-scope local const with a static initializer)
+ * directly in the loop-bound expression, rather than requiring a bound
+ * template variable.
+ *
+ * Booleans deliberately return `null` (defer to the caller's BF101
+ * refusal) rather than baking `1`/`''` — Perl has no boolean literal, and
+ * that would diverge from JS's `String(true) === "true"` at render.
+ *
+ * Returns `null` for a value this adapter can't represent as a literal —
+ * the caller falls back to its existing BF101 refusal instead of guessing.
+ */
+
+import { perlHashKey } from './perl-naming.ts'
+
+function escapePerlSingleQuote(s: string): string {
+  return s.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
+}
+
+export function staticValueToPerl(value: unknown): string | null {
+  if (value === null || value === undefined) return 'undef'
+  if (typeof value === 'boolean') return null
+  if (typeof value === 'number') return String(value)
+  if (typeof value === 'string') return `'${escapePerlSingleQuote(value)}'`
+  if (Array.isArray(value)) {
+    const items: string[] = []
+    for (const el of value) {
+      const serialized = staticValueToPerl(el)
+      if (serialized === null) return null
+      items.push(serialized)
+    }
+    return `[${items.join(', ')}]`
+  }
+  if (typeof value === 'object') {
+    const entries: string[] = []
+    for (const [key, val] of Object.entries(value as Record<string, unknown>)) {
+      const serialized = staticValueToPerl(val)
+      if (serialized === null) return null
+      entries.push(`${perlHashKey(key)} => ${serialized}`)
+    }
+    return `{ ${entries.join(', ')} }`
+  }
+  return null
+}

package/src/adapter/mojo-adapter.ts

@@ -59,10 +59,15 @@ import {
   isValidHelperId,
   sortComparatorFromArrow,
   isLowerableLoopDestructure,
+  isDangerousInnerHtmlAttr,
+  resolveDangerousInnerHtml,
+  dangerousInnerHtmlMetacharViolation,
+  dangerousInnerHtmlDiagnostic,
+  resolveStaticLoopSource,
 } from '@barefootjs/jsx'
 import { isAriaBooleanAttr, isBooleanResultExpr } from './boolean-result.ts'
 import type { ParsedExpr, LoweringMatcher } from '@barefootjs/jsx'
-import { BF_SLOT, BF_COND, BF_REGION } from '@barefootjs/shared'
+import { BF_SLOT, BF_COND, BF_REGION, escapeHtml } from '@barefootjs/shared'
 
 import type { MojoRenderCtx } from './lib/types.ts'
 import { MOJO_PRIMITIVE_EMIT_MAP } from './lib/constants.ts'
@@ -72,6 +77,7 @@ import {
   collectRootScopeNodes,
 } from './lib/ir-scope.ts'
 import { renderSortMethod, renderSortEval } from './expr/array-method.ts'
+import { staticValueToPerl } from './lib/static-value.ts'
 import { MojoFilterEmitter, MojoTopLevelEmitter } from './expr/emitters.ts'
 import type { MojoEmitContext, MojoSpreadContext, MojoMemoContext } from './emit-context.ts'
 import {
@@ -165,6 +171,14 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
   private options: Required<MojoAdapterOptions>
   private errors: CompilerError[] = []
   private inLoop: boolean = false
+  /**
+   * `IRLoop.depth` of the loop currently being rendered (save/restore
+   * around `renderChildren(loop.children)`, mirroring `inLoop` above).
+   * `renderAttributes` reads this to derive the `key` → `data-key`/
+   * `data-key-N` suffix — the depth is IR-computed (jsx-to-ir.ts), not
+   * re-derived here (#2168 nested-loop-outer-binding).
+   */
+  private currentLoopKeyDepth = 0
   /**
    * SolidJS-style props identifier (`function(props: P)`) and the
    * analyzer-extracted prop names. Stashed at `generate()` entry so
@@ -407,6 +421,14 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
    * quoted string literal (`const totalPages = 5`, #1897 pagination) —
    * function-scope consts never reach the per-render stash, so a bare
    * `$totalPages` faults under strict mode.
+   *
+   * The `loopBoundNames` guard also covers the #2221 hazard (a loop
+   * callback's own param shadowing this outer const's name): unlike the
+   * Twig-family adapters' coarse, whole-component `collectLoopBoundNames(ir)`
+   * static set, this adapter's `loopBoundNames` is a LIVE ref-counted map
+   * `renderLoop` populates/depopulates as it descends/ascends into each
+   * loop body (#1749) — so it's already scope-precise for this call site;
+   * no separate `staticLoopSourceBoundNames`-style field is needed here.
    */
   private resolveLiteralConst(name: string): string | null {
     if (this.loopBoundNames?.has?.(name)) return null
@@ -478,7 +500,9 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
   }
 
   emitText(node: IRText): string {
-    return node.value
+    // IRText carries the entity-DECODED value (Phase 1 decodes JSX
+    // character references); re-escape for direct HTML emission.
+    return escapeHtml(node.value)
   }
 
   emitExpression(node: IRExpression): string {
@@ -607,7 +631,8 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
   renderElement(element: IRElement): string {
     const tag = element.tag
     const attrs = this.renderAttributes(element)
-    const children = this.renderChildren(element.children)
+    const dangerousHtml = this.renderDangerousInnerHtml(element)
+    const children = dangerousHtml !== null ? dangerousHtml : this.renderChildren(element.children)
 
     let hydrationAttrs = ''
     if (element.needsScope) {
@@ -643,6 +668,28 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
     return `<${tag}${attrs}${hydrationAttrs}>${children}</${tag}>`
   }
 
+  /**
+   * `dangerouslySetInnerHTML={{ __html: '...' }}` (#2207) — see the Blade
+   * adapter's identical helper for the full rationale. `null` means the
+   * attribute is absent (caller falls through to normal `renderChildren`);
+   * a non-`null` string (possibly `''`) replaces the children outright.
+   */
+  private renderDangerousInnerHtml(element: IRElement): string | null {
+    const resolution = resolveDangerousInnerHtml(element)
+    if (!resolution) return null
+    if (resolution.kind === 'dynamic') {
+      this.errors.push(dangerousInnerHtmlDiagnostic(resolution.expr, resolution.loc))
+      return ''
+    }
+    const violation = dangerousInnerHtmlMetacharViolation(resolution.html, this.name)
+    if (violation) {
+      const attr = element.attrs.find(isDangerousInnerHtmlAttr)!
+      this.errors.push(dangerousInnerHtmlDiagnostic(`{ __html: ${JSON.stringify(resolution.html)} }`, attr.loc, violation))
+      return ''
+    }
+    return resolution.html
+  }
+
   // ===========================================================================
   // Expression Rendering
   // ===========================================================================
@@ -655,7 +702,12 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       return ''
     }
 
-    const perlExpr = this.convertExpressionToPerl(expr.expr)
+    // Thread the IR-carried `.parsed` tree through (mirrors go-template's
+    // `convertExpressionToGo(expr.expr, classify, expr.parsed)`) so a
+    // resolved bare-identifier `.map`/`.filter`/… callback
+    // (`resolveCallbackMethodFunctionReferences`, #2206) isn't lost to a
+    // fresh, unresolved re-parse of the raw string.
+    const perlExpr = this.convertExpressionToPerl(expr.expr, expr.parsed)
 
     if (expr.slotId) {
       return `<%== bf->text_start("${expr.slotId}") %><%= ${perlExpr} %><%== bf->text_end %>`
@@ -800,8 +852,24 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
     // reachable in this adapter's test corpus only because the widened
     // destructure gate (#2087 Phase A/B) no longer refuses this fixture's
     // `([emoji, users]) => ...` param first.
+    // #2208: a loop source that is a fully-static array literal — either
+    // inline (`[{ label: 'Alpha' }, ...].map(...)`) or a bare identifier
+    // bound to a FUNCTION-scope local const whose initializer has no
+    // prop/signal/function-call dependency — inlines as a native Perl
+    // arrayref/hashref literal below, the same way a module-scope const's
+    // value is already seeded. A runtime-computed local (#2069, e.g.
+    // `Object.entries(props.tags).filter(...)`) still refuses below.
+    // `isNameShadowed` guards a DIFFERENT, enclosing loop's own callback
+    // param shadowing this identifier (fable review) — reuses the same
+    // live `loopBoundNames` ref-counted tracking `resolveModuleStringConst`
+    // already consults for this hazard class (#1749).
+    const staticItems = resolveStaticLoopSource(loop.arrayParsed, this.localConstants, {
+      isNameShadowed: name => this.loopBoundNames.has(name),
+    })
+    const staticArray = staticItems !== null ? staticValueToPerl(staticItems) : null
+
     const arrayName = loop.array.trim()
-    if (/^[A-Za-z_$][\w$]*$/.test(arrayName)) {
+    if (staticArray === null && /^[A-Za-z_$][\w$]*$/.test(arrayName)) {
       const arrayConst = (this.localConstants ?? []).find(c => c.name === arrayName)
       if (arrayConst && !arrayConst.isModule && this.resolveLiteralConst(arrayName) === null) {
         this.errors.push({
@@ -817,7 +885,7 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       }
     }
 
-    const rawArray = this.convertExpressionToPerl(loop.array)
+    const rawArray = staticArray ?? this.convertExpressionToPerl(loop.array)
     // Apply sort if present (#1448 Tier B): wrap the loop array in the
     // shared sort helper. The same `renderSortEval` / `renderSortMethod`
     // pair feeds both this loop-chain hoist and the emitter's
@@ -846,17 +914,22 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
     // the whole body (children + key + filter) so a same-named loop variable
     // isn't replaced by the const literal (#1749 review). Ref-counted for
     // nested loops; released after the body lines are assembled below.
-    const loopBound = loop.iterationShape === 'keys'
-      ? [param]
-      : supportableDestructure
-        ? ['__bf_item', ...(loop.paramBindings ?? []).map(b => b.name), loop.index ?? '_i']
-        : [param, loop.index ?? '_i']
+    const loopBound = loop.objectIteration === 'entries'
+      ? [param, loop.index ?? '_k']
+      : loop.objectIteration === 'keys' || loop.objectIteration === 'values' || loop.iterationShape === 'keys'
+        ? [param]
+        : supportableDestructure
+          ? ['__bf_item', ...(loop.paramBindings ?? []).map(b => b.name), loop.index ?? '_i']
+          : [param, loop.index ?? '_i']
     for (const n of loopBound) {
       this.loopBoundNames.set(n, (this.loopBoundNames.get(n) ?? 0) + 1)
     }
     const prevInLoop = this.inLoop
     this.inLoop = true
+    const prevLoopKeyDepth = this.currentLoopKeyDepth
+    this.currentLoopKeyDepth = loop.depth
     const renderedChildren = this.renderChildren(loop.children)
+    this.currentLoopKeyDepth = prevLoopKeyDepth
     this.inLoop = prevInLoop
 
     // Whole-item conditional (#1665): prepend an always-present
@@ -918,6 +991,21 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       }
       lines.push(`% my $${sortedHoist} = ${sorted};`)
     }
+    if (loop.objectIteration) {
+      // `objectIteration` (#2168 object-entries-map): a Perl hash has no
+      // native insertion-order guarantee (unlike Ruby's `Hash`/Python's
+      // `dict`) — this codebase's own runtime already works around this
+      // elsewhere with `sort keys %$hash` (`BarefootJS.pm`'s
+      // `spread_attrs`/`_style_to_css`), so this reuses that exact
+      // convention for a deterministic, alphabetically-sorted iteration
+      // (not JS insertion order — a documented known limitation for
+      // out-of-alphabetical-order data, same as Go/Rust/Xslate).
+      const keyVar = loop.objectIteration === 'values' ? '$__bf_k' : `$${loop.index ?? param}`
+      lines.push(`% for my ${keyVar} (sort keys %{${array}}) {`)
+      if (loop.objectIteration === 'entries' || loop.objectIteration === 'values') {
+        lines.push(`% my $${param} = ${array}->{${keyVar}};`)
+      }
+    } else {
     lines.push(`% for my ${indexVar} (0..$#{${array}}) {`)
     if (loop.iterationShape !== 'keys') {
       if (supportableDestructure) {
@@ -951,6 +1039,7 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
         lines.push(`% my $${param} = ${array}->[${indexVar}];`)
       }
     }
+    }
 
     // Handle filter().map() pattern by wrapping children in if-condition
     if (loop.filterPredicate) {
@@ -1049,10 +1138,36 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
 
   renderComponent(comp: IRComponent): string {
     const propParts: string[] = []
+    // Named JSX-valued props OTHER than the reserved `children`
+    // (`header={<strong>Title</strong>}`, #2168 jsx-element-prop) get the
+    // same `begin %>…<% end` capture as the reserved children slot below,
+    // just keyed by the prop's own name. `render_child` (BarefootJS.pm)
+    // materializes every prop value that's a CODE ref — not only
+    // `children` — into the Mojo::ByteStream the capture block produces,
+    // so the child's read of the slot back out (`<%= $header %>`) sees an
+    // already-safe ByteStream and Mojo::Template's auto-escape passes it
+    // through unescaped, the same way it already does for `children`.
+    const namedSlotCaptures: string[] = []
     for (const p of comp.props) {
       // Skip callback props (onXxx) and `ref` — both are client-only for
       // SSR (Hono renders neither; the client JS wires them at hydration).
       if ((p.name.match(/^on[A-Z]/) || p.name === 'ref') && p.value.kind === 'expression') continue
+      if (p.value.kind === 'jsx-children' && p.name !== 'children') {
+        const prevInLoop = this.inLoop
+        this.inLoop = false
+        const slotBody = this.renderChildren(p.value.children)
+        this.inLoop = prevInLoop
+        // Purely counter-based — NOT derived from `p.name` or `comp.slotId`.
+        // A JSX prop name can contain characters (`data-slot`) that aren't a
+        // valid Perl variable token, and `comp.slotId` alone would collide
+        // across two named-slot props on the same component invocation
+        // (unlike the reserved children slot, there's only ever one of
+        // those per invocation).
+        const varName = `$bf_prop_${this.childrenCaptureCounter++}`
+        namedSlotCaptures.push(`<% my ${varName} = begin %>${slotBody}<% end %>`)
+        propParts.push(`${perlHashKey(p.name)} => ${varName}`)
+        continue
+      }
       const lowered = emitAttrValue(p.value, this.componentPropEmitter, p.name)
       if (lowered) propParts.push(lowered)
     }
@@ -1090,9 +1205,9 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       const childrenBody = this.renderChildren(effectiveChildren)
       this.inLoop = prevInLoop
       const varName = `$bf_children_${comp.slotId ?? 'c' + this.childrenCaptureCounter++}`
-      return `<% my ${varName} = begin %>${childrenBody}<% end %><%== bf->render_child('${tplName}'${propsStr}, children => ${varName}) %>`
+      return `${namedSlotCaptures.join('')}<% my ${varName} = begin %>${childrenBody}<% end %><%== bf->render_child('${tplName}'${propsStr}, children => ${varName}) %>`
     }
-    return `<%== bf->render_child('${tplName}'${propsStr}) %>`
+    return `${namedSlotCaptures.join('')}<%== bf->render_child('${tplName}'${propsStr}) %>`
   }
 
   private childrenCaptureCounter = 0
@@ -1178,7 +1293,7 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
    * template). Routed through the shared dispatcher (#1290 step 2).
    */
   private readonly elementAttrEmitter: AttrValueEmitter = {
-    emitLiteral: (value, name) => `${name}="${value.value}"`,
+    emitLiteral: (value, name) => `${name}="${escapeHtml(value.value)}"`,
     emitExpression: (value, name) => {
       // `style={{ … }}` object literal → a CSS string with dynamic values
       // interpolated, instead of refusing the bare object with BF101 (#1322).
@@ -1354,7 +1469,15 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       // initializer text and route through the same conditional-spread
       // lowering. Only function-scope (`!isModule`) consts whose value is
       // NOT itself a bare identifier (loop guard) are considered.
-      if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
+      //
+      // `loopBoundNames` guard (#2221): an enclosing `.map()` callback's
+      // own param can shadow this outer const's name (`.map((sizeAttrs)
+      // => <li {...sizeAttrs} />)`) — without the guard this forwarded
+      // the OUTER const's hashref at every iteration instead of the
+      // per-item `$sizeAttrs` value. Same live ref-counted map
+      // `resolveLiteralConst` / `resolveStaticRecordLiteral` already
+      // consult for this hazard class (#1749).
+      if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed) && !this.loopBoundNames.has(trimmed)) {
         const localConst = this.localConstants.find(
           c => c.name === trimmed && !c.isModule,
         )
@@ -1431,6 +1554,12 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       // the unsupported-expression lowering is never reached for a deferred
       // predicate (no BF101 / BF102). #1966
       if (attr.clientOnly) continue
+      // `dangerouslySetInnerHTML` never renders as an HTML attribute — it's
+      // handled by `renderDangerousInnerHtml` instead, which replaces the
+      // element's children. Skip it here so its `{ __html: ... }` object
+      // literal never reaches the generic object-literal BF101 refusal
+      // (which would double-report alongside the purpose-built one).
+      if (isDangerousInnerHtmlAttr(attr)) continue
       // Rewrite JSX special-prop names to their HTML-attribute
       // counterparts (#1475). `className` → `class` was already
       // wired in; the `key` → `data-key` rewrite matches the
@@ -1440,7 +1569,10 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       // rewrite happens at attribute-emit time.
       let attrName: string
       if (attr.name === 'className') attrName = 'class'
-      else if (attr.name === 'key') attrName = 'data-key'
+      else if (attr.name === 'key') {
+        const depth = this.currentLoopKeyDepth
+        attrName = depth > 0 ? `data-key-${depth}` : 'data-key'
+      }
       else attrName = attr.name
       const lowered = emitAttrValue(attr.value, this.elementAttrEmitter, attrName)
       if (lowered) parts.push(lowered)