@ape-egg/vibe 1.7.2 → 1.9.0

package/runtime/component.js

@@ -1,5 +1,5 @@
 import { debugLog } from './debug.js';
-import { PHASE_FETCH, DEHYDRATE_CLASS_OR_ATTR } from './constants.js';
+import { PHASE_FETCH, DEHYDRATE_CLASS_OR_ATTR, BINDING_REGEX } from './constants.js';
 import { evalInScope } from './utils.js';
 
 // Deterministic component counter
@@ -16,6 +16,42 @@ export const generateComponentId = () => {
 // Helper to escape regex special characters
 const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
+// Kept as no-ops for API compatibility — path-based tracking was replaced by
+// DOM-scan cleanup in releaseOrphanedComponentState. Manifest paths don't
+// align 1:1 with component ownership across conditional remounts, so scanning
+// the DOM subtree about to be removed is simpler and waterproof.
+export const trackComponentOwnership = () => {};
+
+// Given an iterable of DOM nodes that are about to be (or have just been)
+// removed, find every `data-vibe-component-id` inside them and, for each id
+// whose DOM is fully gone from the live document, evict its state.
+//
+// Call this AFTER the nodes have been detached from the document so the
+// `document.querySelector` check sees the post-removal state.
+export const releaseOrphanedComponentState = (collectedIds) => {
+  if (!collectedIds || collectedIds.size === 0) return;
+  for (const id of collectedIds) {
+    if (document.querySelector(`[data-vibe-component-id="${id}"]`)) continue;
+    delete window.__vibeComponents?.[id];
+    // CLEANUP OF CURRENT STATE
+    delete window.$[id];
+  }
+};
+
+// Walk a node subtree (element or node list) and collect all
+// `data-vibe-component-id` values found on the node and its descendants.
+export const collectComponentIds = (node, into = new Set()) => {
+  if (!node) return into;
+  if (node.nodeType === 1) {
+    const id = node.getAttribute('data-vibe-component-id');
+    if (id) into.add(id);
+    node.querySelectorAll?.('[data-vibe-component-id]').forEach((el) => {
+      into.add(el.getAttribute('data-vibe-component-id'));
+    });
+  }
+  return into;
+};
+
 // Track pending fetches to cancel them if element is removed
 const pendingFetches = new WeakMap(); // element → AbortController
 
@@ -28,36 +64,31 @@ export const abortComponentFetch = (element) => {
   }
 };
 
