@ape-egg/vibe 2.1.18 → 2.1.19

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.1.19] - 2026-06-25
+
+### Fixed
+
+- **`<!-- each list as item, i (item.id) -->` (index alias before the key) silently failed to iterate** (`runtime/constants.js`, `runtime/iteration-utils.js`, `runtime/parse.js`, `compiler/src/compiler/manifest_builder.rs`) — the iteration header grammar only accepted the key before the index (`as item (item.id), i`). When the index came first, the trailing `(item.id)` made `ITERATION_REGEX` fail to match, so `parse.js` skipped the comment entirely and the body rendered once with an undefined alias instead of iterating. `ITERATION_REGEX` now accepts the `(key)` expression in either position (a second optional key group), and a new `parseIterationHeader` helper coalesces the two and is the single source of truth used by `parse.js`. Compiled pages re-parse the preserved each comment through the same helper, so they were fixed by the runtime change; additionally the Rust `manifest_builder` (compiler 2.0.0 → 2.0.1) now strips the key before the item/index split so the emitted manifest carries a clean `indexAlias` (was `"i (item.id)"`) for both orderings. Tests: `tests/unit/iteration-utils.test.js` (parseIterationHeader), `tests/compiler/iterations-index-key/`, `e2e-runtime/iteration-index-key.html` + `tests/e2e/iteration-index-key.spec.js` (runtime + compiled).
+
 ## [2.1.18] - 2026-06-22
 
 ### Fixed

package/compiler/src/Cargo.lock

@@ -1599,7 +1599,7 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
 [[package]]
 name = "vibe-compiler"
