@ape-egg/vibe 1.7.2 → 1.8.0

package/runtime/iterate.js

@@ -3,6 +3,7 @@ import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { resolvePath, getItemKey, computeDiff } from './iteration-utils.js';
 import { resolveThisPath } from './utils.js';
+import { managedNodes } from './conditionals.js';
 
 // Fast path for iteration rendering (opt-in via window.__VIBE_FAST_ITERATION__)
 // See: _vibe-compiled-iteration-batch.js for implementation details
@@ -138,32 +139,31 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null) =
   let clonedNodes = [];
   let firstElement = null;
 
-  // TEMPORARY: Disable fast path to test if it's causing duplication
-  let canUseFastPath = false;
+  // Use cached tree when available: cloneTreeWithElements maps the existing parsed structure
+  // onto cloned DOM nodes, avoiding a full parse() call per iteration item.
+  // Only fall back to parse() when no cached tree exists (first parse of a new template).
+  // cloneTreeWithElements has a mapping bug with compiled mode's tree structure.
+  // Keep disabled until the root cause is fixed — the other optimizations
+  // (bulk replacement, evalInScope caching, DocumentFragment) cover the hot paths.
+  const useCachedTree = false;
 
   // Create a container for parsing (to capture all nodes including comment nodes like <!-- if -->)
   const parseContainer = document.createElement('div');
 
