@ape-egg/vibe 1.7.2 → 1.9.0

package/runtime/constants.js

@@ -202,15 +202,19 @@ export const DOM_ELEMENT_PROPERTIES = new Set([
 ]);
 
 // Regex for matching reactive bindings (@[expression])
-// Supports one level of nested brackets: @[items[0]] or @[obj[key]]
-export const BINDING_REGEX = /\@\[((?:[^\[\]]|\[[^\]]*\])+)\]/g;
+// Supports nested brackets, single-quoted and double-quoted strings inside expressions:
+// @[items[0]], @[obj[key]], @[x.replace('.png', '-mugshot.png')]
+const BINDING_INNER = String.raw`(?:[^\[\]'"]|\[[^\]]*\]|'[^']*'|"[^"]*")+`;
+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 = /^\@\[((?:[^\[\]]|\[[^\]]*\])+)\]$/;
+export const PURE_BINDING_REGEX = new RegExp(String.raw`^\@\[(${BINDING_INNER})\]$`);
 
-// Regex for parsing iteration comment syntax (<!-- each items as item, index -->)
-// Supports nested paths like category.items
-export const ITERATION_REGEX = /^each\s+([\w.]+)\s+as\s+(\w+)(?:\s*,\s*(\w+))?\s*$/;
+// Regex for parsing iteration comment syntax (<!-- each expression as item, index -->)
+// The array expression can be any JS: a state path (items), a window global
+// (window.fights), a method call (items.filter(x => x.active)), or an inline
+// array literal (['a', 'b']). Parsed via evalInScope at render time.
+export const ITERATION_REGEX = /^each\s+(.+)\s+as\s+(\w+)(?:\s*,\s*(\w+))?\s*$/;
 
 // Regex for detecting start of iteration comment
 export const ITERATION_START_REGEX = /^each\s+/;

package/runtime/index.js

@@ -5,7 +5,7 @@ import hydrate from './hydrate.js';
 import affected from './affected.js';
 import { deepMerge, hash } from './utils.js';
 import { renderAllIterations, setRenderAllConditionals } from './iterate.js';
