@ape-egg/vibe 2.1.17 → 2.1.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+
+- **Loop-scoped bindings in slot content passed to a component inside an iteration didn't resolve** (`runtime/iterate.js`) — content projected into a `<component src>` is captured raw (`_vibeSlotContent`) and inlined only when `processComponent` runs, by which point the row's iteration scope is gone. So a `@[...]` in that slot content rooted in a loop alias (`item`/`index`/outer) or `this` couldn't resolve later: value bindings rendered `undefined` and name-bindings (`<icon @[row.icon]>`) never set their attribute. The new `resolveSlotContentBindings` pre-resolves those bindings into registry-backed global refs — the same snapshot mechanism the component's own prop attributes use — before the scope is lost, so the inlined slot hydrates against the right values and the row's update path refreshes them in place (the wrapper inherits `_vibeIterPropExprs` / `data-vibe-iter-prop`, so `refreshIterationComponentProps` re-evaluates them on each item change). Globals-only bindings are left raw and resolve through the normal reactive path. Tests: `e2e-runtime/slot-name-binding-loop.html`, `tests/e2e/slot-name-binding.spec.js`.
+
 ## [2.1.17] - 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.17",
+  "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/iterate.js

@@ -368,6 +368,50 @@ export const releaseOrphanedIterationProps = (nodes) => {
   }
 };
 
+// Slot content projected into a <component src> is captured raw (`_vibeSlotContent`)
+// and inlined only when processComponent runs — by which point the row's iteration
+// scope is gone. Any `@[...]` in that content rooted in a loop alias (item/index/
+// outer) or `this` therefore can't resolve later: value bindings render undefined
+// and name-bindings (`<icon @[row.icon]>`) never set their attribute. Pre-resolve
+// those into registry-backed global refs here — the same snapshot mechanism the
+// component's own prop attributes use — so the inlined slot hydrates against the
+// right values and the row's update path refreshes them in place (the wrapper
+// inherits `_vibeIterPropExprs`/`data-vibe-iter-prop`, so refreshIterationComponentProps
+// re-evaluates them on each item change). Globals-only bindings are left raw; they
+// resolve through the normal reactive path against the inlined component's scope.
+const resolveSlotContentBindings = (el, scopedState, aliases) => {
+  const html = el._vibeSlotContent;
+  if (!html || !html.includes('@[')) return;
+  const registry = ensureIterPropsRegistry();
+  const idByExpr = new Map();
+  const rewritten = html.replace(BINDING_REGEX, (whole, expr) => {
+    const usesLocalScope =
+      /\bthis\b/.test(expr) ||
+      (aliases && extractDependencies(expr).some((d) => aliases.has(d)));
+    if (!usesLocalScope) return whole;
+    let id = idByExpr.get(expr);
+    if (id === undefined) {
+      let value;
+      try {
+        value = evalInScope(expr, scopedState, el);
+      } catch {
+        return whole;
+      }
+      if (value === undefined) return whole;
+      id = `_p${__vibeIterPropCounter++}`;
+      registry[id] = value;
+      idByExpr.set(expr, id);
+      (el._vibeIterPropExprs = el._vibeIterPropExprs || []).push({ id, attrName: null, expr });
+      (el._vibeIterPropIds = el._vibeIterPropIds || []).push(id);
+    }
+    return `@[window.__vibeiterprops.${id}]`;
+  });
+  if (idByExpr.size) {
+    el._vibeSlotContent = rewritten;
+    el.setAttribute('data-vibe-iter-prop', '');
+  }
+};
+
 // For <component src> elements inside an iteration instance, evaluate any
 // `@[expr]` attribute bindings against the iteration's scoped state and route
 // every resolved value through the global iteration-prop registry. The prop
@@ -433,6 +477,7 @@ export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
           // Leave binding raw — processComponent will handle it as a binding
         }
       }
+      resolveSlotContentBindings(el, scopedState, aliases);
     }
   }
 };

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