-export const processComponent = (rootElement, onComplete, config = {}) => {
-  const debug = !!config?.debug;
-  // Only process component elements with src attribute (fetched components)
-  // Supports: <component src="..."> and <div class="component" src="...">
-  // Ignores: <component> and <div class="component"> (inline component wrappers)
-  const componentElements = rootElement.querySelectorAll('component[src], div.component[src]');
-
-  if (componentElements.length === 0) {
-    // Defer onComplete to give user code a chance to register listeners
-    // This is important when all components are pre-compiled (no src attributes)
-    if (onComplete) queueMicrotask(() => onComplete());
-    return;
+// Check if an element is nested inside another unprocessed component[src]
+const isNestedInUnprocessedComponent = (el, rootElement) => {
+  let parent = el.parentElement;
+  while (parent && parent !== rootElement) {
+    if (
+      (parent.tagName === 'COMPONENT' || parent.classList?.contains('component')) &&
+      parent.hasAttribute('src')
+    ) {
+      return true;
+    }
+    parent = parent.parentElement;
   }
+  return false;
+};
 
-  // Process just the first element - MutationObserver will trigger next call
-  const el = componentElements[0];
-
-  // Skip if component is dehydrated (vibe-dehydrate attribute or class)
+// Process a single component element: fetch HTML, execute scripts, replace DOM
+const processSingle = (el, debug) => {
+  // Skip dehydrated components
   if (el.hasAttribute(DEHYDRATE_CLASS_OR_ATTR) || el.classList.contains(DEHYDRATE_CLASS_OR_ATTR)) {
-    // Skip this component and continue to next
-    if (componentElements.length > 1) {
-      // Process next component
-      processComponent(rootElement, onComplete, config);
-    } else {
-      // Defer onComplete to give user code a chance to register listeners
-      if (onComplete) queueMicrotask(() => onComplete());
-    }
-    return;
+    return Promise.resolve();
   }
 
+  // Skip if fetch already in flight for this element
+  if (pendingFetches.has(el)) return Promise.resolve();
+
   const src = el.getAttribute('src');
 
   // Use pre-hydration slot content if available (saved by index.js before hydration ran),
@@ -75,7 +106,7 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
   const controller = new AbortController();
   pendingFetches.set(el, controller);
 
-  fetch(src, { signal: controller.signal })
+  return fetch(src, { signal: controller.signal })
     .then((r) => r.text())
     .then((html) => {
       // Parse HTML in temporary container to process component scripts
@@ -84,68 +115,94 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
 
       // Process any <script type="module"> elements
       const moduleScripts = temp.querySelectorAll('script[type="module"]');
-      moduleScripts.forEach((script) => {
-        let scriptContent = script.textContent?.trim() || '';
-        if (!scriptContent) return;
 
-        // Strip import statements (we provide component() manually)
-        // Remove lines like: import component from '...';
-        scriptContent = scriptContent.replace(/import\s+\w+\s+from\s+['"][^'"]+['"];?\s*/g, '');
+      // Process each script — collect async tasks if any have imports
+      const asyncTasks = [];
+
+      for (const script of moduleScripts) {
+        let scriptContent = script.textContent?.trim() || '';
+        if (!scriptContent) continue;
+
+        // Strip `import component from '...'` — Vibe injects the contextual
+        // component() function as a parameter (it needs access to the temp DOM)
+        scriptContent = scriptContent.replace(
+          /import\s+component\s+from\s+['"][^'"]+['"];?\s*/g,
+          ''
+        );
+
+        // Check for remaining imports that need rewriting
+        const hasImports = /import\s/.test(scriptContent);
+
+        if (hasImports) {
+          // Rewrite remaining imports to dynamic await import()
+          // Order matters: default → named → namespace → side-effect (most specific first)
+          scriptContent = scriptContent.replace(
+            /import\s+(\w+)\s+from\s+(['"][^'"]+['"])\s*;?/g,
+            'const $1 = (await import($2)).default;'
+          );
+          scriptContent = scriptContent.replace(
+            /import\s+\{([^}]+)\}\s+from\s+(['"][^'"]+['"])\s*;?/g,
+            'const {$1} = await import($2);'
+          );
+          scriptContent = scriptContent.replace(
+            /import\s+\*\s+as\s+(\w+)\s+from\s+(['"][^'"]+['"])\s*;?/g,
+            'const $1 = await import($2);'
+          );
+          scriptContent = scriptContent.replace(
+            /import\s+(['"][^'"]+['"])\s*;?/g,
+            'await import($1);'
+          );
+        }
 
-        // Generate component ID for this instance
-        const componentId = generateComponentId();
+        // Reuse component ID from HMR if available, otherwise generate new
+        const reuseIds = el._vibeReuseComponentIds;
+        const componentId = reuseIds && reuseIds.length ? reuseIds.shift() : generateComponentId();
 
-        // Provide a component() function that registers state for this component
+        // Provide a component() function that registers state for this component.
+        // Sibling tagging is handled below (before script.remove()) so it works
+        // for both sync and async scripts.
         const componentFn = (state) => {
-          // Register component state in both places:
-          // 1. __vibeComponents registry (for pre-boot components)
-          if (!window.__vibeComponents) {
-            window.__vibeComponents = {};
-          }
+          if (!window.__vibeComponents) window.__vibeComponents = {};
           window.__vibeComponents[componentId] = state;
-
-          // 2. Directly in window.$ (the reactive proxy) for post-boot components
-          if (window.$) {
-            window.$[componentId] = state;
-          }
-
-          // Tag all siblings (everything after the script in this component)
-          let sibling = script.nextElementSibling;
-          while (sibling) {
-            // Stop if we hit another module script
-            if (sibling.tagName === 'SCRIPT' && sibling.getAttribute('type') === 'module') {
-              break;
-            }
-            sibling.setAttribute('data-vibe-component-id', componentId);
-            sibling = sibling.nextElementSibling;
-          }
+          if (window.$) window.$[componentId] = state;
         };
 
         // Execute script with component() function in scope
-        // Use Function constructor to provide 'component' as a parameter
         try {
-          const executeFn = new Function('component', scriptContent);
-          executeFn(componentFn);
+          if (hasImports) {
+            // Async execution for scripts with imports
+            const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
+            asyncTasks.push(new AsyncFunction('component', scriptContent)(componentFn));
+          } else {
+            // Synchronous execution for scripts without imports (preserves boot timing)
+            const executeFn = new Function('component', scriptContent);
+            executeFn(componentFn);
+          }
         } catch (e) {
           console.warn('[vibe] Failed to execute component script:', e);
         }
 
-        // Rewrite this.property to componentId.property in siblings
-        // This allows the runtime to resolve component-scoped bindings
+        // Rewrite this.property to componentId.property in siblings.
+        // Handles both reads (@[this.x]) and writes ($.this.x in event handlers)
+        // so component() state is fully accessible from the component's own template.
         const rewriteThisBindings = (element) => {
-          const thisRegex = /@\[this\.(\w+)\]/g;
+          const bindingRegex = /@\[this\.(\w+)\]/g;
+          const writeRegex = /\$\.this\.(\w+)/g;
 
           // Rewrite in text nodes
           Array.from(element.childNodes).forEach((node) => {
             if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('@[this.')) {
-              node.textContent = node.textContent.replace(thisRegex, `@[${componentId}.$1]`);
+              node.textContent = node.textContent.replace(bindingRegex, `@[${componentId}.$1]`);
             }
           });
 
-          // Rewrite in attributes
+          // Rewrite in attributes — both @[this.x] bindings and $.this.x in event handlers
           Array.from(element.attributes || []).forEach((attr) => {
             if (attr.value.includes('@[this.')) {
-              attr.value = attr.value.replace(thisRegex, `@[${componentId}.$1]`);
+              attr.value = attr.value.replace(bindingRegex, `@[${componentId}.$1]`);
+            }
+            if (attr.value.includes('$.this.')) {
+              attr.value = attr.value.replace(writeRegex, `$.${componentId}.$1`);
             }
           });
 
@@ -155,67 +212,159 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
           });
         };
 
+        // Tag siblings with componentId and rewrite this. bindings.
+        // This runs BEFORE script.remove() so nextElementSibling is valid.
+        // For async scripts, componentFn runs later (after removal) and can't
+        // find siblings — so we tag here instead.
         let sibling = script.nextElementSibling;
         while (sibling) {
           if (sibling.tagName === 'SCRIPT' && sibling.getAttribute('type') === 'module') {
             break;
           }
+          sibling.setAttribute('data-vibe-component-id', componentId);
           rewriteThisBindings(sibling);
           sibling = sibling.nextElementSibling;
         }
 
         // Remove script from temp (we executed it manually)
         script.remove();
-      });
-
-      // Get transformed HTML from temp container (scripts removed)
-      let transformedHtml = temp.innerHTML;
-
-      // Replace props
-      Object.entries(props).forEach(([propName, propValue]) => {
-        const bindingMatch = propValue.match(/^@\[(.+)\]$/);
-
-        if (bindingMatch) {
-          // Reactive prop: replace @[propName] with @[path]
-          const path = bindingMatch[1];
-          const propPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
-          transformedHtml = transformedHtml.replace(propPattern, `@[${path}]`);
-        } else {
-          // Static prop: replace @[propName] with literal value
-          const propPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
-          transformedHtml = transformedHtml.replace(propPattern, propValue);
+      }
+
+      // Finalize: props, slots, DOM replacement
+      const finalize = () => {
+        // Get transformed HTML from temp container (scripts removed)
+        let transformedHtml = temp.innerHTML;
+
+        // Replace props — both exact @[propName] bindings and identifiers
+        // appearing inside larger expressions like @[Math.floor(propName / 100)]
+        // or conditional/iteration comment expressions like <!-- if propName -->.
+        // Matches any <!-- if ... -->, <!-- else if ... -->, or <!-- each ... -->
+        // so prop identifiers resolve there the same way they do inside @[...].
+        const DIRECTIVE_COMMENT_REGEX = /<!--\s*(if|else if|each)\s+([^]*?)\s*-->/g;
+        // Event handler attributes (onclick, oninput, onchange, …). Prop
+        // identifiers inside these are JS expressions that read/write state —
+        // substituting them gives components natural two-way binding:
+        // child writes `$.value = x`, parent passed `value="@[email]"`,
+        // substitution turns it into `$.email = x`.
+        const EVENT_ATTR_REGEX = /\bon(\w+)="([^"]*)"/g;
+
+        Object.entries(props).forEach(([propName, propValue]) => {
+          const bindingMatch = propValue.match(/^@\[(.+)\]$/);
+          const exactPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
+          // Word-boundary identifier match for substitution inside expressions.
+          // The lookbehind also excludes `.` so property accesses like `_c0.email`
+          // aren't double-substituted when the prop name is `email` — only
+          // standalone identifiers match, not property tails.
+          const idRegex = new RegExp(
+            `(?<![a-zA-Z0-9_$\\.])${escapeRegex(propName)}(?![a-zA-Z0-9_$])`,
+            'g'
+          );
+
+          const substituteInExpr = (expr, replacement) => expr.replace(idRegex, replacement);
+
+          if (bindingMatch) {
+            // Reactive prop: @[propName] → @[path], identifiers inside expressions → (path)
+            const path = bindingMatch[1];
+            transformedHtml = transformedHtml.replace(exactPattern, `@[${path}]`);
+            transformedHtml = transformedHtml.replace(BINDING_REGEX, (match, expr) => {
+              const rewritten = substituteInExpr(expr, `(${path})`);
+              return rewritten === expr ? match : `@[${rewritten}]`;
+            });
+            transformedHtml = transformedHtml.replace(
+              DIRECTIVE_COMMENT_REGEX,
+              (match, kw, expr) => {
+                const replacement = kw === 'each' ? path : `(${path})`;
+                const rewritten = substituteInExpr(expr, replacement);
+                return rewritten === expr ? match : `<!-- ${kw} ${rewritten} -->`;
+              }
+            );
+            // Event handlers: rewrite `$.propName` → `$.path` for two-way
+            // binding. Only targets state access (`$.xxx`) so DOM properties
+            // like `this.value` stay untouched.
+            const stateRegex = new RegExp(`\\$\\.${escapeRegex(propName)}(?![a-zA-Z0-9_$])`, 'g');
+            transformedHtml = transformedHtml.replace(EVENT_ATTR_REGEX, (match, evName, body) => {
+              const rewritten = body.replace(stateRegex, `$.${path}`);
+              return rewritten === body ? match : `on${evName}="${rewritten}"`;
+            });
+          } else {
+            // Static prop: @[propName] → literal value (raw),
+            // identifiers inside expressions → JS literal.
+            transformedHtml = transformedHtml.replace(exactPattern, propValue);
+            const isNumeric =
+              typeof propValue === 'string' && /^-?\d+(\.\d+)?(e[+-]?\d+)?$/i.test(propValue);
+            const isBooleanAttr = propValue === '';
+            const literal = isBooleanAttr
+              ? 'true'
+              : typeof propValue === 'string' && !isNumeric
+                ? JSON.stringify(propValue)
+                : String(propValue);
+            transformedHtml = transformedHtml.replace(BINDING_REGEX, (match, expr) => {
+              const rewritten = substituteInExpr(expr, literal);
+              return rewritten === expr ? match : `@[${rewritten}]`;
+            });
+            transformedHtml = transformedHtml.replace(
+              DIRECTIVE_COMMENT_REGEX,
+              (match, kw, expr) => {
+                const rewritten = substituteInExpr(expr, literal);
+                return rewritten === expr ? match : `<!-- ${kw} ${rewritten} -->`;
+              }
+            );
+            // Event handlers: rewrite `$.propName` → `$.literal` for static props
+            const stateRegex = new RegExp(`\\$\\.${escapeRegex(propName)}(?![a-zA-Z0-9_$])`, 'g');
+            transformedHtml = transformedHtml.replace(EVENT_ATTR_REGEX, (match, evName, body) => {
+              const rewritten = body.replace(stateRegex, `$.${literal}`);
+              return rewritten === body ? match : `on${evName}="${rewritten}"`;
+            });
+          }
+        });
+
+        // Replace <slot> with children wrapped in <slot> boundary.
+        // Allow attributes on the slot (e.g. data-vibe-component-id added by
+        // sibling tagging when a <slot> happens to be a direct sibling of the
+        // component's <script>).
+        if (children) {
+          transformedHtml = transformedHtml.replace(
+            /<slot(\s[^>]*)?>\s*<\/slot>/g,
+            (_, attrs) => `<slot${attrs || ''}>${children}</slot>`
+          );
+          transformedHtml = transformedHtml.replace(
+            /<slot(\s[^>]*)?\/>/g,
+            (_, attrs) => `<slot${attrs || ''}>${children}</slot>`
+          );
         }
-      });
 
-      // Replace <slot></slot> with children
-      if (children) {
-        transformedHtml = transformedHtml.replace(/<slot><\/slot>/g, children);
-        transformedHtml = transformedHtml.replace(/<slot\s*\/>/g, children);
-      }
+        // Clean up pending fetch tracker
+        pendingFetches.delete(el);
 
-      // Clean up pending fetch tracker
-      pendingFetches.delete(el);
+        // Replace with clean component wrapper (no src, no props)
+        // Check if element still has a parent (might have been removed during fetch)
+        if (el.parentNode) {
+          // Create clean wrapper element (preserve tag type: component or div.component)
+          const newWrapper =
+            el.tagName === 'DIV'
+              ? document.createElement('div')
+              : document.createElement('component');
 
-      // Replace with clean component wrapper (no src, no props)
-      // Check if element still has a parent (might have been removed during fetch)
-      if (el.parentNode) {
-        // Create clean wrapper element (preserve tag type: component or div.component)
-        const newWrapper =
-          el.tagName === 'DIV'
-            ? document.createElement('div')
-            : document.createElement('component');
-
-        if (el.tagName === 'DIV') {
-          newWrapper.className = 'component';
-        }
+          if (el.tagName === 'DIV') {
+            newWrapper.className = 'component';
+          }
 
-        newWrapper.innerHTML = transformedHtml;
-        el.replaceWith(newWrapper);
-        debugLog(PHASE_FETCH, src, debug);
+          newWrapper.innerHTML = transformedHtml;
+          el.replaceWith(newWrapper);
+          debugLog(PHASE_FETCH, src, debug);
 
-        // Let MutationObserver handle the mutation naturally
-        // It will call processMutations, which will call processComponent for the next component
+          // MutationObserver handles parsing and hydrating the new content.
+          // Branch nodes are registered in the manifest by mountBranch,
+          // so the observer can find parents even inside conditional branches.
+        }
+      };
+
+      // If any scripts had async imports, wait for them before finalizing.
+      // Otherwise finalize synchronously (preserves original boot timing).
+      if (asyncTasks.length > 0) {
+        return Promise.all(asyncTasks).then(finalize);
       }
+      finalize();
     })
     .catch((error) => {
       // Clean up pending fetch tracker
@@ -230,6 +379,34 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
       if (el.parentNode) {
         el.remove();
       }
-      // Don't recursively call - let MutationObserver handle it
     });
 };
