@ape-egg/vibe 2.3.0 → 3.0.1

package/runtime/affected.js

@@ -1,7 +1,27 @@
-import { resolvePath, deepEqual } from "./iteration-utils.js";
-import { extractDependencies } from "./conditionals.js";
+import { resolvePath, deepEqual, iterPropWrappersOf } from "./iteration-utils.js";
 import { BINDING_REGEX } from "./constants.js";
-import { evalInScope, resolveThisPath, ownKeysOf, scopedOverlayOf } from "./utils.js";
+import { liveNode, isOutgoing } from "./staging.js";
+import { beginSpeculative, endSpeculative } from "./debug.js";
+import {
+  evalInScope,
+  resolveThisPath,
+  ownKeysOf,
+  scopedOverlayOf,
+  rememberOverlay,
+  overlayKeysOf,
+} from "./utils.js";
+import { beginTracking, endTracking, unsubscribe } from "./tracking.js";
+
+// Drop the subscribers of a stale binding-cache list. A cache rebuild means
+// the parsed source or element changed — the old binding objects are dead,
+// but their anchors may still be connected (a reparse of a live element), so
+// disconnect-pruning alone would leave them serving stale patches.
+const unsubscribeBindings = (list) => {
+  if (!list) return;
+  for (let i = 0; i < list.length; i++) {
+    if (list[i]._sub) unsubscribe(list[i]._sub);
+  }
+};
 
 // The @[...] bindings in a tree node are static: the parsed template string and
 // the element's component scope don't change between renders. Re-running the
@@ -11,6 +31,7 @@ import { evalInScope, resolveThisPath, ownKeysOf, scopedOverlayOf } from "./util
 // and element so a re-parse or element swap recomputes.
 const textBindingsOf = (tree) => {
   if (tree._tbSrc === tree.parsed && tree._tbEl === tree.element) return tree._tb;
+  unsubscribeBindings(tree._tb);
   const out = [];
   BINDING_REGEX.lastIndex = 0;
   let m;
@@ -24,6 +45,9 @@ const textBindingsOf = (tree) => {
       tokens: tokensOf(resolvedInner),
     });
   }
+  // Back-ref so dispatch can expand one dirty binding to its whole text
+  // span (a text node hydrates all-or-nothing).
+  for (let i = 0; i < out.length; i++) out[i]._group = out;
   tree._tb = out;
   tree._tbSrc = tree.parsed;
   tree._tbEl = tree.element;
