@barefootjs/mojolicious 0.18.3 → 0.18.5

package/dist/build.js

@@ -76,7 +76,7 @@ function isAriaBooleanAttr(name) {
 }
 
 // src/adapter/mojo-adapter.ts
-import { BF_SLOT, BF_COND, BF_REGION } from "@barefootjs/shared";
+import { BF_SLOT, BF_COND, BF_REGION, escapeHtml } from "@barefootjs/shared";
 
 // src/adapter/lib/constants.ts
 var MOJO_TEMPLATE_PRIMITIVES = {
@@ -85,7 +85,10 @@ var MOJO_TEMPLATE_PRIMITIVES = {
   Number: { arity: 1, emit: (args) => `bf->number(${args[0]})` },
   "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.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]})` }
 };
 var MOJO_PRIMITIVE_EMIT_MAP = Object.fromEntries(Object.entries(MOJO_TEMPLATE_PRIMITIVES).map(([k, v]) => [k, v.emit]));
 
@@ -190,6 +193,12 @@ function renderArrayMethod(method, object, args, emit) {
       const recv = emit(object);
       return `bf->trim(${recv})`;
     }
+    case "trimStart":
+    case "trimEnd": {
+      const fn = method === "trimStart" ? "trim_start" : "trim_end";
+      const recv = emit(object);
+      return `bf->${fn}(${recv})`;
+    }
     case "toFixed": {
       const recv = emit(object);
       const digits = args.length >= 1 ? emit(args[0]) : "0";
@@ -223,6 +232,12 @@ function renderArrayMethod(method, object, args, emit) {
       const newS = emit(args[1]);
       return `bf->replace(${recv}, ${oldS}, ${newS})`;
     }
+    case "replaceAll": {
+      const recv = emit(object);
+      const oldS = emit(args[0]);
+      const newS = emit(args[1]);
+      return `bf->replace_all(${recv}, ${oldS}, ${newS})`;
+    }
     case "repeat": {
       const recv = emit(object);
       const count = args.length === 0 ? "0" : emit(args[0]);
@@ -325,6 +340,9 @@ function renderFlatMethod(recv, depth, emit) {
 
 // src/adapter/expr/emitters.ts
 import {
+  groupBinaryOperand,
+  isStringTypedOperand as isStringTypedOperand2,
+  isStringConcatBinary,
   emitParsedExpr,
   identifierPath,
   matchSearchParamsMethodCall,
@@ -333,17 +351,7 @@ import {
 } from "@barefootjs/jsx";
 
 // src/adapter/expr/operand.ts
-function isStringTypedOperand(expr, isStringName) {
-  if (expr.kind === "literal" && expr.literalType === "string")
-    return true;
-  if (expr.kind === "call" && expr.callee.kind === "identifier" && expr.args.length === 0) {
-    return isStringName(expr.callee.name);
-  }
-  if (expr.kind === "member" && expr.object.kind === "identifier" && expr.object.name === "props") {
-    return isStringName(expr.property);
-  }
-  return false;
-}
+import { isStringTypedOperand } from "@barefootjs/jsx";
 function emitIndexAccessPerl(object, index, emit, isStringName) {
   const i = emit(index);
   return isStringTypedOperand(index, isStringName) ? `${emit(object)}->{${i}}` : `${emit(object)}->[${i}]`;
@@ -388,7 +396,7 @@ class MojoFilterEmitter {
       return "undef";
     return String(value);
   }
-  member(object, property, _computed, emit) {
+  member(object, property, _computed, _optional, emit) {
     if (property === "length" && (asCallbackMethodCall(object) !== null || object.kind === "array-literal")) {
       return `scalar(@{${emit(object)}})`;
     }
@@ -414,9 +422,9 @@ class MojoFilterEmitter {
     return arg;
   }
   binary(op, left, right, emit) {
-    const l = emit(left);
-    const r = emit(right);
-    const isStr = (e) => isStringTypedOperand(e, this.isStringName);
+    const l = groupBinaryOperand(left, emit(left));
+    const r = groupBinaryOperand(right, emit(right));
+    const isStr = (e) => isStringTypedOperand2(e, this.isStringName);
     const stringCmp = isStr(left) || isStr(right);
     if ((op === "===" || op === "==") && stringCmp) {
       return `${l} eq ${r}`;
@@ -424,6 +432,9 @@ class MojoFilterEmitter {
     if ((op === "!==" || op === "!=") && stringCmp) {
       return `${l} ne ${r}`;
     }
+    if (isStringConcatBinary(op, left, right, this.isStringName)) {
+      return `${l} . ${r}`;
+    }
     const opMap = {
       "===": "==",
       "!==": "!=",
@@ -520,7 +531,7 @@ class MojoTopLevelEmitter {
       return "undef";
     return String(value);
   }
-  member(object, property, _computed, emit) {
+  member(object, property, _computed, _optional, emit) {
     if (object.kind === "identifier" && object.name === "props") {
       return `$${property}`;
     }
@@ -530,8 +541,13 @@ class MojoTopLevelEmitter {
         return staticValue;
     }
     const obj = emit(object);
-    if (property === "length")
+    if (property === "length") {
+      const isStr = (e) => isStringTypedOperand2(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}}`;
   }
   indexAccess(object, index, emit) {
@@ -567,9 +583,9 @@ class MojoTopLevelEmitter {
     return arg;
   }
   binary(op, left, right, emit) {
-    const l = emit(left);
-    const r = emit(right);
-    const isStr = (e) => isStringTypedOperand(e, (n) => this.ctx._isStringValueName(n));
+    const l = groupBinaryOperand(left, emit(left));
+    const r = groupBinaryOperand(right, emit(right));
+    const isStr = (e) => isStringTypedOperand2(e, (n) => this.ctx._isStringValueName(n));
     const stringCmp = isStr(left) || isStr(right);
     if ((op === "===" || op === "==") && stringCmp) {
       return `${l} eq ${r}`;
@@ -577,6 +593,9 @@ class MojoTopLevelEmitter {
     if ((op === "!==" || op === "!=") && stringCmp) {
       return `${l} ne ${r}`;
     }
+    if (isStringConcatBinary(op, left, right, (n) => this.ctx._isStringValueName(n))) {
+      return `${l} . ${r}`;
+    }
     const opMap = {
       "===": "==",
       "!==": "!=",
@@ -977,6 +996,7 @@ class MojoAdapter extends BaseAdapter {
   options;
   errors = [];
   inLoop = false;
+  currentLoopKeyDepth = 0;
   propsObjectName = null;
   propsParams = [];
   booleanTypedProps = new Set;
@@ -1109,7 +1129,7 @@ class MojoAdapter extends BaseAdapter {
     return this.renderElement(node);
   }
   emitText(node) {
-    return node.value;
+    return escapeHtml(node.value);
   }
   emitExpression(node) {
     return this.renderExpression(node);
@@ -1338,13 +1358,16 @@ ${whenTrue}
     }
     const param = loop.param;
     const indexVar = loop.iterationShape === "keys" ? `$${param}` : loop.index ? `$${loop.index}` : "$_i";
-    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;
     const children = loop.bodyIsItemConditional && loop.key ? `<%== bf->comment("loop-i:" . ${this.convertExpressionToPerl(loop.key)}) %>
 ${renderedChildren}` : renderedChildren;
@@ -1378,23 +1401,31 @@ ${renderedChildren}` : renderedChildren;
       }
       lines.push(`% my $${sortedHoist} = ${sorted};`);
     }
-    lines.push(`% for my ${indexVar} (0..$#{${array}}) {`);
-    if (loop.iterationShape !== "keys") {
-      if (supportableDestructure) {
-        lines.push(`% my $__bf_item = ${array}->[${indexVar}];`);
-        for (const b of loop.paramBindings ?? []) {
-          const parent = perlSegmentAccessor("$__bf_item", b.segments ?? []);
-          if (b.rest?.kind === "object") {
-            const exclude = b.rest.exclude.map((k) => perlStringLiteral(k.key)).join(", ");
-            lines.push(`% my $${b.name} = bf->omit(${parent}, [${exclude}]);`);
-          } else if (b.rest?.kind === "array") {
-            lines.push(`% my $${b.name} = bf->slice(${parent}, ${b.rest.from}, undef);`);
-          } else {
-            lines.push(`% my $${b.name} = ${perlSegmentAccessor("$__bf_item", b.segments ?? [])};`);
+    if (loop.objectIteration) {
+      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) {
+          lines.push(`% my $__bf_item = ${array}->[${indexVar}];`);
+          for (const b of loop.paramBindings ?? []) {
+            const parent = perlSegmentAccessor("$__bf_item", b.segments ?? []);
+            if (b.rest?.kind === "object") {
+              const exclude = b.rest.exclude.map((k) => perlStringLiteral(k.key)).join(", ");
+              lines.push(`% my $${b.name} = bf->omit(${parent}, [${exclude}]);`);
+            } else if (b.rest?.kind === "array") {
+              lines.push(`% my $${b.name} = bf->slice(${parent}, ${b.rest.from}, undef);`);
+            } else {
+              lines.push(`% my $${b.name} = ${perlSegmentAccessor("$__bf_item", b.segments ?? [])};`);
+            }
           }
+        } else {
+          lines.push(`% my $${param} = ${array}->[${indexVar}];`);
         }
-      } else {
-        lines.push(`% my $${param} = ${array}->[${indexVar}];`);
       }
     }
     if (loop.filterPredicate) {
@@ -1449,9 +1480,20 @@ ${renderedChildren}` : renderedChildren;
   };
   renderComponent(comp) {
     const propParts = [];
+    const namedSlotCaptures = [];
     for (const p of comp.props) {
       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;
+        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);
@@ -1468,9 +1510,9 @@ ${renderedChildren}` : renderedChildren;
       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}) %>`;
   }
   childrenCaptureCounter = 0;
   presenceVarCounter = 0;
@@ -1515,7 +1557,7 @@ ${alternate}
 ${children}`;
   }
   elementAttrEmitter = {
-    emitLiteral: (value, name) => `${name}="${value.value}"`,
+    emitLiteral: (value, name) => `${name}="${escapeHtml(value.value)}"`,
     emitExpression: (value, name) => {
       if (name === "style") {
         const css = this.tryLowerStyleObject(value.expr);
@@ -1609,9 +1651,10 @@ ${children}`;
       let attrName;
       if (attr.name === "className")
         attrName = "class";
-      else if (attr.name === "key")
-        attrName = "data-key";
-      else
+      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)

package/dist/conformance-pins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conformance-pins.d.ts","sourceRoot":"","sources":["../src/conformance-pins.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEtD,eAAO,MAAM,eAAe,EAAE,eA0I7B,CAAA"}
+{"version":3,"file":"conformance-pins.d.ts","sourceRoot":"","sources":["../src/conformance-pins.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEtD,eAAO,MAAM,eAAe,EAAE,eAqI7B,CAAA"}

package/dist/index.js

@@ -76,7 +76,7 @@ function isAriaBooleanAttr(name) {
 }
 
 // src/adapter/mojo-adapter.ts
-import { BF_SLOT, BF_COND, BF_REGION } from "@barefootjs/shared";
+import { BF_SLOT, BF_COND, BF_REGION, escapeHtml } from "@barefootjs/shared";
 
 // src/adapter/lib/constants.ts
 var MOJO_TEMPLATE_PRIMITIVES = {
@@ -85,7 +85,10 @@ var MOJO_TEMPLATE_PRIMITIVES = {
   Number: { arity: 1, emit: (args) => `bf->number(${args[0]})` },
   "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.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]})` }
 };
 var MOJO_PRIMITIVE_EMIT_MAP = Object.fromEntries(Object.entries(MOJO_TEMPLATE_PRIMITIVES).map(([k, v]) => [k, v.emit]));
 
@@ -190,6 +193,12 @@ function renderArrayMethod(method, object, args, emit) {
       const recv = emit(object);
       return `bf->trim(${recv})`;
     }
+    case "trimStart":
+    case "trimEnd": {
+      const fn = method === "trimStart" ? "trim_start" : "trim_end";
+      const recv = emit(object);
+      return `bf->${fn}(${recv})`;
+    }
     case "toFixed": {
       const recv = emit(object);
       const digits = args.length >= 1 ? emit(args[0]) : "0";
@@ -223,6 +232,12 @@ function renderArrayMethod(method, object, args, emit) {
       const newS = emit(args[1]);
       return `bf->replace(${recv}, ${oldS}, ${newS})`;
     }
+    case "replaceAll": {
+      const recv = emit(object);
+      const oldS = emit(args[0]);
+      const newS = emit(args[1]);
+      return `bf->replace_all(${recv}, ${oldS}, ${newS})`;
+    }
     case "repeat": {
       const recv = emit(object);
       const count = args.length === 0 ? "0" : emit(args[0]);
@@ -325,6 +340,9 @@ function renderFlatMethod(recv, depth, emit) {
 
 // src/adapter/expr/emitters.ts
 import {
+  groupBinaryOperand,
+  isStringTypedOperand as isStringTypedOperand2,
+  isStringConcatBinary,
   emitParsedExpr,
   identifierPath,
   matchSearchParamsMethodCall,
@@ -333,17 +351,7 @@ import {
 } from "@barefootjs/jsx";
 
 // src/adapter/expr/operand.ts
-function isStringTypedOperand(expr, isStringName) {
-  if (expr.kind === "literal" && expr.literalType === "string")
-    return true;
-  if (expr.kind === "call" && expr.callee.kind === "identifier" && expr.args.length === 0) {
-    return isStringName(expr.callee.name);
-  }
-  if (expr.kind === "member" && expr.object.kind === "identifier" && expr.object.name === "props") {
-    return isStringName(expr.property);
-  }
-  return false;
-}
+import { isStringTypedOperand } from "@barefootjs/jsx";
 function emitIndexAccessPerl(object, index, emit, isStringName) {
   const i = emit(index);
   return isStringTypedOperand(index, isStringName) ? `${emit(object)}->{${i}}` : `${emit(object)}->[${i}]`;
@@ -388,7 +396,7 @@ class MojoFilterEmitter {
       return "undef";
     return String(value);
   }
-  member(object, property, _computed, emit) {
+  member(object, property, _computed, _optional, emit) {
     if (property === "length" && (asCallbackMethodCall(object) !== null || object.kind === "array-literal")) {
       return `scalar(@{${emit(object)}})`;
     }
@@ -414,9 +422,9 @@ class MojoFilterEmitter {
     return arg;
   }
   binary(op, left, right, emit) {
-    const l = emit(left);
-    const r = emit(right);
-    const isStr = (e) => isStringTypedOperand(e, this.isStringName);
+    const l = groupBinaryOperand(left, emit(left));
+    const r = groupBinaryOperand(right, emit(right));
+    const isStr = (e) => isStringTypedOperand2(e, this.isStringName);
     const stringCmp = isStr(left) || isStr(right);
     if ((op === "===" || op === "==") && stringCmp) {
       return `${l} eq ${r}`;
@@ -424,6 +432,9 @@ class MojoFilterEmitter {
     if ((op === "!==" || op === "!=") && stringCmp) {
       return `${l} ne ${r}`;
     }
+    if (isStringConcatBinary(op, left, right, this.isStringName)) {
+      return `${l} . ${r}`;
+    }
     const opMap = {
       "===": "==",
       "!==": "!=",
@@ -520,7 +531,7 @@ class MojoTopLevelEmitter {
       return "undef";
     return String(value);
   }
-  member(object, property, _computed, emit) {
+  member(object, property, _computed, _optional, emit) {
     if (object.kind === "identifier" && object.name === "props") {
       return `$${property}`;
     }
@@ -530,8 +541,13 @@ class MojoTopLevelEmitter {
         return staticValue;
     }
     const obj = emit(object);
-    if (property === "length")
+    if (property === "length") {
+      const isStr = (e) => isStringTypedOperand2(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}}`;
   }
   indexAccess(object, index, emit) {
@@ -567,9 +583,9 @@ class MojoTopLevelEmitter {
     return arg;
   }
   binary(op, left, right, emit) {
-    const l = emit(left);
-    const r = emit(right);
-    const isStr = (e) => isStringTypedOperand(e, (n) => this.ctx._isStringValueName(n));
+    const l = groupBinaryOperand(left, emit(left));
+    const r = groupBinaryOperand(right, emit(right));
+    const isStr = (e) => isStringTypedOperand2(e, (n) => this.ctx._isStringValueName(n));
     const stringCmp = isStr(left) || isStr(right);
     if ((op === "===" || op === "==") && stringCmp) {
       return `${l} eq ${r}`;
@@ -577,6 +593,9 @@ class MojoTopLevelEmitter {
     if ((op === "!==" || op === "!=") && stringCmp) {
       return `${l} ne ${r}`;
     }
+    if (isStringConcatBinary(op, left, right, (n) => this.ctx._isStringValueName(n))) {
+      return `${l} . ${r}`;
+    }
     const opMap = {
       "===": "==",
       "!==": "!=",
@@ -977,6 +996,7 @@ class MojoAdapter extends BaseAdapter {
   options;
   errors = [];
   inLoop = false;
+  currentLoopKeyDepth = 0;
   propsObjectName = null;
   propsParams = [];
   booleanTypedProps = new Set;
@@ -1109,7 +1129,7 @@ class MojoAdapter extends BaseAdapter {
     return this.renderElement(node);
   }
   emitText(node) {
-    return node.value;
+    return escapeHtml(node.value);
   }
   emitExpression(node) {
     return this.renderExpression(node);
@@ -1338,13 +1358,16 @@ ${whenTrue}
     }
     const param = loop.param;
     const indexVar = loop.iterationShape === "keys" ? `$${param}` : loop.index ? `$${loop.index}` : "$_i";
-    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;
     const children = loop.bodyIsItemConditional && loop.key ? `<%== bf->comment("loop-i:" . ${this.convertExpressionToPerl(loop.key)}) %>
 ${renderedChildren}` : renderedChildren;
@@ -1378,23 +1401,31 @@ ${renderedChildren}` : renderedChildren;
       }
       lines.push(`% my $${sortedHoist} = ${sorted};`);
     }
-    lines.push(`% for my ${indexVar} (0..$#{${array}}) {`);
-    if (loop.iterationShape !== "keys") {
-      if (supportableDestructure) {
-        lines.push(`% my $__bf_item = ${array}->[${indexVar}];`);
-        for (const b of loop.paramBindings ?? []) {
-          const parent = perlSegmentAccessor("$__bf_item", b.segments ?? []);
-          if (b.rest?.kind === "object") {
-            const exclude = b.rest.exclude.map((k) => perlStringLiteral(k.key)).join(", ");
-            lines.push(`% my $${b.name} = bf->omit(${parent}, [${exclude}]);`);
-          } else if (b.rest?.kind === "array") {
-            lines.push(`% my $${b.name} = bf->slice(${parent}, ${b.rest.from}, undef);`);
-          } else {
-            lines.push(`% my $${b.name} = ${perlSegmentAccessor("$__bf_item", b.segments ?? [])};`);
+    if (loop.objectIteration) {
+      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) {
+          lines.push(`% my $__bf_item = ${array}->[${indexVar}];`);
+          for (const b of loop.paramBindings ?? []) {
+            const parent = perlSegmentAccessor("$__bf_item", b.segments ?? []);
+            if (b.rest?.kind === "object") {
+              const exclude = b.rest.exclude.map((k) => perlStringLiteral(k.key)).join(", ");
+              lines.push(`% my $${b.name} = bf->omit(${parent}, [${exclude}]);`);
+            } else if (b.rest?.kind === "array") {
+              lines.push(`% my $${b.name} = bf->slice(${parent}, ${b.rest.from}, undef);`);
+            } else {
+              lines.push(`% my $${b.name} = ${perlSegmentAccessor("$__bf_item", b.segments ?? [])};`);
+            }
           }
+        } else {
+          lines.push(`% my $${param} = ${array}->[${indexVar}];`);
         }
-      } else {
-        lines.push(`% my $${param} = ${array}->[${indexVar}];`);
       }
     }
     if (loop.filterPredicate) {
@@ -1449,9 +1480,20 @@ ${renderedChildren}` : renderedChildren;
   };
   renderComponent(comp) {
     const propParts = [];
+    const namedSlotCaptures = [];
     for (const p of comp.props) {
       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;
+        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);
@@ -1468,9 +1510,9 @@ ${renderedChildren}` : renderedChildren;
       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}) %>`;
   }
   childrenCaptureCounter = 0;
   presenceVarCounter = 0;
@@ -1515,7 +1557,7 @@ ${alternate}
 ${children}`;
   }
   elementAttrEmitter = {
-    emitLiteral: (value, name) => `${name}="${value.value}"`,
+    emitLiteral: (value, name) => `${name}="${escapeHtml(value.value)}"`,
     emitExpression: (value, name) => {
       if (name === "style") {
         const css = this.tryLowerStyleObject(value.expr);
@@ -1609,9 +1651,10 @@ ${children}`;
       let attrName;
       if (attr.name === "className")
         attrName = "class";
-      else if (attr.name === "key")
-        attrName = "data-key";
-      else
+      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)
@@ -1801,27 +1844,10 @@ var conformancePins = {
     { code: "BF101", severity: "error", issue: "https://github.com/piconic-ai/barefootjs/issues/2038" }
   ],
   "array-map-function-reference": [{ code: "BF101", severity: "error" }],
-  "dangerous-inner-html": [{ code: "BF101", severity: "error" }],
-  "string-replaceall": [{ code: "BF101", severity: "error" }]
+  "dangerous-inner-html": [{ code: "BF101", severity: "error" }]
 };
 // src/render-divergences.ts
-var renderDivergences = {
-  "arithmetic-text": "`(count() + 2) * 3` renders 10 instead of 18 — the parenthesised sub-expression loses its grouping (silent wrong arithmetic)",
-  "string-concat-plus": "`'Hello, ' + name` renders \"0\" — Perl's numeric `+` coerces the strings; JS string-concat `+` needs Perl's `.`",
-  "string-length-text": "`.length` on a STRING prop diverges (array-length lowering misapplied to a scalar)",
-  "number-tofixed": "the literal `¥` in template text reaches the output as U+FFFD — a UTF-8 encoding gap for non-ASCII literal text adjacent to a dynamic slot",
-  "html-entity-text": "`&copy;` 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 misfires through the array slice helper",
-  "string-trim-sided": "`.trimStart()` / `.trimEnd()` render empty (no lowering)"
-};
+var renderDivergences = {};
 export {
   renderDivergences,
   mojoAdapter,

package/dist/render-divergences.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render-divergences.d.ts","sourceRoot":"","sources":["../src/render-divergences.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,iBA+B/B,CAAA"}
+{"version":3,"file":"render-divergences.d.ts","sourceRoot":"","sources":["../src/render-divergences.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,iBAAsB,CAAA"}

package/dist/test-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"test-render.d.ts","sourceRoot":"","sources":["../src/test-render.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,qBAAa,qBAAsB,SAAQ,KAAK;IAC9C,YAAY,OAAO,EAAE,MAAM,EAG1B;CACF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAKxE;AAkCD,MAAM,WAAW,aAAa;IAC5B,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,OAAO,EAAE,OAAO,iBAAiB,EAAE,eAAe,CAAA;IAClD,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC/B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,wBAAsB,mBAAmB,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAwNjF;AAqWD;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,OAAO,CAuBT"}
+{"version":3,"file":"test-render.d.ts","sourceRoot":"","sources":["../src/test-render.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,qBAAa,qBAAsB,SAAQ,KAAK;IAC9C,YAAY,OAAO,EAAE,MAAM,EAG1B;CACF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAKxE;AAkCD,MAAM,WAAW,aAAa;IAC5B,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,OAAO,EAAE,OAAO,iBAAiB,EAAE,eAAe,CAAA;IAClD,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC/B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,wBAAsB,mBAAmB,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CA6NjF;AAqWD;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,OAAO,CAuBT"}

package/lib/BarefootJS/Backend/Mojo.pm

@@ -1,5 +1,5 @@
 package BarefootJS::Backend::Mojo;
-our $VERSION = "0.18.2";
+our $VERSION = "0.18.4";
 use Mojo::Base -base, -signatures;
 
 use Mojo::ByteStream qw(b);

package/lib/Mojolicious/Plugin/BarefootJS/DevReload.pm

@@ -1,5 +1,5 @@
 package Mojolicious::Plugin::BarefootJS::DevReload;
-our $VERSION = "0.18.2";
+our $VERSION = "0.18.4";
 use Mojo::Base 'Mojolicious::Plugin', -signatures;
 
 =head1 NAME

package/lib/Mojolicious/Plugin/BarefootJS.pm

@@ -1,5 +1,5 @@
 package Mojolicious::Plugin::BarefootJS;
-our $VERSION = "0.18.2";
+our $VERSION = "0.18.4";
 use Mojo::Base 'Mojolicious::Plugin', -signatures;
 
 use Mojo::File qw(path);