@ape-egg/vibe 1.9.0 → 1.9.5

package/runtime/affected.js

@@ -1,46 +1,75 @@
-import { resolvePath, deepEqual } from './iteration-utils.js';
-import { extractDependencies } from './conditionals.js';
-import { BINDING_REGEX } from './constants.js';
-import { evalInScope, resolveThisPath } from './utils.js';
+import { resolvePath, deepEqual } from "./iteration-utils.js";
+import { extractDependencies } from "./conditionals.js";
+import { BINDING_REGEX } from "./constants.js";
+import { evalInScope, resolveThisPath } from "./utils.js";
 
 // Evaluate conditional expression
-const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
+const evaluateCondition = (expression, state, element = null) =>
+  !!evalInScope(expression, state, element);
 
 // Helper function to check if a match references a specific key.
 // Fast path: exact match or property access (`user.name` matches `user`).
 // Slow path: word-boundary search for complex expressions like `Math.floor(coins / 100)`
 // where the key appears as an identifier anywhere in the expression.
-const isIdentChar = (c) => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9') || c === '_' || c === '$';
+const isIdentChar = (c) =>
+  (c >= "a" && c <= "z") ||
+  (c >= "A" && c <= "Z") ||
+  (c >= "0" && c <= "9") ||
+  c === "_" ||
+  c === "$";
 
 const matchesKey = (matchStr, key) => {
-  if (matchStr === key || matchStr.startsWith(key + '.') || matchStr.startsWith(key + '[')) return true;
+  if (
+    matchStr === key ||
+    matchStr.startsWith(key + ".") ||
+    matchStr.startsWith(key + "[")
+  )
+    return true;
 
   // Search for key as a standalone identifier (word boundaries on both sides)
   let i = 0;
   while ((i = matchStr.indexOf(key, i)) !== -1) {
-    const before = i === 0 ? '' : matchStr[i - 1];
-    const after = i + key.length >= matchStr.length ? '' : matchStr[i + key.length];
+    const before = i === 0 ? "" : matchStr[i - 1];
+    const after =
+      i + key.length >= matchStr.length ? "" : matchStr[i + key.length];
     if (!isIdentChar(before) && !isIdentChar(after)) return true;
     i += key.length;
   }
   return false;
 };
 