@@ -32,6 +56,7 @@ const textBindingsOf = (tree) => {
 
 const attrBindingsOf = (tree) => {
   if (tree._abSrc === tree.attributes && tree._abEl === tree.element) return tree._ab;
+  if (tree._ab) for (const entry of tree._ab) unsubscribeBindings(entry.matches);
   const out = [];
   for (const attrName in tree.attributes) {
     const attrValue = tree.attributes[attrName];
@@ -55,6 +80,7 @@ const attrBindingsOf = (tree) => {
 // text/attr binding caches above.
 const nameBindingsOf = (tree) => {
   if (tree._nbSrc === tree.nameBindings && tree._nbEl === tree.element) return tree._nb;
+  unsubscribeBindings(tree._nb);
   const out = [];
   for (const nameBinding of tree.nameBindings) {
     BINDING_REGEX.lastIndex = 0;
@@ -74,6 +100,12 @@ const nameBindingsOf = (tree) => {
 const evaluateCondition = (expression, state, element = null) =>
   !!evalInScope(expression, state, element);
 
+// One subscriber per conditional/iteration tree node, hosted on the node —
+// stable across flushes, dead with the node. The start comment anchors
+// liveness (disconnect-pruning).
+export const nodeSubscriberOf = (tree, kind) =>
+  (tree._sub ??= { kind, node: tree, anchor: tree.meta.startComment });
+
 // 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)`
@@ -124,14 +156,17 @@ const keySetOf = (snapshot) => {
 // A binding is affected on update when it reads a state key whose value changed,
 // OR when it reads no known state key at all (can't prove it's unaffected, so
 // re-evaluate — hydrate self-guards the DOM write). False can only be returned
-// when every key the binding reads is present AND unchanged.
+// when every key the binding reads is present AND unchanged. A key absent from
+// the OLD snapshot is a change even when its new value is undefined — mount
+// walks diff against {}, and skipping there means the binding never reaches
+// tracked() and never registers a subscriber.
 const bindingAffected = (tokens, keySet, state, newState) => {
   let matched = false;
   for (let i = 0; i < tokens.length; i++) {
     const t = tokens[i];
     if (keySet.has(t)) {
       matched = true;
-      if (state[t] !== newState[t]) return true;
+      if (!(t in state) || state[t] !== newState[t]) return true;
     }
   }
   return !matched;
@@ -162,7 +197,7 @@ const nameBindingAffected = (tokens, keyMap, state, newState) => {
     const realKey = keyMap.get(tokens[i]);
     if (realKey !== undefined) {
       matched = true;
-      if (state[realKey] !== newState[realKey]) return true;
+      if (!(realKey in state) || state[realKey] !== newState[realKey]) return true;
     }
   }
   return !matched;
@@ -178,16 +213,6 @@ const nameBindingAffected = (tokens, keyMap, state, newState) => {
 // churn when the value didn't actually flip.
 const CALL_EXPR_REGEX = /\b[A-Za-z_$][\w$]*\s*\(/;
 
-// Resolve a clone-list entry to its live counterpart. processComponent swaps
-// the original `<component src>` for a post-process `<component>` wrapper and
-// records the new node on the original via `_vibeReplacedBy`. Mirrors
-// `liveCloneNode` in iterate.js — kept inline to avoid a circular import.
-const liveCloneNode = (node) => {
-  let cur = node;
-  while (cur && cur._vibeReplacedBy) cur = cur._vibeReplacedBy;
-  return cur;
-};
-
 // Descend into any inlined `<component>` parsed trees attached to an
 // iteration row. `_vibeIterTree` is stamped on the post-process wrapper by
 // index.js (mutation-observer path) and on nested inlined components reached
@@ -202,15 +227,13 @@ const walkInlinedComponentTrees = (
   depth,
 ) => {
   for (let n = 0; n < clonedNodes.length; n++) {
-    const node = liveCloneNode(clonedNodes[n]);
+    const node = liveNode(clonedNodes[n]);
     if (!node || node.nodeType !== 1) continue;
     const wrappers = [];
     if (node._vibeIterTree) wrappers.push(node);
-    const found = node.querySelectorAll?.('[data-vibe-iter-prop]');
-    if (found) {
-      for (let i = 0; i < found.length; i++) {
-        if (found[i]._vibeIterTree) wrappers.push(found[i]);
-      }
+    const found = iterPropWrappersOf(node);
+    for (let i = 0; i < found.length; i++) {
+      if (found[i]._vibeIterTree) wrappers.push(found[i]);
     }
     for (let w = 0; w < wrappers.length; w++) {
       recursive(
@@ -225,6 +248,18 @@ const walkInlinedComponentTrees = (
   }
 };
 
+// One affected() pass can reach the same parsed tree through several linkage
+// channels — a conditional walks both its runtime-mounted branch and its
+// processMutations-linked children, an iteration row's inlined component tree
+// hangs off the wrapper's `_vibeIterTree` AND off an ancestor's children. Each
+// duplicate walk multiplies at every nesting level (measured ~1000 visits per
+// node per flush on the game's armory page). A tree object is one DOM position
+// — the first visit already collected its entries, so the rest are skipped.
+// Scoped states stay correct: a row-scoped tree is reached through its owning
+// iteration first (document order), and inlined component trees carry
+// registry-rewritten expressions that evaluate identically from any channel.
+let walkVisited = null;
+
 const recursive = (
   tree,
   state,
@@ -233,6 +268,10 @@ const recursive = (
   scopedStateForHydration = null,
   depth = 0,
 ) => {
+  if (walkVisited) {
+    if (walkVisited.has(tree)) return affected;
+    walkVisited.add(tree);
+  }
   // Handle iteration nodes specially
   if (tree.type === "iteration") {
     const resolvedExpr = resolveThisPath(
@@ -243,22 +282,48 @@ const recursive = (
     const oldArray =
       evalInScope(resolvedExpr, state, tree.meta.startComment?.parentElement) ??
       resolvePath(state, resolvedExpr);
+    // The new-side eval is the iteration's subscription: whatever the
+    // arrayPath expression reads NOW is what should notify it. Old-side
+    // evals never track — they read the previous snapshot.
+    const iterSub = nodeSubscriberOf(tree, "iteration");
+    iterSub.lastScope = newState;
+    beginTracking(iterSub, overlayKeysOf(newState));
     const newArray =
       evalInScope(
         resolvedExpr,
         newState,
         tree.meta.startComment?.parentElement,
       ) ?? resolvePath(newState, resolvedExpr);
+    endTracking();
 
     // Fast path: reference comparison (arrays are typically replaced, not mutated)
-    // This avoids expensive O(n) deepEqual for large arrays
+    // This avoids expensive O(n) deepEqual for large arrays.
+    //
+    // Call-expression array paths (`<!-- each filterItems(...) -->`, `.filter()`
+    // chains) build a FRESH array on every eval, so the two evals above never
+    // share a reference even when nothing relevant changed — the ref compare
+    // alone would flag every such iteration as a full array change on every
+    // flush and rewalk all its rows (the armory 900ms-per-tick hang). For call
+    // expressions only, same length + same item refs ⇒ the rendered rows are
+    // already right: fall through to the per-instance walk below, which still
+    // catches outer-state bindings inside rows. Plain paths keep pure ref
+    // semantics — `$.items = [...$.items]` after an in-place item mutation must
+    // still refresh every row (the documented reassign-to-rerender pattern).
     if (oldArray !== newArray) {
-      affected.push({
-        type: "iteration",
-        node: tree,
-        changeType: "array",
-      });
-      return affected;
+      const freshRefArtifact =
+        CALL_EXPR_REGEX.test(resolvedExpr) &&
+        Array.isArray(oldArray) &&
+        Array.isArray(newArray) &&
+        oldArray.length === newArray.length &&
+        oldArray.every((item, i) => item === newArray[i]);
+      if (!freshRefArtifact) {
+        affected.push({
+          type: "iteration",
+          node: tree,
+          changeType: "array",
+        });
+        return affected;
+      }
     }
 
     // Array didn't change, but check for affected elements inside iteration instances
@@ -312,6 +377,15 @@ const recursive = (
           const mergedNewState = overlay
             ? { ...newState, ...overlay }
             : { ...instance.scopedState, ...newState };
+          // Carry the alias set onto the merged plain snapshots so tracking
+          // windows opened against them can tell alias reads from global
+          // reads (skipKeys). Without the recorded overlay (legacy scoped
+          // states) alias names subscribe as phantom keys — harmless, they
+          // never appear in changedProps.
+          if (overlay) {
+            rememberOverlay(mergedOldState, overlay);
+            rememberOverlay(mergedNewState, overlay);
+          }
           // 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
@@ -360,11 +434,18 @@ const recursive = (
       state,
       tree.meta.startComment?.parentElement,
     );
+    // New-side eval doubles as the conditional's subscription (see the
+    // iteration note above). Helper bodies reading live `$` record through
+    // the proxy trap even though the direct reads here hit the snapshot.
+    const condSub = nodeSubscriberOf(tree, "conditional");
+    condSub.lastScope = newState;
+    beginTracking(condSub, overlayKeysOf(newState));
     const newValue = evaluateCondition(
       tree.meta.expression,
       newState,
       tree.meta.startComment?.parentElement,
     );
+    endTracking();
 
     // Check if condition result changed
     if (oldValue !== newValue) {
@@ -381,7 +462,10 @@ const recursive = (
         changeType: "expression",
         scopedState: newState,
         oldScopedState: state,
+        wasConnected: !!tree.meta.startComment?.isConnected,
       });
+      // The branch swap re-renders everything beneath — no point collecting
+      // entries for content that's about to be replaced.
       return affected;
     }
 
@@ -393,6 +477,8 @@ const recursive = (
     // this cycle so updateConditional re-runs against live state; if the
     // result hasn't really flipped, mountBranch's branchChanged guard absorbs
     // the call cheaply. Skip during initial hydration (state === newState).
+    // Does NOT stop the walk: the branch is (almost always) unchanged, so the
+    // content beneath still needs its own entries collected below.
     if (state !== newState && CALL_EXPR_REGEX.test(tree.meta.expression)) {
       const stateKeys = Object.keys(state);
       const anyChanged = stateKeys.some((k) => state[k] !== newState[k]);
@@ -403,14 +489,24 @@ const recursive = (
           changeType: "expression-fn-call",
           scopedState: newState,
           oldScopedState: state,
+          wasConnected: !!tree.meta.startComment?.isConnected,
         });
-        return affected;
       }
     }
 
-    // Condition didn't change, check for affected elements inside active branch
+    // Condition didn't change: walk the live content. Runtime-mounted
+    // branches live in runtime.activeInstance.parsedTree. COMPILED
+    // pre-rendered conditionals never went through mountBranch — their live
+    // DOM is what parse put in `children` — and processMutations links
+    // later-mounted subtrees (SPA fragments, slot-projected content) into
+    // `children` too. Both channels must be walked or content under a
+    // compiled conditional is frozen at its mount-time render (the game's
+    // blank fragment pages). Children whose root isn't connected are the
+    // detached both-branch template nodes of a runtime conditional — skip
+    // those; their restoration templates are strings on meta.branches, and
+    // hydrating detached template DOM is pure waste.
     if (tree.runtime.activeInstance && tree.runtime.activeInstance.parsedTree) {
-      return recursive(
+      recursive(
         tree.runtime.activeInstance.parsedTree,
         state,
         newState,
@@ -419,6 +515,15 @@ const recursive = (
         depth + 1,
       );
     }
+    if (tree.children) {
+      for (const key in tree.children) {
+        const child = tree.children[key];
+        if (!child || typeof child !== "object") continue;
+        const root = child.element ?? child.textNode;
+        if (!root || !root.isConnected) continue;
+        recursive(child, state, newState, affected, scopedStateForHydration, depth + 1);
+      }
+    }
 
     return affected;
   }
@@ -450,6 +555,8 @@ const recursive = (
           element: tree.element,
           textNode: tree.textNode, // Reference to specific text node (prevents wiping children)
           scopedState: scopedStateForHydration, // Pass scoped state from iteration context
+          binding: m, // Stable per-binding host — hydrate registers its subscriber here
+          wasConnected: !!(tree.textNode ?? tree.element)?.isConnected,
         });
       }
     }
@@ -475,6 +582,8 @@ const recursive = (
             matchInner: m.inner, // Keep original, evalInScope will resolve this.
             element: tree.element,
             scopedState: scopedStateForHydration, // Pass scoped state from iteration context
+            binding: m,
+            wasConnected: !!tree.element?.isConnected,
           });
         }
       }
@@ -498,14 +607,18 @@ const recursive = (
           matchInner: m.inner, // Keep original, evalInScope will resolve this.
           element: tree.element,
           scopedState: scopedStateForHydration,
+          binding: m,
+          wasConnected: !!tree.element?.isConnected,
         });
       }
     }
   }
 
-  // Process children
+  // Process children — except under an outgoing wrapper, whose subtree is
+  // frozen until the swap (the node's own bindings above stay live: the next
+  // navigation must still re-trigger the remount through them).
   const children = tree.children;
-  if (children) {
+  if (children && !isOutgoing(tree.element)) {
     for (const key in children) {
       const child = children[key];
       if (child && typeof child === "object") {
@@ -524,7 +637,17 @@ const recursive = (
   return affected;
 };
 
+// The whole collect is a speculative context: evaluations here probe "did
+// this change?" against snapshots where scoped aliases may legitimately be
+// absent — expected throws, not author errors (debug.js reportEvalError
+// stays quiet inside).
 export default (tree, state, newState) => {
-  const affected = recursive(tree, state, newState, [], null, 0);
-  return affected;
+  walkVisited = new WeakSet();
+  beginSpeculative();
+  try {
+    return recursive(tree, state, newState, [], null, 0);
+  } finally {
+    endSpeculative();
+    walkVisited = null;
+  }
 };

package/runtime/cleanup.js

@@ -45,7 +45,51 @@ export const shouldCleanup = (rootElement) => {
     }
   }
 
-  // 3. All processing appears complete
+  // 3. Check for unhydrated ATTRIBUTE bindings — style="width: @[…]%" is
+  // invalid CSS until hydrated (width computes as auto → a full-width bar),
+  // so revealing on text-settled alone paints attribute-only content wrong
+  // (the game's "Making potion" loader flashed full on every navigation).
+  // data-vibe-* attributes are runtime transport that legitimately carries
+  // raw bindings across remounts, and src/key on a component wrapper are the
+  // wrapper's own remount contract — both excluded.
+  const elementWalker = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT, {
+    acceptNode(el) {
+      let parent = el;
+      while (parent && parent !== rootElement) {
+        if (NON_REACTIVE_ELEMENTS.includes(parent.nodeName)) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        if (parent.hasAttribute(DEHYDRATE_CLASS_OR_ATTR) || parent.classList?.contains(DEHYDRATE_CLASS_OR_ATTR)) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        parent = parent.parentElement;
+      }
+      return NodeFilter.FILTER_ACCEPT;
+    },
+  });
+
+  let el;
+  while ((el = elementWalker.nextNode())) {
+    // A component wrapper's attributes are all its own machinery: src/key
+    // are the remount contract, data-vibe-* is transport, and every other
+    // attribute is a PROP — owned and consumed by processComponent at mount,
+    // parked raw by design on a declaration-form outlet whose src resolved
+    // to nothing. None of them are unhydrated page bindings.
+    if (
+      el.nodeName === 'COMPONENT' ||
+      (el.nodeName === 'DIV' && el.classList?.contains('component'))
+    ) {
+      continue;
+    }
+    for (const attr of el.attributes) {
+      if (attr.name.startsWith('data-vibe-')) continue;
+      if (/@\[.+?\]/.test(attr.value)) {
+        return false;
+      }
+    }
+  }
+
+  // 4. All processing appears complete
   return true;
 };