+
+export const processComponent = (rootElement, onComplete, config = {}) => {
+  const debug = !!config?.debug;
+  const allComponents = rootElement.querySelectorAll('component[src], div.component[src]');
+
+  if (allComponents.length === 0) {
+    if (onComplete) queueMicrotask(() => onComplete());
+    return;
+  }
+
+  // Only process top-level components — skip those nested inside other
+  // unprocessed component[src] elements (they're slot content that will
+  // be revealed when the parent component finalizes).
+  const topLevel = Array.from(allComponents).filter(
+    (el) => !isNestedInUnprocessedComponent(el, rootElement)
+  );
+
+  if (topLevel.length === 0) {
+    if (onComplete) queueMicrotask(() => onComplete());
+    return;
+  }
+
+  // Fetch and process all top-level components in parallel.
+  // Nested components (inside finalized content) are discovered and
+  // processed by the MutationObserver → processComponent chain.
+  // onComplete is handled by checkCleanup (which fires when no
+  // component[src] elements remain).
+  topLevel.forEach((el) => processSingle(el, debug));
+};

package/runtime/conditionals.js

@@ -3,6 +3,53 @@ import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { createScopedState, renderAllIterations, initializeBlock } from './iterate.js';
 import { evalInScope } from './utils.js';
+import { collectComponentIds, releaseOrphanedComponentState } from './component.js';
+
+// Registry of DOM nodes owned by conditional branches.
+// Maps a DOM node to { nodes: array_ref, index: number } so that
+// processMutations can update the reference when processComponent
+// replaces the node (el.replaceWith). Keeps conditional state in
+// sync with actual DOM without sweeps or special properties.
+export const branchNodeRegistry = new WeakMap();
+
+// Nodes that have been processed by mountBranch or renderIteration.
+// processMutations checks this to avoid re-processing already-handled content.
+export const managedNodes = new WeakSet();
+
+// Find the dot path of a conditional node in the manifest.
+// Searches for the parent element, then appends the conditional's key.
+const findConditionalPath = (node, manifest) => {
+  const parent = node.meta.startComment.parentNode;
+  const parentEntry = Object.entries(manifest).find(([_, el]) => el === parent);
+  if (!parentEntry) return null;
+
+  // Find which key this conditional has in the parent's children
+  // by matching the startComment reference
+  const [parentPath] = parentEntry;
+  return `${parentPath}.${node._key}`;
+};
+
+// Register branch tree nodes in the manifest (recursive)
+const addBranchToManifest = (tree, manifest, basePath) => {
+  if (tree.element) {
+    manifest[basePath] = tree.element;
+  }
+  if (tree.children) {
+    for (const key in tree.children) {
+      addBranchToManifest(tree.children[key], manifest, `${basePath}.${key}`);
+    }
+  }
+};
+
+// Remove branch tree nodes from the manifest (recursive)
+const removeBranchFromManifest = (tree, manifest, basePath) => {
+  delete manifest[basePath];
+  if (tree.children) {
+    for (const key in tree.children) {
+      removeBranchFromManifest(tree.children[key], manifest, `${basePath}.${key}`);
+    }
+  }
+};
 
 // Evaluate conditional expression in state context
 const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