-const recursive = (tree, state, newState, affected, scopedStateForHydration = null, depth = 0) => {
+const recursive = (
+  tree,
+  state,
+  newState,
+  affected,
+  scopedStateForHydration = null,
+  depth = 0,
+) => {
   // Handle iteration nodes specially
-  if (tree.type === 'iteration') {
-    const resolvedExpr = resolveThisPath(tree.meta.arrayPath, tree.meta.startComment?.parentElement);
-
-    const oldArray = evalInScope(resolvedExpr, state, tree.meta.startComment?.parentElement) ?? resolvePath(state, resolvedExpr);
-    const newArray = evalInScope(resolvedExpr, newState, tree.meta.startComment?.parentElement) ?? resolvePath(newState, resolvedExpr);
+  if (tree.type === "iteration") {
+    const resolvedExpr = resolveThisPath(
+      tree.meta.arrayPath,
+      tree.meta.startComment?.parentElement,
+    );
+
+    const oldArray =
+      evalInScope(resolvedExpr, state, tree.meta.startComment?.parentElement) ??
+      resolvePath(state, resolvedExpr);
+    const newArray =
+      evalInScope(
+        resolvedExpr,
+        newState,
+        tree.meta.startComment?.parentElement,
+      ) ?? resolvePath(newState, resolvedExpr);
 
     // Fast path: reference comparison (arrays are typically replaced, not mutated)
     // This avoids expensive O(n) deepEqual for large arrays
     if (oldArray !== newArray) {
       affected.push({
-        type: 'iteration',
+        type: "iteration",
         node: tree,
-        changeType: 'array',
+        changeType: "array",
       });
       return affected;
     }
@@ -51,16 +80,26 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
       // Compiled iterations have instances without tree/scopedState — the batch function
       // may reference global state keys (e.g., `selectedCategory` in a button binding).
       // If any state key changed, trigger a rebuild so the batch function re-evaluates.
-      const hasCompiledInstances = tree.compiled && tree.runtime.instances.length > 0
-        && !tree.runtime.instances[0].tree;
-
-      if (hasCompiledInstances) {
+      // Instances rendered without a per-row parsed tree — compiled (batch
+      // fn from the manifest) or runtime batch (fast path for simple
+      // templates) — can't be walked by the recursive descent below to
+      // detect nested outer-state bindings. Mark the whole iteration as
+      // affected so updateIteration runs and rebuilds the rows.
+      const hasTreelessInstances =
+        tree.runtime.instances.length > 0 &&
+        !tree.runtime.instances[0].tree;
+
+      if (hasTreelessInstances) {
         const isInitialHydration = state === newState;
         if (!isInitialHydration) {
           const stateKeys = Object.keys(state);
-          const hasChangedKey = stateKeys.some(k => state[k] !== newState[k]);
+          const hasChangedKey = stateKeys.some((k) => state[k] !== newState[k]);
           if (hasChangedKey) {
-            affected.push({ type: 'iteration', node: tree, changeType: 'array' });
+            affected.push({
+              type: "iteration",
+              node: tree,
+              changeType: "array",
+            });
             return affected;
           }
         }
@@ -68,15 +107,28 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
 
       for (const instance of tree.runtime.instances) {
         if (instance.tree && instance.scopedState) {
-          // Build plain-object snapshots for comparison. scopedState is a live Proxy
-          // that reflects current global state — spreading it gives us the local vars
-          // (cat, index) plus current global values. We then override globals with the
-          // actual old (state) / new (newState) values so binding comparisons can detect
-          // which state keys changed.
+          // Build plain-object snapshots for comparison. Spreading
+          // instance.scopedState yields its local vars (item, index) plus
+          // whatever globals were captured at scope-creation time; the
+          // overlaying spread of state/newState then writes the *current*
+          // values from this update cycle. Both merged states are plain
+          // objects with up-to-date values.
           const mergedOldState = { ...instance.scopedState, ...state };
           const mergedNewState = { ...instance.scopedState, ...newState };
-          // Pass scopedState as scopedStateForHydration so evalInScope can access iteration variables
-          recursive(instance.tree, mergedOldState, mergedNewState, affected, instance.scopedState, depth + 1);
+          // scopedStateForHydration must reflect the new state so hydrate's
+          // bindings inside the row see post-update values. instance.scopedState
+          // is frozen against whatever target renderIteration was called with
+          // (often the plain initialState snapshot from index.js), so reading
+          // outer-state keys through it returns stale values after later
+          // mutations. mergedNewState carries the live globals + localVars.
+          recursive(
+            instance.tree,
+            mergedOldState,
+            mergedNewState,
+            affected,
+            mergedNewState,
+            depth + 1,
+          );
         }
       }
     }
@@ -85,23 +137,38 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
   }
 
   // Handle conditional nodes specially
-  if (tree.type === 'conditional') {
-    const oldValue = evaluateCondition(tree.meta.expression, state, tree.meta.startComment?.parentElement);
-    const newValue = evaluateCondition(tree.meta.expression, newState, tree.meta.startComment?.parentElement);
+  if (tree.type === "conditional") {
+    const oldValue = evaluateCondition(
+      tree.meta.expression,
+      state,
+      tree.meta.startComment?.parentElement,
+    );
+    const newValue = evaluateCondition(
+      tree.meta.expression,
+      newState,
+      tree.meta.startComment?.parentElement,
+    );
 
     // Check if condition result changed
     if (oldValue !== newValue) {
       affected.push({
-        type: 'conditional',
+        type: "conditional",
         node: tree,
-        changeType: 'expression',
+        changeType: "expression",
       });
       return affected;
     }
 
     // Condition didn't change, check for affected elements inside active branch
     if (tree.runtime.activeInstance && tree.runtime.activeInstance.parsedTree) {
-      return recursive(tree.runtime.activeInstance.parsedTree, state, newState, affected, scopedStateForHydration, depth + 1);
+      return recursive(
+        tree.runtime.activeInstance.parsedTree,
+        state,
+        newState,
+        affected,
+        scopedStateForHydration,
+        depth + 1,
+      );
     }
 
     return affected;
@@ -128,21 +195,29 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
       // Resolve this.property to componentId.property
       const resolvedInner = resolveThisPath(m.inner, tree.element);
 
-      const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
+      const noMatch = !shallowState.some((key) =>
+        matchesKey(resolvedInner, key),
+      );
 
       let shouldAffect = false;
       let relevantKeys = [];
 
       if (isInitialHydration) {
         // Initial hydration: affect all matched keys
-        relevantKeys = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
+        relevantKeys = shallowNewState.filter((key) =>
+          matchesKey(resolvedInner, key),
+        );
         shouldAffect = noMatch || relevantKeys.length > 0;
       } else {
         // Update: only affect if value changed
-        const changedKeys = shallowNewState.filter((key) =>
-          matchesKey(resolvedInner, key) && state[key] !== newState[key]
+        const changedKeys = shallowNewState.filter(
+          (key) =>
+            matchesKey(resolvedInner, key) && state[key] !== newState[key],
         );
-        relevantKeys = changedKeys.length > 0 ? changedKeys : shallowState.filter((key) => matchesKey(resolvedInner, key));
+        relevantKeys =
+          changedKeys.length > 0
+            ? changedKeys
+            : shallowState.filter((key) => matchesKey(resolvedInner, key));
         shouldAffect = noMatch || changedKeys.length > 0;
       }
 
@@ -189,25 +264,30 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
         // Resolve this.property to componentId.property
         const resolvedInner = resolveThisPath(m.inner, tree.element);
 
-        const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
+        const noMatch = !shallowState.some((key) =>
+          matchesKey(resolvedInner, key),
+        );
 
         let shouldAffect = false;
 
         if (isInitialHydration) {
           // Initial hydration: affect all matched keys
-          const newMatches = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
+          const newMatches = shallowNewState.filter((key) =>
+            matchesKey(resolvedInner, key),
+          );
           shouldAffect = noMatch || newMatches.length > 0;
         } else {
           // Update: only affect if value changed
-          const changedKeys = shallowNewState.filter((key) =>
-            matchesKey(resolvedInner, key) && state[key] !== newState[key]
+          const changedKeys = shallowNewState.filter(
+            (key) =>
+              matchesKey(resolvedInner, key) && state[key] !== newState[key],
           );
           shouldAffect = noMatch || changedKeys.length > 0;
         }
 
         if (shouldAffect) {
           affected.push({
-            type: 'attribute',
+            type: "attribute",
             attrName,
             attrValue,
             matchOuter: m.outer,
@@ -239,7 +319,9 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
         const resolvedInner = resolveThisPath(m.inner, tree.element);
         // HTML lowercases attribute names, so expression may be lowercase while state
         // keys are camelCase. Match case-insensitively by trying both direct and lowercased.
-        const matchKey = (key) => matchesKey(resolvedInner, key) || matchesKey(resolvedInner, key.toLowerCase());
+        const matchKey = (key) =>
+          matchesKey(resolvedInner, key) ||
+          matchesKey(resolvedInner, key.toLowerCase());
 
         const noMatch = !shallowState.some(matchKey);
 
@@ -249,15 +331,15 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
           const newMatches = shallowNewState.filter(matchKey);
           shouldAffect = noMatch || newMatches.length > 0;
         } else {
-          const changedKeys = shallowNewState.filter((key) =>
-            matchKey(key) && state[key] !== newState[key]
+          const changedKeys = shallowNewState.filter(
+            (key) => matchKey(key) && state[key] !== newState[key],
           );
           shouldAffect = noMatch || changedKeys.length > 0;
         }
 
         if (shouldAffect) {
           affected.push({
-            type: 'nameBinding',
+            type: "nameBinding",
             nameBinding,
             matchOuter: m.outer,
             matchInner: m.inner, // Keep original, evalInScope will resolve this.
@@ -274,8 +356,15 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
   if (children) {
     for (const key in children) {
       const child = children[key];
-      if (child && typeof child === 'object') {
-        recursive(child, state, newState, affected, scopedStateForHydration, depth + 1);
+      if (child && typeof child === "object") {
+        recursive(
+          child,
+          state,
+          newState,
+          affected,
+          scopedStateForHydration,
+          depth + 1,
+        );
       }
     }
   }