@barefootjs/jinja 0.18.3 → 0.18.5

package/src/adapter/jinja-adapter.ts

@@ -143,7 +143,7 @@ import {
 } from '@barefootjs/jsx'
 import { isAriaBooleanAttr, isBooleanResultExpr, isExplicitStringCall } 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 { JinjaRenderCtx } from './lib/types.ts'
 import { JINJA_PRIMITIVE_EMIT_MAP } from './lib/constants.ts'
@@ -206,6 +206,14 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
   private options: Required<JinjaAdapterOptions>
   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 the
@@ -401,7 +409,9 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
   }
 
   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 {
@@ -777,7 +787,11 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     //     `{...rest}` → `bf.spread_attrs(rest)` emit path both see only the
     //     keys NOT already destructured.
     const indexLocalLines: string[] = []
-    if (loop.iterationShape === 'keys') {
+    if (loop.objectIteration) {
+      // `key`/`value` bind directly in the for-header (see `array` below)
+      // via Jinja's own dict iteration — no derived `loop.index0` local
+      // needed, unlike the array `iterationShape` cases.
+    } else if (loop.iterationShape === 'keys') {
       indexLocalLines.push(`{% set ${jinjaIdent(param)} = loop.index0 %}`)
     } else if (loop.index) {
       indexLocalLines.push(`{% set ${jinjaIdent(loop.index)} = loop.index0 %}`)
@@ -802,10 +816,13 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
 
     const prevInLoop = this.inLoop
     this.inLoop = true
+    const prevLoopKeyDepth = this.currentLoopKeyDepth
+    this.currentLoopKeyDepth = loop.depth
     // Re-render children now that inLoop is set (so nested components use the
     // loop-child naming convention). renderedChildren above was computed with
     // the previous flag; recompute under the loop flag.
     const childrenUnderLoop = this.renderChildren(loop.children)
+    this.currentLoopKeyDepth = prevLoopKeyDepth
     this.inLoop = prevInLoop
     void renderedChildren
 
@@ -822,7 +839,19 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     // Scoped per-call-site marker so sibling `.map()`s under the same parent
     // each get their own reconciliation range.
     lines.push(`{{ bf.comment("loop:${loop.markerId}") | safe }}`)
-    lines.push(`{% for ${jinjaIdent(loopVar)} in ${array} %}`)
+    // `objectIteration` (#2168 object-entries-map): Python `dict` preserves
+    // JS `Object.entries()`'s insertion-order semantics natively, so this
+    // lowers straight to Jinja's own dict-iteration forms — no runtime
+    // helper needed. `.items()` binds `index` (the KEY) alongside `param`;
+    // `.keys()`/`.values()` bind `param` alone.
+    const forHeader = loop.objectIteration === 'entries'
+      ? `{% for ${jinjaIdent(loop.index ?? param)}, ${jinjaIdent(param)} in ${array}.items() %}`
+      : loop.objectIteration === 'keys'
+        ? `{% for ${jinjaIdent(param)} in ${array}.keys() %}`
+        : loop.objectIteration === 'values'
+          ? `{% for ${jinjaIdent(param)} in ${array}.values() %}`
+          : `{% for ${jinjaIdent(loopVar)} in ${array} %}`
+    lines.push(forHeader)
     for (const il of indexLocalLines) lines.push(il)
 
     // Handle filter().map() pattern by wrapping children in if-condition
@@ -974,11 +1003,33 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
     type Segment = { kind: 'entries'; parts: string[] } | { kind: 'spread'; expr: string }
     const segments: Segment[] = [{ kind: 'entries', parts: [] }]
     const currentEntries = () => this.componentPropSegmentEntries(segments)
+    // Named JSX-valued props OTHER than the reserved `children`
+    // (`header={<strong>Title</strong>}`, #2168 jsx-element-prop) each get
+    // their own `{% set %}` capture, prepended to the final returned
+    // string below — same mechanism as the reserved children capture,
+    // just keyed by the prop's own name instead of `children`.
+    const namedSlotSetBlocks: 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 Jinja `{% set %}` target, 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 captureName = `bf_prop_${this.childrenCaptureCounter++}`
+        namedSlotSetBlocks.push(`{% set ${captureName} %}${slotBody}{% endset %}`)
+        currentEntries().push(`${jinjaHashKey(p.name)}: ${captureName}`)
+        continue
+      }
       if (p.value.kind === 'spread') {
         const trimmed = p.value.expr.trim()
         // SolidJS-style props identifier (`function(props: P)`) has no
@@ -1042,12 +1093,12 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
       const captureName = `bf_children_${comp.slotId ?? 'c' + this.childrenCaptureCounter++}`
       currentEntries().push(`${jinjaHashKey('children')}: ${captureName}`)
       const dict = this.combineComponentPropSegments(segments)
-      return `{% set ${captureName} %}${childrenBody}{% endset %}{{ bf.render_child('${tplName}', ${dict}) | safe }}`
+      return `${namedSlotSetBlocks.join('')}{% set ${captureName} %}${childrenBody}{% endset %}{{ bf.render_child('${tplName}', ${dict}) | safe }}`
     }
 
     const isEmpty = segments.every(s => s.kind === 'entries' && s.parts.length === 0)
     const dictEntries = isEmpty ? '' : `, ${this.combineComponentPropSegments(segments)}`
-    return `{{ bf.render_child('${tplName}'${dictEntries}) | safe }}`
+    return `${namedSlotSetBlocks.join('')}{{ bf.render_child('${tplName}'${dictEntries}) | safe }}`
   }
 
   private childrenCaptureCounter = 0
@@ -1132,7 +1183,7 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
    * AttrValue lowering for intrinsic-element attributes (Jinja).
    */
   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).