-import { renderAllConditionals } from './conditionals.js';
+import { renderAllConditionals, branchNodeRegistry, managedNodes } from './conditionals.js';
 import {
   NON_REACTIVE_ELEMENTS,
   PHASE_ATTACH,
@@ -21,9 +21,10 @@ import {
   PHASE_READY,
   DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
-import { processComponent, abortComponentFetch } from './component.js';
+import { processComponent, abortComponentFetch, collectComponentIds, releaseOrphanedComponentState } from './component.js';
 import { debugLog } from './debug.js';
 import { shouldCleanup, cleanup } from './cleanup.js';
+import { reconcile } from './reconcile.js';
 import {
   buildHyperspeedManifest,
   hyperspeedManifest,
@@ -39,6 +40,9 @@ const shouldProcessNode = (node) => {
   // Only process element nodes
   if (node.nodeType !== 1) return false;
 
+  // Skip nodes already managed by mountBranch or renderIteration
+  if (managedNodes.has(node)) return false;
+
   // Fast check first: skip nodes without Vibe syntax (cheapest check)
   const html = node.outerHTML;
   if (
@@ -116,9 +120,15 @@ const processCoreLoop = (node, parsedNode, state, manifest, isNewNode, debug) =>
   // 1. Parse - already done before calling core loop (in processMutations)
 
   // 2. Hydrate (replace @[...] bindings)
-  // Use empty object as "previous state" for new nodes so all bindings are affected
+  // For new nodes, use {} so all bindings are found. But filter out iterations
+  // and conditionals — those should only go through renderAllIterations/renderAllConditionals
+  // (initial render path), not updateIteration/updateConditional (which would diff against
+  // stale oldState and produce false adds/removes).
   const oldStateForAffected = isNewNode ? {} : previousState;
-  const affectedElements = affected(parsedNode, oldStateForAffected, state);
+  let affectedElements = affected(parsedNode, oldStateForAffected, state);
+  if (isNewNode) {
+    affectedElements = affectedElements.filter(a => a.type !== 'iteration' && a.type !== 'conditional');
+  }
   if (affectedElements.length > 0) {
     hydratedCount = affectedElements.length;
     hydrate(affectedElements, state, manifest, oldStateForAffected);
@@ -509,30 +519,45 @@ const main = (s, config = {}, stringSelector = '') => {
   };
 
   // Extract plain values from proxy (removes proxy wrappers)
+  // Optimized: indexed loops, Object.keys (no prototype walk), inline primitive check
   const extractPlainValue = (obj) => {
     if (obj === null || typeof obj !== 'object') return obj;
-    if (Array.isArray(obj)) return obj.map(extractPlainValue);
-    const plain = {};
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        plain[key] = extractPlainValue(obj[key]);
+    if (Array.isArray(obj)) {
+      const len = obj.length;
+      const arr = new Array(len);
+      for (let i = 0; i < len; i++) {
+        const v = obj[i];
+        arr[i] = (v !== null && typeof v === 'object') ? extractPlainValue(v) : v;
       }
+      return arr;
+    }
+    const keys = Object.keys(obj);
+    const len = keys.length;
+    const plain = {};
+    for (let i = 0; i < len; i++) {
+      const k = keys[i];
+      const v = obj[k];
+      plain[k] = (v !== null && typeof v === 'object') ? extractPlainValue(v) : v;
     }
     return plain;
   };
 
   // Observer callback will be defined below (already declared above before processComponent)
 
-  const $ = state(s, (newState, oldState) => {
-    // Extract current state (after mutation)
-    const currentState = extractPlainValue($);
-    const changedProp = Object.keys(newState)[0];
+  const $ = state(s, (changedProps) => {
+    // Selective extraction: only extract changed props, preserve references for unchanged.
+    // This ensures affected() correctly skips iterations whose arrays didn't change,
+    // while still detecting binding changes inside iteration instances.
+    const currentState = { ...previousState };
+    for (const prop of changedProps) {
+      currentState[prop] = extractPlainValue($[prop]);
+    }
 
     // Find what changed (compare previousState vs currentState)
     const affectedElements = affected(parsedTree, previousState, currentState);
 
     if (affectedElements.length > 0) {
-      debugLog(PHASE_UPDATE, `state changed (${changedProp})`, debug);
+      debugLog(PHASE_UPDATE, 'state changed', debug);
 
       // Capture pending mutations before disconnecting (takeRecords clears the queue)
       let pendingMutations = [];
@@ -562,6 +587,18 @@ const main = (s, config = {}, stringSelector = '') => {
           processMutations(pendingMutations);
         }
       }
+
+      // Conditionals/iterations may have mounted new DOM while observer was disconnected.
+      // Scan for unresolved <component src=""> elements that need fetching.
+      if (componentProcessingStarted) {
+        const componentConfig = {
+          ...config,
+          _forceSync: true,
+          _observer: observer,
+          _processMutations: processMutations,
+        };
+        processComponent(rootElement, null, componentConfig);
+      }
     }
 
     // Store previous state for hooks (currentState is already plain, no need to clone)
@@ -581,6 +618,22 @@ const main = (s, config = {}, stringSelector = '') => {
     enumerable: false,
   });
 
+  // Promise that resolves after the ready hook fires and all ready callbacks
+  // have run. Lets late subscribers await readiness without missing the event:
+  // `await $.ready`. Non-enumerable so it won't leak into state snapshots.
+  let resolveReady;
+  Object.defineProperty($, 'ready', {
+    value: new Promise((resolve) => { resolveReady = resolve; }),
+    enumerable: false,
+  });
+
+  // Reconcile a managed subtree against new source HTML. Opt-in entry point;
+  // dormant unless called (so hot paths and benchmarks are unaffected).
+  Object.defineProperty($, 'reconcile', {
+    value: reconcile,
+    enumerable: false,
+  });
+
   // Initial hydration - pass plain values so iteration can do reference comparison
   const initialState = extractPlainValue($);
   const affectedElements = affected(parsedTree, initialState, initialState);
@@ -660,6 +713,14 @@ const main = (s, config = {}, stringSelector = '') => {
     let evaluatedCount = 0;
     let addedElementsList = []; // Track all added elements for verbose output
 
+    // Collect data-vibe-component-id values across ALL removed subtrees in this
+    // batch before doing any per-node work, so we can evict their state after
+    // the DOM mutations have been applied.
+    const removedComponentIds = new Set();
+    mutations.forEach(({ removedNodes: removedNodesList }) => {
+      removedNodesList.forEach((node) => collectComponentIds(node, removedComponentIds));
+    });
+
     mutations.forEach(({ addedNodes: addedNodesList, removedNodes: removedNodesList, target }) => {
       removedNodesList.forEach((node) => {
         // If this is a component element with pending fetch, abort it
@@ -667,6 +728,20 @@ const main = (s, config = {}, stringSelector = '') => {
           abortComponentFetch(node);
         }
 
+        // If this node is tracked by a conditional branch (e.g. a <component src>
+        // that was replaced by processComponent via el.replaceWith), update the
+        // conditional's tracked reference to point to the replacement node.
+        const branchRef = branchNodeRegistry.get(node);
+        if (branchRef) {
+          // Find the replacement: an added node in the same mutation at the same parent
+          const replacement = Array.from(addedNodesList).find(n => n.parentNode === target);
+          if (replacement) {
+            branchRef.nodes[branchRef.index] = replacement;
+            branchNodeRegistry.set(replacement, branchRef);
+          }
+          branchNodeRegistry.delete(node);
+        }
+
         const entry = Object.entries(manifest).find(([_, element]) => element === node);
 
         // Skip nodes that aren't tracked (e.g., iteration-generated nodes or nodes outside reactive scope)
@@ -711,29 +786,20 @@ const main = (s, config = {}, stringSelector = '') => {
           return;
         }
 
-        const entry = Object.entries(manifest).find(([_, element]) => element === target);
-
-        // If parent isn't tracked, this node is outside the reactive scope
-        if (!entry) return;
-
-        const [dotAnnotation] = entry;
-        const picked = navigateTree(parsedTree, dotAnnotation);
-
-        // If we can't navigate to the parent in the tree, skip
-        if (!picked) return;
-
-        // If parent has no element reference, re-parse from the actual DOM element
-        if (!picked.element) {
-          picked.element = target;
+        // Capture raw slot content of nested <component src> elements BEFORE parse runs.
+        // Parse creates conditional nodes from <!-- if --> comments, and renderConditional
+        // later removes the template nodes between the comments. Without capturing slot
+        // content first, conditionals inside a component's slot content lose their branch
+        // templates, breaking reactive updates.
+        if (node.nodeType === 1) {
+          node.querySelectorAll('component[src], div.component[src]').forEach((el) => {
+            if (el._vibeSlotContent === undefined) el._vibeSlotContent = el.innerHTML;
+          });
         }
 
-        // Parse the newly added node (use monotonically increasing counter for deterministic key)
-        // Initialize counter if it doesn't exist
-        if (!picked._nextChildIndex) {
-          picked._nextChildIndex = Object.keys(picked.children).length;
-        }
-        const name = `${node.nodeName.toLowerCase()}_${picked._nextChildIndex}`;
-        picked._nextChildIndex++; // Always increment, never decrement
+        const entry = Object.entries(manifest).find(([_, element]) => element === target);
+
+        // Parse the newly added node
         const parsedNode = parse(node);
 
         // Accumulate skipped stats
@@ -741,19 +807,42 @@ const main = (s, config = {}, stringSelector = '') => {
           totalSkipped += parsedNode.stats.skipped;
         }
 
-        // Update parent's parsed HTML (only once per parent)
-        if (!parsedParents) parsedParents = new Set();
-        if (!parsedParents.has(picked)) {
-          const { parsed } = parse(picked.element);
-          picked.parsed = parsed;
-          parsedParents.add(picked);
-        }
+        // If parent is tracked in the manifest, register this new node in the parsed tree.
+        // (If not — e.g. mutations inside an iteration instance whose rows aren't in the
+        // global manifest — we still hydrate the node below; we just skip tree/manifest
+        // registration since there's no tree branch to attach to.)
+        if (entry) {
+          const [dotAnnotation] = entry;
+          const picked = navigateTree(parsedTree, dotAnnotation);
+
+          if (picked) {
+            if (!picked.element) {
+              picked.element = target;
+            }
 
-        // Add the parsed node to parent's children
-        picked.children[name] = parsedNode;
+            // Parse the newly added node (use monotonically increasing counter for deterministic key)
+            // Initialize counter if it doesn't exist
+            if (!picked._nextChildIndex) {
+              picked._nextChildIndex = Object.keys(picked.children).length;
+            }
+            const name = `${node.nodeName.toLowerCase()}_${picked._nextChildIndex}`;
+            picked._nextChildIndex++; // Always increment, never decrement
+
+            // Update parent's parsed HTML (only once per parent)
+            if (!parsedParents) parsedParents = new Set();
+            if (!parsedParents.has(picked)) {
+              const { parsed } = parse(picked.element);
+              picked.parsed = parsed;
+              parsedParents.add(picked);
+            }
 
-        // Recursively add node and all descendants to manifest
-        addToManifest(parsedNode, manifest, `${dotAnnotation}.${name}`);
+            // Add the parsed node to parent's children
+            picked.children[name] = parsedNode;
+
+            // Recursively add node and all descendants to manifest
+            addToManifest(parsedNode, manifest, `${dotAnnotation}.${name}`);
+          }
+        }
 
         // Run core loop for the new node (parse already done, hydrate → conditionals → iterate)
         const counts = processCoreLoop(node, parsedNode, $, manifest, true, debug);
@@ -773,6 +862,9 @@ const main = (s, config = {}, stringSelector = '') => {
       });
     });
 
+    // CLEANUP OF CURRENT STATE
+    releaseOrphanedComponentState(removedComponentIds);
+
     // Fire hooks once after all mutations are processed (not per-node)
     if (hadChanges) {
       if (addedElements > 0 || addedNodes > 0 || removedElements > 0 || removedNodes > 0) {
@@ -907,7 +999,8 @@ const main = (s, config = {}, stringSelector = '') => {
 
     // Check for new <component> elements after DOM mutations
     // Process component elements if we've started (initial call happened)
-    if (componentProcessingStarted && !cleanupExecuted) {
+    // Note: Also process after cleanup — conditionals may reveal new components
+    if (componentProcessingStarted) {
       const componentConfig = {
         ...config,
         _forceSync: true,
@@ -968,6 +1061,8 @@ const main = (s, config = {}, stringSelector = '') => {
           console.error('[vibe] Error in ready hook:', error);
         }
       });
+      // Resolve $.ready promise after all ready callbacks have run
+      resolveReady();
     }
   };