@barefootjs/jsx 0.18.3 → 0.18.5

package/dist/index.js

@@ -206,7 +206,6 @@ var UNSUPPORTED_METHODS = new Set([
   "some",
   "forEach",
   "flatMap",
-  "replaceAll",
   "charAt",
   "charCodeAt",
   "codePointAt",
@@ -481,6 +480,9 @@ function convertNode(node, raw) {
       if (callee.property === "trim") {
         return { kind: "array-method", method: "trim", object: callee.object, args };
       }
+      if (callee.property === "trimStart" || callee.property === "trimEnd") {
+        return { kind: "array-method", method: callee.property, object: callee.object, args };
+      }
       if (callee.property === "toFixed") {
         return { kind: "array-method", method: "toFixed", object: callee.object, args };
       }
@@ -506,24 +508,25 @@ function convertNode(node, raw) {
         }
         return { kind: "array-method", method: callee.property, object: callee.object, args };
       }
-      if (callee.property === "replace") {
+      if (callee.property === "replace" || callee.property === "replaceAll") {
+        const method = callee.property;
         if (args.length < 2) {
           return {
             kind: "unsupported",
             raw,
-            reason: `\`.replace(${args.length === 0 ? "" : "pattern"})\` needs both a pattern and a replacement — JS coerces the missing argument to the string "undefined", a degenerate result. Pass both arguments, or pre-compute the value before the template.`
+            reason: `\`.${method}(${args.length === 0 ? "" : "pattern"})\` needs both a pattern and a replacement — JS coerces the missing argument to the string "undefined", a degenerate result. Pass both arguments, or pre-compute the value before the template.`
           };
         }
         const patternNode = node.arguments[0];
         if (patternNode && ts2.isRegularExpressionLiteral(patternNode)) {
-          return { kind: "array-method", method: "replace", object: callee.object, args };
+          return { kind: "array-method", method, object: callee.object, args };
         }
         const badArg = args[0].kind === "unsupported" || args[0].kind === "object-literal" ? args[0] : args[1].kind === "unsupported" || args[1].kind === "object-literal" ? args[1] : undefined;
         if (badArg) {
           const reason = badArg.kind === "unsupported" ? badArg.reason : "Unsupported syntax: ObjectLiteralExpression";
           return { kind: "unsupported", raw, reason };
         }
-        return { kind: "array-method", method: "replace", object: callee.object, args };
+        return { kind: "array-method", method, object: callee.object, args };
       }
       if (callee.property === "repeat") {
         return { kind: "array-method", method: "repeat", object: callee.object, args };
@@ -558,7 +561,7 @@ function convertNode(node, raw) {
   if (ts2.isPropertyAccessExpression(node)) {
     const object = convertNode(node.expression, raw);
     const property = node.name.text;
-    return { kind: "member", object, property, computed: false };
+    return { kind: "member", object, property, computed: false, optional: !!node.questionDotToken };
   }
   if (ts2.isElementAccessExpression(node)) {
     const object = convertNode(node.expression, raw);
@@ -567,10 +570,10 @@ function convertNode(node, raw) {
       return { kind: "unsupported", raw, reason: "Element access with no index expression" };
     }
     if (ts2.isNumericLiteral(argNode)) {
-      return { kind: "member", object, property: argNode.text, computed: true };
+      return { kind: "member", object, property: argNode.text, computed: true, optional: !!node.questionDotToken };
     }
     if (ts2.isStringLiteral(argNode)) {
-      return { kind: "member", object, property: argNode.text, computed: true };
+      return { kind: "member", object, property: argNode.text, computed: true, optional: !!node.questionDotToken };
     }
     const index = convertNode(argNode, raw);
     if (index.kind === "unsupported" || index.kind === "object-literal")
@@ -1121,7 +1124,7 @@ function substituteDestructuredFields(expr, fieldMap, syntheticParam, restName)
           return e;
         let node = { kind: "identifier", name: syntheticParam };
         for (const segment of entry.path) {
-          node = { kind: "member", object: node, property: segment, computed: false };
+          node = { kind: "member", object: node, property: segment, computed: false, optional: false };
         }
         if (entry.defaultExpr) {
           return { kind: "logical", op: "??", left: node, right: entry.defaultExpr };
@@ -1136,10 +1139,11 @@ function substituteDestructuredFields(expr, fieldMap, syntheticParam, restName)
             kind: "member",
             object: { kind: "identifier", name: syntheticParam },
             property: e.property,
-            computed: false
+            computed: false,
+            optional: e.optional
           };
         }
-        return { kind: "member", object: walk(e.object), property: e.property, computed: e.computed };
+        return { kind: "member", object: walk(e.object), property: e.property, computed: e.computed, optional: e.optional };
       case "index-access":
         return { kind: "index-access", object: walk(e.object), index: walk(e.index) };
       case "binary":
@@ -1251,10 +1255,10 @@ function checkSupport(expr) {
       return { supported: true, level: "L2" };
     }
     case "array-method": {
-      if (expr.method === "replace" && expr.args[0]?.kind === "regex") {
+      if ((expr.method === "replace" || expr.method === "replaceAll") && expr.args[0]?.kind === "regex") {
         return {
           supported: false,
-          reason: "String.prototype.replace supports only a string pattern + string replacement (the regex form is deferred); use a string pattern or wrap the expression in /* @client */"
+          reason: `String.prototype.${expr.method} supports only a string pattern + string replacement (the regex form is deferred); use a string pattern or wrap the expression in /* @client */`
         };
       }
       const objSupport = checkSupport(expr.object);
@@ -1628,7 +1632,7 @@ function inlineBinding(expr, name, value) {
       case "call":
         return { kind: "call", callee: walk(e.callee, enclosing), args: e.args.map((a) => walk(a, enclosing)) };
       case "member":
-        return { kind: "member", object: walk(e.object, enclosing), property: e.property, computed: e.computed };
+        return { kind: "member", object: walk(e.object, enclosing), property: e.property, computed: e.computed, optional: e.optional };
       case "index-access":
         return { kind: "index-access", object: walk(e.object, enclosing), index: walk(e.index, enclosing) };
       case "binary":
@@ -1879,7 +1883,7 @@ function materializeGetterCalls(expr, names) {
         alternate: rw(expr.alternate)
       };
     case "member":
-      return { kind: "member", object: rw(expr.object), property: expr.property, computed: expr.computed };
+      return { kind: "member", object: rw(expr.object), property: expr.property, computed: expr.computed, optional: expr.optional };
     case "index-access":
       return { kind: "index-access", object: rw(expr.object), index: rw(expr.index) };
     case "template-literal":
@@ -2293,13 +2297,23 @@ function attrValueToString(value, opts) {
       return null;
   }
 }
+function applyObjectIterationWrap(node, arrayExpr) {
+  if (node.objectIteration === "entries")
+    return `Object.entries(${arrayExpr})`;
+  if (node.objectIteration === "keys")
+    return `Object.keys(${arrayExpr})`;
+  if (node.objectIteration === "values")
+    return `Object.values(${arrayExpr})`;
+  return arrayExpr;
+}
 function buildChainedArrayExpr(elem) {
-  return buildLoopChainExpr({
+  const chained = buildLoopChainExpr({
     base: elem.array,
     sortComparator: elem.sortComparator,
     filterPredicate: elem.filterPredicate,
     chainOrder: elem.chainOrder
   });
+  return applyObjectIterationWrap(elem, chained);
 }
 function loopOffsetTerms(offset) {
   if (!offset)
@@ -2971,7 +2985,7 @@ function normalizeSignalInitial(signal, propsObjectName) {
 }
 
 // src/ir-to-client-js/html-template.ts
-import { BF_PARENT_SCOPE_PLACEHOLDER, BF_SCOPE } from "@barefootjs/shared";
+import { BF_PARENT_SCOPE_PLACEHOLDER, BF_SCOPE, escapeHtml } from "@barefootjs/shared";
 function createStringProtector() {
   const strings = [];
   const protect = (s) => {
@@ -3073,6 +3087,24 @@ function applyIterationShape(node, arrayExpr, indexParam) {
       callbackParam: `(${node.param})`
     };
   }
+  if (node.objectIteration === "entries") {
+    return {
+      array: `Object.entries(${arrayExpr})`,
+      callbackParam: node.index ? `([${node.index}, ${node.param}])` : `(${node.param}${indexParam})`
+    };
+  }
+  if (node.objectIteration === "keys") {
+    return {
+      array: `Object.keys(${arrayExpr})`,
+      callbackParam: `(${node.param})`
+    };
+  }
+  if (node.objectIteration === "values") {
+    return {
+      array: `Object.values(${arrayExpr})`,
+      callbackParam: `(${node.param})`
+    };
+  }
   return { array: arrayExpr, callbackParam: `(${node.param}${indexParam})` };
 }
 function childrenPropEntry(children, recurse) {
@@ -3132,7 +3164,7 @@ function renderTemplateAttrPart(attr, attrName, wrap, restSpreadNames) {
     case "boolean-attr":
       return attrName;
     case "literal":
-      return `${attrName}="${v.value}"`;
+      return `${attrName}="${escapeHtml(v.value)}"`;
     case "expression": {
       const valExpr = wrap(v.expr);
       return templateAttrExpr(attrName, valExpr, v.presenceOrUndefined);
@@ -3263,7 +3295,7 @@ function irToHtmlTemplate(node, restSpreadNames, loopDepth = 0, loopParams, bran
       return `<${node.tag}${attrs ? " " + attrs : ""} />`;
     }
     case "text":
-      return node.value;
+      return escapeHtml(node.value);
     case "expression":
       if (node.expr === "null" || node.expr === "undefined")
         return "";
@@ -3371,7 +3403,7 @@ function buildLoopSkeletonTemplate(node, safe) {
         const v = a.value;
         switch (v.kind) {
           case "literal":
-            attrParts.push(`${toHtmlAttrName(a.name)}="${v.value}"`);
+            attrParts.push(`${toHtmlAttrName(a.name)}="${escapeHtml(v.value)}"`);
             break;
           case "boolean-attr":
             attrParts.push(toHtmlAttrName(a.name));
@@ -3406,7 +3438,7 @@ function buildLoopSkeletonTemplate(node, safe) {
       return `<${node.tag}${attrs ? " " + attrs : ""} />`;
     }
     case "text":
-      return node.value;
+      return escapeHtml(node.value);
     case "expression":
       if (node.expr === "null" || node.expr === "undefined")
         return "";
@@ -3458,7 +3490,7 @@ function irToPlaceholderTemplate(node, restSpreadNames, loopDepth = 0, loopParam
       return `<${node.tag}${attrs ? " " + attrs : ""} />`;
     }
     case "text":
-      return node.value;
+      return escapeHtml(node.value);
     case "expression":
       if (node.expr === "null" || node.expr === "undefined")
         return "";
@@ -3650,7 +3682,7 @@ function irToComponentTemplateWithOpts(node, opts) {
               return templateAttrExpr(keyName, transformExpr(tmplStr));
             }
             case "literal":
-              return `${keyName}="${v.value}"`;
+              return `${keyName}="${escapeHtml(v.value)}"`;
             default:
               return "";
           }
@@ -3660,7 +3692,7 @@ function irToComponentTemplateWithOpts(node, opts) {
           case "boolean-attr":
             return attrName;
           case "literal":
-            return `${attrName}="${v.value}"`;
+            return `${attrName}="${escapeHtml(v.value)}"`;
           case "expression":
             return templateAttrExpr(attrName, transformExpr(v.expr, v.templateExpr), v.presenceOrUndefined);
           case "template": {
@@ -3686,7 +3718,7 @@ function irToComponentTemplateWithOpts(node, opts) {
       return `<${node.tag}${attrs ? " " + attrs : ""} />`;
     }
     case "text":
-      return node.value;
+      return escapeHtml(node.value);
     case "expression":
       if (node.expr === "null" || node.expr === "undefined")
         return "";
@@ -3978,7 +4010,7 @@ function generateCsrTemplateWithOpts(node, opts) {
           case "boolean-attr":
             return attrName;
           case "literal":
-            return `${attrName}="${v.value}"`;
+            return `${attrName}="${escapeHtml(v.value)}"`;
           case "expression":
             return templateAttrExpr(attrName, transformExpr(v.expr, v.templateExpr), v.presenceOrUndefined);
           case "template": {
@@ -4004,7 +4036,7 @@ function generateCsrTemplateWithOpts(node, opts) {
       return `<${node.tag}${attrs ? " " + attrs : ""} />`;
     }
     case "text":
-      return node.value;
+      return escapeHtml(node.value);
     case "expression":
       if (node.expr === "null" || node.expr === "undefined")
         return "";
@@ -8034,6 +8066,7 @@ function resolveFreeRefs(node, env) {
 }
 
 // src/jsx-to-ir.ts
+import { toHTMLAttrName, decodeEntities } from "@barefootjs/shared";
 var CLIENT_DIRECTIVE_INTERIOR_RE2 = /^\s*@client\s*$/;
 var BLOCK_COMMENT_RE2 = /\/\*([\s\S]*?)\*\//g;
 function hasLeadingClientDirective(expr, sourceFile) {
@@ -8182,6 +8215,7 @@ function createTransformContext(analyzer) {
     isRoot: true,
     insideComponentChildren: false,
     loopParams: new Set,
+    loopDepth: 0,
     patterns: {
       signals: analyzer.signals.map((s) => ({
         getter: s.getter,
@@ -8835,7 +8869,7 @@ function transformText(node, ctx) {
   }
   return {
     type: "text",
-    value: text,
+    value: decodeEntities(text),
     loc: getSourceLocation(node, ctx.sourceFile, ctx.filePath)
   };
 }
@@ -9391,6 +9425,22 @@ function isIteratorShapeCall(node) {
     return null;
   return { array: node.expression.expression, shape: name };
 }
+function isObjectIteratorCall(node) {
+  if (!ts11.isCallExpression(node))
+    return null;
+  if (!ts11.isPropertyAccessExpression(node.expression))
+    return null;
+  if (!ts11.isIdentifier(node.expression.expression))
+    return null;
+  if (node.expression.expression.text !== "Object")
+    return null;
+  if (node.arguments.length !== 1)
+    return null;
+  const name = node.expression.name.text;
+  if (name !== "entries" && name !== "keys" && name !== "values")
+    return null;
+  return { object: node.arguments[0], shape: name };
+}
 function extractSortComparator(callback, _method, ctx) {
   const outerRaw = ctx.getJS(callback);
   const unsupported = () => ({
@@ -9809,6 +9859,7 @@ function extractItemConditionalKey(cond) {
 }
 function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   const isNested = ctx.loopParams.size > 0;
+  const depth = ctx.loopDepth;
   const propAccess = node.expression;
   const mapSource = propAccess.expression;
   let array = "";
@@ -9821,6 +9872,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   let templateMapPreamble;
   let typedMapPreamble;
   let iterationShape;
+  let objectIteration;
   const setArray = (node2) => {
     array = ctx.getJS(node2);
     templateArray = rewriteBarePropRefs2(array, node2, ctx);
@@ -9835,6 +9887,12 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     } else if (iteratorInfo.shape === "keys") {
       iterationShape = "keys";
     }
+  } else {
+    const objectIteratorInfo = isObjectIteratorCall(mapSource);
+    if (objectIteratorInfo) {
+      chainSource = objectIteratorInfo.object;
+      objectIteration = objectIteratorInfo.shape;
+    }
   }
   const filterInfo = isFilterCall(chainSource);
   const sortInfo = isSortCall(chainSource);
@@ -9932,7 +9990,8 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
       if (firstParam.type) {
         paramType = firstParam.type.getText(ctx.sourceFile);
       }
-      if (iterationShape === "entries" && ts11.isArrayBindingPattern(firstParam.name)) {
+      const isEntriesShape = iterationShape === "entries" || objectIteration === "entries";
+      if (isEntriesShape && ts11.isArrayBindingPattern(firstParam.name)) {
         const elements = firstParam.name.elements.filter((el) => !ts11.isOmittedExpression(el));
         if (elements.length === 2 && ts11.isBindingElement(elements[0]) && ts11.isIdentifier(elements[0].name) && ts11.isBindingElement(elements[1]) && ts11.isIdentifier(elements[1].name)) {
           index = elements[0].name.text;
@@ -9954,7 +10013,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
         }
       }
     }
-    if (callback.parameters.length > 1 && iterationShape !== "entries") {
+    if (callback.parameters.length > 1 && iterationShape !== "entries" && objectIteration !== "entries") {
       const secondParam = callback.parameters[1];
       index = secondParam.name.getText(ctx.sourceFile);
       if (secondParam.type) {
@@ -9969,6 +10028,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     }
     if (index)
       ctx.loopParams.add(index);
+    ctx.loopDepth++;
     const tryTransformRenderableBody = (expr) => {
       if (!ts11.isBinaryExpression(expr))
         return;
@@ -10065,6 +10125,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     }
     if (index)
       ctx.loopParams.delete(index);
+    ctx.loopDepth--;
   }
   if (children.length === 0 && !flatMapCallback) {
     return null;
@@ -10093,7 +10154,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
   const callsReactive = exprCallsReactiveGetters(arrayExpr, ctx);
   const hasCalls = exprHasFunctionCalls(arrayExpr);
   const isDirectPropArray = method !== "flatMap" && isArrayExprDirectPropRef(arrayExpr, ctx);
-  const isStaticArray = !isSignalOrMemoArray(array, ctx) && !isDirectPropArray && !hasCalls;
+  const isStaticArray = !isSignalOrMemoArray(array, ctx) && !isDirectPropArray && !hasCalls && !objectIteration;
   const nestedComponents = collectNestedComponents(children).filter((c) => c.name !== childComponent?.name);
   return {
     type: "loop",
@@ -10120,6 +10181,8 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
     sortComparator,
     chainOrder,
     iterationShape,
+    objectIteration,
+    depth,
     clientOnly: isClientOnly || undefined,
     mapPreamble,
     templateMapPreamble,
@@ -10310,27 +10373,28 @@ function processAttributes(attributes, ctx) {
     }
     if (!ts11.isJsxAttribute(attr))
       continue;
-    const name = attr.name.getText(ctx.sourceFile);
-    if (name === "ref") {
+    const rawName = attr.name.getText(ctx.sourceFile);
+    if (rawName === "ref") {
       if (attr.initializer && ts11.isJsxExpression(attr.initializer) && attr.initializer.expression) {
         reportJsxBranchLocalInCallback(attr.initializer.expression, ctx);
         ref = ctx.getJS(attr.initializer.expression);
       }
       continue;
     }
-    if (/^on[A-Z]/.test(name)) {
+    if (/^on[A-Z]/.test(rawName)) {
       if (attr.initializer && ts11.isJsxExpression(attr.initializer) && attr.initializer.expression) {
-        const eventName = name.slice(2).toLowerCase();
+        const eventName = rawName.slice(2).toLowerCase();
         reportJsxBranchLocalInCallback(attr.initializer.expression, ctx);
         events.push({
           name: eventName,
-          originalAttr: name,
+          originalAttr: rawName,
           handler: ctx.getJS(attr.initializer.expression),
           loc: getSourceLocation(attr, ctx.sourceFile, ctx.filePath)
         });
       }
       continue;
     }
+    const name = toHTMLAttrName(rawName);
     let value = getAttributeValue(attr, ctx);
     let clientOnly;
     if (attr.initializer && ts11.isJsxExpression(attr.initializer) && attr.initializer.expression) {
@@ -10361,7 +10425,7 @@ function getAttributeValue(attr, ctx) {
     return AttrValueOf.booleanAttr();
   }
   if (ts11.isStringLiteral(attr.initializer)) {
-    return AttrValueOf.literal(attr.initializer.text);
+    return AttrValueOf.literal(decodeEntities(attr.initializer.text));
   }
   if (ts11.isJsxExpression(attr.initializer) && attr.initializer.expression) {
     let expr = attr.initializer.expression;
@@ -11675,6 +11739,7 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
           bodyIsMultiRoot: n.bodyIsMultiRoot,
           bodyIsItemConditional: n.bodyIsItemConditional,
           iterationShape: n.iterationShape,
+          objectIteration: n.objectIteration,
           containerSlotId: scope.parentSlotId,
           template,
           mapPreamble: n.mapPreamble,
@@ -11896,6 +11961,7 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
         bodyIsMultiRoot: l.bodyIsMultiRoot,
         bodyIsItemConditional: l.bodyIsItemConditional,
         iterationShape: l.iterationShape,
+        objectIteration: l.objectIteration,
         template,
         staticItemTemplate,
         skeletonTemplate,
@@ -12095,6 +12161,7 @@ function collectBranchLoops(node, ctx, siblingOffsets) {
         bodyIsMultiRoot: n.bodyIsMultiRoot,
         bodyIsItemConditional: n.bodyIsItemConditional,
         iterationShape: n.iterationShape,
+        objectIteration: n.objectIteration,
         template: childTemplate,
         containerSlotId: containerSlot,
         mapPreamble: n.mapPreamble ?? null,
@@ -15564,6 +15631,7 @@ function buildDynamicLoopDelegationPlan(elem, profileComponentName) {
       param: elem.param,
       paramBindings: elem.paramBindings,
       key: elem.key,
+      index: elem.index,
       mapPreamble: elem.mapPreamble ?? null
     })
   };
@@ -15579,6 +15647,7 @@ function buildBranchLoopDelegationPlan(loop, cv, profileComponentName) {
       param: loop.param,
       paramBindings: loop.paramBindings,
       key: loop.key,
+      index: loop.index,
       mapPreamble: loop.mapPreamble ?? null
     })
   };
@@ -15594,7 +15663,8 @@ function buildStaticArrayDelegationPlan(elem, profileComponentName) {
       arrayExpr: buildChainedArrayExpr(elem),
       param: elem.param,
       mapPreamble: elem.mapPreamble ?? null,
-      offset: elem.offset ?? null
+      offset: elem.offset ?? null,
+      indexParam: elem.index ?? null
     }
   };
 }
@@ -15609,7 +15679,8 @@ function buildKeyedOrIndexLookup(args) {
       paramBindings: args.paramBindings,
       keyWithItem,
       mapPreamble: args.mapPreamble,
-      hasBindings
+      hasBindings,
+      indexParam: args.index
     };
   }
   return {
@@ -15617,7 +15688,8 @@ function buildKeyedOrIndexLookup(args) {
     arrayExpr: args.array,
     param: args.param,
     mapPreamble: args.mapPreamble,
-    hasBindings
+    hasBindings,
+    indexParam: args.index
   };
 }
 
@@ -16660,6 +16732,13 @@ function withTurn(call, componentName, childSlotId, eventName) {
   const id = JSON.stringify(`${componentName}#handler:${childSlotId}:${eventName}`);
   return `beginTurn(${id}); try { ${call} } finally { endTurn() }`;
 }
+function indexBindingLine(handler, indexParam, indexExpr) {
+  if (!indexParam || indexParam === indexExpr)
+    return null;
+  if (!extractFreeIdentifiersFromText(handler).has(indexParam))
+    return null;
+  return `const ${indexParam} = ${indexExpr}`;
+}
 function stringifyEventDelegation(lines, plan) {
   const { containerVar, events, itemLookup, profileComponentName } = plan;
   const eventsByName = new Map;
@@ -16705,8 +16784,9 @@ function stringifyEventDelegation(lines, plan) {
   }
 }
 function emitKeyedLookup(ls, ev, handlerCall, lookup) {
-  const { arrayExpr, param, keyWithItem, mapPreamble, hasBindings } = lookup;
+  const { arrayExpr, param, keyWithItem, mapPreamble, hasBindings, indexParam } = lookup;
   if (ev.nestedLoops.length === 0) {
+    const idxLine2 = indexBindingLine(ev.handler, indexParam, `${arrayExpr}.findIndex(item => String(${keyWithItem}) === key)`);
     ls.push(`      const li = ${varSlotId(ev.childSlotId)}El.closest('[${DATA_KEY}]')`);
     ls.push(`      if (li) {`);
     ls.push(`        const key = li.getAttribute('${DATA_KEY}')`);
@@ -16716,13 +16796,18 @@ function emitKeyedLookup(ls, ev, handlerCall, lookup) {
       ls.push(`          const ${param} = __bfLoopItem`);
       if (mapPreamble)
         ls.push(`          ${mapPreamble}`);
+      if (idxLine2)
+        ls.push(`          ${idxLine2}`);
       ls.push(`          ${handlerCall}`);
       ls.push(`        }`);
     } else {
       ls.push(`        const ${param} = ${arrayExpr}.find(item => String(${keyWithItem}) === key)`);
       if (mapPreamble)
         ls.push(`        ${mapPreamble}`);
-      ls.push(`        if (${param}) ${handlerCall}`);
+      if (idxLine2)
+        ls.push(`        if (${param}) { ${idxLine2}; ${handlerCall} }`);
+      else
+        ls.push(`        if (${param}) ${handlerCall}`);
     }
     ls.push(`      }`);
     return;
@@ -16751,10 +16836,15 @@ function emitKeyedLookup(ls, ev, handlerCall, lookup) {
   const allParams = [outerGuard, ...ev.nestedLoops.map((n) => n.param)];
   if (mapPreamble)
     ls.push(`      ${mapPreamble}`);
-  ls.push(`      if (${allParams.join(" && ")}) ${handlerCall}`);
+  const idxLine = indexBindingLine(ev.handler, indexParam, `${arrayExpr}.findIndex(item => String(${keyWithItem}) === outerKey)`);
+  if (idxLine)
+    ls.push(`      if (${allParams.join(" && ")}) { ${idxLine}; ${handlerCall} }`);
+  else
+    ls.push(`      if (${allParams.join(" && ")}) ${handlerCall}`);
 }
 function emitDynamicIndexLookup(ls, ev, handlerCall, lookup) {
-  const { arrayExpr, param, mapPreamble, hasBindings } = lookup;
+  const { arrayExpr, param, mapPreamble, hasBindings, indexParam } = lookup;
+  const idxLine = indexBindingLine(ev.handler, indexParam, "idx");
   ls.push(`      const li = ${varSlotId(ev.childSlotId)}El.closest('li, [bf-i]')`);
   ls.push(`      if (li && li.parentElement) {`);
   ls.push(`        const idx = Array.from(li.parentElement.children).indexOf(li)`);
@@ -16764,18 +16854,24 @@ function emitDynamicIndexLookup(ls, ev, handlerCall, lookup) {
     ls.push(`          const ${param} = __bfLoopItem`);
     if (mapPreamble)
       ls.push(`          ${mapPreamble}`);
+    if (idxLine)
+      ls.push(`          ${idxLine}`);
     ls.push(`          ${handlerCall}`);
     ls.push(`        }`);
   } else {
     ls.push(`        const ${param} = ${arrayExpr}[idx]`);
     if (mapPreamble)
       ls.push(`        ${mapPreamble}`);
-    ls.push(`        if (${param}) ${handlerCall}`);
+    if (idxLine)
+      ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`);
+    else
+      ls.push(`        if (${param}) ${handlerCall}`);
   }
   ls.push(`      }`);
 }
 function emitStaticIndexLookup(ls, ev, handlerCall, lookup, containerVar) {
-  const { arrayExpr, param, mapPreamble, offset } = lookup;
+  const { arrayExpr, param, mapPreamble, offset, indexParam } = lookup;
+  const idxLine = indexBindingLine(ev.handler, indexParam, "__idx");
   ls.push(`      let __el = ${varSlotId(ev.childSlotId)}El`);
   ls.push(`      while (__el.parentElement && __el.parentElement !== ${containerVar}) __el = __el.parentElement`);
   ls.push(`      if (__el.parentElement === ${containerVar}) {`);
@@ -16784,7 +16880,10 @@ function emitStaticIndexLookup(ls, ev, handlerCall, lookup, containerVar) {
   ls.push(`        const ${param} = ${arrayExpr}[__idx]`);
   if (mapPreamble)
     ls.push(`        ${mapPreamble}`);
-  ls.push(`        if (${param}) ${handlerCall}`);
+  if (idxLine)
+    ls.push(`        if (${param}) { ${idxLine}; ${handlerCall} }`);
+  else
+    ls.push(`        if (${param}) ${handlerCall}`);
   ls.push(`      }`);
 }
 
@@ -20006,6 +20105,28 @@ export default ${this.componentName}` : "";
 }
 var testAdapter = new TestAdapter;
 // src/adapters/parsed-expr-emitter.ts
+function isStringTypedOperand(expr, isStringName) {
+  if (expr.kind === "literal" && expr.literalType === "string")
+    return true;
+  if (expr.kind === "template-literal")
+    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);
+  }
+  if (expr.kind === "binary" && expr.op === "+") {
+    return isStringTypedOperand(expr.left, isStringName) || isStringTypedOperand(expr.right, isStringName);
+  }
+  return false;
+}
+function isStringConcatBinary(op, left, right, isStringName) {
+  return op === "+" && (isStringTypedOperand(left, isStringName) || isStringTypedOperand(right, isStringName));
+}
+function groupBinaryOperand(operand, emitted) {
+  return operand.kind === "binary" || operand.kind === "logical" || operand.kind === "conditional" ? `(${emitted})` : emitted;
+}
 function emitParsedExpr(expr, emitter) {
   const emit = (child) => emitParsedExpr(child, emitter);
   switch (expr.kind) {
@@ -20020,7 +20141,7 @@ function emitParsedExpr(expr, emitter) {
       return emitter.call(expr.callee, expr.args, emit);
     }
     case "member":
-      return emitter.member(expr.object, expr.property, expr.computed, emit);
+      return emitter.member(expr.object, expr.property, expr.computed, expr.optional, emit);
     case "index-access":
       return emitter.indexAccess(expr.object, expr.index, emit);
     case "binary":
@@ -23068,11 +23189,14 @@ export {
   joinProfilerEvents,
   isValidHelperId,
   isSupported,
+  isStringTypedOperand,
+  isStringConcatBinary,
   isLowerableObjectRestDestructure,
   isLowerableLoopDestructure,
   isBooleanAttr,
   importsSearchParams,
   identifierPath,
+  groupBinaryOperand,
   graphToJSON,
   getLoweringPlugins,
   getCompilerCounters,

package/dist/ir-to-client-js/collect-elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collect-elements.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/collect-elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,KAAK,MAAM,EAAoC,KAAK,MAAM,EAAmC,MAAM,aAAa,CAAA;AACzH,OAAO,KAAK,EAAE,eAAe,EAA+H,iBAAiB,EAA0B,oBAAoB,EAAc,UAAU,EAAE,MAAM,YAAY,CAAA;AAwGvQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CA0C7E;AAyBD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,wBAIpC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EAAE,EACf,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,cAAc,CAAC,EAAE,MAAM,EACvB,GAAG,CAAC,EAAE,eAAe,EACrB,OAAO,CAAC,EAAE,wBAAwB,GACjC,UAAU,EAAE,CAyId;AAqKD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,iBAAiB,UAAQ,GACxB,IAAI,CAoPN;AA8WD;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,SAAS,MAAM,EAAE,EAC3B,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,SAAS,EAAE,MAAM,EACjB,iBAAiB,EAAE,SAAS,OAAO,aAAa,EAAE,gBAAgB,EAAE,GAAG,SAAS,GAC/E,iBAAiB,CAUnB;AAED,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,SAAS,CAAC,EAAE,MAAM,EAClB,iBAAiB,CAAC,EAAE,SAAS,OAAO,aAAa,EAAE,gBAAgB,EAAE,GACpE,oBAAoB,EAAE,CA4DxB"}
+{"version":3,"file":"collect-elements.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/collect-elements.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,KAAK,MAAM,EAAoC,KAAK,MAAM,EAAmC,MAAM,aAAa,CAAA;AACzH,OAAO,KAAK,EAAE,eAAe,EAA+H,iBAAiB,EAA0B,oBAAoB,EAAc,UAAU,EAAE,MAAM,YAAY,CAAA;AAwGvQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CA0C7E;AAyBD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,EAAE,wBAIpC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EAAE,EACf,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,cAAc,CAAC,EAAE,MAAM,EACvB,GAAG,CAAC,EAAE,eAAe,EACrB,OAAO,CAAC,EAAE,wBAAwB,GACjC,UAAU,EAAE,CA0Id;AAqKD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,iBAAiB,UAAQ,GACxB,IAAI,CAqPN;AA+WD;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,SAAS,MAAM,EAAE,EAC3B,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,SAAS,EAAE,MAAM,EACjB,iBAAiB,EAAE,SAAS,OAAO,aAAa,EAAE,gBAAgB,EAAE,GAAG,SAAS,GAC/E,iBAAiB,CAUnB;AAED,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EACrC,SAAS,CAAC,EAAE,MAAM,EAClB,iBAAiB,CAAC,EAAE,SAAS,OAAO,aAAa,EAAE,gBAAgB,EAAE,GACpE,oBAAoB,EAAE,CA4DxB"}

package/dist/ir-to-client-js/control-flow/plan/build-event-delegation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build-event-delegation.d.ts","sourceRoot":"","sources":["../../../../src/ir-to-client-js/control-flow/plan/build-event-delegation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE9E,OAAO,KAAK,EACV,mBAAmB,EAEpB,MAAM,YAAY,CAAA;AAEnB,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,YAAY,EAClB,oBAAoB,CAAC,EAAE,MAAM,GAC5B,mBAAmB,CAkBrB;AAKD,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,MAAM,EACV,oBAAoB,CAAC,EAAE,MAAM,GAC5B,mBAAmB,CAerB;AAED;;;;GAIG;AACH,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,YAAY,EAClB,oBAAoB,CAAC,EAAE,MAAM,GAC5B,mBAAmB,CAiBrB;AAuCD,YAAY,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"build-event-delegation.d.ts","sourceRoot":"","sources":["../../../../src/ir-to-client-js/control-flow/plan/build-event-delegation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE9E,OAAO,KAAK,EACV,mBAAmB,EAEpB,MAAM,YAAY,CAAA;AAEnB,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,YAAY,EAClB,oBAAoB,CAAC,EAAE,MAAM,GAC5B,mBAAmB,CAmBrB;AAKD,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,MAAM,EACV,oBAAoB,CAAC,EAAE,MAAM,GAC5B,mBAAmB,CAgBrB;AAED;;;;GAIG;AACH,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,YAAY,EAClB,oBAAoB,CAAC,EAAE,MAAM,GAC5B,mBAAmB,CAkBrB;AA0CD,YAAY,EAAE,cAAc,EAAE,CAAA"}