-version = "2.0.0"
+version = "2.0.1"
 dependencies = [
  "clap",
  "colored",

package/compiler/src/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "vibe-compiler"
-version = "2.0.0"
+version = "2.0.1"
 edition = "2021"
 description = "Vibe framework compiler - compiles Vibe source files into optimized output"
 authors = ["Kim Korte"]

package/compiler/src/compiler/manifest_builder.rs

@@ -202,16 +202,26 @@ impl ManifestBuilder {
                     // Extract expression: "each items as item" -> "items as item"
                     let expression = trimmed.strip_prefix("each ").unwrap_or("").to_string();
 
-                    // Parse expression to extract parts: "items as item, index" or "items as item"
+                    // Parse expression to extract parts: "items as item, index" or "items as item".
+                    // The optional (key) expression may sit before or after the index — strip it
+                    // first so the item/index split isn't polluted by it. The key itself isn't
+                    // stored here; the runtime re-derives it from the preserved comment.
                     let parts: Vec<&str> = expression.split(" as ").collect();
                     let array_path = parts.get(0).unwrap_or(&"").trim().to_string();
                     let alias_part = parts.get(1).unwrap_or(&"").trim();
-                    let (item_alias, index_alias) = if let Some(comma_pos) = alias_part.find(',') {
-                        let item = alias_part[..comma_pos].trim().to_string();
-                        let index = alias_part[comma_pos + 1..].trim().to_string();
+                    let alias_without_key = match (alias_part.find('('), alias_part.rfind(')')) {
+                        (Some(open), Some(close)) if close > open => {
+                            format!("{}{}", &alias_part[..open], &alias_part[close + 1..])
+                        }
+                        _ => alias_part.to_string(),
+                    };
+                    let alias_without_key = alias_without_key.trim();
+                    let (item_alias, index_alias) = if let Some(comma_pos) = alias_without_key.find(',') {
+                        let item = alias_without_key[..comma_pos].trim().to_string();
+                        let index = alias_without_key[comma_pos + 1..].trim().to_string();
                         (item, index)
                     } else {
-                        (alias_part.to_string(), "index".to_string())
+                        (alias_without_key.to_string(), "index".to_string())
                     };
 
                     // Find node index in siblings

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "2.1.18",
+  "version": "2.1.19",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/constants.js

@@ -211,18 +211,23 @@ export const BINDING_REGEX = new RegExp(String.raw`\@\[(${BINDING_INNER})\]`, 'g
 // Regex for detecting a pure binding (entire value is just @[expression])
 export const PURE_BINDING_REGEX = new RegExp(String.raw`^\@\[(${BINDING_INNER})\]$`);
 
-// Regex for parsing iteration comment syntax. Supported forms:
+// Regex for parsing iteration comment syntax. Supported forms — the index and
+// the key are each optional and may appear in EITHER order:
 //   <!-- each items as item -->
 //   <!-- each items as item, index -->
 //   <!-- each items as item (item.id) -->                // explicit key
-//   <!-- each items as item (item.id), index -->         // key + index
-// Capture groups: arrayPath, itemAlias, keyExpr (optional), indexAlias (optional).
+//   <!-- each items as item (item.id), index -->         // key, then index
+//   <!-- each items as item, index (item.id) -->         // index, then key
+// Capture groups: arrayPath, itemAlias, keyBeforeIndex (optional), indexAlias
+// (optional), keyAfterIndex (optional). The key lands in group 3 when written
+// before the index and in group 5 when written after; parseIterationHeader
+// coalesces the two — prefer that helper over destructuring the raw match.
 // The array expression can be any JS: a state path, a window global, a method
 // call, or an inline literal. The optional key expression is evaluated per
 // item against scoped state to produce a stable identity for diffing — this
 // keeps survivors stable when earlier items are removed (otherwise the
 // fallback hash key embeds the index and triggers bulk re-render).
-export const ITERATION_REGEX = /^each\s+(.+)\s+as\s+(\w+)(?:\s*\(\s*([^)]+?)\s*\))?(?:\s*,\s*(\w+))?\s*$/;
+export const ITERATION_REGEX = /^each\s+(.+)\s+as\s+(\w+)(?:\s*\(\s*([^)]+?)\s*\))?(?:\s*,\s*(\w+))?(?:\s*\(\s*([^)]+?)\s*\))?\s*$/;
 
 // Regex for detecting start of iteration comment
 export const ITERATION_START_REGEX = /^each\s+/;

package/runtime/iteration-utils.js

@@ -1,5 +1,24 @@
 // Utility functions for array iteration
-import { ITERATION_START_REGEX, CONDITIONAL_START_REGEX } from './constants.js';
+import { ITERATION_REGEX, ITERATION_START_REGEX, CONDITIONAL_START_REGEX } from './constants.js';
+
+// Parse an `each` directive body (the text inside `<!-- ... -->`, markers
+// stripped) into its parts, or null when it isn't a valid each. The index alias
+// and the (key) expression are both optional and may be written in either order
+// — `as item, i (item.id)` and `as item (item.id), i` are equivalent. Single
+// source of truth for the grammar, used by the runtime parser and (via DOM
+// re-parse of the restored markers) by compiled pages.
+export const parseIterationHeader = (text) => {
+  const match = text.match(ITERATION_REGEX);
+  if (!match) return null;
+  const [, arrayPath, itemAlias, keyBeforeIndex, indexAlias, keyAfterIndex] = match;
+  const keyExpr = keyBeforeIndex ?? keyAfterIndex;
+  return {
+    arrayPath,
+    itemAlias,
+    keyExpr: keyExpr != null ? keyExpr.trim() : null,
+    indexAlias: indexAlias ?? null,
+  };
+};
 
 // Resolve nested paths in state (e.g., "user.items" -> state.user.items)
 // Supports bracket notation: "teams[0].combatants" -> state.teams[0].combatants

package/runtime/parse.js

@@ -1,8 +1,7 @@
-import { findEndComment, findConditionalEnd } from './iteration-utils.js';
+import { findEndComment, findConditionalEnd, parseIterationHeader } from './iteration-utils.js';
 import {
   NON_REACTIVE_ELEMENTS,
   BINDING_REGEX,
-  ITERATION_REGEX,
   CONDITIONAL_REGEX,
   DOM_ELEMENT_PROPERTIES,
   DEHYDRATE_CLASS_OR_ATTR,
@@ -150,10 +149,10 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
 
     // Handle iteration comments
     if (nodeName === '#comment') {
-      const iterationMatch = textContent.trim().match(ITERATION_REGEX);
+      const iterationMatch = parseIterationHeader(textContent.trim());
 
       if (iterationMatch) {
-        const [_, arrayPath, itemAlias, keyExpr, indexAlias] = iterationMatch;
+        const { arrayPath, itemAlias, keyExpr, indexAlias } = iterationMatch;
 
         try {
           // Find matching end comment