@@ -96,12 +143,12 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
 
   // If branch doesn't exist (no else clause), just unmount current
   if (!branchData) {
-    unmountBranch(node);
+    unmountBranch(node, manifest);
     return;
   }
 
   // Unmount current branch first (if any)
-  unmountBranch(node);
+  unmountBranch(node, manifest);
 
   // Clone the template element
   const templateContent = branchData.element.childNodes;
@@ -118,8 +165,29 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
     clonedNodes,
   } = initializeBlock(templateContent, scopedState);
 
-  // Insert cloned nodes into DOM
-  clonedNodes.forEach((clonedNode) => parent.insertBefore(clonedNode, endComment));
+  // Insert cloned nodes into DOM and register in branch registry
+  clonedNodes.forEach((clonedNode, i) => {
+    parent.insertBefore(clonedNode, endComment);
+    branchNodeRegistry.set(clonedNode, { nodes: clonedNodes, index: i });
+    if (clonedNode.nodeType === 1) managedNodes.add(clonedNode);
+  });
+
+  // Integrate branch tree into the conditional node's children and manifest.
+  // This makes branch content visible to the main update loop (hydrate,
+  // renderAllConditionals, renderAllIterations) and to MutationObserver
+  // (which looks up parents in the manifest).
+  if (branchTree?.children) {
+    for (const key in branchTree.children) {
+      node.children[key] = branchTree.children[key];
+    }
+
+    const condPath = findConditionalPath(node, manifest);
+    if (condPath) {
+      for (const key in branchTree.children) {
+        addBranchToManifest(branchTree.children[key], manifest, `${condPath}.${key}`);
+      }
+    }
+  }
 
   // Recursively render any nested iterations and conditionals
   if (branchTree) {
@@ -136,18 +204,39 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
 };
 
 // Unmount currently active branch
