@ape-egg/vibe 1.8.0 → 1.9.1

package/runtime/index.js

@@ -4,7 +4,7 @@ import createManifest from './manifest.js';
 import hydrate from './hydrate.js';
 import affected from './affected.js';
 import { deepMerge, hash } from './utils.js';
-import { renderAllIterations, setRenderAllConditionals } from './iterate.js';
+import { renderAllIterations, setRenderAllConditionals, releaseOrphanedIterationProps } from './iterate.js';
 import { renderAllConditionals, branchNodeRegistry, managedNodes } from './conditionals.js';
 import {
   NON_REACTIVE_ELEMENTS,
@@ -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, renderComponentTemplate } from './component.js';
 import { debugLog } from './debug.js';
 import { shouldCleanup, cleanup } from './cleanup.js';
+import { reconcile } from './reconcile.js';
 import {
   buildHyperspeedManifest,
   hyperspeedManifest,
@@ -617,6 +618,32 @@ 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,
+  });
+
+  // Pure-render path for surgical component HMR. Given raw component template
+  // HTML, callsite props, slot HTML, and existing componentIds, returns the
+  // processed HTML string the plugin's HMR handler can hand to $.reconcile.
+  // Scripts are NOT executed — callers use this only when they've verified
+  // script contents haven't changed (so registered state is still valid).
+  Object.defineProperty($, 'renderComponent', {
+    value: renderComponentTemplate,
+    enumerable: false,
+  });
+
   // Initial hydration - pass plain values so iteration can do reference comparison
   const initialState = extractPlainValue($);
   const affectedElements = affected(parsedTree, initialState, initialState);
@@ -696,6 +723,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
@@ -761,29 +796,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
@@ -791,19 +817,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);
@@ -823,6 +872,12 @@ const main = (s, config = {}, stringSelector = '') => {
       });
     });
 
+    // CLEANUP OF CURRENT STATE
+    releaseOrphanedComponentState(removedComponentIds);
+    mutations.forEach(({ removedNodes: removedNodesList }) => {
+      releaseOrphanedIterationProps(removedNodesList);
+    });
+
     // Fire hooks once after all mutations are processed (not per-node)
     if (hadChanges) {
       if (addedElements > 0 || addedNodes > 0 || removedElements > 0 || removedNodes > 0) {
@@ -1019,6 +1074,8 @@ const main = (s, config = {}, stringSelector = '') => {
           console.error('[vibe] Error in ready hook:', error);
         }
       });
+      // Resolve $.ready promise after all ready callbacks have run
+      resolveReady();
     }
   };