-  if (canUseFastPath) {
-    // Fast path: clone template nodes and map to cached tree structure
-    for (let i = 0; i < templateNodes.length; i++) {
-      const cloned = templateNodes[i].cloneNode(true);
-      parseContainer.appendChild(cloned);
-      if (!firstElement && cloned.nodeType === 1) {
-        firstElement = cloned;
-      }
+  // Clone template nodes into container
+  for (let i = 0; i < templateNodes.length; i++) {
+    const cloned = templateNodes[i].cloneNode(true);
+    parseContainer.appendChild(cloned);
+    if (!firstElement && cloned.nodeType === 1) {
+      firstElement = cloned;
     }
+  }
+
+  if (useCachedTree) {
+    // Fast path: map cached tree structure onto cloned DOM (no regex, no DOM walking)
     tree = cloneTreeWithElements(cachedTree, parseContainer);
   } else {
-    // Slow path: clone and parse from scratch
-    for (let i = 0; i < templateNodes.length; i++) {
-      const cloned = templateNodes[i].cloneNode(true);
-      parseContainer.appendChild(cloned);
-      if (!firstElement && cloned.nodeType === 1) {
-        firstElement = cloned;
-      }
-    }
-    // Parse the entire container (includes all nodes + conditionals)
+    // Full parse: walk DOM, extract bindings, build tree from scratch
     tree = parse(parseContainer);
   }
 
@@ -194,24 +194,22 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null) =
 
 // Create a proxied state with scoped variables (item, index, array)
 export const createScopedState = (globalState, localVars, parentScope = {}) => {
+  // Pre-compute the combined key list once at creation time.
+  // Avoids rebuilding 3 arrays + Set on every Object.keys() call.
+  const cachedKeys = [...new Set([
+    ...Object.keys(localVars),
+    ...Object.keys(parentScope),
+    ...Reflect.ownKeys(globalState),
+  ])];
+
   return new Proxy(globalState, {
     get(target, prop) {
-      // 1. Check local scope first (item, index, array)
-      if (prop in localVars) {
-        return localVars[prop];
-      }
-
-      // 2. Check parent scope (for nested iterations)
-      if (prop in parentScope) {
-        return parentScope[prop];
-      }
-
-      // 3. Fall back to global state
+      if (prop in localVars) return localVars[prop];
+      if (prop in parentScope) return parentScope[prop];
       return Reflect.get(target, prop);
     },
 
     set(target, prop, value) {
-      // Only allow setting global state, not local vars
       if (prop in localVars) {
         console.warn(`Cannot modify iteration variable '${prop}'`);
         return false;
@@ -223,21 +221,13 @@ export const createScopedState = (globalState, localVars, parentScope = {}) => {
       return Reflect.set(target, prop, value);
     },
 
-    ownKeys(target) {
-      // Return all keys: local vars, parent scope, and global state
-      const localKeys = Object.keys(localVars);
-      const parentKeys = Object.keys(parentScope);
-      const globalKeys = Reflect.ownKeys(target);
-      return [...new Set([...localKeys, ...parentKeys, ...globalKeys])];
-    },
+    ownKeys() { return cachedKeys; },
 
     has(target, prop) {
-      // Check if property exists in local scope, parent scope, or global state
       return prop in localVars || prop in parentScope || Reflect.has(target, prop);
     },
 
     getOwnPropertyDescriptor(target, prop) {
-      // Provide property descriptor for local vars and parent scope
       if (prop in localVars) {
         return { configurable: true, enumerable: true, value: localVars[prop] };
       }
@@ -344,15 +334,10 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
     // Fall through to runtime path if compiled failed
   }
 
-  // Fast path: opt-in via window.__VIBE_FAST_ITERATION__ (preview of Vibe Compiled)
-  if (window.__VIBE_FAST_ITERATION__ && fastPath.canUseFastPath(template)) {
-    fastPath.renderFast(iterationNode, array, state, parent, endComment);
-    return;
-  }
-
   // Standard path: clone and hydrate each item (handles nested iterations/conditionals)
   const instances = [];
-  const templateNodes = [...template.element.childNodes];
+  const templateNodes = template.element.childNodes;
+  const frag = document.createDocumentFragment();
 
   for (let i = 0; i < array.length; i++) {
     const item = array[i];
@@ -362,8 +347,11 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
     // Clone, parse, hydrate
     const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
 
-    // Insert cloned nodes
-    clonedNodes.forEach((node) => parent.insertBefore(node, endComment));
+    // Collect nodes in DocumentFragment (single DOM insertion at end)
+    for (let j = 0; j < clonedNodes.length; j++) {
+      frag.appendChild(clonedNodes[j]);
+      if (clonedNodes[j].nodeType === 1) managedNodes.add(clonedNodes[j]);
+    }
 
     // Recursively render nested iterations and conditionals
     if (tree) {
@@ -375,6 +363,8 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
     instances.push({ element, tree, item, index: i, clonedNodes, scopedState });
   }
 
+  // Single DOM insertion for all items
+  parent.insertBefore(frag, endComment);
   iterationNode.runtime.instances = instances;
 
   // Mark comment as rendered (survives re-parsing since comment nodes persist in DOM)
@@ -394,9 +384,16 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   // Handle this.property for component-scoped arrays
   const resolvedArrayPath = resolveThisPath(arrayPath, startComment.parentElement);
 
-  const oldArray = resolvePath(oldState, resolvedArrayPath) || [];
+  const stateOldArray = resolvePath(oldState, resolvedArrayPath) || [];
   const newArray = resolvePath(newState, resolvedArrayPath) || [];
 
+  // Use instances (what's actually rendered) as ground truth for old array
+  // when oldState disagrees with the rendered count.
+  const instances = iterationNode.runtime.instances;
+  const oldArray = instances.length === stateOldArray.length
+    ? stateOldArray
+    : instances.map(inst => inst.item);
+
   // Compiled path: Use pre-compiled batch function when available
   if (compiled.canUseCompiled(iterationNode)) {
     const compiledMeta = compiled.getCompiledMeta(iterationNode);
@@ -415,20 +412,24 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
     // Fall through to runtime path if compiled failed
   }
 
-  // Fast path: opt-in via window.__VIBE_FAST_ITERATION__ (preview of Vibe Compiled)
-  // Use for bulk operations (large arrays or empty→full transitions)
-  if (
-    window.__VIBE_FAST_ITERATION__ &&
-    fastPath.canUseFastPath(template) &&
-    (isEmptyToFull || isFullToEmpty || isLargeArray)
-  ) {
-    fastPath.updateFast(iterationNode, newArray, newState, startComment, endComment);
+  // Bulk path: skip O(n²) LCS when arrays share no common items
+  // Handles empty→full, full→empty, and full replacement (no shared keys)
+  if (oldArray.length === 0 || newArray.length === 0) {
+    bulkReplace(iterationNode, newArray, newState, manifest, parentScope);
     return;
   }
 
-  // Standard diff-based updates
   const oldKeys = oldArray.map((item, i) => getItemKey(item, i));
   const newKeys = newArray.map((item, i) => getItemKey(item, i));
+
+  // O(n) check: if no keys are shared, do bulk replacement instead of O(n²) LCS
+  const oldKeySet = new Set(oldKeys);
+  if (!newKeys.some(k => oldKeySet.has(k))) {
+    bulkReplace(iterationNode, newArray, newState, manifest, parentScope);
+    return;
+  }
+
+  // Standard diff-based updates (arrays share some common items)
   const operations = computeDiff(oldKeys, newKeys, oldArray, newArray);
 
   operations.forEach((op) => {
@@ -453,6 +454,65 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   });
 };
 
+// Bulk replacement: clear all DOM and re-render from scratch
+// Used when arrays share no common keys (avoids O(n²) LCS)
+const bulkReplace = (iterationNode, newArray, state, manifest, parentScope) => {
+  const { itemAlias, indexAlias, template, startComment, endComment } = iterationNode.meta;
+  const parent = startComment.parentNode;
+
+  // Clear all existing DOM between comments using Range (single operation)
+  if (iterationNode.runtime.instances.length > 0) {
+    const range = document.createRange();
+    range.setStartAfter(startComment);
+    range.setEndBefore(endComment);
+    range.deleteContents();
+  }
+
+  if (newArray.length === 0) {
+    iterationNode.runtime.instances = [];
+    return;
+  }
+
+  // For simple templates (no nested iterations/conditionals, single root element),
+  // use batch string rendering: one string concatenation loop + one innerHTML parse
+  if (fastPath.canUseFastPath(template) && template.element.children.length <= 1) {
+    fastPath.renderFast(iterationNode, newArray, state, parent, endComment);
+    const instances = iterationNode.runtime.instances;
+    for (let i = 0; i < instances.length; i++) {
+      if (instances[i].element?.nodeType === 1) managedNodes.add(instances[i].element);
+    }
+    return;
+  }
+
+  // Complex templates: clone, parse, hydrate each item with DocumentFragment batching
+  const instances = [];
+  const templateNodes = template.element.childNodes;
+  const frag = document.createDocumentFragment();
+
+  for (let i = 0; i < newArray.length; i++) {
+    const item = newArray[i];
+    const localVars = { [itemAlias]: item, [indexAlias]: i };
+    const scopedState = createScopedState(state, localVars, parentScope);
+    const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
+
+    for (let j = 0; j < clonedNodes.length; j++) {
+      frag.appendChild(clonedNodes[j]);
+      if (clonedNodes[j].nodeType === 1) managedNodes.add(clonedNodes[j]);
+    }
+
+    if (tree) {
+      const nestedScope = { ...parentScope, ...localVars };
+      renderAllIterations(tree, scopedState, manifest, nestedScope);
+      _renderAllConditionals(tree, scopedState, manifest, nestedScope);
+    }
+
+    instances.push({ element, tree, item, index: i, clonedNodes, scopedState });
+  }
+
+  parent.insertBefore(frag, endComment);
+  iterationNode.runtime.instances = instances;
+};
+
 // Add a new instance at the specified index
 const addInstance = (iterationNode, item, index, state, manifest, parentScope) => {
   const { itemAlias, indexAlias, template, startComment, endComment } = iterationNode.meta;

package/runtime/iteration-utils.js

@@ -2,9 +2,13 @@
 import { ITERATION_START_REGEX, CONDITIONAL_START_REGEX } from './constants.js';
 
 // Resolve nested paths in state (e.g., "user.items" -> state.user.items)
+// Supports bracket notation: "teams[0].combatants" -> state.teams[0].combatants
 export const resolvePath = (obj, path) => {
   if (!path || !obj) return undefined;
-  return path.split('.').reduce((acc, part) => acc?.[part], obj);
+  // Split on dots and brackets: "a[0].b[1].c" → ["a", "0", "b", "1", "c"]
+  const parts = path.match(/[^.\[\]]+/g);
+  if (!parts) return undefined;
+  return parts.reduce((acc, part) => acc?.[part], obj);
 };
 
 // Clone template element preserving structure

package/runtime/parse.js

@@ -140,6 +140,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
           // Store conditional metadata (use index for deterministic keys)
           const conditionalKey = `conditional_${i}`;
           result[conditionalKey] = {
+            _key: conditionalKey,
             type: 'conditional',
             meta: {
               expression,

package/runtime/pre-compiled-iterations.js

@@ -60,23 +60,46 @@ export const getCompiledMeta = (iterationNode) => {
 };
 
 /**
- * Render iteration using pre-compiled batch function from manifest
+ * Build a scoped wrapper that puts state keys in scope for the batch function.
+ * The compiler generates (arr, $) => { ... } with bare variable names like `selectedCategory`,
+ * but those aren't parameters of the arrow function. We create a wrapper that defines
+ * state keys as parameters, then evaluates the batch function in that scope.
  */
-export const renderCompiled = (iterationNode, array, state, compiledMeta, parent, endComment) => {
-  // Create function from string if not cached
+const buildScopedFn = (batchFnStr, stateKeys) => {
+  return new Function(
+    ...stateKeys, 'arr',
+    `const $ = {${stateKeys.map(k => k + ':' + k).join(',')}};
+     const __batchFn = ${batchFnStr};
+     return __batchFn(arr, $);`
+  );
+};
+
+/**
+ * Call a compiled batch function with state keys spread into scope
+ */
+const callCompiled = (iterationNode, array, state, compiledMeta) => {
   if (!iterationNode.runtime.compiledFn) {
     try {
-      // compiledMeta.batchFn is a complete arrow function: (arr, $) => { ... }
-      // Wrap in a function that returns it, then call to get the actual function
-      iterationNode.runtime.compiledFn = new Function('return ' + compiledMeta.batchFn)();
+      const stateKeys = Object.keys(state);
+      iterationNode.runtime.compiledFn = buildScopedFn(compiledMeta.batchFn, stateKeys);
+      iterationNode.runtime.compiledStateKeys = stateKeys;
     } catch (e) {
       console.error('[compiled-iteration] Failed to create compiled function:', e);
-      return false; // Signal failure
+      return null;
     }
   }
 
-  // Build HTML using compiled function
-  const html = iterationNode.runtime.compiledFn(array, state);
+  const keys = iterationNode.runtime.compiledStateKeys;
+  const values = keys.map(k => state[k]);
+  return iterationNode.runtime.compiledFn(...values, array);
+};
+
+/**
+ * Render iteration using pre-compiled batch function from manifest
+ */
+export const renderCompiled = (iterationNode, array, state, compiledMeta, parent, endComment) => {
+  const html = callCompiled(iterationNode, array, state, compiledMeta);
+  if (html === null) return false;
 
   // Parse and insert
   if (parseTemplate) {
@@ -118,18 +141,8 @@ export const updateCompiled = (iterationNode, newArray, state, compiledMeta, sta
     return true;
   }
 
-  // Create function if not cached
-  if (!iterationNode.runtime.compiledFn) {
-    try {
-      iterationNode.runtime.compiledFn = new Function('return ' + compiledMeta.batchFn)();
-    } catch (e) {
-      console.error('Failed to create compiled function:', e);
-      return false;
-    }
-  }
-
-  // Build HTML using compiled function
-  const html = iterationNode.runtime.compiledFn(newArray, state);
+  const html = callCompiled(iterationNode, newArray, state, compiledMeta);
+  if (html === null) return false;
 
   // Parse and insert
   if (parseTemplate) {

package/runtime/state.js

@@ -1,11 +1,29 @@
 // Track which objects are already proxied to avoid double-wrapping
 const proxyCache = new WeakMap();
 
+// Batching: collect mutations and flush once per microtask
+let pendingFlush = false;
+let flushCallback = null;
+const changedProps = new Set();
+
+const scheduleFlush = () => {
+  if (!pendingFlush) {
+    pendingFlush = true;
+    queueMicrotask(() => {
+      pendingFlush = false;
+      const props = [...changedProps];
+      changedProps.clear();
+      if (flushCallback) flushCallback(props);
+    });
+  }
+};
+
 // Deep proxy: recursively wrap nested objects and arrays
 const createDeepProxy = (target, rerender, rootState = null, rootProp = null) => {
   // For root level, rootState is the target itself
   if (rootState === null) {
     rootState = target;
+    flushCallback = (props) => rerender(props);
   }
 
   // Check cache first
@@ -19,13 +37,11 @@ const createDeepProxy = (target, rerender, rootState = null, rootProp = null) =>
 
       // Only trigger rerender if value actually changed
       if (oldValue !== value) {
-        // Perform the mutation
         const ref = Reflect.set(obj, prop, value);
 
-        // Trigger rerender with changed state
-        // If we're nested, use the root prop; otherwise use the prop itself
-        const changedProp = rootProp || prop;
-        rerender({ [changedProp]: rootState[changedProp] }, null);
+        // Track which root-level property changed (for selective extraction)
+        changedProps.add(rootProp || prop);
+        scheduleFlush();
 
         return ref;
       }

package/runtime/utils.js

@@ -2,6 +2,10 @@
 let hashCounter = 0;
 export const hash = () => `_${hashCounter++}`;
 
+// Function compilation cache: avoids creating new Function() for repeated expressions
+// Key: normalized expression + '\0' + state keys joined by '\0'
+const fnCache = new Map();
+
 // Evaluate expression in the context of state
 // Handles @[this.property] for component state and @[property] for global state
 export const evalInScope = (expr, state, element = null) => {
@@ -18,13 +22,28 @@ export const evalInScope = (expr, state, element = null) => {
       }
     }
 
-    // Add $ to scope for this.property references
-    const effectiveState = { ...state, $: state };
+    // Get state keys once (triggers ownKeys trap only once for Proxies)
+    const stateKeys = Object.keys(state);
+    const keyCount = stateKeys.length;
+
+    // Cache lookup: expression + key signature → compiled function
+    // All iteration instances share the same state shape, so this hits cache 999/1000 times
+    const cacheKey = normalized + '\0' + stateKeys.join('\0');
+    let fn = fnCache.get(cacheKey);
+    if (!fn) {
+      const allKeys = new Array(keyCount + 1);
+      for (let i = 0; i < keyCount; i++) allKeys[i] = stateKeys[i];
+      allKeys[keyCount] = '$';
+      fn = new Function(...allKeys, `'use strict'; return (${normalized})`);
+      fnCache.set(cacheKey, fn);
+    }
 
-    const keys = Object.keys(effectiveState);
-    const values = Object.values(effectiveState);
+    // Build values array matching the cached function's parameter order
+    const values = new Array(keyCount + 1);
+    for (let i = 0; i < keyCount; i++) values[i] = state[stateKeys[i]];
+    values[keyCount] = state;
 
-    const result = new Function(...keys, `'use strict'; return (${normalized})`)(...values);
+    const result = fn(...values);
 
     // If result is undefined and we're accessing a component property, try case-insensitive match
     // This handles HTML lowercasing attribute names like @[this.iconName] -> @[this.iconname]