-const unmountBranch = (node) => {
+const unmountBranch = (node, manifest) => {
   const { activeInstance } = node.runtime;
 
   if (!activeInstance) return;
 
-  // Remove all nodes from DOM
+  // Remove branch children from the conditional node's tree and manifest
+  if (activeInstance.parsedTree?.children) {
+    const condPath = manifest ? findConditionalPath(node, manifest) : null;
+
+    for (const key in activeInstance.parsedTree.children) {
+      delete node.children[key];
+      if (condPath) {
+        removeBranchFromManifest(activeInstance.parsedTree.children[key], manifest, `${condPath}.${key}`);
+      }
+    }
+  }
+
+  // Collect componentIds from the subtree BEFORE detaching so we can check
+  // after removal whether any live DOM still holds them.
+  const ids = new Set();
+  activeInstance.nodes.forEach((domNode) => collectComponentIds(domNode, ids));
+
+  // Remove all nodes from DOM and deregister from branch registry
   activeInstance.nodes.forEach((domNode) => {
+    branchNodeRegistry.delete(domNode);
     if (domNode.parentNode) {
       domNode.parentNode.removeChild(domNode);
     }
   });
 
+  // CLEANUP OF CURRENT STATE
+  releaseOrphanedComponentState(ids);
+
   // Clear active instance
   node.runtime.activeInstance = null;
 };
@@ -173,7 +262,8 @@ export const updateConditional = (node, newState, oldState, manifest, parentScop
     mountBranch(node, newBranchData, newState, manifest, parentScope);
     node.runtime.activeBranch = newBranchData;
   } else {
-    // Same branch, but state might have changed - rehydrate
+    // Same branch, but state might have changed — rehydrate bindings
+    // and update nested conditionals/iterations
     const { activeInstance } = node.runtime;
 
     if (activeInstance && activeInstance.parsedTree) {
@@ -182,6 +272,8 @@ export const updateConditional = (node, newState, oldState, manifest, parentScop
 
       const affectedElements = affected(activeInstance.parsedTree, oldState, scopedState);
       hydrate(affectedElements, scopedState);
+      renderAllConditionals(activeInstance.parsedTree, scopedState, manifest, parentScope);
+      renderAllIterations(activeInstance.parsedTree, scopedState, manifest, parentScope);
     }
   }
 };