@@ -1337,7 +1388,10 @@ export class JinjaAdapter extends BaseAdapter implements IRNodeEmitter<JinjaRend
       // Rewrite JSX special-prop names to their HTML-attribute counterparts.
       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)

package/src/adapter/lib/constants.ts

@@ -22,6 +22,9 @@ export const JINJA_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/conformance-pins.ts

@@ -104,9 +104,4 @@ export const conformancePins: ConformancePins = {
   // the shape loudly instead of emitting entity-escaped markup that
   // silently renders tags as text.
   'dangerous-inner-html': [{ code: 'BF101', severity: 'error' }],
-  // Edge-case sweep (Priority 12): `.replaceAll` has no lowering yet —
-  // only first-occurrence `.replace` is wired to the runtime helpers.
-  // Refused with BF101 rather than reusing the first-only lowering,
-  // which would silently change semantics.
-  'string-replaceall': [{ code: 'BF101', severity: 'error' }],
 }

package/src/render-divergences.ts

@@ -14,29 +14,4 @@
 
 import type { RenderDivergences } from '@barefootjs/jsx'
 
-export const renderDivergences: RenderDivergences = {
-  'arithmetic-text':
-    '`(count() + 2) * 3` renders 10 instead of 18 — the parenthesised sub-expression loses its grouping (silent wrong arithmetic)',
-  'html-entity-text':
-    '`©` in JSX literal text: Hono decodes to `©`, this adapter re-emits the raw entity — same DOM, different bytes',
-  'math-methods':
-    'Math.min/max/abs over a signal render empty (only Math.floor is in the template-primitive registry)',
-  'boolean-attr-literals':
-    'camelCase boolean alias `readOnly`: Hono SSRs `readOnly="true"`, this adapter emits bare presence',
-  'camelcase-attributes':
-    '`htmlFor` is not lowered to `for` (Hono maps it)',
-  'static-attr-escape':
-    'static attribute values are not HTML-escaped (`title="Fish & Chips"` emitted raw; Hono escapes)',
-  'svg-icon':
-    'SVG camelCase presentation attrs (`strokeWidth`, `strokeLinecap`) pass through unmapped; Hono lowers to kebab-case',
-  'object-entries-map':
-    '`Object.entries(prop).map(([k, v]) => …)` renders an EMPTY list — the object-shaped prop silently produces zero iterations',
-  'nested-loop-outer-binding':
-    'nested-loop inner items carry `data-key` where the reference emits the depth-suffixed `data-key-1`',
-  'jsx-element-prop':
-    'a JSX element passed as a NON-children prop renders an empty slot — the element value is silently dropped',
-  'string-slice':
-    '`.slice()` on a STRING renders empty (array-slice helper misfires on strings)',
-  'string-trim-sided':
-    '`.trimStart()` / `.trimEnd()` render empty (no lowering)',
-}
+export const renderDivergences: RenderDivergences = {}