@ape-egg/vibe 2.1.11 → 2.1.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.1.12] - 2026-06-22
+
+### Fixed
+
+- **Nodes resolving inside slot-projected branch/iteration content were orphaned from the reactive tree** (`runtime/index.js`) — `navigateTree` only walks a node's `children`, but content projected across a `<slot>` boundary (a conditional branch's or an iteration instance's slotted content) is registered in the flat manifest under a path that isn't reachable through `children` — the slot node's children don't include the projected subtree. So when a `<component src>` (or any node) mounted inside such content, `navigateTree` returned null: on add, the resolved subtree never linked into the reactive tree (so it wasn't reactive); on remove, the stale tree entry lingered beside its replacement. A new `findNodeByElement` does an identity search across the *full* tree — plain `children`, conditional branch trees (`runtime.activeInstance.parsedTree`), and iteration instance trees (`runtime.instances`) — and is used as a fallback at both the add and remove sites when path navigation can't reach the parent, so the subtree links in and cleans up regardless of slot/branch/iteration projection.
+
 ## [2.1.11] - 2026-06-22
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/index.js

@@ -81,6 +81,48 @@ const navigateTree = (tree, path) => {
   return path.split('.').filter(k => k).reduce((node, key) => node?.children?.[key], tree);
 };
 
+// Locate the tree node whose `.element` is `target`, searching the full tree:
+// plain `children`, plus conditional branch trees (`runtime.activeInstance`)
+// and iteration instance trees (`runtime.instances`). navigateTree only walks
+// `children`, so it can't reach content projected across a <slot> boundary — a
+// conditional branch's slotted content is registered in the flat manifest by
+// path, but that path isn't navigable through `children` (the slot node's
+// children don't include the projected subtree). When a <component src> resolves
+// inside such content, navigateTree returns null and the resolved subtree would
+// be orphaned from the reactive tree. This identity search recovers the real
+// parent node so the subtree links in regardless of slot/branch projection.
+const findNodeByElement = (tree, target) => {
+  if (!target) return null;
+  const seen = new Set();
+  const walk = (node) => {
+    if (!node || typeof node !== 'object' || seen.has(node)) return null;
+    seen.add(node);
+    if (node.element === target) return node;
+    if (node.children) {
+      for (const key in node.children) {
+        const hit = walk(node.children[key]);
+        if (hit) return hit;
+      }
+    }
+    const branchTree = node.runtime?.activeInstance?.parsedTree;
+    if (branchTree) {
+      const hit = walk(branchTree);
+      if (hit) return hit;
+    }
+    const instances = node.runtime?.instances;
+    if (instances) {
+      for (let i = 0; i < instances.length; i++) {
+        if (instances[i]?.tree) {
+          const hit = walk(instances[i].tree);
+          if (hit) return hit;
+        }
+      }
+    }
+    return null;
+  };
+  return walk(tree);
+};
+
 // Get or create a node in the tree at the given path
 const ensureNode = (tree, path) => {
   const keys = path.split('.').filter(k => k);
@@ -853,7 +895,12 @@ const main = (s, config = {}, stringSelector = '') => {
         const name = dotPath.pop();
         const parentDotAnnotation = dotPath.join('.');
 
-        const picked = navigateTree(parsedTree, parentDotAnnotation);
+        // Identity fallback mirrors the added-node path: a parent inside
+        // slot-projected branch content isn't reachable via navigateTree's
+        // `children` walk, so resolve it by element identity instead — otherwise
+        // the removed node's stale tree entry lingers alongside its replacement.
+        const picked =
+          navigateTree(parsedTree, parentDotAnnotation) || findNodeByElement(parsedTree, target);
 
         // If we can't navigate to the parent, skip
         if (!picked || !picked.element) return;
@@ -912,7 +959,12 @@ const main = (s, config = {}, stringSelector = '') => {
         // registration since there's no tree branch to attach to.)
         if (entry) {
           const [dotAnnotation] = entry;
-          const picked = navigateTree(parsedTree, dotAnnotation);
+          // navigateTree walks `children` only; when the parent lives in a
+          // conditional branch's slot-projected content its manifest path isn't
+          // navigable that way (see findNodeByElement). Fall back to an identity
+          // search so the resolved subtree still links into the reactive tree.
+          const picked =
+            navigateTree(parsedTree, dotAnnotation) || findNodeByElement(parsedTree, target);
 
           if (picked) {
             if (!picked.element) {